Browse Source

大屏优化

1004749546@qq.com 4 years ago
parent
commit
68e8aed7c7
3 changed files with 51 additions and 31 deletions
  1. 4 4
      src/api/borard.js
  2. 45 25
      src/views/dataView/borard.vue
  3. 2 2
      vue.config.js

+ 4 - 4
src/api/borard.js

@@ -27,7 +27,7 @@ export const getDwTotal = params => {
 }
 // 投递量前五站站点
 export const getDeliveryTop = params => {
-  const url = `/stationRubbishRubbish/getSumRubbishDeliveryInfo`
+  const url = `/stationRubbish/getSumRubbishDeliveryInfo`
   return axios({
     url: url,
     data: params,
@@ -53,7 +53,7 @@ export const getLocationCode = params => {
 }
 // 按垃圾类型分类统计垃圾总量 (各分类垃圾量分布)
 export const getRubbishTypeTotal = params => {
-  const url = `/stationRubbishRubbish/getSumWeightPercentByRubbishType`
+  const url = `/stationRubbish/getSumWeightPercentByRubbishType`
   return axios({
     url: url,
     data: params,
@@ -62,7 +62,7 @@ export const getRubbishTypeTotal = params => {
 }
 // 垃圾产生量
 export const querySumWeight = params => {
-  const url = `/stationRubbishRubbish/querySumWeight`
+  const url = `/stationRubbish/querySumWeight`
   return axios({
     url: url,
     data: params,
@@ -71,7 +71,7 @@ export const querySumWeight = params => {
 }
 // 各机构投递量分布比例
 export const labelWeightPercent = params => {
-  const url = `/stationRubbishRubbish/querySumWeightByLabelType`
+  const url = `/stationRubbish/querySumWeightByLabelType`
   return axios({
     url: url,
     data: params,

+ 45 - 25
src/views/dataView/borard.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="dataView-content">
+    <!-- <dv-loading>Loading...</dv-loading> -->
     <div class="data-header">
       <div class="total-block">
         <div>
@@ -44,47 +45,47 @@
     <div class="data-body">
       <div class="b-middle">
         <div>
-          <dv-border-box-8 style="padding: 10px;">
+          <dv-border-box-8 ref="map" style="padding: 10px;">
             <div class="lajiliang">
               <div class="laji-title">垃圾产生量</div>
               <div class="laji-item">
                 <div class="cor1">可回收垃圾</div>
-                <div>{{ rubbishWeightData.RECYCLING }} </div>
+                <div>{{ rubbishWeightData.RECYCLING }} kg</div>
               </div>
               <div class="laji-item">
                 <div class="cor2">其它垃圾</div>
-                <div>{{ rubbishWeightData.GATHER_OTHER }} </div>
+                <div>{{ rubbishWeightData.GATHER_OTHER }} kg</div>
               </div>
               <div class="laji-item">
                 <div class="cor3">厨余垃圾</div>
-                <div>{{ rubbishWeightData.GATHER_KITCHEN }} </div>
+                <div>{{ rubbishWeightData.GATHER_KITCHEN }} kg</div>
               </div>
               <div class="laji-item">
                 <div class="cor4">建筑垃圾</div>
-                <div>{{ rubbishWeightData.GATHER_BUILDING }} </div>
+                <div>{{ rubbishWeightData.GATHER_BUILDING }} kg</div>
               </div>
               <div class="laji-item">
                 <div class="cor5">有害垃圾</div>
-                <div>{{ rubbishWeightData.HARM }} </div>
+                <div>{{ rubbishWeightData.HARM }} kg</div>
               </div>
-              <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span></div>
+              <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>kg</div>
             </div>
             <div id="map" :style="{height: '100%'}"></div>
           </dv-border-box-8>
         </div>
         <div>
           <div>
-            <dv-border-box-13>
+            <dv-border-box-13 ref="con1">
               <div id="con1" style="width: 100%;height: 100%;"></div>
             </dv-border-box-13>
           </div>
           <div>
-            <dv-border-box-13>
+            <dv-border-box-13 ref="con2">
               <div id="con2" style="width: 100%;height: 100%;"></div>
             </dv-border-box-13>
           </div>
           <div>
-            <dv-border-box-13>
+            <dv-border-box-13 ref="con4">
               <div id="con4" style="width: 100%;height: 100%;"></div>
             </dv-border-box-13>
           </div>
@@ -93,19 +94,19 @@
       <div class="b-right">
         <!-- 设备比例分布 -->
         <div>
-          <dv-border-box-13>
+          <dv-border-box-13 ref="con3">
             <div id="con3" style="width: 100%;height: 100%;"></div>
           </dv-border-box-13>
         </div>
         <!-- 各分类垃圾量分布 -->
         <div>
-          <dv-border-box-13>
+          <dv-border-box-13 ref="con5">
             <div id="con5" style="width: 100%;height: 100%;"></div>
           </dv-border-box-13>
         </div>
         <!-- 各机构投递量分布比例 -->
         <div>
-          <dv-border-box-13>
+          <dv-border-box-13 ref="con6">
             <div id="con6" style="width: 100%;height: 100%;"></div>
           </dv-border-box-13>
         </div>
@@ -403,7 +404,7 @@ export default {
           const data = res.data || []
           data.forEach(item => {
 			  item.name = item.labelName
-			  item.value = item.weight
+			  item.value = Math.round(item.weight / 1000)
           })
           const con6 = document.getElementById('con6')
           const chart6 = echarts.init(con6)
@@ -420,9 +421,9 @@ export default {
         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)
+			  this.rubbishWeightData[item] = this.formatter(Math.round((res.data.list.find(key => key.rubbishType == item).rubbishWeight) / 1000))
 		  })
-		  this.rubbishWeightTotal = res.data.total
+		  this.rubbishWeightTotal = this.formatter(Math.round(res.data.total / 1000))
         } else {
           this.rubbishWeightTotal = 0
 		  this.rubbishWeightData = {
@@ -543,15 +544,15 @@ export default {
       this.infoWindow.close() // 初始关闭信息窗关闭
       this.markerLayer.on('mousemove', this.showMarkTitle)
       // 监听地图加载完成
-      this.map.on('tilesloaded', this.getMapMark)
+      // this.map.on('tilesloaded', this.getMapMark)
     },
     // 获取热力图
     getHeatMapData () {
       // 初始化热力图并添加至map图层
       const heat = new TMap.visualization.Heat({
-        max: 350, // 热力最强阈值
+        max: 180, // 热力最强阈值
         min: 0, // 热力最弱阈值
-        height: 0, // 峰值高度
+        height: 40, // 峰值高度
         gradientColor: { // 渐变颜色
           0.2: '#0a8b4d',
           0.3: '#57e0a5',
@@ -665,7 +666,8 @@ export default {
           containLabel: true
         },
         xAxis: {
-          data: res.stationName
+          data: res.stationName,
+		  show: false
         },
         yAxis: {
           name: 'kg',
@@ -740,7 +742,8 @@ export default {
           data: arr,
           orient: 'vertical',
           textStyle: {
-            fontSize: 10
+            fontSize: 10,
+            color: '#abd7ff'
           },
           top: 15,
           left: 'right'
@@ -859,6 +862,8 @@ export default {
       chart1.setOption(option1)
       this.chart1 = chart1
       this.chart1.resize()
+	  window.addEventListener('pageshow', this.chart1.resize())
+	  on(window, 'pageshow', this.chart1.resize())
     },
     // 初始化饼图 title: 标题 data:数据 bit:单位
     initPie (chart, title, data, bit) {
@@ -869,7 +874,6 @@ export default {
 			 legend.push(p)
         })
 	 }
-	 console.log(legend, 'legend--------')
       const option = {
         color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
         title: {
@@ -888,7 +892,7 @@ export default {
         legend: {
 		  orient: 'horizontal',
 		  left: 'center',
-		  bottom: 'bottom',
+		  bottom: '5',
 		  padding: 5,
 		  textStyle: {
 		    color: '#abd7ff',
@@ -948,9 +952,14 @@ export default {
       }
 	  return option
     }
+  },
+  watch: {
+
   },
   mounted () {
     const that = this
+    // 默认定位在陕西省咸阳市
+    this.initMap({ lat: 34.32932, lng: 108.70929 })
     window.onresize = () => {
       return (() => {
         that.chart1.resize()
@@ -961,13 +970,24 @@ export default {
         that.chart6.resize()
       })()
     }
+    // 监听页面刷新,重置边框宽高
+    window.addEventListener('pageshow', (e) => {
+      // console.log(e, this.chart1, 'eeeeeeeeeeee')
+      this.$refs.map.initWH()
+      this.$refs.con1.initWH()
+      this.$refs.con2.initWH()
+      this.$refs.con3.initWH()
+      this.$refs.con4.initWH()
+      this.$refs.con5.initWH()
+      this.$refs.con6.initWH()
+    })
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      vm.getMapMark()
       setTimeout(() => {
         vm.initChart()
-        // 默认定位在陕西省咸阳市
-        vm.initMap({ lat: 34.32932, lng: 108.70929 })
+
         if (vm.queryParam.cityCode != '') {
           vm.getAreaListRequest(vm.queryParam.cityCode)
         }

+ 2 - 2
vue.config.js

@@ -108,8 +108,8 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'http://192.168.16.221:8301/gc-admin/',
-        // target: 'https://lese.test.sxzxyj.net/gc-admin/',
+        // target: 'http://192.168.16.103:8301/gc-admin/',
+        target: 'https://lese.test.sxzxyj.net/gc-admin/',
         ws: false,
         changeOrigin: true,
         pathRewrite: {