各区域

src/views/achievement/achievementType/index.vue

@@ -6,11 +6,19 @@
           <a-tab-pane key="1" tab="城镇污水及配套工程">
             <secondTab :loading="loading" />
           </a-tab-pane>
-          <a-tab-pane key="2" tab="河道整治" />
-          <a-tab-pane key="3" tab="农业农村面源污染治理" />
-          <a-tab-pane key="4" tab="引用水源地保护建设" />
-          <a-tab-pane key="5" tab="内源治理" />
-          <a-tab-pane key="6" tab="水资源综合利用及调度" />
+          <a-tab-pane key="2" tab="河道整治">
+            <secondTab :loading="loading" />
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="农业农村面源污染治理">
+            <secondTab :loading="loading" />
+          </a-tab-pane>
+          <a-tab-pane key="4" tab="引用水源地保护建设">
+            <secondTab :loading="loading" />
+          </a-tab-pane>
+          <a-tab-pane key="5" tab="内源治理"> <secondTab :loading="loading" /> </a-tab-pane>
+          <a-tab-pane key="6" tab="水资源综合利用及调度">
+            <secondTab :loading="loading" />
+          </a-tab-pane>
         </a-tabs>
       </div>
     </div>

src/views/achievement/achievementType/secondTab.vue

@@ -2,6 +2,7 @@
   <div class="tabBox">
     <a-tabs v-model:activeKey="subTab">
       <a-tab-pane key="a" tab="项目实施绩效">
+        <div>{{ msg }}</div>
         <div class="md:flex enter-y">
           <div class="md:w-1/2 w-full">
             <Card title="污水处理能力" :loading="loading">
@@ -27,14 +28,53 @@
           </div>
         </div>
       </a-tab-pane>
-      <a-tab-pane key="b" tab="技术应用绩效"> 2 </a-tab-pane>
-      <a-tab-pane key="c" tab="项目管理绩效"> 3 </a-tab-pane>
+      <a-tab-pane key="b" tab="技术应用绩效">
+        <div class="md:flex enter-y">
+          <div class="md:w-1/2 w-full">
+            <Card title="城镇污水处理技术" :loading="loading">
+              <div class="md:flex enter-y">
+                <div ref="chartRef5" :style="{ width, height }" class="md:w-1/2 w-full"></div>
+                <div class="md:w-1/2 w-full" style="margin-top: 5%">
+                  <div style="font-weight: 600; font-size: 20px">技术优势明显</div>
+                  <div
+                    >技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显</div
+                  >
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div class="md:w-1/2 w-full">
+            <Card title="城市面源污染控制技术" :loading="loading">
+              <div class="md:flex enter-y">
+                <div ref="chartRef6" :style="{ width, height }" class="md:w-1/2 w-full"></div>
+                <div class="md:w-1/2 w-full" style="margin-top: 5%">
+                  <div style="font-weight: 600; font-size: 20px">技术改进空间较大</div>
+                  <div
+                    >技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显</div
+                  >
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+        <div class="mutiTable">
+          <a-table :dataSource="dataSource1" :columns="columns1" :pagination="false" bordered />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="c" tab="项目管理绩效"> 
+        <div class="mutiTable">
+        <a-table :dataSource="dataSource2" :columns="columns2" :pagination="false" bordered />
+      </div>
+      <div style="padding:0 20px"> 
+        技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明
+      </div>
+      </a-tab-pane>
     </a-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { watch, ref, Ref } from 'vue';
+  import { watch, ref, Ref, watchEffect } from 'vue';
   import { useECharts } from '@/hooks/web/useECharts';
   import { Card } from 'ant-design-vue';
 
@@ -50,117 +90,268 @@
       default: '300px',
     },
   });
+  const dataSource1 = ref([]);
+  const columns1 = [
+    {
+      dataIndex: 'date',
+      key: 'date',
+      title: '时期',
+      width: 200,
+    },
+    {
+      dataIndex: 'apply',
+      key: 'apply',
+      title: '应用',
+    },
+    {
+      dataIndex: 'technology',
+      key: 'technology',
+      title: '技术',
+    },
+    {
+      dataIndex: 'technologyInfo',
+      key: 'technologyInfo',
+      title: '技术详情',
+    },
+  ];
+  const dataSource2 = ref([]);
+  const columns2 = [
+    {
+      dataIndex: 'type',
+      key: 'type',
+      title: '类别',
+      width: 200,
+    },
+    {
+      dataIndex: 'feasibleApproval',
+      key: 'feasibleApproval',
+      title: '可行批复',
+    },
+    {
+      dataIndex: 'firstDesign',
+      key: 'firstDesign',
+      title: '初步设计',
+    },
+    {
+      dataIndex: 'investResource',
+      key: 'investResource',
+      title: '资金来源',
+    },
+    {
+      dataIndex: 'acceptApproval',
+      key: 'acceptApproval',
+      title: '验收批复',
+    },
+    {
+      dataIndex: 'patrol',
+      key: 'patrol',
+      title: '定期巡查',
+    },
+    {
+      dataIndex: 'department',
+      key: 'department',
+      title: '管理部门',
+    },
+    {
+      dataIndex: 'operateEfficiency',
+      key: 'operateEfficiency',
+      title: '运营效率',
+    },
+  ];
   const chartRef1 = ref<HTMLDivElement | null>(null);
   const chartRef2 = ref<HTMLDivElement | null>(null);
   const chartRef3 = ref<HTMLDivElement | null>(null);
   const chartRef4 = ref<HTMLDivElement | null>(null);
+  const chartRef5 = ref<HTMLDivElement | null>(null);
+  const chartRef6 = ref<HTMLDivElement | null>(null);
   const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
   const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
   const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
   const setOptions4 = useECharts(chartRef4 as Ref<HTMLDivElement>).setOptions;
+  const setOptions5 = useECharts(chartRef5 as Ref<HTMLDivElement>).setOptions;
+  const setOptions6 = useECharts(chartRef6 as Ref<HTMLDivElement>).setOptions;
+  const msg = ref('的浮点数的独立访客数量粉丝的疯狂收到了啊啊啊啊防腐剂非黑即佛金额');
   watch(
-    () => props.loading,
+    () => subTab.value,
     () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions1({
-        tooltip: {},
-        xAxis: {
-          type: 'category',
-          data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70],
-            stack: 'total',
-            type: 'bar',
-            itemStyle: {},
+      if (subTab.value == 'a') {
+        setOptions1({
+          tooltip: {},
+          xAxis: {
+            type: 'category',
+            data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
+          },
+          yAxis: {
+            type: 'value',
+            name: '处理能力:万(m³/d)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
+          },
+          series: [
+            {
+              data: [120, 200, 150, 80, 70],
+              stack: 'total',
+              type: 'bar',
+              itemStyle: {},
+            },
+          ],
+        });
+        setOptions2({
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
           },
-        ],
-      });
-      setOptions2({
-        tooltip: {
-          trigger: 'axis',
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        legend: {
-          data: ['cod', 'tn×10', 'tp×100'],
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            name: 'cod',
-            data: [120, 200, 150, 80, 70],
-            type: 'line',
-            stack: 'Total',
-            itemStyle: {},
+          legend: {
+            data: ['cod', 'tn×10', 'tp×100'],
           },
-          {
-            name: 'tn×10',
-            data: [78, 123, 29, 45, 99],
-            type: 'line',
-            stack: 'Total',
-            itemStyle: {},
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
           },
-          {
-            name: 'tp×100',
-            data: [134, 231, 39, 67, 156],
-            type: 'line',
-            stack: 'Total',
-            itemStyle: {},
+          yAxis: {
+            type: 'value',
+            name: '生产量(吨)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
           },
-        ],
-      });
-      setOptions3({
-        tooltip: {},
-        xAxis: {
-          type: 'category',
-          data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70],
-            type: 'bar',
-            itemStyle: {},
+          series: [
+            {
+              name: 'cod',
+              data: [120, 200, 150, 80, 70],
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {},
+            },
+            {
+              name: 'tn×10',
+              data: [78, 123, 29, 45, 99],
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {},
+            },
+            {
+              name: 'tp×100',
+              data: [134, 231, 39, 67, 156],
+              type: 'line',
+              stack: 'Total',
+              itemStyle: {},
+            },
+          ],
+        });
+        setOptions3({
+          tooltip: {},
+          xAxis: {
+            type: 'category',
+            data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
           },
-        ],
-      });
-      setOptions4({
-        tooltip: {},
-        xAxis: {
-          type: 'category',
-          data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70],
-            type: 'bar',
-            itemStyle: {},
+          yAxis: {
+            type: 'value',
+            name: '市政排水管网总长度(m)', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
           },
-        ],
-      });
+          series: [
+            {
+              data: [120, 200, 150, 80, 70],
+              type: 'bar',
+              itemStyle: {},
+            },
+          ],
+        });
+        setOptions4({
+          tooltip: {},
+          xAxis: {
+            type: 'category',
+            data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'],
+          },
+          yAxis: {
+            type: 'value',
+            name: '新增城镇生活垃圾处理量（t/d）', // 单位说明文本
+            nameLocation: 'end', // 文本位置（start/center/end）
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12,
+              align: 'left', // 文本对齐方向
+              padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
+            },
+          },
+          series: [
+            {
+              data: [120, 200, 150, 80, 70],
+              type: 'bar',
+              itemStyle: {},
+            },
+          ],
+        });
+      } else if (subTab.value == 'b') {
+        setOptions5({
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            top: '10%',
+            left: 'center',
+          },
+          series: [
+            {
+              name: '城镇污水处理技术',
+              type: 'pie',
+              radius: '50%',
+              data: [
+                { value: 1048, name: '好' },
+                { value: 735, name: '较好' },
+                { value: 580, name: '中等' },
+                { value: 484, name: '较差' },
+                { value: 300, name: '差' },
+              ],
+            },
+          ],
+        });
+        setOptions6({
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            top: '10%',
+            left: 'center',
+          },
+          series: [
+            {
+              name: '城市面源污染控制技术',
+              type: 'pie',
+              radius: '50%',
+              data: [
+                { value: 1048, name: '好' },
+                { value: 735, name: '较好' },
+                { value: 580, name: '中等' },
+                { value: 484, name: '较差' },
+                { value: 300, name: '差' },
+              ],
+            },
+          ],
+        });
+      }
     },
     { immediate: true },
   );
@@ -169,4 +360,7 @@
   .tabBox {
     margin: 20px;
   }
+  .mutiTable {
+    margin: 20px 0;
+  }
 </style>

src/views/pollution/manage/table.vue

@@ -36,7 +36,7 @@
 <script setup lang="ts">
   import { PageWrapper } from '@/components/Page';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { list, removeByIds } from './api.ts';
+  import { list, removeByIds } from './manage.api.ts';
   import { formSchemas, columns } from './manage.data';
   import { IconEnum } from '@/enums/appEnum';
   import { useGo } from '@/hooks/web/usePage';