修改数据框内容

src/assets/style/home.scss

@@ -126,7 +126,7 @@ body {
           min-height: 0;
         }
         .left-card.tall-card {
-          flex: 2;
+          flex: 1.5;
           margin-bottom: 12px;
           min-height: 0;
         }

src/views/map/components/BulkCommoditySalesChart.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="left-card tall-card">
-    <m-card title="中心简介" :height="400">
+    <m-card title="中心简介" :height="500">
       <div class="carousel-container">
         <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
           <div class="carousel-item" v-for="(item, index) in carouselItems" :key="index">
-            <div v-if="index > 0" class="carousel-image">
+            <div v-if="item.image" class="carousel-image">
               <img :src="item.image" :alt="item.title" />
             </div>
             <div class="carousel-content">
@@ -95,14 +95,6 @@ function startAutoPlay() {
   gap: 15px;
 }
 
-.carousel-item:first-child {
-  gap: 0;
-}
-
-.carousel-item:first-child .carousel-content {
-  flex: 1;
-}
-
 .carousel-image {
   flex: 1.2;
   overflow: hidden;

src/views/map/components/EconomicTrendChart.vue

@@ -1,173 +1,217 @@
 <template>
   <div class="left-card">
-    <m-card title="近年水位变化" :height="200">
-      <v-chart ref="vChart" :option="option" :autoresize="true" />
+    <m-card title="机制融合量化指标" :height="400">
+      <div class="fusion-stats-container">
+        <!-- 上部：圆形统计 -->
+        <div class="upper-section">
+          <div class="core-indicator">
+            <div class="core-circle">
+              <img src="@/assets/images/pie/pie-zs-bg.png" alt="背景装饰" class="circle-decoration" />
+              <img src="@/assets/images/椭圆 .png" alt="椭圆装饰" class="ellipse-decoration" />
+              <img src="@/assets/images/pie/pie-mid-circle.png" alt="圆形背景" class="circle-bg" />
+              <div class="core-value">{{ coreIndicator.value }}</div>
+              <div class="core-label">{{ coreIndicator.label }}</div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 下部：阵列卡片 -->
+        <div class="lower-section">
+          <div class="surrounding-indicators">
+            <div class="surrounding-item" v-for="(item, index) in surroundingIndicators" :key="index">
+              <div class="item-icon">
+                <img v-if="index % 2 === 0" src="@/assets/images/icon1.png" alt="图标1" />
+                <img v-else src="@/assets/images/icon2.png" alt="图标2" />
+              </div>
+              <div class="item-info">
+                <div class="item-label">{{ item.label }}</div>
+                <div class="item-value">{{ item.value }}<span class="item-unit">{{ item.unit }}</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </m-card>
   </div>
 </template>
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from "vue"
-import * as echarts from "echarts"
+import { ref, reactive } from "vue"
 import mCard from "@/components/mCard/index.vue"
-import VChart from "vue-echarts"
-
-const option = ref({
-  title: {
-    text: "亿元",
-    left: "5%",
-    top: "8%",
-    textStyle: {
-      color: "#D3F8F2",
-      fontSize: 8,
-    },
-  },
-  grid: {
-    left: "12%",
-    top: "25%",
-    width: "82%",
-    height: "55%",
+
+// 核心指标
+const coreIndicator = reactive({
+  value: "92%",
+  label: "协同工作考核优秀率"
+})
+
+// 周围指标
+const surroundingIndicators = reactive([
+  {
+    label: "共同决策事项",
+    value: 132,
+    unit: "项"
   },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-      shadowStyle: { opacity: 0.2 },
-    },
-    backgroundColor: "rgba(0,0,0,1)",
-    borderWidth: 1,
-    borderColor: "#999999",
-    textStyle: {
-      color: "#ffffff",
-      fontSize: 10,
-    },
+  {
+    label: "混编共建团队",
+    value: 4,
+    unit: "个"
   },
-  color: ["#6BC7F6"],
-  xAxis: [
-    {
-      type: "category",
-
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: "#435459",
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        color: "#ffffff",
-        fontSize: 10,
-        interval: 1,
-        padding: [0, 0, 0, 0],
-      },
-      data: [
-        "2023/04",
-        "2023/05",
-        "2023/06",
-        "2023/07",
-        "2023/08",
-        "2023/09",
-        "2023/10",
-        "2023/11",
-        "2023/12",
-        "2024/01",
-        "2024/02",
-        "2024/03",
-      ],
-    },
-    {
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: "rgba(0,0,0,0)",
-        },
-      },
-      data: [],
-    },
-  ],
-  yAxis: {
-    type: "value",
-
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: [2, 2],
-        dashOffset: 5,
-        color: ["rgba(255, 255, 255, 1)"],
-        opacity: 1,
-        width: 0.3,
-      },
-    },
-    axisLabel: {
-      color: "#8B9EA4",
-      fontSize: 9,
-    },
+  {
+    label: "联合值班",
+    value: 365,
+    unit: "天"
   },
-  series: [
-    {
-      data: [500, 1000, 300, 1300, 500, 1330, 620, 400, 700, 1300, 300, 1234],
-      type: "line",
-      smooth: true,
-      symbol:
-        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAQ5JREFUOE+1la1OQ0EQRs8kCFIQdVCCxIBpCK1AInkDHC+B4QkwvASub4GsaE0NGCRpKhGFVDQZ+Mjem9vNbkphmWTMfjNnd3b2x0iYuxuwH7wNbIewBfAGzORm5nG6ElfM3QU6AXZSkzXG3oEnMxO8thWgux8DR2tAsfxiZs/VYA38Jazi1NBvYCizv+HK4vCRyrfQgIsf7Nm6+bSnjwIeAGeZaGnXQDfoE+ABmGbixwKeAoeJAMHuv3w30ubATQb6KqDKjZPEuAXOMysZAncJbS7gJbCVEAdAKwP8AK4S2vJfgMVLLt6UDtAreWx0W8od7OJXryq16OPwR2j6+WpAyz2wDagape7vARt9AZ+G3HmhiKS3xwAAAABJRU5ErkJggg==",
-      symbolSize: 10,
-      showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
-      yAxisIndex: 0,
-      z: 0,
-      // 设置高亮样式
-      emphasis: {
-        focus: "none",
-        itemStyle: { color: "white" },
-      },
-      label: {
-        show: true,
-        position: "top",
-        distance: 10,
-        color: "#ffffff",
-        fontSize: 10,
-      },
-
-      lineStyle: {
-        shadowColor: "rgba(0, 0, 0, 0.4)",
-        shadowBlur: 3,
-        shadowOffsetY: 10,
-        width: 3,
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(115, 208, 255, 1)",
-          },
-          {
-            offset: 1,
-            color: "rgba(18,60,98,1)",
-          },
-        ]),
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(25, 255, 236, 0.4)",
-          },
-          {
-            color: "rgba(51, 153, 255, 0)",
-            offset: 1,
-          },
-        ]),
-      },
-    },
-  ],
-})
+  {
+    label: "共定激励覆盖",
+    value: 156,
+    unit: "人"
+  }
+])
 
 </script>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.fusion-stats-container {
+  position: relative;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.upper-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.core-indicator {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.core-circle {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 140px;
+}
+
+.circle-decoration {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  object-fit: contain;
+}
+
+.ellipse-decoration {
+  position: absolute;
+  width: 160%;
+  height: 110%;
+  left: 50%;
+  top: 70%;
+  z-index: 0.5;
+  object-fit: contain;
+  transform: translate(-50%, -50%);
+  opacity: 0.7;
+}
+
+.circle-bg {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  z-index: 1;
+  object-fit: contain;
+}
+
+.core-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #30DCFF;
+  text-shadow: 0 0 10px rgba(48, 220, 255, 0.8);
+  margin-bottom: 8px;
+  z-index: 2;
+}
+
+.core-label {
+  font-size: 14px;
+  color: #D3F8F2;
+  z-index: 2;
+}
+
+.lower-section {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.surrounding-indicators {
+  width: 100%;
+  max-width: 300px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: 12px;
+  box-sizing: border-box;
+}
+
+.surrounding-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 14px;
+  min-height: 60px;
+  
+  .item-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  
+  .item-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .item-label {
+    font-size: 12px;
+    color: #D3F8F2;
+    opacity: 0.9;
+    margin-bottom: 4px;
+  }
+  
+  .item-value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #30DCFF;
+  }
+  
+  .item-unit {
+    font-size: 12px;
+    font-weight: normal;
+    color: #D3F8F2;
+    margin-left: 2px;
+  }
+}
+
+
+</style>

src/views/map/components/ProportionPopulationConsumption.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="right-card">
-    <m-card title="水质监测指标" :height="200">
+    <m-card title="监测指标" :height="200">
       <div class="water-quality-indicators">
         <div class="indicators-scroll">
           <div class="indicators-grid">
@@ -22,18 +22,30 @@ import mCard from "@/components/mCard/index.vue"
 const state = reactive({
   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" },
+    // 水文指标
+    { name: "水位", unit: "m" },
+    { name: "流量", unit: "m³/s" },
+    { name: "蒸发量", unit: "mm" },
+    { name: "降水量", unit: "mm" },
+    // 水土保持指标
+    { name: "土壤侵蚀模数", unit: "t/km²·a" },
+    { name: "植被覆盖度", unit: "%" },
+    { name: "水土流失面积", unit: "km²" },
+    // 环境指标
+    { name: "二氧化碳", unit: "mg/L" },
+    { name: "水温", unit: "℃" },
+    { name: "浊度", unit: "NTU" },
+    // 其他指标
+    { name: "叶绿素a", unit: "μg/L" },
+    { name: "重金属含量", unit: "μg/L" },
+    { name: "微生物指标", unit: "CFU/mL" },
   ],
 })
 

src/views/map/index.vue

@@ -32,10 +32,8 @@
       <!-- 左边布局 图表 -->
       <div class="left-wrap">
         <div class="left-wrap-3d">
-          <!-- 水质监测数据 -->
+          <!-- 中心简介 -->
           <BulkCommoditySalesChart></BulkCommoditySalesChart>
-          <!-- 水质类别分布 -->
-          <YearlyEconomyTrend></YearlyEconomyTrend>
           <!-- 近年水位变化 -->
           <EconomicTrendChart></EconomicTrendChart>
         </div>