完成水位模拟功能

src/assets/styles/element/index.scss

@@ -68,3 +68,14 @@ $--border-color: (
 .el-carousel__container {
   height: 100%;
 }
+
+.el-popper.is-dark {
+  color: var(--el-text-color-primary);
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-fill-color-light);
+}
+
+.el-popper.is-dark > .el-popper__arrow::before {
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-fill-color-light);
+}

src/views/Situational.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, reactive, ref} from 'vue'
+import {computed, onMounted, reactive, ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
@@ -23,6 +23,7 @@ import {Operate} from "@/utils/tdInstruction";
 const route = useRoute()
 const store = useStationStore()
 const dibaImage = (new URL('@/assets/images/dike.png', import.meta.url).href)
+const waterSliderBackground = (new URL('@/assets/images/card/card01.png', import.meta.url).href)
 
 
 const left2Ref = ref(null)
@@ -38,6 +39,40 @@ const wlData = reactive({
   bz: station.value.grz ? station.value.grz + '' : '0',
   jj: station.value.wrz ? station.value.wrz + '' : '0'
 })
+const waterLevel = ref(wlData.ss / 0.05)
+const waterLevelMarks = ref({
+  20: {
+    label: '1.00m'
+  },
+  40: {
+    style: {
+      color: '#67C23A'
+    },
+    label: '2.00m'
+  },
+  60: {
+    style: {
+      color: '#409EFF'
+    },
+    label: '3.00m'
+  },
+  80: {
+    style: {
+      color: '#E6A23C'
+    },
+    label: '4.00m'
+  },
+  100: {
+    style: {
+      color: '#F56C6C'
+    },
+    label: '5.00m'
+  }
+})
+
+function formatWaterLevelTooltip(val: number) {
+  return (val * 0.05).toFixed(2) + 'm' as string;
+}
 
 async function reloadLeft2() {
   const sevenDayAgo = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)
@@ -123,7 +158,7 @@ async function reloadLeft3() {
   if (currentStationData) {
     store.setZ(currentStationData.z)
     wlData.ss = currentStationData.z + ''
-    handleSetWaterLevel(wlData.ss)
+    waterLevel.value = currentStationData.z / 0.05
   }
 
   const seriesData = stationList.map(s => {
@@ -381,6 +416,10 @@ function handleSetWaterLevel(value) {
   Operate.setWaterLevel(route.params.stcd, value)
 }
 
+function handleControlWaterLevel(value) {
+  waterLevel.value = value * 0.05
+}
+
 onMounted(() => {
   reloadRight1()
   reloadRight3()
@@ -390,6 +429,10 @@ onMounted(() => {
   // 获取最新水质数据
   getLatestWaterQuality()
 })
+
+watch(() => waterLevel, (value) => {
+  handleSetWaterLevel(value.value * 0.05)
+}, {deep: true})
 </script>
 <template>
   <right-frame>
@@ -406,23 +449,30 @@ onMounted(() => {
           <el-col :span="8"
                   style="height: 66%;margin-bottom: 1%;display: flex;flex-direction: column;justify-content: space-between;">
             <color-tag :value="wlData.ss" label="实时水位" style="height: 48%;" unit="m"
-                       @click="handleSetWaterLevel(wlData.ss)"></color-tag>
+                       @click="handleControlWaterLevel(wlData.ss)"/>
             <color-tag :value="wlData.zg" label="历史最高水位" style="height: 48%;" unit="m"
-                       @click="handleSetWaterLevel(wlData.zg)"></color-tag>
+                       @click="handleSetWaterLevel(wlData.zg)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.bz" backgroundColor="#bb232f" label="保证水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.bz)"></color-tag>
+                       @click="handleSetWaterLevel(wlData.bz)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.jj" backgroundColor="#b38b30" label="警戒水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.jj)"></color-tag>
+                       @click="handleSetWaterLevel(wlData.jj)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.zd" backgroundColor="#adcbe0" label="历史最低水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.zd)"></color-tag>
+                       @click="handleSetWaterLevel(wlData.zd)"/>
           </el-col>
         </el-row>
+        <div :style="{'background-image': `url(${waterSliderBackground})`}" class="water-level-slider-container">
+          <div class="water-level-slider-main">
+            <el-slider v-model="waterLevel" :format-tooltip="formatWaterLevelTooltip" :marks="waterLevelMarks"
+                       height="90%" placement="right" tooltip-class="slider-tooltip" vertical/>
+            <span class="water-level-slider-title">水位动态模拟</span>
+          </div>
+        </div>
       </card01>
       <card01 style="height: 33%" title="流量监测">
         <chart ref="left2Ref"></chart>
@@ -481,4 +531,47 @@ onMounted(() => {
   height: 100%;
 }
 
+.water-level-slider-container {
+  background-size: 100% 100%;
+  position: absolute;
+  top: 0;
+  right: -120px;
+  width: 120px;
+  height: 100%;
+  padding: 2%;
+
+  .water-level-slider-main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .water-level-slider-title {
+      writing-mode: vertical-lr;
+      height: 60%;
+      position: absolute;
+      top: 50%;
+      right: 8%;
+      transform: translateY(-50%);
+      color: #fff;
+      font-weight: bold;
+      font-size: 1rem;
+      letter-spacing: 0.2em;
+    }
+
+  }
+
+}
+
+
+</style>
+<style>
+.water-level-slider .el-slider__marks-text {
+  width: 80px;
+}
+
+.slider-tooltip {
+  background: #000;
+  color: #fff;
+}
 </style>

src/views/Station.vue

@@ -3,11 +3,13 @@ import RightFrame from "@/components/RightFrame.vue";
 import Card01 from "@/components/card/Card01.vue";
 import {computed, ref} from "vue";
 import {useRoute} from 'vue-router';
+import GwVideo from '@/components/Video/index.vue'
 
 import {getStation} from "@/utils/station";
 import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
 import {getTypicalEvents} from "@/utils/typicalYear";
 import TypicalChart from "@/components/TypicalChart.vue";
+import {getVideoCodeByMark} from "@/components/Video/video";
 
 const route = useRoute()
 const jiankong = new URL('@/assets/images/tmp/jiankong.png', import.meta.url).href
@@ -15,7 +17,9 @@ const station = computed(() => getStation(route.params.stcd))
 const introduces = ref(station.value.detail?.split('\n'))
 const introduceImg = new URL(station.value.img, import.meta.url).href
 
-
+// 获取视频CODE
+const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', "室外"))
+// 典型事件
 const typicalEvents = ref(getTypicalEvents(route.params.stcd))
 
 </script>
@@ -23,14 +27,14 @@ const typicalEvents = ref(getTypicalEvents(route.params.stcd))
 <template>
   <right-frame>
     <template #leftModule>
-      <card01 title="测站简介">
+      <card01 style="height: 70%" title="测站简介">
         <h3 class="introduce-title">{{ station.stnm + station.sttp }}</h3>
         <p v-for="text in introduces" class="introduce-text" v-html="text"></p>
         <img v-if="station.img" :src="introduceImg" alt="" class="introduce-img"/>
       </card01>
       <card01 style="height: 30%" title="现场监控">
-        <img :src="jiankong" alt="" style="width: 100%;height: 100%;"/>
-        <!--        <gw-video></gw-video>-->
+        <!--        34102206531322000100-->
+        <gw-video :code="videoCode" :imageSrc="jiankong"></gw-video>
       </card01>
     </template>
     <template #rightModule>