|
|
@@ -0,0 +1,364 @@
|
|
|
+<template>
|
|
|
+ <div class="hydrology-detail-content">
|
|
|
+ <!-- 左侧面板 -->
|
|
|
+ <div class="left-panel">
|
|
|
+ <div class="left-panel-3d">
|
|
|
+ <!-- 测站简介 -->
|
|
|
+ <m-card title="测站简介" class="water-station-card water-station-card-top" :width="398" :height="620">
|
|
|
+ <div class="station-intro-panel">
|
|
|
+ <div class="station-name">XX国家基本水文站</div>
|
|
|
+ <div class="station-image">
|
|
|
+ <img src="@/assets/images/太师桥近.png" alt="测站图片" style="width: 100%; height: 220px; object-fit: cover; border-radius: 4px;" />
|
|
|
+ </div>
|
|
|
+ <div class="station-info">
|
|
|
+ <p>XX水文站位于江苏省苏州市昆山市，在长江三角洲平原南部，石浦荡闸口处，为国家基本水文站。该站主要承担着水质监测、水文测验、水文预报等任务。</p>
|
|
|
+ <p>测验项目包括水位、流量、水质、泥沙、蒸发等。主要监测设备有遥测水位计、流量计、水质自动监测仪等。</p>
|
|
|
+ <p>该站建于1951年，经过多次改造和升级，现已实现水文监测自动化、信息化。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+
|
|
|
+ <!-- 现场监控 -->
|
|
|
+ <m-card title="现场监控" class="water-station-card water-station-card-bottom" :width="398" :height="280">
|
|
|
+ <div class="现场监控-panel">
|
|
|
+ <div class="监控-image">
|
|
|
+ <img src="@/assets/images/太师桥近.png" alt="现场监控" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;" />
|
|
|
+ </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="flow-monitoring-panel">
|
|
|
+ <VChart ref="flowChart" :option="flowChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+
|
|
|
+ <!-- 雨量监测 -->
|
|
|
+ <m-card title="雨量监测" class="water-station-card water-station-card-bottom" :width="398" :height="450">
|
|
|
+ <div class="rainfall-monitoring-panel">
|
|
|
+ <VChart ref="rainfallChart" :option="rainfallChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
|
|
|
+ </div>
|
|
|
+ </m-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue"
|
|
|
+import mCard from "@/components/mCard/index.vue"
|
|
|
+import VChart from "vue-echarts"
|
|
|
+import * as echarts from "echarts"
|
|
|
+
|
|
|
+// 流量监测图表配置
|
|
|
+const flowChartOption = ref({
|
|
|
+ grid: {
|
|
|
+ left: '8%',
|
|
|
+ top: '15%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '20%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['00:00', '02:20', '04:15', '06:10', '08:05', '10:00', '11:55', '13:55', '16:25', '18:30', '20:25', '22:20'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ min: -85,
|
|
|
+ max: 232,
|
|
|
+ interval: 50,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10,
|
|
|
+ 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: [60, 120, 80, 60, 70, 200, 40, 60, 100, 150, 80, 60],
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#30dcff',
|
|
|
+ width: 2,
|
|
|
+ shadowColor: 'rgba(48, 220, 255, 0.6)',
|
|
|
+ shadowBlur: 10
|
|
|
+ },
|
|
|
+ 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 rainfallChartOption = ref({
|
|
|
+ grid: {
|
|
|
+ left: '8%',
|
|
|
+ top: '15%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '20%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['12-04 00:00', '12-04 17:05', '12-03 09:45', '12-06 02:50', '12-06 19:45', '12-07 12:35', '12-08 05:45', '12-08 23:05', '12-09 16:35', '12-10 09:50', '12-11 03:15'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10,
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ interval: 0.2,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(48, 220, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.8)',
|
|
|
+ fontSize: 10,
|
|
|
+ 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',
|
|
|
+ data: [0.1, 0.3, 0.2, 0.5, 0.4, 0.1, 0.2, 0.3, 0.1, 0.2, 0.1],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#30dcff',
|
|
|
+ shadowColor: 'rgba(48, 220, 255, 0.6)',
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.hydrology-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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.station-intro-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-name {
|
|
|
+ color: #30dcff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-image {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-info {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.现场监控-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+
|
|
|
+ .监控-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid rgba(48, 220, 255, 0.3);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flow-monitoring-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+
|
|
|
+ :deep(.echarts-container) {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.rainfall-monitoring-panel {
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 30, 60, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+
|
|
|
+ :deep(.echarts-container) {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
BAI