1004749546@qq.com 4 yıl önce
ebeveyn
işleme
51f9193636
3 değiştirilmiş dosya ile 122 ekleme ve 69 silme
  1. BIN
      public/ldt.png
  2. 26 0
      src/api/borard.js
  3. 96 69
      src/views/dataView/borard.vue

BIN
public/ldt.png


+ 26 - 0
src/api/borard.js

@@ -17,6 +17,14 @@ export const getTimeSharingLog = params => {
     method: 'POST'
   })
 }
+// 获取试点单位数(网点数量)
+export const getDwTotal = params => {
+  const url = `/station/countStationNum`
+  return axios({
+    url: url,
+    method: 'get'
+  })
+}
 // 投递量前五站站点
 export const getDeliveryTop = params => {
   const url = `/stationRubbishRubbish/getSumRubbishDeliveryInfo`
@@ -61,3 +69,21 @@ export const querySumWeight = params => {
     method: 'POST'
   })
 }
+// 各机构投递量分布比例
+export const labelWeightPercent = params => {
+  const url = `/stationRubbishRubbish/querySumWeightByLabelType`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 设备分布比例
+export const devicePercent = params => {
+  const url = `/device/queryDeviceByLabel`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}

+ 96 - 69
src/views/dataView/borard.vue

@@ -128,7 +128,10 @@ import {
   getHeatMapData,
   getLocationCode,
   getRubbishTypeTotal,
-  querySumWeight
+  querySumWeight,
+  labelWeightPercent,
+  devicePercent,
+  getDwTotal
 } from '@/api/borard.js'
 import {
   getProvince,
@@ -240,6 +243,8 @@ export default {
       }
       this.addrDistrictList = []
       this.queryParam.districtCode = ''
+	  // 地图经纬度
+	  this.getLocationCode()
       this.getAreaListRequest(e.target.value)
       this.initChart()
     },
@@ -300,26 +305,25 @@ export default {
     },
     // 获取用户总数
     getUser () {
-      getUserTotal({
-        'provinceCode': this.queryParam.provinceCode,
-        'cityCode': this.queryParam.cityCode,
-        'districtCode': this.queryParam.districtCode
-      }).then(res => {
+      getUserTotal({}).then(res => {
         const data = res.data || 0
         this.userTotal = data
       })
     },
     // 获取设备总数
     getDevice () {
-      getDeviceTotal({
-        'provinceCode': this.queryParam.provinceCode,
-        'cityCode': this.queryParam.cityCode,
-        'districtCode': this.queryParam.districtCode
-      }).then(res => {
+      getDeviceTotal({}).then(res => {
         const data = res.data || 0
         this.devTotal = data
       })
     },
+    // 获取试点单位数(网点数量)
+    getDwTotal () {
+	  getDwTotal({}).then(res => {
+	    const data = res.data.count || 0
+	    this.dwTotal = data
+	  })
+    },
     // 获取新用户注册量
     getNewRegister () {
       const params = {
@@ -373,29 +377,52 @@ export default {
         }
       })
     },
+    // 设备分布比例
+    getDevicePercent () {
+      devicePercent({}).then(res => {
+        console.log(res, '------------设备分布比例')
+        const data = res.data || []
+
+        data.forEach(item => {
+          item.name = item.LABEL_NAME
+          item.value = item.DEVCIE_NUM
+        })
+        const con3 = document.getElementById('con3')
+        const chart3 = echarts.init(con3)
+        const option3 = this.initPie(chart3, '设备分布比例', data, '个')
+        chart3.setOption(option3)
+        this.chart3 = chart3
+        this.chart3.resize()
+      })
+    },
+    // 各机构投递量分布比例
+    getLabelWeightPercent () {
+      labelWeightPercent({}).then(res => {
+        console.log(res, '-------各机构投递量分布比例')
+        if (res.status == 200) {
+          const data = res.data || []
+          data.forEach(item => {
+			  item.name = item.labelName
+			  item.value = item.weight
+          })
+          const con6 = document.getElementById('con6')
+          const chart6 = echarts.init(con6)
+          const option6 = this.initPie(chart6, '各机构投递量分布比例', data, '吨')
+          chart6.setOption(option6)
+          this.chart6 = chart6
+          this.chart6.resize()
+        }
+      })
+    },
     // 垃圾产生量
     getRubbishWeight () {
-      // const params = {
-      //   'findRubbishDataBeginDate': this.beginDate,
-      //   'findRubbishDataEndDate': this.endDate,
-      //   'provinceCode': this.queryParam.provinceCode,
-      //   'cityCode': this.queryParam.cityCode,
-      //   'districtCode': this.queryParam.districtCode
-      // }
-	  const params = {
-	    'findRubbishDataBeginDate': '',
-	    'findRubbishDataEndDate': '',
-	    'provinceCode': '',
-	    'cityCode': '',
-	    'districtCode': ''
-	  }
-      querySumWeight(params).then(res => {
+      querySumWeight({}).then(res => {
         console.log(res, '垃圾产生量')
         if (res.status == 200) {
 		  Object.keys(this.rubbishWeightData).map(item => {
-			  this.rubbishWeightData[item] = (res.data.list.find(key => key.rubbishType == item).rubbishWeight) / 1000
+			  this.rubbishWeightData[item] = (res.data.list.find(key => key.rubbishType == item).rubbishWeight)
 		  })
-		  this.rubbishWeightTotal = res.data.total / 1000
+		  this.rubbishWeightTotal = res.data.total
         } else {
           this.rubbishWeightTotal = 0
 		  this.rubbishWeightData = {
@@ -410,14 +437,7 @@ export default {
     },
     // 各分类垃圾量分布
     getRubbishTypeChart () {
-      const params = {
-        'findRubbishDataBeginDate': '',
-        'findRubbishDataEndDate': '',
-        'provinceCode': '',
-        'cityCode': '',
-        'districtCode': ''
-      }
-      getRubbishTypeTotal(params).then(res => {
+      getRubbishTypeTotal({}).then(res => {
         console.log(res)
         let data = []
         if (res.status == 200 && res.data) {
@@ -498,8 +518,8 @@ export default {
         styles: {
           // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
           'myStyle': new TMap.MarkerStyle({
-            'width': 16, // 点标记样式宽度(像素)
-            'height': 20, // 点标记样式高度(像素)
+            'width': 40, // 点标记样式宽度(像素)
+            'height': 40, // 点标记样式高度(像素)
             'src': '../ldt.png', // 图片路径
             // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
             'anchor': {
@@ -533,9 +553,9 @@ export default {
         min: 0, // 热力最弱阈值
         height: 0, // 峰值高度
         gradientColor: { // 渐变颜色
-          0.6: '#673198',
-          0.8: '#e53390',
-          0.9: '#ffc95a'
+          0.2: '#0a8b4d',
+          0.3: '#57e0a5',
+          0.5: '#05a8a4'
         },
         radius: 30 // 最大辐射半径
       }).addTo(this.map)
@@ -565,6 +585,7 @@ export default {
     },
     // 获取地图点坐标
     getMapMark () {
+      this.getHeatMapData()
       getMapStation({
         'provinceCode': this.queryParam.provinceCode,
         'cityCode': this.queryParam.cityCode,
@@ -589,7 +610,6 @@ export default {
         // 增加点标记
         this.markerLayer.add(data)
       })
-      this.getHeatMapData()
     },
     // 显示地图标记点名称
     showMarkTitle (evt) {
@@ -603,8 +623,8 @@ export default {
       this.getUser()
       // 设备总数
       this.getDevice()
-      // 地图
-      this.getLocationCode()
+	  // 网点总数
+      this.getDwTotal()
       // 新注册用户
       this.getNewRegister()
       // 分时投递
@@ -614,29 +634,9 @@ export default {
       // 各分类垃圾量分布
       this.getRubbishTypeChart()
       // 设备分布比例
-      const con3 = document.getElementById('con3')
-      const chart3 = echarts.init(con3)
-	  const data = [{
-        name: '居民小区',
-        value: 49
-      },
-      {
-        name: '学校',
-        value: 14
-      },
-      {
-        name: '公共机构',
-        value: 32
-      },
-      {
-        name: '企业',
-        value: 5
-      }
-      ]
-	  const option3 = this.initPie(chart3, '设备分布比例', data)
-      chart3.setOption(option3)
-      this.chart3 = chart3
-      this.chart3.resize()
+	  this.getDevicePercent()
+      // 各机构投递量分布比例
+      this.getLabelWeightPercent()
       // 网点投递量排名
       this.getDeliveryTop()
     },
@@ -860,8 +860,16 @@ export default {
       this.chart1 = chart1
       this.chart1.resize()
     },
-    // 初始化饼图
-    initPie (chart, title, data) {
+    // 初始化饼图 title: 标题 data:数据 bit:单位
+    initPie (chart, title, data, bit) {
+	 const legend = []
+	 if (bit) {
+        data.map(item => {
+			 const p = `${item.name}: ${item.value}${bit}`
+			 legend.push(p)
+        })
+	 }
+	 console.log(legend, 'legend--------')
       const option = {
         color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
         title: {
@@ -877,6 +885,23 @@ export default {
           trigger: 'item',
           formatter: `{b} : {d}%`
         },
+        legend: {
+		  orient: 'horizontal',
+		  left: 'center',
+		  bottom: 'bottom',
+		  padding: 5,
+		  textStyle: {
+		    color: '#abd7ff',
+            fontSize: 10
+		  },
+		  show: !!bit,
+		  formatter: function (name) {
+			  if (bit) {
+              const p = data.find(item => item.name == name)
+              return name + (p ? (':' + p.value + bit) : '')
+			  }
+		  }
+        },
         series: [{
           type: 'pie',
           radius: ['30%', '50%'],
@@ -941,6 +966,8 @@ export default {
     next(vm => {
       setTimeout(() => {
         vm.initChart()
+        // 默认定位在陕西省咸阳市
+        vm.initMap({ lat: 34.32932, lng: 108.70929 })
         if (vm.queryParam.cityCode != '') {
           vm.getAreaListRequest(vm.queryParam.cityCode)
         }