区域噪声趋势图暂存

src/views/sound/zone/trend/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="ele-body">
+    <!-- 搜索表单 -->
+    <a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
+      <a-row>
+        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+          <a-form-item label="开始年度">
+            <a-select v-model:value="queryParams.startYear" allowClear showSearch>
+              <a-select-option v-for="item in yearOptions" :key="item.value">
+                {{ item.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+          <a-form-item label="结束年度">
+            <a-select v-model:value="queryParams.endYear" allowClear showSearch>
+              <a-select-option v-for="item in yearOptions" :key="item.value">
+                {{ item.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+          <a-form-item label="城区:">
+            <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 mode="multiple" :options="placeOptions" @change="handlePlaceChange" placeholder="测点名称">
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+          <a-space>
+            <a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <a-card :bordered="false">
+      <div id="chartColumn" style="width: 100%; height: 500px;"></div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import { markRaw } from 'vue'
+  import {
+    getColumnOptions,
+    getTrendChart
+  } from "@/api/ecology/noise/zone-sound";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          startYear: 2020,
+          endYear: 2021,
+          areaList: ['兴宁区','西乡塘区'],
+          placeList: []
+        },
+        trendData: [],
+        chartColumn: null,
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: []
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      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) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("area").then((res) => {
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+      },
+      // 趋势图
+      drawTrend() {
+        getTrendChart(this.queryParams).then( res => {
+          console.log('res', res);
+          if (res.data.code == 0) {
+            this.trendData = res.data.data
+            this.initChart()
+          } else {
+            this.$message.error(res.data.msg)
+          }
+        })
+      },
+      initChart() {
+        echarts.init(document.getElementById("chartColumn")).dispose();
+        this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
+        this.chartColumn.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            }
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {
+                show: true
+              }
+            }
+          },
+          legend: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        })
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>