改数据框内容，右边

src/views/map/components/ProportionPopulationConsumption.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="right-card">
-    <m-card title="水质类别占比" :height="200">
-      <div class="population-proportion">
-        <div class="population-proportion-chart">
-          <v-chart ref="vChart" :option="option" :autoresize="true" />
-          <div class="label-name">水质占比</div>
-        </div>
-        <div class="pie-legend">
-          <div class="pie-legend-item" v-for="(item, index) in state.pieData" :key="index">
-            <div class="icon" :style="{ borderColor: state.pieDataColor[index] }"></div>
-            <div class="name">{{ item.name }}</div>
-            <div class="value">{{ item.value }}<span class="unit">%</span></div>
+    <m-card title="水质监测指标" :height="200">
+      <div class="water-quality-indicators">
+        <div class="indicators-scroll">
+          <div class="indicators-grid">
+            <div class="indicator-item" v-for="(item, index) in state.indicators" :key="index">
+              <div class="icon" :style="{ backgroundColor: state.indicatorColors[index % state.indicatorColors.length] }"></div>
+              <div class="name">{{ item.name }}</div>
+              <div class="unit">{{ item.unit }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -19,152 +17,88 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue"
-import * as echarts from "echarts"
 import mCard from "@/components/mCard/index.vue"
-import VChart from "vue-echarts"
 
 const state = reactive({
-  pieDataColor: ["#17E6C3", "#40CFFF", "#1979FF", "#FFC472"],
-  pieData: [
-    {
-      name: "总磷",
-      value: 40,
-    },
-    {
-      name: "总氮",
-      value: 25,
-    },
-    {
-      name: "氨氮",
-      value: 20,
-    },
-    {
-      name: "电导率",
-      value: 15,
-    },
-  ],
-})
-const option = ref({
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-      shadowStyle: { opacity: 0 },
-    },
-    backgroundColor: "rgba(0,0,0,1)",
-    borderWidth: 1,
-    borderColor: "#999999",
-    textStyle: {
-      color: "#ffffff",
-      fontSize: 10,
-    },
-  },
-
-  series: [
-    {
-      name: "",
-      type: "pie",
-      itemStyle: {
-        borderWidth: 5,
-        borderColor: "rgba(26, 57, 77,1)",
-      },
-      label: { show: false },
-      radius: ["55%", "70%"],
-      color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
-
-      data: [
-        {
-          value: 40,
-          name: "总磷",
-          itemStyle: {
-            //颜色渐变
-            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
-              { offset: 0, color: "rgba(3,65,128,1)" },
-              { offset: 1, color: "rgba(115,208,255,1)" },
-            ]),
-          },
-        },
-        {
-          value: 25,
-          name: "总氮",
-          itemStyle: {
-            //颜色渐变
-            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
-              { offset: 0, color: "rgba(11, 77, 44, 1)" },
-              { offset: 1, color: "rgba(77, 255, 181, 1)" },
-            ]),
-          },
-        },
-        {
-          value: 20,
-          name: "氨氮",
-          itemStyle: {
-            //颜色渐变
-            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
-              { offset: 0, color: "rgba(117, 117, 117, 1)" },
-              { offset: 1, color: "rgba(230, 230, 230, 1)" },
-            ]),
-          },
-        },
-        {
-          value: 15,
-          name: "电导率",
-          itemStyle: {
-            //颜色渐变
-            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
-              { offset: 0, color: "rgba(153, 105, 38, 1)" },
-              { offset: 1, color: "rgba(255, 200, 89, 1)" },
-            ]),
-          },
-        },
-      ],
-    },
+  indicatorColors: ["#17E6C3", "#40CFFF", "#1979FF", "#FFC472", "#FF6B6B", "#4ECDC4"],
+  indicators: [
+    { name: "总磷", unit: "mg/L" },
+    { name: "总氮", unit: "mg/L" },
+    { name: "氨氮", unit: "mg/L" },
+    { name: "电导率", unit: "μS/cm" },
+    { name: "溶解氧", unit: "mg/L" },
+    { name: "pH值", unit: "-" },
+    { name: "高锰酸盐指数", unit: "mg/L" },
+    { name: "化学需氧量", unit: "mg/L" },
+    { name: "五日生化需氧量", unit: "mg/L" },
+    { name: "悬浮物", unit: "mg/L" },
+    { name: "氟化物", unit: "mg/L" },
+    { name: "氯化物", unit: "mg/L" },
   ],
 })
 
 </script>
 <style lang="scss">
-.population-proportion {
-  display: flex;
+.water-quality-indicators {
   height: 100%;
-  &-chart {
-    position: relative;
-    width: 180px;
-    height: 100%;
-    margin-left: 15px;
-    background: url("~@/assets/images/pie/pie-zs-bg.png") no-repeat;
-    background-size: cover;
-    .label-name {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 72px;
-      height: 72px;
-      margin-left: -36px;
-      margin-top: -36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      color: #c4e3fd;
-    }
-    &:after {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      z-index: -1;
-      margin-left: -36px;
-      margin-top: -36px;
-      content: "";
-      width: 72px;
-      height: 72px;
-      background: url("~@/assets/images/pie/pie-mid-circle.png") no-repeat;
-      background-size: cover;
-      animation: rotate360Animate 2s linear infinite;
-    }
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.indicators-scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.indicators-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.indicator-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  background-color: rgba(10, 40, 60, 0.3);
+  border-radius: 4px;
+  border: 1px solid rgba(63, 91, 115, 0.3);
+  .icon {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  .name {
+    font-size: 12px;
+    color: #D3F8F2;
+    flex: 1;
   }
-  .pie-legend {
-    padding-left: 30px;
+  .unit {
+    font-size: 10px;
+    color: #30DCFF;
+    margin-left: 5px;
+    white-space: nowrap;
   }
 }
+
+/* 滚动条样式 */
+.indicators-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.indicators-scroll::-webkit-scrollbar-track {
+  background: rgba(10, 40, 60, 0.3);
+  border-radius: 3px;
+}
+
+.indicators-scroll::-webkit-scrollbar-thumb {
+  background: rgba(48, 220, 255, 0.5);
+  border-radius: 3px;
+}
+
+.indicators-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(48, 220, 255, 0.8);
+}
 </style>