kunshan/src/views/waterStation/PolderDetail.vue

<template>
  <div class="polder-detail-content">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <div class="left-panel-3d">
        <!-- 圩区水位分析 -->
        <m-card :title="selectedPolderDetail === 'konggang' ? '孔巷联圩水位分析' : '圩区水位分析'" class="water-station-card water-station-card-top" :width="398" :height="420">
          <div class="water-level-analysis-panel">
            <!-- 切换按钮 -->
            <div class="water-level-tabs" v-if="selectedPolderDetail === 'konggang'">
              <div class="tab-item" :class="{ active: currentWaterLevelTab === 'inner' }" @click="currentWaterLevelTab = 'inner'">
                <span>圩内</span>
              </div>
              <div class="tab-item" :class="{ active: currentWaterLevelTab === 'outer' }" @click="currentWaterLevelTab = 'outer'">
                <span>圩外</span>
              </div>
            </div>
            
            <!-- 水位数据 -->
            <div class="water-level-data">
              <div class="data-item">
                <div class="data-label">水位(m)</div>
                <div class="data-value">{{ currentWaterLevelData.level }}</div>
              </div>
              <div class="data-item">
                <div class="data-label">比昨日(m)</div>
                <div class="data-value" :class="{ negative: currentWaterLevelData.change < 0 }">{{ currentWaterLevelData.change }}</div>
              </div>
              <div class="data-item">
                <div class="data-label">历史最高(m)</div>
                <div class="data-value">{{ currentWaterLevelData.historyMax }}</div>
              </div>
              <div class="data-item">
                <div class="data-label">生态水位(m)</div>
                <div class="data-value">{{ currentWaterLevelData.ecological }}</div>
              </div>
              <div class="data-item">
                <div class="data-label">比警戒(m)</div>
                <div class="data-value" :class="{ negative: currentWaterLevelData.alertDiff < 0 }">{{ currentWaterLevelData.alertDiff }}</div>
              </div>
            </div>
            
            <!-- 水位趋势图 -->
            <div class="water-level-chart">
              <VChart ref="waterLevelChart" :option="currentWaterLevelChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
            </div>
          </div>
        </m-card>
        
        <!-- 圩区工情 -->
        <m-card title="圩区工情" class="water-station-card water-station-card-bottom" :width="398" :height="480">
          <div class="polder-work-status-panel">
            <!-- 泵站启闭情况卡片 -->
            <div class="pump-status-cards">
              <div class="pump-status-card" v-for="(pump, index) in pumpStatus" :key="index">
                <div class="pump-name">{{ pump.name }}</div>
                <div class="pump-status" :class="{ 'status-active': pump.status === '运行中', 'status-inactive': pump.status === '停止' }">
                  {{ pump.status }}
                </div>
                <div class="pump-flow">{{ pump.flow }}</div>
              </div>
            </div>
            
            <!-- 开泵流量折线图 -->
            <div class="flow-chart-container">
              <h4 class="chart-title">开泵流量</h4>
              <VChart ref="flowChart" :option="pumpFlowChartOption" :autoresize="true" style="width: 100%; height: 140px;" />
            </div>
            
            <!-- 日排水量柱状图 -->
            <div class="discharge-chart-container">
              <h4 class="chart-title">日排水量</h4>
              <VChart ref="dischargeChart" :option="dailyDischargeChartOption" :autoresize="true" style="width: 100%; height: 140px;" />
            </div>
          </div>
        </m-card>
      </div>
    </div>
    
    <!-- 右侧面板 - 圩区详情 -->
    <div class="right-panel">
      <div class="right-panel-3d">
        <!-- 降雨预报和降雨量 -->
        <m-card title="降雨预报" class="water-station-card water-station-card-top" :width="398" :height="450">
          <div class="rainfall-forecast-panel">
            <!-- 第一行：两列布局（比例6:4） -->
            <div class="rainfall-top-row">
              <!-- 可纳雨量柱状图 -->
              <div class="rainfall-capacity-chart-container">
                <h4 class="chart-title">可纳雨量</h4>
              <VChart ref="rainfallCapacityChart" :option="rainfallCapacityChartOption" :autoresize="true" style="width: 100%; height: calc(100% - 20px);" />
              </div>
              
              <!-- 降雨预报轮播 -->
              <div class="forecast-carousel">
                <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentForecastIndex * 100}%)` }">
                  <div class="forecast-card" v-for="(forecast, index) in rainfallForecast" :key="index">
                    <div class="forecast-date">{{ forecast.date }}</div>
                    <div class="forecast-icon" :class="forecast.icon"></div>
                    <div class="forecast-desc">{{ forecast.desc }}</div>
                    <div class="forecast-temp">{{ forecast.temp }}</div>
                  </div>
                </div>
                <div class="carousel-indicators">
                  <span 
                    v-for="(forecast, index) in rainfallForecast" 
                    :key="index"
                    class="indicator" 
                    :class="{ active: currentForecastIndex === index }"
                    @click="currentForecastIndex = index"
                  ></span>
                </div>
              </div>
            </div>
            
            <!-- 第二行：降雨量柱状图 -->
            <div class="rainfall-chart-container">
              <h4 class="chart-title">降雨量</h4>
              <VChart ref="rainfallChart" :option="polderRainfallChartOption" :autoresize="true" style="width: 100%; height: calc(100% - 20px);" />
            </div>
          </div>
        </m-card>
        
        <!-- 圩区AI内涝识别 -->
        <m-card title="圩区AI内涝识别" class="water-station-card water-station-card-bottom" :width="398" :height="480">
          <div class="waterlogging-detection-panel">
            <!-- 内涝统计 -->
            <div class="waterlogging-stats">
              <div class="stat-item">
                <div class="stat-label">积水点数量</div>
                <div class="stat-value">{{ waterloggingStats.count }}/{{ waterloggingStats.total }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">是否积水</div>
                <div class="stat-value" :class="{ 'status-active': !waterloggingStats.isWaterlogging, 'status-inactive': waterloggingStats.isWaterlogging }">{{ waterloggingStats.isWaterlogging ? '是' : '否' }}</div>
              </div>
            </div>
            
            <!-- 监控点查看按钮 -->
            <div class="monitoring-button-container">
              <button class="monitoring-button" @click="showMonitoringPoints = !showMonitoringPoints">
                {{ showMonitoringPoints ? '收起监控点' : '查看监控点' }}
              </button>
            </div>
            
            <!-- 监控点图片 -->
            <div class="monitoring-points" v-if="showMonitoringPoints">
              <div class="monitoring-point" v-for="(point, index) in monitoringPoints" :key="index">
                <div class="point-name">{{ point.name }}</div>
                <div class="point-image">
                  <img :src="point.image" alt="监控点" />
                </div>
              </div>
            </div>
          </div>
        </m-card>
      </div>
    </div>
    
    <!-- 孔巷联圩详情 -->
    <template v-if="selectedPolderDetail === 'konggang'">
      <!-- 侧边开关控制 -->
      <div class="polder-layer-controls">
        <div class="toggle-item">
          <span class="toggle-text">泵站</span>
          <div class="toggle-switch" :class="{ active: showGate }" @click="$emit('update:showGate', !showGate)">
            <div class="toggle-knob"></div>
          </div>
        </div>
        <div class="toggle-item">
          <span class="toggle-text">水文站</span>
          <div class="toggle-switch" :class="{ active: showHydrology }" @click="$emit('update:showHydrology', !showHydrology)">
            <div class="toggle-knob"></div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed } from "vue"
import mCard from "@/components/mCard/index.vue"
import VChart from "vue-echarts"
import * as echarts from "echarts"

// 引入监控点图片
import cityFlood1 from "@/assets/images/城市积水1.png"
import cityFlood2 from "@/assets/images/城市积水2.png"
import cityFlood3 from "@/assets/images/城市积水3.png"

defineProps({
  selectedPolderDetail: {
    type: String,
    default: null
  },
  showGate: {
    type: Boolean,
    default: true
  },
  showHydrology: {
    type: Boolean,
    default: false
  }
})
defineEmits(['update:showGate', 'update:showHydrology'])

// 泵站状态数据
const pumpStatus = ref([
  { name: '泵站1', status: '运行中', flow: '8.5 m³/s' },
  { name: '泵站2', status: '停止', flow: '0 m³/s' }
])

// 开泵流量图表配置
const pumpFlowChartOption = ref({
  grid: {
    left: '1%',
    top: '15%',
    right: '5%',
    bottom: '15%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    },
    formatter: function(params) {
      let result = params[0].name + '<br/>';
      params.forEach(item => {
        result += item.marker + item.seriesName + ': ' + item.value + ' m³/s<br/>';
      });
      return result;
    }
  },
  xAxis: {
    type: 'category',
    data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
    axisLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.6)'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 9
    },
    boundaryGap: true
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.6)'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 9,
      formatter: '{value} m³/s'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.2)'
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: '流量',
      type: 'line',
      data: [5.2, 7.8, 8.5, 8.2, 7.9, 8.5],
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        color: '#30dcff',
        width: 2,
        shadowColor: 'rgba(48, 220, 255, 0.6)',
        shadowBlur: 10
      },
      itemStyle: {
        color: '#30dcff',
        borderColor: '#fff',
        borderWidth: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(48, 220, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(48, 220, 255, 0.1)'
          }
        ])
      }
    }
  ]
})

// 日排水量图表配置
const dailyDischargeChartOption = ref({
  grid: {
    left: '1%',
    top: '15%',
    right: '5%',
    bottom: '15%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    },
    formatter: function(params) {
      let result = params[0].name + '<br/>';
      params.forEach(item => {
        result += item.marker + item.seriesName + ': ' + item.value + ' 万m³<br/>';
      });
      return result;
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日'],
    axisLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.6)'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 9,
      rotate: 30
    },
    boundaryGap: true
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.6)'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 9,
      formatter: '{value} 万m³'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.2)'
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: '排水量',
      type: 'bar',
      barWidth: '40%',
      data: [12.5, 15.8, 18.2, 16.5, 17.3],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(48, 220, 255, 0.8)'
          },
          {
            offset: 1,
            color: 'rgba(48, 220, 255, 0.3)'
          }
        ]),
        shadowColor: 'rgba(48, 220, 255, 0.6)',
        shadowBlur: 10
      }
    }
  ]
})

// 当前选中的水位标签
const currentWaterLevelTab = ref('inner')

// 圩内水位数据
const innerWaterLevelData = {
  level: '2.54',
  change: '-0.05',
  historyMax: '4.06',
  ecological: '2.08',
  alertDiff: '-0.79',
  chartData: [2.60, 2.62, 2.58, 2.56, 2.54],
  flowData: [0.4, 0.5, 0.3, 0.4, 0.3]
}

// 圩外水位数据
const outerWaterLevelData = {
  level: '2.65',
  change: '+0.02',
  historyMax: '4.12',
  ecological: '2.10',
  alertDiff: '-0.68',
  chartData: [2.62, 2.63, 2.64, 2.65, 2.65],
  flowData: [0.5, 0.6, 0.5, 0.4, 0.5]
}

// 当前水位数据
const currentWaterLevelData = computed(() => {
  return currentWaterLevelTab.value === 'inner' ? innerWaterLevelData : outerWaterLevelData
})

// 当前水位图表配置
const currentWaterLevelChartOption = computed(() => {
  const data = currentWaterLevelTab.value === 'inner' ? innerWaterLevelData : outerWaterLevelData
  return {
    grid: {
      left: '2%',
      top: '15%',
      right: '5%',
      bottom: '15%',
      containLabel: true
    },
    legend: {
      data: ['水位', '流量'],
      top: '2%',
      textStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 10
      },
      itemWidth: 10,
      itemHeight: 10,
      selected: {
        '水位': true,
        '流量': false
      },
      selectedMode: 'single'
    },
    xAxis: {
      type: 'category',
      data: ['02-11 10:00', '02-11 16:00', '02-11 22:00', '02-12 04:00', '02-12 10:00'],
      axisLine: {
        lineStyle: {
          color: 'rgba(48, 220, 255, 0.6)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 10
      },
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 5,
      axisLine: {
        lineStyle: {
          color: 'rgba(48, 220, 255, 0.6)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(48, 220, 255, 0.2)'
        }
      },
      axisPointer: {
        show: true
      },

    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 20, 40, 0.9)',
      borderColor: 'rgba(48, 220, 255, 0.5)',
      textStyle: {
        color: '#fff'
      },
      formatter: function(params) {
        let result = params[0].name + '<br/>';
        params.forEach(item => {
          let unit = item.seriesName === '水位' ? ' m' : ' m³/s';
          result += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>';
        });
        return result;
      }
    },
    series: [
      {
        name: '水位',
        type: 'line',
        data: data.chartData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#30dcff',
          width: 2,
          shadowColor: 'rgba(48, 220, 255, 0.6)',
          shadowBlur: 10
        },
        itemStyle: {
          color: '#30dcff',
          borderColor: '#fff',
          borderWidth: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(48, 220, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(48, 220, 255, 0.1)'
            }
          ])
        },
        markLine: {
          silent: true,
          symbol: 'none',
          data: [
            {
              yAxis: 3.32,
              label: {
                formatter: '警戒水位',
                color: '#ffcc00',
                position: 'insideMiddleTop',
                distance: 5,
                fontSize: 10,
                align: 'center'
              },
              lineStyle: {
                color: '#ffcc00',
                width: 2,
                type: 'dashed'
              }
            },
            {
              yAxis: 3.82,
              label: {
                formatter: '保证水位',
                color: '#ff0000',
                position: 'insideMiddleTop',
                distance: 5,
                fontSize: 10,
                align: 'center'
              },
              lineStyle: {
                color: '#ff0000',
                width: 2,
                type: 'dashed'
              }
            }
          ]
        }
      },
      {
        name: '流量',
        type: 'line',
        data: data.flowData,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#00ff88',
          width: 2,
          shadowColor: 'rgba(0, 255, 136, 0.6)',
          shadowBlur: 10
        },
        itemStyle: {
          color: '#00ff88',
          borderColor: '#fff',
          borderWidth: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 255, 136, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(0, 255, 136, 0.1)'
            }
          ])
        }
      }
    ]
  }
})

// 降雨预报数据
const rainfallForecast = ref([
  { date: '今天', icon: 'rainy', desc: '小雨', temp: '4°C' },
  { date: '明天', icon: 'cloudy', desc: '多云', temp: '6°C' },
  { date: '后天', icon: 'sunny', desc: '晴', temp: '8°C' },
  { date: '周四', icon: 'rainy', desc: '中雨', temp: '5°C' }
])

// 降雨预报轮播状态
const currentForecastIndex = ref(0)
let forecastInterval

// 开始轮播
function startForecastCarousel() {
  forecastInterval = setInterval(() => {
    currentForecastIndex.value = (currentForecastIndex.value + 1) % rainfallForecast.value.length
  }, 3000) // 3秒切换一次
}

// 停止轮播
function stopForecastCarousel() {
  if (forecastInterval) {
    clearInterval(forecastInterval)
  }
}

// 生命周期钩子
import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  startForecastCarousel()
})

onBeforeUnmount(() => {
  stopForecastCarousel()
})

// 可纳雨量图表配置
const rainfallCapacityChartOption = ref({
  grid: {
    left: '8%',
    top: '15%',
    right: '8%',
    bottom: '15%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    },
    formatter: function(params) {
      let result = params[0].name + '<br/>';
      params.forEach(item => {
        result += item.marker + item.seriesName + ': ' + item.value + ' mm<br/>';
      });
      return result;
    }
  },
  xAxis: {
    type: 'category',
    data: ['可纳雨量'],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 10
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 50,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 10,
      formatter: '{value} mm'
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: '可纳雨量',
      type: 'bar',
      barWidth: 80,
      data: [20.16],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(48, 220, 255, 0.8)'
          },
          {
            offset: 1,
            color: 'rgba(48, 220, 255, 0.3)'
          }
        ]),
        shadowColor: 'rgba(48, 220, 255, 0.6)',
        shadowBlur: 10,
        borderWidth: 1,
        borderColor: 'rgba(48, 220, 255, 0.5)'
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(48, 220, 255, 1)'
            },
            {
              offset: 1,
              color: 'rgba(48, 220, 255, 0.5)'
            }
          ]),
          shadowColor: 'rgba(48, 220, 255, 0.8)',
          shadowBlur: 15
        }
      },
      markLine: {
        data: [
          {
            yAxis: 15.5,
            label: {
              formatter: '警戒水位可纳雨量',
              color: '#ffcc00',
              position: 'insideMiddleTop',
              fontSize: 10,
              align: 'center'
            },
            lineStyle: {
              color: '#ffcc00',
              width: 1,
              type: 'dashed'
            }
          },
          {
            yAxis: 28.3,
            label: {
              formatter: '堤顶高程可纳雨量',
              color: '#ff0000',
              position: 'insideMiddleTop',
              fontSize: 10,
              align: 'center'
            },
            lineStyle: {
              color: '#ff0000',
              width: 1,
              type: 'dashed'
            }
          }
        ]
      }
    }
  ]
})

// 降雨量图表配置
const polderRainfallChartOption = ref({
  grid: {
    left: '3%',
    top: '15%',
    right: '3%',
    bottom: '12%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    },
    formatter: function(params) {
      let result = params[0].name + '<br/>';
      params.forEach(item => {
        result += item.marker + item.seriesName + ': ' + item.value + ' mm<br/>';
      });
      return result;
    }
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
    axisLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.6)'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 9
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 5,
    axisLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.6)'
      }
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      fontSize: 9,
      formatter: '{value} mm'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(48, 220, 255, 0.2)'
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 20, 40, 0.9)',
    borderColor: 'rgba(48, 220, 255, 0.5)',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: '降雨量',
      type: 'bar',
      barWidth: '30%',
      data: [0.2, 0.5, 1.2, 0.8, 0.3, 0.1, 0.2, 0.4],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(48, 220, 255, 0.8)'
          },
          {
            offset: 1,
            color: 'rgba(48, 220, 255, 0.3)'
          }
        ]),
        shadowColor: 'rgba(48, 220, 255, 0.6)',
        shadowBlur: 10
      }
    }
  ]
})

// 内涝识别数据
const waterloggingStats = ref({
  count: 0,
  total: 15,
  isWaterlogging: false
})

// 监控点数据
const monitoringPoints = ref([
  { name: '监控点1', image: cityFlood1 },
  { name: '监控点2', image: cityFlood2 },
  { name: '监控点3', image: cityFlood3 }
])

// 显示监控点状态
const showMonitoringPoints = ref(true)
</script>

<style lang="scss" scoped>
.polder-detail-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.left-panel {
  position: absolute;
  z-index: 4;
  width: 398px;
  left: 32px;
  top: 100px;
  bottom: 50px;
  perspective: 500px;
  perspective-origin: 50% 50%;
}

.left-panel-3d {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
  z-index: 4;
}

.right-panel {
  position: absolute;
  z-index: 4;
  width: 398px;
  right: 32px;
  top: 100px;
  bottom: 50px;
  perspective: 500px;
  perspective-origin: 50% 50%;
}

.right-panel-3d {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
  z-index: 4;
}

.water-station-card {
  pointer-events: auto;
  
  &.water-station-card-top {
    flex-shrink: 0;
  }
  
  &.water-station-card-bottom {
    flex: 1;
    min-height: 200px;
  }
}

.water-level-analysis-panel {
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(0, 30, 60, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.water-level-tabs {
  display: flex;
  gap: 4px;
  padding: 2px;
  background: rgba(0, 100, 150, 0.3);
  border-radius: 3px;
  
  .tab-item {
    flex: 1;
    padding: 3px 6px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 50, 100, 0.5);
    border: 1px solid rgba(48, 220, 255, 0.3);
    
    span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }
    
    &:hover {
      background: rgba(0, 80, 120, 0.6);
      border-color: rgba(48, 220, 255, 0.5);
    }
    
    &.active {
      background: rgba(48, 220, 255, 0.2);
      border-color: rgba(48, 220, 255, 0.8);
      box-shadow: 0 0 6px rgba(48, 220, 255, 0.3);
      
      span {
        color: #30dcff;
        font-weight: bold;
      }
    }
  }
}

.water-level-data {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px;
  background: rgba(0, 100, 150, 0.3);
  border-radius: 4px;
  
  .data-item {
    text-align: center;
    
    .data-label {
      font-size: 9px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 1px;
    }
    
    .data-value {
      font-size: 11px;
      font-weight: bold;
      color: #30dcff;
      font-family: "D-DIN";
      
      &.negative {
        color: #ff6b6b;
      }
    }
  }
}

.water-level-chart {
  flex: 1;
  min-height: 180px;
  padding: 0;
  display: flex;
  
  :deep(.echarts-container) {
    width: 100% !important;
    height: 100% !important;
  }
}

.polder-work-status-panel {
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  background: rgba(0, 30, 60, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pump-status-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pump-status-card {
  background: rgba(0, 100, 150, 0.3);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 6px;
  text-align: center;
  
  .pump-name {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
  }
  
  .pump-status {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    
    &.status-active {
      color: #00ff88;
      text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    }
    
    &.status-inactive {
      color: #ff6b6b;
    }
  }
  
  .pump-flow {
    font-size: 10px;
    color: #30dcff;
  }
}

.flow-chart-container,
.discharge-chart-container {
  flex: 1;
  background: rgba(0, 100, 150, 0.2);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 4px;
  min-height: 160px;
  
  .chart-title {
    font-size: 12px;
    color: #30dcff;
    margin-bottom: 2px;
    text-align: center;
    font-weight: bold;
  }
  
  :deep(.echarts-container) {
    width: 100% !important;
    height: 100% !important;
  }
}

.rainfall-forecast-panel {
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(0, 30, 60, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rainfall-top-row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-height: 200px;
}

.empty-container {
  flex: 1;
  background: rgba(0, 100, 150, 0.2);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 4px;
  min-height: 100px;
}

.forecast-carousel {
  flex: 4;
  position: relative;
  overflow: hidden;
  background: rgba(0, 100, 150, 0.3);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 10px;
  
  .carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    height: 120px;
    
    .forecast-card {
      flex: 0 0 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      
      .forecast-date {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 8px;
      }
      
      .forecast-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 8px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
      
      .forecast-icon.rainy {
        background-image: url('@/assets/images/qixiang/暴雨.png');
      }
      
      .forecast-icon.cloudy {
        background-image: url('@/assets/images/qixiang/多云.png');
      }
      
      .forecast-icon.sunny {
        background-image: url('@/assets/images/qixiang/晴天.png');
      }
      
      .forecast-desc {
        font-size: 14px;
        color: #30dcff;
        margin-bottom: 4px;
      }
      
      .forecast-temp {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  .carousel-indicators {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    
    .indicator {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &.active {
        background: #30dcff;
        transform: scale(1.2);
      }
    }
  }
}

.rainfall-capacity-chart-container {
  flex: 6;
  background: rgba(0, 100, 150, 0.2);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 4px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 12px;
    color: #30dcff;
    margin-bottom: 4px;
    text-align: center;
    font-weight: bold;
    flex-shrink: 0;
  }
  
  :deep(.echarts-container) {
    width: 100% !important;
    height: 90px !important;
  }
}

.rainfall-chart-container {
  flex: 1;
  background: rgba(0, 100, 150, 0.2);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 4px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 12px;
    color: #30dcff;
    margin-bottom: 4px;
    text-align: center;
    font-weight: bold;
    flex-shrink: 0;
  }
  
  :deep(.echarts-container) {
    width: 100% !important;
    height: 100px !important;
  }
}

.waterlogging-detection-panel {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0, 30, 60, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waterlogging-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.waterlogging-stats .stat-item {
  background: rgba(0, 100, 150, 0.3);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  
  .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
  }
  
  .stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #30dcff;
    font-family: "D-DIN";
    
    &.status-active {
      color: #00ff88;
      text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    }
    
    &.status-inactive {
      color: #ff6b6b;
    }
  }
}

.monitoring-button-container {
  display: flex;
  justify-content: center;
  margin: 5px 0;
}

.monitoring-button {
  background: linear-gradient(135deg, rgba(48, 220, 255, 0.3) 0%, rgba(0, 191, 255, 0.2) 100%);
  border: 1px solid rgba(48, 220, 255, 0.4);
  border-radius: 4px;
  padding: 6px 12px;
  color: #30dcff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(135deg, rgba(48, 220, 255, 0.4) 0%, rgba(0, 191, 255, 0.3) 100%);
    border-color: rgba(48, 220, 255, 0.6);
    box-shadow: 0 0 8px rgba(48, 220, 255, 0.3);
  }
}

.monitoring-points {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    width: 4px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(48, 220, 255, 0.4);
    border-radius: 2px;
  }
}

.monitoring-point {
  background: rgba(0, 100, 150, 0.3);
  border: 1px solid rgba(48, 220, 255, 0.3);
  border-radius: 4px;
  padding: 8px;
  
  .point-name {
    font-size: 12px;
    color: #30dcff;
    margin-bottom: 4px;
    font-weight: bold;
  }
  
  .point-image {
    width: 100%;
    height: 120px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(48, 220, 255, 0.3);
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.polder-layer-controls {
  position: absolute;
  left: 1450px;
  top: 260px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
  pointer-events: auto;
  
  .toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 20, 40, 0.8);
    border-radius: 6px;
    
    .toggle-text {
      color: #fff;
      font-size: 14px;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    }
    
    .toggle-switch {
      width: 44px;
      height: 22px;
      background: rgba(100, 100, 100, 0.5);
      border-radius: 11px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      
      .toggle-knob {
        position: absolute;
        left: 2px;
        top: 2px;
        width: 18px;
        height: 18px;
        background: #a3dcde;
        border-radius: 50%;
        transition: all 0.3s ease;
      }
      
      &.active {
        background: rgba(48, 220, 255, 0.4);
        box-shadow: 0 0 10px rgba(48, 220, 255, 0.3);
        
        .toggle-knob {
          left: 24px;
          background: #30dcff;
          box-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
        }
      }
    }
  }
}
</style>