From fd6f04dedc4ad90162aa7563f2f7d7db388585fc Mon Sep 17 00:00:00 2001
From: hey7845 <hey78450496@163.com>
Date: Sat, 25 Dec 2021 00:45:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=81=93=E8=B7=AF=E5=99=AA=E5=A3=B0=E8=B6=8B?=
 =?UTF-8?q?=E5=8A=BF=E5=9B=BE-=E5=AD=98=E5=9C=A8=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E9=83=A8=E5=88=86=E4=B8=8D=E5=85=BC=E5=AE=B9=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sound/road/trend/index.vue | 125 ++++++++-------------------
 1 file changed, 35 insertions(+), 90 deletions(-)

diff --git a/src/views/sound/road/trend/index.vue b/src/views/sound/road/trend/index.vue
index a8311af..19db703 100644
--- a/src/views/sound/road/trend/index.vue
+++ b/src/views/sound/road/trend/index.vue
@@ -24,13 +24,13 @@
         </a-col>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
           <a-form-item label="城区:">
-            <a-select :options="areaOptions" v-model:value="queryParams.area" placeholder="城区">
+            <a-select mode="multiple" :options="areaOptions" @change="handleAreaChange" placeholder="城区">
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
           <a-form-item label="测点名称:">
-            <a-select :options="palceOptions" v-model:value="queryParams.place" placeholder="测点名称">
+            <a-select mode="multiple" :options="placeOptions" @change="handlePlaceChange" placeholder="测点名称">
             </a-select>
           </a-form-item>
         </a-col>
@@ -38,7 +38,7 @@
       <a-row>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
           <a-space>
-            <a-button type="primary" class="mb-20" @click="startStatistic">开始统计</a-button>
+            <a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
           </a-space>
         </a-col>
       </a-row>
@@ -51,6 +51,7 @@
 
 <script>
   import * as echarts from 'echarts'
+  import { markRaw } from 'vue'
   import {
     getColumnOptions,
     getTrendChart
@@ -62,10 +63,10 @@
         queryParams: {
           startYear: 2020,
           endYear: 2021,
-          area: '',
-          place: ''
+          areaList: ['兴宁区','西乡塘区'],
+          placeList: []
         },
-        tableData: [],
+        trendData: [],
         chartColumn: null,
         placeOptions: [],
         areaOptions: [],
@@ -77,7 +78,13 @@
       this.drawTrend()
     },
     methods: {
-      /**获取下来框数据 */
+      handleAreaChange(value) {
+        this.queryParams.areaList = Object.values(value)
+      },
+      handlePlaceChange(value) {
+        this.queryParams.placeList = Object.values(value)
+      },
+      // 下拉列表
       loadOptionData() {
         getColumnOptions("place").then((res) => {
           this.placeOptions = res.data.data.map((item) => {
@@ -104,95 +111,33 @@
           });
         });
       },
-      // 开始统计
-      startStatistic() {
-        getTrendChart(this.queryParams).then( res =>{
-          console.log(res)
-        })
-      },
       // 趋势图
       drawTrend() {
-        this.chartColumn = echarts.init(document.getElementById('chartColumn'))
-        this.chartColumn.setOption({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              crossStyle: {
-                color: '#999'
-              }
-            }
-          },
-          toolbox: {
-            feature: {
-              dataView: {
-                show: true,
-                readOnly: false
-              },
-              magicType: {
-                show: true,
-                type: ['line', 'bar']
-              },
-              restore: {
-                show: true
-              },
-              saveAsImage: {
-                show: true
-              }
-            }
-          },
-          legend: {
-            data: ['Evaporation', 'Precipitation', 'Temperature']
-          },
-          xAxis: [{
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisPointer: {
-              type: 'shadow'
-            }
-          }],
-          yAxis: [{
-              type: 'value',
-              name: 'Precipitation',
-              min: 0,
-              max: 250,
-              interval: 50,
-              axisLabel: {
-                formatter: '{value} ml'
+        getTrendChart(this.queryParams).then( res => {
+          this.trendData = res.data.data
+          this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
+          this.chartColumn.setOption({
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
               }
             },
-            {
-              type: 'value',
-              name: 'Temperature',
-              min: 0,
-              max: 25,
-              interval: 5,
-              axisLabel: {
-                formatter: '{value} °C'
+            toolbox: {
+              feature: {
+                saveAsImage: {
+                  show: true
+                }
               }
-            }
-          ],
-          series: [{
-              name: 'Evaporation',
-              type: 'bar',
-              data: [
-                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-              ]
             },
-            {
-              name: 'Precipitation',
-              type: 'bar',
-              data: [
-                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-              ]
-            },
-            {
-              name: 'Temperature',
-              type: 'line',
-              yAxisIndex: 1,
-              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-            }
-          ]
+            legend: this.trendData.legend,
+            xAxis: this.trendData.xAxis,
+            yAxis: this.trendData.yAxis,
+            series: this.trendData.series
+          })
         })
       }
     }