diff --git a/public/image/error.png b/public/image/error.png
new file mode 100644
index 0000000..52ee3e7
--- /dev/null
+++ b/public/image/error.png
Binary files differ

diff --git a/public/image/error.png b/public/image/error.png
new file mode 100644
index 0000000..52ee3e7
--- /dev/null
+++ b/public/image/error.png
Binary files differ
diff --git a/public/image/loaidng2.gif b/public/image/loaidng2.gif
new file mode 100644
index 0000000..8188745
--- /dev/null
+++ b/public/image/loaidng2.gif
Binary files differ

diff --git a/public/image/error.png b/public/image/error.png
new file mode 100644
index 0000000..52ee3e7
--- /dev/null
+++ b/public/image/error.png
Binary files differ
diff --git a/public/image/loaidng2.gif b/public/image/loaidng2.gif
new file mode 100644
index 0000000..8188745
--- /dev/null
+++ b/public/image/loaidng2.gif
Binary files differ
diff --git a/public/image/normal.png b/public/image/normal.png
new file mode 100644
index 0000000..dc2545e
--- /dev/null
+++ b/public/image/normal.png
Binary files differ

diff --git a/public/image/error.png b/public/image/error.png
new file mode 100644
index 0000000..52ee3e7
--- /dev/null
+++ b/public/image/error.png
Binary files differ
diff --git a/public/image/loaidng2.gif b/public/image/loaidng2.gif
new file mode 100644
index 0000000..8188745
--- /dev/null
+++ b/public/image/loaidng2.gif
Binary files differ
diff --git a/public/image/normal.png b/public/image/normal.png
new file mode 100644
index 0000000..dc2545e
--- /dev/null
+++ b/public/image/normal.png
Binary files differ
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index 0742783..4b865de 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -91,6 +91,7 @@
             })
           }
         }
+        modelList.value = modelList.value.sort((a: any, b: any) => Number(a.id) - Number(b.id))
         nextTick(() => {
           modelList.value.forEach((element: any) => {
             multipleTableRef.value!.toggleRowSelection(
@@ -143,8 +144,8 @@
     sceneList.value = res.data
   })
   getModelAll({}).then((res) => {
-    modelList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 }))
-    modelAllList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 }))
+    modelList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 })).sort((a: any, b: any) => Number(a.id) - Number(b.id))
+    modelAllList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 })).sort((a: any, b: any) => Number(a.id) - Number(b.id))
   })
 }
 fetchDict()
@@ -289,7 +290,10 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select" style="width: 100%;">
+            <el-select
+              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;"
+            >
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>

diff --git a/public/image/error.png b/public/image/error.png
new file mode 100644
index 0000000..52ee3e7
--- /dev/null
+++ b/public/image/error.png
Binary files differ
diff --git a/public/image/loaidng2.gif b/public/image/loaidng2.gif
new file mode 100644
index 0000000..8188745
--- /dev/null
+++ b/public/image/loaidng2.gif
Binary files differ
diff --git a/public/image/normal.png b/public/image/normal.png
new file mode 100644
index 0000000..dc2545e
--- /dev/null
+++ b/public/image/normal.png
Binary files differ
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index 0742783..4b865de 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -91,6 +91,7 @@
             })
           }
         }
+        modelList.value = modelList.value.sort((a: any, b: any) => Number(a.id) - Number(b.id))
         nextTick(() => {
           modelList.value.forEach((element: any) => {
             multipleTableRef.value!.toggleRowSelection(
@@ -143,8 +144,8 @@
     sceneList.value = res.data
   })
   getModelAll({}).then((res) => {
-    modelList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 }))
-    modelAllList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 }))
+    modelList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 })).sort((a: any, b: any) => Number(a.id) - Number(b.id))
+    modelAllList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 })).sort((a: any, b: any) => Number(a.id) - Number(b.id))
   })
 }
 fetchDict()
@@ -289,7 +290,10 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select" style="width: 100%;">
+            <el-select
+              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;"
+            >
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
diff --git a/src/views/page/video/components/wsPlayer.vue b/src/views/page/video/components/wsPlayer.vue
new file mode 100644
index 0000000..b3c93b6
--- /dev/null
+++ b/src/views/page/video/components/wsPlayer.vue
@@ -0,0 +1,52 @@
+<!--
+  Description: 视频播放-img-ws
+  Author: 李亚光
+  Date: 2024-11-11
+ -->
+<script lang="ts" setup name="VideoPlayer">
+const $props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+const publicPath = window.location.href.split('#')[0]
+const src = ref(`${publicPath}/image/normal.png`)
+const webSocket = ref()
+watch(() => $props.id, (newVal) => {
+  if (newVal) {
+    console.log(newVal, 'newVal')
+    src.value = `${publicPath}/image/loaidng2.gif`
+    // webSocket.value = new WebSocket('ws://192.168.10.135:9000/api/display/ws/video/8')
+    webSocket.value = new WebSocket(`ws://${window.localStorage.getItem('IntegratedFront')?.split('://')[1]}/api/display/ws/video/${newVal}`)
+    webSocket.value.onmessage = function (event: any) {
+      // 从服务器接收二进制图像数据并转换为 Blob 对象
+      const blob = new Blob([event.data], { type: 'image/jpeg' })
+      // 生成图像 URL 并更新 <img> 标签
+      src.value = URL.createObjectURL(blob)
+    }
+    // webSocket.value.onclose = function () {
+    //   console.error('WebSocket 连接已关闭')
+    //   src.value = `${publicPath}/image/normal.png`
+    // }
+
+    webSocket.value.onerror = (error: any) => {
+      console.log(error, 'error')
+      console.error('WebSocket 发生错误: ', error)
+      src.value = `${publicPath}/image/error.png`
+    }
+  }
+})
+onUnmounted(() => {
+  if (webSocket.value) {
+    webSocket.value.close()
+    webSocket.value = ''
+    src.value = `${publicPath}/image/normal.png`
+  }
+})
+</script>
+
+<template>
+  <!-- <img :src="src" style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);" alt="视频流"  /> -->
+  <el-image style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" :src="src" fit="fill" />
+</template>

diff --git a/public/image/error.png b/public/image/error.png
new file mode 100644
index 0000000..52ee3e7
--- /dev/null
+++ b/public/image/error.png
Binary files differ
diff --git a/public/image/loaidng2.gif b/public/image/loaidng2.gif
new file mode 100644
index 0000000..8188745
--- /dev/null
+++ b/public/image/loaidng2.gif
Binary files differ
diff --git a/public/image/normal.png b/public/image/normal.png
new file mode 100644
index 0000000..dc2545e
--- /dev/null
+++ b/public/image/normal.png
Binary files differ
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index 0742783..4b865de 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -91,6 +91,7 @@
             })
           }
         }
+        modelList.value = modelList.value.sort((a: any, b: any) => Number(a.id) - Number(b.id))
         nextTick(() => {
           modelList.value.forEach((element: any) => {
             multipleTableRef.value!.toggleRowSelection(
@@ -143,8 +144,8 @@
     sceneList.value = res.data
   })
   getModelAll({}).then((res) => {
-    modelList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 }))
-    modelAllList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 }))
+    modelList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 })).sort((a: any, b: any) => Number(a.id) - Number(b.id))
+    modelAllList.value = res.data.map((item: any) => ({ ...item, custom_threshold: 0.5 })).sort((a: any, b: any) => Number(a.id) - Number(b.id))
   })
 }
 fetchDict()
@@ -289,7 +290,10 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select" style="width: 100%;">
+            <el-select
+              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;"
+            >
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
diff --git a/src/views/page/video/components/wsPlayer.vue b/src/views/page/video/components/wsPlayer.vue
new file mode 100644
index 0000000..b3c93b6
--- /dev/null
+++ b/src/views/page/video/components/wsPlayer.vue
@@ -0,0 +1,52 @@
+<!--
+  Description: 视频播放-img-ws
+  Author: 李亚光
+  Date: 2024-11-11
+ -->
+<script lang="ts" setup name="VideoPlayer">
+const $props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+const publicPath = window.location.href.split('#')[0]
+const src = ref(`${publicPath}/image/normal.png`)
+const webSocket = ref()
+watch(() => $props.id, (newVal) => {
+  if (newVal) {
+    console.log(newVal, 'newVal')
+    src.value = `${publicPath}/image/loaidng2.gif`
+    // webSocket.value = new WebSocket('ws://192.168.10.135:9000/api/display/ws/video/8')
+    webSocket.value = new WebSocket(`ws://${window.localStorage.getItem('IntegratedFront')?.split('://')[1]}/api/display/ws/video/${newVal}`)
+    webSocket.value.onmessage = function (event: any) {
+      // 从服务器接收二进制图像数据并转换为 Blob 对象
+      const blob = new Blob([event.data], { type: 'image/jpeg' })
+      // 生成图像 URL 并更新 <img> 标签
+      src.value = URL.createObjectURL(blob)
+    }
+    // webSocket.value.onclose = function () {
+    //   console.error('WebSocket 连接已关闭')
+    //   src.value = `${publicPath}/image/normal.png`
+    // }
+
+    webSocket.value.onerror = (error: any) => {
+      console.log(error, 'error')
+      console.error('WebSocket 发生错误: ', error)
+      src.value = `${publicPath}/image/error.png`
+    }
+  }
+})
+onUnmounted(() => {
+  if (webSocket.value) {
+    webSocket.value.close()
+    webSocket.value = ''
+    src.value = `${publicPath}/image/normal.png`
+  }
+})
+</script>
+
+<template>
+  <!-- <img :src="src" style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);" alt="视频流"  /> -->
+  <el-image style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" :src="src" fit="fill" />
+</template>
diff --git a/src/views/page/video/index.vue b/src/views/page/video/index.vue
index 53298f6..9f48ac1 100644
--- a/src/views/page/video/index.vue
+++ b/src/views/page/video/index.vue
@@ -5,7 +5,7 @@
  -->
 <script lang="ts" setup name="VideoPlayerPage">
 import dayjs from 'dayjs'
-import player from './components/player.vue'
+import player from './components/wsPlayer.vue'
 import { getDeviceList } from '@/api/page/device'
 import { getResultList, getResultPic } from '@/api/page/result'
 const $route = useRoute()
@@ -29,10 +29,10 @@
   if (!row.id) {
     getDeviceList({ offset: 1, limit: 4 }).then((res) => {
       deviceList.value = res.data.items
-      showVideo.value.push(res.data.items[0] || { url: '', id: new Date().getTime() })
-      showVideo.value.push(res.data.items[1] || { url: '', id: new Date().getTime() })
-      showVideo.value.push(res.data.items[2] || { url: '', id: new Date().getTime() })
-      showVideo.value.push(res.data.items[3] || { url: '', id: new Date().getTime() })
+      showVideo.value.push(res.data.items[0] || { url: '', id: '' })
+      showVideo.value.push(res.data.items[1] || { url: '', id: '' })
+      showVideo.value.push(res.data.items[2] || { url: '', id: '' })
+      showVideo.value.push(res.data.items[3] || { url: '', id: '' })
     })
   }
   else {
@@ -107,17 +107,17 @@
 watch(() => showVideoNum.value, (newVal, oldVal) => {
   showVideo.value = []
   if (newVal === '一屏') {
-    showVideo.value.push(deviceList.value[0] || { url: '', id: new Date().getTime() })
+    showVideo.value.push(deviceList.value[0] || { url: '', id: '1' })
   }
   if (newVal === '二屏') {
-    showVideo.value.push(deviceList.value[0] || { url: '', id: new Date().getTime() })
-    showVideo.value.push(deviceList.value[1] || { url: '', id: new Date().getTime() })
+    showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
+    showVideo.value.push(deviceList.value[1] || { url: '', id: '' })
   }
   else if (newVal === '四屏') {
-    showVideo.value.push(deviceList.value[0] || { url: '', id: new Date().getTime() })
-    showVideo.value.push(deviceList.value[1] || { url: '', id: new Date().getTime() })
-    showVideo.value.push(deviceList.value[2] || { url: '', id: new Date().getTime() })
-    showVideo.value.push(deviceList.value[3] || { url: '', id: new Date().getTime() })
+    showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
+    showVideo.value.push(deviceList.value[1] || { url: '', id: '' })
+    showVideo.value.push(deviceList.value[2] || { url: '', id: '' })
+    showVideo.value.push(deviceList.value[3] || { url: '', id: '' })
   }
 })
 const load = () => {
@@ -168,19 +168,19 @@
         </div>
         <div class="video">
           <player
-            :id="`video-${showVideo[0]?.id}` || ' '" :url="showVideo[0]?.input_stream_url || ''" class="border-1"
+            :id="`${showVideo[0]?.id}` || ' '" class="border-1"
             :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
           />
           <player
-            :id="`video-${showVideo[1]?.id}` || ' '" :url="showVideo[1]?.input_stream_url || ''" class="border-2"
+            :id="`${showVideo[1]?.id}` || ' '" class="border-2"
             :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
           />
           <player
-            :id="`video-${showVideo[2]?.id}` || ' '" :url="showVideo[2]?.input_stream_url || ''" class="border-3"
+            :id="`${showVideo[2]?.id}` || ' '" class="border-3"
             :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
           />
           <player
-            :id="`video-${showVideo[3]?.id}` || ' '" :url="showVideo[3]?.input_stream_url || ''" class="border-4"
+            :id="`${showVideo[3]?.id}` || ' '" class="border-4"
             :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
           />
         </div>
@@ -237,25 +237,26 @@
     .video {
       display: flex;
       flex-wrap: wrap;
+      border: 2px solid #122;
 
       .border-1 {
-        border-right: 1.5px solid #b1afaf;
-        border-bottom: 1.5px solid #b1afaf;
+        border-right: 1.5px solid #122;
+        border-bottom: 1.5px solid #122;
       }
 
       .border-2 {
-        border-left: 1.5px solid #b1afaf;
-        border-bottom: 1.5px solid #b1afaf;
+        border-left: 1.5px solid #122;
+        border-bottom: 1.5px solid #122;
       }
 
       .border-3 {
-        border-right: 1.5px solid #b1afaf;
-        border-top: 1.5px solid #b1afaf;
+        border-right: 1.5px solid #122;
+        border-top: 1.5px solid #122;
       }
 
       .border-4 {
-        border-left: 1.5px solid #b1afaf;
-        border-top: 1.5px solid #b1afaf;
+        border-left: 1.5px solid #122;
+        border-top: 1.5px solid #122;
       }
     }
   }