Merge remote-tracking branch 'origin/master'

.env.development

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

src/api/ecology/atmosphere/acid.js

@@ -60,6 +60,15 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/acidRain/acidRain/gis/place",{params:data})
 }
+const getPlaceOptions = (regionLevel) => axios.get("/acidRain/acidRain/placeOptions", {params:{regionLevel}})
+
+const getTrendChart = function(data){
+    return axios.post("/acidRain/acidRain/trend/chart",data)
+}
+const getYearOptions = () => axios.get("/acidRain/acidRain/yearOptions")
+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 +92,9 @@ export {
     statisticCity,
     statisticIon,
     statisticCounty,
-    getPlaceGis
+    getPlaceGis,
+    getYearOptions,
+    getPlaceOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
 }

src/api/ecology/atmosphere/air.js

@@ -71,6 +71,16 @@ const statisticArea = "/ambientAir/ambientAir/statistic/area";
 const getPlaceGis = function(data){
     return axios.get("/ambientAir/ambientAir/gis/place",{params:data})
 }
+const getYearOptions = () => axios.get("/ambientAir/ambientAir/yearOptions")
+const getTrendChart = function(data){
+    return axios.post("/ambientAir/ambientAir/trend/chart",data)
+}
+const getCityPlace = function(column){
+    return axios.get("/ambientAir/ambientAir/place/city",{params:{column}})
+}
+const getCountryPlace = function(column){
+    return axios.get("/ambientAir/ambientAir/place/country",{params:{column}})
+}
 // 排行
 const airDayRankUrl = "/zhenQiWang/ambientAirZhenqiCityDayAqiRankData";
 const airMonthRankUrl = "/zhenQiWang/ambientAirZhenqiCityMonthComprehensiveAqiRankData/page";
@@ -105,6 +115,9 @@ export {
     airPm25YearRankUrl,
     airYearProvincialCapitalRankUrl,
     airPm25YearProvincialCapitalRankUrl,
-    airMonthProvincialCapitalRankUrl
+    airMonthProvincialCapitalRankUrl,
-  
+    getYearOptions,
+    getTrendChart,
+    getCityPlace,
+    getCountryPlace
 }

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

@@ -88,26 +88,31 @@ export const countyDescripFormData = function (data) {
     return axios.post(countyDescripFormUrl,data)
 }
 
+//县级—取水量统计
+export const countyWaterCount = function (data) {
+    return axios.post('/drinkingWater/drinkingWater/analyseCountyPage',data)
+}
+
 //县级—超标评价
-export const countyOverStandardtUrl = '/drinkingWater/drinkingWater/getWaterEvaluate';
+export const countyOverStandardtUrl = '/drinkingWater/drinkingWater/getCountyWaterEvaluate';
 export const countyOverStandardCount = function (data) {
     return axios.post(countyOverStandardtUrl,data)
 }
 
 //县级—水质类别
-export const countyWaterQualityUrl = '/drinkingWater/drinkingWater/getWaterQualityCategory';
+export const countyWaterQualityUrl = '/drinkingWater/drinkingWater/getCountyWaterQualityCategory';
 export const countyWaterQualityData = function (data) {
     return axios.post(countyWaterQualityUrl,data)
 }
 
 //县级—水质统计
-export const countyWaterQualityCountUrl = '/drinkingWater/drinkingWater/getWaterQualityStatistics';
+export const countyWaterQualityCountUrl = '/drinkingWater/drinkingWater/getCountyWaterQualityStatistics';
 export const countyWaterQualityCountData = function (data) {
     return axios.post(countyWaterQualityCountUrl,data)
 }
 
 //县级—水质达标情况
-export const countyWaterQualityUpUrl = '/drinkingWater/drinkingWater/getWaterQualityStandard';
+export const countyWaterQualityUpUrl = '/drinkingWater/drinkingWater/getCountyWaterQualityStandard';
 export const countyWaterQualityUpData = function (data) {
     return axios.post(countyWaterQualityUpUrl,data)
 }

src/api/ecology/new-lake.js

@@ -76,3 +76,10 @@ export const specialYearContrastUrl = '/lakeLibrary/wateAnalysis/special/yearCon
 export const specialYearContrastData = function (data) {
     return axios.post(specialYearContrastUrl,data)
 }
+
+// 湖库统计图表
+
+export const lakeLibraryUrl = '/lakeLibrary/trendChart/data';
+export const lakeLibrary = function (data) {
+    return axios.post(lakeLibraryUrl,data)
+}

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/views/atmosphere/acid-rain/trend/index.vue

@@ -0,0 +1,278 @@
+<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.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" @change="handleCategoryChange" v-model:value="queryParams.categoryList" :options="categoryOptions" 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" @change="handleYcoChange" 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 { getYearOptions, getPlaceOptions, getColumnOptions, getTrendChart } from '@/api/ecology/atmosphere/acid';
+export default {
+  components: {},
+  data() {
+    return {
+      queryParams: {
+        yearList: ['2020', '2021'],
+        monthList: [],
+        placeList: ['所有测点'],
+        regionLevel: '市级', // 区域等级
+        xco: '年度', // 横坐标
+        ycoList: ['ph'],
+        categoryList: ['酸雨PH'] // 项目类别
+      },
+      trendData: [],
+      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
+      placeOptions: [],
+      yearOptions: [],
+      categoryOptions: [
+        { label: '酸雨PH', value: '酸雨PH' },
+        { label: '降水PH', value: '降水PH' },
+        { label: '酸雨频率（%)', value: '酸雨频率' },
+      ],
+      monthOptions: [
+        {
+          label: '全部',
+          value: '全部'
+        }
+      ],
+      xOptions: [
+        { label: '年度', value: '年度' },
+        { label: '年月', value: '年月' },
+        { label: '测点名称', value: '测点名称' }
+      ],
+      yOptions: [
+        { label: 'PH值(无量纲)', value: 'ph' },
+        { label: '酸雨频率（%）', value: 'rate' },
+      ]
+    };
+  },
+  mounted() {
+    this.loadOptionData();
+    this.drawTrend();
+  },
+  methods: {
+    // 下拉列表
+    loadOptionData() {
+      getYearOptions().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,
+          };
+        });
+      });
+      this.getPlaceOptions('市级')
+      for (let i = 1; i <= 12; i++) {
+        this.monthOptions.push({ label: i + '月', value: i });
+      }
+    },
+    // 获取区域测点名称
+    getPlaceOptions(regionLevel) {
+      getPlaceOptions(regionLevel).then(res => {
+        this.placeOptions = res.data.data.map(item => {
+          return {
+            label: item,
+            value: item
+          };
+        });
+        this.placeOptions.unshift({ label: '所有测点', value: '所有测点' });
+      });
+    },
+    handleRegionLevelChange(value) {
+      if (value) {
+        this.getPlaceOptions(value)
+      }
+    },
+    // 纵坐标变化
+    handleYcoChange(value) {
+      if (value.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
+        this.queryParams.categoryList.push('酸雨频率')
+      }
+      if (!value.includes('rate') && this.queryParams.categoryList.includes('酸雨频率')) {
+        let index = this.queryParams.categoryList.indexOf('酸雨频率')
+        this.queryParams.categoryList.splice(index, 1)
+      }
+    },
+    // 项目类别变化
+    handleCategoryChange(value) {
+      if (value.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
+        this.queryParams.ycoList.push('rate')
+      }
+      if (!value.includes('酸雨频率') && this.queryParams.ycoList.includes('rate')) {
+        let index = this.queryParams.ycoList.indexOf('rate')
+        this.queryParams.ycoList.splice(index, 1)
+      }
+      if ((value.includes('酸雨PH') || value.includes('降水PH')) && !this.queryParams.ycoList.includes('ph')) {
+        this.queryParams.ycoList.push('ph')
+      }
+      if (!value.includes('酸雨PH') && !value.includes('降水PH') && this.queryParams.ycoList.includes('ph')) {
+        let index = this.queryParams.ycoList.indexOf('ph')
+        this.queryParams.ycoList.splice(index, 1)
+      }
+    },
+    validParams() {
+      console.log("params", this.queryParams);
+      if (this.queryParams.yearList.length === 0) {
+        this.$message.warning('年度不能为空')
+        return false
+      }
+      if (!this.queryParams.regionLevel) {
+        this.$message.warning('区域等级不能为空')
+        return false
+      }
+      if (this.queryParams.placeList.length === 0) {
+        this.$message.warning('测点名称不能为空')
+        return false
+      }
+      if (this.queryParams.categoryList.length === 0) {
+        this.$message.warning('项目类别不能为空')
+        return false
+      }
+      if (!this.queryParams.xco) {
+        this.$message.warning('横坐标不能为空')
+        return false
+      }
+      if (!this.queryParams.ycoList.length === 0) {
+        this.$message.warning('纵坐标不能为空')
+        return false
+      }
+      if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
+        this.$message.warning('横坐标为年月时，月份选择不能为空')
+        return false
+      }
+      if (this.queryParams.ycoList.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
+        this.$message.warning('纵坐标选择酸雨频率时，项目类别也应选择酸雨频率')
+        return false
+      }
+      if (this.queryParams.categoryList.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
+        this.$message.warning('项目类别选择酸雨频率时，纵坐标也应选择酸雨频率')
+        return false
+      }
+      return true
+    },
+    // 趋势图
+    drawTrend() {
+      if (!this.validParams()) {
+        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
+      };
+      //添加一个新的刻度线 实现折线在柱状图的中间显示
+      // 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'
+        };
+        if (index === 0) {
+          item.label.offset = [20,30]
+        }
+        // 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,363 @@
+<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" @change="handleIndicatorChange" 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" @change="handleYcoChange" 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 { getYearOptions, getTrendChart, getCityPlace, getCountryPlace } from '@/api/ecology/atmosphere/air';
+import { getDictData } from '@/api/ecology/dict';
+export default {
+  components: {},
+  data() {
+    return {
+      queryParams: {
+        yearList: ['2020', '2021'],
+        monthList: [],
+        areaList: ['南宁市'],
+        placeList: [],
+        regionLevel: '市级', // 区域等级
+        xco: '年度', // 横坐标
+        ycoList: ['ch'],
+        indicatorList: ['so2', 'no2'] // 监测指标
+      },
+      trendData: [],
+      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
+      placeOptions: [],
+      areaOptions: [],
+      yearOptions: [],
+      indicatorOptions: [
+        { label: '二氧化硫浓度/(μg/m3)', value: 'so2' },
+        { label: '二氧化氮浓度/(μg/m3)', value: 'no2' },
+        { label: '可吸入颗粒物浓度/(μg/m3)', value: 'pm10' },
+        { label: '一氧化碳 浓度/(mg/m3)', value: 'co' },
+        { label: 'O3（O3）最大8小时滑动平均浓度/(μg/m3)', value: 'o3' },
+        { label: '细颗粒物浓度/(μg/m3)', value: 'pm25' },
+        { label: '空气质量指数AQI', value: 'aqi' },
+        { label: '首要污染天数', value: 'main' },
+        { label: '多项首要污染物天数', value: 'multi' }
+      ],
+      monthOptions: [
+        {
+          label: '全部',
+          value: '全部'
+        }
+      ],
+      xOptions: [
+        { label: '年度', value: '年度' },
+        { label: '年月', value: '年月' },
+        { label: '区域', value: '区域' },
+        { label: '测点名称', value: '测点名称' },
+        { label: '监测指标', value: '监测指标' }
+      ],
+      yOptions: [
+        { label: '达标天数（天）', value: 'days' },
+        { label: '达标率（%）', value: 'rate' },
+        { label: '浓度', value: 'ch' },
+        { label: '首要污染物天数', value: 'main' },
+        { label: '空气质量指数', value: 'aqi' },
+        { label: '优良率', value: 'abRate' },
+        { label: '多项首要污染物天数', value: 'multi' },
+      ]
+    };
+  },
+  mounted() {
+    this.loadOptionData();
+    this.drawTrend();
+  },
+  methods: {
+    // 下拉列表
+    loadOptionData() {
+      getYearOptions().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.getCityPlace();
+    },
+    // 区域下拉列表
+    getArea() {
+      this.areaOptions = [
+        { label: '邕宁区', value: '邕宁区' },
+        { label: '青秀区', value: '青秀区' },
+        { label: '五象新区', value: '五象新区' },
+        { label: '高新区', value: '高新区' },
+        { label: '良庆区', value: '良庆区' },
+        { label: '经开区', value: '东盟经开区' },
+        { label: '江南区', value: '江南区' },
+        { label: '西乡塘区', value: '西乡塘区' },
+        { label: '兴宁区', value: '兴宁区' },
+        { 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: '所有县' });
+      });
+    },
+    // 县级测点名称下拉列表
+    getCountryPlace() {
+      getCountryPlace().then(res => {
+        this.placeOptions = res.data.data.map(item => {
+          return {
+            label: item,
+            value: item
+          };
+        });
+      });
+    },
+    // 县级测点名称下拉列表
+    getCityPlace() {
+      getCityPlace().then(res => {
+        this.placeOptions = res.data.data.map(item => {
+          return {
+            label: item,
+            value: item
+          };
+        });
+      });
+    },
+    handleRegionLevelChange(value) {
+      this.queryParams.areaList = [];
+      this.queryParams.placeList = [];
+      if (value == '市级') {
+        this.getArea();
+        this.getCityPlace();
+      } else if (value == '县级') {
+        this.getCounty();
+        this.getCountryPlace();
+      }
+    },
+    // 纵坐标变化
+    handleYcoChange(value) {
+      if (value.length > 2) {
+        this.$message.warning('纵坐标最多只能选择两个')
+        this.queryParams.ycoList.splice(this.queryParams.ycoList.length - 1)
+      }
+      if (value.includes('rate') || value.includes('aqi') || value.includes('abRate')) {
+        this.queryParams.indicatorList = []
+      }
+      if (value.includes('multi')) {
+        this.queryParams.ycoList = ['multi']
+        this.queryParams.indicatorList = ['multi']
+      }
+      if (value.includes('main')) {
+        this.queryParams.ycoList = ['main']
+        this.queryParams.indicatorList = ['main']
+
+      }
+      if (value.includes('aqi')) {
+        this.queryParams.ycoList = ['aqi']
+        this.queryParams.indicatorList = ['aqi']
+      }
+    },
+    handleIndicatorChange(value) {
+      if (value.includes('multi')) {
+        this.queryParams.ycoList = ['multi']
+        this.queryParams.indicatorList = ['multi']
+      }
+      if (value.includes('main')) {
+        this.queryParams.ycoList = ['main']
+        this.queryParams.indicatorList = ['main']
+      }
+      if (value.includes('aqi')) {
+        this.queryParams.ycoList = ['aqi']
+        this.queryParams.indicatorList = ['aqi']
+      }
+    },
+    validParams() {
+      console.log("params", this.queryParams);
+      if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
+        this.$message.warning('横坐标为年月时，月份选择不能为空')
+        return false
+      }
+      if (this.queryParams.xco === '区域' && this.queryParams.areaList.length === 0) {
+        this.$message.warning('横坐标为区域时，区域选择不能为空')
+        return false
+      }
+      if (this.queryParams.xco === '区域' && this.queryParams.indicatorList.length > 1) {
+        this.$message.warning('横坐标为区域时，监测指标不能多选')
+        return false
+      }
+      if (this.queryParams.xco === '监测指标' && this.queryParams.areaList.length > 1) {
+        this.$message.warning('横坐标为监测指标时，区域不能多选')
+        return false
+      }
+      if (this.queryParams.xco === '监测指标' && this.queryParams.placeList.length > 1) {
+        this.$message.warning('横坐标为监测指标时，测点名称不能多选')
+        return false
+      }
+      if (this.queryParams.xco === '测点名称' && this.queryParams.placeList.length === 0) {
+        this.$message.warning('横坐标为测点名称时，测点名称选择不能为空')
+        return false
+      }
+      if (this.queryParams.xco === '测点名称' && this.queryParams.indicatorList.length > 1) {
+        this.$message.warning('横坐标为测点名称时，监测指标不能多选')
+        return false
+      }
+      if (this.queryParams.areaList.length > 0 && this.queryParams.placeList.length > 0) {
+        this.$message.warning('区域与测点名称不能同时选择')
+        return false
+      }
+      if (this.queryParams.ycoList.includes('浓度') && this.queryParams.indicatorList.length === 0) {
+        this.$message.warning('纵坐标为浓度时，监测指标不能为空')
+        return false
+      }
+      return true
+    },
+    // 趋势图
+    drawTrend() {
+      if (!this.validParams()) {
+        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);
+        }
+      };
+      this.trendData.yAxis && this.trendData.yAxis.forEach(item=>{
+        console.log("item", item);
+        if (item.name === '浓度') {
+          item.name = '浓度 单位：微克/立方米（一氧化碳：毫克/立方米）'
+        }
+      })
+      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/login/forget.vue

@@ -144,7 +144,7 @@ export default {
     };
     return {
       // 登录框方向, 0居中, 1居右, 2居左
-      direction: 0,
+      direction: 2,
       // 加载状态
       loading: false,
       // 表单数据
@@ -256,7 +256,7 @@ export default {
   padding: 48px 16px 0 16px;
   position: relative;
   box-sizing: border-box;
-  background-image: url("~@/assets/bg-login.jpg");
+  background-image: url("~@/assets/bg-login2.png");
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;

src/views/login/login.vue

@@ -6,7 +6,9 @@
       :rules="rules"
       layout="vertical"
       class="login-form ele-bg-white">
-      <h4>{{ $t('login.title') }}</h4>
+      <h1>南宁生态环境监测数据<br/>
+        综合分析平台</h1>
+<!--      <h4>{{ $t('login.title') }}</h4>-->
       <a-form-item name="username">
         <a-input
           allow-clear
@@ -44,22 +46,23 @@
           </a-button>
         </div>
       </a-form-item>
-      <a-form-item>
+<!--      <a-form-item>-->
-        <a-checkbox v-model:checked="form.remember">
+<!--        <a-checkbox v-model:checked="form.remember">-->
-          {{ $t('login.remember') }}
+<!--          {{ $t('login.remember') }}-->
-        </a-checkbox>
+<!--        </a-checkbox>-->
-        <router-link
+<!--        <router-link-->
-          to="/forget"
+<!--          to="/forget"-->
-          class="ele-pull-right"
+<!--          class="ele-pull-right"-->
-          style="line-height: 22px;">
+<!--          style="line-height: 22px;">-->
-          {{ $t('login.forget') }}
+<!--          {{ $t('login.forget') }}-->
-        </router-link>
+<!--        </router-link>-->
-      </a-form-item>
+<!--      </a-form-item>-->
       <a-form-item>
         <a-button
           block
           size="large"
           type="primary"
+          shape="round"
           :loading="loading"
           @click="doSubmit">
           {{ loading ? $t('login.loading') : $t('login.login') }}
@@ -122,7 +125,7 @@ export default {
   data() {
     return {
       // 登录框方向, 0居中, 1居右, 2居左
-      direction: 0,
+      direction: 2,
       // 加载状态
       loading: false,
       // 表单数据
@@ -233,7 +236,7 @@ export default {
   padding: 48px 16px 0 16px;
   position: relative;
   box-sizing: border-box;
-  background-image: url("~@/assets/bg-login.jpg");
+  background-image: url("~@/assets/bg-login2.png");
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
@@ -246,7 +249,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, .2);
+  /*background: rgba(0, 0, 0, .2);*/
 }
 
 /* 卡片 */
@@ -256,7 +259,7 @@ export default {
   max-width: 100%;
   padding: 0 28px;
   box-sizing: border-box;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+  /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);*/
   border-radius: 2px;
   position: relative;
   z-index: 2;
@@ -270,11 +273,21 @@ export default {
   margin: 0 auto 0 15%;
 }
 
+.login-form h1 {
+  padding: 22px 0;
+  text-align: left;
+  color: #2f95e9;
+  font-size: 30px;
+}
 .login-form h4 {
   padding: 22px 0;
   text-align: center;
 }
-
+.login-form :deep(.ant-input-affix-wrapper-lg) {
+  border-radius: 24px;
+  border-color: #ffffff;
+  box-shadow: 1px 2px 5px 3px rgba(0,0,0,.05);
+}
 /* 验证码 */
 .login-input-group {
   display: flex;
@@ -283,18 +296,28 @@ export default {
 
 .login-input-group :deep(.ant-input-affix-wrapper) {
   flex: 1;
+  border-radius: 24px;
+  border-color: #ffffff;
+  box-shadow: 1px 2px 5px 3px rgba(0,0,0,.05);
 }
 
+
+
 .login-input-group .login-captcha {
   width: 102px;
   height: 40px;
   margin-left: 10px;
   padding: 0;
+  border: none;
 }
 
 .login-input-group .login-captcha > img {
   width: 100%;
   height: 100%;
+  border-radius: 24px;
+  border-color: #ffffff;
+  box-shadow: 1px 2px 5px 3px rgba(0,0,0,.05);
+  overflow: hidden;
 }
 
 /* 第三方登录图标 */

src/views/sound/zone/collect/noise-bill.vue

@@ -240,7 +240,7 @@
       },
       detail(record) {
         this.$router.replace({
-          path: "/sound/air/collect/noise/" + record.zoneNoiseBillId
+          path: "/sound/zone/collect/noise/" + record.zoneNoiseBillId
         })
       },
       edit(record) {

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-col>
-            <a-form-item label="表格名称:">
+            <a-col :lg="6" :md="12" :sm="24" :xs="24">
-              <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 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.reportTimeStart = null;
-        this.where.reportTimeEnd = null;
+        // this.where.reportTimeEnd = null;
-        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+        // if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
+        //   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.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/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-col>
-          <a-form-item label="表格名称:">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
-            <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 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>
@@ -360,7 +389,7 @@ export default {
           });
 
 
-          const id=record.drinkingWaterBillId;
+          const drinkingWaterBillId=record.drinkingWaterBillId;
 
           // drinkingWaterList.drinkingWaterBillId=record.drinkingWaterBillId;
           // 解析成对象数组
@@ -380,13 +409,14 @@ export default {
           if (billData1.length > 0) {
               updateWaterWithdrawal({
                 // drinkingWaterBillId:record.drinkingWaterBillId,
-                drinkingWaterBillId:id,
+                id:drinkingWaterBillId,
-                drinkingWaterList: billData1,
+                waterWithdrawals: billData1,
               })
                 .then((res) => {
                   if (res.data.code == 0) {
                     Modal.success({
                       title: "导入成功",
+                      content: `成功导入${billData1.length}条数据`,
                     });
                     this.$refs.water && this.$refs.water.reload();
                   } else {
@@ -408,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({
@@ -456,14 +452,14 @@ export default {
     },
     /* 刷新表格 */
     reload() {
-      this.where.reportTimeStart = null;
+    //   this.where.reportTimeStart = null;
-      this.where.reportTimeEnd = null;
+    //   this.where.reportTimeEnd = null;
-      if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+    //   if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-        this.where.reportTimeStart =
+    //     this.where.reportTimeStart =
-          this.reportTimeScope[0].format("Y-M-D H:m:s");
+    //       this.reportTimeScope[0].format("Y-M-D H:m:s");
-        this.where.reportTimeEnd =
+    //     this.where.reportTimeEnd =
-          this.reportTimeScope[1].format("Y-M-D H:m:s");
+    //       this.reportTimeScope[1].format("Y-M-D H:m:s");
-      }
+    //   }
       this.$refs.table.reload({
         where: this.where,
       });
@@ -600,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

@@ -109,6 +109,9 @@
                     <a-form-item label="纬度(°)" name="latitude">
                         <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
                     </a-form-item>
+                    <a-form-item label="排序" name="sortNum">
+                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+                    </a-form-item>
                     <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
                         <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear />
                     </a-form-item>

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

@@ -109,6 +109,9 @@
                     <a-form-item label="纬度(°)" name="latitude">
                         <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
                     </a-form-item>
+                    <a-form-item label="排序" name="sortNum">
+                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+                    </a-form-item>
                     <!-- <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
                         <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear />
                     </a-form-item> -->
@@ -250,7 +253,7 @@ export default {
             // 是否显示编辑弹窗
             showEdit: false,
             // 表单数据
-            form: {},
+            form: {waterSourceType:''},
             loading: false,
             rules: {
                 // year: [{required: true, message: '请输入年份'}],
@@ -293,6 +296,7 @@ export default {
             await this.$refs.form.validate();
             const hide = this.$message.loading('请求中..', 0);
             const form = this.form;
+            form.waterSourceType='2';
             console.log(form);
             if (form.drinkingWaterDictId) {
                 updateDrinkingWaterCountyBottomDict(form)

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

@@ -106,6 +106,9 @@
                     <a-form-item label="纬度(°)" name="latitude">
                         <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
                     </a-form-item>
+                    <a-form-item label="排序" name="sortNum">
+                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+                    </a-form-item>
                     <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
                         <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear />
                     </a-form-item>
@@ -245,7 +248,7 @@ export default {
             // 是否显示编辑弹窗
             showEdit: false,
             // 表单数据
-            form: {},
+            form: {waterSourceType:''},
             loading: false,
             rules: {
                 // year: [{required: true, message: '请输入年份'}],
@@ -288,6 +291,7 @@ export default {
             await this.$refs.form.validate();
             const hide = this.$message.loading('请求中..', 0);
             const form = this.form;
+            form.waterSourceType='1';
             console.log(form);
             if (form.drinkingWaterDictId) {
                 updateDrinkingWaterCountyDict(form)

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

@@ -100,6 +100,9 @@
                     <a-form-item label="纬度(°)" name="latitude">
                         <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
                     </a-form-item>
+                    <a-form-item label="排序" name="sortNum">
+                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+                    </a-form-item>
                     <a-form-item label="服务人口数量（人）" name="numberServingPopulation">
                         <a-input v-model:value="form.numberServingPopulation" placeholder="请输入服务人口数量（人）" allow-clear />
                     </a-form-item>

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

@@ -100,6 +100,9 @@
                     <a-form-item label="纬度(°)" name="latitude">
                         <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
                     </a-form-item>
+                    <a-form-item label="排序" name="sortNum">
+                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+                    </a-form-item>
                     <a-form-item label="服务人口数量（人）" name="numberServingPopulation">
                         <a-input v-model:value="form.numberServingPopulation" placeholder="请输入服务人口数量（人）" allow-clear />
                     </a-form-item>

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

@@ -19,6 +19,19 @@
             {{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">
@@ -48,7 +61,7 @@
         <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)" />
+                  <a-textarea 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">
@@ -133,7 +146,9 @@ export default {
         {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:'index1', slots: {
+          customRender: 'checknumber',
+            },},
         {title:"未测个数",dataIndex:"noCheckNum",},
         {title:"独立分析项目个数",dataIndex:"index3",
          slots: {
@@ -296,7 +311,8 @@ export default {
 
     .edit-input{
         margin-right: 5px;
-        width: 200px;
+        min-width: 200px;
+        width: 100%;
     }
 }
 .editable-cell-text-wrapper{

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

@@ -73,7 +73,8 @@ export default {
       columns:[
         {title:"城市名称",dataIndex:"city",},
         {title:"水源地名称",dataIndex:"sourceWaterName",},
-        {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"检测时间",dataIndex:"monitorTime",},
+        // {title:"期数",dataIndex:"monitorTime",},
         {title:"水源地性质",dataIndex:"waterSourceProperty",},
         {title:"断面水质",align: 'center',children: [
               {title: "本月", dataIndex: "waterQualityCategory"},
@@ -81,7 +82,7 @@ export default {
               {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
             ]
         },
-        {title:"主要污染指标",dataIndex:"",},
+        {title:"主要污染指标",dataIndex:"mainTarget",},
       ],
         
       

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

@@ -111,13 +111,13 @@ export default {
                 this.$message.error(res.data.msg);
                 this.datasource = []
             }else{
-              let newData = []
+              // let newData = []
-              const resData = res.data.data || {}
+              const resData = res.data.data || []
-              for(let i in resData){
+              // for(let i in resData){
-                newData.push(...resData[i])
+              //   newData.push(...resData[i])
-              }
+              // }
-              console.log('newData',newData)
+              // console.log('newData',newData)
-              this.datasource = newData
+              this.datasource = resData
             }
         }).catch(()=>{
                 this.loading = false;

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

@@ -70,18 +70,19 @@ export default {
       // 表格数据接口
       datasource:[],
       selection: [],
-      columns:[
+    columns:[
         {title:"城市名称",dataIndex:"city",},
         {title:"水源地名称",dataIndex:"sourceWaterName",},
-        {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"检测时间",dataIndex:"monitorTime",},
+        // {title:"期数",dataIndex:"monitorTime",},
         {title:"水源地性质",dataIndex:"waterSourceProperty",},
         {title:"断面水质",align: 'center',children: [
               {title: "本月", dataIndex: "waterQualityCategory"},
               {title: "上月", dataIndex: "waterQualityCategoryMom"},
-              {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
+              {title: "去年同期", dataIndex: "waterQualityCategoryAvg"},
             ]
         },
-        {title:"主要污染指标",dataIndex:"",},
+        {title:"主要污染指标",dataIndex:"mainTarget",},
       ],
         
       

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

@@ -105,12 +105,12 @@ export default {
                 this.$message.error(res.data.msg);
                 this.datasource = []
             }else{
-              let newData = []
+              // let newData = []
-              const resData = res.data.data || {}
+              const resData = res.data.data || []
-              for(let i in resData){
+              // for(let i in resData){
-                newData.push(...resData[i])
+              //   newData.push(...resData[i])
-              }
+              // }
-              this.datasource = newData
+              this.datasource = resData
             }
         }).catch(()=>{
                 this.loading = false;

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

@@ -25,7 +25,9 @@
             <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="base9">
+              <water-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base9'"></water-nutritional>
+            </a-tab-pane> -->
           </a-tabs>
     </div>
 </template>
@@ -51,7 +53,8 @@
   import waterQualityCount from "./waterQualityCount.vue";
   // 水质达标情况
   import waterQualityUp from "./waterQualityUp.vue";
-
+  //综合营养指数
+  // import waterNutritional from "./waterNutritional.vue"
 
   export default {
     name: 'city-com',
@@ -61,7 +64,7 @@
       waterQuality,
       waterQualityCount,
       waterQualityUp,
-    //   waterNutritional,
+      // waterNutritional,
       countyWaterWithdrawal,
       countyOverStandard
     },

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

@@ -19,6 +19,19 @@
             {{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">
@@ -48,7 +61,7 @@
         <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)" />
+                  <a-textarea 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">
@@ -134,7 +147,9 @@ export default {
         {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:'index1',slots: {
+          customRender: 'checknumber',
+            } },
         {title:"未测个数",dataIndex:"noCheckNum",},
         {title:"独立分析项目个数",dataIndex:"index3",
          slots: {
@@ -227,6 +242,7 @@ export default {
       this.getPageData()
       
         this.columns[6].filters = []
+        this.columns[6].filterMultiple = false
         if(this.where.waterSourceType ==1 ){
           // 地表水
           this.columns[6].filters =  [

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

@@ -35,7 +35,7 @@ import XLSX from "xlsx";
 import Search from "./../components/countySearch.vue";
 
 import {
-  getWaterCount
+  countyWaterCount as getWaterCount
 } from "@/api/ecology/new-drinking-water";
 
 

src/views/water/drinking-water/statistic/county/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/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:"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/county/waterQuality.vue

@@ -70,10 +70,11 @@ export default {
       // 表格数据接口
       datasource:[],
       selection: [],
-      columns:[
+    columns:[
         {title:"城市名称",dataIndex:"city",},
         {title:"水源地名称",dataIndex:"sourceWaterName",},
-        {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"检测时间",dataIndex:"monitorTime",},
+        // {title:"期数",dataIndex:"monitorTime",},
         {title:"水源地性质",dataIndex:"waterSourceProperty",},
         {title:"断面水质",align: 'center',children: [
               {title: "本月", dataIndex: "waterQualityCategory"},
@@ -81,7 +82,7 @@ export default {
               {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
             ]
         },
-        {title:"主要污染指标",dataIndex:"",},
+        {title:"主要污染指标",dataIndex:"mainTarget",},
       ],
         
       

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

@@ -32,7 +32,7 @@
 import XLSX from "xlsx";
 
 import {
-  waterQualityCountData
+  countyWaterQualityCountData as waterQualityCountData
 } from "@/api/ecology/new-drinking-water";
 
 import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

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

@@ -111,12 +111,12 @@ export default {
                 this.$message.error(res.data.msg);
                 this.datasource = []
             }else{
-              let newData = []
+              // let newData = []
-              const resData = res.data.data || {}
+              const resData = res.data.data || []
-              for(let i in resData){
+              // for(let i in resData){
-                newData.push(...resData[i])
+              //   newData.push(...resData[i])
-              }
+              // }
-              this.datasource = newData
+              this.datasource = resData
             }
         }).catch(()=>{
                 this.loading = false;

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">
@@ -66,141 +79,132 @@
 import {Modal} from "ant-design-vue";
 import WaterBill from "./water-bill.vue";
 import SpecialBill from "./special-bill.vue";
+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();
+            const _this = this;
+            formData.append('file', file);
+            importCityOther(formData).then(res=>{
+                console.log(res)
+                if(!res.data.code){
+                    Modal.success({  title:res.data.msg, });
+                    this.reload()
+                    _this.$refs.water && _this.$refs.water.reload();
+                    _this.$router.replace({
+                            path: "/water/lake/collect/water/" + res.data.data.id
+                        })
+                }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);
-            const formData = new FormData();
+
-            formData.append('file', file);
+            const table = this.waterData;
-                importCityOther(formData).then(res=>{
+            let isHas = false;
-                    console.log(res)
+            if(Array.isArray(table) && table.length>0){
-                    if(!res.data.code){
+                table.forEach(item=>{
-                        Modal.success({  title:res.data.msg, });
+                    if(item.billName==file.name){
-                    }else{
+                        isHas = true
-                        Modal.error({  title:res.data.msg || '文件导入失败', });
                     }
-                     
-                    hide()
-                }).catch(err=>{
-                    console.log(err)
-                    Modal.error({  title:err.data.msg || '文件导入失败', });
-                    hide()
                 })   
+            }
 
-            // let reader = new FileReader();
+            if(isHas){
-            // reader.onload = (e) => {
+                const _this = this;
-            //     try {
+                Modal.confirm({
-            //         let data = new Uint8Array(e.target.result);
+                      title: '有重复数据，确认是否覆盖？',
-            //         let workbook = XLSX.read(data, {
+                      onOk() {
-            //             type: "array",
+                        _this.importFileCity(file,hide)
-            //         });
+                      },
-            //         //0.昼间数据 1.夜间数据 2.其他信息
+                      onCancel() {
-            //         let sheetNames = workbook.SheetNames;
+                        console.log('Cancel');
-            //         // 解析成二维数组
+                        hide()
-            //         let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
+                      },
-            //             header: 1,
+                    });
-            //         });
+            }else{
-
+                this.importFileCity(file,hide)
-            //         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) {
-            //             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);
 
             return false;
         },
-        importFileWuxiang(file) {
-            const hide = this.$message.loading("导入中..", 0);
 
-          const formData = new FormData();
+        importWuXiang(file,hide){
+            const formData = new FormData();
+            const _this = this;
             formData.append('file', file);
             importCppointCity(formData).then(res=>{
                 console.log(res)
                  if(!res.data.code){
                         Modal.success({  title:res.data.msg, });
+                        this.reload()
+                        _this.$refs.water && _this.$refs.water.reload();
+                        _this.$router.replace({
+                                path: "/water/lake/collect/water/" + res.data.data.id
+                            })
                     }else{
                         Modal.error({  title:res.data.msg || '文件导入失败', });
                     }
@@ -210,95 +214,50 @@ export default {
                     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();
+            if(isHas){
-            // reader.onload = (e) => {
+                const _this = this;
-            //     try {
+                Modal.confirm({
-            //         let data = new Uint8Array(e.target.result);
+                      title: '有重复数据，确认是否覆盖？',
-            //         let workbook = XLSX.read(data, {
+                      onOk() {
-            //             type: "array",
+                        _this.importWuXiang(file,hide)
-            //         });
+                      },
-            //         let sheetNames = workbook.SheetNames;
+                      onCancel() {
-            //         // 解析成二维数组
+                        console.log('Cancel');
-            //         let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
+                        hide()
-            //             header: 1,
+                      },
-            //         });
+                    });
-            //         const lakeList = aoa.filter(
+            }else{
-            //             (item) => {
+                this.importWuXiang(file,hide)
-            //                 return item.length >= 24 && item[0] && !item[0].includes("点位名称");
+            }
-            //             }
-            //         );
-            //         // 解析成对象数组
-            //         const billName = file.name;
-            //         const billData = utils.toWuxiangLakeObjData(lakeList);
-            //         if (!billData || billData.length == 0) {
-            //             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);
-
             return false;
         },
-        importFileSpecial(file) {
+
-            const hide = this.$message.loading("导入中..", 0);
+        importSpecialFile(file,hide){
             const formData = new FormData();
+            const _this = this;
             formData.append('file', file);
                 importSpecial(formData).then(res=>{
-                    console.log(res)
                      if(!res.data.code){
                         Modal.success({  title:res.data.msg, });
+                        this.reload()
+                        _this.$refs.special && _this.$refs.special.reload();
+                        _this.$router.replace({
+                                path: "/water/lake/collect/special-water/" + res.data.data.id
+                            })
                     }else{
                         Modal.error({  title:res.data.msg || '文件导入失败', });
                     }
@@ -308,87 +267,42 @@ export default {
                     Modal.error({  title:err.data.msg || '文件导入失败', });
                     hide()
                 })
+        },
 
-            // let reader = new FileReader();
+        importFileSpecial(file) {
-            // reader.onload = (e) => {
+            const hide = this.$message.loading("导入中..", 0);
-            //     try {
+            const table = this.specialData;
-            //         let data = new Uint8Array(e.target.result);
+            let isHas = false;
-            //         let workbook = XLSX.read(data, {
+            if(Array.isArray(table) && table.length>0){
-            //             type: "array",
+                table.forEach(item=>{
-            //         });
+                    if(item.billName==file.name){
-            //         let sheetNames = workbook.SheetNames;
+                        isHas = true
-            //         // 解析成二维数组
+                    }
-            //         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) {
-            //             hide()
-            //             Modal.error({
-            //                 title: "导入失败",
-            //                 content: "找不到数据",
-            //             });
-            //             return;
-            //         }
-            //         const tasks = [];
-            //         if (billData.length > 0) {
-            //             tasks.push(
-            //                 saveSpecialLake({
-            //                     billName: billName,
-            //                     lakeLibrarySpecialList: billData,
-            //                 })
-            //             );
-            //         }
 
-
+            if(isHas){
-            //         // 上传到服务器
+                const _this = this;
-
+                Modal.confirm({
-            //         Promise.all(tasks)
+                      title: '有重复数据，确认是否覆盖？',
-            //             .then((res) => {
+                      onOk() {
-            //                 if (res[0].data.code == 0) {
+                        _this.importSpecialFile(file,hide)
-            //                     Modal.success({
+                      },
-            //                         title: "导入成功",
+                      onCancel() {
-            //                         content: `成功导入${billData.length}条数据`,
+                        console.log('Cancel');
-            //                     });
+                        hide()
-            //                     this.$refs.special && this.$refs.special.reload();
+                      },
-            //                 } else {
+                    });
-            //                     Modal.error({
+            }else{
-            //                         title: "导入失败",
+                this.importSpecialFile(file,hide)
-            //                         content: "数据上传出错",
+            }
-            //                     });
-            //                 }
-
-            //             })
-            //             .catch(() => {
-            //                 Modal.error({
-            //                     title: "导入失败",
-            //                     content: "数据上传出错",
-            //                 });
-            //             })
-            //             .finally(() => {
-            //                 hide();
-            //             });
-            //     } catch (error) {
-            //         hide();
-            //         Modal.error({
-            //             title: "导入失败",
-            //             content: error.message,
-            //         });
-            //     }
-            //     // console.log(billData);
-            // };
-            // reader.readAsArrayBuffer(file);
 
             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.reportTimeStart = null;
-        this.where.reportTimeEnd = null;
+        // this.where.reportTimeEnd = null;
-        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+        // if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
+        //   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.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.reportTimeStart = null;
-        this.where.reportTimeEnd = null;
+        // this.where.reportTimeEnd = null;
-        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
+        // if (this.reportTimeScope && this.reportTimeScope.length == 2) {
-          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
+        //   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.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
-        }
+        // }
         this.$refs.table.reload({
           where: this.where
         });

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

@@ -0,0 +1,984 @@
+<template>
+  <div class="ele-body">
+    <!-- 搜索表单 -->
+    <a-form
+      :model="queryParams"
+      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
+    >
+      <a-row>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="年度:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.yearList"
+              :options="yearOptions"
+              placeholder="请选择年度"
+              @change="handleYearChange"
+              allowClear
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="月份:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.monthList"
+              :options="monthOptions"
+              placeholder="请选择月份"
+              @change="handleMonthChange"
+              allowClear
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="湖库类型:">
+            <a-select
+              v-model:value="queryParams.lakeType"
+              @change="handleLakeTypeChange"
+              allowClear
+              placeholder="请选择类型"
+            >
+              <a-select-option
+                v-for="item in regionLevelOptions"
+                :key="item.value"
+                >{{ item.label }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="断面名称:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.placeList"
+              :options="sectionOptions"
+              placeholder="请选择断面名称"
+              @change="handleSectionChange"
+              allowClear
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="监测指标:">
+            <a-select
+              mode="multiple"
+              v-model:value="queryParams.monitorIndexList"
+              :options="indicatorOptions"
+              placeholder="请选择监测指标"
+              @change="handleIndexChange"
+              allowClear
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="横坐标:">
+            <a-select
+              v-model:value="queryParams.xco"
+              :options="xOptions"
+              allowClear
+              placeholder="请选择横坐标"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="纵坐标:">
+            <a-select
+              v-model:value="queryParams.yco"
+              :options="yOptions"
+              allowClear
+              placeholder="请选择纵坐标"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :sm="24" :xs="24" style="text-align: center">
+          <a-space>
+            <a-button type="primary" class="mb-20" @click="drawTrend"
+              >开始统计</a-button
+            >
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <a-card :bordered="false">
+      <div id="chartColumn" style="width: 100%; height: 700px;"><div class="empty">暂无数据</div></div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+let trendChart;
+import { getSpecialLakeDropdown,getLakeDropdown,lakeLibrary } from "@/api/ecology/new-lake";
+
+export default {
+  components: {},
+  data() {
+    return {
+      queryParams: {
+        yearList: [],
+        monthList: [],
+        lakeType:'',
+        placeList: [],
+        xco: "Xco_1", // 横坐标
+        yco:"",
+        monitorIndexList: [], // 监测指标
+      },
+      trendData: [],
+      regionLevelOptions: [
+        { label: "城市内湖", value: "city" },
+        { label: "专项湖库", value: "special" },
+      ],
+      placeOptions: [],
+      sectionOptions: [],
+      yearOptions: [],
+      indicatorOptions: [],
+
+      innerSection: [], // 内湖断面
+      specialSection: [], // 专湖断面
+      innerIndex: [
+        { label: "全选", value: "全选", limit:"0",color:"#209f53" },
+        { label: "pH值", value: "ph", limit:"9",color:"#209f53" },
+        { label: "透明度（cm）", value: "transparency", limit:"0.01",color:"#209f53" },
+        // { label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation", limit:"6",color:"#20749f" },
+        { label: "溶解氧", value: "dissolvedOxygen", limit:"6",color:"#20749f" },
+        { label: "高锰酸盐指数", value: "permanganateIndex", limit:"4",color:"#7bbe3a" },
+        { label: "五日生化需氧量", value: "fiveDayBod", limit:"3",color:"#ad3abe" },
+        { label: "总氮 ", value: "totalNitrogen", limit:"0.5",color:"#a4a3f1" },
+        { label: "氨氮", value: "ammonia", limit:"0.5",color:"#3d3abe" },
+        { label: "挥发酚", value: "volatilePhenol", limit:"0.002",color:"#f1eca3" },
+        { label: "砷(mg/L)", value: "as", limit:"0.05",color:"#bbb443" },
+        { label: "汞 (mg/L)", value: "hg", limit:"0.00005",color:"#62bb43" },
+        { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#3cd560" },
+        { label: "铅 (mg/L)", value: "pb", limit:"0.01",color:"#91b516" },
+        { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#4ab516" },
+        { label: "总磷", value: "totalPhosphorus", limit:"0.025",color:"#62255a" },
+        { label: "石油类", value: "petro", limit:"0.05",color:"#8a4c82" },
+        { label: "粪大肠菌群（MPN/L）", value: "fecalColiforms", limit:"2000",color:"#63258b" },
+        { label: "化学需氧量", value: "cod", limit:"15",color:"#25388b" },
+        // { label: "叶绿素a (mg/m3)", value: "chlA", limit:"0",color:"#209f53" },
+        { label: "阴离子表面活性剂(mg/L)", value: "anSaa", limit:"0.2",color:"#258b80" },
+        { label: "硫化物(mg/L) ", value: "s", limit:"0.1",color:"#27aa49" },
+        // { label: "氧化还原电位（mV）", value: "oxidationReductionPotential", limit:"1",color:"#209f53" },
+      ], // 内湖监测指标
+      specialIndex: [
+         { label: "全选", value: "全选", limit:"0",color:"#209f53" },
+        // { label: "浊度(NTU)", value: "turbidity", limit:"1",color:"#209f53" },
+        { label: "水温(℃)", value: "wTemp", limit:"2",color:"#209f53" },
+        // { label: "水位(m)", value: "wd", limit:"1",color:"#209f53" },
+        { label: "pH值", value: "ph", limit:"9",color:"#209f53" },
+        // { label: "电导率(ms/m)", value: "wCond", limit:"1",color:"#209f53" },
+        { label: "透明度（cm）", value: "transp", limit:"0.01",color:"#209f53" },
+        { label: "溶解氧 (mg/L)", value: "dissolvedOxygen", limit:"6",color:"#209f53" },
+        { label: "高锰酸盐指数 (mg/L)", value: "codmn", limit:"4",color:"#209f53" },
+        { label: "五日生化需氧量", value: "bod5", limit:"3",color:"#209f53" },
+        { label: "氨氮 (mg/L)", value: "nh4N", limit:"0.5",color:"#209f53" },
+        { label: "石油类 (mg/L)", value: "oils", limit:"0.05",color:"#209f53" },
+        { label: "总氮 (mg/L)", value: "nTotal", limit:"0.5",color:"#209f53" },
+        { label: "总磷 (mg/L)", value: "pTotal", limit:"0.025",color:"#209f53" },
+        // { label: "叶绿素 (mg/L)", value: "chlA", limit:"0",color:"#209f53" },
+        { label: "挥发酚 (mg/L)", value: "vPhen", limit:"0.002",color:"#209f53" },
+        { label: "汞 (mg/L)", value: "wHg", limit:"0.00005",color:"#209f53" },
+        { label: "铅 (mg/L)", value: "wPb", limit:"0.01",color:"#209f53" },
+        { label: "化学需氧量 (mg/L)", value: "codcr", limit:"15",color:"#209f53" },
+        { label: "铜 (mg/L)", value: "wCu", limit:"1",color:"#209f53" },
+        { label: "锌 (mg/L)", value: "wZn", limit:"1",color:"#209f53" },
+        { label: "氟化物 (mg/L)", value: "f", limit:"1",color:"#209f53" },
+        { label: "硒 (mg/L)", value: "se", limit:"0.01",color:"#209f53" },
+        { label: "砷 (mg/L)", value: "as", limit:"0.05",color:"#209f53" },
+        { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#209f53" },
+        { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#209f53" },
+        { label: "氰化物 (mg/L)", value: "cnTotal", limit:"0.05",color:"#209f53" },
+        { label: "阴离子表面活性剂 (mg/L)", value: "anSaa", limit:"0.2",color:"#209f53" },
+        { label: "硫化物 (mg/L)", value: "s", limit:"1",color:"#209f53" },
+        { label: "粪大肠菌群 (mg/L)", value: "coloOrg", limit:"1",color:"#209f53" },
+        { label: "硫酸盐 (mg/L)", value: "so4", limit:"1",color:"#209f53" },
+        { label: "氯化物 (mg/L)", value: "cl", limit:"0.1",color:"#209f53" },
+        { label: "硝酸盐 (mg/L)", value: "no3N", limit:"10",color:"#209f53" },
+        { label: "铁 (mg/L)", value: "wFe", limit:"0.3",color:"#209f53" },
+        { label: "锰 (mg/L)", value: "wMn", limit:"0.1",color:"#209f53" },
+      ], //专湖监测指标
+
+      monthOptions: [
+        // {
+        //   label: "全部",
+        //   value: "全部",
+        // },
+      ],
+      xOptions: [
+        {
+          label: "年度",
+          value: "Xco_1",
+        },
+        {
+          label: "年月",
+          value: "Xco_2",
+        },
+        {
+          label: "区域/测点名称",
+          value: "Xco_3",
+        },
+      ],
+      yOptions: [
+        {
+          label: "浓度",
+          value: "Yco_1",
+        },
+        {
+          label: "综合营养指数（无量纲）",
+          value: "Yco_2",
+        },
+        {
+          label: "水质类别",
+          value: "Yco_3",
+        },
+      ],
+
+      // 图表生成数据
+      xAxis: {},
+      series: {},
+      yAxisMax:1, //Y轴最大值
+    };
+  },
+  mounted() {
+     this.loadOptionData();
+
+     Array.prototype.remove = function(val) { 
+        var index = this.indexOf(val); 
+        if (index > -1) { 
+        this.splice(index, 1); 
+        } 
+      };
+  },
+  methods: {
+    // 全选
+    //年份
+    handleYearChange(e){
+      if(e.indexOf('全选')>-1){
+        this.queryParams.yearList = [...this.yearOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.yearList.remove('全选');
+      }
+    },
+    // 月份
+    handleMonthChange(e){
+    if(e.indexOf('全选')>-1){
+        this.queryParams.monthList = [...this.monthOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.monthList.remove('全选');
+      }
+    },
+    // 断面
+    handleSectionChange(e){
+    if(e.indexOf('全选')>-1){
+        this.queryParams.placeList = [...this.sectionOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.placeList.remove('全选');
+      }
+    },
+    // 指标
+    handleIndexChange(e){
+    if(e.indexOf('全选')>-1){
+        this.queryParams.monitorIndexList = [...this.indicatorOptions.map(item=>(
+          item.value
+        ))]
+        this.queryParams.monitorIndexList.remove('全选');
+      }
+    },
+
+    // 下拉列表
+    loadOptionData() {
+      let yy = new Date().getFullYear();
+      this.yearOptions.push({
+          label: '全选',
+          value: '全选',
+        })
+      this.monthOptions.push({
+          label: '全选',
+          value: '全选',
+        })
+      for (let i = 1; i <= 12; i++) {
+        this.yearOptions.push({
+          label: yy - i,
+          value: yy - i,
+        });
+        this.monthOptions.push({ label: i + "月", value: i<10?('0'+i):i });
+      }
+      // 内湖
+      this.getInnerList();
+      // 专湖
+      this.getSpecialList();
+    },
+
+    handleLakeTypeChange(value) {
+      this.queryParams.placeList = [];
+      this.queryParams.monitorIndexList = [];
+      if (value == "city") {
+        // 内湖
+        this.sectionOptions = [...this.innerSection];
+        this.indicatorOptions = [...this.innerIndex];
+      } else if (value == "special") {
+        // 专湖
+        this.sectionOptions = [...this.specialSection];
+        this.indicatorOptions = [...this.specialIndex];
+      }
+    },
+    // 趋势图
+    drawTrend() {
+      
+      if(this.queryParams.yco == 'Yco_3' && this.queryParams.monitorIndexList.length>0){
+        this.$message.error('纵坐标为水质类别时，请勿选择监测指标！');
+        return;
+      }
+
+      if(this.queryParams.yco == 'Yco_1' && this.queryParams.monitorIndexList.length>1 && this.queryParams.placeList.length>1){
+        this.$message.error('纵坐标为浓度时，请勿选择监测指标和断面名称不能同时为多选！');
+        return;
+      }
+
+      lakeLibrary(this.queryParams).then((res) => {
+        console.log("res", res);
+        if (res.data.code == 0) {
+          this.trendData = res.data.data || [];
+          this.initChart();
+        } else {
+          console.log("res.data.msg", res.data.msg);
+          this.$message.error(res.data.msg);
+        }
+      });
+    },
+
+    // 获取内湖断面
+    getInnerList() {
+      getLakeDropdown().then((res) => {
+        this.innerSection = this.buildSectionSelect(res);
+      });
+    },
+    // 获取专湖断面
+    getSpecialList() {
+      getSpecialLakeDropdown().then((res) => {
+        this.specialSection = this.buildSectionSelect(res);
+      });
+    },
+    // 生成断面数据
+    buildSectionSelect(res) {
+      let palceOptions = {};
+      let newPlace = [];
+      res.data.data.forEach((item) => {
+        palceOptions[item.sectionName] = item.sectionName;
+      });
+        newPlace.push({
+          label: '全选',
+          value: '全选',
+        })
+      for (let i in palceOptions) {
+        newPlace.push({
+          label: palceOptions[i],
+          value: palceOptions[i],
+        });
+      }
+      return [...newPlace];
+    },
+
+    initChart() {
+      this.yAxisMax = 1;
+
+      if (trendChart != null && trendChart != "" && trendChart != undefined) {
+        trendChart.dispose(); // 销毁
+      }
+      if(Array.isArray(this.trendData) && this.trendData.length==0){
+        document.getElementById("chartColumn").innerHTML = '<div class="empty">暂无数据</div>'
+        return;
+      }
+      trendChart = echarts.init(document.getElementById("chartColumn"));
+      let text = '';
+
+        if(this.queryParams.placeList.length==1){
+            let code = ''
+            if(this.queryParams.yco == 'Yco_1'){
+                code = '监测指标浓度'
+            }
+            if(this.queryParams.yco == 'Yco_2'){
+                code = '综合营养指数'
+            }
+            if(this.queryParams.yco == 'Yco_3'){
+                code = '水质类别'
+            }
+
+            text = this.queryParams.placeList[0] + this.queryParams.yearList.join('、') + '年度' + code
+        }
+
+      // 生成x轴
+      this.buildxAxis();
+      // 生成series
+      this.buildSeries();
+
+      let option = {
+          title:{
+              text:text,
+              x:'center',
+              textStyle: {
+                            color: '#3A7BD5',
+                            fontSize: 16
+                        }
+          },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+          formatter: (this.queryParams.yco == 'Yco_3') && ((params)=>{
+            if(this.queryParams.yco == 'Yco_3'){
+              var html = '<div style="font-weight:bold">水质类别</div>';
+              for(var i=0;i<params.length;i++){
+                console.log('params',params)
+                html += "<div style='line-height:25px'><span style='display: inline-block;width: 10px; height: 10px;margin-right:5px; border-radius: 10px;background:"+params[i].color+"'></span>类别"+ params[i].seriesName +"："+params[i].data+"%" + "</div>";
+              }
+              return html
+            }
+        })
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              show: true,
+            },
+          },
+        },
+        legend: {
+          show: true,
+          x: "center", //可设定图例在左、右、居中
+          y: "bottom", //可设定图例在上、下、居中
+          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+          // formatter: function (name) {
+          //     return name;
+          // }
+        },
+        xAxis: this.xAxis,
+        yAxis: {
+          type: "value",
+          max: this.yAxisMax,
+          name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : '',
+          axisLabel: {
+                show: true,
+                interval: 'auto',
+                formatter: this.queryParams.yco=='Yco_3' && '{value} %'
+            },
+        },
+
+        series: this.series,
+      };
+
+      trendChart.setOption(option);
+    },
+
+    // 生成Y轴最大值
+    buildYMax(value){
+        if(this.yAxisMax<value){
+            this.yAxisMax = Math.ceil(value)
+        }
+    },
+
+    // 生成x轴标签
+    buildxAxis() {
+      let xAxis = [];
+      // x坐标是断面
+      if (this.queryParams.xco == "Xco_3") {
+        this.trendData.forEach((item) => {
+            if(xAxis.indexOf(item.place)<0){
+                xAxis.push(item.place);
+            }
+        });
+      }
+      // x左边为年度、年月,只选一个断面
+      // && ( Array.isArray(this.queryParams.placeList) && this.queryParams.placeList.length==1)
+      if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
+        this.trendData.forEach((item) => {
+          let x = this.buildYearMonth(item);
+          if (xAxis.indexOf(x) < 0) xAxis.push(x);
+        });
+      }
+      let rotate = 0;
+      if (xAxis.join("").length > 50) {
+        rotate = 10;
+      }
+      console.log('xAxis',xAxis)
+      this.xAxis = {
+        type: "category",
+        axisLabel: {
+          interval: 0,
+          rotate: rotate,
+        },
+        // boundaryGap: false, // 第一个数据点距离y轴距离
+        data: xAxis,
+      };
+    },
+
+    // 生成营养度三根线
+    buildLine() {
+      let lines = [];
+
+      let xMax = this.xAxis.data.length;
+      // 三根营养线,在纵坐标选择综合营养指数时显示
+      if (this.queryParams.yco == "Yco_2"){
+        this.buildYMax(72);
+
+        if(xMax-3<1){
+          lines = [
+             {
+                name: "中度富营养↓",
+                yAxis: 70,
+                label: {
+                  color: "red",
+                  borderColor: "red",
+                  formatter:'中度富营养↓'
+                },
+                lineStyle: {
+                  color: "red",
+                },
+              },
+              {
+                name: "轻度富营养↓",
+                yAxis: 60,
+                label: {
+                  color: "#fbfb00",
+                  borderColor: "#fbfb00",
+                  formatter:'轻度富营养↓'
+                },
+                lineStyle: {
+                  color: "#fbfb00",
+                },
+              },
+              {
+                name: "中营养↓",
+                yAxis: 50,
+                label: {
+                  color: "#99ff00",
+                  borderColor: "#99ff00",
+                  formatter:'中营养↓'
+                },
+                lineStyle: {
+                  color: "#99ff00",
+                },
+              },
+          ]
+            
+        }else{
+          lines = [
+            [
+              {
+                name: "中度富营养↓",
+                yAxis: 70,
+                xAxis: 0,
+                label: {
+                  color: "red",
+                  borderColor: "red",
+                },
+                lineStyle: {
+                  color: "red",
+                },
+              },
+              {
+                yAxis: 70,
+                xAxis: xMax - 3,
+              },
+            ],
+            [
+              {
+                name: "轻度富营养↓",
+                yAxis: 60,
+                xAxis: 0,
+                label: {
+                  color: "#fbfb00",
+                  borderColor: "#fbfb00",
+                },
+                lineStyle: {
+                  color: "#fbfb00",
+                },
+              },
+              {
+                yAxis: 60,
+                xAxis: xMax - 2,
+              },
+            ],
+            [
+              {
+                name: "中营养↓",
+                yAxis: 50,
+                xAxis: 0,
+                label: {
+                  color: "#99ff00",
+                  borderColor: "#99ff00",
+                },
+                lineStyle: {
+                  color: "#99ff00",
+                },
+              },
+              {
+                yAxis: 50,
+                xAxis: xMax - 1,
+              },
+            ]];
+        }
+      }
+ 
+  // 在纵坐标选择浓度，那显示指标均线
+    if(this.queryParams.yco == "Yco_1"){
+      let singleLine = []  
+        this.queryParams.monitorIndexList.forEach(item=>{
+                this.indicatorOptions.forEach(single=>{
+                    if(single.value == item){
+                        this.buildYMax(single.limit);
+
+
+                          const name = single.label+'Ⅱ类标准'
+                          singleLine.push(
+                            {
+                              name:name,
+                              type:'line',
+                              symbol:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
+                              markLine:{
+                                  data:[
+                                      {
+                                          name:name,
+                                          yAxis: single.limit,
+                                      }
+                                  ],
+                                lineStyle: {
+                                    type: "dashed", // dotted,solid,dashed
+                                    // color: single.color,
+                                    width: 2,
+                                    opacity: 0.9,
+                                },
+                                label: {
+                                    // color: single.color,
+                                    formatter: single.label+"Ⅱ类标准",
+                                    position:'insideEndBottom'
+                                },
+                              }
+                            }
+                          )
+
+                        // singleLine.push(
+                        //     {
+                        //         name: item,
+                        //         yAxis: single.limit,
+                        //         lineStyle: {
+                        //             type: "dashed", // dotted,solid,dashed
+                        //             color: single.color,
+                        //             width: 2,
+                        //             opacity: 0.9,
+                        //         },
+                        //         label: {
+                        //             color: single.color,
+                        //             formatter: single.label+"Ⅱ类标准",
+                        //         },
+                        //         }
+                        // )
+                    }
+                })
+        })
+        lines = [...singleLine]
+      }
+
+
+      return lines;
+    },
+    // 生成年月标识
+    buildYearMonth(obj){
+      if(this.queryParams.xco == "Xco_1"){
+        return  obj.year;
+      }else{
+        return  obj.year + (obj.month ? ('-'+obj.month) : "");
+      } 
+    },
+
+
+    // 生成图表数据
+    buildSeries() {
+      let series = [];
+      
+
+      let charType = 'bar'
+        // 如果Y坐标选择了浓度，那就是折线图，选择综合指标是柱状图，选择水质类别那就是堆叠
+        if(this.queryParams.yco == 'Yco_1'){
+            charType = 'line'
+        }
+    //   // 如果选择了监测指标，那就是折线图
+    //   if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
+    //     charType = 'line'
+    //   }
+
+    // X轴坐标
+     let seriesItemName = this.xAxis.data; 
+
+      // x坐标是断面
+      if (this.queryParams.xco == "Xco_3") {
+       
+        // 如果是断面，则用年月来分组数据
+        // let seriesItemName = this.xAxis.data; 
+        let group = [];
+
+
+        // 如果是水质类别，那么就按类别分组
+         if(this.queryParams.yco=='Yco_3'){
+             this.trendData.forEach((item) => {
+            if (group.indexOf(item.value) < 0) {
+                group.push(item.value);
+            }
+            });
+          }else{
+            this.trendData.forEach((item) => {
+              if (group.indexOf(this.buildYearMonth(item)) < 0) {
+                  group.push(this.buildYearMonth(item));
+              }
+            });
+          }
+
+
+        group.forEach(item=>{
+            let itemData = [];
+            seriesItemName.forEach((data,index)=>{
+                itemData[index] = 0
+                this.trendData.forEach((single) => {
+                    // 水质类别
+                    if(this.queryParams.yco=='Yco_3'){
+                      if(item==single.value && data == single.place){
+                        itemData[index] += 1;
+                      }
+                    }else{
+                      if (data == single.place && item == this.buildYearMonth(single)) {
+                        itemData[index] = single.value;
+                        this.buildYMax(single.value);
+                      }
+                    }
+                });
+            })
+
+        let single = {
+            name: item,
+            type: charType,
+            label: {
+              // 图形上的文本标签
+              show: true,
+              position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
+              formatter: (params)=>{
+                if(this.queryParams.yco=='Yco_3'){
+                 if(params.data){
+                  return params.data+"%"
+                 }else{
+                   return ''
+                 }
+                }
+              }
+            },
+            data: [...itemData],
+          };
+           // 纵坐标 水质类别，那就堆叠
+          if(this.queryParams.yco=='Yco_3'){
+            single.stack = '水质类别'
+            this.buildYMax(100);
+          }
+
+          series.push(single);
+        })
+      }
+
+      // 一个断面多个指标
+    const singleType = this.queryParams.placeList.length==1 && this.queryParams.monitorIndexList.length>1;
+
+    if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
+        // let seriesItemName = this.xAxis.data; 
+        let group = [];
+    
+        // 如果是水质类别，那么就按类别分组
+         if(this.queryParams.yco=='Yco_3'){
+             this.trendData.forEach((item) => {
+            if (group.indexOf(item.value) < 0) {
+                group.push(item.value);
+            }
+            });
+          }else{
+            if(singleType){
+                this.trendData.forEach((item) => {
+                if (group.indexOf(item.indexName) < 0) {
+                    group.push(item.indexName);
+                }
+                });
+            }else{
+                this.trendData.forEach((item) => {
+                if (group.indexOf(item.place) < 0) {
+                    group.push(item.place);
+                }
+                });
+            }
+          }
+
+        /**
+         * 生成数据图例
+         {
+            name: "一组",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar", // line
+          },
+          {
+            name: "二组",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar", // line
+          },
+        * 
+        */
+
+
+        group.forEach(item=>{
+            let itemData = [];
+            seriesItemName.forEach((data,index)=>{
+                itemData[index] = 0
+                this.trendData.forEach((single) => {
+                    // 水质类别
+                    if(this.queryParams.yco=='Yco_3'){
+                      if(item==single.value && data == this.buildYearMonth(single)){
+                        itemData[index] += 1;
+                      }
+                    }else{
+                      let name = ''
+                      if(singleType){
+                          name = single.indexName
+                      }else{
+                          name = single.place
+                      }
+
+                      if (data == this.buildYearMonth(single) && item == name) {
+                          itemData[index] = single.value;
+                          this.buildYMax(single.value);
+                      }
+                    }
+                    
+                });
+            })
+
+        let single = {
+            name: item,
+            type: charType,
+            label: {
+              // 图形上的文本标签
+              show: true,
+              position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
+              formatter: (params)=>{
+                if(this.queryParams.yco=='Yco_3'){
+                 if(params.data){
+                  return params.data+"%"
+                 }else{
+                   return ''
+                 }
+                }
+              }
+            },
+            barGap: this.queryParams.yco=='Yco_3' && '-100%',
+            data: [...itemData],
+          };
+           // 纵坐标 水质类别，那就堆叠
+        if(this.queryParams.yco=='Yco_3'){
+          single.stack = "Yco_3"
+          this.buildYMax(100);
+        }
+
+          series.push(single);
+        })
+    }
+
+      if(this.queryParams.yco=='Yco_1'){
+        series = [...series,...this.buildLine()]
+      }else{
+            series[0].markLine = {
+                lineStyle: {
+                  normal: {
+                    type: "line",
+                    width: 3,
+                    opacity: 0.9,
+                  },
+                },
+                label: {
+                  padding: [1, 10],
+                  lineHeight: 30,
+                  show: true,
+                  position: this.queryParams.yco=='Yco_1' ? "insideEndBottom" : "end",
+                  borderType: "dashed",
+                  borderWidth: 1,
+                },
+                data: [...this.buildLine()],
+                symbol: ["none", "none"],
+              };
+      }
+
+        // 对指标的名字转成中文
+        if(singleType){
+            series = series.map(item=>{
+                let name = item.name;
+                this.indicatorOptions.forEach(single=>{
+                    if(single.value == item.name){
+                      name = single.label
+                    }
+                })
+                return {
+                    ...item,
+                    name:name
+                }
+            })
+        }
+
+      console.log("series", series);
+      //进行堆叠图百分比计算
+      if(this.queryParams.yco=='Yco_3'){
+        // 所有分组的总值
+        let allGroupCount = [];
+        seriesItemName.forEach((item,index)=>{
+          let count = 0;
+          series.forEach(group=>{
+            count += group.data[index]
+          })
+          allGroupCount.push(count)
+        })
+
+        // 通过总值计算出百分比
+        seriesItemName.forEach((item,index)=>{
+          series = series.map(group=>{
+            group.data[index] = (Math.round(group.data[index] / allGroupCount[index] * 10000) / 100.00)
+            return {
+              ...group,
+            }
+          })
+
+        })
+      }
+      this.series = series;
+    },
+
+  },
+};
+</script>
+<style scoped lang="less">
+.mb-20 {
+  margin-bottom: 20px;
+}
+.empty{
+  height: 100%;
+  line-height: 400px;
+  color: #ccc;
+  font-size: 16px;
+  text-align: center;
+}
+
+</style>

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

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
              <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.stationName" :value="item.stationName">
@@ -13,17 +13,21 @@
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.time" :disabled-date="disabledDate" />
           </a-form-item>
-          <a-form-item label="类型:" style="width:100px">
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="类型:">
             <a-select v-model:value="where.type" allowClear showSearch>
               <a-select-option value="0">上半月</a-select-option>
               <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 class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -41,7 +45,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -63,6 +66,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -292,7 +307,23 @@
         rules: {},
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.time){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.time){
+        this.reload()
+      }
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -306,6 +337,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+
         this.loading = true;
         listWaterSiteMonthTotal(this.where).then((res) => {
           this.datasource = {};
@@ -381,4 +415,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

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

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
            <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.stationName" :value="item.stationName">
@@ -13,6 +13,8 @@
               </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-month-picker
               v-model:value="where.time"
@@ -20,13 +22,16 @@
               valueFormat="YYYY-MM"
             />
           </a-form-item>
-          <a-form-item label="类型:" style="width:100px"> 
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="类型:"> 
             <a-select v-model:value="where.type" allowClear showSearch>
               <a-select-option value="0">上半月</a-select-option>
               <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 class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -48,7 +53,6 @@
         :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
       </ele-pro-table>
     </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -69,6 +73,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -171,6 +187,17 @@
         rules: {},
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.time){
+          this.reload()
+        }
+      }
+    },
     created() {
       listInfo().then((res) => {
         if (res.data.code == 0) {
@@ -185,6 +212,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+        
         this.loading = true;
         listWaterSiteYoy(this.where).then((res) => {
           this.momData = [];
@@ -315,4 +345,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/river/statistic/avg-index.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,18 +13,24 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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.importWaterBody" placeholder="请选择水系名称" allowClear showSearch>
               <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
               </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 allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
               <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
@@ -32,12 +38,17 @@
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="结束时间:">
             <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" :disabled-date="disabledDate" />
           </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>
@@ -55,7 +66,6 @@
         @done="(d) => (data = d.data)">
       </ele-pro-table>
     </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -74,6 +84,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -131,7 +153,24 @@
         targetInfoList:[],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -162,6 +201,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+         this.$emit("search", this.where);
+
         this.loading=true;
         listAvgCompositeIndex(this.where).then((res) => {
           this.momData = [];
@@ -239,4 +281,8 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>
+

src/views/water/river/statistic/avg-standard.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,18 +13,24 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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.importWaterBody" placeholder="请选择水系名称" allowClear showSearch>
               <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
               </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 allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
               <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
@@ -32,13 +38,17 @@
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="结束时间:">
             <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" :disabled-date="disabledDate" />
           </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>
@@ -56,7 +66,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -74,6 +83,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -133,7 +154,25 @@
         targetInfoList:[],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        console.log('change',val)
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+        this.reload()
+      }
+
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -164,6 +203,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+         this.$emit("search", this.where);
+
         this.loading = true;
         listAvgWaterQualitySandard(this.where).then((res) => {
           console.log(res.data.data);
@@ -208,4 +250,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/river/statistic/base-index.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,18 +13,24 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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.importWaterBody" placeholder="请选择水系名称" allowClear showSearch>
               <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
               </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 allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
               <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
@@ -32,12 +38,17 @@
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="结束时间:">
             <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" :disabled-date="disabledDate" />
           </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>
@@ -55,7 +66,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -74,6 +84,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -136,7 +158,24 @@
         targetInfoList: [],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+        this.reload()
+      }
+
       listInfo().then((res) => {
           if (res.data.code == 0) {
             console.log(res.data.data)
@@ -167,6 +206,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+         this.$emit("search", this.where);
+
         this.loading = true;
         listMonthCompositeIndex(this.where).then((res) => {
           console.log(res.data.data);
@@ -245,4 +287,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/river/statistic/base-standard.vue

@@ -1,11 +1,11 @@
 <!-- 当月水质目标-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,18 +13,24 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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.importWaterBody" placeholder="请选择水系名称"  allowClear showSearch>
               <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
               </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 allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
               <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
@@ -32,13 +38,17 @@
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="结束时间:">
             <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" :disabled-date="disabledDate" />
           </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>
@@ -56,7 +66,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -74,6 +83,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -138,7 +159,24 @@
         targetInfoList:[],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+        this.reload()
+      }
+
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -169,6 +207,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+         this.$emit("search", this.where);
+
         this.loading = true;
         listMonthWaterQualitySandard(this.where).then((res) => {
           console.log(res.data.data);
@@ -210,4 +251,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/river/statistic/base.vue

@@ -1,18 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
-      <a-form :model="where" layout="inline">
+      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
-
+        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
-        <a-form-item label="开始时间:">
+        <a-row>
-          <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" valueFormat="YYYY-MM"
+<a-col :lg="6" :md="12" :sm="24" :xs="24">
-            placeholder="开始时间" />
-        </a-form-item>
-        <a-form-item label="结束时间:">
-          <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" valueFormat="YYYY-MM"
-            placeholder="结束时间" />
-        </a-form-item>
         <a-form-item label="断面名称">
           <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
             <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -20,18 +13,24 @@
             </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.riverLakeLibrary" allowClear showSearch>
             <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
             </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.importWaterBody" allowClear showSearch>
             <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
             </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 allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
             <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
@@ -39,19 +38,34 @@
             </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-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" valueFormat="YYYY-MM"
+            placeholder="开始时间" />
+        </a-form-item>
+</a-col>
+<a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <a-form-item label="结束时间:">
+          <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" valueFormat="YYYY-MM"
+            placeholder="结束时间" />
+        </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-button @click="exportFile">导出Excel</a-button>
         </a-space>
+  </a-form-item>
+</a-col>
+        </a-row>
       </a-form>
       <!-- 表格 -->
       <ele-pro-table ref="table" row-key="surfaceWaterSectionId" :datasource="datasource" :columns="columns"
         :where="where" :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
       </ele-pro-table>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -79,6 +93,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       const {
         billId
@@ -243,6 +269,17 @@
         datasource: {},
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     mounted() {
       const {
         billId
@@ -288,6 +325,10 @@
       loadOptionData() {},
       /* 刷新表格 */
       reload() {
+
+        // 上传搜索条件给父级
+         this.$emit("search", this.where);
+
         console.log(this.where.targetName);
         if (this.where.targetName) {
           if(this.flg){
@@ -506,4 +547,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/river/statistic/index.vue

@@ -3,49 +3,49 @@
     <a-card :bordered="false">
       <a-tabs v-model:activeKey="activeKey">
         <a-tab-pane tab="江河信息" key="cca">
-          <a-tabs v-model:active="active">
+          <a-tabs v-model:activeKey="active">
             <a-tab-pane key="base" tab="数据总览">
-              <base-statistic></base-statistic>
+              <base-statistic :visiable="active=='base'" :searchForm="searchFormRiver" @search="changeSearchRiver"></base-statistic>
             </a-tab-pane>
             <a-tab-pane tab="单月水质达标" key="base1">
-              <month-standard ></month-standard>
+              <month-standard :visiable="active=='base1'" :searchForm="searchFormRiver" @search="changeSearchRiver"></month-standard>
             </a-tab-pane>
             <a-tab-pane tab="平均水质达标" key="base2">
-              <avg-standard></avg-standard>
+              <avg-standard :visiable="active=='base2'" :searchForm="searchFormRiver" @search="changeSearchRiver"></avg-standard>
             </a-tab-pane>
             <a-tab-pane tab="单月综合指数" key="base3">
-              <month-index ></month-index>
+              <month-index :visiable="active=='base3'" :searchForm="searchFormRiver" @search="changeSearchRiver"></month-index>
             </a-tab-pane>
             <a-tab-pane tab="平均水质指数" key="base4">
-              <avg-index ></avg-index>
+              <avg-index :visiable="active=='base4'" :searchForm="searchFormRiver" @search="changeSearchRiver"></avg-index>
             </a-tab-pane>
           </a-tabs>
         </a-tab-pane>
         <a-tab-pane tab="水功能区" key="ccb">
-          <a-tabs v-model:activeWater="activeWater">
+          <a-tabs v-model:activeKey="activeWater">
             <a-tab-pane tab="自治区级水功能区" key="water1">
-              <a-tabs v-model:autoWater="autoWater">
+              <a-tabs v-model:activeKey="autoWater">
                 <a-tab-pane tab="自治区级水功能区统计" key="auto1">
-                  <auto-statis></auto-statis>
+                  <auto-statis :visiable="autoWater=='auto1'" :searchForm="searchFormAutoWater" @search="changeSearchAutoWater"></auto-statis>
                 </a-tab-pane>
                 <a-tab-pane tab="自治区水功能区达标率" key="auto2">
-                  <auto-standard></auto-standard>
+                  <auto-standard :visiable="autoWater=='auto2'" :searchForm="searchFormAutoWater" @search="changeSearchAutoWater"></auto-standard>
                 </a-tab-pane>
                 <a-tab-pane tab="自治区水功能区同比/环比" key="auto3">
-                  <auto-yoy></auto-yoy>
+                  <auto-yoy :visiable="autoWater=='auto3'" :searchForm="searchFormAutoWater" @search="changeSearchAutoWater"></auto-yoy>
                 </a-tab-pane>
                 </a-tabs>
             </a-tab-pane>
             <a-tab-pane tab="国家级水功能区" key="water2">
-              <a-tabs v-model:nationalWater="nationalWater">
+              <a-tabs v-model:activeKey="nationalWater">
                 <a-tab-pane tab="国家级水功能区统计" key="national">
-                  <national-statis></national-statis>
+                  <national-statis :visiable="nationalWater=='national'" :searchForm="searchFormNationalWater" @search="changeSearchNationalWater"></national-statis>
                 </a-tab-pane>
                 <a-tab-pane tab="国家级水功能区达标率" key="national2">
-                  <national-standard></national-standard>
+                  <national-standard :visiable="nationalWater=='national2'" :searchForm="searchFormNationalWater" @search="changeSearchNationalWater"></national-standard>
                 </a-tab-pane>
                 <a-tab-pane tab="国家级水功能区同比/环比" key="national3">
-                  <national-yoy></national-yoy>
+                  <national-yoy :visiable="nationalWater=='national3'" :searchForm="searchFormNationalWater" @search="changeSearchNationalWater"></national-yoy>
                 </a-tab-pane>
                 </a-tabs>
              
@@ -54,12 +54,12 @@
           </a-tabs>
         </a-tab-pane>
         <a-tab-pane tab="水站" key="ccd">
-          <a-tabs v-model:activeSite="activeSite">
+          <a-tabs v-model:activeKey="activeSite">
             <a-tab-pane tab="水站数据统计" key="site1">
-              <site-statis ></site-statis>
+              <site-statis :visiable="activeSite=='site1'" :searchForm="searchFormActiveSite" @search="changeSearchActiveSite"></site-statis>
             </a-tab-pane>
             <a-tab-pane tab="水站日均值数据统计" key="site2">
-              <site-day-statis></site-day-statis>
+              <site-day-statis :visiable="activeSite=='site2'" :searchForm="searchFormActiveSite" @search="changeSearchActiveSite"></site-day-statis>
             </a-tab-pane>
           </a-tabs>
         </a-tab-pane>
@@ -69,6 +69,7 @@
 </template>
 
 <script>
+
   import BaseStatistic from "./base.vue";
   import AutoStatis from "../../water-function-area/statistic/auto.vue";
   import NationalStatis from "../../water-function-area/statistic/national.vue";
@@ -108,10 +109,28 @@
         activeWater: 'water1',
         activeSite:'site1',
         autoWater:'auto1',
-        nationalWater:'national'
+        nationalWater:'national',
+        searchFormRiver:{},
+        searchFormAutoWater:{},
+        searchFormNationalWater:{},
+        searchFormActiveSite:{}
       };
 
     },
+    methods:{
+      changeSearchRiver(val){
+        this.searchFormRiver = val
+      },
+      changeSearchAutoWater(val){
+        this.searchFormAutoWater = val
+      },
+      changeSearchNationalWater(val){
+        this.searchFormNationalWater = val
+      },
+      changeSearchActiveSite(val){
+        this.searchFormActiveSite = val
+      }
+    }
 
   }
 

src/views/water/water-function-area/statistic/auto-standard.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,23 +13,29 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+          </a-col>
+          <a-col :lg="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="河段名称">
             <a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </a-select-option>
             </a-select>
           </a-form-item>
+          </a-col>
+          <a-col :lg="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="监测类型">
             <a-select v-model:value="where.monitorType" placeholder="请选择监测类型" 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="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="查询日期:">
             <a-month-picker valueFormat="YYYY" v-model:value="where.startTime" />
           </a-form-item>
-
+          </a-col>
-          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-col :lg="4" :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>
@@ -46,7 +52,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -63,6 +68,18 @@
   export default {
     name: "AutoCollectWater",
     components: {},
+    props:{
+      // 表格搜索条件
+      searchForm:{
+        typeof:Object,
+        default: function () {
+            return {}
+        },
+      },
+      visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -163,8 +180,24 @@
         waterSystemList: [],
       };
     },
-
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime){
+        this.reload()
+      }
+
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -182,8 +215,14 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+
+        let search = {...this.where}
+        delete search.endTime;
+
         this.loading = true;
-        listAutoStandard(this.where).then((res) => {
+        listAutoStandard(search).then((res) => {
           console.log(res.data.data);
           this.datasource = [];
           if (res.data.code == 0) {
@@ -292,4 +331,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/water-function-area/statistic/auto-yoy.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,24 +13,33 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime"></a-month-picker>
+          </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="结束日期:">
+            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime"></a-month-picker>
+          </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.monitorType" placeholder="请选择监测类型" allowClear showSearch>
               <a-select-option :value="'1'">全因子</a-select-option>
               <a-select-option :value="'2'">纳污红线</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="起始日期:">
+          </a-col>
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime"></a-month-picker>
-          </a-form-item>
-          <a-form-item label="结束日期:">
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime"></a-month-picker>
-          </a-form-item>
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -48,7 +57,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -66,6 +74,18 @@
   export default {
     name: "AutoCollectWater",
     components: {},
+    props:{
+      // 表格搜索条件
+      searchForm:{
+        typeof:Object,
+        default: function () {
+            return {}
+        },
+      },
+      visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -117,8 +137,23 @@
         waterSystemList: [],
       };
     },
-
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+        this.reload()
+      }
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -136,6 +171,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+
         this.loading = true;
         listAutoYoy(this.where).then((res) => {
           console.log(res.data.data);
@@ -174,4 +212,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/water-function-area/statistic/auto.vue

@@ -6,6 +6,7 @@
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,25 +14,33 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime"></a-month-picker>
+          </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="结束日期:">
+            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime"></a-month-picker>
+          </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.monitorType" placeholder="请选择监测类型" @change="handleChange" allowClear showSearch>
               <a-select-option :value="'1'">全因子</a-select-option>
               <a-select-option :value="'2'">纳污红线</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="起始日期:">
+          </a-col>
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime"></a-month-picker>
-          </a-form-item>
-          <a-form-item label="结束日期:">
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime"></a-month-picker>
-          </a-form-item>
-
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -70,6 +79,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+      // 表格搜索条件
+      searchForm:{
+        typeof:Object,
+        default: function () {
+            return {}
+        },
+      },
+      visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -90,6 +111,17 @@
         waterSystemList: [],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     mounted() {
       this.loading = true;
       this.$refs.table.reload({
@@ -174,6 +206,9 @@
       },
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+
         this.loading = true;
         listAutonomyWaterFunctionTotal(this.where).then((res) => {
           this.datasource = [];
@@ -256,4 +291,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/water-function-area/statistic/national-standard.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,23 +13,29 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+          </a-col>
+          <a-col :lg="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="河段名称">
             <a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </a-select-option>
             </a-select>
           </a-form-item>
+          </a-col>
+          <a-col :lg="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="监测类型">
             <a-select v-model:value="where.monitorType" placeholder="请选择监测类型" 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="5" :md="12" :sm="24" :xs="24">
           <a-form-item label="查询日期:">
             <a-month-picker valueFormat="YYYY" v-model:value="where.startTime"></a-month-picker>
           </a-form-item>
-
+          </a-col>
-          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-col :lg="4" :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>
@@ -46,7 +52,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -63,6 +68,18 @@
   export default {
     name: "AutoCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -163,8 +180,23 @@
         waterSystemList: [],
       };
     },
-
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime){
+        this.reload()
+      }
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -182,8 +214,15 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+
         this.loading = true;
-        listNationalStandard(this.where).then((res) => {
+
+        let search = {...this.where}
+        delete search.endTime;
+
+        listNationalStandard(search).then((res) => {
           this.datasource = [];
           console.log(res.data.data);
           if (res.data.code == 0) {
@@ -289,4 +328,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>

src/views/water/water-function-area/statistic/national-yoy.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,24 +13,33 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" />
+          </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="结束日期:">
+            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" />
+          </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.monitorType" placeholder="请选择监测类型" allowClear showSearch>
               <a-select-option :value="'1'">全因子</a-select-option>
               <a-select-option :value="'2'">纳污红线</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="起始日期:">
+          </a-col>
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" />
-          </a-form-item>
-          <a-form-item label="结束日期:">
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" />
-          </a-form-item>
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -48,7 +57,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -66,6 +74,18 @@
   export default {
     name: "AutoCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -116,8 +136,23 @@
         waterSystemList: [],
       };
     },
-
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+        this.reload()
+      }
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -135,6 +170,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+        
         this.loading = true;
         listNationalYoy(this.where).then((res) => {
           console.log(res.data.data);
@@ -178,4 +216,8 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>
+

src/views/water/water-function-area/statistic/national.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,25 +13,33 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime"></a-month-picker>
+          </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="结束日期:">
+            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime"></a-month-picker>
+          </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.monitorType" placeholder="请选择监测类型" @change="handleChange" allowClear showSearch>
               <a-select-option :value="'1'">全因子</a-select-option>
               <a-select-option :value="'2'">纳污红线</a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="起始日期:">
+          </a-col>
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime"></a-month-picker>
-          </a-form-item>
-          <a-form-item label="结束日期:">
-            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime"></a-month-picker>
-          </a-form-item>
-
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
               <a-space>
@@ -49,7 +57,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -70,6 +77,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -92,6 +111,17 @@
         waterSystemList: [],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     mounted() {
       this.loading = true;
       this.$refs.table.reload({
@@ -179,6 +209,9 @@
       },
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+        this.$emit("search", this.where);
+        
         this.loading = true;
         listNationalWaterFunctionTotal(this.where).then((res) => {
           console.log(res.data.data);
@@ -255,4 +288,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>