1004749546@qq.com 4 年 前
コミット
cf0766b51d
3 ファイル変更393 行追加192 行削除
  1. 20 2
      src/api/borard.js
  2. 372 189
      src/views/dataView/borard.vue
  3. 1 1
      vue.config.js

+ 20 - 2
src/api/borard.js

@@ -19,7 +19,7 @@ export const getTimeSharingLog = params => {
 }
 // 投递量前五站站点
 export const getDeliveryTop = params => {
-  const url = `/deliveryLog/deliveryStationInfo`
+  const url = `/stationRubbishRubbish/getSumRubbishDeliveryInfo`
   return axios({
     url: url,
     data: params,
@@ -42,4 +42,22 @@ export const getLocationCode = params => {
     url: url,
     method: 'GET'
   })
-}
+}
+// 按垃圾类型分类统计垃圾总量 (各分类垃圾量分布)
+export const getRubbishTypeTotal = params => {
+  const url = `/stationRubbishRubbish/getSumWeightPercentByRubbishType`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 垃圾产生量
+export const querySumWeight = params => {
+  const url = `/stationRubbishRubbish/querySumWeight`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}

+ 372 - 189
src/views/dataView/borard.vue

@@ -27,7 +27,8 @@
         </select> -->
           <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
             <option value="">全部</option>
-            <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
+            <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}
+            </option>
           </select>
           <!-- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
           <option value="">全部区/县</option>
@@ -48,25 +49,25 @@
               <div class="laji-title">垃圾产生量</div>
               <div class="laji-item">
                 <div class="cor1">可回收垃圾</div>
-                <div>1000 吨</div>
+                <div>{{ rubbishWeightData.RECYCLING }} 吨</div>
               </div>
               <div class="laji-item">
                 <div class="cor2">其它垃圾</div>
-                <div>1000 吨</div>
+                <div>{{ rubbishWeightData.GATHER_OTHER }} 吨</div>
               </div>
               <div class="laji-item">
                 <div class="cor3">厨余垃圾</div>
-                <div>1000 吨</div>
+                <div>{{ rubbishWeightData.GATHER_KITCHEN }} 吨</div>
               </div>
               <div class="laji-item">
                 <div class="cor4">建筑垃圾</div>
-                <div>1000 吨</div>
+                <div>{{ rubbishWeightData.GATHER_BUILDING }} 吨</div>
               </div>
               <div class="laji-item">
                 <div class="cor5">有害垃圾</div>
-                <div>1000 吨</div>
+                <div>{{ rubbishWeightData.HARM }} 吨</div>
               </div>
-              <div class="laji-total">共计<span>5000</span>吨</div>
+              <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>吨</div>
             </div>
             <div id="map" :style="{height: '100%'}"></div>
           </dv-border-box-8>
@@ -90,19 +91,22 @@
         </div>
       </div>
       <div class="b-right">
+        <!-- 设备比例分布 -->
         <div>
           <dv-border-box-13>
             <div id="con3" style="width: 100%;height: 100%;"></div>
           </dv-border-box-13>
         </div>
+        <!-- 各分类垃圾量分布 -->
         <div>
           <dv-border-box-13>
             <div id="con5" style="width: 100%;height: 100%;"></div>
           </dv-border-box-13>
         </div>
+        <!-- 各机构投递量分布比例 -->
         <div>
           <dv-border-box-13>
-            <div id="con5" style="width: 100%;height: 100%;"></div>
+            <div id="con6" style="width: 100%;height: 100%;"></div>
           </dv-border-box-13>
         </div>
       </div>
@@ -122,9 +126,15 @@ import {
   getTimeSharingLog,
   getDeliveryTop,
   getHeatMapData,
-  getLocationCode
+  getLocationCode,
+  getRubbishTypeTotal,
+  querySumWeight
 } from '@/api/borard.js'
-import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
+import {
+  getProvince,
+  getCityByPro,
+  getDistrictByCity
+} from '@/api/station'
 import moment from 'moment'
 import getDate from '@/libs/getDate.js'
 export default {
@@ -146,31 +156,32 @@ export default {
         sort: 27,
         type: '2'
       }], //  省下拉
-      addrCityList: [
-        {
-          'id': '610100',
-          'sort': 1,
-          'parentId': '610000',
-          'parentIds': '100000,610000',
-          'isOpen': '0',
-          'name': '西安市',
-          'code': '610100'
-        },
-        {
-          'id': '610400',
-          'sort': 4,
-          'parentId': '610000',
-          'parentIds': '100000,610000',
-          'isOpen': '0',
-          'name': '咸阳市',
-          'code': '610400'
-        }
+      addrCityList: [{
+        'id': '610100',
+        'sort': 1,
+        'parentId': '610000',
+        'parentIds': '100000,610000',
+        'isOpen': '0',
+        'name': '西安市',
+        'code': '610100'
+      },
+      {
+        'id': '610400',
+        'sort': 4,
+        'parentId': '610000',
+        'parentIds': '100000,610000',
+        'isOpen': '0',
+        'name': '咸阳市',
+        'code': '610400'
+      }
       ], //  市下拉
       addrDistrictList: [], //  区下拉
       chart1: null,
       chart2: null,
       chart3: null,
       chart4: null,
+      chart5: null,
+      chart6: null,
       userTotal: 0,
       devTotal: 0,
       dwTotal: 0,
@@ -178,8 +189,16 @@ export default {
       map: null, // 地图对象
       markerLayer: null, // 地图点标记对象
       infoWindow: null, // 地图信息窗口对象
-	    beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
-	    endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
+      beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
+      endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59'), // 查询结束时间
+	  rubbishWeightData: {
+		  'GATHER_OTHER': 0, // 其它垃圾
+		  'GATHER_KITCHEN': 0, // 厨余垃圾
+		  'GATHER_BUILDING': 0, // 建筑垃圾
+		  'HARM': 0, // 有害垃圾
+		  'RECYCLING': 0 // 可回收垃圾
+	  }, // 垃圾产生量数据
+	  rubbishWeightTotal: 0 // 垃圾产生量数据总计
     }
   },
   methods: {
@@ -341,8 +360,8 @@ export default {
     // 排行榜
     getDeliveryTop () {
       const params = {
-        'beginDeliveryDate': this.beginDate,
-        'endDeliveryDate': this.endDate,
+        'findRubbishDataBeginDate': this.beginDate,
+        'findRubbishDataEndDate': this.endDate,
         'provinceCode': this.queryParam.provinceCode,
         'cityCode': this.queryParam.cityCode,
         'districtCode': this.queryParam.districtCode
@@ -354,6 +373,73 @@ export default {
         }
       })
     },
+    // 垃圾产生量
+    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 => {
+        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.rubbishWeightTotal = res.data.total / 1000
+        } else {
+          this.rubbishWeightTotal = 0
+		  this.rubbishWeightData = {
+			  'GATHER_OTHER': 0, // 其它垃圾
+			  'GATHER_KITCHEN': 0, // 厨余垃圾
+			  'GATHER_BUILDING': 0, // 建筑垃圾
+			  'HARM': 0, // 有害垃圾
+			  'RECYCLING': 0 // 可回收垃圾
+		  }
+        }
+      })
+    },
+    // 各分类垃圾量分布
+    getRubbishTypeChart () {
+      const params = {
+        'findRubbishDataBeginDate': '',
+        'findRubbishDataEndDate': '',
+        'provinceCode': '',
+        'cityCode': '',
+        'districtCode': ''
+      }
+      getRubbishTypeTotal(params).then(res => {
+        console.log(res)
+        const data = []
+        if (res.status == 200) {
+          // this.initChart3(res.data)
+		  Object.keys(this.rubbishWeightData).map(item => {
+			  const p = res.data.find(key => key.rubbishType == item)
+            if (p) {
+              data.push({
+                name: p.rubbishTypeDict,
+                value: p.rubbishWeight
+              })
+            }
+		  })
+        }
+        const con5 = document.getElementById('con5')
+        const chart5 = echarts.init(con5)
+        const option = this.initPie(chart5, '各分类垃圾量分布', data)
+        chart5.setOption(option)
+        this.chart5 = chart5
+        this.chart5.resize()
+      })
+    },
     getLocationCode () {
       const cityCode = this.queryParam.cityCode
       const districtCode = this.queryParam.districtCode
@@ -451,7 +537,7 @@ export default {
             }
           }
           // console.log(ret)
-          heat.setData(ret)// 设置数据
+          heat.setData(ret) // 设置数据
         }
       })
     },
@@ -501,6 +587,10 @@ export default {
       this.getNewRegister()
       // 分时投递
       this.getTimeSharingLog()
+      // 垃圾产生量
+      this.getRubbishWeight()
+      // 各分类垃圾量分布
+      this.getRubbishTypeChart()
       // 设备分布比例
       const con3 = document.getElementById('con3')
       const chart3 = echarts.init(con3)
@@ -515,7 +605,10 @@ export default {
           },
           textAlingn: 'left'
         },
-        tooltip: {},
+        tooltip: {
+          trigger: 'item',
+          formatter: `{b} : {d}%`
+        },
         series: [{
           type: 'pie',
           radius: ['30%', '50%'],
@@ -525,9 +618,10 @@ export default {
           label: {
             normal: {
               formatter: params => {
+                // console.log(params, 'ppppppp')
                 return (
                   '{name|' + params.name + '}{value|' +
-                        params.value + '%' + '}'
+										params.percent + '%' + '}'
                 )
               },
               padding: [0, -70, 25, -70],
@@ -553,23 +647,22 @@ export default {
               }
             }
           },
-          data: [
-            {
-              name: '居民小区',
-              value: 49
-            },
-            {
-              name: '学校',
-              value: 14
-            },
-            {
-              name: '公共机构',
-              value: 32
-            },
-            {
-              name: '企业',
-              value: 5
-            }
+          data: [{
+            name: '居民小区',
+            value: 49
+          },
+          {
+            name: '学校',
+            value: 14
+          },
+          {
+            name: '公共机构',
+            value: 32
+          },
+          {
+            name: '企业',
+            value: 5
+          }
           ],
           insideLabel: {
             show: true
@@ -723,15 +816,15 @@ export default {
       const con1 = document.getElementById('con1')
       const chart1 = echarts.init(con1)
       const option1 = {
-		  title: {
-		      text: '新用户注册量',
+        title: {
+          text: '新用户注册量',
           top: 20,
           left: 20,
           textStyle: {
             color: '#abd7ff'
           },
           textAlingn: 'left'
-		  },
+        },
         tooltip: {
           formatter: '{b0}日: {c0}人'
         },
@@ -742,9 +835,9 @@ export default {
           top: 85,
           containLabel: true
         },
-		  xAxis: {
-		     name: '日期',
-		     data: xData,
+        xAxis: {
+          name: '日期',
+          data: xData,
           type: 'category',
           nameTextStyle: {
             color: '#666'
@@ -754,9 +847,9 @@ export default {
               color: '#666'
             }
           }
-		  },
-		  yAxis: {
-		     name: '用户',
+        },
+        yAxis: {
+          name: '用户',
           type: 'value',
           nameTextStyle: {
             color: '#666'
@@ -766,11 +859,11 @@ export default {
               color: '#666'
             }
           }
-		  },
-		  series: [{
-		    data: yData,
-		    type: 'line',
-		    smooth: true,
+        },
+        series: [{
+          data: yData,
+          type: 'line',
+          smooth: true,
           label: {
             normal: {
               show: true,
@@ -780,25 +873,90 @@ export default {
           lineStyle: {
             color: 'rgba(55, 162, 218, 0.9)'
           },
-		    areaStyle: {
-		      color: {
-		          type: 'linear',
-		          x: 0,
-		          y: 0,
-		          x2: 0,
-		          y2: 1,
-		          colorStops: [{
-		              offset: 0, color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
-		          }, {
-		              offset: 1, color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
-		          }]
-		      }
-		    }
-		  }]
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
+              }, {
+                offset: 1,
+                color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
+              }]
+            }
+          }
+        }]
       }
       chart1.setOption(option1)
       this.chart1 = chart1
       this.chart1.resize()
+    },
+    // 初始化饼图
+    initPie (chart, title, data) {
+      const option = {
+        color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
+        title: {
+          text: title,
+          top: 20,
+          left: 20,
+          textStyle: {
+            color: '#abd7ff'
+          },
+          textAlingn: 'left'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: `{b} : {d}%`
+        },
+        series: [{
+          type: 'pie',
+          radius: ['30%', '50%'],
+          startAngle: 75,
+          top: 50,
+          avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
+          label: {
+            normal: {
+              formatter: params => {
+                // console.log(params, 'ppppppp')
+                return (
+                  '{name|' + params.name + '}{value|' +
+										params.percent + '%' + '}'
+                )
+              },
+              padding: [0, -70, 25, -70],
+              rich: {
+                name: {
+                  fontSize: 12,
+                  padding: [0, 4, 0, 4],
+                  color: '#999'
+                },
+                value: {
+                  fontSize: 12,
+                  color: '#999'
+                }
+              }
+            }
+          },
+          labelLine: {
+            normal: {
+              length: 20,
+              length2: 70,
+              lineStyle: {
+                color: '#e6e6e6'
+              }
+            }
+          },
+          data: data,
+          insideLabel: {
+            show: true
+          }
+        }]
+      }
+	  return option
     }
   },
   mounted () {
@@ -846,60 +1004,73 @@ export default {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-      background-image: url(../../assets/headBg.png);
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: auto 80%;
-      padding: 10px 0 0;
-      .total-block {
-        width: 35%;
-      	display: flex;
-      	align-items: center;
-      	justify-content: center;
-      	>div {
-      		width: 30%;
-          padding-right: 10px;
-      	}
-      	.total-label {
-      		color: #fff;
-      		text-align: left;
-          display: flex;
-          i{
-            transform: rotate(330deg);
-            display: inline-block;
-            font-size: 12px;
-            margin: 0 1px;
-            &:last-child{
-              margin-right: 10px;
-            }
-          }
-      	}
-        .total-value{
-          font-size: 22px;
-          font-weight: bold;
-        }
-        .cor1{
-          color: #00ff84;
-        }
-        .cor2{
-          color: #d7ff00;
-        }
-        .cor3{
-          color: #00c0ff;
-        }
-      }
-      .page-title{
-        width: 50%;
-        flex-grow: 1;
-        color: #00aaff;
-        font-size: 32px;
-        text-align: center;
-      }
+			background-image: url(../../assets/headBg.png);
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: auto 80%;
+			padding: 10px 0 0;
+
+			.total-block {
+				width: 35%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				>div {
+					width: 30%;
+					padding-right: 10px;
+				}
+
+				.total-label {
+					color: #fff;
+					text-align: left;
+					display: flex;
+
+					i {
+						transform: rotate(330deg);
+						display: inline-block;
+						font-size: 12px;
+						margin: 0 1px;
+
+						&:last-child {
+							margin-right: 10px;
+						}
+					}
+				}
+
+				.total-value {
+					font-size: 22px;
+					font-weight: bold;
+				}
+
+				.cor1 {
+					color: #00ff84;
+				}
+
+				.cor2 {
+					color: #d7ff00;
+				}
+
+				.cor3 {
+					color: #00c0ff;
+				}
+			}
+
+			.page-title {
+				width: 50%;
+				flex-grow: 1;
+				color: #00aaff;
+				font-size: 32px;
+				text-align: center;
+			}
+
 			>div {
-        padding: 15px;
+				padding: 15px;
+
 				&:last-child {
 					width: 25%;
 					color: #0ed3ff;
+
 					.border-box-content {
 						font-size: 18px;
 						text-align: center;
@@ -925,16 +1096,18 @@ export default {
 		.data-body {
 			flex-grow: 1;
 			display: flex;
-      padding: 0 15px 15px;
+			padding: 0 15px 15px;
+
 			.b-right {
 				width: 25%;
 				display: flex;
 				padding: 5px;
 				flex-direction: column;
-        justify-content: space-around;
-        > div{
-          height: 33%;
-        }
+				justify-content: space-around;
+
+				>div {
+					height: 33%;
+				}
 			}
 
 			.b-middle {
@@ -942,66 +1115,76 @@ export default {
 				padding: 5px;
 				display: flex;
 				flex-direction: column;
-        justify-content: space-around;
+				justify-content: space-around;
 
 				>div {
 					&:first-child {
 						height: 66%;
-            .lajiliang{
-              width: 23%;
-              position: absolute;
-              padding: 15px;
-              background: rgba(255,255,255,0.3);
-              border-radius: 6px;
-              left: 20px;
-              top: 20px;
-              z-index: 1000;
-              color: #fff;
-              .laji-title{
-                text-align: center;
-                padding: 0 0 10px;
-              }
-              .laji-item{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin: 15px 0;
-                > div{
-                  &:first-child{
-                    border-radius: 30px;
-                    padding: 2px 10px;
-                    font-size: 12px;
-                    width: 50%;
-                    text-align: center;
-                  }
-                }
-                .cor1{
-                  background-color: #c2523f;
-                }
-                .cor2{
-                  background-color: #c59b16;
-                }
-                .cor3{
-                  background-color: #7561af;
-                }
-                .cor4{
-                  background-color: #418ec6;
-                }
-                .cor5{
-                  background-color: #20ce7a;
-                }
-              }
-            }
+
+						.lajiliang {
+							width: 23%;
+							position: absolute;
+							padding: 15px;
+							background: rgba(255, 255, 255, 0.3);
+							border-radius: 6px;
+							left: 20px;
+							top: 20px;
+							z-index: 1000;
+							color: #fff;
+
+							.laji-title {
+								text-align: center;
+								padding: 0 0 10px;
+							}
+
+							.laji-item {
+								display: flex;
+								align-items: center;
+								justify-content: space-between;
+								margin: 15px 0;
+
+								>div {
+									&:first-child {
+										border-radius: 30px;
+										padding: 2px 10px;
+										font-size: 12px;
+										width: 50%;
+										text-align: center;
+									}
+								}
+
+								.cor1 {
+									background-color: #c2523f;
+								}
+
+								.cor2 {
+									background-color: #c59b16;
+								}
+
+								.cor3 {
+									background-color: #7561af;
+								}
+
+								.cor4 {
+									background-color: #418ec6;
+								}
+
+								.cor5 {
+									background-color: #20ce7a;
+								}
+							}
+						}
 					}
 
 					&:last-child {
 						height: 33%;
-            display: flex;
-            > div{
-              width: 33.3%;
-              justify-content: space-around;
-              align-items: center;
-            }
+						display: flex;
+
+						>div {
+							width: 33.3%;
+							justify-content: space-around;
+							align-items: center;
+						}
 					}
 				}
 			}

+ 1 - 1
vue.config.js

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