From c27071780dd3a4033327db0075205f9364bf5c4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=9E=97?= <pande@gxai-data.cn>
Date: Fri, 14 Jan 2022 12:13:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E5=BA=93=E5=9B=BE=E8=A1=A8=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/new-lake.js          |   7 +
 src/views/water/lake/trend/index.vue | 659 +++++++++++++++++++++++++++
 2 files changed, 666 insertions(+)
 create mode 100644 src/views/water/lake/trend/index.vue

diff --git a/src/api/ecology/new-lake.js b/src/api/ecology/new-lake.js
index 36d5d3a..4a3da10 100644
--- a/src/api/ecology/new-lake.js
+++ b/src/api/ecology/new-lake.js
@@ -75,4 +75,11 @@ export const specialAverageNutrition = function (data) {
 export const specialYearContrastUrl = '/lakeLibrary/wateAnalysis/special/yearContrast';
 export const specialYearContrastData = function (data) {
     return axios.post(specialYearContrastUrl,data)
+}
+
+// 湖库统计图表
+
+export const lakeLibraryUrl = '/lakeLibrary/trendChart/data';
+export const lakeLibrary = function (data) {
+    return axios.post(lakeLibraryUrl,data)
 }
\ No newline at end of file
diff --git a/src/views/water/lake/trend/index.vue b/src/views/water/lake/trend/index.vue
new file mode 100644
index 0000000..f5666ab
--- /dev/null
+++ b/src/views/water/lake/trend/index.vue
@@ -0,0 +1,659 @@
+<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 } }"
+    >
+      <a-row>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="年度:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.yearList"
+              :options="yearOptions"
+              placeholder="请选择年度"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="月份:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.monthList"
+              :options="monthOptions"
+              placeholder="请选择月份"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="湖库类型:">
+            <a-select
+              v-model:value="queryParams.lakeType"
+              @change="handleLakeTypeChange"
+              allowClear
+              placeholder="请选择类型"
+            >
+              <a-select-option
+                v-for="item in regionLevelOptions"
+                :key="item.value"
+                >{{ item.label }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="断面名称:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.placeList"
+              :options="sectionOptions"
+              placeholder="请选择断面名称"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="监测指标:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.monitorIndexList"
+              :options="indicatorOptions"
+              placeholder="请选择监测指标"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="横坐标:">
+            <a-select
+              v-model:value="queryParams.xco"
+              :options="xOptions"
+              allowClear
+              placeholder="请选择横坐标"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="纵坐标:">
+            <a-select
+              v-model:value="queryParams.yco"
+              :options="yOptions"
+              allowClear
+              placeholder="请选择纵坐标"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24" style="text-align: center">
+          <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";
+let trendChart;
+import { getColumnOptions } from "@/api/ecology/noise/function-sound";
+
+import { getSpecialLakeDropdown } from "@/api/ecology/new-lake";
+import { getLakeDropdown } from "@/api/ecology/new-lake";
+
+import {
+  lakeLibrary,
+} from "@/api/ecology/new-lake";
+export default {
+  components: {},
+  data() {
+    return {
+      queryParams: {
+        yearList: ["2020", "2021"],
+        placeList: [],
+        xco: "Xco_1", // 横坐标
+        ycoList: [],
+        monitorIndexList: [], // 监测指标
+      },
+      trendData: [],
+      regionLevelOptions: [
+        { label: "城市内湖", value: "city" },
+        { label: "专项湖库", value: "special" },
+      ],
+      placeOptions: [],
+      sectionOptions: [],
+      yearOptions: [],
+      indicatorOptions: [],
+
+      innerSection: [], // 内湖断面
+      specialSection: [], // 专湖断面
+      innerIndex: [
+        { label: "pH值", value: "ph" },
+        { label: "透明度（cm）", value: "transparency" },
+        { label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation" },
+        { label: "溶解氧", value: "dissolvedOxygen" },
+        { label: "高锰酸盐指数", value: "permanganateIndex" },
+        { label: "五日生化需氧量", value: "fiveDayBod" },
+        { label: "总氮 ", value: "totalNitrogen" },
+        { label: "氨氮", value: "ammonia" },
+        { label: "挥发酚", value: "volatilePhenol" },
+        { label: "砷(mg/L)", value: "as" },
+        { label: "汞 (mg/L)", value: "hg" },
+        { label: "六价铬 (mg/L)", value: "cr6" },
+        { label: "铅 (mg/L)", value: "pb" },
+        { label: "镉 (mg/L)", value: "cd" },
+        { label: "总磷", value: "totalPhosphorus" },
+        { label: "石油类", value: "petro" },
+        { label: "粪大肠菌群（MPN/L）", value: "fecalColiforms" },
+        { label: "化学需氧量", value: "cod" },
+        { label: "叶绿素a (mg/m3)", value: "chlA" },
+        { label: "阴离子表面活性剂(mg/L)", value: "anSaa" },
+        { label: "硫化物(mg/L) ", value: "s" },
+        { label: "氧化还原电位（mV）", value: "oxidationReductionPotential" },
+      ], // 内湖监测指标
+      specialIndex: [
+        { label: "浊度(NTU)", value: "turbidity" },
+        { label: "水温(℃)", value: "wTemp" },
+        { label: "水位(m)", value: "wd" },
+        { label: "pH值", value: "ph" },
+        { label: "电导率(ms/m)", value: "wCond" },
+        { label: "透明度（cm）", value: "transp" },
+        { label: "溶解氧 (mg/L)", value: "dissolvedOxygen" },
+        { label: "高锰酸盐指数 (mg/L)", value: "codmn" },
+        { label: "五日生化需氧量", value: "bod5" },
+        { label: "氨氮 (mg/L)", value: "nh4N" },
+        { label: "石油类 (mg/L)", value: "oils" },
+        { label: "总氮 (mg/L)", value: "nTotal" },
+        { label: "总磷 (mg/L)", value: "pTotal" },
+        { label: "叶绿素 (mg/L)", value: "chlA" },
+        { label: "挥发酚 (mg/L)", value: "vPhen" },
+        { label: "汞 (mg/L)", value: "wHg" },
+        { label: "铅 (mg/L)", value: "wPb" },
+        { label: "化学需氧量 (mg/L)", value: "codcr" },
+        { label: "铜 (mg/L)", value: "wCu" },
+        { label: "锌 (mg/L)", value: "wZn" },
+        { label: "氟化物 (mg/L)", value: "f" },
+        { label: "硒 (mg/L)", value: "se" },
+        { label: "砷 (mg/L)", value: "as" },
+        { label: "镉 (mg/L)", value: "cd" },
+        { label: "六价铬 (mg/L)", value: "cr6" },
+        { label: "氰化物 (mg/L)", value: "cnTotal" },
+        { label: "阴离子表面活性剂 (mg/L)", value: "anSaa" },
+        { label: "硫化物 (mg/L)", value: "s" },
+        { label: "粪大肠菌群 (mg/L)", value: "coloOrg" },
+        { label: "硫酸盐 (mg/L)", value: "so4" },
+        { label: "氯化物 (mg/L)", value: "cl" },
+        { label: "硝酸盐 (mg/L)", value: "no3N" },
+        { label: "铁 (mg/L)", value: "wFe" },
+        { label: "锰 (mg/L)", value: "wMn" },
+      ], //专湖监测指标
+
+      monthOptions: [
+        {
+          label: "全部",
+          value: "全部",
+        },
+      ],
+      xOptions: [
+        {
+          label: "年度",
+          value: "Xco_1",
+        },
+        {
+          label: "年月",
+          value: "Xco_2",
+        },
+        {
+          label: "区域/测点名称",
+          value: "Xco_3",
+        },
+      ],
+      yOptions: [
+        {
+          label: "浓度",
+          value: "Yco_1",
+        },
+        {
+          label: "综合营养指数（无量纲）",
+          value: "Yco_2",
+        },
+        {
+          label: "水质类别",
+          value: "Yco_3",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.loadOptionData();
+    this.buildChart();
+  },
+  methods: {
+    // 下拉列表
+    loadOptionData() {
+      getColumnOptions("monitor_year").then((res) => {
+        this.yearOptions = res.data.data.map((item) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
+      for (let i = 1; i <= 12; i++) {
+        this.monthOptions.push({ label: i + "月", value: i });
+      }
+      // 内湖
+      this.getInnerList();
+      // 专湖
+      this.getSpecialList();
+    },
+
+
+    handleLakeTypeChange(value) {
+      this.queryParams.placeList = [];
+      this.queryParams.monitorIndexList = [];
+      if (value == "city") {
+        // 内湖
+        this.sectionOptions = [...this.innerSection];
+        this.indicatorOptions = [...this.innerIndex];
+      } else if (value == "special") {
+        // 专湖
+        this.sectionOptions = [...this.specialSection];
+        this.indicatorOptions = [...this.specialIndex];
+      }
+    },
+    // 趋势图
+    drawTrend() {
+      lakeLibrary(this.queryParams).then((res) => {
+        console.log("res", res);
+        if (res.data.code == 0) {
+          this.trendData = res.data.data;
+          this.initChart();
+        } else {
+          console.log('res.data.msg',res.data.msg)
+          this.$message.error(res.data.msg);
+        }
+      });
+    },
+
+    // 获取内湖断面
+    getInnerList() {
+      getLakeDropdown().then((res) => {
+        this.innerSection = this.buildSectionSelect(res);
+      });
+    },
+    // 获取专湖断面
+    getSpecialList() {
+      getSpecialLakeDropdown().then((res) => {
+        this.specialSection = this.buildSectionSelect(res);
+      });
+    },
+    // 生成断面数据
+    buildSectionSelect(res) {
+      let palceOptions = {};
+      let newPlace = [];
+      res.data.data.forEach((item) => {
+        palceOptions[item.regionName] = item.regionName;
+      });
+      for (let i in palceOptions) {
+        newPlace.push({
+          label: palceOptions[i],
+          value: palceOptions[i],
+        });
+      }
+      this.palceOptions = [...newPlace];
+      return res.data.data.map((item) => {
+        return {
+          label: item.sectionName,
+          value: item.sectionName,
+        };
+      });
+    },
+
+    initChart() {
+
+      if (trendChart != null && trendChart != "" && trendChart != undefined) {
+        trendChart.dispose(); // 销毁
+      }
+      trendChart = echarts.init(document.getElementById("chartColumn"));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              show: true,
+            },
+          },
+        },
+        legend:{show:true},
+        xAxis: this.buildxAxis(),
+        yAxis: {
+          type: "value",
+          max:200
+        },
+        series: this.buildSeries(),
+      };
+    console.log('option',option)
+      trendChart.setOption(option);
+    },
+
+    // 生成x轴标签
+    buildxAxis(){
+      let xAxis = []
+      this.trendData.forEach(item=>{
+        xAxis.push(item.place)
+      })
+      return {
+          type: "category",
+          axisLabel: {
+            interval:0,
+            rotate:10
+          },
+          data: xAxis,
+      }
+    },
+    // 生成y数值标签
+    buildyAxisData(){
+      let yAxisData = []
+      this.trendData.forEach(item=>{
+        yAxisData.push(item.value)
+      })
+      return yAxisData
+    },
+    // 生成营养度三根线
+    buildLine(){
+      return [
+                [
+                  {
+                    name: "中度富营养↓",
+                    yAxis: 70,
+                    xAxis: 0,
+                    label: {
+                      color:'red',
+                      borderColor: "red",
+                    },
+                    lineStyle:{
+                      color: "red",
+                    }
+                  },
+                  {
+                    yAxis: 70,
+                    xAxis: this.buildxAxis().length-5 || 2,
+                  },
+                ],
+                [
+                  {
+                    name: "轻度富营养↓",
+                    yAxis: 60,
+                    xAxis: 0,
+                    label: {
+                      color:'#fbfb00',
+                      borderColor: "#fbfb00",
+                    },
+                      lineStyle:{
+                      color: "#fbfb00",
+                    }
+                  },
+                  {
+                    yAxis: 60,
+                    xAxis: this.buildxAxis().length-4 || 2,
+                  },
+                ],
+                  [
+                  {
+                    name: "中营养↓",
+                    yAxis: 50,
+                    xAxis: 0,
+                    label: {
+                      color:'#99ff00',
+                      borderColor: "#99ff00",
+                    },
+                      lineStyle:{
+                      color: "#99ff00",
+                    }
+                  },
+                  {
+                    yAxis: 50,
+                    xAxis: this.buildxAxis().length-2,
+                  },
+                ],
+              ]
+    },
+    // 生成图表数据
+    buildSeries(){
+      let series = [
+          {
+            markLine: {
+              lineStyle: {
+                normal: {
+                  type: "line",
+                  width: 3,
+                  opacity: 0.9,
+                },
+              },
+              label: {
+                padding: [1, 10],
+                lineHeight: 30,
+                show: true,
+                position: "end",
+                borderType: "dashed",
+                borderWidth: 1,
+              },
+              data: [...this.buildLine()],
+              symbol: ["none", "none"],
+            },
+
+            data: this.buildyAxisData(),
+            type: "bar", // line
+          },
+        ]
+      return series
+    },
+
+    //生成柱状图
+    buildChart() {
+      trendChart = echarts.init(document.getElementById("chartColumn"));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              show: true,
+            },
+          },
+        },
+        legend: {
+          show:true,
+          // orient: "vertical",
+          // x: "right", //可设定图例在左、右、居中
+          // y: "center", //可设定图例在上、下、居中
+          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+
+        },
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            interval:0,
+            rotate:10
+          },
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        
+        series: [
+          {
+            // markLine: {
+            //   data: [
+            //     {
+            //       type: "average",
+            //       name: "平均值",
+            //       lineStyle: {
+            //         type: "dashed", // dotted,solid,dashed
+            //         color: "blue",
+            //         width: 3,
+            //         opacity: 0.9,
+            //       },
+            //       label: {
+            //         borderColor: "blue",
+            //         formatter: "平均值",
+            //       },
+            //     },{
+            //       name: "标志",
+            //       yAxis: 100,
+            //       lineStyle: {
+            //         type: "dashed", // dotted,solid,dashed
+            //         color: "blue",
+            //         width: 3,
+            //         opacity: 0.9,
+            //       },
+            //       label: {
+            //         color: "blue",
+            //         formatter: "溶解氧Ⅱ类标准",
+            //       },
+            //     },
+            //   ],
+            //   symbol: ["none", "none"],
+            //   label: {
+            //     show: true,
+            //     position: "insideEndBottom",
+            //   },
+            // },
+
+            markLine: {
+              lineStyle: {
+                normal: {
+                  type: "line",
+                  width: 3,
+                  opacity: 0.9,
+                },
+              },
+              label: {
+                padding: [1, 10],
+                lineHeight: 30,
+                show: true,
+                position: "end",
+                borderType: "dashed",
+                borderWidth: 1,
+              },
+              data: [
+                [
+                  {
+                    name: "中度富营养↓",
+                    yAxis: 180,
+                    xAxis: 0,
+                    label: {
+                      color:'red',
+                      borderColor: "red",
+                    },
+                    lineStyle:{
+                      color: "red",
+                    }
+                  },
+                  {
+                    yAxis: 180,
+                    xAxis: 3,
+                  },
+                ],
+                [
+                  {
+                    name: "轻度富营养↓",
+                    yAxis: 150,
+                    xAxis: 0,
+                    label: {
+                      color:'#fbfb00',
+                      borderColor: "#fbfb00",
+                    },
+                      lineStyle:{
+                      color: "#fbfb00",
+                    }
+                  },
+                  {
+                    yAxis: 150,
+                    xAxis: "Thu",
+                  },
+                ],
+                  [
+                  {
+                    name: "中营养↓",
+                    yAxis: 100,
+                    xAxis: 0,
+                    label: {
+                      color:'#99ff00',
+                      borderColor: "#99ff00",
+                    },
+                      lineStyle:{
+                      color: "#99ff00",
+                    }
+                  },
+                  {
+                    yAxis: 100,
+                    xAxis: "Thu",
+                  },
+                ],
+              ],
+              symbol: ["none", "none"],
+            },
+
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar", // line
+          },
+        ],
+
+// 堆叠 
+          // series: [{
+          //       name: '可用',
+          //       type: 'bar', // 换成bar则是堆叠
+          //       // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
+          //       data: [5, 20, 36, 10, 10, 20, 60],
+          //       itemStyle:{
+          //            normal:{color:"#FF8849"},
+          //       }
+          //   },{
+          //       name: '不可用',
+          //       type: 'bar', // 换成bar则是堆叠
+          //       // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
+          //       data: [40, 22, 18, 35, 42, 40, 80],
+          //       itemStyle:{
+          //            normal:{color:"#3FBB49"},
+          //       }
+          //   }]
+      };
+      trendChart.setOption(option);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.mb-20 {
+  margin-bottom: 20px;
+}
+</style>