kunshan/src/views/map/components/EconomicTrendChart.vue

<template>
  <div class="left-card">
    <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="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>
        </div>
      </div>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import mCard from "@/components/mCard/index.vue"

// 核心指标
const coreIndicator = reactive({
  value: "27",
  label: "监测指标总数"
})

// 监测指标数据
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: "m" },
    { name: "流量", unit: "m³/s" },
    { name: "蒸发量", unit: "mm" },
    { name: "降水量", unit: "mm" },
    { name: "泥沙含量", unit: "kg/m³" },
    { name: "水温", unit: "℃" },
    // 水土保持指标
    { name: "土壤侵蚀模数", unit: "t/km²·a" },
    { name: "植被覆盖度", unit: "%" },
    { name: "水土流失面积", unit: "km²" },
    { name: "土壤含水量", unit: "%" },
    // 环境指标
    { name: "二氧化碳", unit: "mg/L" },
    { name: "浊度", unit: "NTU" },
    { name: "空气质量", unit: "AQI" },
    { name: "噪声", unit: "dB" },
    // 其他指标
    { name: "叶绿素a", unit: "μg/L" },
    { name: "重金属含量", unit: "μg/L" },
    { name: "微生物指标", unit: "CFU/mL" },
    { name: "有机物含量", unit: "mg/L" },
  ],
})

</script>
<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: 2;
  display: flex;
  justify-content: center;
}

.water-quality-indicators {
  height: 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.indicators-scroll {
  height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}

.indicators-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.indicator-item {
  display: flex;
  align-items: center;
  padding: 6px;
  background-color: rgba(10, 40, 60, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(63, 91, 115, 0.3);
  
  .icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
  }
  
  .name {
    font-size: 11px;
    color: #D3F8F2;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .unit {
    font-size: 9px;
    color: #30DCFF;
    margin-left: 4px;
    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>