map数据对接

最新推荐文章于 2024-01-16 11:15:10 发布
最新推荐文章于 2024-01-16 11:15:10 发布
阅读量185 收藏
点赞数
分类专栏： 项目碎块-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43618030/article/details/115167140
版权 
data() {
    return {
 dataList:{},
 }
 }

获取数据
在这里插入图片描述
在这里插入图片描述

<template>
  <span slot="action">
    <!--  <span slot="action" slot-scope="text, record"> -->
    <div class="index-container-ty">
      <a-spin :spinning="loading">
        <a-row type="flex" justify="start" :gutter="1">
          <a-col :sm="24" :lg="8">
            <a-card>
              <div slot="title" class="index-md-title">
                <img src="../../assets/zaiban.png" />
                未分配任务【{{ dataSource1.total }}】
              </div>
              <div slot="extra">
                <a v-if="dataSource1 && dataSource1.length > 0" slot="footer" @click="goPage"
                  >更多 <a-icon type="double-right"
                /></a>
              </div>
              <a-table
                :class="'my-index-table tytable2'"
                ref="table2"
                size="small"
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource1.records"
                :pagination="false"
              >
                <template slot="ellipsisText" slot-scope="text">
                  <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                </template>

                <template slot="dayWarnning" slot-scope="text, record">
                  <a-icon type="bulb" theme="twoTone" style="font-size: 22px" :twoToneColor="getTipColor(record)" />
                </template>
                <template slot="action" slot-scope="text,record">
                  <a @click="handleData(record)">详情</a>
                </template>
              </a-table>
              <div class="pagination">
                <a-pagination size="small" :current="dataSource1.current" :total="dataSource1.total" @change="onChangePage1" show-quick-jumper :page-size="5"/>
              </div>
            </a-card>
          </a-col>

          <a-col :sm="24" :lg="8">
            <a-card>
              <div slot="title" class="index-md-title">
                <img src="../../assets/guaz.png" />
                未完成任务【{{ dataSource2.total }}】
              </div>
              <a-table
                :class="'my-index-table tytable4'"
                ref="table4"
                size="small"
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource2.records"
                :pagination="false"
              >
                <template slot="ellipsisText" slot-scope="text">
                  <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                </template>

                <template slot="dayWarnning" slot-scope="text, record">
                  <a-icon type="bulb" theme="twoTone" style="font-size: 22px" :twoToneColor="getTipColor(record)" />
                </template>

                <span slot="action" slot-scope="text, record">
                  <a @click="handleData">详情</a>
                </span>
              </a-table>
              <div class="pagination">
                <a-pagination size="small" :current="dataSource2.current" :total="dataSource2.total" @change="onChangePage2" show-quick-jumper :page-size="5"/>
              </div>
            </a-card>
          </a-col>

          <a-col :sm="24" :lg="8">
            <a-card >
              <div slot="title" class="index-md-title">
                <img src="../../assets/daiban.png" />
                已完成任务【{{ dataSource3.total }}】
              </div>
              <a-table
                :class="'my-index-table tytable1'"
                ref="table1"
                size="small"
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource3.records"
                :pagination="false"
              >
                <template slot="ellipsisText" slot-scope="text">
                  <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                </template>

                <template slot="dayWarnning" slot-scope="text, record">
                  <a-icon type="bulb" theme="twoTone" style="font-size: 22px" :twoToneColor="getTipColor(record)" />
                </template>

                <span slot="action" slot-scope="text, record">
                  <a @click="handleData">详情</a>
                </span>
              </a-table>
              <div id="components-pagination-demo-mini" class="pagination">
                <a-pagination size="small" :current="dataSource3.current" :total="dataSource3.total" @change="onChangePage3" show-quick-jumper :page-size="5"/>
              </div>
            </a-card>
          </a-col>

          <a-col :span="24">
            <div style="height: 66px"></div>
          </a-col>

          <!-- 饼状图 -->
          <a-col :span="24" :lg="13">
            <div>
              <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
                <v-tooltip :showTitle="false" dataKey="item*percent" />
                <v-axis />
                <v-legend dataKey="item" />
                <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
                <v-coord type="theta" />
              </v-chart>
            </div>
          </a-col>

          <!-- 分组柱状图 -->
          <a-col :span="24" :lg="11">
            <div>
              <v-chart :forceFit="true" :height="height" :data="data1">
                <v-tooltip />
                <v-axis />
                <v-legend />
                <v-bar position="月份*月均降雨量" color="name" :adjust="adjust" />
              </v-chart>
            </div>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </span>
</template>

<script>
import noDataPng from '@/assets/nodata.png'
import JEllipsis from '@/components/jeecg/JEllipsis'
import { getToBigScreen } from '@/api/api'
const DataSet = require('@antv/data-set') //饼状图

//饼状图
const sourceData = [
  { item: '未分配任务', count: 40 },
  { item: '未完成任务', count: 21 },
  { item: '已完成任务', count: 17 },
]
//饼状图
const scale = [
  {
    dataKey: 'percent',
    min: 0,
    formatter: '.0%',
  },
]
//饼状图
const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent',
})

const data = dv.rows

// 分组柱状图
const DataSet1 = require('@antv/data-set')

const sourceData1 = [
  {
    name: '未分配任务',
    'Jan.': 18.9,
    'Feb.': 28.8,
    'Mar.': 39.3,
    'Apr.': 1.4,
    May: 47,
    'Jun.': 20.3,
    'Jul.': 24,
    'Aug.': 35.6,
  },
  {
    name: '未完成任务',
    'Jan.': 12.4,
    'Feb.': 23.2,
    'Mar.': 34.5,
    'Apr.': 9.7,
    May: 52.6,
    'Jun.': 35.5,
    'Jul.': 37.4,
    'Aug.': 42.4,
  },
  {
    name: '已完成任务',
    'Jan.': 12.4,
    'Feb.': 23.2,
    'Mar.': 34.5,
    'Apr.': 9.7,
    May: 52.6,
    'Jun.': 35.5,
    'Jul.': 37.4,
    'Aug.': 42.4,
  },
]

const dv1 = new DataSet1.View().source(sourceData1)
dv1.transform({
  type: 'fold',
  fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'],
  key: '月份',
  value: '月均降雨量',
})
const data1 = dv1.rows

export default {
  name: 'IndexTask',
  components: { JEllipsis, getToBigScreen },
  data() {
    return {
      //饼状图
      data,
      scale,
      data1,
      height: 390,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
      labelConfig: [
        'percent',
        {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          },
        },
      ],

      adjust: [
        {
          type: 'dodge',
          marginRatio: 1 / 32,
        },
      ],

      loading: false,
      textMaxLength: 8,
      dataList:{},
      dataSource1: {},
      dataSource2: {},
      dataSource3: {},
      // current:1,
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 8,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name',
          width: 88,
        },
        {
          title: 'Tool简介',
          align: 'center',
          dataIndex: 'introduction',
        },
        {
          title: 'Tool目的',
          align: 'center',
          dataIndex: 'purpose',
          scopedSlots: { customRender: 'ellipsisText' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  created() {
    this.mock()
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取数据

    getList(){
      let params = {
        // type:'',
        pageSize : 5,
        pageNo : 1
      }
      getToBigScreen(params).then(res => {
        if(res.success) {
          this.dataList = res.result
          this.dataSource1 = res.result.weifenpei
          this.dataSource2 = res.result.weiwancheng
          this.dataSource3 = res.result.yiwancheng
        }else{
          this.$message.error(res.message)
        }
        console.log(res)
      })
    },

    reGetList3(){
      let params = {
        pageSize : 5,
        pageNo : this.dataSource3.current,
        type:3
      }
      getToBigScreen(params).then(res => {
        if(res.success) {
          this.dataSource3 = res.result.yiwancheng
        }else{
          this.$message.error(res.message)
        }
        console.log(res)
      })
    },
    reGetList1(){
      let params = {
        pageSize : 5,
        pageNo : this.dataSource1.current,
        type:1
      }
      getToBigScreen(params).then(res => {
        if(res.success) {
          this.dataSource1 = res.result.weifenpei
        }else{
          this.$message.error(res.message)
        }
        console.log(res)
      })
    },
    reGetList2(){
      let params = {
        pageSize : 5,
        pageNo : this.dataSource2.current,
        type:2
      }
      getToBigScreen(params).then(res => {
        if(res.success) {
          this.dataSource2 = res.result.weiwancheng
        }else{
          this.$message.error(res.message)
        }
        console.log(res)
      })
    },

    mock(rd) {
      console.log('你好==' + JSON.stringify(rd))
      getToBigScreen().then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
      })
    },

    getTipColor(rd) {
      let num = rd.restDay
      if (num <= 0) {
        return tip_red
      } else if (num >= 1 && num < 4) {
        return tip_yellow
      } else if (num >= 4) {
        return tip_green
      }
    },
    goPage() {
      this.$message.success('请根据具体业务跳转页面')
      //this.$router.push({ path: '/comp/mytask' })
    },

    ifNullDataSource(ds, tb) {
      this.$nextTick(() => {
        if (!ds || ds.length == 0) {
          var tmp = document.createElement('img')
          tmp.src = noDataPng
          tmp.width = 300
          let tbclass = `${tb} .ant-table-placeholder`
          document.querySelector(tbclass).innerHTML = ''
          document.querySelector(tbclass).appendChild(tmp)
        }
      })
    },
    handleData(data) {
      this.$router.push({path:'/store/ToToolsList',query:{data}})


      console.log(data)
      this.$message.success('进入详情页面')
    },

    onChangePage3(page) {
      this.dataSource3.current = page
      this.reGetList3()
    },
    onChangePage1(page) {
      this.dataSource1.current = page
      this.reGetList1()
    },
    onChangePage2(page) {
      this.dataSource2.current = page
      this.reGetList2()
    },
  },
}
</script>

<style>
.my-index-table {
  height: 270px;
}
.my-index-table table {
  font-size: 14px !important;
}

.index-container-ty .ant-card-head-title {
  padding-top: 6px;
  padding-bottom: 6px;
}
.index-container-ty .ant-card-extra {
  padding: 0;
}
.index-container-ty .ant-card-extra a {
  color: #fff;
}
.index-container-ty .ant-card-extra a:hover {
  color: #152ede;
}
.index-container-ty .ant-card-head-wrapper,
.index-container-ty .ant-card-head {
  line-height: 24px;
  min-height: 24px;
  /*background: #90aeff;*/
  background: #7196fb;
}
.index-container-ty .ant-card-body {
  padding: 10px 12px 0px 12px;
}

/* .index-container-ty .ant-card-actions{background: #fff}
   .index-container-ty .ant-card-actions li {margin:2px 0;}
   .index-container-ty .ant-card-actions > li > span{width: 100%}*/

.index-container-ty .ant-table-footer {
  text-align: right;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border-top: 2px solid #f7f1f1;
}

.index-md-title {
  postion: relative;
  padding-left: 24px;
  width: 100%;
  color: #fff;
  font-size: 21px;
  font-family: cursive;
}
.index-md-title img {
  position: absolute;
  height: 32px;
  top: 2px;
  left: 14px;
}

.index-container-ty .ant-card-body {
  /*border-left:1px solid #90aeff;
    /*border-right:1px solid #90aeff;
    border-bottom:1px solid #90aeff;*/
}

.index-container-ty .ant-table-thead > tr > th,
.index-container-ty .ant-table-tbody > tr > td {
  border-bottom: 1px solid #90aeff;
}

.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th,
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th {
  border-bottom: 1px solid #90aeff;
}

.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th {
  border-bottom: 1px solid #90aeff;
}

.index-container-ty .ant-table-small {
  border: 1px solid #90aeff;
}

.index-container-ty .ant-table-placeholder {
  padding: 0;
}
/*.ant-card-body {*/
/*  position: relative!important;*/
/*}*/
  .pagination {
    margin: 10px auto;
    text-align: center;
  }
</style>
HQChart实战教程37-新浪分钟K线数据对接-js版本
小银
04-02 1985
HQChart实战教程37-新浪分钟K线数据对接-js版本效果图新浪分钟K线接口接口地址参数说明symbolscaledatalen跨域hqchart对接预备知识教程注意点配置后台周期自动更新周期金额字段换手率，筹码交流QQ群: 950092318HQChart代码地址 效果图 新浪分钟K线接口 接口地址 http://money.finance.sina.com.cn/quotes_service/api/json_v2.php/CN_MarketData.getKLineData?symbol=sz0
SuperMap iPortal 对接postgis业务数据库(二)：大屏使用接口数据更新图表和地图
小客服的博客
11-01 577
SuperMap iPortal 对接postgis业务数据库(二)：大屏使用接口数据更新图表和地图 低代码编辑器
map集合方法
weixin_43186788的博客
04-08 88
map.put(key,value); //添加方法（第一次添加返回值为null、因为第一次添加的时候没有值，所以说返回的是被覆盖的值） map.remove(“key”); //根据键删除元素，返回对应的值 map.containskey(“key”); //判断是否包含传入的键 map.containsvalue(value); //判断是否包含传入的值 map.isempty(); //判断集合是否为空 Collectio
地图对接汇总(百度地图)
weixin_34006965的博客
09-24 175
&lt;span style="font-family:Microsoft YaHei;font-size:14px;"&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
对接高德地图的总结
热门推荐
SchopenhauerZhang的博客
11-05 1万+
对接高德地图API的总结近期项目中需要对接高德地图做图形（画一个区域范围），所以把用的对接知识总结一下，先看个简单的效果图： 当然多看点别人的也不错，别人家的demo, 酸奶小妹目录用 [TOC]来生成目录： [TOC] 引用JS（高德地图WEB端JSApi） 开始渲染地图 几个常见的工具 事件监听 有用的参数 离线写博客 更多 引用JS（高德地图WEB端JSApi）引入高德地图的js高德地图J
js获取后台map格式数据
boyames的博客
08-11 2307
js获取后台map格式数据 后台：（得先后数据） Map res = new HashMap(2); res.put("result","error2"); res.put("message","验证码不能为空！"); js： $.ajax({ type:"POST", url:"http://localhost:8080/users/checkLogin", data:checkUserParams, dataType:"json",
开发中数据对接涉及的常见事项
qq_57610796的博客
01-04 706
数据对接在开发过程中非常常见，与平台合作开发或者使用其他平台的接口是家常便饭，虽然对接的平台各有不同，但是对接方式基本大同小异，下面整理了一些自己在开发过程中对接时遇到的一些方式或事项。
前端与php数据对接,php 接口与前端数据交互实现示例代码
weixin_29800471的博客
03-10 1878
最近在做前后端数据交互的尝试，也跳了很多坑，使用的是php+bootstrap-table+js，把一些收获记录在这里，方便查询。这个小项目，仅有3个文件，分别为：1.crud.html2.data.php3.crud.sql数据交互实现1：查询1.mysql 数据库建表2.php查询接口3.前端数据展现mysql 数据库建表数据库名称：crud第一个表名：t_users主键：user_id，自增...
三方接口对接常见数据处理方式汇总
Carroll的博客
01-16 2008
日常开发中，我们经常会对接各种各样的第三方平台，常常需要对接口接入的数据参数进行处理，比如验签，解密，数据转换，数据二次封装等情况，本文总结了一些常见的数据处理案例，基本满足日常所见的各种情况，以供学习。POST 一般用来向服务端提交数据，本文主要讨论 POST 请求数据的几种方式。
JAVA实现两个系统数据对接
qq_39257746的博客
05-06 8750
ccss
路侧RSU数据对接方案11-231
08-08
这些主题按照不同的数据类型进行区分，例如BSM（Basic Safety Message）、SPAT（Signal Phase and Timing）、RSI（Road Side Information）、RSM（Road Side Message）、MAP（Map Data）等。每个主题都有特定的上行...
layui之数据表格--与后台交互获取数据的方法
10-16
Map, Object> result = new HashMap(); result.put("code", 0); // 成功状态码 result.put("msg", ""); // 消息 result.put("count", getUserService().findTotalRecord()); // 总记录数 result.put("data", ...
三方对接接口数据安全问题
白云苍狗
07-29 677
三方对接、AES加密解密、每次请求均会对请求来源以及数据的合法性进行校验，采取以下策略，之后接口明细中会说明采用哪种加密方式。接口说明获取调用凭据，有效期24h、获取后之后调用接口添加到请求头。并通过MD5对全部数据进行加密、接收方对其进行校验证，示例如下。涉及敏感数据，采用AES进行加解密，注意妥善保管密钥，示例如下。常规数据加密，每次请求数据添加随机字符串。小记一下在与第三方对接过程的一些操作。...
Element组件Message报错this.$message is not a function的解决方法
fishermanMr
02-22 3495
import { Message } from 'element-ui' Vue.use(Message) Vue.prototype.$message = Message
RSA前端加密（vue项目登陆）
fishermanMr
06-04 2377
1，安装插件 npm install jsencrypt --save 2，安装成功之后，在main.js文件引入 import JSEncrypt from 'jsencrypt';//引入模块 Vue.prototype.$jsEncrypt = JSEncrypt;//配置全局变量 3，在需要使用的组件（本文以登录页面对账号和密码进行了加密） getPublicKey({}).then((res)=>{//请求公钥接口 const j
jeecg自定义详情页面
fishermanMr
01-23 1666
流程 1.list页面 1.1详情按钮绑定事件 <a @click="xiangqing(record)">详情</a> 1.2 methods写入事件 methods: { xiangqing(record) { this.$refs.xiangqingModal.edit(record); this.$refs.xiangqingModal.title="详情"; this.$refs.xiangqingModal.disableS
jeecg无法正常退出登录
fishermanMr
01-21 1609
再main.js查看下引入的依赖。 如element import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
jeecg字段必填项，有心标
fishermanMr
02-18 1354
v-decorator="['name', validatorRules.name]" <a-input v-decorator="['name', validatorRules.name]" placeholder="请输入Tool名称"></a-input> data() { return { validatorRules: { name: { rules: [{ required: true, message: '请输入Tool名
deepseek数据分析api对接
最新发布
03-04
### 如何实现DeepSeek数据分析API的集成与对接 #### 使用Python进行DeepSeek API集成 为了有效地利用DeepSeek的强大功能，开发者可以通过多种编程语言和技术栈来调用其API。对于Python环境下的开发人员来说，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值