台风

src/components/TimeScrollbar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import {onUnmounted, ref, getCurrentInstance} from "vue";
-import {VideoPlay, VideoPause, RefreshLeft} from '@element-plus/icons-vue'
+import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
+import {RefreshLeft, VideoPause, VideoPlay} from '@element-plus/icons-vue'
 
 defineProps({
   max: {
@@ -11,41 +11,40 @@ defineProps({
     type: Object,
     default: {}
   },
-  value: {
-    type: Number,
-    default: 0
-  },
   formatTooltip: {
     type: Function,
     default: value => value
   }
 })
-const emit = defineEmits(["input"]);
+const sliderRef = ref(null)
+const emit = defineEmits(['change', "input"]);
 
 const {props} = getCurrentInstance()
 const state = ref(0)
+const value = ref(0)
 let timer = null
 
 function play() {
+  emit('change', true)
   state.value = 1
   timer = setInterval(() => {
     // 当value等于max时，清除定时器
-    if (props.value === props.max) {
+    if (value.value === props.max) {
       closeTimer()
     }
-
-    emit('input', props.value + 1)
+    value.value++
   }, 1000);
 }
 
 function pause() {
+  emit('change', false)
   state.value = 0
   closeTimer()
 }
 
 function refresh() {
   pause()
-  emit('input', 0)
+  value.value = 0
 }
 
 function closeTimer() {
@@ -55,6 +54,9 @@ function closeTimer() {
   }
 }
 
+onMounted(() => {
+})
+
 onUnmounted(() => {
   closeTimer()
 })
@@ -62,13 +64,14 @@ onUnmounted(() => {
 <template>
   <div class="time-scrollbar">
     <div class="action-bar">
-      <VideoPlay v-if="state === 1" @click="pause"></VideoPlay>
-      <VideoPause v-if="state === 0" @click="play"></VideoPause>
-      <RefreshLeft v-if="props.value > 0" @click="refresh"></RefreshLeft>
+      <VideoPlay v-if="state === 0" @click="play"></VideoPlay>
+      <VideoPause v-if="state === 1" @click="pause"></VideoPause>
+      <RefreshLeft v-if="value > 0" @click="refresh"></RefreshLeft>
     </div>
     <div class="time-slider-container">
-      <el-slider v-model="props.value" :format-tooltip="formatTooltip" :marks="props.marks"
-                 :max="props.max" style="width: 100%;"></el-slider>
+      <el-slider ref="sliderRef" v-model="value" :format-tooltip="formatTooltip" :marks="props.marks"
+                 :max="props.max"
+                 style="width: 100%;" tooltip-class="show-tooltip"></el-slider>
     </div>
   </div>
 </template>
@@ -76,6 +79,7 @@ onUnmounted(() => {
 .time-scrollbar {
   height: 60px;
   display: flex;
+  pointer-events: auto;
 
   .action-bar {
     width: 10%;
@@ -89,10 +93,16 @@ onUnmounted(() => {
       margin-left: 5px;
     }
 
-    svg:hover {
-      color: #00ccff;
+    svg {
+      width: 2.2rem;
+      height: 2.2rem;
+
+      &:hover {
+        color: #00ccff;
+      }
     }
 
+
   }
 
   .time-slider-container {
@@ -104,3 +114,8 @@ onUnmounted(() => {
 
 }
 </style>
+<style>
+.show-tooltip {
+  display: inline-block !important;
+}
+</style>

src/layout/index.vue

@@ -26,7 +26,7 @@ const dialog = reactive({
   params: {}
 })
 // 告警信息
-const alarmInfo = ref('告警信息!')
+const alarmInfo = ref('水位:太湖3.24,杭长桥 3.22,琳桥 3.45,常州(三) 3.50,无锡（大） 3.49,苏州（枫桥） 3.26,张桥 3.46,湘城 3.24,平望 2.98,嘉兴 2.92,陈墓(锦溪) 2.95。')
 
 const yztSrc = ref(new URL('@/assets/images/yzt.png', import.meta.url).href)
 const detailSrc = ref(new URL('@/assets/images/detail.png', import.meta.url).href)

src/utils/tdInstruction/operate.ts

@@ -6,16 +6,17 @@ import Bus from "@/utils/bus";
  * @param stcd 测站编码
  * @param value 水位
  */
-export function setWaterLevel(stcd: any, value: any) {
+export function setWaterLevel(stcd: any, value: any = null, speed: any = null) {
   let descriptor = {
     "command": "WaterLevel",
     "data": {
+      "ID": stcd,
       "Code": value,
-      "Tag": stcd
+      "speed": speed
     }
   }
   Bus.emit('emitUIInteraction', descriptor)
-  console.log("-- 设置测站水位", JSON.stringify(descriptor));
+  console.log("-- 设置测站水位,流速", JSON.stringify(descriptor));
 }
 
 /**

src/views/Station.vue

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import RightFrame from "@/components/RightFrame.vue";
 import Card01 from "@/components/card/Card01.vue";
-import {computed, ref, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import {useRoute} from 'vue-router';
 import GwVideo from '@/components/Video/index.vue'
-
+import {useStationStore} from '@/stores/station'
 import {getStation} from "@/utils/station";
 import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
-import {getTypicalEvents} from "@/utils/typicalYear";
+import {getTypicalData, getTypicalEvents} from "@/utils/typicalYear";
 import TypicalChart from "@/components/TypicalChart.vue";
 import {getVideoCodeByMark} from "@/components/Video/video";
 import TimeScrollbar from "@/components/TimeScrollbar.vue";
+import {Operate, View} from "@/utils/tdInstruction";
 
 const route = useRoute()
+const stationStore = useStationStore()
 const jiankong = new URL('@/assets/images/tmp/jiankong.png', import.meta.url).href
 const station = computed(() => getStation(route.params.stcd))
 const introduces = ref(station.value.detail?.split('\n'))
@@ -22,17 +24,45 @@ const introduceImg = new URL(station.value.img, import.meta.url).href
 const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', "室外"))
 // 典型事件
 const typicalEvents = ref(getTypicalEvents(route.params.stcd))
-
+const typicalEventOptions = computed(() => typicalEvents.value.map(t => t.name))
+const currentTypicalEventName = ref("贝碧嘉")
+const event = ref(null)
+const eventData = ref([])
 // 时间戳
-const value = ref(0)
 const max = ref(100)
-const dateList = ref([])
 const marks = ref({})
 
+const handleEventChange = async (name: string) => {
+  event.value = typicalEvents.value.find(t => t.name === name)
+  eventData.value = await getTypicalData(route.params.stcd, event.value.id)
+  max.value = eventData.value?.lenght || 100
+}
+
 function sliderlTooltip(val) {
-  return dateList.value[val]
+  if (eventData.value && eventData.value.length > 0) {
+    const data = eventData.value[val]
+    Operate.setWaterLevel(route.params.stcd, data.z, (data.q * 4).toFixed(2))
+    return `${data.tm}\n 水位： ${data.z}m\n 流量： ${data.q}m³/s\n 平均流速： ${data.smv}m³/s\n`
+  }
+  return ''
 }
 
+function handleTimeChange(status) {
+  if (status) {
+    View.changeView(station.value.stnm + '近')
+    stationStore.setLabelState2('测站主页', true)
+    stationStore.setLabelState2('仪器运维', false)
+  }
+}
+
+onMounted(() => {
+  handleEventChange(currentTypicalEventName.value)
+
+  // 获取最新水雨情数据，更新大屏
+
+
+})
+
 watch(() => route.path, path => {
 
 })
@@ -53,17 +83,23 @@ watch(() => route.path, path => {
       </template>
       <template #rightModule>
         <card01 style="height: 100%" title="典型年">
-          <el-carousel :autoplay="true" :interval="5000" arrow="never" style="width: 100%;height: 100%;"
-                       trigger="click">
-            <el-carousel-item v-for="event in typicalEvents" :key="event.id">
-              <h3 class="introduce-title">{{ event.name }}</h3>
-              <p v-for="text in event.desc.split('\n')" class="introduce-text" v-html="text"></p>
-              <img :src="event.img" alt="" class="introduce-img"/>
-              <div style="height: 33%;">
-                <typical-chart :name="event.id" :stcd="route.params.stcd"></typical-chart>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
+          <div style="display: flex;justify-content: center;padding-bottom: 10px;">
+            <el-segmented v-model="currentTypicalEventName" :options="typicalEventOptions" size="large"
+                          @change="handleEventChange"/>
+          </div>
+          <div v-if="event" class="event-wrapper">
+            <h3 class="introduce-title">{{ event.name }}</h3>
+            <p v-for="text in event.desc.split('\n')" class="introduce-text" v-html="text"></p>
+            <img :src="event.img" alt="" class="introduce-img"/>
+            <div style="height: 33%;">
+              <typical-chart :name="event.id" :stcd="route.params.stcd"></typical-chart>
+            </div>
+          </div>
+          <!--          <el-carousel :autoplay="true" :interval="5000" arrow="never" style="width: 100%;height: 100%;"-->
+          <!--                       trigger="click">-->
+          <!--            <el-carousel-item v-for="event in typicalEvents" :key="event.id">-->
+          <!--            </el-carousel-item>-->
+          <!--          </el-carousel>-->
         </card01>
       </template>
       <template #btnGroup>
@@ -71,7 +107,8 @@ watch(() => route.path, path => {
       </template>
     </right-frame>
     <div class="typical-event-time-scrollbar">
-      <time-scrollbar v-model="value" :formatTooltip="sliderlTooltip" :marks="marks" :max="max"></time-scrollbar>
+      <time-scrollbar :formatTooltip="sliderlTooltip" :marks="marks" :max="max"
+                      @change="handleTimeChange"></time-scrollbar>
     </div>
   </div>
 </template>
@@ -83,6 +120,10 @@ watch(() => route.path, path => {
   height: 100%;
 }
 
+.event-wrapper {
+  height: calc(100% - 50px);
+}
+
 .typical-event-time-scrollbar {
   position: fixed;
   bottom: 10vh;