zzz

2025-12-30 12:52:26 +00:00 · 2025-04-11 17:59:53 +08:00
parent 4fcba8a246
commit bfdb310ca2
7 changed files with 111 additions and 66 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -45,3 +45,5 @@ nbdist/
 !*/build/*.java
 !*/build/*.html
 !*/build/*.xml
+
+*.yml
--- a/ruoyi-admin/src/main/resources/application.yml
+++ b/ruoyi-admin/src/main/resources/application.yml
@@ -159,24 +159,24 @@ sip:
  alarm: false

 ##zlm 默认服务器配置
-#media:
-#  id: haoxin-zlm-1
-#  # [必须修改] zlm服务器的内网IP
-#  ip: 192.168.158.199
-#  # [必须修改] zlm服务器的http.port
-#  http-port: 8092
-#  # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
-#  hook-ip: 192.168.158.199
-#  # [必选选] zlm服务器的hook.admin_params=secret
-#  secret: haoxin
-#  # 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
-#  rtp:
-#    # [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
-#    enable: true
-#    # [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
-#    port-range: 40000,40300 # 端口范围
-#    # [可选] 国标级联在此范围内选择端口发送媒体流,
-#    send-port-range: 40000,40300 # 端口范围
+media:
+  id: haoxin-zlm-1
+  # [必须修改] zlm服务器的内网IP
+  ip: 192.168.158.199
+  # [必须修改] zlm服务器的http.port
+  http-port: 8092
+  # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
+  hook-ip: 192.168.158.199
+  # [必选选] zlm服务器的hook.admin_params=secret
+  secret: haoxin
+  # 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
+  rtp:
+    # [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
+    enable: true
+    # [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
+    port-range: 40000,40300 # 端口范围
+    # [可选] 国标级联在此范围内选择端口发送媒体流,
+    send-port-range: 40000,40300 # 端口范围

 ##zlm 默认服务器配置
 #media:
@@ -199,24 +199,24 @@ sip:
 #    send-port-range: 30000,30500 # 端口范围

 #zlm 默认服务器配置
-media:
-  id: hxkj_zlm
-  # [必须修改] zlm服务器的内网IP
-  ip: 192.168.158.39
-  # [必须修改] zlm服务器的http.port
-  http-port: 8092
-  # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
-  hook-ip: 192.168.158.39
-  # [必选选] zlm服务器的hook.admin_params=secret
-  secret: hxkj_zlm
-  # 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
-  rtp:
-    # [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
-    enable: true
-    # [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
-    port-range: 30000,30500 # 端口范围
-    # [可选] 国标级联在此范围内选择端口发送媒体流,
-    send-port-range: 30000,30500 # 端口范围
+#media:
+#  id: hxkj_zlm
+#  # [必须修改] zlm服务器的内网IP
+#  ip: 192.168.158.39
+#  # [必须修改] zlm服务器的http.port
+#  http-port: 8092
+#  # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
+#  hook-ip: 192.168.158.39
+#  # [必选选] zlm服务器的hook.admin_params=secret
+#  secret: hxkj_zlm
+#  # 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
+#  rtp:
+#    # [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
+#    enable: true
+#    # [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
+#    port-range: 30000,30500 # 端口范围
+#    # [可选] 国标级联在此范围内选择端口发送媒体流,
+#    send-port-range: 30000,30500 # 端口范围


 # [根据业务需求配置]
--- a/ruoyi-ui-vue3/src/api/wvp/device.js
+++ b/ruoyi-ui-vue3/src/api/wvp/device.js
@@ -58,7 +58,7 @@ export function deleteDevice(deviceId) {
    })
 }

-// 移除设备
+// 同步进度查询
 export function syncStatus(deviceId) {
    return request({
        url: `/api/device/query/${deviceId}/sync_status`,
--- a/ruoyi-ui-vue3/src/views/wvp/channel/index.vue
+++ b/ruoyi-ui-vue3/src/views/wvp/channel/index.vue
@@ -29,7 +29,7 @@
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
-    <el-table v-loading="loading" :data="channelList" ref="channelListTable">
+    <el-table v-loading="loading" :data="channelList" ref="channelListTable" border>
      <el-table-column prop="name" label="名称" min-width="180" align="center"/>
      <el-table-column prop="deviceId" label="编号" min-width="180" align="center"/>
      <el-table-column label="快照" min-width="100" align="center">
@@ -471,8 +471,14 @@

    <el-dialog title="播放视频" v-model="openPlay" width="1000px" append-to-body @opened="openedPlay">
      <div style="width: 100%; height: 600px">
-<!--        <easy-player class="player" :video-url="vUrl" autoplay :live="true"></easy-player>-->
-          <CusPlayer ref="video"></CusPlayer>
+        <el-row>
+          <el-col :span="24">
+            <div class="player">
+              <CusPlayer ref="video"></CusPlayer>
+            </div>
+          </el-col>
+        </el-row>
+
      </div>
    </el-dialog>
  </div>
@@ -482,6 +488,7 @@
 import ChannelCode from "./channelCode.vue"
 import ChooseCivilCode from "./chooseCivilCode.vue"
 import ChooseGroup from "../../components/dialog/chooseGroup.vue"
+import CusPlayer from "@/components/flv/CusPlayer.vue";
 import {playStop} from "../../../api/wvp/play.js";
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {
@@ -494,6 +501,7 @@ import {
 import {getCommonChannel, resetChannel, updateChannelData, sendDevicePush} from "../../../api/wvp/channel.js";
 import {recordApi} from "../../../api/wvp/control.js";
 import router from "@/router";
+
 const route = useRoute();
 const {proxy} = getCurrentInstance();
 const channelList = ref([]);
@@ -534,30 +542,27 @@ const data = reactive({

 const {queryParams, form, rules} = toRefs(data);

-async function start(itemData){
+async function start(itemData) {
  const params = {
    deviceId: deviceId.value,
    channelId: itemData.deviceId
  }
  const res = await sendDevicePush(params);
-  console.log(res.data);
  vUrl.value = res.data.flv;
  openPlay.value = true;
 }

-function openedPlay(){
+function openedPlay() {
  nextTick(() => {
    if (video.value && typeof video.value.createPlayer === 'function') {
-      console.log('video 存在');
      video.value.createPlayer(vUrl.value, 0)
    } else {
-      console.error('createPlayer 方法不存在');
    }
  })

 }

-function paly(){
+function paly() {
  video.value.createPlayer(vUrl.value, 0)
 }

--- a/ruoyi-ui-vue3/src/views/wvp/cloudRecord/index.vue
+++ b/ruoyi-ui-vue3/src/views/wvp/cloudRecord/index.vue
@@ -77,6 +77,12 @@
        v-model:limit="queryParams.pageSize"
        @pagination="getRecordList"
    />
+
+    <el-dialog title="播放视频" v-model="openPlay" width="1000px" append-to-body>
+      <div class="player">
+        <easy-player class="player" :video-url="videoUrl" autoplay :live="true"></easy-player>
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -88,6 +94,7 @@ const {proxy} = getCurrentInstance();
 const mediaServerList = ref([])
 const recordList = ref([])
 const loading = ref(false)
+const openPlay = ref(false)
 const total = ref(0);
 const showSearch = ref(true);

@@ -160,8 +167,16 @@ function downloadFile(file) {
  })
 }

-function play() {
-
+const videoUrl = ref('');
+async function play(row) {
+  const res = await getPlayUrlPath({recordId: row.id});
+  if (location.protocol === "https:") {
+    videoUrl.value = res.data.httpsPath;
+  } else {
+    videoUrl.value = res.data.httpPath;
+  }
+  console.log(videoUrl.value);
+  openPlay.value = true;
 }

 onMounted(() => {
@@ -171,5 +186,8 @@ onMounted(() => {
 </script>

 <style scoped>
-
+.player {
+  width: 100%;
+  height: 600px;
+}
 </style>
--- a/ruoyi-ui-vue3/src/views/wvp/device/index.vue
+++ b/ruoyi-ui-vue3/src/views/wvp/device/index.vue
@@ -110,10 +110,9 @@
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
-<!--          <el-button link type="primary" :disabled="scope.row.online===0" icon="Edit"-->
-<!--                     @click="refDevice(scope.row)"-->
-<!--                     @mouseover="getTooltipContent(scope.row.deviceId)">刷新-->
-<!--          </el-button>-->
+          <el-button link type="primary" :disabled="scope.row.online===0" icon="Refresh"
+                     @click="refDevice(scope.row)">刷新
+          </el-button>
          <el-button type="text" icon="Edit"
                     @click="showChannelList(scope.row)">通道
          </el-button>
@@ -236,6 +235,9 @@
      <div style="display:flex;align-items: center;justify-content: center">
        <el-progress type="dashboard" :percentage="percentage" :color="colors"/>
      </div>
+      <div style="display:flex;align-items: center;justify-content: center">
+        {{ msg }}
+      </div>
    </el-dialog>
  </div>
 </template>
@@ -247,7 +249,7 @@ import {
  getDeviceById,
  listDevice,
  subscribeCatalog,
-  subscribeMobilePosition,
+  subscribeMobilePosition, syncStatus,
  updateDevice,
  updateTransport,
 } from "../../../api/wvp/device.js";
@@ -265,6 +267,7 @@ const loading = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
 const title = ref("");
+const msg = ref("");
 const configInfoData = ref({});
 const percentage = ref(0)

@@ -409,8 +412,6 @@ function transportChange(row) {
 * @param value
 */
 function subscribeForCatalog(data, value) {
-  console.log(data)
-  console.log(value)
  subscribeCatalog({id: data, cycle: value ? 60 : 0}).then(response => {

  })
@@ -423,8 +424,6 @@ function subscribeForCatalog(data, value) {
 * @param value
 */
 function subscribeForMobilePosition(data, value) {
-  console.log(data)
-  console.log(value)
  subscribeMobilePosition({id: data, cycle: value ? 60 : 0, interval: value ? 5 : 0}).then(response => {

  })
@@ -435,23 +434,43 @@ function subscribeForMobilePosition(data, value) {
 */
 function showInfo() {
  configInfo().then(response => {
-    console.log(response.data)
    showDialog.value = true
    configInfoData.value = response.data
  })
 }

 /**
- * 刷新对应设备
+ * 刷新对应设备 percentage
 *
 * @param itemData
 */
-function refDevice(itemData) {
-  console.log("刷新对应设备:" + itemData.deviceId);
-  devicesSync(itemData.deviceId).then(response => {
-    console.log(response)
-    showProgress.value = true
-  })
+async function refDevice(itemData) {
+  let intervalId = null;
+  const res = await devicesSync(itemData.deviceId);
+  showProgress.value = true;
+  msg.value = res.msg;
+  percentage.value = 0;
+  intervalId = setInterval(async () => {
+    try {
+      const ans = await syncStatus(itemData.deviceId);
+      if (ans.msg === '成功') {
+        clearInterval(intervalId);
+        let progressIntervalId = null;
+        progressIntervalId = setInterval(() => {
+          if (percentage.value < 100) {
+            percentage.value += 20;
+          } else {
+            clearInterval(progressIntervalId);
+            msg.value = ans.msg;
+          }
+        }, 300);
+      }
+    } catch (e) {
+      clearInterval(intervalId);
+      msg.value = "同步通道失败";
+    }
+  }, 500);
+
 }

 /**
@@ -461,6 +480,7 @@ function refDevice(itemData) {
 * @returns {Promise<void>}
 */
 async function getTooltipContent(deviceId) {
+
  // syncStatus(deviceId).then(response => {
  //
  // })
--- a/snap/34020000001360000001_34020000001310000001.jpg
+++ b/snap/34020000001360000001_34020000001310000001.jpg