From eef8a796858ff44f2a8b21533d952e83e0c1c555 Mon Sep 17 00:00:00 2001
From: zy <82248909@qq.com>
Date: Wed, 4 Mar 2026 15:51:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=9F=E6=88=B7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appmana/station/SurvStationInfo.api.ts    |   8 +
 .../Analysis/components/VisitAnalysis.vue     | 349 +++++++++---------
 2 files changed, 187 insertions(+), 170 deletions(-)

diff --git a/src/views/appmana/station/SurvStationInfo.api.ts b/src/views/appmana/station/SurvStationInfo.api.ts
index d85712f..1a4420f 100644
--- a/src/views/appmana/station/SurvStationInfo.api.ts
+++ b/src/views/appmana/station/SurvStationInfo.api.ts
@@ -31,6 +31,14 @@ export const getImportUrl = Api.importExcel;
  */
 export const getStationList = (params) => defHttp.get({ url: Api.getStationList, params });
 
+/**
+ * 列表接口
+ * @param params
+ */
+export const getStationLists = (params) => defHttp.get({ url: Api.getStationList, params }, { isTransformResponse: false });
+
+
+
 
 /**
  * 列表接口
diff --git a/src/views/dashboard/Analysis/components/VisitAnalysis.vue b/src/views/dashboard/Analysis/components/VisitAnalysis.vue
index e86b4fb..806acb0 100644
--- a/src/views/dashboard/Analysis/components/VisitAnalysis.vue
+++ b/src/views/dashboard/Analysis/components/VisitAnalysis.vue
@@ -1,51 +1,65 @@
 <template>
-        <a-row :gutter="16" style="margin-bottom: 10px;">
-                <a-col class="gutter-row" :span="4">
-                  <ApiSelect
-          :api="getStationList"
-          v-model:value="searchStationCode"
-          showSearch
-          optionFilterProp="label"
-          resultField="list"
-          labelField="stationName"
-          valueField="stationCode"
-          placeholder="请选择"
-          style="width: 100%;"
-          @change="loadChart"
-          allowClear
-        />
-                </a-col>
-                <a-col class="gutter-row" :span="4">
-                  <a-date-picker placeholder="" v-model:value="searchYear" format="YYYY"   picker="year" style="width: 100%"  @change="loadYearChart" />
-                </a-col>
-        </a-row>
+  <a-row :gutter="16" style="margin-bottom: 10px">
+    <a-col class="gutter-row" :span="6">
+      <!--      <ApiSelect-->
+      <!--        :api="getStationList"-->
+      <!--        v-model:value="searchStationCode"-->
+      <!--        showSearch-->
+      <!--        optionFilterProp="label"-->
+      <!--        resultField="list"-->
+      <!--        labelField="stationName"-->
+      <!--        valueField="stationCode"-->
+      <!--        placeholder="请选择"-->
+      <!--        style="width: 100%"-->
+      <!--        @change="loadChart"-->
+      <!--        allowClear-->
+      <!--      />-->
+
+      <a-select :disabled="disabled" placeholder="请选择监测站" v-model:value="searchStationCode" @change="loadChart" style="width: 100%">
+        <a-select-option v-for="item in stations" :key="item.stationCode" :value="item.stationCode">
+          {{ item.stationName }}
+        </a-select-option>
+      </a-select>
+    </a-col>
+    <a-col class="gutter-row" :span="4">
+      <a-date-picker placeholder="" v-model:value="searchYear" format="YYYY" picker="year" style="width: 100%" @change="loadYearChart" />
+    </a-col>
+  </a-row>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { basicProps } from './props';
-  import { getWaterPollutionSummary} from '../api';
-  import { ApiSelect} from '/@/components/Form/index';
-  import { getStationList } from '../../../appmana/station/SurvStationInfo.api'
+  import { getWaterPollutionSummary } from '../api';
+  import { ApiSelect } from '/@/components/Form/index';
+  import { getStationLists } from '../../../appmana/station/SurvStationInfo.api';
   import dayjs, { Dayjs } from 'dayjs';
   const dateFormat = 'YYYY';
   let arr1: any[] = [];
-  let  searchStationCode = ref('S_1');
-  let  searchYear = ref<Dayjs>(dayjs());
+  let searchStationCode = ref('');
+  let searchYear = ref<Dayjs>(dayjs());
   let summaryTpDataList = ref(arr1);
   let summaryTnDataList = ref(arr1);
   let summaryNoDataList = ref(arr1);
   let summaryNhDataList = ref(arr1);
   let summaryCodDataList = ref(arr1);
+  let stations = ref(arr1);
   let dateList = ref(arr1);
 
-
-onMounted(() => {
-
-
-});
-
+  onMounted(() => {
+    getStationLists({}).then((res) => {
+      searchStationCode.value = '';
+      if (res.code == 0) {
+        stations.value = res.result;
+        if (stations.value.length > 0) {
+          searchStationCode.value = stations.value[0].stationCode;
+          loadChart(searchStationCode.value);
+        }
+      }
+      console.log('xxxxx' + res.result);
+    });
+  });
 
   defineProps({
     ...basicProps,
@@ -53,154 +67,149 @@ onMounted(() => {
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
+  const loadChart = (value: string) => {
+    if (value == null) {
+      value = '';
+      searchStationCode.value = '';
+    }
+    getSummary(value, searchYear.value.format(dateFormat));
+  };
 
+  const loadYearChart = (value) => {
+    if (value == null) {
+      value = ref<Dayjs>();
+      searchYear = ref<Dayjs>();
+    } else {
+      value = value.format(dateFormat);
+    }
 
+    getSummary(searchStationCode.value, value);
+  };
 
-    const loadChart = (value: string) => {
-      if(value==null){
-        value="";
-        searchStationCode.value="";
-      }
-      getSummary(value,searchYear.value.format(dateFormat));
-      };
-
-      const loadYearChart = (value) => {
-        if(value==null){
-          value=ref<Dayjs>();
-          searchYear=ref<Dayjs>();
-        }else{
-          value=value.format(dateFormat)
-        }
-
-      getSummary(searchStationCode.value,value);
-      };
-
-    function getSummary(stationCode,chooseYear) {
-      getWaterPollutionSummary(stationCode,chooseYear).then((res) => {
+  function getSummary(stationCode, chooseYear) {
+    getWaterPollutionSummary(stationCode, chooseYear).then((res) => {
       if (res.code == 200) {
-          dateList.value =  [1,2,3,4,5,6,7,8,9,10,11,12];
-          summaryTpDataList.value = res.result[0].TPSummry;
-          summaryTnDataList.value = res.result[0].TNSummry;
-          summaryNoDataList.value = res.result[0].NOSummry;
-          summaryNhDataList.value  = res.result[0].NHSummry;
-          summaryCodDataList.value = res.result[0].CODSummry;
-          setOptions({
-      tooltip: {
-        trigger: 'axis',
-        formatter:'<strong> {b0}时</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> 总磷：<strong>{c0}</strong>mg/L <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> 总氮：<strong>{c1}</strong>mg/L<br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #019634;"></span> 硝态氮：<strong>{c2}</strong>mg/L <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #075ca6;"></span> 氨氮：<strong>{c3}</strong>mg/L<br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #a65107;"></span> 化学需氧量：<strong>{c4}</strong>mg/L',
-        axisPointer: {
-          lineStyle: {
-            width: 1,
-            color: '#019680',
-          },
-        },
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data:  dateList.value,
-        // axisLabel:{
-        //   formatter: '{value} 时'
-        //   },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            width: 1,
-            type: 'solid',
-            color: 'rgba(226,226,226,0.5)',
-          },
-        },
-        axisTick: {
-          show: false,
-        },
-      },
-      yAxis: [
-        {
-          type: 'value',
-          // min:1.0,
-          splitNumber: 4,
-          axisTick: {
-            show: false,
-          },
-          axisLabel:{
-          formatter: '{value} mg/L'
-          },
-          splitArea: {
-            show: true,
-            areaStyle: {
-              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+        dateList.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        summaryTpDataList.value = res.result[0].TPSummry;
+        summaryTnDataList.value = res.result[0].TNSummry;
+        summaryNoDataList.value = res.result[0].NOSummry;
+        summaryNhDataList.value = res.result[0].NHSummry;
+        summaryCodDataList.value = res.result[0].CODSummry;
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            formatter:
+              '<strong> {b0}时</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> 总磷：<strong>{c0}</strong>mg/L <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> 总氮：<strong>{c1}</strong>mg/L<br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #019634;"></span> 硝态氮：<strong>{c2}</strong>mg/L <br />',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
             },
           },
-        },
-      ],
-      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-      legend: {
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: dateList.value,
+            // axisLabel:{
+            //   formatter: '{value} 时'
+            //   },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                type: 'solid',
+                color: 'rgba(226,226,226,0.5)',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              // min:1.0,
+              splitNumber: 4,
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                formatter: '{value} mg/L',
+              },
+              splitArea: {
+                show: true,
+                areaStyle: {
+                  color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+                },
+              },
+            },
+          ],
+          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          legend: {
             right: 20,
             top: 20,
-        },
-      series: [
-        {
-          smooth: true,
-          name: '总磷',
-          stack: 'mg/L',
-          data: summaryTpDataList.value,
-          type: 'line',
-          areaStyle: {},
-          itemStyle: {
-            color: '#5ab1ef',
           },
-        },
-        {
-          smooth: true,
-          name: '总氮',
-          stack: 'mg/L',
-          data: summaryTnDataList.value,
-          type: 'line',
-          areaStyle: {},
-          itemStyle: {
-            color: '#019680',
-          },
-        },
-        // {
-        //   smooth: true,
-        //   name: '硝态氮',
-        //   stack: 'mg/L',
-        //   data: summaryNoDataList.value,
-        //   type: 'line',
-        //   areaStyle: {},
-        //   itemStyle: {
-        //     color: '#019634',
-        //   },
-        // },
-        {
-          smooth: true,
-          name: '化学需氧量',
-          stack: 'mg/L',
-          data: summaryCodDataList.value,
-          type: 'line',
-          areaStyle: {},
-          itemStyle: {
-            color: '#a65107',
-          },
-        },
-        // {
-        //   smooth: true,
-        //   name: '氨氮',
-        //   stack: 'mg/L',
-        //   data: summaryNhDataList.value,
-        //   type: 'line',
-        //   areaStyle: {},
-        //   itemStyle: {
-        //     color: '#075ca6',
-        //   },
-        // },
-      ],
+          series: [
+            {
+              smooth: true,
+              name: '总磷',
+              stack: 'mg/L',
+              data: summaryTpDataList.value,
+              type: 'line',
+              areaStyle: {},
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+            {
+              smooth: true,
+              name: '总氮',
+              stack: 'mg/L',
+              data: summaryTnDataList.value,
+              type: 'line',
+              areaStyle: {},
+              itemStyle: {
+                color: '#019680',
+              },
+            },
+            // {
+            //   smooth: true,
+            //   name: '硝态氮',
+            //   stack: 'mg/L',
+            //   data: summaryNoDataList.value,
+            //   type: 'line',
+            //   areaStyle: {},
+            //   itemStyle: {
+            //     color: '#019634',
+            //   },
+            // },
+            {
+              smooth: true,
+              name: '化学需氧量',
+              stack: 'mg/L',
+              data: summaryCodDataList.value,
+              type: 'line',
+              areaStyle: {},
+              itemStyle: {
+                color: '#a65107',
+              },
+            },
+            // {
+            //   smooth: true,
+            //   name: '氨氮',
+            //   stack: 'mg/L',
+            //   data: summaryNhDataList.value,
+            //   type: 'line',
+            //   areaStyle: {},
+            //   itemStyle: {
+            //     color: '#075ca6',
+            //   },
+            // },
+          ],
+        });
+      } else {
+      }
     });
-        } else {
-        }
-    })
   }
-
-
-
 </script>