From f1e5f53cad637899e241eaa7c410a25e9b006271 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=9E=97?= <donglinpang@163.com>
Date: Sun, 23 Jan 2022 23:04:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A5=AE=E7=94=A8=E6=B0=B4=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/new-drinking-water.js         |   22 +-
 .../water/drinking-water/trend/index.vue      | 1002 +++++++++++++++++
 2 files changed, 1022 insertions(+), 2 deletions(-)
 create mode 100644 src/views/water/drinking-water/trend/index.vue

diff --git a/src/api/ecology/new-drinking-water.js b/src/api/ecology/new-drinking-water.js
index ef1dd47..8ebe218 100644
--- a/src/api/ecology/new-drinking-water.js
+++ b/src/api/ecology/new-drinking-water.js
@@ -8,13 +8,25 @@ export const listInfo = function (data) {
     return axios.get(listInfoUrl,data)
 }
 
-// 县级
+// 县级地表水
 export const countyListInfoUrl = '/drinkingWater/drinkingWaterCountyDict';
 export const countyListInfo = function (data) {
     return axios.get(countyListInfoUrl,data)
 }
 
-// 村级
+// 县级地下水
+export const countyDownListInfoUrl = '/drinkingWater/drinkingWaterCountyBottomDict';
+export const countyDownListInfo = function (data) {
+    return axios.get(countyDownListInfoUrl,data)
+}
+// 村级地表水
+export const villageUpListInfoUrl = '/drinkingWater/drinkingWaterVillageTopDict';
+export const villageUpListInfo = function (data) {
+    return axios.get(villageUpListInfoUrl,data)
+}
+
+
+// 村级地下水
 export const villageListInfoUrl = '/drinkingWater/drinkingWaterVillageBottomDict';
 export const villageListInfo = function (data) {
     return axios.get(villageListInfoUrl,data)
@@ -153,3 +165,9 @@ export const filterList = function (data) {
     return axios.post('/waterFunctionArea/drinkingWaterEvaluationStandard',data)
 }
 
+// 饮用水统计图表
+
+export const drinkingWaterTrendUrl = '/drinkingWater/trendChart/data';
+export const drinkingWaterTrend = function (data) {
+    return axios.post(drinkingWaterTrendUrl,data)
+}
\ No newline at end of file
diff --git a/src/views/water/drinking-water/trend/index.vue b/src/views/water/drinking-water/trend/index.vue
new file mode 100644
index 0000000..4223a4c
--- /dev/null
+++ b/src/views/water/drinking-water/trend/index.vue
@@ -0,0 +1,1002 @@
+<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="请选择年度"
+              @change="handleYearChange"
+              allowClear
+            >
+            </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="请选择月份"
+              @change="handleMonthChange"
+              allowClear
+            >
+            </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.regionLevel"
+              @change="handleRegionLevelChange"
+              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
+              v-model:value="queryParams.waterSourceType"
+              @change="handleSourceTypeChange"
+              allowClear
+              placeholder="请选择水源类型"
+            >
+              <a-select-option
+                v-for="item in typeOptions"
+                :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="请选择断面名称"
+              @change="handleSectionChange"
+              allowClear
+            >
+            </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="请选择监测指标"
+              @change="handleIndexChange"
+              allowClear
+            >
+            </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: 700px;"><div class="empty">暂无数据</div></div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+let trendChart;
+
+import { listInfo  as cityListInfo, countyListInfo as countyUpList, countyDownListInfo as countyDownList, villageUpListInfo as villageUpList, villageListInfo as villageDownList, drinkingWaterTrend } from "@/api/ecology/new-drinking-water";
+
+export default {
+  components: {},
+  data() {
+    return {
+      queryParams: {
+        yearList: [],
+        monthList: [],
+        lakeType:'',
+        placeList: [],
+        xco: "Xco_1", // 横坐标
+        yco:"",
+        monitorIndexList: [], // 监测指标
+      },
+      trendData: [],
+      regionLevelOptions: [
+        { label: "市级", value: "市级" },
+        { label: "县级", value: "县级" },
+        { label: "农村", value: "农村" },
+      ],
+      typeOptions: [
+        { label: "地表水", value: "1" },
+        { label: "地下水", value: "2" },
+      ],
+      sectionOptions: [],
+      yearOptions: [],
+      indicatorOptions: [ 
+        { label: "全选", value: "全选", limit:"0",color:"#209f53" },
+        { label: "pH值", value: "ph", limit:"9",color:"#209f53" },
+        { label: "透明度（cm）", value: "transparency", limit:"0.01",color:"#209f53" },
+        // { label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation", limit:"6",color:"#20749f" },
+        { label: "溶解氧", value: "dissolvedOxygen", limit:"6",color:"#20749f" },
+        { label: "高锰酸盐指数", value: "permanganateIndex", limit:"4",color:"#7bbe3a" },
+        { label: "五日生化需氧量", value: "fiveDayBod", limit:"3",color:"#ad3abe" },
+        { label: "总氮 ", value: "totalNitrogen", limit:"0.5",color:"#a4a3f1" },
+        { label: "氨氮", value: "ammonia", limit:"0.5",color:"#3d3abe" },
+        { label: "挥发酚", value: "volatilePhenol", limit:"0.002",color:"#f1eca3" },
+        { label: "砷(mg/L)", value: "as", limit:"0.05",color:"#bbb443" },
+        { label: "汞 (mg/L)", value: "hg", limit:"0.00005",color:"#62bb43" },
+        { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#3cd560" },
+        { label: "铅 (mg/L)", value: "pb", limit:"0.01",color:"#91b516" },
+        { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#4ab516" },
+        { label: "总磷", value: "totalPhosphorus", limit:"0.025",color:"#62255a" },
+        { label: "石油类", value: "petro", limit:"0.05",color:"#8a4c82" },
+        { label: "粪大肠菌群（MPN/L）", value: "fecalColiforms", limit:"2000",color:"#63258b" },
+        { label: "化学需氧量", value: "cod", limit:"15",color:"#25388b" },
+        // { label: "叶绿素a (mg/m3)", value: "chlA", limit:"0",color:"#209f53" },
+        { label: "阴离子表面活性剂(mg/L)", value: "anSaa", limit:"0.2",color:"#258b80" },
+        { label: "硫化物(mg/L) ", value: "s", limit:"0.1",color:"#27aa49" },
+        // { label: "氧化还原电位（mV）", value: "oxidationReductionPotential", limit:"1",color:"#209f53" },
+      
+      ],
+
+      innerSection: [], // 内湖断面
+      specialSection: [], // 专湖断面
+
+      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",
+        },
+      ],
+
+      // 图表生成数据
+      xAxis: {},
+      series: {},
+      yAxisMax:1, //Y轴最大值
+    };
+  },
+  mounted() {
+     this.loadOptionData();
+
+     Array.prototype.remove = function(val) { 
+        var index = this.indexOf(val); 
+        if (index > -1) { 
+        this.splice(index, 1); 
+        } 
+      };
+  },
+  methods: {
+    // 全选
+    //年份
+    handleYearChange(e){
+      if(e.indexOf('全选')>-1){
+        this.queryParams.yearList = [...this.yearOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.yearList.remove('全选');
+      }
+    },
+    // 月份
+    handleMonthChange(e){
+    if(e.indexOf('全选')>-1){
+        this.queryParams.monthList = [...this.monthOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.monthList.remove('全选');
+      }
+    },
+    // 断面
+    handleSectionChange(e){
+    if(e.indexOf('全选')>-1){
+        this.queryParams.placeList = [...this.sectionOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.placeList.remove('全选');
+      }
+    },
+    // 指标
+    handleIndexChange(e){
+    if(e.indexOf('全选')>-1){
+        this.queryParams.monitorIndexList = [...this.indicatorOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.monitorIndexList.remove('全选');
+      }
+    },
+
+    // 下拉列表
+    loadOptionData() {
+      let yy = new Date().getFullYear();
+      this.yearOptions.push({
+          label: '全选',
+          value: '全选',
+        })
+      this.monthOptions.push({
+          label: '全选',
+          value: '全选',
+        })
+      for (let i = 1; i <= 12; i++) {
+        this.yearOptions.push({
+          label: yy - i,
+          value: yy - i,
+        });
+        this.monthOptions.push({ label: i + "月", value: i<10?('0'+i):i });
+      }
+    },
+    // 区域等级
+    handleRegionLevelChange(e) {
+        this.handleChange(e,this.queryParams.waterSourceType)
+    
+    },
+    // 水源类型
+    handleSourceTypeChange(e){
+        this.handleChange(this.queryParams.regionLevel,e)
+    },
+    handleChange(level,type){
+        this.queryParams.placeList = [];
+        if(level && type){
+            if(level=='市级' && type==2){
+                this.queryParams.placeList = [];
+                this.sectionOptions = []
+            }
+            if(level=='市级' && type==1){
+                cityListInfo().then((res) => {
+                    if (res.data.code == 0) {
+                        this.sectionOptions = this.buildSectionSelect(res.data.data)
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                })
+            }
+            if(level=='县级' && type==1){
+                countyUpList().then((res) => {
+                    if (res.data.code == 0) {
+                        this.sectionOptions = this.buildSectionSelect(res.data.data)
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                })
+            }
+            if(level=='县级' && type==2){
+                countyDownList().then((res) => {
+                    if (res.data.code == 0) {
+                        this.sectionOptions = this.buildSectionSelect(res.data.data)
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                })
+            }
+            if(level=='农村' && type==1){
+                villageUpList().then((res) => {
+                    if (res.data.code == 0) {
+                        this.sectionOptions = this.buildSectionSelect(res.data.data)
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                })
+            }
+            if(level=='农村' && type==1){
+                villageDownList().then((res) => {
+                    if (res.data.code == 0) {
+                        this.sectionOptions = this.buildSectionSelect(res.data.data)
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                })
+            }
+        }
+        console.log('this.sectionOptions',this.sectionOptions)
+    },
+    // 趋势图
+    drawTrend() {
+      
+      if(this.queryParams.yco == 'Yco_3' && this.queryParams.monitorIndexList.length>0){
+        this.$message.error('纵坐标为水质类别时，请勿选择监测指标！');
+        return;
+      }
+
+      if(this.queryParams.yco == 'Yco_1' && this.queryParams.monitorIndexList.length>1 && this.queryParams.placeList.length>1){
+        this.$message.error('纵坐标为浓度时，请勿选择监测指标和断面名称不能同时为多选！');
+        return;
+      }
+
+      drinkingWaterTrend(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);
+        }
+      });
+    },
+
+    // 生成断面数据
+    buildSectionSelect(data) {
+      let palceOptions = {};
+      let newPlace = [];
+      data.forEach((item) => {
+        palceOptions[item.sectionName] = item.sectionName;
+      });
+        newPlace.push({
+          label: '全选',
+          value: '全选',
+        })
+      for (let i in palceOptions) {
+        newPlace.push({
+          label: palceOptions[i],
+          value: palceOptions[i],
+        });
+      }
+      return [...newPlace];
+    },
+
+    initChart() {
+      this.yAxisMax = 1;
+
+      if (trendChart != null && trendChart != "" && trendChart != undefined) {
+        trendChart.dispose(); // 销毁
+      }
+      if(Array.isArray(this.trendData) && this.trendData.length==0){
+        document.getElementById("chartColumn").innerHTML = '<div class="empty">暂无数据</div>'
+        return;
+      }
+      trendChart = echarts.init(document.getElementById("chartColumn"));
+      let text = '';
+
+        if(this.queryParams.placeList.length==1){
+            let code = ''
+            if(this.queryParams.yco == 'Yco_1'){
+                code = '监测指标浓度'
+            }
+            if(this.queryParams.yco == 'Yco_2'){
+                code = '综合营养指数'
+            }
+            if(this.queryParams.yco == 'Yco_3'){
+                code = '水质类别'
+            }
+
+            text = this.queryParams.placeList[0] + this.queryParams.yearList.join('、') + '年度' + code
+        }
+
+      // 生成x轴
+      this.buildxAxis();
+      // 生成series
+      this.buildSeries();
+
+      let option = {
+          title:{
+              text:text,
+              x:'center',
+              textStyle: {
+                            color: '#3A7BD5',
+                            fontSize: 16
+                        }
+          },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+          formatter: (this.queryParams.yco == 'Yco_3') && ((params)=>{
+            if(this.queryParams.yco == 'Yco_3'){
+              var html = '<div style="font-weight:bold">水质类别</div>';
+              for(var i=0;i<params.length;i++){
+                console.log('params',params)
+                html += "<div style='line-height:25px'><span style='display: inline-block;width: 10px; height: 10px;margin-right:5px; border-radius: 10px;background:"+params[i].color+"'></span>类别"+ params[i].seriesName +"："+params[i].data+"%" + "</div>";
+              }
+              return html
+            }
+        })
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              show: true,
+            },
+          },
+        },
+        legend: {
+          show: true,
+          x: "center", //可设定图例在左、右、居中
+          y: "bottom", //可设定图例在上、下、居中
+          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+          // formatter: function (name) {
+          //     return name;
+          // }
+        },
+        xAxis: this.xAxis,
+        yAxis: {
+          type: "value",
+          max: this.yAxisMax,
+          name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : '',
+          axisLabel: {
+                show: true,
+                interval: 'auto',
+                formatter: this.queryParams.yco=='Yco_3' && '{value} %'
+            },
+        },
+
+        series: this.series,
+      };
+
+      trendChart.setOption(option);
+    },
+
+    // 生成Y轴最大值
+    buildYMax(value){
+        if(this.yAxisMax<value){
+            this.yAxisMax = Math.ceil(value)
+        }
+    },
+
+    // 生成x轴标签
+    buildxAxis() {
+      let xAxis = [];
+      // x坐标是断面
+      if (this.queryParams.xco == "Xco_3") {
+        this.trendData.forEach((item) => {
+            if(xAxis.indexOf(item.place)<0){
+                xAxis.push(item.place);
+            }
+        });
+      }
+      // x左边为年度、年月,只选一个断面
+      // && ( Array.isArray(this.queryParams.placeList) && this.queryParams.placeList.length==1)
+      if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
+        this.trendData.forEach((item) => {
+          let x = this.buildYearMonth(item);
+          if (xAxis.indexOf(x) < 0) xAxis.push(x);
+        });
+      }
+      let rotate = 0;
+      if (xAxis.join("").length > 50) {
+        rotate = 10;
+      }
+      console.log('xAxis',xAxis)
+      this.xAxis = {
+        type: "category",
+        axisLabel: {
+          interval: 0,
+          rotate: rotate,
+        },
+        // boundaryGap: false, // 第一个数据点距离y轴距离
+        data: xAxis,
+      };
+    },
+
+    // 生成营养度三根线
+    buildLine() {
+      let lines = [];
+
+      let xMax = this.xAxis.data.length;
+      // 三根营养线,在纵坐标选择综合营养指数时显示
+      if (this.queryParams.yco == "Yco_2"){
+        this.buildYMax(72);
+
+        if(xMax-3<1){
+          lines = [
+             {
+                name: "中度富营养↓",
+                yAxis: 70,
+                label: {
+                  color: "red",
+                  borderColor: "red",
+                  formatter:'中度富营养↓'
+                },
+                lineStyle: {
+                  color: "red",
+                },
+              },
+              {
+                name: "轻度富营养↓",
+                yAxis: 60,
+                label: {
+                  color: "#fbfb00",
+                  borderColor: "#fbfb00",
+                  formatter:'轻度富营养↓'
+                },
+                lineStyle: {
+                  color: "#fbfb00",
+                },
+              },
+              {
+                name: "中营养↓",
+                yAxis: 50,
+                label: {
+                  color: "#99ff00",
+                  borderColor: "#99ff00",
+                  formatter:'中营养↓'
+                },
+                lineStyle: {
+                  color: "#99ff00",
+                },
+              },
+          ]
+            
+        }else{
+          lines = [
+            [
+              {
+                name: "中度富营养↓",
+                yAxis: 70,
+                xAxis: 0,
+                label: {
+                  color: "red",
+                  borderColor: "red",
+                },
+                lineStyle: {
+                  color: "red",
+                },
+              },
+              {
+                yAxis: 70,
+                xAxis: xMax - 3,
+              },
+            ],
+            [
+              {
+                name: "轻度富营养↓",
+                yAxis: 60,
+                xAxis: 0,
+                label: {
+                  color: "#fbfb00",
+                  borderColor: "#fbfb00",
+                },
+                lineStyle: {
+                  color: "#fbfb00",
+                },
+              },
+              {
+                yAxis: 60,
+                xAxis: xMax - 2,
+              },
+            ],
+            [
+              {
+                name: "中营养↓",
+                yAxis: 50,
+                xAxis: 0,
+                label: {
+                  color: "#99ff00",
+                  borderColor: "#99ff00",
+                },
+                lineStyle: {
+                  color: "#99ff00",
+                },
+              },
+              {
+                yAxis: 50,
+                xAxis: xMax - 1,
+              },
+            ]];
+        }
+      }
+ 
+  // 在纵坐标选择浓度，那显示指标均线
+    if(this.queryParams.yco == "Yco_1"){
+      let singleLine = []  
+        this.queryParams.monitorIndexList.forEach(item=>{
+                this.indicatorOptions.forEach(single=>{
+                    if(single.value == item){
+                        this.buildYMax(single.limit);
+
+
+                          const name = single.label+'Ⅱ类标准'
+                          singleLine.push(
+                            {
+                              name:name,
+                              type:'line',
+                              symbol:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
+                              markLine:{
+                                  data:[
+                                      {
+                                          name:name,
+                                          yAxis: single.limit,
+                                      }
+                                  ],
+                                lineStyle: {
+                                    type: "dashed", // dotted,solid,dashed
+                                    // color: single.color,
+                                    width: 2,
+                                    opacity: 0.9,
+                                },
+                                label: {
+                                    // color: single.color,
+                                    formatter: single.label+"Ⅱ类标准",
+                                    position:'insideEndBottom'
+                                },
+                              }
+                            }
+                          )
+
+                        // singleLine.push(
+                        //     {
+                        //         name: item,
+                        //         yAxis: single.limit,
+                        //         lineStyle: {
+                        //             type: "dashed", // dotted,solid,dashed
+                        //             color: single.color,
+                        //             width: 2,
+                        //             opacity: 0.9,
+                        //         },
+                        //         label: {
+                        //             color: single.color,
+                        //             formatter: single.label+"Ⅱ类标准",
+                        //         },
+                        //         }
+                        // )
+                    }
+                })
+        })
+        lines = [...singleLine]
+      }
+
+
+      return lines;
+    },
+    // 生成年月标识
+    buildYearMonth(obj){
+      if(this.queryParams.xco == "Xco_1"){
+        return  obj.year;
+      }else{
+        return  obj.year + (obj.month ? ('-'+obj.month) : "");
+      } 
+    },
+
+
+    // 生成图表数据
+    buildSeries() {
+      let series = [];
+      
+
+      let charType = 'bar'
+        // 如果Y坐标选择了浓度，那就是折线图，选择综合指标是柱状图，选择水质类别那就是堆叠
+        if(this.queryParams.yco == 'Yco_1'){
+            charType = 'line'
+        }
+    //   // 如果选择了监测指标，那就是折线图
+    //   if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
+    //     charType = 'line'
+    //   }
+
+    // X轴坐标
+     let seriesItemName = this.xAxis.data; 
+
+      // x坐标是断面
+      if (this.queryParams.xco == "Xco_3") {
+       
+        // 如果是断面，则用年月来分组数据
+        // let seriesItemName = this.xAxis.data; 
+        let group = [];
+
+
+        // 如果是水质类别，那么就按类别分组
+         if(this.queryParams.yco=='Yco_3'){
+             this.trendData.forEach((item) => {
+            if (group.indexOf(item.value) < 0) {
+                group.push(item.value);
+            }
+            });
+          }else{
+            this.trendData.forEach((item) => {
+              if (group.indexOf(this.buildYearMonth(item)) < 0) {
+                  group.push(this.buildYearMonth(item));
+              }
+            });
+          }
+
+
+        group.forEach(item=>{
+            let itemData = [];
+            seriesItemName.forEach((data,index)=>{
+                itemData[index] = 0
+                this.trendData.forEach((single) => {
+                    // 水质类别
+                    if(this.queryParams.yco=='Yco_3'){
+                      if(item==single.value && data == single.place){
+                        itemData[index] += 1;
+                      }
+                    }else{
+                      if (data == single.place && item == this.buildYearMonth(single)) {
+                        itemData[index] = single.value;
+                        this.buildYMax(single.value);
+                      }
+                    }
+                });
+            })
+
+        let single = {
+            name: item,
+            type: charType,
+            label: {
+              // 图形上的文本标签
+              show: true,
+              position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
+              formatter: (params)=>{
+                if(this.queryParams.yco=='Yco_3'){
+                 if(params.data){
+                  return params.data+"%"
+                 }else{
+                   return ''
+                 }
+                }
+              }
+            },
+            data: [...itemData],
+          };
+           // 纵坐标 水质类别，那就堆叠
+          if(this.queryParams.yco=='Yco_3'){
+            single.stack = '水质类别'
+            this.buildYMax(100);
+          }
+
+          series.push(single);
+        })
+      }
+
+      // 一个断面多个指标
+    const singleType = this.queryParams.placeList.length==1 && this.queryParams.monitorIndexList.length>1;
+
+    if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
+        // let seriesItemName = this.xAxis.data; 
+        let group = [];
+    
+        // 如果是水质类别，那么就按类别分组
+         if(this.queryParams.yco=='Yco_3'){
+             this.trendData.forEach((item) => {
+            if (group.indexOf(item.value) < 0) {
+                group.push(item.value);
+            }
+            });
+          }else{
+            if(singleType){
+                this.trendData.forEach((item) => {
+                if (group.indexOf(item.indexName) < 0) {
+                    group.push(item.indexName);
+                }
+                });
+            }else{
+                this.trendData.forEach((item) => {
+                if (group.indexOf(item.place) < 0) {
+                    group.push(item.place);
+                }
+                });
+            }
+          }
+
+        /**
+         * 生成数据图例
+         {
+            name: "一组",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar", // line
+          },
+          {
+            name: "二组",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar", // line
+          },
+        * 
+        */
+
+
+        group.forEach(item=>{
+            let itemData = [];
+            seriesItemName.forEach((data,index)=>{
+                itemData[index] = 0
+                this.trendData.forEach((single) => {
+                    // 水质类别
+                    if(this.queryParams.yco=='Yco_3'){
+                      if(item==single.value && data == this.buildYearMonth(single)){
+                        itemData[index] += 1;
+                      }
+                    }else{
+                      let name = ''
+                      if(singleType){
+                          name = single.indexName
+                      }else{
+                          name = single.place
+                      }
+
+                      if (data == this.buildYearMonth(single) && item == name) {
+                          itemData[index] = single.value;
+                          this.buildYMax(single.value);
+                      }
+                    }
+                    
+                });
+            })
+
+        let single = {
+            name: item,
+            type: charType,
+            label: {
+              // 图形上的文本标签
+              show: true,
+              position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
+              formatter: (params)=>{
+                if(this.queryParams.yco=='Yco_3'){
+                 if(params.data){
+                  return params.data+"%"
+                 }else{
+                   return ''
+                 }
+                }
+              }
+            },
+            barGap: this.queryParams.yco=='Yco_3' && '-100%',
+            data: [...itemData],
+          };
+           // 纵坐标 水质类别，那就堆叠
+        if(this.queryParams.yco=='Yco_3'){
+          single.stack = "Yco_3"
+          this.buildYMax(100);
+        }
+
+          series.push(single);
+        })
+    }
+
+      if(this.queryParams.yco=='Yco_1'){
+        series = [...series,...this.buildLine()]
+      }else{
+            series[0].markLine = {
+                lineStyle: {
+                  normal: {
+                    type: "line",
+                    width: 3,
+                    opacity: 0.9,
+                  },
+                },
+                label: {
+                  padding: [1, 10],
+                  lineHeight: 30,
+                  show: true,
+                  position: this.queryParams.yco=='Yco_1' ? "insideEndBottom" : "end",
+                  borderType: "dashed",
+                  borderWidth: 1,
+                },
+                data: [...this.buildLine()],
+                symbol: ["none", "none"],
+              };
+      }
+
+        // 对指标的名字转成中文
+        if(singleType){
+            series = series.map(item=>{
+                let name = item.name;
+                this.indicatorOptions.forEach(single=>{
+                    if(single.value == item.name){
+                      name = single.label
+                    }
+                })
+                return {
+                    ...item,
+                    name:name
+                }
+            })
+        }
+
+      console.log("series", series);
+      //进行堆叠图百分比计算
+      if(this.queryParams.yco=='Yco_3'){
+        // 所有分组的总值
+        let allGroupCount = [];
+        seriesItemName.forEach((item,index)=>{
+          let count = 0;
+          series.forEach(group=>{
+            count += group.data[index]
+          })
+          allGroupCount.push(count)
+        })
+
+        // 通过总值计算出百分比
+        seriesItemName.forEach((item,index)=>{
+          series = series.map(group=>{
+            group.data[index] = (Math.round(group.data[index] / allGroupCount[index] * 10000) / 100.00)
+            return {
+              ...group,
+            }
+          })
+
+        })
+      }
+      this.series = series;
+    },
+
+  },
+};
+</script>
+<style scoped lang="less">
+.mb-20 {
+  margin-bottom: 20px;
+}
+.empty{
+  height: 100%;
+  line-height: 400px;
+  color: #ccc;
+  font-size: 16px;
+  text-align: center;
+}
+
+</style>