|
|
@@ -0,0 +1,2112 @@
|
|
|
+<template>
|
|
|
+ <div class="water-station-content">
|
|
|
+ <!-- 顶部统计卡片 - 仅在圩区总览页面显示 -->
|
|
|
+ <TopStats v-if="!selectedPolderDetail && !showHydrologyDetail" />
|
|
|
+ <!-- 圩区总览 -->
|
|
|
+ <template v-if="!selectedPolderDetail && !showHydrologyDetail">
|
|
|
+ <!-- 防汛抗旱 -->
|
|
|
+ <template v-if="activeTab === 'flood'">
|
|
|
+ <div class="left-panel">
|
|
|
+ <div class="left-panel-3d">
|
|
|
+ <!-- 水情数据 -->
|
|
|
+ <m-card title="水情数据" class="water-station-card" :width="398" :height="400" @click="handleDefaultCardClick">
|
|
|
+ <div class="stats-panel">
|
|
|
+ <!-- 水位数据部分 -->
|
|
|
+ <div class="data-section water-level-section">
|
|
|
+ <div class="section-title">水位数据</div>
|
|
|
+ <div class="data-grid">
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-value">134个</div>
|
|
|
+ <div class="data-label">监测站点</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-value">100%</div>
|
|
|
+ <div class="data-label">监测覆盖率</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item full-width">
|
|
|
+ <div class="data-label">共享数据</div>
|
|
|
+ <div class="data-value">省内XX个 省外(上海)xx个</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 流量数据部分 -->
|
|
|
+ <div class="data-section flow-section">
|
|
|
+ <div class="section-title">流量数据</div>
|
|
|
+ <div class="data-grid">
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-value">134个</div>
|
|
|
+ <div class="data-label">监测站点</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-value">100%</div>
|
|
|
+ <div class="data-label">监测覆盖率</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+
|
|
|
+ <!-- 工情数据 -->
|
|
|
+ <m-card title="工情数据" class="water-station-card" :width="398" :height="280" @click="handleDefaultCardClick">
|
|
|
+ <div class="stats-panel">
|
|
|
+ <!-- 上边四条数据 -->
|
|
|
+ <div class="stats-grid">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">18</div>
|
|
|
+ <div class="stat-label">骨干河道(条)</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">618</div>
|
|
|
+ <div class="stat-label">防洪闸(座)</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">560</div>
|
|
|
+ <div class="stat-label">排涝站(座)</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">2173</div>
|
|
|
+ <div class="stat-label">排涝流量(m³/S)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 下边泵站数据 -->
|
|
|
+ <div class="pump-stations-section">
|
|
|
+ <div class="pump-stations-grid">
|
|
|
+ <div class="pump-station-item active">
|
|
|
+ <div class="pump-name">泵站1</div>
|
|
|
+ <div class="pump-status">开</div>
|
|
|
+ <div class="pump-flow">2.3m³/s</div>
|
|
|
+ </div>
|
|
|
+ <div class="pump-station-item active">
|
|
|
+ <div class="pump-name">泵站2</div>
|
|
|
+ <div class="pump-status">开</div>
|
|
|
+ <div class="pump-flow">2.3m³/s</div>
|
|
|
+ </div>
|
|
|
+ <div class="pump-station-item active">
|
|
|
+ <div class="pump-name">泵站3</div>
|
|
|
+ <div class="pump-status">开</div>
|
|
|
+ <div class="pump-flow">2.3m³/s</div>
|
|
|
+ </div>
|
|
|
+ <div class="pump-station-item">
|
|
|
+ <div class="pump-name">泵站4</div>
|
|
|
+ <div class="pump-status">关</div>
|
|
|
+ <div class="pump-flow">2.3m³/s</div>
|
|
|
+ </div>
|
|
|
+ <div class="pump-station-item more-btn" @click="showPumpStationList">
|
|
|
+ <div class="more-text">更多</div>
|
|
|
+ <div class="more-arrow">›</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+
|
|
|
+ <!-- 气象数据 -->
|
|
|
+ <m-card title="气象数据" class="water-station-card" :width="398" :height="280" @click="handleDefaultCardClick">
|
|
|
+ <div class="weather-panel">
|
|
|
+ <!-- 区域监测覆盖信息 -->
|
|
|
+ <div class="coverage-section">
|
|
|
+ <div class="coverage-item">
|
|
|
+ <div class="coverage-title">实现区域监测全覆盖</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 雨量站信息 -->
|
|
|
+ <div class="rainfall-stations-section">
|
|
|
+ <div class="station-item">
|
|
|
+ <div class="station-icon">🌧️</div>
|
|
|
+ <div class="station-info">
|
|
|
+ <div class="station-value">38个</div>
|
|
|
+ <div class="station-label">自建气象雨量站</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station-item">
|
|
|
+ <div class="station-icon">📡</div>
|
|
|
+ <div class="station-info">
|
|
|
+ <div class="station-value">72个</div>
|
|
|
+ <div class="station-label">共享雨量站</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 微波测雨信息 -->
|
|
|
+ <div class="microwave-section">
|
|
|
+ <div class="microwave-item">
|
|
|
+ <div class="microwave-icon">🔬</div>
|
|
|
+ <div class="microwave-info">
|
|
|
+ <div class="microwave-label">昆山市微波测雨</div>
|
|
|
+ <div class="microwave-value">XX个</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧面板 -->
|
|
|
+ <div class="right-panel">
|
|
|
+ <div class="right-panel-3d">
|
|
|
+ <!-- 水质数据 -->
|
|
|
+ <m-card title="水质数据" class="water-station-card" :width="398" :height="450" @click="handleQualityCardClick">
|
|
|
+ <div class="water-quality-panel">
|
|
|
+ <!-- 优Ⅲ比例和优Ⅱ比例 -->
|
|
|
+ <div class="quality-achievement">
|
|
|
+ <div class="achievement-item">
|
|
|
+ <div class="achievement-label">国考断面优Ⅲ比例</div>
|
|
|
+ <div class="achievement-value">90%</div>
|
|
|
+ </div>
|
|
|
+ <div class="achievement-item">
|
|
|
+ <div class="achievement-label">优Ⅱ比例</div>
|
|
|
+ <div class="achievement-value">60%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 区域水质评价 -->
|
|
|
+ <div class="area-quality-evaluation">
|
|
|
+ <div class="evaluation-title">区域水质评价</div>
|
|
|
+ <div class="evaluation-stats">
|
|
|
+ <div class="evaluation-item">
|
|
|
+ <div class="evaluation-label">总体水质状况</div>
|
|
|
+ <div class="evaluation-value good">良好</div>
|
|
|
+ </div>
|
|
|
+ <div class="evaluation-item">
|
|
|
+ <div class="evaluation-label">主要污染因子</div>
|
|
|
+ <div class="evaluation-value">氨氮</div>
|
|
|
+ </div>
|
|
|
+ <div class="evaluation-item">
|
|
|
+ <div class="evaluation-label">达标率</div>
|
|
|
+ <div class="evaluation-value">92%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 监测指标数据 -->
|
|
|
+ <div class="monitoring-indicators-section">
|
|
|
+ <div class="indicators-header">
|
|
|
+ <span class="indicators-title">监测指标</span>
|
|
|
+ <span class="indicators-count">{{ qualityIndicators.length }}个</span>
|
|
|
+ </div>
|
|
|
+ <div class="water-quality-indicators">
|
|
|
+ <div class="indicators-scroll">
|
|
|
+ <div class="indicators-grid">
|
|
|
+ <div class="indicator-item" v-for="(indicator, index) in qualityIndicators" :key="index">
|
|
|
+ <div class="icon" :style="{ backgroundColor: getIndicatorColor(index) }"></div>
|
|
|
+ <div class="name">{{ indicator.name }}</div>
|
|
|
+ <div class="unit">{{ indicator.unit || '-' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+
|
|
|
+ <!-- 水资源数据 -->
|
|
|
+ <m-card title="水资源数据" class="water-station-card" :width="398" :height="450" @click="handleResourceCardClick">
|
|
|
+ <div class="water-resource-panel">
|
|
|
+ <!-- 全量监测核心数据 -->
|
|
|
+ <div class="core-data-grid">
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-label">今日入境水量</div>
|
|
|
+ <div class="data-value">125<span class="unit">万m³</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-label">今日出境水量</div>
|
|
|
+ <div class="data-value">118<span class="unit">万m³</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-label">本月累计差值</div>
|
|
|
+ <div class="data-value">+156<span class="unit">万m³</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-label">监测站点覆盖率</div>
|
|
|
+ <div class="data-value">98<span class="unit">%</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-label">水资源利用效率</div>
|
|
|
+ <div class="data-value">85<span class="unit">%</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-label">污水日处理能力</div>
|
|
|
+ <div class="data-value">104<span class="unit">万吨/天</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 出入境对比分析 -->
|
|
|
+ <div class="water-flow-analysis">
|
|
|
+ <div class="analysis-header">
|
|
|
+ <div class="time-range">
|
|
|
+ <button :class="{ 'active': timeRange === 'day' }" @click="timeRange = 'day'">日</button>
|
|
|
+ <button :class="{ 'active': timeRange === 'month' }" @click="timeRange = 'month'">月</button>
|
|
|
+ <button :class="{ 'active': timeRange === 'year' }" @click="timeRange = 'year'">年</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图表 -->
|
|
|
+ <div class="flow-chart" ref="flowChartRef"></div>
|
|
|
+
|
|
|
+ <!-- 预警提示 -->
|
|
|
+ <div class="warning-alert" v-if="hasWarning">
|
|
|
+ <div class="alert-icon">⚠️</div>
|
|
|
+ <div class="alert-content">
|
|
|
+ <div class="alert-title">水量异常预警</div>
|
|
|
+ <div class="alert-message">入境水量骤减，建议加强监测</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 水环境 -->
|
|
|
+ <WaterEnvironment v-else-if="activeTab === 'environment'" />
|
|
|
+
|
|
|
+ <!-- 水资源 -->
|
|
|
+ <WaterResource v-else-if="activeTab === 'resource'" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 圩区详情 -->
|
|
|
+ <template v-else-if="!showHydrologyDetail">
|
|
|
+ <PolderDetail
|
|
|
+ :selectedPolderDetail="selectedPolderDetail"
|
|
|
+ :showGate="showGate"
|
|
|
+ :showHydrology="showHydrology"
|
|
|
+ @update:showGate="$emit('update:showGate', $event)"
|
|
|
+ @update:showHydrology="$emit('update:showHydrology', $event)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 水文站详情 -->
|
|
|
+ <template v-else-if="showHydrologyDetail">
|
|
|
+ <HydrologyDetail />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, nextTick, watch, computed } from "vue"
|
|
|
+import mCard from "@/components/mCard/index.vue"
|
|
|
+import VChart from "vue-echarts"
|
|
|
+import * as echarts from "echarts"
|
|
|
+import TopStats from "./TopStats.vue"
|
|
|
+import PolderDetail from "./PolderDetail.vue"
|
|
|
+import HydrologyDetail from "./HydrologyDetail.vue"
|
|
|
+import WaterEnvironment from "./WaterEnvironment.vue"
|
|
|
+import WaterResource from "./WaterResource.vue"
|
|
|
+import gsap from "gsap"
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ selectedPolderDetail: {
|
|
|
+ type: String,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ showGate: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ showHydrology: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ showHydrologyDetail: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+})
|
|
|
+const emit = defineEmits(['update:showGate', 'update:showHydrology', 'update:activeTab'])
|
|
|
+
|
|
|
+const activeTab = ref('flood')
|
|
|
+
|
|
|
+const polderList = ref([
|
|
|
+ { name: '庙泾联圩', waterLevel: '2.19', controlLevel: '2.50', flow: '3.20', rate: '28%' },
|
|
|
+ { name: '西河联圩', waterLevel: '2.74', controlLevel: '3.10', flow: '3.00', rate: '17%' },
|
|
|
+ { name: '永胜联圩', waterLevel: '—', controlLevel: '3.20', flow: '0.80', rate: '13%' },
|
|
|
+ { name: '包桥联圩', waterLevel: '2.72', controlLevel: '3.10', flow: '11.70', rate: '12%' },
|
|
|
+ { name: '城南联圩', waterLevel: '2.62', controlLevel: '3.10', flow: '8.50', rate: '10%' },
|
|
|
+ { name: '曹安路南联圩', waterLevel: '2.69', controlLevel: '3.10', flow: '5.10', rate: '7%' },
|
|
|
+ { name: '枫塘联圩', waterLevel: '2.14', controlLevel: '2.40', flow: '1.00', rate: '2%' },
|
|
|
+ { name: '北大联圩', waterLevel: '2.73', controlLevel: '3.10', flow: '0.00', rate: '0%' },
|
|
|
+ { name: '娄江联圩', waterLevel: '2.11', controlLevel: '3.10', flow: '0.00', rate: '0%' },
|
|
|
+ { name: '孔巷联圩', waterLevel: '—', controlLevel: '3.10', flow: '0.00', rate: '0%' },
|
|
|
+ { name: '南大联圩', waterLevel: '2.71', controlLevel: '3.10', flow: '0.00', rate: '0%' }
|
|
|
+])
|
|
|
+
|
|
|
+const stationRanking = ref([
|
|
|
+ { district: '巴城镇', name: '巴城湖', level: '2.89', time: '02-12 10:05' },
|
|
|
+ { district: '周市镇', name: '斜塘', level: '2.85', time: '02-12 10:05' },
|
|
|
+ { district: '高新区', name: '赵库', level: '2.81', time: '02-12 10:05' },
|
|
|
+ { district: '开发区', name: '兵希(浏)', level: '2.76', time: '02-12 10:05' },
|
|
|
+ { district: '张浦镇', name: '大直', level: '2.70', time: '02-12 10:05' },
|
|
|
+ { district: '陆家镇', name: '友谊(夏)', level: '2.69', time: '02-12 10:05' },
|
|
|
+ { district: '花桥镇', name: '石浦(吴)', level: '2.62', time: '02-12 10:05' },
|
|
|
+ { district: '千灯镇', name: '迮塘浦', level: '2.57', time: '02-12 09:50' },
|
|
|
+ { district: '周庄镇', name: '周庄站', level: '2.56', time: '02-12 10:05' },
|
|
|
+ { district: '锦溪镇', name: '锦溪(赵田港)', level: '2.53', time: '02-12 10:05' },
|
|
|
+ { district: '淀山湖镇', name: '清水湾', level: '2.52', time: '02-12 10:05' }
|
|
|
+])
|
|
|
+
|
|
|
+const resourceList = ref([
|
|
|
+ { name: '巴城湖水源地', type: '湖泊', capacity: '1200万m³', rate: '85%' },
|
|
|
+ { name: '傀儡湖水源地', type: '湖泊', capacity: '800万m³', rate: '90%' },
|
|
|
+ { name: '吴淞江水源地', type: '河道', capacity: '500万m³', rate: '75%' },
|
|
|
+ { name: '娄江水源地', type: '河道', capacity: '300万m³', rate: '80%' },
|
|
|
+ { name: '阳澄湖水源地', type: '湖泊', capacity: '2000万m³', rate: '92%' }
|
|
|
+])
|
|
|
+
|
|
|
+// 水质指标数据
|
|
|
+const qualityIndicators = ref([
|
|
|
+ { name: '总磷', value: 0.12, unit: 'mg/L', status: '正常', percent: 60, isOverLimit: false },
|
|
|
+ { name: '总氮', value: 1.2, unit: 'mg/L', status: '正常', percent: 60, isOverLimit: false },
|
|
|
+ { name: '氨氮', value: 0.45, unit: 'mg/L', status: '正常', percent: 45, isOverLimit: false },
|
|
|
+ { name: '电导率', value: 280, unit: 'μS/cm', status: '正常', percent: 56, isOverLimit: false },
|
|
|
+ { name: '溶解氧', value: 6.8, unit: 'mg/L', status: '正常', percent: 85, isOverLimit: false },
|
|
|
+ { name: 'pH值', value: 7.2, unit: '', status: '正常', percent: 72, isOverLimit: false },
|
|
|
+ { name: '悬浮物', value: 12, unit: 'mg/L', status: '正常', percent: 48, isOverLimit: false },
|
|
|
+ { name: '泥沙含量', value: 0.05, unit: 'kg/m³', status: '正常', percent: 25, isOverLimit: false },
|
|
|
+ { name: '水温', value: 18.5, unit: '℃', status: '正常', percent: 74, isOverLimit: false }
|
|
|
+])
|
|
|
+
|
|
|
+// 获取指标颜色
|
|
|
+const getIndicatorColor = (index) => {
|
|
|
+ const colors = [
|
|
|
+ '#17E6C3', '#40CFE1', '#1979FF', '#FFC472', '#FF6B6B',
|
|
|
+ '#4ECDC4', '#17E6C3', '#40CFE1', '#1979FF', '#FFC472',
|
|
|
+ '#FF6B6B', '#4ECDC4', '#17E6C3', '#40CFE1', '#1979FF',
|
|
|
+ '#FFC472', '#FF6B6B', '#4ECDC4', '#17E6C3', '#40CFE1'
|
|
|
+ ]
|
|
|
+ return colors[index % colors.length]
|
|
|
+}
|
|
|
+
|
|
|
+// 水资源数据相关变量
|
|
|
+const timeRange = ref('day')
|
|
|
+const hasWarning = ref(true)
|
|
|
+
|
|
|
+// 图表引用
|
|
|
+const flowChartRef = ref(null)
|
|
|
+let flowChart = null
|
|
|
+
|
|
|
+// 初始化出入境对比分析图表
|
|
|
+function initFlowChart() {
|
|
|
+ if (!flowChartRef.value) return
|
|
|
+
|
|
|
+ flowChart = echarts.init(flowChartRef.value)
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['入境水量', '出境水量', '差值'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: timeRange.value === 'day' ? ['1日', '2日', '3日', '4日', '5日', '6日', '7日'] :
|
|
|
+ timeRange.value === 'month' ? ['1月', '2月', '3月', '4月', '5月', '6月'] :
|
|
|
+ ['2020年', '2021年', '2022年', '2023年', '2024年', '2025年'],
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '水量 (万m³)',
|
|
|
+ min: 0,
|
|
|
+ max: timeRange.value === 'day' ? 150 : timeRange.value === 'month' ? 4000 : 60000,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ color: '#ffffff'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.2)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入境水量',
|
|
|
+ type: 'bar',
|
|
|
+ data: timeRange.value === 'day' ? [120, 125, 118, 105, 98, 110, 122] :
|
|
|
+ timeRange.value === 'month' ? [3800, 3900, 4100, 3700, 3600, 3800] :
|
|
|
+ [52000, 53000, 54000, 54500, 53800, 54200],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00BFFF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '出境水量',
|
|
|
+ type: 'bar',
|
|
|
+ data: timeRange.value === 'day' ? [115, 118, 110, 100, 95, 105, 115] :
|
|
|
+ timeRange.value === 'month' ? [3600, 3700, 3900, 3500, 3400, 3600] :
|
|
|
+ [50000, 51000, 52000, 52500, 51800, 52200],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF6347'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '差值',
|
|
|
+ type: 'line',
|
|
|
+ data: timeRange.value === 'day' ? [5, 7, 8, 5, 3, 5, 7] :
|
|
|
+ timeRange.value === 'month' ? [200, 200, 200, 200, 200, 200] :
|
|
|
+ [2000, 2000, 2000, 2000, 2000, 2000],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#4CAF50'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ flowChart.setOption(option)
|
|
|
+}
|
|
|
+
|
|
|
+// 监听时间范围变化
|
|
|
+watch(timeRange, () => {
|
|
|
+ initFlowChart()
|
|
|
+})
|
|
|
+
|
|
|
+// 组件挂载时初始化图表
|
|
|
+onMounted(() => {
|
|
|
+ initFlowChart()
|
|
|
+
|
|
|
+ // 监听窗口大小变化，调整图表大小
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ flowChart?.resize()
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+// 开泵台数和流量组合图表配置
|
|
|
+const pumpChart = ref(null)
|
|
|
+const pumpChartOption = ref({
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ top: '15%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '15%',
|
|
|
+ height: '70%',
|
|
|
+ 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 => {
|
|
|
+ let unit = item.seriesName === '开泵台数' ? ' 台' : ' m³/s';
|
|
|
+ result += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>';
|
|
|
+ });
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['开泵台数', '开泵流量'],
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ top: 0
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '台数',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ 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)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '流量(m³/s)',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 107, 107, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '开泵台数',
|
|
|
+ type: 'bar',
|
|
|
+ data: [0, 1, 2, 2, 1, 0],
|
|
|
+ barWidth: '40%',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#30dcff',
|
|
|
+ shadowColor: 'rgba(48, 220, 255, 0.6)',
|
|
|
+ shadowBlur: 5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '开泵流量',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: [0, 1.5, 3.2, 3.0, 1.6, 0],
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ff6b6b',
|
|
|
+ width: 2,
|
|
|
+ shadowColor: 'rgba(255, 107, 107, 0.6)',
|
|
|
+ shadowBlur: 5
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(255, 107, 107, 0.3)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255, 107, 107, 0.1)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 排水量折线图配置
|
|
|
+const drainageChart = ref(null)
|
|
|
+const drainageChartOption = ref({
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ top: '10%',
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['当日排水量'],
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ top: 0
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '万m³',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ 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)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '当日排水量',
|
|
|
+ type: 'line',
|
|
|
+ data: [0, 0.1, 0.3, 0.5, 0.7, 0.9],
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#4ecdc4',
|
|
|
+ width: 2,
|
|
|
+ shadowColor: 'rgba(78, 205, 196, 0.6)',
|
|
|
+ shadowBlur: 5
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(78, 205, 196, 0.3)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(78, 205, 196, 0.1)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 水质数据图表配置
|
|
|
+const qualityChart = ref(null)
|
|
|
+const qualityChartOption = 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'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['溶解氧', '氨氮', '总磷'],
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ top: 0
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ 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)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '溶解氧',
|
|
|
+ type: 'line',
|
|
|
+ data: [7.2, 7.5, 7.8, 8.0, 7.9, 7.7],
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#4ecdc4',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '氨氮',
|
|
|
+ type: 'line',
|
|
|
+ data: [0.5, 0.4, 0.3, 0.2, 0.3, 0.4],
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ff6b6b',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总磷',
|
|
|
+ type: 'line',
|
|
|
+ data: [0.08, 0.07, 0.06, 0.05, 0.06, 0.07],
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#45b7d1',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 计算是否显示圩区总览
|
|
|
+const isOverview = computed(() => {
|
|
|
+ return !props.selectedPolderDetail && !props.showHydrologyDetail
|
|
|
+})
|
|
|
+
|
|
|
+// 切换标签页
|
|
|
+function switchTab(tab) {
|
|
|
+ activeTab.value = tab
|
|
|
+ emit('update:activeTab', tab)
|
|
|
+}
|
|
|
+
|
|
|
+// 执行动画
|
|
|
+function executeAnimations() {
|
|
|
+ nextTick(() => {
|
|
|
+ gsap.to(".water-station-content .water-station-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
|
|
|
+ gsap.to(".water-station-content .count-card", { y: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 显示泵站列表
|
|
|
+function showPumpStationList() {
|
|
|
+ // 这里可以实现弹出列表的逻辑
|
|
|
+ // 目前只是一个示例，实际项目中可能需要使用模态框或其他组件
|
|
|
+ console.log('显示泵站列表');
|
|
|
+ // 示例：可以使用element-plus的MessageBox或Dialog组件
|
|
|
+ // MessageBox.alert('泵站列表将在此显示', '泵站详情');
|
|
|
+}
|
|
|
+
|
|
|
+// 水质数据卡片点击事件
|
|
|
+function handleQualityCardClick() {
|
|
|
+ emit('update:activeTab', 'environment');
|
|
|
+}
|
|
|
+
|
|
|
+// 水资源数据卡片点击事件
|
|
|
+function handleResourceCardClick() {
|
|
|
+ emit('update:activeTab', 'resource');
|
|
|
+}
|
|
|
+
|
|
|
+// 默认卡片点击事件（水情、工情、气象）
|
|
|
+function handleDefaultCardClick() {
|
|
|
+ emit('update:activeTab', 'flood');
|
|
|
+}
|
|
|
+
|
|
|
+// 组件挂载时执行动画
|
|
|
+onMounted(() => {
|
|
|
+ executeAnimations()
|
|
|
+})
|
|
|
+
|
|
|
+// 监听状态变化，重新执行动画
|
|
|
+watch(
|
|
|
+ [() => props.selectedPolderDetail, () => props.showHydrologyDetail, () => activeTab.value],
|
|
|
+ () => {
|
|
|
+ if (isOverview.value) {
|
|
|
+ // 重置元素初始状态
|
|
|
+ gsap.set(".water-station-content .water-station-card", { x: -150, opacity: 0 })
|
|
|
+ gsap.set(".water-station-content .count-card", { y: 150, opacity: 0 })
|
|
|
+
|
|
|
+ // 重新执行动画
|
|
|
+ executeAnimations()
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.water-station-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+/* 初始化动画开始位置 */
|
|
|
+.count-card {
|
|
|
+ transform: translateY(150%);
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-panel {
|
|
|
+ padding: 10px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 水情数据面板样式 */
|
|
|
+.data-section {
|
|
|
+ background: rgba(0, 30, 60, 0.6);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.water-level-section {
|
|
|
+ border-left: 3px solid #30dcff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.flow-section {
|
|
|
+ border-left: 3px solid #4ecdc4;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30dcff;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-item {
|
|
|
+ background: rgba(0, 180, 255, 0.2);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 180, 255, 0.3);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.full-width {
|
|
|
+ grid-column: span 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.data-value {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #30DCFF;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ text-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
|
|
|
+ margin-bottom: 3px;
|
|
|
+ line-height: 1.1;
|
|
|
+}
|
|
|
+
|
|
|
+.data-label {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 工情数据 - 泵站部分样式 */
|
|
|
+.pump-stations-section {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-top: 10px;
|
|
|
+ border-top: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.pump-stations-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.pump-station-item {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: rgba(0, 255, 136, 0.3);
|
|
|
+ border-color: rgba(0, 255, 136, 0.6);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.more-btn {
|
|
|
+ background: rgba(48, 220, 255, 0.2);
|
|
|
+ border-color: rgba(48, 220, 255, 0.5);
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(48, 220, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pump-name {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #30dcff;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.pump-status {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 3px;
|
|
|
+
|
|
|
+ .pump-station-item.active & {
|
|
|
+ color: #00ff88;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pump-station-item:not(.active):not(.more-btn) & {
|
|
|
+ color: #cccccc;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pump-flow {
|
|
|
+ font-size: 9px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.more-text {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #30dcff;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.more-arrow {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #30dcff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+/* 气象数据面板样式 */
|
|
|
+.weather-panel {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 覆盖信息部分 */
|
|
|
+.coverage-section {
|
|
|
+ background: rgba(0, 180, 255, 0.25);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.4);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.coverage-title {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30dcff;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 雨量站部分 */
|
|
|
+.rainfall-stations-section {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.station-item {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 100, 150, 0.6);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.station-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.station-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.station-value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30dcff;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ text-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
|
|
|
+ margin-bottom: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.station-label {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 微波测雨部分 */
|
|
|
+.microwave-section {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 100, 150, 0.6);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.microwave-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.microwave-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.microwave-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.microwave-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30dcff;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+/* 水质数据面板样式 */
|
|
|
+.water-quality-panel {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 水质比例部分 */
|
|
|
+.quality-ratios-section {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.ratio-item {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 100, 150, 0.6);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ratio-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.ratio-value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30dcff;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+/* 优Ⅲ比例和优Ⅱ比例样式 */
|
|
|
+.quality-achievement {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.achievement-item {
|
|
|
+ background: linear-gradient(135deg, rgba(48, 220, 255, 0.2) 0%, rgba(0, 191, 255, 0.15) 100%);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.4);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.achievement-label {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 10px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.achievement-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30DCFF;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ text-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+/* 区域水质评价样式 */
|
|
|
+.area-quality-evaluation {
|
|
|
+ padding: 10px;
|
|
|
+ background: rgba(0, 100, 150, 0.3);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .evaluation-title {
|
|
|
+ color: #30DCFF;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .evaluation-stats {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .evaluation-item {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .evaluation-label {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .evaluation-value {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30DCFF;
|
|
|
+ font-family: "D-DIN";
|
|
|
+
|
|
|
+ &.good {
|
|
|
+ color: #00ff88;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 站点分布样式 */
|
|
|
+.distribution-stats {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 6px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &.excellent {
|
|
|
+ border-color: #00ff88;
|
|
|
+ background: rgba(0, 255, 136, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.good {
|
|
|
+ border-color: #00d4ff;
|
|
|
+ background: rgba(0, 212, 255, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.poor {
|
|
|
+ border-color: #ff4444;
|
|
|
+ background: rgba(255, 68, 68, 0.15);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4px;
|
|
|
+
|
|
|
+ .stat-item.excellent & {
|
|
|
+ background: rgba(0, 255, 136, 0.3);
|
|
|
+ color: #00ff88;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item.good & {
|
|
|
+ background: rgba(0, 212, 255, 0.3);
|
|
|
+ color: #00d4ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item.poor & {
|
|
|
+ background: rgba(255, 68, 68, 0.3);
|
|
|
+ color: #ff4444;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-info {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ margin-bottom: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+}
|
|
|
+
|
|
|
+/* 监测指标部分 */
|
|
|
+.monitoring-indicators-section {
|
|
|
+ max-height: 180px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: rgba(0, 30, 60, 0.6);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.indicators-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ border-bottom: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.indicators-title {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #30DCFF;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.indicators-count {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+}
|
|
|
+
|
|
|
+.water-quality-indicators {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.indicators-scroll {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 4px;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.indicators-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.indicator-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 4px;
|
|
|
+ background: rgba(0, 100, 150, 0.3);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 100, 150, 0.5);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.indicator-item .icon {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 5px;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.indicator-item .name {
|
|
|
+ font-size: 9px;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ margin-bottom: 1px;
|
|
|
+ line-height: 1.1;
|
|
|
+}
|
|
|
+
|
|
|
+.indicator-item .unit {
|
|
|
+ font-size: 8px;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+}
|
|
|
+
|
|
|
+.stats-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ background: rgba(0, 180, 255, 0.25);
|
|
|
+ border: 1px solid rgba(0, 180, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px 10px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 180, 255, 0.35);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #30DCFF;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ margin-bottom: 3px;
|
|
|
+ text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
|
|
|
+
|
|
|
+ .stat-unit {
|
|
|
+ font-size: 10px;
|
|
|
+ margin-left: 2px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.polder-list {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+
|
|
|
+ .polder-list-header {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 15px;
|
|
|
+ background: rgba(0, 100, 150, 0.5);
|
|
|
+ border-bottom: 1px solid rgba(48, 220, 255, 0.4);
|
|
|
+ color: #30dcff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 13px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ .header-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .polder-list-body {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .polder-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-bottom: 1px solid rgba(48, 220, 255, 0.2);
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.4;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(48, 220, 255, 0.15);
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-cell {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 5px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ flex: 0 0 40px;
|
|
|
+ color: #30dcff;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 2;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-bar {
|
|
|
+ width: 60px;
|
|
|
+ height: 16px;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .rate-fill {
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #00d4ff, #30dcff);
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: width 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-size: 11px;
|
|
|
+ color: #fff;
|
|
|
+ text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-warning-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(90deg, #30dcff, transparent);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 6px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-title {
|
|
|
+ color: #30dcff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-status {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-time {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.warning-stats-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-stats-panel .stats-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-card {
|
|
|
+ background: rgba(0, 100, 150, 0.4);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.warning-stat {
|
|
|
+ border-color: #00d4ff;
|
|
|
+ background: rgba(0, 212, 255, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.alert-stat {
|
|
|
+ border-color: #ff4444;
|
|
|
+ background: rgba(255, 68, 68, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.normal-stat {
|
|
|
+ border-color: #00ff88;
|
|
|
+ background: rgba(0, 255, 136, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-title {
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
|
|
|
+
|
|
|
+ .warning-stat & {
|
|
|
+ color: #00d4ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert-stat & {
|
|
|
+ color: #ff4444;
|
|
|
+ }
|
|
|
+
|
|
|
+ .normal-stat & {
|
|
|
+ color: #00ff88;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.basin-work-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.monitoring-project-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(0, 180, 255, 0.25);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .monitoring-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitoring-project-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #30dcff;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ margin-right: 8px;
|
|
|
+ text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitoring-project-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pump-chart-container {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.drainage-chart-container {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.pump-chart-container :deep(.echarts-container),
|
|
|
+.drainage-chart-container :deep(.echarts-container),
|
|
|
+.quality-chart :deep(.echarts-container) {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 水质数据面板样式 */
|
|
|
+.water-quality-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.quality-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.quality-item {
|
|
|
+ background: rgba(0, 180, 255, 0.25);
|
|
|
+ border: 1px solid rgba(0, 180, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px 10px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 180, 255, 0.35);
|
|
|
+ border-color: rgba(48, 220, 255, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.quality-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #30DCFF;
|
|
|
+ font-family: "D-DIN";
|
|
|
+ margin-bottom: 3px;
|
|
|
+ text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.quality-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.quality-chart {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 水资源数据面板样式 */
|
|
|
+.water-resource-panel {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 全量监测核心数据 */
|
|
|
+.core-data-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .data-item {
|
|
|
+ text-align: center;
|
|
|
+ padding: 8px;
|
|
|
+ background: rgba(0, 100, 150, 0.3);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .data-label {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-value {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00BFFF;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 年用水总量 */
|
|
|
+.annual-water-usage {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+ background: rgba(0, 100, 150, 0.3);
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .usage-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usage-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00BFFF;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 出入境对比分析 */
|
|
|
+.water-flow-analysis {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .analysis-header {
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .time-range {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ button {
|
|
|
+ padding: 4px 12px;
|
|
|
+ border: 1px solid rgba(0, 191, 255, 0.3);
|
|
|
+ background: rgba(0, 20, 40, 0.6);
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 10px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #00BFFF;
|
|
|
+ color: #fff;
|
|
|
+ border-color: #00BFFF;
|
|
|
+ box-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-chart {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 250px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-alert {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px;
|
|
|
+ background: rgba(255, 87, 34, 0.1);
|
|
|
+ border: 1px solid rgba(255, 87, 34, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .alert-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FF5722;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert-content {
|
|
|
+ .alert-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ color: #FF5722;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert-message {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
WQQ