123

ruoyi-screen/src/components/GisMap.vue

@@ -10,7 +10,7 @@ import {
   loadGisSdk,
   resolveGisMapStyle,
   createGisTransformRequest,
-  syncWmtsLayerVisibility
+  syncWmtsLayerVisibility 
 } from '@/utils/gisLoader'
 import {
   parsePoiLngLat,

ruoyi-ui/package.json

@@ -24,9 +24,11 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@liveqing/liveplayer": "^2.7.40",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.30.3",
     "clipboard": "2.0.8",
+    "copy-webpack-plugin": "^4.6.0",
     "core-js": "3.37.1",
     "echarts": "5.4.0",
     "element-china-area-data": "^5.0.2",

ruoyi-ui/public/index.html

@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

ruoyi-ui/src/lang/bo/videoSurveillance.js

@@ -33,6 +33,7 @@ export default {
     colOwner: "གཙོ་བོ།",
     colInstallLocation: "སྒྲིག་གནས།",
     actionLiveView: "ད་ལྟ་བརྙན་ལྟ",
+    dialogLiveView: "ད་ལྟ་བརྙན",
     formMonitorName: "བརྙན་ཟློས་མིང་།",
     formOwner: "གཙོ་བོ།",
     formInstallLocation: "སྒྲིག་གནས།",
@@ -45,6 +46,7 @@ export default {
     dialogEdit: "[རྩོམ]བརྙན་ཟློས",
     confirmDelete: "ཐོ་གཞུང་འདི་སུབ་རྒྱུ་གཏན་ཁེལ་ལམ？",
     msgLiveNotOpen: "ད་ལྟ་བརྙན་མ་ཁ་ཕྱེ། སྒྲིག་གནས་སྔོན་དུ་གྲུབ",
+    msgLiveNoStream: "བརྙན་ཟློས་མེད（接口对接待）",
     viewMonitorName: "བརྙན་ཟློས་མིང་།",
     viewOwner: "གཙོ་བོ།",
     viewInstallLocation: "སྒྲིག་གནས།",

ruoyi-ui/src/lang/zh/videoSurveillance.js

@@ -33,6 +33,7 @@ export default {
     colOwner: "所属主体",
     colInstallLocation: "安装位置",
     actionLiveView: "查看实时监控",
+    dialogLiveView: "实时监控",
     formMonitorName: "监控名称",
     formOwner: "所属主体",
     formInstallLocation: "安装位置",
@@ -45,6 +46,7 @@ export default {
     dialogEdit: "[编辑]监控点位",
     confirmDelete: "是否确认删除这条数据？",
     msgLiveNotOpen: "实时监控功能暂未开放，请先完成监控点位登记",
+    msgLiveNoStream: "暂无直播流（监控流地址待接口对接）",
     viewMonitorName: "监控名称",
     viewOwner: "所属主体",
     viewInstallLocation: "安装位置",

ruoyi-ui/src/views/videoSurveillance/livestockMonitor/index.vue

@@ -65,7 +65,7 @@
         <el-table-column :label="vsT('colInstallLocation')" prop="installLocation" align="center" min-width="120" :show-overflow-tooltip="true" />
         <el-table-column :label="vsCommon('colOp')" align="center" class-name="small-padding fixed-width" width="300" fixed="right">
           <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="handleLiveView">{{ vsT("actionLiveView") }}</el-button>
+            <el-button type="text" size="mini" @click="handleLiveView(scope.row)">{{ vsT("actionLiveView") }}</el-button>
             <el-button
               v-hasPermi="['videoSurveillance:livestockMonitor:query']"
               type="text"
@@ -177,10 +177,38 @@
         <el-button @click="viewOpen = false">{{ vsCommon("close") }}</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog
+      :title="liveDialogTitle"
+      :visible.sync="liveOpen"
+      width="960px"
+      append-to-body
+      destroy-on-close
+      @close="closeLiveView"
+    >
+      <div class="live-player-wrap">
+        <LivePlayer
+          :video-url="liveVideoUrl"
+          :video-title="liveVideoTitle"
+          :alt="vsT('msgLiveNoStream')"
+          live
+          fluent
+          :autoplay="!!liveVideoUrl"
+          stretch
+          aspect="16:9"
+          :controls="true"
+          :muted="true"
+        />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeLiveView">{{ vsCommon("close") }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import LivePlayer from "@liveqing/liveplayer"
 import videoSurveillanceLocaleMixin from "@/mixins/videoSurveillanceLocaleMixin"
 import {
   listLivestockMonitor,
@@ -205,6 +233,9 @@ function createEmptyForm() {
 
 export default {
   name: "VideoSurveillanceLivestockMonitor",
+  components: {
+    LivePlayer
+  },
   mixins: [videoSurveillanceLocaleMixin],
   data() {
     return {
@@ -212,6 +243,10 @@ export default {
       loading: false,
       open: false,
       viewOpen: false,
+      liveOpen: false,
+      liveRow: {},
+      liveVideoUrl: "",
+      liveVideoTitle: "",
       viewRow: {},
       dialogEdit: false,
       formKey: 0,
@@ -238,6 +273,10 @@ export default {
     dialogTitle() {
       return this.dialogEdit ? this.vsT("dialogEdit") : this.vsT("dialogAdd")
     },
+    liveDialogTitle() {
+      const name = this.liveRow.monitorName || this.liveVideoTitle
+      return name ? `${this.vsT("dialogLiveView")} - ${name}` : this.vsT("dialogLiveView")
+    },
     formRules() {
       return {
         monitorName: [
@@ -471,8 +510,30 @@ export default {
         this.viewOpen = true
       })
     },
-    handleLiveView() {
-      this.$modal.msgWarning(this.vsT("msgLiveNotOpen"))
+    handleLiveView(row) {
+      if (!row || row.id == null) {
+        return
+      }
+      getLivestockMonitor(row.id).then((res) => {
+        const data = res.data || row
+        this.liveRow = data
+        this.liveVideoTitle = data.monitorName || ""
+        this.liveVideoUrl = this.resolveLiveVideoUrl(data)
+        this.liveOpen = true
+      })
+    },
+    closeLiveView() {
+      this.liveVideoUrl = ""
+      this.liveVideoTitle = ""
+      this.liveRow = {}
+      this.liveOpen = false
+    },
+    resolveLiveVideoUrl(row) {
+      if (!row) {
+        return ""
+      }
+      const url = row.liveStreamUrl || row.streamUrl || row.videoUrl
+      return url ? String(url).trim() : ""
     },
     handleDelete(row) {
       this.$modal
@@ -520,4 +581,11 @@ export default {
   margin-right: 6px;
   vertical-align: middle;
 }
+
+.live-player-wrap {
+  position: relative;
+  width: 100%;
+  height: 540px;
+  background: #000;
+}
 </style>

ruoyi-ui/vue.config.js

@@ -7,6 +7,8 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
+const CopyPlugin = require('copy-webpack-plugin')
+
 const name = process.env.VUE_APP_TITLE || '行业数字服务链' // 网页标题
 
 const baseUrl = 'http://192.168.1.6:8010' // 后端接口
@@ -76,7 +78,12 @@ module.exports = {
         algorithm: 'gzip',                             // 使用gzip压缩
         minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
         deleteOriginalAssets: false                    // 压缩后删除原文件
-      })
+      }),
+      new CopyPlugin([
+        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
+        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
+        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
+      ])
     ],
   },
   chainWebpack(config) {