疏浚船舶列表及视频

package.json

@@ -15,6 +15,7 @@
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.2.29",
+    "ezuikit-js": "^7.7.8",
     "jquery": "^1.12.4",
     "mitt": "^3.0.0",
     "vue": "^3.2.13",

src/apis/hdsj.js

@@ -84,4 +84,40 @@ export function GetHpjDepthPoints() {
     url: '/DigitalTwin/GetHpjDepthPoints?distance=100',
     method: "get"
   })
-}
+}
+
+export function GetVideoToken() {
+  return new Promise((resolve, reject) => {
+    request({
+      method: 'post',
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      url: 'https://proj.bim-ace.com:10260/connect/token',
+      data: {
+        client_id: '5da87851cb5c444283424fa6f7b2fe6b',
+        client_secret: '50f28c2d97e54f55bf837053b0aa3790',
+        scope: 'DataCenterV2',
+        grant_type: 'client_credentials',
+      }
+    }).then(res => {
+      request({
+        method: 'get',
+        url: 'https://proj.bim-ace.com:10207/services/api/data-center/ys7/subAccessToken',
+        headers: {
+          Authorization: 'Bearer ' + res.access_token
+        },
+        params: {
+          Id: '0430554C-B95A-4F24-94E8-AEE9B27B3A08',
+          AccountId: 'c8922f0994664497a78a20ced154a036',
+        }
+      }).then(res => {
+        resolve(res)
+      }).catch((e) => {
+        reject({ msg: 'accessToken获取失败' })
+      })
+    }).catch((e) => {
+      reject({ msg: '安全认证未通过' })
+    })
+  })
+}

src/views/hdsj/cpns/BoatList.vue

@@ -4,10 +4,15 @@
     <span class="title-dialog">疏浚船舶</span>
     <template v-if="list.length>0">
       <el-table :data="list" class="table-default dw-table"  stripe>
-        <el-table-column label="序号"  type="index" :dataformatas="indexCreate" />
-        <el-table-column label="船舶名称"    prop="SHIPNAME" min-width="100" show-overflow-tooltip />
-        <el-table-column label="船舶类型" prop="SHIPTYPE" min-width="100" show-overflow-tooltip />
-        <el-table-column label="吞吐量(方)" prop="TONNAGE" min-width="100" show-overflow-tooltip />
+        <el-table-column label="序号"  type="index" min-width="40" :dataformatas="indexCreate" />
+        <el-table-column label="船舶名称" prop="SHIPNAME" min-width="100" show-overflow-tooltip />
+        <el-table-column label="船舶类型" prop="SHIPTYPE" min-width="65" show-overflow-tooltip />
+        <el-table-column label="吞吐量(方)" prop="TONNAGE" min-width="75" show-overflow-tooltip />
+        <el-table-column label="视频监控" min-width="65">
+          <template #default="scope">
+            <el-button type="primary" :disabled="scope.row.SHIPTYPE==='运泥船'" class="btn-check" @click="checkVideo(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <el-pagination
             class="pagi-default"
@@ -27,6 +32,9 @@
     <!-- <transition name="loading">
       <div class="loading" v-if="showLoading">加载中...</div>
     </transition> -->
+    <Teleport to="#common">
+      <VideoForBoat v-show="Boolean(currentVideoId)" :video-id="currentVideoId" @close="handleCloseVideo" />
+    </Teleport>
   </div>
 </template>
 
@@ -37,13 +45,15 @@ export default {
 </script>
 
 <script setup>
-  import { onMounted,onBeforeMount, reactive, ref } from 'vue'
+  import { onMounted,onBeforeMount, reactive, ref, computed, watch } from 'vue'
   import { getDredgingShip } from '@/apis/hdsj'
+  import VideoForBoat from './VideoForBoat.vue';
   import {clearMap} from "@/utils/map/ArcgisUtil";
-  import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+  import { ElTable, ElTableColumn, ElPagination, ElButton } from 'element-plus'
   import 'element-plus/es/components/table/style/css'
   import 'element-plus/es/components/table-column/style/css'
   import 'element-plus/es/components/pagination/style/css'
+  import 'element-plus/es/components/button/style/css'
   const props = defineProps(['objId'])
   // const showLoading = ref(false)
 
@@ -52,12 +62,20 @@ export default {
   const pageSize = ref(10)
   const total = ref(0)
 
-  const reqs=ref({projectId:props.objId,index:currentPage.value,size:pageSize.value})
+  const reqs = computed(() => {
+    return {
+      projectId: props.objId,
+      index: currentPage.value,
+      size: pageSize.value
+    }
+  })
 
-  onMounted(()=>{
+  watch(() => props.objId, () => {
     console.log("入参数据：",reqs.value)
+    currentPage.value = 1
     getBoats(reqs.value)
-  })
+  },{ immediate: true })
+
   const emit = defineEmits(['closeBoatList'])
 
   function handleClose() {
@@ -77,18 +95,29 @@ export default {
     pageSize.value = val
     currentPage.value = 1
     getBoats(reqs.value)
-
   }
+
   function  getBoats(prop) {
     getDredgingShip(prop).then(req=>{
       console.log("出参数据：",req)
-          if (req.code=='200'){
-            console.log("出参数据：",req.data.Rows)
-            list.value=req.data.Rows
-          }
+      if (req.code=='200'){
+        console.log("出参数据：",req.data.Rows)
+        list.value=req.data.Rows.sort((a,b)=> a['SHIPTYPE'].localeCompare(b['SHIPTYPE']))
+        total.value = req.data.TotalRowCount
+      }
     })
   }
 
+  const currentVideoId = ref('')
+
+  function checkVideo(row) {
+    currentVideoId.value = row['videoId']
+  }
+
+  function handleCloseVideo() {
+    currentVideoId.value = ''
+  }
+
 </script>
 
 <style lang="scss" scoped>
@@ -143,5 +172,26 @@ export default {
     }
   }
 
+  .btn-check {
+    // background: rgba(52, 143, 208,0.65);
+    // border: 1px solid rgb(84, 157, 208);
+    // padding: 4px 8px;
+    // border-radius: 3px;
+    // cursor: pointer;
+    // &:hover {
+
+    // }
+    height: 26px;
+    padding: 0 10px;
+    font-size: 14px;
+    color: #ddd;
+
+    &.is-disabled {
+      background-color: #409eff;
+      filter: opacity(0.7) brightness(0.7);
+
+    }
+  }
+
 }
 </style>

src/views/hdsj/cpns/VideoForBoat.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="hello-ezuikit-js">
+    <div id="video-content">
+      <div id="video-container" style="width:600px;height:400px"></div>
+      <!-- <div>
+        <button v-on:click="stop">stop</button>
+        <button v-on:click="play">play</button>
+        <button v-on:click="openSound">openSound</button>
+        <button v-on:click="closeSound">closeSound</button>
+        <button v-on:click="startSave">startSave</button>
+        <button v-on:click="stopSave">stopSave</button>
+        <button v-on:click="capturePicture">capturePicture</button>
+        <button v-on:click="fullScreen">fullScreen</button>
+        <button v-on:click="getOSDTime">getOSDTime</button>
+        <button v-on:click="ezopenStartTalk">开始对讲</button>
+        <button v-on:click="ezopenStopTalk">结束对讲</button>
+        <button v-on:click="destroy">销毁</button>
+      </div> -->
+      <div class="btn-close" @click="handleClose"></div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, watch } from 'vue'
+import { GetVideoToken } from '@/apis/hdsj'
+import EZUIKit from "ezuikit-js"
+var player = null
+
+let accessToken
+let videoId = ''
+
+onMounted(() => {
+  getToken()
+})
+
+const props = defineProps(['videoId'])
+
+watch(()=>props.videoId, (val) => {
+  if(val) {
+    console.log('视频id:',val)
+    videoId = val
+    initPlayer()
+    setTimeout(() => {
+      play()
+    }, 1000);
+  }
+})
+
+// 获取播放的token权限
+function getToken() {
+  GetVideoToken().then(res => {
+    console.log('播放权限获取成功')
+    accessToken = res
+  }).catch((e)=> {
+    console.log('播放权限获取失败:' + e.msg)
+  })
+}
+
+// 初始化播放器
+function initPlayer() {
+  player = new EZUIKit.EZUIKitPlayer({
+    id: 'video-container', // 视频容器ID
+    accessToken,
+    // url: `ezopen://open.ys7.com/G39444019/1.live`,
+    url: `ezopen://open.ys7.com/${videoId}/1.live`,
+    // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
+    // template: 'pcLive',
+    // plugin: ['talk'], // 加载插件，talk-对讲
+    width: 600,
+    height: 400,
+  });
+  window.player = player;
+}
+
+const emit = defineEmits(['close'])
+
+// 关闭
+function handleClose() {
+  if(player) {
+    destroy()
+  }
+  emit('close')
+}
+
+function play() {
+  var playPromise = player.play();
+  playPromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+/* function stop() {
+  var stopPromise = player.stop();
+  stopPromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function getOSDTime() {
+  var getOSDTimePromise = player.getOSDTime();
+  getOSDTimePromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function capturePicture() {
+  var capturePicturePromise = player.capturePicture(`${new Date().getTime()}`);
+  capturePicturePromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function openSound() {
+  var openSoundPromise = player.openSound();
+  openSoundPromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function closeSound() {
+  var openSoundPromise = player.closeSound();
+  openSoundPromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function startSave() {
+  var startSavePromise = player.startSave(`${new Date().getTime()}`);
+  startSavePromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function stopSave() {
+  var stopSavePromise = player.stopSave();
+  stopSavePromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+function ezopenStartTalk() {
+  player.startTalk();
+}
+function ezopenStopTalk() {
+  player.stopTalk();
+}
+function fullScreen() {
+  player.fullScreen();
+} */
+function destroy() {
+  var destroyPromise = player.destroy();
+  destroyPromise.then((data) => {
+    console.log("promise 获取 数据", data)
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.hello-ezuikit-js {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+  z-index: 1;
+}
+
+#video-content {
+  position: absolute;
+  top: 48%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.btn-close {
+  display: block;
+  margin: 30px auto 0;
+  width: 30px;
+  height: 30px;
+  background: url('@/assets/imgs/page_kkjk/bi-pics-close.png') no-repeat;
+  background-size: contain;
+  cursor: pointer;
+}
+</style>

src/views/yyjg/cpns/EntInfo.vue

@@ -101,7 +101,10 @@
 <!--         //图片查看-->
       <PicViewerForPhotos v-if="imageShow" :picImg="imagesUrl"  @closePicViewerOne="closePicViewerOne"/>
 <!--查看视频-->
-       <VideoForHK  v-if="vidoShow" :cameraIndexCode="cameraIndexCode" :vidoBackShow="true"   @closeVido="closeVido"/>
+      <Teleport to="#common">
+        <!-- 挂载到顶层公共页面 -->
+        <VideoForHK  v-if="vidoShow" :cameraIndexCode="cameraIndexCode" :vidoBackShow="true"   @closeVido="closeVido"/>
+      </Teleport>
     </div>
   </div>
 </template>