台风调整

src/components/Chart.vue

@@ -5,7 +5,7 @@ import 'echarts-gl' // 3d图表库
 import {waterQualitys} from "@/utils/unit.js";
 import {nextTick, onMounted, onUnmounted, ref} from "vue";
 
-defineExpose({loadChart, carousel, bindListen})
+defineExpose({loadChart, carousel, bindListen, markLineChange})
 
 const chartRef = ref(null)
 let chart = null
@@ -26,6 +26,14 @@ async function loadChart(option, type = null) {
   }
 }
 
+function markLineChange(index) {
+  if (chart) {
+    const option = chart.getOption()
+    option.series[0].markLine.data = [{xAxis: index}]
+    chart.setOption(option, true);
+  }
+}
+
 function reloadChart() {
   const checkAndResize = () => {
     if (chart) {

src/components/TimeScrollbar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
+import {getCurrentInstance, onUnmounted, ref} from "vue";
 import {RefreshLeft, VideoPause, VideoPlay} from '@element-plus/icons-vue'
 
 defineProps({
@@ -14,7 +14,11 @@ defineProps({
   formatTooltip: {
     type: Function,
     default: value => value
-  }
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
 })
 const sliderRef = ref(null)
 const emit = defineEmits(['change', "input"]);
@@ -32,7 +36,7 @@ function play() {
     if (value.value === props.max) {
       closeTimer()
     }
-    value.value++
+    value.value = value.value + props.step
   }, 1000);
 }
 
@@ -54,9 +58,6 @@ function closeTimer() {
   }
 }
 
-onMounted(() => {
-})
-
 onUnmounted(() => {
   closeTimer()
 })
@@ -70,7 +71,7 @@ onUnmounted(() => {
     </div>
     <div class="time-slider-container">
       <el-slider ref="sliderRef" v-model="value" :format-tooltip="props.formatTooltip" :marks="props.marks"
-                 :max="props.max"
+                 :max="props.max" :step="props.step"
                  style="width: 100%;" tooltip-class="show-tooltip"></el-slider>
     </div>
   </div>

src/components/TypicalChart.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import * as echarts from "echarts";
 import Chart from "@/components/Chart.vue";
-import {getCurrentInstance, onMounted, ref} from "vue";
+import {getCurrentInstance, onMounted, ref, watch} from "vue";
 import {useStationStore} from '@/stores/station'
 import {getTypicalData} from "@/utils/typicalYear";
+import Bus from "@/utils/bus";
 
 defineProps({
   stcd: {},
@@ -47,14 +48,14 @@ async function reloadChart(data) {
         formatter: value => (value).toFixed(2)
       },
     },
-    dataZoom: [{start: 30, end: 70}],
+    // dataZoom: [{start: 0, end: 100}],
     series: [
       {
         name: '水位',
         type: 'line',
         symbol: 'none',
         // sampling: 'lttb',
-        smooth: true, //是否平滑曲线显示
+        smooth: true, // 是否平滑曲线显示
         itemStyle: {
           color: '#00ccff'
         },
@@ -71,6 +72,11 @@ async function reloadChart(data) {
             }
           ])
         },
+        markLine: {
+          symbol: ['none', 'none'],
+          label: {show: false},
+          data: [{xAxis: 0}]
+        },
         data: data.map(item => item.z)
       },
     ]
@@ -82,6 +88,18 @@ onMounted(async () => {
   const data = await getTypicalData(props.stcd, props.name)
   reloadChart(data)
 })
+
+watch(() => props.name, async (name) => {
+  debugger
+  const data = await getTypicalData(props.stcd, name)
+  reloadChart(data)
+})
+
+Bus.on("TypicalChartMarkLineChange", index => {
+  if (chartRef.value) {
+    chartRef.value.markLineChange(index)
+  }
+})
 </script>
 <template>
   <chart ref="chartRef"></chart>

src/views/Station.vue

@@ -14,7 +14,7 @@ import TimeScrollbar from "@/components/TimeScrollbar.vue";
 import {Label, Operate, Setting, View} from "@/utils/tdInstruction";
 import {getRainfallLatest, getWaterLevelAndFlowLatest} from "@/api/gx";
 import {getRainfallLevel} from "@/utils/rainfall";
-import bus from "@/utils/bus";
+import Bus from "@/utils/bus";
 
 const route = useRoute()
 const stationStore = useStationStore()
@@ -40,22 +40,32 @@ 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 ? eventData.value.length : 100
+  const split = (max.value / 12).toFixed(0)
+  marks.value = eventData.value.reduce((acc, cur, index) => {
+    if (index % split === 0) {
+      acc[index] = cur.tm.substring(11) + "\n" + cur.tm.substring(5, 10)
+    }
+    return acc
+  }, {})
 }
 
 function sliderlTooltip(val) {
+  Bus.emit("TypicalChartMarkLineChange", 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))
-    let weather = "晴"
-    if (data.z >= 3.6) {
-      weather = "大雨"
-    } else if (data.z >= 3.4) {
-      weather = "中雨"
-    } else if (data.z >= 3.3) {
-      weather = "小雨"
+    if (data){
+      Operate.setWaterLevel(route.params.stcd, data.z, (data.q * 4).toFixed(2))
+      let weather = "晴"
+      if (data.z >= 3.6) {
+        weather = "大雨"
+      } else if (data.z >= 3.4) {
+        weather = "中雨"
+      } else if (data.z >= 3.3) {
+        weather = "小雨"
+      }
+      Setting.setWeather(weather)
+      return `${data.tm}\n 水位： ${data.z}m\n 流量： ${data.q}m³/s\n 平均流速： ${data.smv}m³/s\n`
     }
-    Setting.setWeather(weather)
-    return `${data.tm}\n 水位： ${data.z}m\n 流量： ${data.q}m³/s\n 平均流速： ${data.smv}m³/s\n`
   }
   return ''
 }
@@ -98,7 +108,7 @@ onMounted(() => {
   handleSetLED()
 })
 
-bus.on("roam", roaming => {
+Bus.on("roam", roaming => {
   typicalEventTimeScrollbarShow.value = !roaming
 })
 </script>
@@ -113,7 +123,7 @@ bus.on("roam", roaming => {
         </card01>
         <card01 style="height: 30%" title="现场监控">
           <!--  34102206531322000100 这是有视频的CODE  -->
-          <gw-video :imageSrc="jiankong" :code="videoCode"></gw-video>
+          <gw-video :code="videoCode" :imageSrc="jiankong"></gw-video>
         </card01>
       </template>
       <template #rightModule>
@@ -142,7 +152,7 @@ bus.on("roam", roaming => {
       </template>
     </right-frame>
     <div v-if="typicalEventTimeScrollbarShow" class="typical-event-time-scrollbar">
-      <time-scrollbar :formatTooltip="sliderlTooltip" :marks="marks" :max="max"
+      <time-scrollbar :formatTooltip="sliderlTooltip" :marks="marks" :max="max" :step="144"
                       @change="handleTimeChange"></time-scrollbar>
     </div>
   </div>