更新

src/components/StationRightButtonGroup.vue

@@ -67,6 +67,8 @@ function handleRoam(type, mode) {
 
 // 测站信息
 const station = computed(() => getStation(route.params.stcd));
+// 是否显示关卡按钮
+const hasLevel = computed(() => appStore.currentView === '夹浦');
 // 是否显示返回按钮
 const hasBack = computed(() => route.path.indexOf('/sthouse/') > -1 || route.path.indexOf('/device/') > -1);
 // 是否显示模拟按钮
@@ -129,7 +131,7 @@ function formatWaterLevelTooltip(val: number) {
 
 function handleHome() {
   // 切换太湖流域视角
-  View.changeView()
+  appStore.changeCurrentView()
 }
 
 function back() {
@@ -312,10 +314,14 @@ watch(() => riverRoamStatus.value, (value) => {
 watch(() => stationRoamStatus.value, (value) => {
   bus.emit("roam", value !== 0)
 })
-
 </script>
 <template>
   <div class="right-btn-container">
+    <div v-show="hasLevel" class="right-big-btn" @click="appStore.changeCurrentLevel(null)">
+      <img :src="backgroundSrc" alt="" style="position: absolute;z-index:-1;"/>
+      <span v-if="appStore.currentLevel === 'TaiHuMain'" style="color: #fff;">风浪展示</span>
+      <span v-else style="color: #fff;">返回</span>
+    </div>
     <div v-show="hasBack" class="right-btn-item" @click="back">
       <img :src="btnBackSrc" alt="返回"/>
     </div>
@@ -329,9 +335,10 @@ watch(() => stationRoamStatus.value, (value) => {
         </div>
       </template>
       <el-button-group>
-        <el-button @click="View.changeView()">太湖</el-button>
-        <el-button @click="View.changeView('夹浦')">夹浦</el-button>
-        <el-button @click="View.changeView('台风')">台风</el-button>
+        <el-button @click="appStore.changeCurrentView('太湖流域')">太湖流域</el-button>
+        <el-button @click="appStore.changeCurrentView()">太湖</el-button>
+        <el-button @click="appStore.changeCurrentView('夹浦')">夹浦</el-button>
+        <el-button @click="appStore.changeCurrentView('台风')">台风</el-button>
       </el-button-group>
     </el-popover>
     <el-popover placement="left-start" trigger="hover" width="auto">
@@ -458,7 +465,6 @@ watch(() => stationRoamStatus.value, (value) => {
     display: flex;
     justify-content: center;
     align-items: center;
-    //background-size: 100% 100%;
 
     img {
       width: 100%;
@@ -519,6 +525,49 @@ watch(() => stationRoamStatus.value, (value) => {
     }
 
   }
+
+  .right-big-btn {
+    width: 130px;
+    height: 50px;
+    cursor: pointer;
+    position: absolute;
+    left: -150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff !important;
+
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    svg {
+      width: 1.2rem;
+      height: 1.2rem;
+      fill: #84b1e3;
+      z-index: 1;
+    }
+
+    &:hover, &.active {
+      svg {
+        fill: #00cbe6;
+      }
+
+      img {
+        background-color: rgba(0, 203, 230, 0.6);
+        border-radius: 8px;
+      }
+
+      > .right-btn-option-list {
+        display: block;
+      }
+
+    }
+
+  }
+
 }
 
 

src/components/Video/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
+import {getCurrentInstance, onMounted, onUnmounted, ref, watch} from "vue";
 import {closeVideo, getVideoSrc} from './video.ts'
 
 defineProps({
@@ -10,15 +10,23 @@ const {props} = getCurrentInstance()
 const videoSrc = ref(null)
 
 onMounted(async () => {
-  if (props.code) {
-    videoSrc.value = await getVideoSrc(props.code);
-  }
+  await showVideo(props.code)
 })
 onUnmounted(() => {
   closeVideo()
 })
-</script>
 
+watch(() => props.code, async (code) => {
+  await showVideo(code)
+})
+
+async function showVideo(code) {
+  if (code) {
+    videoSrc.value = await getVideoSrc(props.code);
+  }
+}
+
+</script>
 <template>
   <video v-if="videoSrc" :src="videoSrc" autoplay class="video-wapper" controls muted></video>
   <img v-else :src="props.imageSrc" alt="" class="video-wapper"/>

src/components/Video/video.ts

@@ -96,6 +96,7 @@ function getsiteList(stid: string, authorization = token) {
 }
 
 export async function getVideoSrc(code: string) {
+  debugger
   if (!token) {
     await getToken()
   }

src/layout/index.vue

@@ -1,86 +1,55 @@
 <script lang="ts" setup>
+import {onMounted, reactive, ref} from 'vue'
+
 import {AppMain, Navbar} from '@/layout/components/index.js'
 import AntvMap from '@/components/AntvMap/index.vue'
 import UePlayer from '@/components/UePlayer.vue'
+import GwVideo from "@/components/Video/index.vue";
 import {useAppStore} from '@/stores/app'
-import {computed, onMounted, reactive, ref, watch} from 'vue'
-import {useRoute} from 'vue-router'
-import {useStationStore} from '@/stores/station'
 import bus from '@/utils/bus'
-import {getStation} from '@/utils/station'
-import {getAlarmData} from '@/api/rolldata'
-import {jumpPage} from '@/utils'
-import CrossSection from '@/components/CrossSection.vue'
 import {Vue3Marquee} from 'vue3-marquee'
-import X2js from 'x2js'
 
 const appStore = useAppStore()
-const stationStore = useStationStore()
-const route = useRoute()
-
-// 是否展示动画
-const showOpeningAnimation = computed(() => route.path.indexOf('/index') > -1)
-const showOpeningAnimation2 = ref(true)
-let navbarHeight = '12vh'
-let theme = ''
-let navbarStyle = {height: navbarHeight}
-const dialog = reactive({
-  visible: false,
-  title: '断面',
-  component: 'CrossSection',
-  params: {}
-})
+
 // 告警信息
 const alarmInfo = ref('')
 
+// 视频
+const dialog = reactive({visible: true, title: '视频'})
+const videoList = []
+const videoCodeOptions = ref([])
+const videoCode = ref('')
+onMounted(async () => {
+  const data = await import('@/assets/json/jiankongdian.json').then(res => res.default);
+  videoList.push(...data)
+  getVideoById('4341a26a-279a-4266-8239-5367f0007af7')
+})
+
+function getVideoById(id: string) {
+  const video = videoList.find(item => item.id === id)
+  if (video) {
+    videoCodeOptions.value = video.children.map(item => {
+      return {label: item.label, value: item.gbbm}
+    })
+    videoCode.value = video.children[0].value
+    dialog.visible = true
+    dialog.title = video.label
+  }
+}
+
 // 底板回调监听
 bus.on('handle_ue_response', (data) => {
-  if (data.Category && data.Category === 'ClickMesh') {
+  if (data.Category && data.Category === 'CustomPOI' && data.Data && data.Data.Type === '视屏点') {
     if (!data.Data.Name) {
       return
     }
-    if (data.Data.Type === '测站') {
-      const station = getStation(data.Data.Name, 'stnm')
-      if (station) {
-        // 切换测站远视角
-        jumpPage(`/station/${station.stcd}`)
-        stationStore.setLabelState2('测站主页', true)
-        stationStore.setLabelState2('仪器运维', false)
-      }
-    } else if (data.Data.Type === '运维') {
-      if (data.Data.Name === '站房') {
-        // 跳转站房界面
-        jumpPage(`/sthouse/${route.params.stcd}`)
-      } else {
-        if (['雨量场', '测桥'].includes(data.Data.Name)) {
-          // 雨量场、测桥不是仪器
-          return
-        }
-        // 跳转仪器详情界面
-        jumpPage(`/device/${route.params.stcd}/${data.Data.Name}`)
-      }
-    } else if (data.Data.Type === '弹窗') {
-      if (data.Data.Name === '断面桩') {
-        stationStore.setStcd(route.params.stcd)
-        dialog.component = 'CrossSection'
-        dialog.visible = true
-      }
-    }
+    getVideoById(data.Data.Name)
   }
 })
-
-onMounted(() => {
-})
-
-// 路由监听
-watch(() => route.path, path => {
-  // 首页展示动画
-  showOpeningAnimation2.value = path.indexOf('/index') > -1
-}, {deep: true})
 </script>
 
 <template>
-  <div :style="{ '--current-color': theme }" class="app-wrapper">
+  <div class="app-wrapper">
 
     <!--  开场动画  -->
     <!--    <opening-animation v-if="showOpeningAnimation" v-show="showOpeningAnimation2"-->
@@ -104,12 +73,18 @@ watch(() => route.path, path => {
         <div class="alarm-info" v-html="alarmInfo"></div>
       </Vue3Marquee>
       <!-- 顶部 -->
-      <navbar :style="navbarStyle"/>
+      <navbar :style="{height: '12vh'}"/>
       <!-- 展示页 -->
       <app-main/>
 
       <el-dialog v-model="dialog.visible" :modal="false" :title="dialog.title" align-center draggable>
-        <cross-section v-if="dialog.visible"></cross-section>
+        <el-select v-model="videoCode" style="width: 200px;margin-bottom: 10px;">
+          <el-option v-for="item in videoCodeOptions" :key="item.label" :label="item.label"
+                     :value="item.value"></el-option>
+        </el-select>
+        <div style="height: 50vh;">
+          <gw-video v-if="dialog.visible" :code="videoCode"></gw-video>
+        </div>
       </el-dialog>
     </div>
   </div>

src/stores/app.ts

@@ -2,11 +2,17 @@ import {ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
 import {defineStore} from 'pinia'
 import bus from "@/utils/bus";
+import {View} from "@/utils/tdInstruction";
 
 export const useAppStore = defineStore('app', () => {
   const route = useRoute()
   // 底板类型
   const floorType = ref('ue')
+  // 当前视角
+  const currentView = ref('太湖')
+  // 当前关卡
+  const currentLevel = ref('TaiHuMain')
+
   // 主界面列表
   const homePageList = ['situational', 'intelloper', 'station']
   // 主页面视角
@@ -16,6 +22,25 @@ export const useAppStore = defineStore('app', () => {
   // 是否展开
   const isExpand = ref(true)
 
+
+  function changeCurrentView(view = '太湖') {
+    currentView.value = view
+    View.changeView(view)
+  }
+
+  function changeCurrentLevel(level: any) {
+    if (!level) {
+      if (currentLevel.value === 'TaiHuMain') {
+        level = 'Demo'
+      } else {
+        level = 'TaiHuMain'
+      }
+    }
+    currentLevel.value = level
+    View.changeLevel(currentLevel.value)
+  }
+
+
   function changeFloorTypeByPath(path: string) {
     if (path === '/index') {
       floorType.value = 'ue'
@@ -37,7 +62,6 @@ export const useAppStore = defineStore('app', () => {
     bus.emit('horizontal-expand', value)
   }
 
-
   // 路由监听
   watch(() => route.path, path => {
     // 切换底图 三维、MAP
@@ -57,5 +81,19 @@ export const useAppStore = defineStore('app', () => {
 
   }, {deep: true, immediate: true})
 
-  return {floorType, homePage, hasEnterSthouse, setHomePage, exitSthouse, isExpand, setExpand}
+  return {
+    floorType,
+
+    currentView,
+    changeCurrentView,
+    currentLevel,
+    changeCurrentLevel,
+
+    homePage,
+    hasEnterSthouse,
+    setHomePage,
+    exitSthouse,
+    isExpand,
+    setExpand
+  }
 })

src/utils/tdInstruction/label.ts

@@ -35,7 +35,7 @@ async function addHydrologicStationPoints() {
       const batch = list.slice(i, i + 100); // 截取当前批次
       Point.addPoint(batch.map((d: any) => {
         return {name: d.stnm, type: "水文站", x: d.lgtd, y: d.lttd}
-      }))
+      }), 'hydrologicStation')
     }
   })
 }
@@ -43,8 +43,8 @@ async function addHydrologicStationPoints() {
 async function addVideoPoints() {
   const data = await import('@/assets/json/jiankongdian.json').then(res => res.default);
   Point.addPoint(data.map(d => {
-    return {name: d.label, type: "视频点", x: d.lon, y: d.lat}
-  }))
+    return {id: d.id, name: d.label, type: "视频点", x: d.lon, y: d.lat}
+  }), 'video')
 }
 
 function addDikePoints() {

src/utils/tdInstruction/point.ts

@@ -3,8 +3,9 @@ import Bus from "@/utils/bus";
 /**
  * 添加点
  * @param  data
+ * @param  type 样式
  */
-export function addPoint(data: any) {
+export function addPoint(data: any, type = "custom") {
   let descriptor = {
     "command": "AddCustomPOI",
     "data": {
@@ -20,7 +21,7 @@ export function addPoint(data: any) {
         "duration_time": 0.7,
         "state": "state_1"
       },
-      "subobj": data.map((p: any) => createPointObj(p))
+      "subobj": data.map((p: any) => createPointObj(p, type))
     }
   };
   Bus.emit('emitUIInteraction', descriptor)
@@ -59,38 +60,107 @@ export function deletePoint(type: string, data: any) {
   console.log("-- 删除点", JSON.stringify(descriptor));
 }
 
-function createPointObj(point: any) {
-  return {
-    "id": point.name,
-    "type": point.type,
-    "coord": `${point.x}, ${point.y}`,
-    "label": {
-      "bg_size": "60,20",
-      "bg_offset": "-25,-70",
-      "content": [
-        {
-          "text": [
-            point.name,
-            "00ff00ff",
-            "12"
-          ],
-          "text_offset": "0,0",
-          "text_boxwidth": 10,
-          "text_centered": true,
-          "scroll_speed": 1
+function createPointObj(point: any, type = "custom") {
+  switch (type) {
+    case 'video':
+      return {
+        "id": point.id ? point.id : point.name,
+        "type": point.type,
+        "coord": `${point.x}, ${point.y}`,
+        "label": {
+          "bg_size": "70,20",
+          "bg_offset": "-35,-60",
+          "content": [
+            {
+              "text": [
+                point.name,
+                "00ff00ff",
+                "12"
+              ],
+              "text_offset": "0,0",
+              "text_boxwidth": 10,
+              "text_centered": true,
+              "scroll_speed": 1
+            }
+          ]
+        },
+        "marker": {
+          "size": "40,40",
+          "images": [
+            {
+              "define_state": "state_1",
+              "normal_url": "file:///B:/UI/POI/TYPE3Blue.png",
+              "activate_url": "file:///B:/UI/POI/TYPE3Blue.png"
+            }
+          ]
         }
-      ]
-    },
-    "marker": {
-      "size": "100,100",
-      "images": [
-        {
-          "define_state": "state_1",
-          "normal_url": "file:///F:/P4Work/depot/TaiHuStormyWaves/Blue.png",
-          "activate_url": "file:///F:/P4Work/depot/TaiHuStormyWaves/Blue.png"
+      }
+    case 'hydrologicStation':
+      return {
+        "id": point.name,
+        "type": point.type,
+        "coord": `${point.x}, ${point.y}`,
+        "label": {
+          "bg_size": "70,20",
+          "bg_offset": "-35,-40",
+          "content": [
+            {
+              "text": [
+                point.name,
+                "00ff00ff",
+                "12"
+              ],
+              "text_offset": "0,0",
+              "text_boxwidth": 10,
+              "text_centered": true,
+              "scroll_speed": 1
+            }
+          ]
+        },
+        "marker": {
+          "size": "20,20",
+          "images": [
+            {
+              "define_state": "state_1",
+              "normal_url": "file:///B:/UI/POI/TYPE4Blue.png",
+              "activate_url": "file:///B:/UI/POI/TYPE4Blue.png"
+            }
+          ]
         }
-      ]
-    }
+      }
+    case 'custom':
+    default:
+      return {
+        "id": point.name,
+        "type": point.type,
+        "coord": `${point.x}, ${point.y}`,
+        "label": {
+          "bg_size": "60,20",
+          "bg_offset": "-25,-70",
+          "content": [
+            {
+              "text": [
+                point.name,
+                "00ff00ff",
+                "12"
+              ],
+              "text_offset": "0,0",
+              "text_boxwidth": 10,
+              "text_centered": true,
+              "scroll_speed": 1
+            }
+          ]
+        },
+        "marker": {
+          "size": "100,100",
+          "images": [
+            {
+              "define_state": "state_1",
+              "normal_url": "file:///F:/P4Work/depot/TaiHuStormyWaves/Blue.png",
+              "activate_url": "file:///F:/P4Work/depot/TaiHuStormyWaves/Blue.png"
+            }
+          ]
+        }
+      }
   }
-
 }