Merge branch 'master' into xiaoman

.env

@@ -1,3 +1,5 @@
 VUE_APP_VERSION=1.0.0
 VUE_APP_NAME=生态环境监测数据综合分析平台
-VUE_APP_API_BASE_URL=http://localhost:10001/api
+VUE_APP_API_BASE_URL=http://1.14.132.108:10002/api
+
+

.env.development

@@ -1 +1 @@
-VUE_APP_API_BASE_URL=http://localhost:10001/api
+VUE_APP_API_BASE_URL=http://1.14.132.108:10002/api

package.json

@@ -22,6 +22,7 @@
     "echarts": "~5.1.2",
     "echarts-wordcloud": "~2.0.0",
     "exceljs": "^4.3.0",
+    "install": "^0.13.0",
     "lodash": "^4.17.21",
     "nprogress": "~0.2.0",
     "tinymce": "~5.8.2",

src/api/ecology/atmosphere/acid.js

@@ -60,6 +60,12 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/acidRain/acidRain/gis/place",{params:data})
 }
+const getTrendChart = function(data){
+    return axios.post("/acidRain/acidRain/trend/chart",data)
+}
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/acidRain/acidRain/place/region",{params:{column}})
+}
 const statisticCity = "/acidRain/acidRain/statistic/city"
 const statisticCounty = "/acidRain/acidRain/statistic/county"
 const statisticIon = "/acidRain/acidRain/statistic/ion"
@@ -83,5 +89,7 @@ export {
     statisticCity,
     statisticIon,
     statisticCounty,
-    getPlaceGis
+    getPlaceGis,
+    getTrendChart,
+    getPlaceByRegionLevel
 }

src/api/ecology/atmosphere/air.js

@@ -71,6 +71,12 @@ const statisticArea = "/ambientAir/ambientAir/statistic/area";
 const getPlaceGis = function(data){
     return axios.get("/ambientAir/ambientAir/gis/place",{params:data})
 }
+const getTrendChart = function(data){
+    return axios.post("/ambientAir/ambientAir/trend/chart",data)
+}
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/ambientAir/ambientAir/place/region",{params:{column}})
+}
 // 排行
 const airDayRankUrl = "/zhenQiWang/ambientAirZhenqiCityDayAqiRankData";
 const airMonthRankUrl = "/zhenQiWang/ambientAirZhenqiCityMonthComprehensiveAqiRankData/page";
@@ -105,6 +111,7 @@ export {
     airPm25YearRankUrl,
     airYearProvincialCapitalRankUrl,
     airPm25YearProvincialCapitalRankUrl,
-    airMonthProvincialCapitalRankUrl
-  
+    airMonthProvincialCapitalRankUrl,
+    getTrendChart,
+    getPlaceByRegionLevel
 }

src/api/ecology/dict.js

@@ -0,0 +1,3 @@
+import axios from 'axios';
+// 查询全部字典项
+export const getDictData = params => axios.get("/sys/dictdata",{params})

src/api/ecology/lake.js

@@ -1,6 +1,11 @@
 import axios from 'axios';
 // ----------------------列表-----------------------
 const pageBillUrl = '/lakeLibrary/lakeLibraryInnerCityBill/page';
+
+const getInnerData = function (data) {
+    return axios.get(pageBillUrl,{params:data})
+}
+
 // 添加
 const saveLakeBill = function (data) {
     return axios.post("/lakeLibrary/lakeLibraryInnerCityBill/importBatch",data)
@@ -75,6 +80,7 @@ export {
     getHistoryyears,
     getColumnOptions,
     statisticSourceUrl,
-    statisticYearUrl
+    statisticYearUrl,
+    getInnerData
 
 }

src/api/ecology/new-drinking-water.js

@@ -0,0 +1,146 @@
+
+import axios from 'axios';
+
+// 获取市级下拉
+
+export const listInfoUrl = '/drinkingWater/drinkingWaterDict';
+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 villageListInfoUrl = '/drinkingWater/drinkingWaterVillageBottomDict';
+export const villageListInfo = function (data) {
+    return axios.get(villageListInfoUrl,data)
+}
+
+// 下拉结束
+
+// 市级监测数据报送表
+export const pageBsaeListUrl = '/drinkingWater/drinkingWater/AnalysePage';
+export const analysePageData = function (data) {
+    return axios.post(pageBsaeListUrl,data)
+}
+
+//市级—报送情况说明表
+export const pageDescListUrl = '/drinkingWater/drinkingWater/getDescripForm';
+export const getDescripForm = function (data) {
+    return axios.post(pageDescListUrl,data)
+}
+
+
+
+//市级—取水量统计
+export const pageanalyseListUrl = '/drinkingWater/drinkingWater/AnalysePage';
+export const getWaterCount = function (data) {
+    return axios.post(pageanalyseListUrl,data)
+}
+
+//市级—超标评价
+export const overStandardtUrl = '/drinkingWater/drinkingWater/getWaterEvaluate';
+export const overStandardCount = function (data) {
+    return axios.post(overStandardtUrl,data)
+}
+
+
+//市级—水质类别
+export const waterQualityUrl = '/drinkingWater/drinkingWater/getWaterQualityCategory';
+export const waterQualityData = function (data) {
+    return axios.post(waterQualityUrl,data)
+}
+
+//市级—水质统计
+export const waterQualityCountUrl = '/drinkingWater/drinkingWater/getWaterQualityStatistics';
+export const waterQualityCountData = function (data) {
+    return axios.post(waterQualityCountUrl,data)
+}
+
+//市级—水质达标情况
+export const waterQualityUpUrl = '/drinkingWater/drinkingWater/getWaterQualityStandard';
+export const waterQualityUpData = function (data) {
+    return axios.post(waterQualityUpUrl,data)
+}
+
+//市级—备用水源营养指数
+export const waterNutritionalUrl = '/drinkingWater/drinkingWater/getCompositeNutritionIndex';
+export const waterNutritionalData = function (data) {
+    return axios.post(waterNutritionalUrl,data)
+}
+
+
+
+// 县级
+//监测数据报送表
+export const countyPageBsaeListUrl = '/drinkingWater/drinkingWater/CountyAnalysePage';
+export const countyPageBsaeData = function (data) {
+    return axios.post(countyPageBsaeListUrl,data)
+}
+
+//报送情况说明表
+export const countyDescripFormUrl = '/drinkingWater/drinkingWater/getCountyDescripForm';
+export const countyDescripFormData = function (data) {
+    return axios.post(countyDescripFormUrl,data)
+}
+
+//县级—超标评价
+export const countyOverStandardtUrl = '/drinkingWater/drinkingWater/getWaterEvaluate';
+export const countyOverStandardCount = function (data) {
+    return axios.post(countyOverStandardtUrl,data)
+}
+
+//县级—水质类别
+export const countyWaterQualityUrl = '/drinkingWater/drinkingWater/getWaterQualityCategory';
+export const countyWaterQualityData = function (data) {
+    return axios.post(countyWaterQualityUrl,data)
+}
+
+//县级—水质统计
+export const countyWaterQualityCountUrl = '/drinkingWater/drinkingWater/getWaterQualityStatistics';
+export const countyWaterQualityCountData = function (data) {
+    return axios.post(countyWaterQualityCountUrl,data)
+}
+
+//县级—水质达标情况
+export const countyWaterQualityUpUrl = '/drinkingWater/drinkingWater/getWaterQualityStandard';
+export const countyWaterQualityUpData = function (data) {
+    return axios.post(countyWaterQualityUpUrl,data)
+}
+
+
+// 农村
+export const villageAnalysePageUrl = '/drinkingWaterVillage/drinkingWaterVillage/VillageAnalysePage';
+export const villageAnalysePageData = function (data) {
+    return axios.post(villageAnalysePageUrl,data)
+}
+
+//农村—水质类别
+export const villageWaterQualityUrl = '/drinkingWaterVillage/drinkingWaterVillage/getWaterQualityCategoryVillage';
+export const villageWaterQualityData = function (data) {
+    return axios.post(villageWaterQualityUrl,data)
+}
+
+//农村—水质达标情况
+export const villageWaterQualityUpUrl = '/drinkingWaterVillage/drinkingWaterVillage/getWaterQualityStandard';
+export const villageWaterQualityUpData = function (data) {
+    return axios.post(villageWaterQualityUpUrl,data)
+}
+
+//农村—超标评价
+export const villageOverStandardtUrl = '/drinkingWaterVillage/drinkingWaterVillage/getWaterVillageEvaluate';
+export const villageOverStandardCount = function (data) {
+    return axios.post(villageOverStandardtUrl,data)
+}
+
+
+// /api/waterFunctionArea/drinkingWaterEvaluationStandard
+
+export const filterList = function (data) {
+    return axios.post('/waterFunctionArea/drinkingWaterEvaluationStandard',data)
+}
+

src/api/ecology/new-lake.js

@@ -5,6 +5,13 @@ export const getLakeDropdown = function () {
     return axios.get(`/lakeLibrary/lakeCityDict/list`)
 }
 
+// 湖库专湖断面，区域
+export const getSpecialLakeDropdown = function () {
+    return axios.get(`/lakeLibrary/lakeSpecialDict/specialDictPage`)
+}
+
+
+
 // 湖库水质分析城市内湖原始数据接口
 export const cityOriginalUrl = '/lakeLibrary/wateAnalysis/city/originalData'
 export const cityOriginalData = function (data) {

src/api/ecology/noise/function-sound.js

@@ -65,6 +65,15 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/sound/function/noise/gis/place",{params:data})
 }
+
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/sound/function/noise/place/region",{params:{column}})
+}
+
+const getTrendChart = function(data){
+    return axios.post("/sound/function/noise/trend/chart",data)
+}
+
 export {
     pageBillUrl,
     saveFunctionNoiseBill,
@@ -84,6 +93,8 @@ export {
     getPlaceGis,
     listAllFunctionNoiseUrl,
     listAllFunctionNoise,
-    pageFunctionNoiseStatisticAvgUrl
+    pageFunctionNoiseStatisticAvgUrl,
+    getPlaceByRegionLevel,
+    getTrendChart
 
 }

src/api/ecology/noise/road-sound.js

@@ -71,6 +71,13 @@ const getGisBase = function(data){
 const getGisArea = function(data){
     return axios.get("/sound/road/noise/gis/area",{params:data})
 }
+
+const getTrendChart = function(data){
+    return axios.post("/sound/road/noise/trend/chart",data)
+}
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/sound/road/noise/place/region",{params:{column}})
+}
 export {
     pageBillUrl,
     saveRoadNoiseBill,
@@ -91,6 +98,7 @@ export {
     listAll,
     getGisBase,
     getGisArea,
-    roadNoiseYearEnd
-  
+    roadNoiseYearEnd,
+    getTrendChart,
+    getPlaceByRegionLevel
 }

src/api/ecology/noise/zone-sound.js

@@ -66,6 +66,12 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/sound/zone/noise/gis/place",{params:data})
 }
+const getTrendChart = function(data){
+    return axios.post("/sound/zone/noise/trend/chart",data)
+}
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/sound/zone/noise/place/region",{params:{column}})
+}
 export {
     pageBillUrl,
     saveZoneNoiseBill,
@@ -86,6 +92,8 @@ export {
     statisticYearUrl,
     listALlZoneNoise,
     statisticLevelDistributionUrl,
-    getPlaceGis
+    getPlaceGis,
+    getTrendChart,
+    getPlaceByRegionLevel
 
 }

src/api/ecology/special-lake.js

@@ -1,6 +1,9 @@
 import axios from 'axios';
 // ----------------------列表-----------------------
 const pageBillUrl = '/lakeLibrary/lakeLibrarySpecialBill/page';
+const getSpecialData = function (data) {
+    return axios.get(pageBillUrl,{params:data})
+}
 // 添加
 const saveLakeBill = function (data) {
     return axios.post("/lakeLibrary/lakeLibrarySpecialBill/importBatch",data)
@@ -72,6 +75,6 @@ export {
     avgUrl,
     getHistoryyears,
     getColumnOptions,
-
+    getSpecialData
 
 }

src/api/ecology/water/lake/import.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+const baseUri = '/lakeLibrary/lakeLibraryImport'
+
+
+export const cityOther  = `${baseUri}/cityOther`
+export const appointCity  = `${baseUri}/appointCity`
+export const special  = `${baseUri}/special`
+
+
+// 城市内湖-其他内湖：/lakeLibrary/lakeLibraryImport/
+export const importCityOther = function (data) {
+    return axios.post(cityOther,data)
+}
+
+// 城市内湖-五象湖：/lakeLibrary/lakeLibraryImport/appointCity
+export const importCppointCity = function (data) {
+    console.log('data',data)
+    return axios.post(appointCity,data)
+}
+
+// 专项湖库：/lakeLibrary/lakeLibraryImport/special
+export const importSpecial = function (data) {
+    return axios.post(special,data)
+}

src/views/atmosphere/acid-rain/trend/index.vue

@@ -0,0 +1,284 @@
+<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="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.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 mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" 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.placeList" :options="placeOptions" 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.indicatorList" :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 mode="multiple" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标">
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :lg="6" :md="12" :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'
+  let trendChart;
+  import {
+    getColumnOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
+  } from "@/api/ecology/atmosphere/acid";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2020", "2021"],
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          xco: '年度' ,// 横坐标
+          ycoList: [],
+          indicatorList: [] // 监测指标
+        },
+        trendData: [],
+        regionLevelOptions: [
+            {label: "市区", value: "city"},
+            {label: "城区", value: "area"},
+            {label: "县区", value: "county"},
+            {label: "站点", value: "place"},
+        ],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        indicatorOptions: [],
+        monthOptions: [
+          {
+            label: '全部',
+            value: '全部',
+          }
+        ],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '年月',
+            value: '年月',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ],
+        yOptions: [
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    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.getArea()
+        this.getPlace('市级')
+      },
+      // 区域下拉列表
+      getArea() {
+        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
+        })
+      },
+      // 县级
+      getCounty() {
+        getDictData({dictName:'县行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
+        })
+      },
+      // 测点名称下拉列表
+      getPlace(regionLevel) {
+        console.log('regionLevel', regionLevel);
+        getPlaceByRegionLevel(regionLevel).then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+      },
+      handleRegionLevelChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.areaList = []
+        this.queryParams.placeList = []
+        if (value == '市级') {
+          this.getArea()
+          this.getPlace(value)
+        } else if (value == '县级') {
+          this.getCounty()
+          this.getPlace(value)
+        }
+      },
+      // 趋势图
+      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() {
+        this.trendData.yAxis[0].axisLabel = {
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        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: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        }
+        trendChart.on("legendselectchanged", obj => {
+          console.log('obj', obj);
+          let index
+          if (this.queryParams.xco === '年度') {
+            index = this.queryParams.areaList.indexOf(obj.name)
+            if (index > -1) {
+              this.queryParams.areaList.splice(index, 1)
+            } else {
+              index = this.queryParams.placeList.indexOf(obj.name)
+              index > -1 && this.queryParams.placeList.splice(index, 1)
+            }
+          } else {
+            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
+            index > -1 && this.queryParams.yearList.splice(index, 1)
+          }
+          this.drawTrend()
+        });
+        //添加一个新的刻度线 实现折线在柱状图的中间显示
+        option.xAxis[1] = {
+          type: 'value',
+          max: option.xAxis[0].data.length,
+          show: false
+        }
+
+        let lineArray = option.series.filter(item => item.type === 'line')
+        lineArray.forEach((item,index) => {
+          item.xAxisIndex = 1
+          item.lineStyle = {
+            type: 'dashed',
+          }
+          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        })
+        console.log('option', option);
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>

src/views/atmosphere/air/trend/index.vue

@@ -0,0 +1,284 @@
+<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="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.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 mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" 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.placeList" :options="placeOptions" 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.indicatorList" :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 mode="multiple" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标">
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :lg="6" :md="12" :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'
+  let trendChart;
+  import {
+    getColumnOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
+  } from "@/api/ecology/atmosphere/air";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2020", "2021"],
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: 'city', // 区域等级
+          xco: '年度' ,// 横坐标
+          ycoList: [],
+          indicatorList: [] // 监测指标
+        },
+        trendData: [],
+        regionLevelOptions: [
+            {label: "市区", value: "city"},
+            {label: "城区", value: "area"},
+            {label: "县区", value: "county"},
+            {label: "站点", value: "place"},
+        ],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        indicatorOptions: [],
+        monthOptions: [
+          {
+            label: '全部',
+            value: '全部',
+          }
+        ],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '年月',
+            value: '年月',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ],
+        yOptions: [
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    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.getArea()
+        this.getPlace('市级')
+      },
+      // 区域下拉列表
+      getArea() {
+        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
+        })
+      },
+      // 县级
+      getCounty() {
+        getDictData({dictName:'县行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
+        })
+      },
+      // 测点名称下拉列表
+      getPlace(regionLevel) {
+        console.log('regionLevel', regionLevel);
+        getPlaceByRegionLevel(regionLevel).then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+      },
+      handleRegionLevelChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.areaList = []
+        this.queryParams.placeList = []
+        if (value == '市级') {
+          this.getArea()
+          this.getPlace(value)
+        } else if (value == '县级') {
+          this.getCounty()
+          this.getPlace(value)
+        }
+      },
+      // 趋势图
+      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() {
+        this.trendData.yAxis[0].axisLabel = {
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        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: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        }
+        trendChart.on("legendselectchanged", obj => {
+          console.log('obj', obj);
+          let index
+          if (this.queryParams.xco === '年度') {
+            index = this.queryParams.areaList.indexOf(obj.name)
+            if (index > -1) {
+              this.queryParams.areaList.splice(index, 1)
+            } else {
+              index = this.queryParams.placeList.indexOf(obj.name)
+              index > -1 && this.queryParams.placeList.splice(index, 1)
+            }
+          } else {
+            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
+            index > -1 && this.queryParams.yearList.splice(index, 1)
+          }
+          this.drawTrend()
+        });
+        //添加一个新的刻度线 实现折线在柱状图的中间显示
+        option.xAxis[1] = {
+          type: 'value',
+          max: option.xAxis[0].data.length,
+          show: false
+        }
+
+        let lineArray = option.series.filter(item => item.type === 'line')
+        lineArray.forEach((item,index) => {
+          item.xAxisIndex = 1
+          item.lineStyle = {
+            type: 'dashed',
+          }
+          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        })
+        console.log('option', option);
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>

src/views/sound/function/statistic/compare.vue

@@ -1,502 +0,0 @@
-<template>
-  <div class="">
-    <a-form :model="where" :rules="whereRules" :labelCol="{ offset: 1 }">
-      <a-row>
-        <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item label="统计模块:">
-            <a-select
-              :options="groupModelOptions"
-              v-model:value="where.groupModel"
-              placeholder="统计模块"
-            >
-            </a-select>
-          </a-form-item>
-        </a-col> -->
-        <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item label="时间细度:">
-            <a-select
-              :options="groupTimeLengthOptions"
-              v-model:value="where.groupTimeLength"
-              placeholder=""
-            >
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item name="timeRange" label="时间范围:">
-            <a-range-picker
-              @panelChange="timeRangePanelChange"
-              v-model:value="timeRange"
-              format="YYYY"
-              :mode="['year', 'year']"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item label="昼夜:">
-            <a-select
-              :options="timeSlotOptions"
-              v-model:value="where.timeSlot"
-              placeholder="昼夜"
-            >
-            </a-select>
-          </a-form-item>
-        </a-col>
-
-        <a-col :lg="12" :md="12" :sm="24" :xs="24">
-          <a-form-item label="类型:">
-            <a-select
-              v-model:value="where.valueType"
-              :options="valueTypeOptions"
-              mode="multiple"
-              placeholder="至少选择一项"
-            >
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
-              <a-form-item label="时间范围:">
-                <a-range-picker @change="reportTimeScopeChange" :mode="['year','year']" separator="~" v-model:value="where.reportTimeScope" ><a-range-picker>
-                   <template #renderExtraFooter>
-                      extra footer
-                    </template>
-                </a-range-picker>
-              </a-form-item>
-            </a-col> -->
-
-        <a-col :lg="12" :md="12" :sm="24" :xs="24">
-          <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
-            <a-space>
-              <a-button type="primary" @click="reload">查询</a-button>
-              <a-button @click="reset">重置</a-button>
-              <a-button @click="exportFile">导出Excel</a-button>
-            </a-space>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
-    <ele-pro-table
-      v-if="hisYears.length > 0"
-      ref="table"
-      row-key="id"
-      :datasource="url"
-      :columns="columns"
-      :where="where"
-      :needPage="false"
-      :initLoad="false"
-      :scroll="{ x: 'max-content' }"
-      :method="'POST'"
-      @done="(d) => (data = d.data)"
-    >
-      <template #toolbar>
-        <!-- 搜索表单 -->
-
-        <!-- <a-space>
-            
-        </a-space> -->
-      </template>
-    </ele-pro-table>
-  </div>
-</template>
-
-<script>
-// import _ from "lodash";
-import { ref } from "vue";
-import XLSX from "xlsx";
-import {
-  pageFunctionNoiseCompare,
-  getHistoryyears,
-} from "@/api/ecology/noise/function-sound";
-export default {
-  name: "StatisticSoundFunctionCompare",
-  components: {},
-  data() {
-    const groupModelOptions = [
-      { label: "测点", value: "place" },
-      { label: "城区", value: "area" },
-      { label: "市", value: "city" },
-    ];
-    const groupTimeLengthOptions = [
-      {
-        label: "年",
-        value: "monitor_year",
-      },
-      {
-        label: "季度",
-        value: "quarter",
-      },
-    ];
-
-    // const valueTypeOptions = ['Leq','SD','L10','L50','L90','Lmin','Lmax'];
-    const valueTypeOptions = [
-      {
-        label: "Leq",
-        value: "index_Leq",
-      },
-      {
-        label: "SD",
-        value: "index_SD",
-      },
-      {
-        label: "L10",
-        value: "index_L10",
-      },
-      {
-        label: "L50",
-        value: "index_L50",
-      },
-      {
-        label: "L90",
-        value: "index_L90",
-      },
-      {
-        label: "Lmin",
-        value: "index_Lmin",
-      },
-      {
-        label: "Lmax",
-        value: "index_Lmax",
-      },
-    ];
-
-    const whereRules = {};
-    return {
-      url: pageFunctionNoiseCompare,
-      data: [],
-      where: {
-        groupModel: "area",
-        groupTimeLength: "monitor_year",
-        reportTimeScope: [],
-        valueType: ["index_Leq"],
-        timeRange: [],
-      },
-      timeRange: [],
-      whereRules,
-      hisYears: [],
-      timeScope: [],
-      columns: [{ title: "年", dataIndex: "year" }],
-      groupModelOptions,
-      groupTimeLengthOptions,
-      valueTypeOptions: ref(valueTypeOptions),
-      timeSlotOptions: [
-        {
-          value: "昼",
-          label: "昼",
-        },
-        {
-          value: "夜",
-          label: "夜",
-        },
-      ],
-    };
-  },
-  mounted() {
-    getHistoryyears().then((res) => {
-      this.hisYears = res.data.data;
-      this.$nextTick(() => {
-        this.reload();
-      });
-    });
-  },
-  methods: {
-    /* 刷新表格 */
-    reload() {
-      if (this.where.valueType.length == 0) {
-        this.$message.error("请至少选择一个类型");
-        return;
-      }
-
-      // 结束时间必须大于开始时间
-      if (this.where.timeRange && this.where.timeRange.length == 2) {
-        if (this.where.timeRange[0] > this.where.timeRange[1]) {
-          this.$message.error("结束时间必须大于起始时间");
-          return;
-        }
-        this.where.startYear = this.where.timeRange[0];
-        this.where.endYear = this.where.timeRange[1];
-      }
-      this.stableDone();
-      this.$refs.table.reload({
-        where: this.where,
-      });
-    },
-    /* 重置搜索 */
-    reset() {
-      this.where = {
-        model: "area",
-      };
-      this.this.timeScope = [];
-      this.reload();
-    },
-    reportTimeScopeChange(d, dstr) {
-      console.log(d, dstr);
-    },
-    timeRangePanelChange(val) {
-      val[0] && (this.where.timeRange[0] = val[0].year());
-      val[1] && (this.where.timeRange[1] = val[1].year());
-      this.timeRange = val;
-    },
-    // 数据加载完成
-    stableDone() {
-      const columns = [];
-      if (this.where.groupModel == "area") {
-        columns.push({
-          title: "城区",
-          dataIndex: "area",
-          sorter: true,
-        });
-      } else if (this.where.groupModel == "place") {
-        columns.push({
-          title: "测点",
-          dataIndex: "area",
-          sorter: true,
-        });
-      } else if (this.where.groupModel == "city") {
-        columns.push({
-          title: "城市",
-          dataIndex: "area",
-          sorter: true,
-        });
-      }
-
-      this.hisYears.forEach((item) => {
-        if (
-          (!this.where.timeRange[0] || this.where.timeRange[0] <= item) &&
-          (!this.where.timeRange[1] || this.where.timeRange[1] >= item)
-        ) {
-          if (this.where.groupTimeLength == "quarter") {
-            columns.push({
-              title: item + "年第一季度Leq",
-              dataIndex: item + "1" + "Leq",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度Leq",
-              dataIndex: item + "2" + "Leq",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度Leq",
-              dataIndex: item + "3" + "Leq",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度Leq",
-              dataIndex: item + "4" + "Leq",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第一季度SD",
-              dataIndex: item + "1" + "Sd",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度SD",
-              dataIndex: item + "2" + "Sd",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度SD",
-              dataIndex: item + "3" + "Sd",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度SD",
-              dataIndex: item + "4" + "Sd",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第一季度L10",
-              dataIndex: item + "1" + "L10",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度L10",
-              dataIndex: item + "2" + "L10",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度L10",
-              dataIndex: item + "3" + "L10",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度L10",
-              dataIndex: item + "4" + "L10",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第一季度L50",
-              dataIndex: item + "1" + "L50",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度L50",
-              dataIndex: item + "2" + "L50",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度L50",
-              dataIndex: item + "3" + "L50",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度L50",
-              dataIndex: item + "4" + "L50",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第一季度L90",
-              dataIndex: item + "1" + "L90",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度L90",
-              dataIndex: item + "2" + "L90",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度L90",
-              dataIndex: item + "3" + "L90",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度L90",
-              dataIndex: item + "4" + "L90",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第一季度Lmin",
-              dataIndex: item + "1" + "Lmin",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度Lmin",
-              dataIndex: item + "2" + "Lmin",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度Lmin",
-              dataIndex: item + "3" + "Lmin",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度Lmin",
-              dataIndex: item + "4" + "Lmin",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第一季度Lmax",
-              dataIndex: item + "1" + "Lmax",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第二季度Lmax",
-              dataIndex: item + "2" + "Lmax",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第三季度Lmax",
-              dataIndex: item + "3" + "Lmax",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-            columns.push({
-              title: item + "年第四季度Lmax",
-              dataIndex: item + "4" + "Lmax",
-              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
-            });
-          } else {
-            if (this.where.valueType.includes("index_Leq")) {
-              columns.push({
-                title: item + "年Leq",
-                dataIndex: item + "Leq",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-            if (this.where.valueType.includes("index_SD")) {
-              columns.push({
-                title: item + "年SD",
-                dataIndex: item + "Sd",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-            if (this.where.valueType.includes("index_L10")) {
-              columns.push({
-                title: item + "年L10",
-                dataIndex: item + "L10",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-
-            if (this.where.valueType.includes("index_L50")) {
-              columns.push({
-                title: item + "年L50",
-                dataIndex: item + "L50",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-            if (this.where.valueType.includes("index_L90")) {
-              columns.push({
-                title: item + "年L90",
-                dataIndex: item + "L90",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-            if (this.where.valueType.includes("index_Lmin")) {
-              columns.push({
-                title: item + "年Lmin",
-                dataIndex: item + "Lmin",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-            if (this.where.valueType.includes("index_Lmax")) {
-              columns.push({
-                title: item + "年Lmax",
-                dataIndex: item + "Lmax",
-                customRender: ({ text }) => {
-                  const val = text ? Number(text).toFixed(2) : "";
-                  return val;
-                },
-              });
-            }
-          }
-        }
-      });
-      //
-      this.columns = columns;
-    },
-    exportFile() {
-      const arr = [];
-      const th = this.columns.map((item) => item.title);
-      arr.push(th);
-      this.data.forEach((d) => {
-        const td = this.columns.map((item) => d[item.dataIndex]);
-        arr.push(td);
-      });
-      let sheet = XLSX.utils.aoa_to_sheet(arr);
-      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

src/views/sound/function/statistic/leq-compare.vue

@@ -1,102 +0,0 @@
-<template>
-  <div class="">
-    <a-form :model="where" :rules="whereRules" :labelCol="{ offset: 1 }">
-      <a-row>
-        <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item label="昼夜:">
-            <a-select
-              :options="timeSlotOptions"
-              v-model:value="where.timeSlot"
-              placeholder="昼夜"
-            >
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :lg="12" :md="12" :sm="24" :xs="24">
-          <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
-            <a-space>
-              <a-button type="primary" @click="reload">查询</a-button>
-              <a-button @click="reset">重置</a-button>
-              <a-button @click="exportFile">导出Excel</a-button>
-            </a-space>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
-    <ele-pro-table
-      v-if="hisYears.length > 0"
-      ref="table"
-      row-key="id"
-      :datasource="url"
-      :columns="columns"
-      :where="where"
-      :needPage="false"
-      :initLoad="false"
-      :scroll="{ x: 'max-content' }"
-      :method="'POST'"
-      @done="(d) => (data = d.data)"
-    >
-      <template #toolbar> </template>
-    </ele-pro-table>
-  </div>
-</template>
-
-<script>
-// import _ from "lodash";
-import XLSX from "xlsx";
-import {
-  pageFunctionNoiseCompare,
-  getHistoryyears,
-} from "@/api/ecology/noise/function-sound";
-export default {
-  name: "StatisticSoundFunctionCompare",
-  components: {},
-  data() {
-    const whereRules = {};
-    return {
-      url: pageFunctionNoiseCompare,
-      data: [],
-      where: {},
-      timeRange: [],
-      whereRules,
-      hisYears: [],
-      timeScope: [],
-      columns: [{ title: "年", dataIndex: "year" }],
-    };
-  },
-  mounted() {
-    getHistoryyears().then((res) => {
-      this.hisYears = res.data.data;
-      this.$nextTick(() => {
-        this.reload();
-      });
-    });
-  },
-  methods: {
-    /* 刷新表格 */
-    reload() {
-      this.$refs.table.reload({
-        where: this.where,
-      });
-    },
-    /* 重置搜索 */
-    reset() {
-      this.reload();
-    },
-    exportFile() {
-      const arr = [];
-      const th = this.columns.map((item) => item.title);
-      arr.push(th);
-      this.data.forEach((d) => {
-        const td = this.columns.map((item) => d[item.dataIndex]);
-        arr.push(td);
-      });
-      let sheet = XLSX.utils.aoa_to_sheet(arr);
-      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

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

@@ -0,0 +1,291 @@
+<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="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.quarterList" @change="handleQuarterChange" :options="quarterOptions" 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.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 mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" 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.placeList" :options="placeOptions" 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.timeSlot" allowClear>
+              <a-select-option v-for="(item) in timeSlotOptions" :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.functionType" :options="functionTypeOptions" 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-row>
+      <a-row>
+        <a-col :lg="6" :md="12" :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'
+  let trendChart;
+  import {
+    getColumnOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
+  } from "@/api/ecology/noise/function-sound";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2021"],
+          areaList: ['南宁市'],
+          placeList: [], // 测点名称
+          quarterList: [], // 季度
+          regionLevel: '市级', // 区域等级
+          xco: '年度' ,// 横坐标
+          functionType: '全部', // 功能区类别
+          timeSlot: '昼'
+        },
+        trendData: [],
+        regionLevelOptions: [],
+        timeSlotOptions: [],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        functionTypeOptions: [],
+        quarterOptions: [
+          { label: "第一季度", value: 1 },
+          { label: "第二季度", value: 2 },
+          { label: "第三季度", value: 3 },
+          { label: "第四季度", value: 4 },
+        ],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '季度',
+            value: '季度',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      // 下拉列表
+      loadOptionData() {
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("region_level").then((res) => {
+          this.regionLevelOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("time_slot").then((res) => {
+          this.timeSlotOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("function_type").then((res) => {
+            this.functionTypeOptions = res.data.data.map((item) => {
+                return {
+                    label: item + '类',
+                    value: item,
+                };
+            });
+            this.functionTypeOptions.unshift({label: '全部', value: '全部'})
+        });
+        this.getArea()
+        this.getPlace('市级')
+      },
+      // 区域下拉列表
+      getArea() {
+        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
+        })
+      },
+      // 县级
+      getCounty() {
+        getDictData({dictName:'县行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
+        })
+      },
+      // 测点名称下拉列表
+      getPlace(regionLevel) {
+        console.log('regionLevel', regionLevel);
+        getPlaceByRegionLevel(regionLevel).then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+          // this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
+        });
+      },
+      handleRegionLevelChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.areaList = []
+        this.queryParams.placeList = []
+        if (value == '市级') {
+          this.getArea()
+          this.getPlace(value)
+        } else if (value == '县级') {
+          this.getCounty()
+          this.getPlace(value)
+        }
+      },
+      handleQuarterChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.xco = '季度'
+      },
+      // 趋势图
+      drawTrend() {
+        if (this.queryParams.quarterList.length > 0 && this.queryParams.xco === '年度') {
+          this.$message.warning('选择季度时, 横坐标不能年度')
+          return
+        }
+        if (this.queryParams.quarterList.length == 0 && this.queryParams.xco === '季度') {
+          this.$message.warning('横坐标为季度时, 季度至少选择一个')
+          return
+        }
+        if (this.queryParams.yearList.length == 0 && this.queryParams.xco === '年度') {
+          this.$message.warning('横坐标为年度时, 年度至少选择一个')
+          return
+        }
+        if (this.queryParams.yearList.length > 1 && this.queryParams.xco === '季度') {
+          this.$message.warning('横坐标为季度时, 不能选择多个年度')
+          return
+        }
+
+        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() {
+        this.trendData.yAxis[0].axisLabel = {
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        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: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        }
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>

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

@@ -0,0 +1,268 @@
+<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 mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
+          </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.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="4" :md="8" :sm="24" :xs="24">
+          <a-form-item label="区域:">
+            <a-select mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" 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" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="请选择测点名称">
+            </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.timeSlot" allowClear>
+              <a-select-option v-for="(item) in timeSlotOptions" :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.xco" :options="xOptions" allowClear 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'
+  let trendChart;
+  import {
+    getColumnOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
+  } from "@/api/ecology/noise/road-sound";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2020", "2021"],
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          timeSlot: '昼',
+          xco: '年度' // 横坐标
+        },
+        trendData: [],
+        regionLevelOptions: [],
+        timeSlotOptions: [],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      // 下拉列表
+      loadOptionData() {
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("region_level").then((res) => {
+          this.regionLevelOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("time_slot").then((res) => {
+          this.timeSlotOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        this.getArea()
+        this.getPlace('市级')
+      },
+      // 区域下拉列表
+      getArea() {
+        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
+        })
+      },
+      // 县级
+      getCounty() {
+        getDictData({dictName:'县行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
+        })
+      },
+      // 测点名称下拉列表
+      getPlace(regionLevel) {
+        console.log('regionLevel', regionLevel);
+        getPlaceByRegionLevel(regionLevel).then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+      },
+      handleRegionLevelChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.areaList = []
+        this.queryParams.placeList = []
+        if (value == '市级') {
+          this.getArea()
+          this.getPlace(value)
+        } else if (value == '县级') {
+          this.getCounty()
+          this.getPlace(value)
+        }
+      },
+      // 趋势图
+      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() {
+        this.trendData.yAxis[0].axisLabel = {
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        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: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        }
+        trendChart.on("legendselectchanged", obj => {
+          console.log('obj', obj);
+          let index
+          if (this.queryParams.xco === '年度') {
+            index = this.queryParams.areaList.indexOf(obj.name)
+            if (index > -1) {
+              this.queryParams.areaList.splice(index, 1)
+            } else {
+              index = this.queryParams.placeList.indexOf(obj.name)
+              index > -1 && this.queryParams.placeList.splice(index, 1)
+            }
+          } else {
+            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
+            index > -1 && this.queryParams.yearList.splice(index, 1)
+          }
+          this.drawTrend()
+        });
+        //添加一个新的刻度线 实现折线在柱状图的中间显示
+        option.xAxis[1] = {
+          type: 'value',
+          max: option.xAxis[0].data.length,
+          show: false
+        }
+
+        let lineArray = option.series.filter(item => item.type === 'line')
+        lineArray.forEach((item,index) => {
+          item.xAxisIndex = 1
+          item.lineStyle = {
+            type: 'dashed',
+          }
+          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        })
+        console.log('option', option);
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>

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

@@ -0,0 +1,236 @@
+<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="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 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 mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" 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.placeList" :options="placeOptions" 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.timeSlot" allowClear>
+              <a-select-option v-for="(item) in timeSlotOptions" :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.xco" :options="xOptions" allowClear placeholder="请选择横坐标">
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :lg="6" :md="12" :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'
+  let trendChart;
+  import {
+    getColumnOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
+  } from "@/api/ecology/noise/zone-sound";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2020", "2021"],
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          xco: '年度' ,// 横坐标
+          timeSlot: '昼'
+        },
+        trendData: [],
+        regionLevelOptions: [],
+        timeSlotOptions: [],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      // 下拉列表
+      loadOptionData() {
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("region_level").then((res) => {
+          this.regionLevelOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("time_slot").then((res) => {
+          this.timeSlotOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        this.getArea()
+        this.getPlace('市级')
+      },
+      // 区域下拉列表
+      getArea() {
+        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
+        })
+      },
+      // 县级
+      getCounty() {
+        getDictData({dictName:'县行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
+        })
+      },
+      // 测点名称下拉列表
+      getPlace(regionLevel) {
+        console.log('regionLevel', regionLevel);
+        getPlaceByRegionLevel(regionLevel).then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+          // this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
+        });
+      },
+      handleRegionLevelChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.areaList = []
+        this.queryParams.placeList = []
+        if (value == '市级') {
+          this.getArea()
+          this.getPlace(value)
+        } else if (value == '县级') {
+          this.getCounty()
+          this.getPlace(value)
+        }
+      },
+      // 趋势图
+      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() {
+        this.trendData.yAxis[0].axisLabel = {
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        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: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        }
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>

src/views/water/drinking-water-village/collect/water-bill.vue

@@ -7,33 +7,60 @@
 
           <!-- 搜索表单 -->
           <a-form layout="inline" :model="where" :labelCol="{ offset: 1}">
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item label="区域等级:">
               <a-select v-model:value="where.regionLevel" allowClear placeholder="未选择">
                 <a-select-option :value="'市级'">市级</a-select-option>
                 <a-select-option :value="'县级'">县级</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-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
+            </a-form-item>
+            </a-col>
+            <!-- <a-form-item label="上报时间:">
+              <a-range-picker separator="~" v-model:value="reportTimeScope" />
+            </a-form-item> -->
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="起始时间:" name="reportTimeStart" >
+                <a-date-picker
+                    v-model:value="where.reportTimeStart"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入起始时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="结束时间:" name="reportTimeEnd">
+                <a-date-picker
+                    v-model:value="where.reportTimeEnd"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入结束时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item label="审核状态:">
               <a-select v-model:value="where.checked" allowClear placeholder="未选择">
                 <a-select-option :value="1">已审核</a-select-option>
                 <a-select-option :value="0">未审核</a-select-option>
               </a-select>
             </a-form-item>
-
-            <a-form-item label="表格名称:">
-              <a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
-            </a-form-item>
-
-            <a-form-item label="上报时间:">
-              <a-range-picker separator="~" v-model:value="reportTimeScope" />
-            </a-form-item>
-
+            </a-col>
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
               <a-space>
                 <a-button type="primary" @click="reload">查询</a-button>
                 <a-button @click="reset">重置</a-button>
               </a-space>
             </a-form-item>
+            </a-col>
           </a-form>
         </template>
         <template #toolkit>
@@ -248,12 +275,12 @@
 
       /* 刷新表格 */
       reload() {
-        this.where.reportTimeStart = null;
-        this.where.reportTimeEnd = null;
-        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
-          this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
-        }
+        // this.where.reportTimeStart = null;
+        // this.where.reportTimeEnd = null;
+        // if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+        //   this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
+        //   this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
+        // }
         this.$refs.table.reload({
           where: this.where
         });
@@ -388,6 +415,9 @@
 </script>
 
 <style lang="less">
+.ant-col{
+    margin-bottom: 10px;
+}
   .editable-cell {
     position: relative;
 

src/views/water/drinking-water/collect/index.vue

@@ -76,6 +76,7 @@
               <a-menu-item @click="download('县级（在用）地表水饮用水','xlsm')" > 县级（在用）地表水饮用水 </a-menu-item>
               <a-menu-item @click="download('县级（备用、规划）地表水饮用水','xls')"> 县级（备用、规划）地表水饮用水 </a-menu-item>
               <a-menu-item @click="download('县级地下水饮用水','xlsx')" > 县级地下水饮用水 </a-menu-item>
+              <a-menu-item @click="download('各取水点取水量情况表','xlsx')" > 各取水点取水量取水量表 </a-menu-item>
             </a-menu>
           </template>
           <a-button  type="primary" style="left: 60px">

src/views/water/drinking-water/collect/water-bill.vue

@@ -13,6 +13,7 @@
       <template #toolbar>
         <!-- 搜索表单 -->
         <a-form layout="inline" :model="where" :labelCol="{ offset: 1 }">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="区域等级:">
             <a-select
               v-model:value="where.regionLevel"
@@ -23,6 +24,44 @@
               <a-select-option :value="'县级'">县级</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-input
+              v-model:value.trim="where.billName"
+              placeholder="请输入"
+              allow-clear
+            />
+          </a-form-item>
+</a-col>
+          <!-- <a-form-item label="上报时间:">
+            <a-range-picker separator="~" v-model:value="reportTimeScope" />
+          </a-form-item> -->
+
+           <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="起始时间:" name="reportTimeStart" >
+                <a-date-picker
+                    v-model:value="where.reportTimeStart"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入起始时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="结束时间:" name="reportTimeEnd">
+                <a-date-picker
+                    v-model:value="where.reportTimeEnd"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入结束时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+                <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="审核状态:">
             <a-select
               v-model:value="where.checked"
@@ -33,25 +72,15 @@
               <a-select-option :value="0">未审核</a-select-option>
             </a-select>
           </a-form-item>
-
-          <a-form-item label="表格名称:">
-            <a-input
-              v-model:value.trim="where.billName"
-              placeholder="请输入"
-              allow-clear
-            />
-          </a-form-item>
-
-          <a-form-item label="上报时间:">
-            <a-range-picker separator="~" v-model:value="reportTimeScope" />
-          </a-form-item>
-
+          </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
             <a-space>
               <a-button type="primary" @click="reload">查询</a-button>
               <a-button @click="reset">重置</a-button>
             </a-space>
           </a-form-item>
+          </a-col>
         </a-form>
       </template>
       <template #toolkit>
@@ -162,8 +191,9 @@
             >
           </a-popconfirm>
           <a-upload
-            :before-upload="importWaterWithdrawal"
+            :before-upload="file=>importWaterWithdrawal(file,record)"
             :showUploadList="false"
+
             accept=".xls,.xlsx,.csv"
           >
             <a-button
@@ -333,7 +363,7 @@ export default {
       }
     },
     /*市级取水量导入 */
-    importWaterWithdrawal(file) {
+    importWaterWithdrawal(file,record) {
       const hide = this.$message.loading("导入中..", 0);
       let reader = new FileReader();
 
@@ -343,23 +373,29 @@ export default {
           let workbook = XLSX.read(data, {
             type: "array",
           });
-          //0.昼间数据 1.夜间数据 2.其他信息
-          // let sheetNames = workbook.SheetNames;
+          
+          let sheetNames = workbook.SheetNames;
           // 解析成二维数组
-          let aoa1 = XLSX.utils.sheet_to_json(workbook.Sheets["Sheet1"], {
+          let aoa1 = XLSX.utils.sheet_to_json(
+            workbook.Sheets[sheetNames[0]], {
             header: 1,
           });
 
+
           const drinkingWaterList = aoa1.filter((item) => {
             return (
               item[0] && !item[0].includes("取水点") && !item[0].includes("合计")
             );
           });
 
+
+          const drinkingWaterBillId=record.drinkingWaterBillId;
+
+          // drinkingWaterList.drinkingWaterBillId=record.drinkingWaterBillId;
           // 解析成对象数组
           // const billName1 = file.name;
           const billData1 = utils.importWaterWithdrawalData(drinkingWaterList);
-          console.log(billData1);
+          // console.log(drinkingWaterList.length);
           // console.log(billData1.place);
           if (!billData1 || billData1.length == 0) {
             hide();
@@ -372,12 +408,15 @@ export default {
 
           if (billData1.length > 0) {
               updateWaterWithdrawal({
-                drinkingWaterList: billData1,
+                // drinkingWaterBillId:record.drinkingWaterBillId,
+                id:drinkingWaterBillId,
+                waterWithdrawals: billData1,
               })
                 .then((res) => {
                   if (res.data.code == 0) {
                     Modal.success({
                       title: "导入成功",
+                      content: `成功导入${billData1.length}条数据`,
                     });
                     this.$refs.water && this.$refs.water.reload();
                   } else {
@@ -399,40 +438,6 @@ export default {
                 });
 
           }
-          // if (billData1.length > 0) {
-          //   // 上传到服务器
-          //   saveDrinkingWaterBill({
-          //     billName: billName1,
-          //     regionLevel: "县级",
-          //     waterSourceType: 1,
-          //     drinkingWaterType: 2,
-          //     drinkingWaterList: billData1,
-          //     // reportTime:  new Date(`${this.year}-01-01 00:00:00`).getTime(),
-          //   })
-          //     .then((res) => {
-          //       if (res.data.code == 0) {
-          //         Modal.success({
-          //           title: "导入成功",
-          //           content: `成功导入${billData1.length}条数据`,
-          //         });
-          //         this.$refs.water && this.$refs.water.reload();
-          //       } else {
-          //         Modal.error({
-          //           title: "导入失败",
-          //           content: "数据上传出错",
-          //         });
-          //       }
-          //     })
-          //     .catch(() => {
-          //       Modal.error({
-          //         title: "导入失败",
-          //         content: "数据上传出错",
-          //       });
-          //     })
-          //     .finally(() => {
-          //       hide();
-          //     });
-          // }
         } catch (error) {
           hide();
           Modal.error({
@@ -447,14 +452,14 @@ export default {
     },
     /* 刷新表格 */
     reload() {
-      this.where.reportTimeStart = null;
-      this.where.reportTimeEnd = null;
-      if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-        this.where.reportTimeStart =
-          this.reportTimeScope[0].format("Y-M-D H:m:s");
-        this.where.reportTimeEnd =
-          this.reportTimeScope[1].format("Y-M-D H:m:s");
-      }
+    //   this.where.reportTimeStart = null;
+    //   this.where.reportTimeEnd = null;
+    //   if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+    //     this.where.reportTimeStart =
+    //       this.reportTimeScope[0].format("Y-M-D H:m:s");
+    //     this.where.reportTimeEnd =
+    //       this.reportTimeScope[1].format("Y-M-D H:m:s");
+    //   }
       this.$refs.table.reload({
         where: this.where,
       });
@@ -591,6 +596,12 @@ export default {
 </script>
 
 <style lang="less">
+.ant-col{
+    margin-bottom: 10px;
+}
+.ant-calendar-picker{
+    width: 100%;
+}
 .editable-cell {
   position: relative;
 

src/views/water/drinking-water/dict/cityWaterDict.vue

@@ -94,6 +94,9 @@
                     <a-form-item label="水源名称" name="sourceWaterName">
                         <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear />
                     </a-form-item>
+                    <a-form-item label="水质目标" name="waterTarget">
+                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
+                    </a-form-item>
                     <a-form-item label="所属水系" name="subordinateWater">
                         <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear />
                     </a-form-item>

src/views/water/drinking-water/dict/countyBottomWaterDict.vue

@@ -90,6 +90,9 @@
                     </a-form-item>
                     <a-form-item label="水源名称" name="sourceWaterName">
                         <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear />
+                    </a-form-item>
+                     <a-form-item label="水质目标" name="waterTarget">
+                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
                     </a-form-item>
                     <a-form-item label="水源地代码" name="sourceWaterCode">
                         <a-input v-model:value="form.sourceWaterCode" placeholder="请输入水源地代码" allow-clear />

src/views/water/drinking-water/dict/countyTopWaterDict.vue

@@ -90,6 +90,9 @@
                     </a-form-item>
                     <a-form-item label="水源名称" name="sourceWaterName">
                         <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear />
+                    </a-form-item>
+                     <a-form-item label="水质目标" name="waterTarget">
+                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
                     </a-form-item>
                     <a-form-item label="所属水系" name="subordinateWater">
                         <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear />

src/views/water/drinking-water/dict/villageBottomDict.vue

@@ -87,6 +87,9 @@
                     </a-form-item>
                     <a-form-item label="断面名称" name="sectionName">
                         <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+                    </a-form-item>
+                     <a-form-item label="水质目标" name="waterTarget">
+                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
                     </a-form-item>
                     <!-- <a-form-item label="湖库(是/否)" name="lakeLibraryFlag">
                         <a-input v-model:value="form.lakeLibraryFlag" placeholder="请输入湖库(是/否)" allow-clear />

src/views/water/drinking-water/dict/villageTopDict.vue

@@ -87,6 +87,9 @@
                     </a-form-item>
                     <a-form-item label="断面名称" name="sectionName">
                         <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+                    </a-form-item>
+                     <a-form-item label="水质目标" name="waterTarget">
+                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
                     </a-form-item>
                     <a-form-item label="湖库(是/否)" name="lakeLibraryFlag">
                         <a-input v-model:value="form.lakeLibraryFlag" placeholder="请输入湖库(是/否)" allow-clear />

src/views/water/drinking-water/statistic/city/base.vue

@@ -0,0 +1,218 @@
+<!--市级 检测数据报送表-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+        :loadSearch="true"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+        @change="handleTableChange"
+      >
+      <template #footer>
+        <div class="footer">
+          饮用水源水质监测累积月份统计样品数：{{count}}个
+        </div>
+      </template>
+
+        <template #waterCode="{ text, record }">
+          <span>
+            {{
+              record.reportTime == null
+                ? (text = "")
+                : record.reportTime.substr(5, 2) == "01" ||
+                  record.reportTime.substr(5, 2) == "02" ||
+                  record.reportTime.substr(5, 2) == "03" ||
+                  record.reportTime.substr(5, 2) == "12"
+                ? (text = "K")
+                : record.reportTime.substr(5, 2) == "04" ||
+                  record.reportTime.substr(5, 2) == "05" ||
+                  record.reportTime.substr(5, 2) == "10" ||
+                  record.reportTime.substr(5, 2) == "11"
+                ? (text = "P")
+                : record.reportTime.substr(5, 2) == "06" ||
+                  record.reportTime.substr(5, 2) == "07" ||
+                  record.reportTime.substr(5, 2) == "08" ||
+                  record.reportTime.substr(5, 2) == "09"
+                ? (text = "F")
+                : (text = "无采样时间")
+            }}
+          </span>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  analysePageData
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableColumns } from "./../colums/base";
+import Search from "./../components/citySearch.vue";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+    Search,
+  },
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys: {
+      typeof: Object,
+      default: function () {
+        return [];
+      },
+    },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  data() {
+    return {
+      count:0, //样品数
+      current:0,
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource: [],
+      selection: [],
+      columns: [...tableColumns],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false,
+    };
+  },
+  watch: {
+    filterKeys(newKeys) {
+      this.filterColumns(newKeys);
+    },
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+        handleTableChange(page){
+          console.log(page)
+        },
+        // 获取列表数据
+        getPageData(){
+            this.loading = true;
+            analysePageData(this.where).then(res=>{
+                 this.loading = false;
+                if(res.data.code){
+                    this.$message.error(res.data.msg);
+                    this.datasource = []
+                    this.count = 0
+                }else{
+                    this.datasource = res.data.data
+                    this.count = res.data.data.length
+                }
+            }).catch(()=>{
+                 this.loading = false;
+            })
+        },
+
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+    // 传上父级
+    changeFilter(data) {
+      this.$emit("changeFilter", data);
+    },
+    //动态修改表头
+    filterColumns(keys) {
+      if (!Array.isArray(keys)) {
+        return;
+      }
+
+      let newCloumns = [...tableColumns];
+
+      let filterIndex = [];
+      newCloumns.forEach((item, index) => {
+        if (keys.indexOf(item.dataIndex) > -1) {
+          filterIndex.push(index);
+        }
+      });
+
+      const newList = newCloumns.filter((item, index) => {
+        return filterIndex.indexOf(index) == -1;
+      });
+      this.columns = newList;
+    },
+
+    // 执行搜索
+    searchData(data) {
+      this.where = data;
+      this.$emit("search", this.where);
+      this.reload();
+    },
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+
+    exportFile() {
+      const columns = [...tableColumns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      arr.push([`饮用水源水质监测累积月份统计样品数：${this.count}个`]);
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.footer{
+  text-align: right;
+}
+</style>

src/views/water/drinking-water/statistic/city/index.vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <a-tabs v-model:activeKey="activeCity">
+            <a-tab-pane tab="监测数据报送表" key="city" >
+              <base-statistic :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='city'"></base-statistic>
+            </a-tab-pane>
+            <a-tab-pane tab="报送情况说明表" key="base1">
+              <city-appraise  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base1'"></city-appraise>
+            </a-tab-pane>
+            <a-tab-pane tab="取水量统计" key="base3">
+              <city-water-withdrawal  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base3'"></city-water-withdrawal>
+            </a-tab-pane>
+            <a-tab-pane tab="超标评价" key="base4">
+              <city-over-standard  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base4'"></city-over-standard>
+            </a-tab-pane>
+            <a-tab-pane tab="水质类别" key="base2" >
+              <city-water-quality :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base2'"></city-water-quality>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质统计" key="base7" >
+              <water-quality-count :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base7'"></water-quality-count>
+            </a-tab-pane>
+            <a-tab-pane tab="水质达标情况" key="base8" >
+              <water-quality-up :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base8'"></water-quality-up>
+            </a-tab-pane>
+            <a-tab-pane tab="备用水源营养指数" key="base5">
+              <water-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base5'"></water-nutritional>
+            </a-tab-pane>
+          </a-tabs>
+    </div>
+</template>
+
+
+<script>
+  /**
+   *
+   *
+   *
+   */
+  //市级监测数据报表
+  import BaseStatistic from "./base.vue"
+  // 报送情况说明
+  import cityAppraise from "./situation.vue"
+  // 取水量
+  import cityWaterWithdrawal from "./waterCount.vue"
+  // 超标评价
+  import cityOverStandard from './overStandard.vue'
+  // 水质类别
+  import cityWaterQuality from "./waterQuality.vue"
+  // 水质统计
+  import waterQualityCount from "./waterQualityCount.vue";
+  // 水质达标情况
+  import waterQualityUp from "./waterQualityUp.vue";
+  //综合营养指数
+  import waterNutritional from "./waterNutritional.vue"
+
+
+
+
+
+  export default {
+    name: 'city-com',
+    components: {
+      BaseStatistic,
+      cityAppraise,
+      cityWaterQuality,
+      waterQualityCount,
+      waterQualityUp,
+      waterNutritional,
+      cityWaterWithdrawal,
+      cityOverStandard
+    },
+    data() {
+      return {
+        activeCity:'city',
+        searchForm:{
+            checked: 1,
+            page:1,
+            limit:10,
+            regionLevel:"市级"
+        },
+        filterKeys:[]
+      };
+
+    },
+    methods: {
+      changeSearch(data){
+          this.searchForm = data
+      },
+      changeFilter(data){
+          this.filterKeys = data
+      }
+    }
+
+  }
+</script>

src/views/water/drinking-water/statistic/city/overStandard.vue

@@ -0,0 +1,160 @@
+<!--超标评价-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        :visiable="visiable"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :loading="loading"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+       
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import Search from "./../components/citySearch.vue";
+import {
+  overStandardCount
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+        visiable:{
+          typeof:Boolean
+      }
+    },
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns: [
+       {title: "城市名称",dataIndex: "city",sorter: true,},
+       {title: "水源地名称",dataIndex: "sectionName",sorter: true,},
+       {title: "取水量（万m3）",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标水源取水量",dataIndex: "overWaterWithdrawal",sorter: true,},
+       {title: "超标项目",dataIndex: "overTargetname",sorter: true,},
+       {title: "水源性质",dataIndex: "waterSourceProperty",sorter: true,},
+      ],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+    // 获取列表数据
+    getPageData(){
+          this.loading = true;
+        overStandardCount(this.where).then(res=>{
+              this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+              this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/city/situation.vue

@@ -0,0 +1,323 @@
+<!--情况说明-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+        <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      
+      <ele-pro-table ref="table" row-key="drinkingWaterId" :datasource="datasource" :columns="columns" :where="where" @change="onChange"
+        :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+          <template #county="{text}">
+            {{text="市区"}}
+          </template>
+          
+          <template #checknumber="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='index1'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['index1']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                    {{ (Array.isArray(text)? text[0]: text) || ' ' }}
+                    <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index1')" />
+                </div>
+            </div>
+        </template>
+
+        <template #enumber="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='index3'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['index3']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                    {{ text || ' ' }}
+                    <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index3')" />
+                </div>
+            </div>
+        </template>
+
+        <template #wnumber="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='index4'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['index4']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index4')" />
+                </div>
+            </div>
+        </template>
+
+        <template #desc="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='reason'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['reason']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'reason')" />
+                </div>
+            </div>
+        </template>
+
+        <template #remark="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='remark'" class="editable-cell-input-wrapper">
+                  <a-textarea class="edit-input" v-model:value="editableData[index]['remark']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'remark')" />
+                </div>
+            </div>
+        </template>
+
+
+      </ele-pro-table>
+
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  getDescripForm
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+
+import Search from "./../components/citySearch.vue";
+import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search,
+      CheckOutlined,
+      EditOutlined,
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+      visiable:{
+          typeof:Boolean
+      }
+    },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      editableData:[],
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {key: "index",title:"序号",dataIndex: "index",width: 48,align: "center",customRender: ({ index }) => index + 1,},
+        {title:"城市",dataIndex:"city",},
+        {title:"县城",dataIndex:"county",slots:{customRender:'county'}},
+        {title:"水源地名称",dataIndex:"sourceWaterName",},
+        {title:"类型",dataIndex:"waterSourceProperty",},
+        {title:"监测时间",dataIndex:"monitorTime"},
+        //  {title:"监测时间",dataIndex:"reportTime",customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
+        {title:"应当监测项目个数",dataIndex:'index1', slots: {
+          customRender: 'checknumber',
+            },},
+        {title:"未测个数",dataIndex:"noCheckNum",},
+        {title:"独立分析项目个数",dataIndex:"index3",
+         slots: {
+          customRender: 'enumber',
+            },
+        },
+        {title:"外送分析项目个数",dataIndex:"index4",  slots: {
+          customRender: 'wnumber',
+            },},
+        {title:"超标项目",dataIndex:"exceedingStandard",},
+        {title:"情况说明或原因",dataIndex:"reason", slots: {
+          customRender: 'desc',
+            }},
+        {title:"备注",dataIndex:"remark",slots: {
+          customRender: 'remark',
+            },},
+      ],
+        
+        
+      // 表格搜索条件
+      where: {
+        checked: 1,
+        page:1,
+        limit:10
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        getDescripForm(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+      //编辑单元格
+    edit(item,index,key){
+        this.editableData[index] = item
+        this.editableData[index].edable=key
+    },
+
+    save(index){
+//         console.log('item',this.editableData[index]['index3'])
+// // console.log('item.remark', item.remark)
+        this.datasource[index] = {...this.editableData[index]}
+        this.editableData = []
+
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+    // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    onChange(e,filters){
+        this.datasource =  this.datasource.map(item=>(
+            {
+                ...item,
+                index1:filters.index1
+            }
+        ))
+    },
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      
+        this.columns[6].filters = []
+        this.columns[6].filterMultiple = false
+        if(this.where.waterSourceType ==1 ){
+          // 地表水
+          this.columns[6].filters =  [
+            {
+                text: '61',
+                value: '61',
+            },
+                {
+                text: '63',
+                value: '63',
+            },
+                {
+                text: '64',
+                value: '64',
+            },
+        ]
+      }
+      if(this.where.waterSourceType ==2 ){
+          // 地下水
+           this.columns[6].filters =  [
+            {
+                text: '39',
+                value: '39',
+            },
+                {
+                text: '94',
+                value: '94',
+            }
+        ]
+      }
+
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+
+
+
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.editable-cell-input-wrapper{
+    display: flex;
+    align-items: center;
+
+    .edit-input{
+        margin-right: 5px;
+        min-width: 200px;
+        width: 100%;
+    }
+}
+.editable-cell-text-wrapper{
+    display: flex;
+    align-items: center;
+
+}
+</style>

src/views/water/drinking-water/statistic/city/waterCount.vue

@@ -0,0 +1,163 @@
+<!--取水量统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        :visiable="visiable"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :loading="loading"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+       
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import Search from "./../components/citySearch.vue";
+
+import {
+  getWaterCount
+} from "@/api/ecology/new-drinking-water";
+
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+        visiable:{
+          typeof:Boolean
+      }
+    },
+  data() {
+    return {
+      data: [],
+      datasource:[],
+      locale,
+      bill: {},
+      // 表格数据接口
+      selection: [],
+      columns: [
+       {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
+       {title: "取水量",dataIndex: "waterWithdrawal",sorter: true,},
+      ],
+
+      // 表格列配置
+
+      // palceOptions: [],
+      // areaOptions: [],
+      // roadOptions: [],
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading: false
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+                    // 获取列表数据
+    getPageData(){
+          this.loading = true;
+        getWaterCount(this.where).then(res=>{
+              this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+              this.loading = false;
+        })
+    },
+    
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/city/waterNutritional.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterNutritionalData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/citySearch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"监测时间",dataIndex:"monitorTime",},
+        {title:"类别",dataIndex:"subordinateWater",},
+        {title:"点位名称",dataIndex:"sectionName",},
+        {title:"水质类别",dataIndex:"waterSourceProperty",},
+        {title: "级别", dataIndex: "nutritionLevel"},
+        {title: "综合营养指数", dataIndex: "compositeNutritionIndex"},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterNutritionalData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/city/waterQuality.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterQualityData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/citySearch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"城市名称",dataIndex:"city",},
+        {title:"水源地名称",dataIndex:"sourceWaterName",},
+        {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"水源地性质",dataIndex:"waterSourceProperty",},
+        {title:"断面水质",align: 'center',children: [
+              {title: "本月", dataIndex: "waterQualityCategory"},
+              {title: "上月", dataIndex: "waterQualityCategoryMom"},
+              {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
+            ]
+        },
+        {title:"主要污染指标",dataIndex:"",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件 
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterQualityData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      let th1 = []
+      let th2 = []
+      const sColumns = []
+      columns.forEach(item=>{
+        th1.push(item.title)
+        if(Array.isArray(item.children) && item.children.length>0){
+          item.children.forEach(single=>{
+            th1.push('')
+            th2.push(single.title)
+            sColumns.push({dataIndex:single.dataIndex})
+          })
+        }else{
+            th2.push('')
+             sColumns.push({dataIndex:item.dataIndex})
+        }
+      })
+      arr.push(th1)
+      arr.push(th2)
+      this.datasource.forEach((d) => {
+        const td = sColumns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+
+
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/city/waterQualityCount.vue

@@ -0,0 +1,159 @@
+<!--水质统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterQualityCountData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/citySearch.vue";
+
+export default {
+  name: "waterQualityCount",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"年份",dataIndex:"year",},
+        {title:"指标",dataIndex:"targetName",},
+        {title:"平均值",dataIndex:"averageValue",},
+        {title:"最大值",dataIndex:"maxValue",},
+        {title:"最小值",dataIndex:"minValue",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterQualityCountData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/city/waterQualityUp.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterQualityUpData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/citySearch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"断面名称",dataIndex:"sectionName",},
+        {title:"时间",dataIndex:"time",},
+        {title:"水质目标",dataIndex:"waterTarget",},
+        {title:"水质类别",dataIndex:"waterQualityCategory",},
+        {title: "达标情况", dataIndex: "standard"},
+        {title: "达标率", dataIndex: "standardRate"},
+        // {title:"达标情况",align: 'center',children: [
+        //       {title: "达标情况", dataIndex: ""},
+        //       {title: "达标率", dataIndex: ""},
+        //       {title: "去年同期", dataIndex: ""},
+        //     ]
+        // },
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterQualityUpData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+              let newData = []
+              const resData = res.data.data || {}
+              for(let i in resData){
+                newData.push(...resData[i])
+              }
+              console.log('newData',newData)
+              this.datasource = newData
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/colums/base.js

@@ -0,0 +1,516 @@
+// import moment from "moment"
+//市级数据总览表格
+
+export const filterColumns = [
+    { title: "pH(无量纲)", dataIndex: "ph", sorter: true, },
+    { title: "溶解氧", dataIndex: "dissolvedOxygen", sorter: true, },
+    { title: "高锰酸盐指数", dataIndex: "permanganateIndex", sorter: true, },
+    { title: "化学需氧量", dataIndex: "cod", sorter: true, },
+    { title: "五日生化需氧量", dataIndex: "fiveDayBod", sorter: true, },
+    { title: "氨氮", dataIndex: "ammonia", sorter: true, },
+    { title: "总磷", dataIndex: "totalPhosphorus", sorter: true, },
+    { title: "总氮", dataIndex: "totalNitrogen", sorter: true, },
+    { title: "铜", dataIndex: "cu", sorter: true, },
+    { title: "锌", dataIndex: "zn", sorter: true, },
+    { title: "氟化物", dataIndex: "fluoride", sorter: true, },
+    { title: "硒", dataIndex: "se", sorter: true, },
+    { title: "砷", dataIndex: "as", sorter: true, },
+    { title: "汞", dataIndex: "hg", sorter: true, },
+    { title: "镉", dataIndex: "cd", sorter: true, },
+    { title: "铬（六价）", dataIndex: "cr", sorter: true, },
+    { title: "铅", dataIndex: "pb", sorter: true, },
+    { title: "氰化物", dataIndex: "cyanide", sorter: true, },
+    { title: "挥发酚", dataIndex: "volatilePhenol", sorter: true, },
+    { title: "石油类", dataIndex: "petro", sorter: true, },
+    { title: "阴离子表面活性剂", dataIndex: "anionicSurfactant", sorter: true, },
+    { title: "硫化物", dataIndex: "sulfide", sorter: true, },
+    { title: "粪大肠菌群(MPN/L)", dataIndex: "fecalColiforms", sorter: true, },
+    { title: "硫酸盐", dataIndex: "sulfate", sorter: true, },
+    { title: "氯化物", dataIndex: "chloride", sorter: true, },
+    { title: "硝酸盐氮", dataIndex: "nitrateNitrogen", sorter: true, },
+    { title: "铁", dataIndex: "fe", sorter: true, },
+    { title: "锰", dataIndex: "mn", sorter: true, },
+    { title: "三氯甲烷", dataIndex: "chcl3", sorter: true, },
+    { title: "四氯化碳", dataIndex: "ccl4", sorter: true, },
+    { title: "三溴甲烷", dataIndex: "chbr3", sorter: true, },
+    { title: "二氯甲烷", dataIndex: "ch2cl2", sorter: true, },
+    { title: "1，2-二氯乙烷", dataIndex: "c2h4cl2", sorter: true, },
+    { title: "环氧氯丙烷", dataIndex: "c3h5clO", sorter: true, },
+    { title: "氯乙烯", dataIndex: "c2h3cl", sorter: true, },
+    { title: "1，1-二氯乙烯", dataIndex: "c2h2cl211", sorter: true, },
+    { title: "1，2-二氯乙烯", dataIndex: "c2h2cl212", sorter: true, },
+    { title: "三氯乙烯", dataIndex: "c2hcl3", sorter: true, },
+    { title: "四氯乙烯", dataIndex: "c2cl4", sorter: true, },
+    { title: "氯丁二烯", dataIndex: "c4h5cl", sorter: true, },
+    { title: "六氯丁二烯", dataIndex: "c4cl6", sorter: true, },
+    { title: "苯乙烯", dataIndex: "c8h8", sorter: true, },
+    { title: "甲醛", dataIndex: "ch2o", sorter: true, },
+    { title: "乙醛", dataIndex: "c2h4o", sorter: true, },
+    { title: "丙烯醛", dataIndex: "c3h4o", sorter: true, },
+    { title: "三氯乙醛", dataIndex: "c2hcl3o", sorter: true, },
+    { title: "苯", dataIndex: "c6h6", sorter: true, },
+    { title: "甲苯", dataIndex: "c7h8", sorter: true, },
+    { title: "乙苯", dataIndex: "c8h10Ethylbenzene", sorter: true, },
+    { title: "二甲苯", dataIndex: "c8h10Dimethylbenzene", sorter: true, },
+    { title: "异丙苯", dataIndex: "c9h12", sorter: true, },
+    { title: "氯苯", dataIndex: "c6h5cl", sorter: true, },
+    { title: "1，2-二氯苯", dataIndex: "c6h4cl212", sorter: true, },
+    { title: "1，4-二氯苯", dataIndex: "c6h4cl214", sorter: true, },
+    { title: "三氯苯", dataIndex: "c6h3cl3", sorter: true, },
+    { title: "四氯苯", dataIndex: "c6h2cl4", sorter: true, },
+    { title: "六氯苯", dataIndex: "c6cl6", sorter: true, },
+    { title: "硝基苯", dataIndex: "c6h5no2", sorter: true, },
+    { title: "二硝基苯", dataIndex: "c6h4n2o4", sorter: true, },
+    { title: "2，4-二硝基甲苯", dataIndex: "c7h6n2o4", sorter: true, },
+    { title: "2，4，6-三硝基甲苯", dataIndex: "c7h5o6n3", sorter: true, },
+    { title: "硝基氯苯", dataIndex: "c6h4clno2", sorter: true, },
+    { title: "2，4-二硝基氯苯 ", dataIndex: "c6h3cln2o4", sorter: true, },
+    { title: "2，4-二氯苯酚", dataIndex: "c6h4cl2o", sorter: true, },
+    { title: "2，4，6-三氯苯酚", dataIndex: "c6h3cl3o", sorter: true, },
+    { title: "五氯酚", dataIndex: "c6hcl5o", sorter: true, },
+    { title: "苯胺", dataIndex: "c6h7n", sorter: true, },
+    { title: "联苯胺", dataIndex: "c6h4nh22", sorter: true, },
+    { title: "丙烯酰胺", dataIndex: "c3h5no", sorter: true, },
+    { title: "丙烯腈", dataIndex: "c3h3n", sorter: true, },
+    { title: "邻苯二甲酸二丁酯", dataIndex: "c16h22o4", sorter: true, },
+    { title: "邻苯二甲酸二（2-乙基已基）酯", dataIndex: "c16h35o4p", sorter: true, },
+    { title: "水合肼", dataIndex: "n2h4h2o", sorter: true, },
+    { title: "四乙基铅", dataIndex: "c8h20pd", sorter: true, },
+    { title: "吡啶", dataIndex: "c5h5n", sorter: true, },
+    { title: "松节油", dataIndex: "turpentine", sorter: true, },
+    { title: "苦味酸", dataIndex: "c6h3n3o7", sorter: true, },
+    { title: "丁基黄原酸", dataIndex: "butylXanthogenAcid", sorter: true, },
+    { title: "活性氯", dataIndex: "activeChlorine", sorter: true, },
+    { title: "滴滴涕", dataIndex: "c14h9cl5", sorter: true, },
+    { title: "林丹", dataIndex: "c6h6cl6", sorter: true, },
+    { title: "环氧七氯", dataIndex: "c10h5cl7O", sorter: true, },
+    { title: "对硫磷", dataIndex: "c10h14no5ps", sorter: true, },
+    { title: "甲基对硫磷", dataIndex: "c8h10o5nps", sorter: true, },
+    { title: "马拉硫磷", dataIndex: "c10h19o6ps2", sorter: true, },
+    { title: "乐果", dataIndex: "c5h12no3ps2", sorter: true, },
+    { title: "敌敌畏", dataIndex: "c4h7cl2o4p", sorter: true, },
+    { title: "敌百虫", dataIndex: "c4h8cl3o4p", sorter: true, },
+    { title: "内吸磷", dataIndex: "c8h19o3ps2", sorter: true, },
+    { title: "百菌清", dataIndex: "c8cl4n2", sorter: true, },
+    { title: "甲萘威", dataIndex: "c12h11no2", sorter: true, },
+    { title: "溴氰菊酯", dataIndex: "c22h19br2no3", sorter: true, },
+    { title: "阿特拉津", dataIndex: "c8h14cln5", sorter: true, },
+    { title: "苯并(a)芘 ", dataIndex: "c20h12", sorter: true, },
+    { title: "甲基汞", dataIndex: "ch3hg", sorter: true, },
+    { title: "多氯联苯", dataIndex: "c12h10Xclx", sorter: true, },
+    { title: "微囊藻毒素-LR", dataIndex: "微囊藻毒素-LR", sorter: true, },
+    { title: "黄磷", dataIndex: "p4", sorter: true, },
+    { title: "钼", dataIndex: "mo", sorter: true, },
+    { title: "钴", dataIndex: "co", sorter: true, },
+    { title: "铍", dataIndex: "be", sorter: true, },
+    { title: "硼", dataIndex: "b", sorter: true, },
+    { title: "锑", dataIndex: "sb", sorter: true, },
+    { title: "镍", dataIndex: "ni", sorter: true, },
+    { title: "钡", dataIndex: "ba", sorter: true, },
+    { title: "钒", dataIndex: "v", sorter: true, },
+    { title: "钛", dataIndex: "ti", sorter: true, },
+    { title: "铊", dataIndex: "tl", sorter: true, },
+
+    { title: "六价铬", dataIndex: "cr6", sorter: true, },
+    { title: "邻二氯苯", dataIndex: "odcb", sorter: true, },
+    { title: "对二氯苯", dataIndex: "pdcp", sorter: true, },
+
+    { title: "苯并(a)芘", dataIndex: "bap", sorter: true, },
+    { title: "苯并(b)荧蒽", dataIndex: "bbfa", sorter: true, },
+    { title: "磷酸盐", dataIndex: "phosphate", sorter: true, },
+    { title: "急性毒性", dataIndex: "acuteToxicity", sorter: true, },
+    { title: "余氯", dataIndex: "residualChlorine", sorter: true, },
+    { title: "六六六", dataIndex: "c6h6cl6666", sorter: true, },
+    { title: "2,4,6-三氯酚", dataIndex: "c6h3cl3o246", sorter: true, },
+    //新增
+    { title: "叶绿素（mg/m3)", dataIndex: "chlorophyll", sorter: true, },
+    { title: "透明度（cm）", dataIndex: "transparency", sorter: true, },
+    { title: "总α放射性", dataIndex: "totalAlphaRadioactivity", sorter: true, },
+    { title: "总β放射性", dataIndex: "totalBetaRadioactivity", sorter: true, },
+    { title: "1,1,1-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_111", sorter: true, },
+    { title: "1,1,2-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_112", sorter: true, },
+]
+
+const tableColumns = [
+
+    { title: "省份", dataIndex: "province", sorter: true, },
+    { title: "省份代码", dataIndex: "provinceCode", sorter: true, },
+    { title: "城市名称", dataIndex: "city", sorter: true, },
+    { title: "城市代码", dataIndex: "cityCode", sorter: true, },
+    { title: "重点城市区分", dataIndex: "keyCity", sorter: true, },
+    { title: "南北方城市", dataIndex: "cityOrientation", sorter: true, },
+    { title: "断面名称", dataIndex: "sectionName", sorter: true, },
+    { title: "断面代码", dataIndex: "sectionCode", sorter: true, },
+    { title: "水源名称", dataIndex: "sourceWaterName", sorter: true, },
+    { title: "所属水系", dataIndex: "subordinateWater", sorter: true, },
+    { title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true, },
+    { title: "取水点经度", dataIndex: "longitude", sorter: true, },
+    { title: "取水点纬度", dataIndex: "latitude", sorter: true, },
+    { title: "本月取水量", dataIndex: "waterWithdrawal", sorter: true, },
+    // { title: "采样时间", dataIndex: "reportTime", sorter: true, customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
+    { title: "采样时间", dataIndex: "reportTime", sorter: true,},
+    { title: "水期代码", dataIndex: "waterPhaseCode",sorter: true, 
+        slots:{customRender:'waterCode' }
+    },
+    { title: "水温", dataIndex: "waterTemperature", sorter: true, },
+    // {title: "采样时间",dataIndex: "monitorTime",sorter: true,},
+    { title: "pH(无量纲)", dataIndex: "ph", sorter: true, },
+    { title: "溶解氧", dataIndex: "dissolvedOxygen", sorter: true, },
+    { title: "高锰酸盐指数", dataIndex: "permanganateIndex", sorter: true, },
+    { title: "化学需氧量", dataIndex: "cod", sorter: true, },
+    { title: "五日生化需氧量", dataIndex: "fiveDayBod", sorter: true, },
+    { title: "氨氮", dataIndex: "ammonia", sorter: true, },
+    { title: "总磷", dataIndex: "totalPhosphorus", sorter: true, },
+    { title: "总氮", dataIndex: "totalNitrogen", sorter: true, },
+    { title: "铜", dataIndex: "cu", sorter: true, },
+    { title: "锌", dataIndex: "zn", sorter: true, },
+    { title: "氟化物", dataIndex: "fluoride", sorter: true, },
+    { title: "硒", dataIndex: "se", sorter: true, },
+    { title: "砷", dataIndex: "as", sorter: true, },
+    { title: "汞", dataIndex: "hg", sorter: true, },
+    { title: "镉", dataIndex: "cd", sorter: true, },
+    { title: "铬（六价）", dataIndex: "cr", sorter: true, },
+    { title: "铅", dataIndex: "pb", sorter: true, },
+    { title: "氰化物", dataIndex: "cyanide", sorter: true, },
+    { title: "挥发酚", dataIndex: "volatilePhenol", sorter: true, },
+    { title: "石油类", dataIndex: "petro", sorter: true, },
+    { title: "阴离子表面活性剂", dataIndex: "anionicSurfactant", sorter: true, },
+    { title: "硫化物", dataIndex: "sulfide", sorter: true, },
+    { title: "粪大肠菌群(MPN/L)", dataIndex: "fecalColiforms", sorter: true, },
+    { title: "硫酸盐", dataIndex: "sulfate", sorter: true, },
+    { title: "氯化物", dataIndex: "chloride", sorter: true, },
+    { title: "硝酸盐氮", dataIndex: "nitrateNitrogen", sorter: true, },
+    { title: "铁", dataIndex: "fe", sorter: true, },
+    { title: "锰", dataIndex: "mn", sorter: true, },
+    { title: "三氯甲烷", dataIndex: "chcl3", sorter: true, },
+    { title: "四氯化碳", dataIndex: "ccl4", sorter: true, },
+    { title: "三溴甲烷", dataIndex: "chbr3", sorter: true, },
+    { title: "二氯甲烷", dataIndex: "ch2cl2", sorter: true, },
+    { title: "1，2-二氯乙烷", dataIndex: "c2h4cl2", sorter: true, },
+    { title: "环氧氯丙烷", dataIndex: "c3h5clO", sorter: true, },
+    { title: "氯乙烯", dataIndex: "c2h3cl", sorter: true, },
+    { title: "1，1-二氯乙烯", dataIndex: "c2h2cl211", sorter: true, },
+    { title: "1，2-二氯乙烯", dataIndex: "c2h2cl212", sorter: true, },
+    { title: "三氯乙烯", dataIndex: "c2hcl3", sorter: true, },
+    { title: "四氯乙烯", dataIndex: "c2cl4", sorter: true, },
+    { title: "氯丁二烯", dataIndex: "c4h5cl", sorter: true, },
+    { title: "六氯丁二烯", dataIndex: "c4cl6", sorter: true, },
+    { title: "苯乙烯", dataIndex: "c8h8", sorter: true, },
+    { title: "甲醛", dataIndex: "ch2o", sorter: true, },
+    { title: "乙醛", dataIndex: "c2h4o", sorter: true, },
+    { title: "丙烯醛", dataIndex: "c3h4o", sorter: true, },
+    { title: "三氯乙醛", dataIndex: "c2hcl3o", sorter: true, },
+    { title: "苯", dataIndex: "c6h6", sorter: true, },
+    { title: "甲苯", dataIndex: "c7h8", sorter: true, },
+    { title: "乙苯", dataIndex: "c8h10Ethylbenzene", sorter: true, },
+    { title: "二甲苯", dataIndex: "c8h10Dimethylbenzene", sorter: true, },
+    { title: "异丙苯", dataIndex: "c9h12", sorter: true, },
+    { title: "氯苯", dataIndex: "c6h5cl", sorter: true, },
+    { title: "1，2-二氯苯", dataIndex: "c6h4cl212", sorter: true, },
+    { title: "1，4-二氯苯", dataIndex: "c6h4cl214", sorter: true, },
+    { title: "三氯苯", dataIndex: "c6h3cl3", sorter: true, },
+    { title: "四氯苯", dataIndex: "c6h2cl4", sorter: true, },
+    { title: "六氯苯", dataIndex: "c6cl6", sorter: true, },
+    { title: "硝基苯", dataIndex: "c6h5no2", sorter: true, },
+    { title: "二硝基苯", dataIndex: "c6h4n2o4", sorter: true, },
+    { title: "2，4-二硝基甲苯", dataIndex: "c7h6n2o4", sorter: true, },
+    { title: "2，4，6-三硝基甲苯", dataIndex: "c7h5o6n3", sorter: true, },
+    { title: "硝基氯苯", dataIndex: "c6h4clno2", sorter: true, },
+    { title: "2，4-二硝基氯苯 ", dataIndex: "c6h3cln2o4", sorter: true, },
+    { title: "2，4-二氯苯酚", dataIndex: "c6h4cl2o", sorter: true, },
+    { title: "2，4，6-三氯苯酚", dataIndex: "c6h3cl3o", sorter: true, },
+    { title: "五氯酚", dataIndex: "c6hcl5o", sorter: true, },
+    { title: "苯胺", dataIndex: "c6h7n", sorter: true, },
+    { title: "联苯胺", dataIndex: "c6h4nh22", sorter: true, },
+    { title: "丙烯酰胺", dataIndex: "c3h5no", sorter: true, },
+    { title: "丙烯腈", dataIndex: "c3h3n", sorter: true, },
+    { title: "邻苯二甲酸二丁酯", dataIndex: "c16h22o4", sorter: true, },
+    { title: "邻苯二甲酸二（2-乙基已基）酯", dataIndex: "c16h35o4p", sorter: true, },
+    { title: "水合肼", dataIndex: "n2h4h2o", sorter: true, },
+    { title: "四乙基铅", dataIndex: "c8h20pd", sorter: true, },
+    { title: "吡啶", dataIndex: "c5h5n", sorter: true, },
+    { title: "松节油", dataIndex: "turpentine", sorter: true, },
+    { title: "苦味酸", dataIndex: "c6h3n3o7", sorter: true, },
+    { title: "丁基黄原酸", dataIndex: "butylXanthogenAcid", sorter: true, },
+    { title: "活性氯", dataIndex: "activeChlorine", sorter: true, },
+    { title: "滴滴涕", dataIndex: "c14h9cl5", sorter: true, },
+    { title: "林丹", dataIndex: "c6h6cl6", sorter: true, },
+    { title: "环氧七氯", dataIndex: "c10h5cl7O", sorter: true, },
+    { title: "对硫磷", dataIndex: "c10h14no5ps", sorter: true, },
+    { title: "甲基对硫磷", dataIndex: "c8h10o5nps", sorter: true, },
+    { title: "马拉硫磷", dataIndex: "c10h19o6ps2", sorter: true, },
+    { title: "乐果", dataIndex: "c5h12no3ps2", sorter: true, },
+    { title: "敌敌畏", dataIndex: "c4h7cl2o4p", sorter: true, },
+    { title: "敌百虫", dataIndex: "c4h8cl3o4p", sorter: true, },
+    { title: "内吸磷", dataIndex: "c8h19o3ps2", sorter: true, },
+    { title: "百菌清", dataIndex: "c8cl4n2", sorter: true, },
+    { title: "甲萘威", dataIndex: "c12h11no2", sorter: true, },
+    { title: "溴氰菊酯", dataIndex: "c22h19br2no3", sorter: true, },
+    { title: "阿特拉津", dataIndex: "c8h14cln5", sorter: true, },
+    { title: "苯并(a)芘 ", dataIndex: "c20h12", sorter: true, },
+    { title: "甲基汞", dataIndex: "ch3hg", sorter: true, },
+    { title: "多氯联苯", dataIndex: "c12h10Xclx", sorter: true, },
+    { title: "微囊藻毒素-LR", dataIndex: "微囊藻毒素-LR", sorter: true, },
+    { title: "黄磷", dataIndex: "p4", sorter: true, },
+    { title: "钼", dataIndex: "mo", sorter: true, },
+    { title: "钴", dataIndex: "co", sorter: true, },
+    { title: "铍", dataIndex: "be", sorter: true, },
+    { title: "硼", dataIndex: "b", sorter: true, },
+    { title: "锑", dataIndex: "sb", sorter: true, },
+    { title: "镍", dataIndex: "ni", sorter: true, },
+    { title: "钡", dataIndex: "ba", sorter: true, },
+    { title: "钒", dataIndex: "v", sorter: true, },
+    { title: "钛", dataIndex: "ti", sorter: true, },
+    { title: "铊", dataIndex: "tl", sorter: true, },
+
+    { title: "六价铬", dataIndex: "cr6", sorter: true, },
+    { title: "邻二氯苯", dataIndex: "odcb", sorter: true, },
+    { title: "对二氯苯", dataIndex: "pdcp", sorter: true, },
+
+    { title: "苯并(a)芘", dataIndex: "bap", sorter: true, },
+    { title: "苯并(b)荧蒽", dataIndex: "bbfa", sorter: true, },
+    { title: "磷酸盐", dataIndex: "phosphate", sorter: true, },
+    { title: "急性毒性", dataIndex: "acuteToxicity", sorter: true, },
+    { title: "余氯", dataIndex: "residualChlorine", sorter: true, },
+    { title: "六六六", dataIndex: "c6h6cl6666", sorter: true, },
+    { title: "2,4,6-三氯酚", dataIndex: "c6h3cl3o246", sorter: true, },
+    //新增
+    { title: "叶绿素（mg/m3)", dataIndex: "chlorophyll", sorter: true, },
+    { title: "透明度（cm）", dataIndex: "transparency", sorter: true, },
+    { title: "总α放射性", dataIndex: "totalAlphaRadioactivity", sorter: true, },
+    { title: "总β放射性", dataIndex: "totalBetaRadioactivity", sorter: true, },
+    { title: "1,1,1-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_111", sorter: true, },
+    { title: "1,1,2-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_112", sorter: true, },
+];
+export { tableColumns }
+
+//县级数据总览表格
+const tableColumns2 = [
+    { title: "省份", dataIndex: "province", sorter: true, },
+    { title: "省份代码", dataIndex: "provinceCode", sorter: true, },
+    { title: "城市名称", dataIndex: "city", sorter: true, },
+    { title: "城市代码", dataIndex: "cityCode", sorter: true, },
+    // { title: "重点城市区分", dataIndex: "keyCity", sorter: true, },
+    {title:"县域名称",dataIndex:"countyName",sorter:true},
+    {title:"县域代码",dataIndex:"countyCode",sorter:true},
+    // { title: "南北方城市", dataIndex: "cityOrientation", sorter: true, },
+    { title: "断面名称", dataIndex: "sectionName", sorter: true, },
+    // { title: "断面代码", dataIndex: "sectionCode", sorter: true, },
+    { title: "水源名称", dataIndex: "sourceWaterName", sorter: true, },
+    { title: "所属水系", dataIndex: "subordinateWater", sorter: true, },
+    { title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true, },
+    { title: "取水点经度", dataIndex: "longitude", sorter: true, },
+    { title: "取水点纬度", dataIndex: "latitude", sorter: true, },
+    { title: "本月取水量", dataIndex: "waterWithdrawal", sorter: true, },
+    { title: "采样时间", dataIndex: "reportTime", sorter: true},
+    { title: "水期代码", dataIndex: "waterPhaseCode",sorter: true, 
+        slots:{customRender:'waterCode' }
+    },
+    { title: "水温", dataIndex: "waterTemperature", sorter: true, },
+    // {title: "采样时间",dataIndex: "monitorTime",sorter: true,},
+    { title: "pH(无量纲)", dataIndex: "ph", sorter: true, },
+    { title: "溶解氧", dataIndex: "dissolvedOxygen", sorter: true, },
+    { title: "高锰酸盐指数", dataIndex: "permanganateIndex", sorter: true, },
+    { title: "化学需氧量", dataIndex: "cod", sorter: true, },
+    { title: "五日生化需氧量", dataIndex: "fiveDayBod", sorter: true, },
+    { title: "氨氮", dataIndex: "ammonia", sorter: true, },
+    { title: "总磷", dataIndex: "totalPhosphorus", sorter: true, },
+    { title: "总氮", dataIndex: "totalNitrogen", sorter: true, },
+    { title: "铜", dataIndex: "cu", sorter: true, },
+    { title: "锌", dataIndex: "zn", sorter: true, },
+    { title: "氟化物", dataIndex: "fluoride", sorter: true, },
+    { title: "硒", dataIndex: "se", sorter: true, },
+    { title: "砷", dataIndex: "as", sorter: true, },
+    { title: "汞", dataIndex: "hg", sorter: true, },
+    { title: "镉", dataIndex: "cd", sorter: true, },
+    { title: "铬（六价）", dataIndex: "cr", sorter: true, },
+    { title: "铅", dataIndex: "pb", sorter: true, },
+    { title: "氰化物", dataIndex: "cyanide", sorter: true, },
+    { title: "挥发酚", dataIndex: "volatilePhenol", sorter: true, },
+    { title: "石油类", dataIndex: "petro", sorter: true, },
+    { title: "阴离子表面活性剂", dataIndex: "anionicSurfactant", sorter: true, },
+    { title: "硫化物", dataIndex: "sulfide", sorter: true, },
+    { title: "粪大肠菌群(MPN/L)", dataIndex: "fecalColiforms", sorter: true, },
+    { title: "硫酸盐", dataIndex: "sulfate", sorter: true, },
+    { title: "氯化物", dataIndex: "chloride", sorter: true, },
+    { title: "硝酸盐氮", dataIndex: "nitrateNitrogen", sorter: true, },
+    { title: "铁", dataIndex: "fe", sorter: true, },
+    { title: "锰", dataIndex: "mn", sorter: true, },
+    { title: "三氯甲烷", dataIndex: "chcl3", sorter: true, },
+    { title: "四氯化碳", dataIndex: "ccl4", sorter: true, },
+    { title: "三溴甲烷", dataIndex: "chbr3", sorter: true, },
+    { title: "二氯甲烷", dataIndex: "ch2cl2", sorter: true, },
+    { title: "1，2-二氯乙烷", dataIndex: "c2h4cl2", sorter: true, },
+    { title: "环氧氯丙烷", dataIndex: "c3h5clO", sorter: true, },
+    { title: "氯乙烯", dataIndex: "c2h3cl", sorter: true, },
+    { title: "1，1-二氯乙烯", dataIndex: "c2h2cl211", sorter: true, },
+    { title: "1，2-二氯乙烯", dataIndex: "c2h2cl212", sorter: true, },
+    { title: "三氯乙烯", dataIndex: "c2hcl3", sorter: true, },
+    { title: "四氯乙烯", dataIndex: "c2cl4", sorter: true, },
+    { title: "氯丁二烯", dataIndex: "c4h5cl", sorter: true, },
+    { title: "六氯丁二烯", dataIndex: "c4cl6", sorter: true, },
+    { title: "苯乙烯", dataIndex: "c8h8", sorter: true, },
+    { title: "甲醛", dataIndex: "ch2o", sorter: true, },
+    { title: "乙醛", dataIndex: "c2h4o", sorter: true, },
+    { title: "丙烯醛", dataIndex: "c3h4o", sorter: true, },
+    { title: "三氯乙醛", dataIndex: "c2hcl3o", sorter: true, },
+    { title: "苯", dataIndex: "c6h6", sorter: true, },
+    { title: "甲苯", dataIndex: "c7h8", sorter: true, },
+    { title: "乙苯", dataIndex: "c8h10Ethylbenzene", sorter: true, },
+    { title: "二甲苯", dataIndex: "c8h10Dimethylbenzene", sorter: true, },
+    { title: "异丙苯", dataIndex: "c9h12", sorter: true, },
+    { title: "氯苯", dataIndex: "c6h5cl", sorter: true, },
+    { title: "1，2-二氯苯", dataIndex: "c6h4cl212", sorter: true, },
+    { title: "1，4-二氯苯", dataIndex: "c6h4cl214", sorter: true, },
+    { title: "三氯苯", dataIndex: "c6h3cl3", sorter: true, },
+    { title: "四氯苯", dataIndex: "c6h2cl4", sorter: true, },
+    { title: "六氯苯", dataIndex: "c6cl6", sorter: true, },
+    { title: "硝基苯", dataIndex: "c6h5no2", sorter: true, },
+    { title: "二硝基苯", dataIndex: "c6h4n2o4", sorter: true, },
+    { title: "2，4-二硝基甲苯", dataIndex: "c7h6n2o4", sorter: true, },
+    { title: "2，4，6-三硝基甲苯", dataIndex: "c7h5o6n3", sorter: true, },
+    { title: "硝基氯苯", dataIndex: "c6h4clno2", sorter: true, },
+    { title: "2，4-二硝基氯苯 ", dataIndex: "c6h3cln2o4", sorter: true, },
+    { title: "2，4-二氯苯酚", dataIndex: "c6h4cl2o", sorter: true, },
+    { title: "2，4，6-三氯苯酚", dataIndex: "c6h3cl3o", sorter: true, },
+    { title: "五氯酚", dataIndex: "c6hcl5o", sorter: true, },
+    { title: "苯胺", dataIndex: "c6h7n", sorter: true, },
+    { title: "联苯胺", dataIndex: "c6h4nh22", sorter: true, },
+    { title: "丙烯酰胺", dataIndex: "c3h5no", sorter: true, },
+    { title: "丙烯腈", dataIndex: "c3h3n", sorter: true, },
+    { title: "邻苯二甲酸二丁酯", dataIndex: "c16h22o4", sorter: true, },
+    { title: "邻苯二甲酸二（2-乙基已基）酯", dataIndex: "c16h35o4p", sorter: true, },
+    { title: "水合肼", dataIndex: "n2h4h2o", sorter: true, },
+    { title: "四乙基铅", dataIndex: "c8h20pd", sorter: true, },
+    { title: "吡啶", dataIndex: "c5h5n", sorter: true, },
+    { title: "松节油", dataIndex: "turpentine", sorter: true, },
+    { title: "苦味酸", dataIndex: "c6h3n3o7", sorter: true, },
+    { title: "丁基黄原酸", dataIndex: "butylXanthogenAcid", sorter: true, },
+    { title: "活性氯", dataIndex: "activeChlorine", sorter: true, },
+    { title: "滴滴涕", dataIndex: "c14h9cl5", sorter: true, },
+    { title: "林丹", dataIndex: "c6h6cl6", sorter: true, },
+    { title: "环氧七氯", dataIndex: "c10h5cl7O", sorter: true, },
+    { title: "对硫磷", dataIndex: "c10h14no5ps", sorter: true, },
+    { title: "甲基对硫磷", dataIndex: "c8h10o5nps", sorter: true, },
+    { title: "马拉硫磷", dataIndex: "c10h19o6ps2", sorter: true, },
+    { title: "乐果", dataIndex: "c5h12no3ps2", sorter: true, },
+    { title: "敌敌畏", dataIndex: "c4h7cl2o4p", sorter: true, },
+    { title: "敌百虫", dataIndex: "c4h8cl3o4p", sorter: true, },
+    { title: "内吸磷", dataIndex: "c8h19o3ps2", sorter: true, },
+    { title: "百菌清", dataIndex: "c8cl4n2", sorter: true, },
+    { title: "甲萘威", dataIndex: "c12h11no2", sorter: true, },
+    { title: "溴氰菊酯", dataIndex: "c22h19br2no3", sorter: true, },
+    { title: "阿特拉津", dataIndex: "c8h14cln5", sorter: true, },
+    { title: "苯并(a)芘 ", dataIndex: "c20h12", sorter: true, },
+    { title: "甲基汞", dataIndex: "ch3hg", sorter: true, },
+    { title: "多氯联苯", dataIndex: "c12h10Xclx", sorter: true, },
+    { title: "微囊藻毒素-LR", dataIndex: "微囊藻毒素-LR", sorter: true, },
+    { title: "黄磷", dataIndex: "p4", sorter: true, },
+    { title: "钼", dataIndex: "mo", sorter: true, },
+    { title: "钴", dataIndex: "co", sorter: true, },
+    { title: "铍", dataIndex: "be", sorter: true, },
+    { title: "硼", dataIndex: "b", sorter: true, },
+    { title: "锑", dataIndex: "sb", sorter: true, },
+    { title: "镍", dataIndex: "ni", sorter: true, },
+    { title: "钡", dataIndex: "ba", sorter: true, },
+    { title: "钒", dataIndex: "v", sorter: true, },
+    { title: "钛", dataIndex: "ti", sorter: true, },
+    { title: "铊", dataIndex: "tl", sorter: true, },
+
+    { title: "六价铬", dataIndex: "cr6", sorter: true, },
+    { title: "邻二氯苯", dataIndex: "odcb", sorter: true, },
+    { title: "对二氯苯", dataIndex: "pdcp", sorter: true, },
+
+    { title: "苯并(a)芘", dataIndex: "bap", sorter: true, },
+    { title: "苯并(b)荧蒽", dataIndex: "bbfa", sorter: true, },
+    { title: "磷酸盐", dataIndex: "phosphate", sorter: true, },
+    { title: "急性毒性", dataIndex: "acuteToxicity", sorter: true, },
+    { title: "余氯", dataIndex: "residualChlorine", sorter: true, },
+    { title: "六六六", dataIndex: "c6h6cl6666", sorter: true, },
+    { title: "2,4,6-三氯酚", dataIndex: "c6h3cl3o246", sorter: true, },
+    //新增
+    { title: "叶绿素（mg/m3)", dataIndex: "chlorophyll", sorter: true, },
+    { title: "透明度（cm）", dataIndex: "transparency", sorter: true, },
+    { title: "总α放射性", dataIndex: "totalAlphaRadioactivity", sorter: true, },
+    { title: "总β放射性", dataIndex: "totalBetaRadioactivity", sorter: true, },
+    { title: "1,1,1-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_111", sorter: true, },
+    { title: "1,1,2-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_112", sorter: true, },
+];
+export { tableColumns2 }
+
+//农村数据总览表格
+const tableColumns3=[
+    {title:"断面代码",dataIndex:"sectionCode",sorter:true},
+    {title: "省",dataIndex: "province",sorter: true,},
+    {title: "市",dataIndex: "city",sorter: true,},
+    {title: "乡镇",dataIndex: "township",sorter: true,},
+    {title: "村",dataIndex: "village",sorter: true,},
+    {title: "点位名称",dataIndex: "place",sorter: true,},
+    {title: "湖库(是/否)",dataIndex: "lakeLibraryFlag",sorter: true,},
+    {title: "经度(°)",dataIndex: "longitude",sorter: true,},
+    {title: "纬度(°)",dataIndex: "latitude",sorter: true,},
+    {title: "服务人口数量(人)",dataIndex: "numberServingPopulation",sorter: true,},
+    {title: "日供水规模（吨）",dataIndex: "dailyWaterSupplyScale",sorter: true,},
+    // {title: "监测时间",dataIndex: "monitorTime",sorter: true,customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
+        // { title: "水期代码", dataIndex: "waterPhaseCode",sorter: true, 
+        //     slots:{customRender:'waterCode' }
+        // },
+    // {title: "必测村庄(是/否) ",dataIndex: "mustTestVillagesFlag",sorter: true,},
+    
+    {title: "水温（℃）",dataIndex: "waterTemperature",sorter: true,},
+    {title: "pH(mg/L)",dataIndex: "ph",sorter: true,},
+    {title: "溶解氧(mg/L)",dataIndex: "dissolvedOxygen",sorter: true,},
+    {title: "高锰酸盐指数(mg/L)",dataIndex: "permanganateIndex",sorter: true,},
+    {title: "五日生化需氧量(mg/L)",dataIndex: "fiveDayBod",sorter: true,},
+    {title: "氨氮(mg/L)",dataIndex: "ammonia",sorter: true,},
+    {title: "总磷 (mg/L)",dataIndex: "totalPhosphorus",sorter: true,},
+    {title: "总氮 (mg/L)",dataIndex: "totalNitrogen",sorter: true,},
+    {title: "铜 (mg/L)",dataIndex: "cu",sorter: true,},
+    {title: "锌 (mg/L)",dataIndex: "zn",sorter: true,},
+    {title: "氟化物(mg/L)",dataIndex: "fluoride",sorter: true,},
+    {title: "硒 (mg/L)",dataIndex: "se",sorter: true,},
+    {title: "砷 (mg/L)",dataIndex: "as",sorter: true,},
+    {title: "汞 (mg/L)",dataIndex: "hg",sorter: true,},
+    {title: "镉 (mg/L)",dataIndex: "cd",sorter: true,},
+    {title: "铬（六价）(mg/L)",dataIndex: "cr",sorter: true,},
+    {title: "铅 (mg/L)",dataIndex: "pb",sorter: true,},
+    {title: "氰化物 (mg/L)",dataIndex: "cyanide",sorter: true,},
+    {title: "挥发酚 (mg/L)",dataIndex: "volatilePhenol",sorter: true,},
+    {title: "石油类 (mg/L)",dataIndex: "petro",sorter: true,},
+    {title: "阴离子表面活性剂 (mg/L)",dataIndex: "anionicSurfactant",sorter: true,},
+    {title: "硫化物 (mg/L)",dataIndex: "sulfide",sorter: true,},
+    {title: "粪大肠菌群(个/L)",dataIndex: "fecalColiforms",sorter: true,},
+    {title: "硫酸盐 (mg/L)",dataIndex: "sulfate",sorter: true,},
+    {title: "氯化物 (mg/L)",dataIndex: "chloride",sorter: true,},
+    {title: "硝酸盐氮  (mg/L)",dataIndex: "nitrateNitrogen",sorter: true,},
+    {title: "铁 (mg/L)",dataIndex: "fe",sorter: true,},
+    {title: "锰 (mg/L)",dataIndex: "mn",sorter: true,},
+    {title: "水质类别",dataIndex: "waterQualityCategory",sorter: true,},
+    {title: "特征污染物监测项目名称",dataIndex: "characteristicPollutantMonitoringProjectName",sorter: true,},
+    {title: "特征污染物监测数值(mg/L)",dataIndex: "characteristicPollutantMonitoringValue",sorter: true,},
+    {title: "色(mg/L)",dataIndex: "color",sorter: true,},
+    {title: "嗅和味",dataIndex: "smellAndTaste",sorter: true,},
+    {title: "浊度",dataIndex: "turbidity",sorter: true,},
+    {title: "肉眼可见物",dataIndex: "visibleNakedEye",sorter: true,},
+    {title: "总硬度(mg/L)",dataIndex: "totalHardness",sorter: true,},
+    {title: "溶解性总固体(mg/L)",dataIndex: "totalDissolvedSolids",sorter: true,},
+    {title: "铝(mg/L)",dataIndex: "ai",sorter: true,},
+    {title: "耗氧量(mg/L)",dataIndex: "oxygenConsumption",sorter: true,},
+    {title: "硝酸盐(mg/L)",dataIndex: "nitrate",sorter: true,},
+    {title: "亚硝酸盐(mg/L)",dataIndex: "nitrite",sorter: true,},
+    {title: "钠(mg/L)",dataIndex: "na",sorter: true,},
+    {title: "碘化物(mg/L)",dataIndex: "lodide",sorter: true,},
+    {title: "总大肠菌群(个/L)",dataIndex: "totalColiform",sorter: true,},
+    {title: "菌落总数(CFU/mL)）",dataIndex: "totalNumberColonies",sorter: true,},
+    {title: "三氯甲烷（μg/L）",dataIndex: "chcl3",sorter: true,},
+    {title: "四氯化碳 （μg/L）",dataIndex: "ccl4",sorter: true,},
+    {title: "苯 （μg/L）",dataIndex: "c6h6",sorter: true,},
+    {title: "甲苯 （μg/L）",dataIndex: "c7h8",sorter: true,},
+    {title: "总α放射性(Bq/L)",dataIndex: "totalAlphaRadioactivity",sorter: true,},
+    {title: "总β放射性(Bq/L)",dataIndex: "totalBetaRadioactivity",sorter: true,},
+    {title: "备注",dataIndex: "remark",sorter: true,},
+];
+
+export {
+  tableColumns3
+}

src/views/water/drinking-water/statistic/components/citySearch.vue

@@ -0,0 +1,339 @@
+<template>
+  <a-form
+    :model="where"
+    :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 v-model:value="where.waterSourceType" allowClear showSearch>
+                <a-select-option :value="'1'">地表水</a-select-option>
+                <a-select-option :value="'2'">地下水</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="where.drinkingWaterType" allowClear showSearch>
+            <a-select-option :value="'1'">在用</a-select-option>
+            <a-select-option :value="'2'">备用</a-select-option>
+            </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="起始时间:" name="monitorStartTime" >
+          <a-month-picker
+            v-model:value="where.monitorStartTime"
+            valueFormat="YYYY-MM"
+            :locale="locale"
+            placeholder="请输入起始时间"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="结束时间:" name="monitorEndTime">
+          <a-month-picker
+            v-model:value="where.monitorEndTime"
+            valueFormat="YYYY-MM"
+            :locale="locale"
+            placeholder="请输入结束时间"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+  
+    </a-row>
+    <a-row>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+      <a-form-item label="断面名称:">
+          <a-select v-model:value="where.sectionNames" mode="multiple" allowClear showSearch>
+            <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="监测指标:">
+          <div class="input-item" @click="showModal">
+            <a-checkbox
+                :checked="checkAll"
+                :indeterminate="indeterminate"
+            >
+            全选
+        </a-checkbox>
+              </div>
+        </a-form-item>
+      </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="searchData">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+            <a-button @click="exportFile">导出Excel</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-modal v-model:visible="visible" width="760px" title="监测指标" @ok="handleOk" @cancel="handleCancel">
+        <div :style="{ borderBottom: '1px solid #E9E9E9', marginBottom: '5px', paddingBottom: '5px' }">
+            <a-checkbox
+            v-model:checked="checkAll"
+            :indeterminate="indeterminate"
+            @change="onCheckAllChange"
+            >
+            全选
+        </a-checkbox>
+        </div>
+
+        <a-checkbox-group
+          style="width: 100%"
+          @change="handleChange"
+          v-model:value="filter"
+        >
+          <a-row>
+            <a-col
+              :span="8"
+              v-for="item in filterColumns"
+              :key="item.dataIndex"
+            >
+              <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+
+    </a-modal>
+  </a-form>
+</template>
+
+<script>
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { filterColumns } from "./../colums/base";
+import { listInfo } from "@/api/ecology/new-drinking-water";
+export default {
+  name: "city-search",
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys:{
+        typeof: Object,
+            default: function () {
+                return [];
+            },
+    },
+    visiable:{
+        typeof:Boolean
+    },
+    loadSearch:{
+        typeof:Boolean
+    }
+  },
+  data() {
+    return {
+    indeterminate:false,
+      checkAll: true,
+      where: {
+      },
+      filter:[],
+      columnsKey:[],
+      locale,
+      visible: false,
+      filterColumns: filterColumns,
+      newCloumns:[],
+      oldCloumns:[],
+      filterItem:[],
+      sectionInfo:[]
+    };
+  },
+  watch: {
+    searchForm(newV) {
+      this.where = newV;
+    },
+    filterKeys(newKeys){
+        this.initFilter(newKeys)
+    },
+    // 监控修改全选框图标状态
+    filter(newV){
+        if(newV.length !== this.filterColumns.length){
+            this.checkAll = false
+            this.indeterminate = false
+            if(newV.length){
+                this.indeterminate = true
+            }
+        }else{
+            this.checkAll = true
+            this.indeterminate = false
+        }
+    },
+    // 监听组件显示
+    visiable(val){
+         window.setTimeout(()=>{
+        let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) && val;
+        this.emitData(isSearch)
+      },200)
+    }
+  },
+
+  created(){
+      listInfo().then((res) => {
+      if (res.data.code == 0) {
+        this.visibleWater = true;
+        this.sectionInfo = res.data.data
+      } else {
+        this.$message.error(res.data.msg);
+      }
+    })
+  },
+
+  mounted() {
+    this.where = this.searchForm;
+    this.filter = filterColumns.map((item) => item.dataIndex);
+    this.columnsKey = [...this.filter]
+    // 生成复选框
+    this.newCloumns = [...filterColumns];
+    // 缓存复选框
+    this.oldCloumns = [...filterColumns];
+    // this.$emit("buildColumns", filterColumns);
+    // 根据父级传回来需要去掉勾的值映射到复选框
+    this.initFilter(this.filterKeys);
+    // 将父级回传的搜索条件上传父级进行页面搜索
+    let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) || this.loadSearch;
+    this.emitData(isSearch)
+
+  },
+  methods: {
+
+    emitData(val){
+      // if(val && this.where.startTime && this.where.endTime){
+        if(val){
+          this.searchData();
+      }
+    },
+
+      // 初始化选择
+      initFilter(newKeys){
+                let filterIndex =this.filterColumns.map(item=>(item.dataIndex))
+        const newList = filterIndex.filter((item) => {
+            return newKeys.indexOf(item) == -1
+        })
+        this.filter = newList;
+      },
+
+    onCheckAllChange (e) {
+        this.filter =  e.target.checked ? filterColumns.map((item) => item.dataIndex) : []
+  
+    },
+
+    handleChange(e) {
+      let newCloumns = [];
+      filterColumns.forEach((item) => {
+        const index = e.indexOf(item.dataIndex);
+        if (index > -1) {
+          newCloumns.push(item);
+        }
+      });
+      this.newCloumns = newCloumns;
+    },
+    reset() {
+      this.where = {
+        checked: 1,
+        limit: 10,
+        page: 1,
+        regionLevel:this.where.regionLevel
+      }
+      this.searchData();
+    },
+    searchData() {
+        if(Array.isArray(this.filter) && this.filter.length){
+            this.where.filter = this.changeKeyToName([...this.filter])
+        }else{
+            delete this.where.filter;
+        }
+        const sectionNames = this.where.sectionNames
+        if(sectionNames && Array.isArray(sectionNames) && !sectionNames.length){
+            delete this.where.sectionNames;
+        }
+      this.$emit("search", this.where);
+    },
+
+    // 将key转文字
+    changeKeyToName(keys){
+
+        const targetNames = []
+
+        filterColumns.forEach(item=>{
+            if(keys.indexOf(item.dataIndex)>-1){
+                targetNames.push(item.title)
+            }
+        })
+        return targetNames;
+    },
+
+    exportFile() {
+      this.$emit("exportFile");
+    },
+    showModal() {
+      this.visible = true;
+    },
+    handleCancel(){
+        this.visible = false;
+        // 如果是取消，则还原上次勾选项
+        this.filter = this.oldCloumns.map(item=>item.dataIndex)
+    },
+    handleOk() {
+      this.visible = false;
+       this.oldCloumns = [...this.newCloumns];
+        // 选中的所有项
+        // console.log(this.columnsKey)
+
+        // 得到没有选中的项，然后在表头将没选中项去除
+        let filterKey = []
+        this.columnsKey.forEach(key=>{
+            if(this.filter.indexOf(key) == -1){
+                filterKey.push(key)
+            }
+        })
+
+      this.$emit("filterColumns", filterKey);
+
+      // this.$emit("selectKeys", this.columnsKey);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ant-calendar-picker {
+  width: 100%;
+}
+.input-item {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding: 4px 11px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  transition: all 0.3s;
+  overflow: hidden;
+  cursor: pointer;
+  height: 32px;
+}
+</style>

src/views/water/drinking-water/statistic/components/countySearch.vue

@@ -0,0 +1,333 @@
+<template>
+  <a-form
+    :model="where"
+    :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 v-model:value="where.waterSourceType" allowClear showSearch>
+                <a-select-option :value="'1'">地表水</a-select-option>
+                <a-select-option :value="'2'">地下水</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="where.drinkingWaterType" allowClear showSearch>
+            <a-select-option :value="'1'">在用</a-select-option>
+            <a-select-option :value="'2'">备用</a-select-option>
+            </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="起始时间:" name="monitorStartTime" >
+          <a-month-picker
+            v-model:value="where.monitorStartTime"
+            valueFormat="YYYY-MM"
+            :locale="locale"
+            placeholder="请输入起始时间"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="结束时间:" name="monitorEndTime">
+          <a-month-picker
+            v-model:value="where.monitorEndTime"
+            valueFormat="YYYY-MM"
+            :locale="locale"
+            placeholder="请输入结束时间"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+  
+    </a-row>
+    <a-row>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+      <a-form-item label="断面名称:">
+          <a-select v-model:value="where.sectionNames" mode="multiple" allowClear showSearch>
+            <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="监测指标:">
+          <div class="input-item" @click="showModal">
+            <a-checkbox
+                :checked="checkAll"
+                :indeterminate="indeterminate"
+            >
+            全选
+        </a-checkbox>
+              </div>
+        </a-form-item>
+      </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="searchData">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+            <a-button @click="exportFile">导出Excel</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-modal v-model:visible="visible" width="760px" title="监测指标" @ok="handleOk" @cancel="handleCancel">
+        <div :style="{ borderBottom: '1px solid #E9E9E9', marginBottom: '5px', paddingBottom: '5px' }">
+            <a-checkbox
+            v-model:checked="checkAll"
+            :indeterminate="indeterminate"
+            @change="onCheckAllChange"
+            >
+            全选
+        </a-checkbox>
+        </div>
+
+        <a-checkbox-group
+          style="width: 100%"
+          @change="handleChange"
+          v-model:value="filter"
+        >
+          <a-row>
+            <a-col
+              :span="8"
+              v-for="item in filterColumns"
+              :key="item.dataIndex"
+            >
+              <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+
+    </a-modal>
+  </a-form>
+</template>
+
+<script>
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { filterColumns } from "./../colums/base";
+import { countyListInfo as listInfo } from "@/api/ecology/new-drinking-water";
+export default {
+  name: "city-search",
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys:{
+        typeof: Object,
+            default: function () {
+                return [];
+            },
+    },
+    visiable:{
+        typeof:Boolean
+    },
+    loadSearch:{
+        typeof:Boolean
+    }
+  },
+  data() {
+    return {
+    indeterminate:false,
+      checkAll: true,
+      where: {
+      },
+      filter:[],
+      columnsKey:[],
+      locale,
+      visible: false,
+      filterColumns: filterColumns,
+      newCloumns:[],
+      oldCloumns:[],
+      filterItem:[],
+      sectionInfo:[]
+    };
+  },
+  watch: {
+    searchForm(newV) {
+      this.where = newV;
+    },
+    filterKeys(newKeys){
+        this.initFilter(newKeys)
+    },
+    // 监控修改全选框图标状态
+    filter(newV){
+        if(newV.length !== this.filterColumns.length){
+            this.checkAll = false
+            this.indeterminate = false
+            if(newV.length){
+                this.indeterminate = true
+            }
+        }else{
+            this.checkAll = true
+            this.indeterminate = false
+        }
+    },
+    // 监听组件显示
+    visiable(val){
+         window.setTimeout(()=>{
+        let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) && val;
+        this.emitData(isSearch)
+      },200)
+    }
+  },
+
+  created(){
+      listInfo().then((res) => {
+      if (res.data.code == 0) {
+        this.visibleWater = true;
+        this.sectionInfo = res.data.data
+      } else {
+        this.$message.error(res.data.msg);
+      }
+    })
+  },
+
+  mounted() {
+    this.where = this.searchForm;
+    this.filter = filterColumns.map((item) => item.dataIndex);
+    this.columnsKey = [...this.filter]
+    // 生成复选框
+    this.newCloumns = [...filterColumns];
+    // 缓存复选框
+    this.oldCloumns = [...filterColumns];
+    // this.$emit("buildColumns", filterColumns);
+    // 根据父级传回来需要去掉勾的值映射到复选框
+    this.initFilter(this.filterKeys);
+    // 将父级回传的搜索条件上传父级进行页面搜索
+    let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) || this.loadSearch;
+    this.emitData(isSearch)
+
+  },
+  methods: {
+
+    emitData(val){
+      // if(val && this.where.startTime && this.where.endTime){
+        if(val){
+          this.searchData();
+      }
+    },
+
+      // 初始化选择
+      initFilter(newKeys){
+                let filterIndex =this.filterColumns.map(item=>(item.dataIndex))
+        const newList = filterIndex.filter((item) => {
+            return newKeys.indexOf(item) == -1
+        })
+        this.filter = newList;
+      },
+
+    onCheckAllChange (e) {
+        this.filter =  e.target.checked ? filterColumns.map((item) => item.dataIndex) : []
+  
+    },
+
+    handleChange(e) {
+      let newCloumns = [];
+      filterColumns.forEach((item) => {
+        const index = e.indexOf(item.dataIndex);
+        if (index > -1) {
+          newCloumns.push(item);
+        }
+      });
+      this.newCloumns = newCloumns;
+    },
+    reset() {
+      this.where = {
+        checked: 1,
+        limit: 10,
+        page: 1,
+        regionLevel:this.where.regionLevel
+      }
+      this.searchData();
+    },
+    searchData() {
+    if(Array.isArray(this.filter) && this.filter.length){
+            this.where.filter = this.changeKeyToName([...this.filter])
+        }else{
+            delete this.where.filter;
+        }
+      this.$emit("search", this.where);
+    },
+    // 将key转文字
+    changeKeyToName(keys){
+
+        const targetNames = []
+
+        filterColumns.forEach(item=>{
+            if(keys.indexOf(item.dataIndex)>-1){
+                targetNames.push(item.title)
+            }
+        })
+        return targetNames;
+    },
+    exportFile() {
+      this.$emit("exportFile");
+    },
+    showModal() {
+      this.visible = true;
+    },
+    handleCancel(){
+        this.visible = false;
+        // 如果是取消，则还原上次勾选项
+        this.filter = this.oldCloumns.map(item=>item.dataIndex)
+    },
+    handleOk() {
+      this.visible = false;
+       this.oldCloumns = [...this.newCloumns];
+        // 选中的所有项
+        // console.log(this.columnsKey)
+
+        // 得到没有选中的项，然后在表头将没选中项去除
+        let filterKey = []
+        this.columnsKey.forEach(key=>{
+            if(this.filter.indexOf(key) == -1){
+                filterKey.push(key)
+            }
+        })
+
+      this.$emit("filterColumns", filterKey);
+
+      // this.$emit("selectKeys", this.columnsKey);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ant-calendar-picker {
+  width: 100%;
+}
+.input-item {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding: 4px 11px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  transition: all 0.3s;
+  overflow: hidden;
+  cursor: pointer;
+  height: 32px;
+}
+</style>

src/views/water/drinking-water/statistic/components/countySideSeatch.vue

@@ -0,0 +1,334 @@
+<template>
+  <a-form
+    :model="where"
+    :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 v-model:value="where.waterSourceType" allowClear showSearch>
+                <a-select-option :value="'1'">地表水</a-select-option>
+                <a-select-option :value="'2'">地下水</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="where.drinkingWaterType" allowClear showSearch>
+            <a-select-option :value="'1'">在用</a-select-option>
+            <a-select-option :value="'2'">备用</a-select-option>
+            </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="起始时间:" name="monitorStartTime" >
+          <a-month-picker
+            v-model:value="where.monitorStartTime"
+            valueFormat="YYYY-MM"
+            :locale="locale"
+            placeholder="请输入起始时间"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="结束时间:" name="monitorEndTime">
+          <a-month-picker
+            v-model:value="where.monitorEndTime"
+            valueFormat="YYYY-MM"
+            :locale="locale"
+            placeholder="请输入结束时间"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+  
+    </a-row>
+    <a-row>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+      <a-form-item label="断面名称:">
+          <a-select v-model:value="where.sectionNames" mode="multiple" allowClear showSearch>
+            <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="监测指标:">
+          <div class="input-item" @click="showModal">
+            <a-checkbox
+                :checked="checkAll"
+                :indeterminate="indeterminate"
+            >
+            全选
+        </a-checkbox>
+              </div>
+        </a-form-item>
+      </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="searchData">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+            <a-button @click="exportFile">导出Excel</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-modal v-model:visible="visible" width="760px" title="监测指标" @ok="handleOk" @cancel="handleCancel">
+        <div :style="{ borderBottom: '1px solid #E9E9E9', marginBottom: '5px', paddingBottom: '5px' }">
+            <a-checkbox
+            v-model:checked="checkAll"
+            :indeterminate="indeterminate"
+            @change="onCheckAllChange"
+            >
+            全选
+        </a-checkbox>
+        </div>
+
+        <a-checkbox-group
+          style="width: 100%"
+          @change="handleChange"
+          v-model:value="filter"
+        >
+          <a-row>
+            <a-col
+              :span="8"
+              v-for="item in filterColumns"
+              :key="item.dataIndex"
+            >
+              <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+
+    </a-modal>
+  </a-form>
+</template>
+
+<script>
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { filterColumns } from "./../colums/base";
+import { villageListInfo as listInfo } from "@/api/ecology/new-drinking-water";
+export default {
+  name: "city-search",
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys:{
+        typeof: Object,
+            default: function () {
+                return [];
+            },
+    },
+    visiable:{
+        typeof:Boolean
+    },
+    loadSearch:{
+        typeof:Boolean
+    }
+  },
+  data() {
+    return {
+    indeterminate:false,
+      checkAll: true,
+      where: {
+      },
+      filter:[],
+      columnsKey:[],
+      locale,
+      visible: false,
+      filterColumns: filterColumns,
+      newCloumns:[],
+      oldCloumns:[],
+      filterItem:[],
+      sectionInfo:[]
+    };
+  },
+  watch: {
+    searchForm(newV) {
+      this.where = newV;
+    },
+    filterKeys(newKeys){
+        this.initFilter(newKeys)
+    },
+    // 监控修改全选框图标状态
+    filter(newV){
+        if(newV.length !== this.filterColumns.length){
+            this.checkAll = false
+            this.indeterminate = false
+            if(newV.length){
+                this.indeterminate = true
+            }
+        }else{
+            this.checkAll = true
+            this.indeterminate = false
+        }
+    },
+    // 监听组件显示
+    visiable(val){
+      window.setTimeout(()=>{
+        let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) && val;
+        this.emitData(isSearch)
+      },200)
+    }
+  },
+
+  created(){
+      listInfo().then((res) => {
+      if (res.data.code == 0) {
+        this.visibleWater = true;
+        this.sectionInfo = res.data.data
+      } else {
+        this.$message.error(res.data.msg);
+      }
+    })
+  },
+
+  mounted() {
+    this.where = this.searchForm;
+    this.filter = filterColumns.map((item) => item.dataIndex);
+    this.columnsKey = [...this.filter]
+    // 生成复选框
+    this.newCloumns = [...filterColumns];
+    // 缓存复选框
+    this.oldCloumns = [...filterColumns];
+    // this.$emit("buildColumns", filterColumns);
+    // 根据父级传回来需要去掉勾的值映射到复选框
+    this.initFilter(this.filterKeys);
+    // 将父级回传的搜索条件上传父级进行页面搜索
+    let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) || this.loadSearch;
+    this.emitData(isSearch)
+
+  },
+  methods: {
+
+    emitData(val){
+      // if(val && this.where.startTime && this.where.endTime){
+        if(val){
+          this.searchData();
+      }
+    },
+
+      // 初始化选择
+      initFilter(newKeys){
+                let filterIndex =this.filterColumns.map(item=>(item.dataIndex))
+        const newList = filterIndex.filter((item) => {
+            return newKeys.indexOf(item) == -1
+        })
+        this.filter = newList;
+      },
+
+    onCheckAllChange (e) {
+        this.filter =  e.target.checked ? filterColumns.map((item) => item.dataIndex) : []
+  
+    },
+
+    handleChange(e) {
+      let newCloumns = [];
+      filterColumns.forEach((item) => {
+        const index = e.indexOf(item.dataIndex);
+        if (index > -1) {
+          newCloumns.push(item);
+        }
+      });
+      this.newCloumns = newCloumns;
+    },
+    reset() {
+      this.where = {
+        checked: 1,
+        limit: 10,
+        page: 1,
+        regionLevel:this.where.regionLevel
+      }
+      this.searchData();
+    },
+    searchData() {
+        if(Array.isArray(this.filter) && this.filter.length){
+            this.where.filter = this.changeKeyToName([...this.filter])
+              }else{
+            delete this.where.filter;
+        }
+      this.$emit("search", this.where);
+    },
+            // 将key转文字
+     // 将key转文字
+    changeKeyToName(keys){
+
+        const targetNames = []
+
+        filterColumns.forEach(item=>{
+            if(keys.indexOf(item.dataIndex)>-1){
+                targetNames.push(item.title)
+            }
+        })
+        return targetNames;
+    },
+    exportFile() {
+      this.$emit("exportFile");
+    },
+    showModal() {
+      this.visible = true;
+    },
+    handleCancel(){
+        this.visible = false;
+        // 如果是取消，则还原上次勾选项
+        this.filter = this.oldCloumns.map(item=>item.dataIndex)
+    },
+    handleOk() {
+      this.visible = false;
+       this.oldCloumns = [...this.newCloumns];
+        // 选中的所有项
+        // console.log(this.columnsKey)
+
+        // 得到没有选中的项，然后在表头将没选中项去除
+        let filterKey = []
+        this.columnsKey.forEach(key=>{
+            if(this.filter.indexOf(key) == -1){
+                filterKey.push(key)
+            }
+        })
+
+      this.$emit("filterColumns", filterKey);
+
+      // this.$emit("selectKeys", this.columnsKey);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ant-calendar-picker {
+  width: 100%;
+}
+.input-item {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding: 4px 11px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  transition: all 0.3s;
+  overflow: hidden;
+  cursor: pointer;
+  height: 32px;
+}
+</style>

src/views/water/drinking-water/statistic/countryside/base.vue

@@ -0,0 +1,213 @@
+<!--农村 检测数据报送表-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      <template #footer>
+        <div class="footer">
+          饮用水源水质监测累积月份统计样品数：{{count}}个
+        </div>
+      </template>
+
+        <template #waterCode="{ text, record }">
+          <span>
+            {{
+              record.reportTime == null
+                ? (text = "")
+                : record.reportTime.substr(5, 2) == "01" ||
+                  record.reportTime.substr(5, 2) == "02" ||
+                  record.reportTime.substr(5, 2) == "03" ||
+                  record.reportTime.substr(5, 2) == "12"
+                ? (text = "K")
+                : record.reportTime.substr(5, 2) == "04" ||
+                  record.reportTime.substr(5, 2) == "05" ||
+                  record.reportTime.substr(5, 2) == "10" ||
+                  record.reportTime.substr(5, 2) == "11"
+                ? (text = "P")
+                : record.reportTime.substr(5, 2) == "06" ||
+                  record.reportTime.substr(5, 2) == "07" ||
+                  record.reportTime.substr(5, 2) == "08" ||
+                  record.reportTime.substr(5, 2) == "09"
+                ? (text = "F")
+                : (text = "无采样时间")
+            }}
+          </span>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  villageAnalysePageData
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableColumns } from "./../colums/base";
+import Search from "./../components/countySideSeatch.vue";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+    Search,
+  },
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys: {
+      typeof: Object,
+      default: function () {
+        return [];
+      },
+    },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  data() {
+    return {
+      count:0,
+      current:0,
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource: [],
+      selection: [],
+      columns: [...tableColumns],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  watch: {
+    filterKeys(newKeys) {
+      this.filterColumns(newKeys);
+    },
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+        // 获取列表数据
+        getPageData(){
+            this.loading = true;
+            villageAnalysePageData(this.where).then(res=>{
+                 this.loading = false;
+                if(res.data.code){
+                    this.$message.error(res.data.msg);
+                    this.datasource = []
+                    this.count = 0
+                }else{
+                    this.datasource = res.data.data
+                    this.count = res.data.data.length
+                }
+            }).catch(()=>{
+                 this.loading = false;
+            })
+        },
+
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+    // 传上父级
+    changeFilter(data) {
+      this.$emit("changeFilter", data);
+    },
+    //动态修改表头
+    filterColumns(keys) {
+      if (!Array.isArray(keys)) {
+        return;
+      }
+
+      let newCloumns = [...tableColumns];
+
+      let filterIndex = [];
+      newCloumns.forEach((item, index) => {
+        if (keys.indexOf(item.dataIndex) > -1) {
+          filterIndex.push(index);
+        }
+      });
+
+      const newList = newCloumns.filter((item, index) => {
+        return filterIndex.indexOf(index) == -1;
+      });
+      this.columns = newList;
+    },
+
+    // 执行搜索
+    searchData(data) {
+      this.where = data;
+      this.$emit("search", this.where);
+      this.reload();
+    },
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+
+    exportFile() {
+      const columns = [...tableColumns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.footer{
+  text-align: right;
+}
+</style>

src/views/water/drinking-water/statistic/countryside/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane tab="监测数据报送表" key="base" >
+              <base-statistic :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base'"></base-statistic>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质类别" key="base2" >
+              <water-quality :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base2'"></water-quality>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质统计" key="base7" >
+              <water-quality-count :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base7'"></water-quality-count>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质达标情况" key="base8" >
+              <water-quality-up :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base8'"></water-quality-up>
+            </a-tab-pane>
+
+          <a-tab-pane tab="超标评价" key="base4">
+              <over-standard  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base4'"></over-standard>
+            </a-tab-pane>
+
+          </a-tabs>
+    </div>
+</template>
+
+
+<script>
+  /**
+   *
+   *
+   *
+   */
+  //市级监测数据报表
+  import BaseStatistic from "./base.vue"
+  // // 超标评价
+  import overStandard from './overStandard.vue'
+  // 水质类别
+  import waterQuality from "./waterQuality.vue"
+//   // 水质统计
+  import waterQualityCount from "./waterQualityCount.vue";
+  // 水质达标情况
+  import waterQualityUp from "./waterQualityUp.vue";
+
+
+  export default {
+    name: 'city-com',
+    components: {
+      BaseStatistic,
+      waterQuality,
+      waterQualityCount,
+      waterQualityUp,
+      overStandard
+    },
+    data() {
+      return {
+        activeKey:'base',
+        searchForm:{
+            checked: 1,
+            page:1,
+            limit:10,
+            regionLevel:"农村"
+        },
+        filterKeys:[]
+      };
+
+    },
+    methods: {
+      changeSearch(data){
+          this.searchForm = data
+      },
+      changeFilter(data){
+          this.filterKeys = data
+      }
+    }
+
+  }
+</script>

src/views/water/drinking-water/statistic/countryside/overStandard.vue

@@ -0,0 +1,160 @@
+<!--超标评价-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        :visiable="visiable"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :loading="loading"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+       
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import Search from "./../components/countySideSeatch.vue";
+import {
+  villageOverStandardCount
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+        visiable:{
+          typeof:Boolean
+      }
+    },
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns: [
+       {title: "城市名称",dataIndex: "city",sorter: true,},
+       {title: "水源地名称",dataIndex: "sectionName",sorter: true,},
+       {title: "取水量（万m3）",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标水源取水量",dataIndex: "overWaterWithdrawal",sorter: true,},
+       {title: "超标项目",dataIndex: "overTargetname",sorter: true,},
+       {title: "水源性质",dataIndex: "waterSourceProperty",sorter: true,},
+      ],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+    // 获取列表数据
+    getPageData(){
+          this.loading = true;
+        villageOverStandardCount(this.where).then(res=>{
+              this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+              this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/countryside/waterQuality.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  villageWaterQualityData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/countySideSeatch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"城市名称",dataIndex:"city",},
+        {title:"水源地名称",dataIndex:"sourceWaterName",},
+        {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"水源地性质",dataIndex:"waterSourceProperty",},
+        {title:"断面水质",align: 'center',children: [
+              {title: "本月", dataIndex: "waterQualityCategory"},
+              {title: "上月", dataIndex: "waterQualityCategoryMom"},
+              {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
+            ]
+        },
+        {title:"主要污染指标",dataIndex:"",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件 
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        villageWaterQualityData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      let th1 = []
+      let th2 = []
+      const sColumns = []
+      columns.forEach(item=>{
+        th1.push(item.title)
+        if(Array.isArray(item.children) && item.children.length>0){
+          item.children.forEach(single=>{
+            th1.push('')
+            th2.push(single.title)
+            sColumns.push({dataIndex:single.dataIndex})
+          })
+        }else{
+            th2.push('')
+             sColumns.push({dataIndex:item.dataIndex})
+        }
+      })
+      arr.push(th1)
+      arr.push(th2)
+      this.datasource.forEach((d) => {
+        const td = sColumns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+
+
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/countryside/waterQualityCount.vue

@@ -0,0 +1,159 @@
+<!--水质统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterQualityCountData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/countySideSeatch.vue";
+
+export default {
+  name: "waterQualityCount",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"年份",dataIndex:"year",},
+        {title:"指标",dataIndex:"targetName",},
+        {title:"平均值",dataIndex:"averageValue",},
+        {title:"最大值",dataIndex:"maxValue",},
+        {title:"最小值",dataIndex:"minValue",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterQualityCountData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/countryside/waterQualityUp.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  villageWaterQualityUpData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/countySideSeatch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"断面名称",dataIndex:"sectionName",},
+        {title:"时间",dataIndex:"time",},
+        {title:"水质目标",dataIndex:"waterTarget",},
+        {title:"水质类别",dataIndex:"waterQualityCategory",},
+        {title: "达标情况", dataIndex: "standard"},
+        {title: "达标率", dataIndex: "standardRate"},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        villageWaterQualityUpData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+              let newData = []
+              const resData = res.data.data || {}
+              for(let i in resData){
+                newData.push(...resData[i])
+              }
+              this.datasource = newData
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/county/base.vue

@@ -0,0 +1,214 @@
+<!--市级 检测数据报送表-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      <template #footer>
+        <div class="footer">
+          饮用水源水质监测累积月份统计样品数：{{count}}个
+        </div>
+      </template>
+
+        <template #waterCode="{ text, record }">
+          <span>
+            {{
+              record.reportTime == null
+                ? (text = "")
+                : record.reportTime.substr(5, 2) == "01" ||
+                  record.reportTime.substr(5, 2) == "02" ||
+                  record.reportTime.substr(5, 2) == "03" ||
+                  record.reportTime.substr(5, 2) == "12"
+                ? (text = "K")
+                : record.reportTime.substr(5, 2) == "04" ||
+                  record.reportTime.substr(5, 2) == "05" ||
+                  record.reportTime.substr(5, 2) == "10" ||
+                  record.reportTime.substr(5, 2) == "11"
+                ? (text = "P")
+                : record.reportTime.substr(5, 2) == "06" ||
+                  record.reportTime.substr(5, 2) == "07" ||
+                  record.reportTime.substr(5, 2) == "08" ||
+                  record.reportTime.substr(5, 2) == "09"
+                ? (text = "F")
+                : (text = "无采样时间")
+            }}
+          </span>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  countyPageBsaeData
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableColumns } from "./../colums/base";
+import Search from "./../components/countySearch.vue";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+    Search,
+  },
+  props: {
+    // 表格搜索条件
+    searchForm: {
+      typeof: Object,
+      default: function () {
+        return {};
+      },
+    },
+    filterKeys: {
+      typeof: Object,
+      default: function () {
+        return [];
+      },
+    },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  data() {
+    return {
+      count:0, //样品数
+      current:0,
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource: [],
+      selection: [],
+      columns: [...tableColumns],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  watch: {
+    filterKeys(newKeys) {
+      this.filterColumns(newKeys);
+    },
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+        // 获取列表数据
+        getPageData(){
+            this.loading = true;
+            countyPageBsaeData(this.where).then(res=>{
+                 this.loading = false;
+                if(res.data.code){
+                    this.$message.error(res.data.msg);
+                    this.datasource = []
+                    this.count = 0
+                }else{
+                    this.datasource = res.data.data
+                    this.count = res.data.data.length
+                }
+            }).catch(()=>{
+                 this.loading = false;
+            })
+        },
+
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+    // 传上父级
+    changeFilter(data) {
+      this.$emit("changeFilter", data);
+    },
+    //动态修改表头
+    filterColumns(keys) {
+      if (!Array.isArray(keys)) {
+        return;
+      }
+
+      let newCloumns = [...tableColumns];
+
+      let filterIndex = [];
+      newCloumns.forEach((item, index) => {
+        if (keys.indexOf(item.dataIndex) > -1) {
+          filterIndex.push(index);
+        }
+      });
+
+      const newList = newCloumns.filter((item, index) => {
+        return filterIndex.indexOf(index) == -1;
+      });
+      this.columns = newList;
+    },
+
+    // 执行搜索
+    searchData(data) {
+      this.where = data;
+      this.$emit("search", this.where);
+      this.reload();
+    },
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+
+    exportFile() {
+      const columns = [...tableColumns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      arr.push([`饮用水源水质监测累积月份统计样品数：${this.count}个`]);
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.footer{
+  text-align: right;
+}
+</style>

src/views/water/drinking-water/statistic/county/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane tab="监测数据报送表" key="base" >
+              <base-statistic :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base'"></base-statistic>
+            </a-tab-pane>
+            <a-tab-pane tab="报送情况说明表" key="base1">
+              <county-appraise  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base1'"></county-appraise>
+            </a-tab-pane>
+             <a-tab-pane tab="取水量统计" key="base3">
+              <county-water-withdrawal  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base3'"></county-water-withdrawal>
+            </a-tab-pane>
+            <a-tab-pane tab="超标评价" key="base4">
+              <county-over-standard  :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base4'"></county-over-standard>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质类别" key="base2" >
+              <water-quality :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base2'"></water-quality>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质达标情况" key="base8" >
+              <water-quality-up :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base8'"></water-quality-up>
+            </a-tab-pane>
+
+            <a-tab-pane tab="水质统计" key="base7" >
+              <water-quality-count :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='base7'"></water-quality-count>
+            </a-tab-pane>
+
+          </a-tabs>
+    </div>
+</template>
+
+
+<script>
+  /**
+   *
+   *
+   *
+   */
+  //市级监测数据报表
+  import BaseStatistic from "./base.vue"
+  // 报送情况说明
+  import countyAppraise from "./situation.vue"
+  // 取水量
+  import countyWaterWithdrawal from "./waterCount.vue"
+  // 超标评价
+  import countyOverStandard from './overStandard.vue'
+  // 水质类别
+  import waterQuality from "./waterQuality.vue"
+//   // 水质统计
+  import waterQualityCount from "./waterQualityCount.vue";
+  // 水质达标情况
+  import waterQualityUp from "./waterQualityUp.vue";
+
+
+  export default {
+    name: 'city-com',
+    components: {
+      BaseStatistic,
+      countyAppraise,
+      waterQuality,
+      waterQualityCount,
+      waterQualityUp,
+    //   waterNutritional,
+      countyWaterWithdrawal,
+      countyOverStandard
+    },
+    data() {
+      return {
+        activeKey:'base',
+        searchForm:{
+            checked: 1,
+            page:1,
+            limit:10,
+            regionLevel:"县级"
+        },
+        filterKeys:[]
+      };
+
+    },
+    methods: {
+      changeSearch(data){
+          this.searchForm = data
+      },
+      changeFilter(data){
+          this.filterKeys = data
+      }
+    }
+
+  }
+</script>

src/views/water/drinking-water/statistic/county/overStandard.vue

@@ -0,0 +1,160 @@
+<!--超标评价-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        :visiable="visiable"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :loading="loading"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+       
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import Search from "./../components/countySearch.vue";
+import {
+  countyOverStandardCount
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+        visiable:{
+          typeof:Boolean
+      }
+    },
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns: [
+       {title: "城市名称",dataIndex: "city",sorter: true,},
+       {title: "水源地名称",dataIndex: "sectionName",sorter: true,},
+       {title: "取水量（万m3）",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标水源取水量",dataIndex: "overWaterWithdrawal",sorter: true,},
+       {title: "超标项目",dataIndex: "overTargetname",sorter: true,},
+       {title: "水源性质",dataIndex: "waterSourceProperty",sorter: true,},
+      ],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+    // 获取列表数据
+    getPageData(){
+          this.loading = true;
+        countyOverStandardCount(this.where).then(res=>{
+              this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+              this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/county/situation.vue

@@ -0,0 +1,308 @@
+<!--情况说明-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+        <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      
+      <ele-pro-table ref="table" row-key="drinkingWaterId" :datasource="datasource" :columns="columns" :where="where" @change="onChange"
+        :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
+          <template #county="{text}">
+            {{text="市区"}}
+          </template>
+
+        <template #enumber="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='index3'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['index3']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                    {{ text || ' ' }}
+                    <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index3')" />
+                </div>
+            </div>
+        </template>
+
+        <template #wnumber="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='index4'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['index4']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index4')" />
+                </div>
+            </div>
+        </template>
+
+        <template #desc="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='index6'" class="editable-cell-input-wrapper">
+                  <a-input class="edit-input" v-model:value="editableData[index]['index6']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index6')" />
+                </div>
+            </div>
+        </template>
+
+        <template #remark="{ text, record ,index }">
+            <div class="editable-cell">
+                <div v-if="editableData[index] && editableData[index].edable=='remark'" class="editable-cell-input-wrapper">
+                  <a-textarea class="edit-input" v-model:value="editableData[index]['remark']" @pressEnter="save(index)" />
+                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
+                </div>
+                <div v-else class="editable-cell-text-wrapper">
+                {{ text || ' ' }}
+                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'remark')" />
+                </div>
+            </div>
+        </template>
+
+
+      </ele-pro-table>
+
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  countyDescripFormData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+// import moment from "moment";
+
+import Search from "./../components/countySearch.vue";
+import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search,
+      CheckOutlined,
+      EditOutlined,
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+      visiable:{
+          typeof:Boolean
+      }
+    },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      editableData:[],
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {key: "index",title:"序号",dataIndex: "index",width: 48,align: "center",customRender: ({ index }) => index + 1,},
+        {title:"城市",dataIndex:"city",},
+        {title:"县城",dataIndex:"county",slots:{customRender:'county'}},
+        {title:"水源地名称",dataIndex:"sourceWaterName",},
+        {title:"类型",dataIndex:"waterSourceProperty",},
+        {title:"监测时间",dataIndex:"monitorTime"},
+        //  {title:"监测时间",dataIndex:"reportTime",customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
+        {title:"应当监测项目个数",dataIndex:'index1', },
+        {title:"未测个数",dataIndex:"noCheckNum",},
+        {title:"独立分析项目个数",dataIndex:"index3",
+         slots: {
+          customRender: 'enumber',
+            },
+        },
+        {title:"外送分析项目个数",dataIndex:"index4",  slots: {
+          customRender: 'wnumber',
+            },},
+        {title:"超标项目",dataIndex:"exceedingStandard",},
+        {title:"情况说明或原因",dataIndex:"reason", slots: {
+          customRender: 'desc',
+            }},
+        {title:"备注",dataIndex:"remark",slots: {
+          customRender: 'remark',
+            },},
+      ],
+        
+        
+      // 表格搜索条件
+      where: {
+        checked: 1,
+        page:1,
+        limit:10
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        countyDescripFormData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+      //编辑单元格
+    edit(item,index,key){
+        this.editableData[index] = item
+        this.editableData[index].edable=key
+    },
+
+    save(index){
+//         console.log('item',this.editableData[index]['index3'])
+// // console.log('item.remark', item.remark)
+        this.datasource[index] = {...this.editableData[index]}
+        this.editableData = []
+
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+    // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+      onChange(e,filters){
+        this.datasource =  this.datasource.map(item=>(
+            {
+                ...item,
+                index1:filters.index1
+            }
+        ))
+    },
+    
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      
+        this.columns[6].filters = []
+        if(this.where.waterSourceType ==1 ){
+          // 地表水
+          this.columns[6].filters =  [
+            {
+                text: '61',
+                value: '61',
+            },
+                {
+                text: '63',
+                value: '63',
+            },
+                {
+                text: '64',
+                value: '64',
+            },
+        ]
+      }
+      if(this.where.waterSourceType ==2 ){
+          // 地下水
+           this.columns[6].filters =  [
+            {
+                text: '39',
+                value: '39',
+            },
+                {
+                text: '94',
+                value: '94',
+            }
+        ]
+      }
+
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+
+
+
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.editable-cell-input-wrapper{
+    display: flex;
+    align-items: center;
+
+    .edit-input{
+        margin-right: 5px;
+        width: 200px;
+    }
+}
+.editable-cell-text-wrapper{
+    display: flex;
+    align-items: center;
+
+}
+</style>

src/views/water/drinking-water/statistic/county/waterCount.vue

@@ -0,0 +1,163 @@
+<!--取水量统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        :visiable="visiable"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :loading="loading"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+       
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import Search from "./../components/countySearch.vue";
+
+import {
+  getWaterCount
+} from "@/api/ecology/new-drinking-water";
+
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        },
+        visiable:{
+          typeof:Boolean
+      }
+    },
+  data() {
+    return {
+      datasource:[],
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      selection: [],
+      columns: [
+       {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
+       {title: "取水量",dataIndex: "waterWithdrawal",sorter: true,},
+      ],
+
+      // 表格列配置
+
+      // palceOptions: [],
+      // areaOptions: [],
+      // roadOptions: [],
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading: false
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+
+                    // 获取列表数据
+    getPageData(){
+          this.loading = true;
+        getWaterCount(this.where).then(res=>{
+              this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+              this.loading = false;
+        })
+    },
+    
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/county/waterQuality.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  countyWaterQualityData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/countySearch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"城市名称",dataIndex:"city",},
+        {title:"水源地名称",dataIndex:"sourceWaterName",},
+        {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"水源地性质",dataIndex:"waterSourceProperty",},
+        {title:"断面水质",align: 'center',children: [
+              {title: "本月", dataIndex: "waterQualityCategory"},
+              {title: "上月", dataIndex: "waterQualityCategoryMom"},
+              {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
+            ]
+        },
+        {title:"主要污染指标",dataIndex:"",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件 
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        countyWaterQualityData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+
+    exportFile() {
+      const columns = [...this.columns];
+      const arr = [];
+      let th1 = []
+      let th2 = []
+      const sColumns = []
+      columns.forEach(item=>{
+        th1.push(item.title)
+        if(Array.isArray(item.children) && item.children.length>0){
+          item.children.forEach(single=>{
+            th1.push('')
+            th2.push(single.title)
+            sColumns.push({dataIndex:single.dataIndex})
+          })
+        }else{
+            th2.push('')
+             sColumns.push({dataIndex:item.dataIndex})
+        }
+      })
+      arr.push(th1)
+      arr.push(th2)
+      this.datasource.forEach((d) => {
+        const td = sColumns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+
+
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/county/waterQualityCount.vue

@@ -0,0 +1,159 @@
+<!--水质统计-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterQualityCountData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/countySearch.vue";
+
+export default {
+  name: "waterQualityCount",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"年份",dataIndex:"year",},
+        {title:"指标",dataIndex:"targetName",},
+        {title:"平均值",dataIndex:"averageValue",},
+        {title:"最大值",dataIndex:"maxValue",},
+        {title:"最小值",dataIndex:"minValue",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterQualityCountData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/county/waterQualityUp.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  countyWaterQualityUpData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/countySearch.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:[],
+      selection: [],
+      columns:[
+        {title:"断面名称",dataIndex:"sectionName",},
+        {title:"时间",dataIndex:"time",},
+        {title:"水质目标",dataIndex:"waterTarget",},
+        {title:"水质类别",dataIndex:"waterQualityCategory",},
+        {title: "达标情况", dataIndex: "standard"},
+        {title: "达标率", dataIndex: "standardRate"},
+        // {title:"达标情况",align: 'center',children: [
+        //       {title: "达标情况", dataIndex: ""},
+        //       {title: "达标率", dataIndex: ""},
+        //       {title: "去年同期", dataIndex: ""},
+        //     ]
+        // },
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        countyWaterQualityUpData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+              let newData = []
+              const resData = res.data.data || {}
+              for(let i in resData){
+                newData.push(...resData[i])
+              }
+              this.datasource = newData
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.datasource.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/views/water/drinking-water/statistic/index.vue

@@ -1,35 +1,16 @@
 <template>
   <div class="ele-body">
     <a-card :bordered="false">
-      <a-tabs v-model:activeKey="activeKey">
+      <a-tabs v-model:activeKey="activeWrapKey">
         <a-tab-pane key="city" tab="市级">
-          <a-tabs v-model:active="activeCity">
-            <a-tab-pane tab="监测数据报送表" key="city" >
-              <base-statistic></base-statistic>
-            </a-tab-pane>
-            <a-tab-pane tab="报送情况说明表" key="base1">
-              <city-appraise></city-appraise>
-            </a-tab-pane>
-            <a-tab-pane tab="取水量统计" key="base3">
-              <city-water-withdrawal></city-water-withdrawal>
-                
-            </a-tab-pane>
-            <a-tab-pane tab="水质类别" key="base2">
-              <city-water-quality></city-water-quality>
-            </a-tab-pane>
-            <a-tab-pane tab="达标率" key="base6">
-              <city-month-standard></city-month-standard>
-            </a-tab-pane>
-             <a-tab-pane tab="综合指数" key="base5">
-              <city-avg-index></city-avg-index>
-            </a-tab-pane>
-          </a-tabs>
+          <City />
         </a-tab-pane>
 
         <a-tab-pane key="county" tab="县级">
-          <a-tabs v-model:active="activeCounty">
+          <County />
+          <!-- <a-tabs v-model:active="activeCounty">
             <a-tab-pane tab="监测数据报送表" key="County">
-              <county-data></county-data>
+              <county-data :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></county-data>
             </a-tab-pane>
             <a-tab-pane tab="报送情况说明表" key="base1">
               <county-appraise></county-appraise>
@@ -46,11 +27,12 @@
              <a-tab-pane tab="综合指数" key="base5">
               <county-avg-index></county-avg-index>
             </a-tab-pane>
-          </a-tabs>
+          </a-tabs> -->
         </a-tab-pane>
 
         <a-tab-pane key="village" tab="农村">
-         <a-tabs v-model:active="activeVillage">
+          <Countryside />
+         <!-- <a-tabs v-model:active="activeVillage">
             <a-tab-pane tab="数据总览" key="village">
               <village></village>
             </a-tab-pane>
@@ -66,7 +48,7 @@
              <a-tab-pane tab="综合指数" key="base5">
               <village-avg-index></village-avg-index>
             </a-tab-pane>
-          </a-tabs>
+          </a-tabs> -->
         </a-tab-pane>
       </a-tabs>
     </a-card>
@@ -74,68 +56,59 @@
 </template>
 
 <script>
+
+import City from './city/index.vue'
+import County from './county/index.vue'
+import Countryside from './countryside/index.vue'
   /**
    *
    *
    *
    */
-  import BaseStatistic from "./cityDate.vue"
-  import countyData from "./countyData.vue"
-  import village from "./villageData.vue"
-  import cityAppraise from "./cityAppraise.vue"
-  import countyAppraise from "./countyAppraise.vue"
-  import villageAppraise from "./villageAppraise.vue"
-  import cityWaterQuality from "./cityWaterQuality.vue"
-  import countyWaterQuality from "./countyWaterQuality.vue"
-  import villageWaterQuality from "./villageWaterQuality.vue"
-  import cityAvgIndex from "./city-avg-index.vue"
-  import countyAvgIndex from "./county-avg-index.vue"
-  import villageAvgIndex from "./village-avg-index.vue"
-  import cityMonthStandard from "./city-base-standard.vue"
-  import countyMonthStandard from "./county-base-standard.vue"
-  import villageMonthStandard from "./village-base-standard.vue"
-  import cityWaterWithdrawal from "./cityWaterWithdrawal.vue"
-  import countyWaterWithdrawal from "./countyWaterWithdrawal.vue"
 
-  // import QuarterStatistic from "./quarter.vue";
-  // import Compare from "./compare.vue"
-  // import AverageStatistic from "./average.vue"
+//县级监测数据报表
+  // import countyData from "./countyData.vue"
+  // import countyData from "./county/base.vue"
+
+  // import village from "./villageData.vue"
+
+  // import countyAppraise from "./countyAppraise.vue"
+  // import villageAppraise from "./villageAppraise.vue"
+  // import countyWaterQuality from "./countyWaterQuality.vue"
+  // import villageWaterQuality from "./villageWaterQuality.vue"
+  // import countyAvgIndex from "./county-avg-index.vue"
+  // import villageAvgIndex from "./village-avg-index.vue"
+  // import countyMonthStandard from "./county-base-standard.vue"
+  // import villageMonthStandard from "./village-base-standard.vue"
+  // import countyWaterWithdrawal from "./countyWaterWithdrawal.vue"
+
 
   export default {
     name: 'DrinkWaterCollectIndex',
     components: {
-      BaseStatistic,
-      countyData,
-      village,
-      cityAppraise,
-      countyAppraise,
-      villageAppraise,
-      cityWaterQuality,
-      countyWaterQuality,
-      villageWaterQuality,
-      cityAvgIndex,
-      countyAvgIndex,
-      villageAvgIndex,
-      cityMonthStandard,
-      countyMonthStandard,
-      villageMonthStandard,
-      cityWaterWithdrawal,
-      countyWaterWithdrawal
-      // QuarterStatistic,
-      // Compare,
-      // AverageStatistic
+      City,
+      County,
+      Countryside,
+      // countyData,
+      // village,
+      // countyAppraise,
+      // villageAppraise,
+      // countyWaterQuality,
+      // villageWaterQuality,
+      // countyAvgIndex,
+      // villageAvgIndex,
+      // countyMonthStandard,
+      // villageMonthStandard,
+      // countyWaterWithdrawal,
+      
     },
     data() {
       return {
-        activeKey: 'city',
-        activeCity:'city',
-        activeCounty:'county',
-        activeVillage:'village', 
+        activeWrapKey: 'city',
       };
 
     },
     methods: {
-
     }
 
   }

src/views/water/lake/collect/index.vue

@@ -46,6 +46,19 @@
                     >
                         <a-button>专项湖库导入</a-button>
                     </a-upload>
+                    <a-dropdown>
+          <template #overlay>
+            <a-menu  style="word-spacing:10px;">
+              <a-menu-item @click="download('专项湖库数据报送表','/template/专项湖库数据报送表.xlsx')" > <a ref=""></a>专项湖库数据报送表 </a-menu-item>
+              <a-menu-item @click="download('五象湖水质监测报告表','/template/五象湖水质监测报告表.xlsx')" > 五象湖水质监测报告表 </a-menu-item>
+              <a-menu-item @click="download('其它内湖水质监测报告表','/template/其它内湖水质监测报告表.xls')" > 其它内湖水质监测报告表 </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button  type="primary" style="left: 60px">
+            模板下载
+            <DownOutlined />
+          </a-button>
+        </a-dropdown>
                 </a-space>
             </template>
             <a-tabs v-model:activeKey="activeKey">
@@ -61,285 +74,220 @@
 </template>
 
 <script>
-import XLSX from "xlsx";
-import utils from "./utils";
+// import XLSX from "xlsx";
+// import utils from "./utils";
 import {Modal} from "ant-design-vue";
 import WaterBill from "./water-bill.vue";
 import SpecialBill from "./special-bill.vue";
-import {saveLakeBill} from "@/api/ecology/lake";
-import {saveLakeBill as saveSpecialLake} from "@/api/ecology/special-lake";
+import { DownOutlined } from "@ant-design/icons-vue";
+// import {saveLakeBill} from "@/api/ecology/lake";
+// import {saveLakeBill as saveSpecialLake} from "@/api/ecology/special-lake";
+import {importCityOther,importCppointCity,importSpecial} from "@/api/ecology/water/lake/import";
+  import {
+    getInnerData
+  } from "@/api/ecology/lake";
+import {
+    getSpecialData
+  } from "@/api/ecology/special-lake";
 
 export default {
     name: "LakeCollectIndex",
     components: {
         WaterBill,
-        SpecialBill
+        SpecialBill,
+        DownOutlined
     },
     data() {
         return {
             activeKey: "water",
+            waterData:[],
+            specialData:[]
         };
     },
+    created(){
+        this.reload()
+    },
     methods: {
+    
+    getInnerData(){
+        getInnerData({page: 1, limit: 1000}).then(res=>{
+            this.waterData = res.data.data
+        })
+    },
+    getSpecialData(){
+        getSpecialData({page: 1, limit: 1000}).then(res=>{
+            this.specialData = res.data.data
+        })
+    },
+
+
+        // 模板下载
+    download (name,url){
+        var a = document.createElement("a");
+        a.href = url; 
+        a.download = `${name}-导入模板`; 
+        a.style.display = "none"; 
+        document.body.appendChild(a); 
+        a.click(); 
+        a.remove();
+    },
         handleMenuClick(e) {
             document.getElementById(e.key).click()
         },
         /* 导入本地excel文件 */
+        importFileCity(file,hide){
+            const formData = new FormData();
+            formData.append('file', file);
+            importCityOther(formData).then(res=>{
+                console.log(res)
+                if(!res.data.code){
+                    Modal.success({  title:res.data.msg, });
+                    this.reload()
+                }else{
+                    Modal.error({  title:res.data.msg || '文件导入失败', });
+                }
+                    
+                hide()
+            }).catch(err=>{
+                console.log(err)
+                Modal.error({  title:err.data.msg || '文件导入失败', });
+                hide()
+            })
+        },
+
         importFileInnerCity(file) {
             const hide = this.$message.loading("导入中..", 0);
 
-            let reader = new FileReader();
-            reader.onload = (e) => {
-                try {
-                    let data = new Uint8Array(e.target.result);
-                    let workbook = XLSX.read(data, {
-                        type: "array",
-                    });
-                    //0.昼间数据 1.夜间数据 2.其他信息
-                    let sheetNames = workbook.SheetNames;
-                    // 解析成二维数组
-                    let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
-                        header: 1,
-                    });
+            const table = this.waterData;
+            let isHas = false;
+            if(Array.isArray(table) && table.length>0){
+                table.forEach(item=>{
+                    if(item.billName==file.name){
+                        isHas = true
+                    }
+                })   
+            }
 
-                    const reportDate = aoa[2][0].replace(/[^\d]+/g, "-");
-
-                    const lakeList = aoa.filter(
-                        (item) => {
-                            return item.length >= 24 && item[0] && !item[0].includes("点位名称");
-                        }
-                    );
-
-
-                    // 解析成对象数组
-                    const billName = file.name;
-                    const billData = utils.toInnerCityLakeObjData(lakeList, reportDate);
-                    if (!billData || billData.length == 0) {
+            if(isHas){
+                const _this = this;
+                Modal.confirm({
+                      title: '有重复数据，确认是否覆盖？',
+                      onOk() {
+                        _this.importFileCity(file,hide)
+                      },
+                      onCancel() {
+                        console.log('Cancel');
                         hide()
-                        Modal.error({
-                            title: "导入失败",
-                            content: "找不到数据",
-                        });
-                        return;
-                    }
-                    const tasks = [];
-                    if (billData.length > 0) {
-                        tasks.push(
-                            saveLakeBill({
-                                reportTime: new Date(reportDate).getTime(),
-                                billName: billName,
-                                regionLevel: "市级",
-                                lakeLibraryInnerCityList: billData,
-                            })
-                        );
-                    }
-
-
-                    // 上传到服务器
-
-                    Promise.all(tasks)
-                        .then((res) => {
-                            if (res[0].data.code == 0) {
-                                Modal.success({
-                                    title: "导入成功",
-                                    content: `成功导入${billData.length}条数据`,
-                                });
-                                this.$refs.water && this.$refs.water.reload();
-                            } else {
-                                Modal.error({
-                                    title: "导入失败",
-                                    content: "数据上传出错",
-                                });
-                            }
-
-                        })
-                        .catch(() => {
-                            Modal.error({
-                                title: "导入失败",
-                                content: "数据上传出错",
-                            });
-                        })
-                        .finally(() => {
-                            hide();
-                        });
-                } catch (error) {
-                    hide();
-                    Modal.error({
-                        title: "导入失败",
-                        content: error.message,
+                      },
                     });
-                }
-                // console.log(billData);
-            };
-            reader.readAsArrayBuffer(file);
+            }else{
+                this.importFileCity(file,hide)
+            }
 
             return false;
         },
+
+        importWuXiang(file,hide){
+            const formData = new FormData();
+            formData.append('file', file);
+            importCppointCity(formData).then(res=>{
+                console.log(res)
+                 if(!res.data.code){
+                        Modal.success({  title:res.data.msg, });
+                        this.reload()
+                    }else{
+                        Modal.error({  title:res.data.msg || '文件导入失败', });
+                    }
+                hide()
+            }).catch(err=>{
+                    console.log(err)
+                    Modal.error({  title:err.data.msg || '文件导入失败', });
+                    hide()
+                })
+        },
+
         importFileWuxiang(file) {
             const hide = this.$message.loading("导入中..", 0);
+            const table = this.waterData;
+            let isHas = false;
+            if(Array.isArray(table) && table.length>0){
+                table.forEach(item=>{
+                    if(item.billName==file.name){
+                        isHas = true
+                    }
+                })   
+            }
 
-            let reader = new FileReader();
-            reader.onload = (e) => {
-                try {
-                    let data = new Uint8Array(e.target.result);
-                    let workbook = XLSX.read(data, {
-                        type: "array",
-                    });
-                    let sheetNames = workbook.SheetNames;
-                    // 解析成二维数组
-                    let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
-                        header: 1,
-                    });
-                    const lakeList = aoa.filter(
-                        (item) => {
-                            return item.length >= 24 && item[0] && !item[0].includes("点位名称");
-                        }
-                    );
-                    // 解析成对象数组
-                    const billName = file.name;
-                    const billData = utils.toWuxiangLakeObjData(lakeList);
-                    if (!billData || billData.length == 0) {
+            if(isHas){
+                const _this = this;
+                Modal.confirm({
+                      title: '有重复数据，确认是否覆盖？',
+                      onOk() {
+                        _this.importWuXiang(file,hide)
+                      },
+                      onCancel() {
+                        console.log('Cancel');
                         hide()
-                        Modal.error({
-                            title: "导入失败",
-                            content: "找不到数据",
-                        });
-                        return;
-                    }
-                    const tasks = [];
-                    if (billData.length > 0) {
-                        tasks.push(
-                            saveLakeBill({
-                                billName: billName,
-                                lakeLibraryInnerCityList: billData,
-                            })
-                        );
-                    }
-
-
-                    // 上传到服务器
-
-                    Promise.all(tasks)
-                        .then((res) => {
-                            if (res[0].data.code == 0) {
-                                Modal.success({
-                                    title: "导入成功",
-                                    content: `成功导入${billData.length}条数据`,
-                                });
-                                this.$refs.water && this.$refs.water.reload();
-                            } else {
-                                Modal.error({
-                                    title: "导入失败",
-                                    content: "数据上传出错",
-                                });
-                            }
-
-                        })
-                        .catch(() => {
-                            Modal.error({
-                                title: "导入失败",
-                                content: "数据上传出错",
-                            });
-                        })
-                        .finally(() => {
-                            hide();
-                        });
-                } catch (error) {
-                    hide();
-                    Modal.error({
-                        title: "导入失败",
-                        content: error.message,
+                      },
                     });
-                }
-                // console.log(billData);
-            };
-            reader.readAsArrayBuffer(file);
-
+            }else{
+                this.importWuXiang(file,hide)
+            }
             return false;
         },
+
+        importSpecialFile(file,hide){
+            const formData = new FormData();
+            formData.append('file', file);
+                importSpecial(formData).then(res=>{
+                     if(!res.data.code){
+                        Modal.success({  title:res.data.msg, });
+                        this.reload()
+                    }else{
+                        Modal.error({  title:res.data.msg || '文件导入失败', });
+                    }
+                    hide()
+                }).catch(err=>{
+                    console.log(err)
+                    Modal.error({  title:err.data.msg || '文件导入失败', });
+                    hide()
+                })
+        },
+
         importFileSpecial(file) {
             const hide = this.$message.loading("导入中..", 0);
+            const table = this.specialData;
+            let isHas = false;
+            if(Array.isArray(table) && table.length>0){
+                table.forEach(item=>{
+                    if(item.billName==file.name){
+                        isHas = true
+                    }
+                })   
+            }
 
-            let reader = new FileReader();
-            reader.onload = (e) => {
-                try {
-                    let data = new Uint8Array(e.target.result);
-                    let workbook = XLSX.read(data, {
-                        type: "array",
-                    });
-                    let sheetNames = workbook.SheetNames;
-                    // 解析成二维数组
-                    let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
-                        header: 1,
-                    });
-                    const lakeList = aoa.filter(
-                        (item) => {
-                            return item.length >= 24 && item[1] && !item[1].includes("测站名称");
-                        }
-                    );
-                    // 解析成对象数组
-                    const billName = file.name;
-                    const billData = utils.toSpecialLakeData(lakeList);
-                    if (!billData || billData.length == 0) {
+            if(isHas){
+                const _this = this;
+                Modal.confirm({
+                      title: '有重复数据，确认是否覆盖？',
+                      onOk() {
+                        _this.importSpecialFile(file,hide)
+                      },
+                      onCancel() {
+                        console.log('Cancel');
                         hide()
-                        Modal.error({
-                            title: "导入失败",
-                            content: "找不到数据",
-                        });
-                        return;
-                    }
-                    const tasks = [];
-                    if (billData.length > 0) {
-                        tasks.push(
-                            saveSpecialLake({
-                                billName: billName,
-                                lakeLibrarySpecialList: billData,
-                            })
-                        );
-                    }
-
-
-                    // 上传到服务器
-
-                    Promise.all(tasks)
-                        .then((res) => {
-                            if (res[0].data.code == 0) {
-                                Modal.success({
-                                    title: "导入成功",
-                                    content: `成功导入${billData.length}条数据`,
-                                });
-                                this.$refs.special && this.$refs.special.reload();
-                            } else {
-                                Modal.error({
-                                    title: "导入失败",
-                                    content: "数据上传出错",
-                                });
-                            }
-
-                        })
-                        .catch(() => {
-                            Modal.error({
-                                title: "导入失败",
-                                content: "数据上传出错",
-                            });
-                        })
-                        .finally(() => {
-                            hide();
-                        });
-                } catch (error) {
-                    hide();
-                    Modal.error({
-                        title: "导入失败",
-                        content: error.message,
+                      },
                     });
-                }
-                // console.log(billData);
-            };
-            reader.readAsArrayBuffer(file);
+            }else{
+                this.importSpecialFile(file,hide)
+            }
 
             return false;
         },
-
+    reload(){
+        this.getInnerData()
+        this.getSpecialData()
+        }
     },
 };
 </script>

src/views/water/lake/collect/special-bill.vue

@@ -17,10 +17,33 @@
             <a-form-item label="表格名称:">
               <a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
             </a-form-item>
-
+<!-- 
             <a-form-item label="上报时间:">
               <a-range-picker separator="~" v-model:value="reportTimeScope" />
-            </a-form-item>
+            </a-form-item> -->
+
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="起始时间:" name="reportTimeStart" >
+                <a-date-picker
+                    v-model:value="where.reportTimeStart"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入起始时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="结束时间:" name="reportTimeEnd">
+                <a-date-picker
+                    v-model:value="where.reportTimeEnd"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入结束时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
 
             <a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
               <a-space>
@@ -216,12 +239,12 @@
 
       /* 刷新表格 */
       reload() {
-        this.where.reportTimeStart = null;
-        this.where.reportTimeEnd = null;
-        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
-          this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
-        }
+        // this.where.reportTimeStart = null;
+        // this.where.reportTimeEnd = null;
+        // if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+        //   this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
+        //   this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
+        // }
         this.$refs.table.reload({
           where: this.where
         });

src/views/water/lake/collect/water-bill.vue

@@ -18,9 +18,32 @@
               <a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
             </a-form-item>
 
-            <a-form-item label="上报时间:">
+            <!-- <a-form-item label="上报时间:">
               <a-range-picker separator="~" v-model:value="reportTimeScope" />
-            </a-form-item>
+            </a-form-item> -->
+                <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="起始时间:" name="reportTimeStart" >
+                <a-date-picker
+                    v-model:value="where.reportTimeStart"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入起始时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                <a-form-item label="结束时间:" name="reportTimeEnd">
+                <a-date-picker
+                    v-model:value="where.reportTimeEnd"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    :locale="locale"
+                    placeholder="请输入结束时间"
+                    allow-clear
+                />
+                </a-form-item>
+            </a-col>
+
 
             <a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
               <a-space>
@@ -216,12 +239,12 @@
 
       /* 刷新表格 */
       reload() {
-        this.where.reportTimeStart = null;
-        this.where.reportTimeEnd = null;
-        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
-          this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
-        }
+        // this.where.reportTimeStart = null;
+        // this.where.reportTimeEnd = null;
+        // if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+        //   this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
+        //   this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
+        // }
         this.$refs.table.reload({
           where: this.where
         });

src/views/water/lake/dict/inner.vue

@@ -50,7 +50,18 @@
           <a-form-item label="点位名称" name="sectionName">
             <a-input v-model:value="form.sectionName" placeholder="请输入点位名称" allow-clear />
           </a-form-item>
-
+          <a-form-item label="经度" name="longitude">
+            <a-input v-model:value="form.longitude" placeholder="请输入点位经度" allow-clear />
+          </a-form-item>
+          <a-form-item label="纬度" name="latitude">
+            <a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
+          </a-form-item>
+           <a-form-item label="类别" name="type">
+            <a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
+          </a-form-item>
+          <a-form-item label="排序" name="sort">
+            <a-input-number v-model:value="form.sort" placeholder="请输入排序" allow-clear />
+          </a-form-item>
         </a-form>
       </a-modal>
       <!-- 表格 -->
@@ -136,6 +147,23 @@
             title: "点位名称",
             dataIndex: "sectionName",
             sorter: true,
+          },
+            {
+            title: "点位经度",
+            dataIndex: "longitude",
+          },
+            {
+            title: "点位纬度",
+            dataIndex: "latitude",
+          },
+          {
+            title: "类别",
+            dataIndex: "type",
+          },
+          {
+            title: "排序",
+            dataIndex: "sort",
+            sorter: true,
           },
           {
             title: "操作",
@@ -171,6 +199,22 @@
             required: true,
             message: '请输入点位名称'
           }],
+          longitude: [{
+            required: true,
+            message: '请输入点位经度'
+          }],
+          latitude: [{
+            required: true,
+            message: '请输入点位纬度'
+          }],
+          type: [{
+            required: true,
+            message: '请输入类型'
+          }],
+          sort: [{
+            required: true,
+            message: '请输入排序'
+          }],
         },
         yearOptions: [],
         showNYear: false,

src/views/water/lake/dict/special.vue

@@ -107,7 +107,18 @@
                    <a-form-item label="水期代码" name="waterCode">
                         <a-input v-model:value="form.waterCode" placeholder="请输入水期代码" allow-clear />
                     </a-form-item>
-                   
+                    <a-form-item label="经度" name="longitude">
+                        <a-input v-model:value="form.longitude" placeholder="请输入点位经度" allow-clear />
+                    </a-form-item>
+                    <a-form-item label="纬度" name="latitude">
+                        <a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
+                    </a-form-item>
+                    <a-form-item label="类别" name="type">
+                        <a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
+                    </a-form-item>
+                    <a-form-item label="排序" name="sort">
+                        <a-input-number v-model:value="form.sort" placeholder="请输入排序" allow-clear />
+                    </a-form-item>
                 </a-form>
             </a-modal>
             <!-- 表格 -->
@@ -251,6 +262,23 @@ export default {
                     title: "水期代码",
                     dataIndex: "waterCode",
                 },
+                {
+                    title: "点位经度",
+                    dataIndex: "longitude",
+                },
+                    {
+                    title: "点位纬度",
+                    dataIndex: "latitude",
+                },
+                {
+                    title: "类别",
+                    dataIndex: "type",
+                },
+                {
+                    title: "排序",
+                    dataIndex: "sort",
+                    sorter: true,
+                },
                 {
                     title: "操作",
                     key: "action",
@@ -276,7 +304,23 @@ export default {
                 year: [{required: true, message: '请输入年份'}],
                 sectionName:[{
                     required:true,message: "请输入点位名称",
-                }]
+                }],
+                longitude: [{
+                    required: true,
+                    message: '请输入点位经度'
+                }],
+                latitude: [{
+                    required: true,
+                    message: '请输入点位纬度'
+                }],
+                type: [{
+                    required: true,
+                    message: '请输入类型'
+                }],
+                sort: [{
+                    required: true,
+                    message: '请输入排序'
+                }],
             },
             yearOptions: [],
             showNYear:false,

src/views/water/lake/statistic/inner/component/average.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :loading="loading"
                 :datasource="datasource"
@@ -145,7 +144,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/inner/component/avg-nutritional.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :datasource="datasource"
                 :columns="columns"
@@ -60,7 +59,14 @@ export default {
             selection: [],
             // 表格列配置
             columns: [
-                {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
+                // {
+                //     key: 'index',
+                //     dataIndex: 'index',
+                //     width: 48,
+                //     align: 'center',
+                //     customRender: ({index}) => index + 1
+                // },
+                // {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
                 {title: "类别", dataIndex: "type", sorter: true,},
                 {title: "点位名称", dataIndex: "pointName", sorter: true,},
                 {title: "水质类别", dataIndex: "waterType", sorter: true,},
@@ -125,7 +131,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/inner/component/com-nutritional.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :datasource="datasource"
                 :columns="columns"
@@ -61,6 +60,13 @@ export default {
             selection: [],
             // 表格列配置
             columns: [
+                // {
+                //     key: 'index',
+                //     dataIndex: 'index',
+                //     width: 48,
+                //     align: 'center',
+                //     customRender: ({index}) => index + 1
+                // },
                 {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
                 {title: "类别", dataIndex: "type", sorter: true,},
                 {title: "点位名称", dataIndex: "pointName", sorter: true,},
@@ -129,7 +135,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/inner/component/comparison.vue

@@ -6,7 +6,6 @@
     <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
       <!-- 表格 -->
       <ele-pro-table
-        v-model:selection="selectionList"
         ref="table"
         :datasource="datasource"
         :columns="columns"
@@ -148,34 +147,34 @@ export default {
 
           // 筛选出年份
           if(Array.isArray(item.data)){
-            item.data.forEach((single,i)=>{
-              filterData[index]['comprehensiveNutrition'+i] = single.comprehensiveNutrition;
-              filterData[index]['level'+i] = single.level;
-              filterData[index]['overflow'+i] = single.overflow;
-              filterData[index]['waterType'+i] = single.waterType;
-              filterData[index]['year'+i] = single.year;
+            item.data.forEach((single)=>{
+              // 生成格式化数据
+              filterData[index]['comprehensiveNutrition'+single.year] = single.comprehensiveNutrition;
+              filterData[index]['level'+single.year] = single.level;
+              filterData[index]['overflow'+single.year] = single.overflow;
+              filterData[index]['waterType'+single.year] = single.waterType;
+              filterData[index]['year'+single.year] = single.year;
 
+              // 只拿第一条数据的年份做循环生成表头
+              if(index==0){
+                // 生成导出用的扁平化表头
+                addSCloumns = [...addSCloumns, {dataIndex: `waterType${single.year}`},
+                    { dataIndex: `comprehensiveNutrition${single.year}`},
+                    {dataIndex: `level${single.year}`},
+                    {dataIndex: `overflow${single.year}`}]
 
-              if(i==0 && index==0){
-                addCloumns[index] = {}
-                addCloumns[index].title = single.year
-                addCloumns[index].align = 'center'
-
-                  addSCloumns = [
-                    {dataIndex: `waterType${i}`},
-                    { dataIndex: `comprehensiveNutrition${i}`},
-                    {dataIndex: `level${i}`},
-                    {dataIndex: `overflow${i}`}
-                  ]
-
-                 addCloumns[index].children = [
-                  { title: "水质类别", dataIndex: `waterType${i}`, sorter: true,align:'center' },
-                  { title: "综合营养状态指数", dataIndex: `comprehensiveNutrition${i}`, sorter: true,align:'center' },
-                  { title: "级别", dataIndex: `level${i}`, sorter: true,align:'center' },
+                // 页面展示所需表头
+                addCloumns[single.year] = {}
+                addCloumns[single.year].title = single.year
+                addCloumns[single.year].align = 'center'
+                addCloumns[single.year].children = [
+                  { title: "水质类别", dataIndex: `waterType${single.year}`, sorter: true,align:'center' },
+                  { title: "综合营养状态指数", dataIndex: `comprehensiveNutrition${single.year}`, sorter: true,align:'center' },
+                  { title: "级别", dataIndex: `level${single.year}`, sorter: true,align:'center' },
                   {
                     title: "超标项目（超标倍数）",
                     align:'center',
-                    dataIndex: `overflow${i}`,
+                    dataIndex: `overflow${single.year}`,
                     sorter: true,
                   },
                 ]
@@ -187,6 +186,14 @@ export default {
         })
       }
       this.columns = [
+      //   {
+      //     title: "序号",
+      //   key: 'index',
+      //   dataIndex: 'index',
+      //   width: 48,
+      //   align: 'center',
+      //   customRender: ({index}) => index + 1
+      // },
         { title: "类别", dataIndex: "type", sorter: true },
         { title: "点位名称", dataIndex: "pointName", sorter: true},
         ...addCloumns
@@ -223,21 +230,22 @@ export default {
       let th1 = []
       let th2 = []
       columns.forEach(item=>{
-        th1.push(item.title)
+        
        
         if(Array.isArray(item.children) && item.children.length>0){
           item.children.forEach(single=>{
-            th1.push('')
+            th1.push(item.title)
             th2.push(single.title)
           })
         }else{
+          th1.push(item.title)
             th2.push('')
         }
       })
 
       arr.push(th1)
       arr.push(th2)
-      this.data.forEach((d) => {
+      this.datasource.forEach((d) => {
         const td = this.sColumns.map((item) => d[item.dataIndex]);
         arr.push(td);
       });

src/views/water/lake/statistic/inner/component/raw-colums.js

@@ -17,13 +17,20 @@ const innerFilterColumns = [
     {title: "石油类", dataIndex: "petro", sorter: true,},
     {title: "粪大肠菌群（MPN/L）", dataIndex: "fecalColiforms", sorter: true,},
     {title: "化学需氧量", dataIndex: "cod", sorter: true,},
-    {title: "叶绿素a (mg/L)", dataIndex: "chlA", sorter: true,},
+    {title: "叶绿素a (mg/m3)", dataIndex: "chlA", sorter: true,},
     {title: "阴离子表面活性剂(mg/L)", dataIndex: "anSaa", sorter: true,},
     {title: "硫化物(mg/L) ", dataIndex: "s", sorter: true,},
     {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}
 ]
 
 const innerTableColumns = [
+    // {
+    //     key: 'index',
+    //     dataIndex: 'index',
+    //     width: 48,
+    //     align: 'center',
+    //     customRender: ({index}) => index + 1
+    //   },
     {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
     {title: "断面名称", dataIndex: "pointName", sorter: true,},
     {title: "水温(℃)", dataIndex: "waterTemperature", sorter: true,},
@@ -45,7 +52,7 @@ const innerTableColumns = [
     {title: "石油类", dataIndex: "petro", sorter: true,},
     {title: "粪大肠菌群（MPN/L）", dataIndex: "fecalColiforms", sorter: true,},
     {title: "化学需氧量", dataIndex: "cod", sorter: true,},
-    {title: "叶绿素a (mg/L)", dataIndex: "chlA", sorter: true,},
+    {title: "叶绿素a (mg/m3)", dataIndex: "chlA", sorter: true,},
     {title: "阴离子表面活性剂(mg/L)", dataIndex: "anSaa", sorter: true,},
     {title: "硫化物(mg/L) ", dataIndex: "s", sorter: true,},
     {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}
@@ -53,7 +60,14 @@ const innerTableColumns = [
 ];
 
 const averageTableColumns = [
-    {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
+    // {
+    //     key: 'index',
+    //     dataIndex: 'index',
+    //     width: 48,
+    //     align: 'center',
+    //     customRender: ({index}) => index + 1
+    //   },
+    // {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
     {title: "断面名称", dataIndex: "pointName", sorter: true,},
     {title: "水温(℃)", dataIndex: "waterTemperature", sorter: true,},
     {title: "pH值", dataIndex: "ph", sorter: true,},
@@ -74,7 +88,7 @@ const averageTableColumns = [
     {title: "石油类", dataIndex: "petro", sorter: true,},
     {title: "粪大肠菌群（MPN/L）", dataIndex: "fecalColiforms", sorter: true,},
     {title: "化学需氧量", dataIndex: "cod", sorter: true,},
-    {title: "叶绿素a (mg/L)", dataIndex: "chlA", sorter: true,},
+    {title: "叶绿素a (mg/m3)", dataIndex: "chlA", sorter: true,},
     {title: "阴离子表面活性剂(mg/L)", dataIndex: "anSaa", sorter: true,},
     {title: "硫化物(mg/L) ", dataIndex: "s", sorter: true,},
     {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}

src/views/water/lake/statistic/inner/component/raw.vue

@@ -6,12 +6,12 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :datasource="datasource"
                 :columns="columns"
                 :loading="loading"
                 :where="where"
+                row-key="lakeLibraryInnerCityId"
                 :scroll="{ x: 'max-content' }"
                 @done="(d) => (data = d.data)"
             >
@@ -156,7 +156,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/inner/component/search.vue

@@ -201,7 +201,7 @@ export default {
 
     emitData(val){
       if(val && this.where.startTime && this.where.endTime){
-        this.$emit("search", this.where);
+        this.searchData();
       }
     },
 
@@ -217,12 +217,27 @@ export default {
         /**获取下来框数据 */
         loadOptionData() {
             getLakeDropdown().then((res) => {
-                this.palceOptions = res.data.data.map((item) => {
-                    return {
-                        label: item.regionName,
-                        value: item.regionName,
-                    };
-                });
+
+              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]
+
+
+                // this.palceOptions = res.data.data.map((item) => {
+                //     return {
+                //         label: item.regionName,
+                //         value: item.regionName,
+                //     };
+                // });
                 this.sectionOptions= res.data.data.map((item) => {
                     return {
                         label: item.sectionName,
@@ -253,9 +268,12 @@ export default {
       this.where = {
         checked: 1,
       };
+      this.filter = innerFilterColumns.map((item) => item.dataIndex);
+      this.handleOk()
       this.searchData();
     },
     searchData() {
+      this.where.filter = [...this.filter]
       this.$emit("search", this.where);
     },
     exportFile() {

src/views/water/lake/statistic/inner/index.vue

@@ -9,13 +9,13 @@
             <com-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='com-nutritional'"></com-nutritional>
         </a-tab-pane>
         <a-tab-pane key="average" tab="平均数据">
-            <average :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></average>
+            <average :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='average'"></average>
         </a-tab-pane>
         <a-tab-pane key="avg-nutritional" tab="平均营养指数">
-            <avg-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></avg-nutritional>
+            <avg-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='avg-nutritional'"></avg-nutritional>
         </a-tab-pane>
         <a-tab-pane key="comparison" tab="年度对比">
-            <comparison :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></comparison>
+            <comparison :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='comparison'"></comparison>
         </a-tab-pane>
       </a-tabs>
     </a-card>

src/views/water/lake/statistic/special/component/average.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :loading="loading"
                 :datasource="datasource"
@@ -144,7 +143,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/special/component/avg-nutritional.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :datasource="datasource"
                 :columns="columns"
@@ -61,7 +60,14 @@ export default {
             selection: [],
             // 表格列配置
             columns: [
-                {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
+                // {
+                //     key: 'index',
+                //     dataIndex: 'index',
+                //     width: 48,
+                //     align: 'center',
+                //     customRender: ({index}) => index + 1
+                // },
+                // {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
                 {title: "类别", dataIndex: "type", sorter: true,},
                 {title: "点位名称", dataIndex: "pointName", sorter: true,},
                 {title: "水质类别", dataIndex: "waterType", sorter: true,},
@@ -126,7 +132,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/special/component/com-nutritional.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 :datasource="datasource"
                 :columns="columns"
@@ -61,6 +60,13 @@ export default {
             selection: [],
             // 表格列配置
             columns: [
+                // {
+                //     key: 'index',
+                //     dataIndex: 'index',
+                //     width: 48,
+                //     align: 'center',
+                //     customRender: ({index}) => index + 1
+                // },
                 {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
                 {title: "类别", dataIndex: "type", sorter: true,},
                 {title: "点位名称", dataIndex: "pointName", sorter: true,},
@@ -129,7 +135,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/special/component/comparison.vue

@@ -6,7 +6,6 @@
     <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
       <!-- 表格 -->
       <ele-pro-table
-        v-model:selection="selectionList"
         ref="table"
         :datasource="datasource"
         :columns="columns"
@@ -148,34 +147,34 @@ export default {
 
           // 筛选出年份
           if(Array.isArray(item.data)){
-            item.data.forEach((single,i)=>{
-              filterData[index]['comprehensiveNutrition'+i] = single.comprehensiveNutrition;
-              filterData[index]['level'+i] = single.level;
-              filterData[index]['overflow'+i] = single.overflow;
-              filterData[index]['waterType'+i] = single.waterType;
-              filterData[index]['year'+i] = single.year;
+            item.data.forEach((single)=>{
+              // 生成格式化数据
+              filterData[index]['comprehensiveNutrition'+single.year] = single.comprehensiveNutrition;
+              filterData[index]['level'+single.year] = single.level;
+              filterData[index]['overflow'+single.year] = single.overflow;
+              filterData[index]['waterType'+single.year] = single.waterType;
+              filterData[index]['year'+single.year] = single.year;
 
+              // 只拿第一条数据的年份做循环生成表头
+              if(index==0){
+                // 生成导出用的扁平化表头
+                addSCloumns = [...addSCloumns, {dataIndex: `waterType${single.year}`},
+                    { dataIndex: `comprehensiveNutrition${single.year}`},
+                    {dataIndex: `level${single.year}`},
+                    {dataIndex: `overflow${single.year}`}]
 
-              if(i==0 && index==0){
-                addCloumns[index] = {}
-                addCloumns[index].title = single.year
-                addCloumns[index].align = 'center'
-
-                  addSCloumns = [
-                    {dataIndex: `waterType${i}`},
-                    { dataIndex: `comprehensiveNutrition${i}`},
-                    {dataIndex: `level${i}`},
-                    {dataIndex: `overflow${i}`}
-                  ]
-
-                 addCloumns[index].children = [
-                  { title: "水质类别", dataIndex: `waterType${i}`, sorter: true,align:'center' },
-                  { title: "综合营养状态指数", dataIndex: `comprehensiveNutrition${i}`, sorter: true,align:'center' },
-                  { title: "级别", dataIndex: `level${i}`, sorter: true,align:'center' },
+                // 页面展示所需表头
+                addCloumns[single.year] = {}
+                addCloumns[single.year].title = single.year
+                addCloumns[single.year].align = 'center'
+                addCloumns[single.year].children = [
+                  { title: "水质类别", dataIndex: `waterType${single.year}`, sorter: true,align:'center' },
+                  { title: "综合营养状态指数", dataIndex: `comprehensiveNutrition${single.year}`, sorter: true,align:'center' },
+                  { title: "级别", dataIndex: `level${single.year}`, sorter: true,align:'center' },
                   {
                     title: "超标项目（超标倍数）",
                     align:'center',
-                    dataIndex: `overflow${i}`,
+                    dataIndex: `overflow${single.year}`,
                     sorter: true,
                   },
                 ]
@@ -187,6 +186,13 @@ export default {
         })
       }
       this.columns = [
+      //       {
+      //   key: 'index',
+      //   dataIndex: 'index',
+      //   width: 48,
+      //   align: 'center',
+      //   customRender: ({index}) => index + 1
+      // },
         { title: "类别", dataIndex: "type", sorter: true },
         { title: "点位名称", dataIndex: "pointName", sorter: true},
         ...addCloumns
@@ -223,27 +229,28 @@ export default {
       let th1 = []
       let th2 = []
       columns.forEach(item=>{
-        th1.push(item.title)
+        
        
         if(Array.isArray(item.children) && item.children.length>0){
           item.children.forEach(single=>{
-            th1.push('')
+            th1.push(item.title)
             th2.push(single.title)
           })
         }else{
+          th1.push(item.title)
             th2.push('')
         }
       })
 
       arr.push(th1)
       arr.push(th2)
-      this.data.forEach((d) => {
+      this.datasource.forEach((d) => {
         const td = this.sColumns.map((item) => d[item.dataIndex]);
         arr.push(td);
       });
       let sheet = XLSX.utils.aoa_to_sheet(arr);
       this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
-    },
+    }
   },
 };
 </script>

src/views/water/lake/statistic/special/component/raw-colums.js

@@ -17,13 +17,20 @@ const innerFilterColumns = [
     {title: "石油类", dataIndex: "petro", sorter: true,},
     {title: "粪大肠菌群（MPN/L）", dataIndex: "fecalColiforms", sorter: true,},
     {title: "化学需氧量", dataIndex: "cod", sorter: true,},
-    {title: "叶绿素a (mg/L)", dataIndex: "chlA", sorter: true,},
+    {title: "叶绿素a (mg/m3)", dataIndex: "chlA", sorter: true,},
     {title: "阴离子表面活性剂(mg/L)", dataIndex: "anSaa", sorter: true,},
     {title: "硫化物(mg/L) ", dataIndex: "s", sorter: true,},
     {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}
 ]
 
 const innerTableColumns = [
+    // {
+    //     key: 'index',
+    //     dataIndex: 'index',
+    //     width: 48,
+    //     align: 'center',
+    //     customRender: ({index}) => index + 1
+    //   },
     {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
     {title: "断面名称", dataIndex: "pointName", sorter: true,},
     {title: "水温(℃)", dataIndex: "waterTemperature", sorter: true,},
@@ -45,7 +52,7 @@ const innerTableColumns = [
     {title: "石油类", dataIndex: "petro", sorter: true,},
     {title: "粪大肠菌群（MPN/L）", dataIndex: "fecalColiforms", sorter: true,},
     {title: "化学需氧量", dataIndex: "cod", sorter: true,},
-    {title: "叶绿素a (mg/L)", dataIndex: "chlA", sorter: true,},
+    {title: "叶绿素a (mg/m3)", dataIndex: "chlA", sorter: true,},
     {title: "阴离子表面活性剂(mg/L)", dataIndex: "anSaa", sorter: true,},
     {title: "硫化物(mg/L) ", dataIndex: "s", sorter: true,},
     {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}
@@ -53,31 +60,38 @@ const innerTableColumns = [
 ];
 
 const averageTableColumns = [
-    {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
-    {title: "断面名称", dataIndex: "pointName", sorter: true,},
-    {title: "水温(℃)", dataIndex: "waterTemperature", sorter: true,},
+    // {
+    //     key: 'index',
+    //     dataIndex: 'index',
+    //     width: 48,
+    //     align: 'center',
+    //     customRender: ({index}) => index + 1
+    //   },
+    // {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
+    {title: "断面名称", dataIndex: "sectionName", sorter: true,},
+    {title: "水温(℃)", dataIndex: "wTemp", sorter: true,},
     {title: "pH值", dataIndex: "ph", sorter: true,},
-    {title: "透明度（cm）", dataIndex: "transparency", sorter: true,},
-    {title: "溶解氧饱和度（﹪）", dataIndex: "dissolvedOxygenSaturation", sorter: true,},
+    {title: "透明度（cm）", dataIndex: "transp", sorter: true,},
+    // {title: "溶解氧饱和度（﹪）", dataIndex: "dissolvedOxygenSaturation", sorter: true,},
     {title: "溶解氧", dataIndex: "dissolvedOxygen", sorter: true,},
-    {title: "高锰酸盐指数", dataIndex: "permanganateIndex", sorter: true,},
-    {title: "五日生化需氧量", dataIndex: "fiveDayBod", sorter: true,},
-    {title: "总氮 ", dataIndex: "totalNitrogen", sorter: true,},
-    {title: "氨氮", dataIndex: "ammonia", sorter: true,},
-    {title: "挥发酚", dataIndex: "volatilePhenol", sorter: true,},
+    {title: "高锰酸盐指数 (mg/L)", dataIndex: "codmn", sorter: true,},
+    {title: "五日生化需氧量", dataIndex: "bod5", sorter: true,},
+    {title: "总氮 (mg/L)", dataIndex: "nTotal", sorter: true,},
+    {title: "氨氮 (mg/L)", dataIndex: "nh4N", sorter: true,},
+    {title: "挥发酚 (mg/L)", dataIndex: "vPhen", sorter: true,},
     {title: "砷(mg/L)", dataIndex: "as", sorter: true,},
-    {title: "汞 (mg/L)", dataIndex: "hg", sorter: true,},
+    {title: "汞 (mg/L)", dataIndex: "wHg", sorter: true,},
     {title: "六价铬 (mg/L)", dataIndex: "cr6", sorter: true,},
-    {title: "铅 (mg/L)", dataIndex: "pb", sorter: true,},
+    {title: "铅 (mg/L)", dataIndex: "wPb", sorter: true,},
     {title: "镉 (mg/L)", dataIndex: "cd", sorter: true,},
-    {title: "总磷", dataIndex: "totalPhosphorus", sorter: true,},
-    {title: "石油类", dataIndex: "petro", sorter: true,},
-    {title: "粪大肠菌群（MPN/L）", dataIndex: "fecalColiforms", sorter: true,},
-    {title: "化学需氧量", dataIndex: "cod", sorter: true,},
-    {title: "叶绿素a (mg/L)", dataIndex: "chlA", sorter: true,},
+    {title: "总磷 (mg/L)", dataIndex: "pTotal", sorter: true,},
+    {title: "石油类 (mg/L)", dataIndex: "oils", sorter: true,},
+    {title: "粪大肠菌群 (mg/L)", dataIndex: "coloOrg", sorter: true,},
+    {title: "化学需氧量 (mg/L)", dataIndex: "codcr", sorter: true,},
+    {title: "叶绿素a (mg/m3)", dataIndex: "chlA", sorter: true,},
     {title: "阴离子表面活性剂(mg/L)", dataIndex: "anSaa", sorter: true,},
     {title: "硫化物(mg/L) ", dataIndex: "s", sorter: true,},
-    {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}
+    // {title: "氧化还原电位（mV）", dataIndex: "oxidationReductionPotential", sorter: true,}
 ];
 
 
@@ -90,6 +104,7 @@ const specialFilterColumns = [
     {title: "透明度（cm）", dataIndex: "transp", sorter: true,},
     {title: "溶解氧 (mg/L)", dataIndex: "dissolvedOxygen", sorter: true,},
     {title: "高锰酸盐指数 (mg/L)", dataIndex: "codmn", sorter: true,},
+    {title: "五日生化需氧量", dataIndex: "bod5", sorter: true,},
     {title: "氨氮 (mg/L)", dataIndex: "nh4N", sorter: true,},
     {title: "石油类 (mg/L)", dataIndex: "oils", sorter: true,},
     {title: "总氮 (mg/L)", dataIndex: "nTotal", sorter: true,},

src/views/water/lake/statistic/special/component/raw.vue

@@ -6,7 +6,6 @@
            <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
             <!-- 表格 -->
             <ele-pro-table
-                v-model:selection="selectionList"
                 ref="table"
                 row-key="lakeLibrarySpecialId"
                 :datasource="datasource"
@@ -27,7 +26,7 @@ import XLSX from "xlsx";
 import {getLakeDropdown, specialOriginalData} from "@/api/ecology/new-lake";
 import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
 import Search from './search.vue';
-import {innerTableColumns} from "./raw-colums"
+import {specialTableColumns} from "./raw-colums"
 export default {
     name: 'inner-raw',
     components: {
@@ -61,7 +60,7 @@ export default {
             datasource:[],
             selection: [],
             // 表格列配置
-            columns: innerTableColumns,
+            columns: specialTableColumns,
             palceOptions: [],
             areaOptions: [],
             regionLevelOptions: [],
@@ -103,7 +102,7 @@ export default {
 
             if(!Array.isArray(keys)){return}
 
-            let newCloumns = [...innerTableColumns]
+            let newCloumns = [...specialTableColumns]
 
             let filterIndex = [];
             newCloumns.forEach((item,index)=>{
@@ -157,7 +156,7 @@ export default {
             const arr = [];
             const th = columns.map((item) => item.title);
             arr.push(th);
-            this.data.forEach((d) => {
+            this.datasource.forEach((d) => {
                 const td = columns.map((item) => d[item.dataIndex]);
                 arr.push(td);
             });

src/views/water/lake/statistic/special/component/search.vue

@@ -51,7 +51,7 @@
       <a-col :lg="6" :md="12" :sm="24" :xs="24">
         <a-form-item label="区域:">
           <a-select
-            v-model:value="where.regionNameList"
+            v-model:value="where.regionNameList"  mode="multiple" 
             allowClear
             placeholder="未选择"
           >
@@ -120,8 +120,8 @@
 
 <script>
 import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
-import { innerFilterColumns } from "./raw-colums";
-import {getLakeDropdown} from "@/api/ecology/new-lake";
+import { specialFilterColumns as innerFilterColumns } from "./raw-colums";
+import {getSpecialLakeDropdown as getLakeDropdown} from "@/api/ecology/new-lake";
 export default {
   name: "inner-search",
   props: {
@@ -201,7 +201,7 @@ export default {
 
     emitData(val){
       if(val && this.where.startTime && this.where.endTime){
-        this.$emit("search", this.where);
+        this.searchData()
       }
     },
 
@@ -214,15 +214,30 @@ export default {
         this.filter = newList;
       },
       
-        /**获取下来框数据 */
+                /**获取下来框数据 */
         loadOptionData() {
             getLakeDropdown().then((res) => {
-                this.palceOptions = res.data.data.map((item) => {
-                    return {
-                        label: item.regionName,
-                        value: item.regionName,
-                    };
-                });
+
+              let palceOptions = {}
+              let newPlace = []
+                res.data.data.forEach(item=>{
+                  palceOptions[item.lakeReservoirName] = item.lakeReservoirName
+                })
+                for(let i in palceOptions){
+                  newPlace.push({
+                   label: palceOptions[i],
+                   value: palceOptions[i],
+                  })
+                }
+                this.palceOptions = [...newPlace]
+
+
+                // this.palceOptions = res.data.data.map((item) => {
+                //     return {
+                //         label: item.regionName,
+                //         value: item.regionName,
+                //     };
+                // });
                 this.sectionOptions= res.data.data.map((item) => {
                     return {
                         label: item.sectionName,
@@ -253,9 +268,13 @@ export default {
       this.where = {
         checked: 1,
       };
+      this.filter = innerFilterColumns.map((item) => item.dataIndex);
+      this.handleOk()
       this.searchData();
+      
     },
     searchData() {
+      this.where.filter = [...this.filter]
       this.$emit("search", this.where);
     },
     exportFile() {

src/views/water/lake/statistic/special/index.vue

@@ -9,13 +9,13 @@
             <com-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='com-nutritional'"></com-nutritional>
         </a-tab-pane>
         <a-tab-pane key="average" tab="平均数据">
-            <average :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></average>
+            <average :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='average'"></average>
         </a-tab-pane>
         <a-tab-pane key="avg-nutritional" tab="平均营养指数">
-            <avg-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></avg-nutritional>
+            <avg-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='avg-nutritional'"></avg-nutritional>
         </a-tab-pane>
         <a-tab-pane key="comparison" tab="年度对比">
-            <comparison :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter"></comparison>
+            <comparison :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeKey=='comparison'"></comparison>
         </a-tab-pane>
       </a-tabs>
     </a-card>

src/views/water/river-station/statistic/site-day-avg.vue

@@ -307,8 +307,8 @@
       /* 刷新表格 */
       reload() {
         this.loading = true;
-        this.datasource = {};
         listWaterSiteMonthTotal(this.where).then((res) => {
+          this.datasource = {};
           if (res.data.code == 0) {
             this.$message.success(res.data.msg);
             this.datasource = res.data.data;

src/views/water/river-station/statistic/site.vue

@@ -186,9 +186,9 @@
       /* 刷新表格 */
       reload() {
         this.loading = true;
-        this.momData = [];
-        this.yoyData = [];
         listWaterSiteYoy(this.where).then((res) => {
+          this.momData = [];
+          this.yoyData = [];
           console.log(res.data.data);
           if (res.data.code == 0) {
               this.$message.success(res.data.msg);

vue.config.js

@@ -23,5 +23,12 @@ module.exports = {
         }
       }
     }
+  },
+  devServer: {
+    open: true,
+    overlay: {
+      warnings: true,
+      errors: true
+    }
   }
 }