diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
diff --git a/public/playerVideo6/jessibuca.js b/public/playerVideo6/jessibuca.js
index 601f208..1450494 100644
--- a/public/playerVideo6/jessibuca.js
+++ b/public/playerVideo6/jessibuca.js
@@ -37,8 +37,8 @@
       hasControl: !1,
       loadingText: '',
       background: '',
-      // decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
-      decoder: `/playerVideo6/decoder.js`, // 本地使用
+      decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
+      // decoder: `/playerVideo6/decoder.js`, // 本地使用
       // decoder: import.meta.env.MODE === 'development' ?  `/playerVideo6/decoder.js` : `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`,
       url: '',
       rotate: 0,

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
diff --git a/public/playerVideo6/jessibuca.js b/public/playerVideo6/jessibuca.js
index 601f208..1450494 100644
--- a/public/playerVideo6/jessibuca.js
+++ b/public/playerVideo6/jessibuca.js
@@ -37,8 +37,8 @@
       hasControl: !1,
       loadingText: '',
       background: '',
-      // decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
-      decoder: `/playerVideo6/decoder.js`, // 本地使用
+      decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
+      // decoder: `/playerVideo6/decoder.js`, // 本地使用
       // decoder: import.meta.env.MODE === 'development' ?  `/playerVideo6/decoder.js` : `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`,
       url: '',
       rotate: 0,
diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
index a19c56c..3bab6c4 100644
--- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
@@ -1,41 +1,55 @@
 <script lang="ts" setup name="DrawArea">
 const props = defineProps({
-  dialogStatus: {
+  dialogStatus: { // 对话框的状态，控制是否可编辑
     type: String,
   },
-  points: {
+  points: { // 标记位置信息数组，每个元素包含boundary（顶点坐标）和remark（备注）
     type: Array,
     default: () => [],
   },
-  width: {
+  width: { // 画布宽度
     type: Number,
     default: 640,
   },
-  height: {
+  height: { // 画布高度
     type: Number,
     default: 360,
   },
+  currentDrawButton: { // 当前绘制模式（1=矩形，2=不规则四边形）
+    type: String,
+  },
 })
+
+// 定义组件抛出的事件
 const emits = defineEmits(['givepointsInfo'])
-const lineColor = ref('#1aa034')
-const lineColors = ref([])
-const baseurl = ref(window.location.href.split('/#')[0])
-const canvas = ref(null) as any
-const myCtx = ref(null) as any
-const container = ref([]) as any
-const style = ref([]) as any // 点的位置
-const pointsInfo = ref([]) as any // 标记位置信息
+
+// 颜色相关状态
+const lineColor = ref('#1aa034') // 线条颜色
+const lineColors = ref([]) // 多线条颜色数组
+
+// 画布相关引用
+const canvas = ref(null) as any // 画布dom引用
+const myCtx = ref(null) as any // 画布2D绘图上下文
+
+// 数据存储
+const pointsInfo = ref([]) as any // 存储所有标记的位置信息（含坐标和备注）
+
+/**
+ * 初始化绘制方法
+ * 负责画布渲染和事件绑定
+ */
 const initDraw = () => {
-  if (!pointsInfo.value.length) {
+  if (!pointsInfo.value.length) { // 无数据时不绘制
     return
   }
   const ctx = myCtx.value
   // 初始位置
   function draw() {
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
     if (pointsInfo.value && pointsInfo.value.length) {
       pointsInfo.value.forEach((e: any, index: number) => {
         ctx.beginPath()
+        // 绘制图形边界
         if (e.boundary && e.boundary.length) { // 画线
           ctx.moveTo(e.boundary[0].x, e.boundary[0].y)
           ctx.lineTo(e.boundary[1].x, e.boundary[1].y)
@@ -53,7 +67,7 @@
           ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034'
         }
         ctx.stroke()
-        ctx.closePath()
+        ctx.closePath() // 闭合路径形成图形
         // --------------------------------文字-------------------------------
         ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑'
         if (lineColors.value.length) {
@@ -81,7 +95,7 @@
     ctx.lineWidth = window.localStorage.getItem('lineWidth') || 2
     ctx.stroke()
   }
-
+  // 理拖拽事件，更新矩形顶点的位置并重新绘制
   function drag(e: any, pointIndex: number) {
     if (props.dialogStatus === 'detail') {
       return
@@ -102,10 +116,83 @@
     else if (mousePos.y > props.height) {
       mousePos.y = props.height
     }
+    // 计算商和余数的辅助函数
     const { quotient, remainder } = divideAndModulo(pointIndex, 4)
     console.log(`移动的是第${quotient + 1}条数据，第${remainder + 1}个点`)
-    pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
-    pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    if (props.currentDrawButton === '1') {
+      const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组
+      const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象
+
+      // 保存原始矩形的宽高（基于未拖拽前的坐标）
+      const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x
+      const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y
+      // 计算动态宽高（根据拖拽点和原始顶点的相对位置）
+      // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标
+      switch (remainder) {
+        case 0:
+          // 左上角顶点（x0,y0）
+          // 保持宽高不变，右下角顶点 = 左上角 + 宽高
+          rect[2].x = draggedPoint.x + originalWidth // 右下角x
+          // rect[2].y = draggedPoint.y + originalHeight // 右下角y
+          // 右上角顶点y与左上角相同，x为宽
+          rect[1].y = draggedPoint.y
+          rect[1].x = draggedPoint.x + originalWidth
+          // 左下角顶点x与左上角相同，y为高
+          rect[3].x = draggedPoint.x
+          // rect[3].y = draggedPoint.y + originalHeight
+          break
+
+        case 1: // 右上角顶点（x1,y1）
+          // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高）
+          rect[3].x = draggedPoint.x - originalWidth // 左下角x
+          rect[3].y = draggedPoint.y + originalHeight // 左下角y
+          // 左上角顶点x = 右上角x - 宽，y相同
+          rect[0].x = draggedPoint.x - originalWidth
+          rect[0].y = draggedPoint.y
+          // 右下角顶点x相同，y = 右上角y + 高
+          rect[2].x = draggedPoint.x
+          rect[2].y = draggedPoint.y + originalHeight
+          break
+
+        case 2:
+          // 右下角顶点（x2,y2）
+          // 保持宽高不变，左上角顶点 = 右下角 - 宽高
+          // rect[0].x = draggedPoint.x - originalWidth // 左上角x
+          rect[0].y = draggedPoint.y - originalHeight // 左上角y
+          // 右上角顶点x = 右下角x，y = 右下角y - 高
+          rect[1].x = draggedPoint.x
+          rect[1].y = draggedPoint.y - originalHeight
+          // 左下角顶点x = 右下角x - 宽，y相同
+          // rect[3].x = draggedPoint.x - originalWidth
+          rect[3].y = draggedPoint.y
+          break
+
+        case 3:
+          // 左下角顶点（x3,y3）
+          // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高）
+          // rect[1].x = draggedPoint.x + originalWidth // 右上角x
+          // rect[1].y = draggedPoint.y - originalHeight // 右上角y
+          // 左上角顶点y = 左下角y - 高，x相同
+          rect[0].x = draggedPoint.x
+          rect[0].y = draggedPoint.y - originalHeight
+          // 右下角顶点x = 左下角x + 宽，y相同
+          rect[2].x = draggedPoint.x + originalWidth
+          rect[2].y = draggedPoint.y
+          break
+      }
+
+      // 更新坐标（注意：顶点对象是引用类型，直接修改即可）
+      // 无需重新赋值数组，直接修改对象属性保证响应式
+      draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标
+      draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标
+
+      // 限制拖拽点在画布内
+    }
+    else {
+      pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
+      pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    }
+
     draw()
   }
 
@@ -117,7 +204,7 @@
       remainder,
     }
   }
-
+  // 为每个点添加拖拽事件监听器
   function addDragEvents() {
     if (props.dialogStatus === 'detail') {
       return
@@ -144,7 +231,7 @@
       pointsInfoElements[i].setAttribute('data-point-index', `${i}`)
     }
   }
-
+  // 初始化绘制和添加拖拽事件
   function init() {
     draw()
     addDragEvents()

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
diff --git a/public/playerVideo6/jessibuca.js b/public/playerVideo6/jessibuca.js
index 601f208..1450494 100644
--- a/public/playerVideo6/jessibuca.js
+++ b/public/playerVideo6/jessibuca.js
@@ -37,8 +37,8 @@
       hasControl: !1,
       loadingText: '',
       background: '',
-      // decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
-      decoder: `/playerVideo6/decoder.js`, // 本地使用
+      decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
+      // decoder: `/playerVideo6/decoder.js`, // 本地使用
       // decoder: import.meta.env.MODE === 'development' ?  `/playerVideo6/decoder.js` : `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`,
       url: '',
       rotate: 0,
diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
index a19c56c..3bab6c4 100644
--- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
@@ -1,41 +1,55 @@
 <script lang="ts" setup name="DrawArea">
 const props = defineProps({
-  dialogStatus: {
+  dialogStatus: { // 对话框的状态，控制是否可编辑
     type: String,
   },
-  points: {
+  points: { // 标记位置信息数组，每个元素包含boundary（顶点坐标）和remark（备注）
     type: Array,
     default: () => [],
   },
-  width: {
+  width: { // 画布宽度
     type: Number,
     default: 640,
   },
-  height: {
+  height: { // 画布高度
     type: Number,
     default: 360,
   },
+  currentDrawButton: { // 当前绘制模式（1=矩形，2=不规则四边形）
+    type: String,
+  },
 })
+
+// 定义组件抛出的事件
 const emits = defineEmits(['givepointsInfo'])
-const lineColor = ref('#1aa034')
-const lineColors = ref([])
-const baseurl = ref(window.location.href.split('/#')[0])
-const canvas = ref(null) as any
-const myCtx = ref(null) as any
-const container = ref([]) as any
-const style = ref([]) as any // 点的位置
-const pointsInfo = ref([]) as any // 标记位置信息
+
+// 颜色相关状态
+const lineColor = ref('#1aa034') // 线条颜色
+const lineColors = ref([]) // 多线条颜色数组
+
+// 画布相关引用
+const canvas = ref(null) as any // 画布dom引用
+const myCtx = ref(null) as any // 画布2D绘图上下文
+
+// 数据存储
+const pointsInfo = ref([]) as any // 存储所有标记的位置信息（含坐标和备注）
+
+/**
+ * 初始化绘制方法
+ * 负责画布渲染和事件绑定
+ */
 const initDraw = () => {
-  if (!pointsInfo.value.length) {
+  if (!pointsInfo.value.length) { // 无数据时不绘制
     return
   }
   const ctx = myCtx.value
   // 初始位置
   function draw() {
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
     if (pointsInfo.value && pointsInfo.value.length) {
       pointsInfo.value.forEach((e: any, index: number) => {
         ctx.beginPath()
+        // 绘制图形边界
         if (e.boundary && e.boundary.length) { // 画线
           ctx.moveTo(e.boundary[0].x, e.boundary[0].y)
           ctx.lineTo(e.boundary[1].x, e.boundary[1].y)
@@ -53,7 +67,7 @@
           ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034'
         }
         ctx.stroke()
-        ctx.closePath()
+        ctx.closePath() // 闭合路径形成图形
         // --------------------------------文字-------------------------------
         ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑'
         if (lineColors.value.length) {
@@ -81,7 +95,7 @@
     ctx.lineWidth = window.localStorage.getItem('lineWidth') || 2
     ctx.stroke()
   }
-
+  // 理拖拽事件，更新矩形顶点的位置并重新绘制
   function drag(e: any, pointIndex: number) {
     if (props.dialogStatus === 'detail') {
       return
@@ -102,10 +116,83 @@
     else if (mousePos.y > props.height) {
       mousePos.y = props.height
     }
+    // 计算商和余数的辅助函数
     const { quotient, remainder } = divideAndModulo(pointIndex, 4)
     console.log(`移动的是第${quotient + 1}条数据，第${remainder + 1}个点`)
-    pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
-    pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    if (props.currentDrawButton === '1') {
+      const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组
+      const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象
+
+      // 保存原始矩形的宽高（基于未拖拽前的坐标）
+      const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x
+      const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y
+      // 计算动态宽高（根据拖拽点和原始顶点的相对位置）
+      // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标
+      switch (remainder) {
+        case 0:
+          // 左上角顶点（x0,y0）
+          // 保持宽高不变，右下角顶点 = 左上角 + 宽高
+          rect[2].x = draggedPoint.x + originalWidth // 右下角x
+          // rect[2].y = draggedPoint.y + originalHeight // 右下角y
+          // 右上角顶点y与左上角相同，x为宽
+          rect[1].y = draggedPoint.y
+          rect[1].x = draggedPoint.x + originalWidth
+          // 左下角顶点x与左上角相同，y为高
+          rect[3].x = draggedPoint.x
+          // rect[3].y = draggedPoint.y + originalHeight
+          break
+
+        case 1: // 右上角顶点（x1,y1）
+          // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高）
+          rect[3].x = draggedPoint.x - originalWidth // 左下角x
+          rect[3].y = draggedPoint.y + originalHeight // 左下角y
+          // 左上角顶点x = 右上角x - 宽，y相同
+          rect[0].x = draggedPoint.x - originalWidth
+          rect[0].y = draggedPoint.y
+          // 右下角顶点x相同，y = 右上角y + 高
+          rect[2].x = draggedPoint.x
+          rect[2].y = draggedPoint.y + originalHeight
+          break
+
+        case 2:
+          // 右下角顶点（x2,y2）
+          // 保持宽高不变，左上角顶点 = 右下角 - 宽高
+          // rect[0].x = draggedPoint.x - originalWidth // 左上角x
+          rect[0].y = draggedPoint.y - originalHeight // 左上角y
+          // 右上角顶点x = 右下角x，y = 右下角y - 高
+          rect[1].x = draggedPoint.x
+          rect[1].y = draggedPoint.y - originalHeight
+          // 左下角顶点x = 右下角x - 宽，y相同
+          // rect[3].x = draggedPoint.x - originalWidth
+          rect[3].y = draggedPoint.y
+          break
+
+        case 3:
+          // 左下角顶点（x3,y3）
+          // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高）
+          // rect[1].x = draggedPoint.x + originalWidth // 右上角x
+          // rect[1].y = draggedPoint.y - originalHeight // 右上角y
+          // 左上角顶点y = 左下角y - 高，x相同
+          rect[0].x = draggedPoint.x
+          rect[0].y = draggedPoint.y - originalHeight
+          // 右下角顶点x = 左下角x + 宽，y相同
+          rect[2].x = draggedPoint.x + originalWidth
+          rect[2].y = draggedPoint.y
+          break
+      }
+
+      // 更新坐标（注意：顶点对象是引用类型，直接修改即可）
+      // 无需重新赋值数组，直接修改对象属性保证响应式
+      draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标
+      draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标
+
+      // 限制拖拽点在画布内
+    }
+    else {
+      pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
+      pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    }
+
     draw()
   }
 
@@ -117,7 +204,7 @@
       remainder,
     }
   }
-
+  // 为每个点添加拖拽事件监听器
   function addDragEvents() {
     if (props.dialogStatus === 'detail') {
       return
@@ -144,7 +231,7 @@
       pointsInfoElements[i].setAttribute('data-point-index', `${i}`)
     }
   }
-
+  // 初始化绘制和添加拖拽事件
   function init() {
     draw()
     addDragEvents()
diff --git a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
index 735d1e7..09de217 100644
--- a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
@@ -27,6 +27,7 @@
 const videoHeight = ref(360)
 const cameraIndexCode = ref('') // 设备国标号
 const nvrIndexCode = ref('') // nvr国标号
+const currentDrawButton = ref('1')
 // 显示标题
 const textMap: { [key: string]: string } = {
   detail: '详情',
@@ -852,7 +853,20 @@
         </el-form>
       </el-col>
       <el-col :span="12">
-        <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+        <div style="display: flex;">
+          <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+          >
+            <el-radio-button
+              v-for="item in [{ name: '矩形', value: '1' }, { name: '四边形', value: '2' }]" :key="item.value" :label="item.value"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
         <div id="draw-area" class="draw" :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }">
           <iframe
             id="myframe"
@@ -861,7 +875,7 @@
             :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }"
             style="position: absolute; top: 0px; left: 0px;"
           />
-          <draw-area ref="drawAreaRef" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
+          <draw-area ref="drawAreaRef" :current-draw-button="currentDrawButton" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
           <!-- <span v-if="dialogStatus !== 'detail'" style="margin-top: 10px;font-size: 11px;color: red;">注意：请绘制出一个四边形</span> -->
         </div>
       </el-col>

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
diff --git a/public/playerVideo6/jessibuca.js b/public/playerVideo6/jessibuca.js
index 601f208..1450494 100644
--- a/public/playerVideo6/jessibuca.js
+++ b/public/playerVideo6/jessibuca.js
@@ -37,8 +37,8 @@
       hasControl: !1,
       loadingText: '',
       background: '',
-      // decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
-      decoder: `/playerVideo6/decoder.js`, // 本地使用
+      decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
+      // decoder: `/playerVideo6/decoder.js`, // 本地使用
       // decoder: import.meta.env.MODE === 'development' ?  `/playerVideo6/decoder.js` : `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`,
       url: '',
       rotate: 0,
diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
index a19c56c..3bab6c4 100644
--- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
@@ -1,41 +1,55 @@
 <script lang="ts" setup name="DrawArea">
 const props = defineProps({
-  dialogStatus: {
+  dialogStatus: { // 对话框的状态，控制是否可编辑
     type: String,
   },
-  points: {
+  points: { // 标记位置信息数组，每个元素包含boundary（顶点坐标）和remark（备注）
     type: Array,
     default: () => [],
   },
-  width: {
+  width: { // 画布宽度
     type: Number,
     default: 640,
   },
-  height: {
+  height: { // 画布高度
     type: Number,
     default: 360,
   },
+  currentDrawButton: { // 当前绘制模式（1=矩形，2=不规则四边形）
+    type: String,
+  },
 })
+
+// 定义组件抛出的事件
 const emits = defineEmits(['givepointsInfo'])
-const lineColor = ref('#1aa034')
-const lineColors = ref([])
-const baseurl = ref(window.location.href.split('/#')[0])
-const canvas = ref(null) as any
-const myCtx = ref(null) as any
-const container = ref([]) as any
-const style = ref([]) as any // 点的位置
-const pointsInfo = ref([]) as any // 标记位置信息
+
+// 颜色相关状态
+const lineColor = ref('#1aa034') // 线条颜色
+const lineColors = ref([]) // 多线条颜色数组
+
+// 画布相关引用
+const canvas = ref(null) as any // 画布dom引用
+const myCtx = ref(null) as any // 画布2D绘图上下文
+
+// 数据存储
+const pointsInfo = ref([]) as any // 存储所有标记的位置信息（含坐标和备注）
+
+/**
+ * 初始化绘制方法
+ * 负责画布渲染和事件绑定
+ */
 const initDraw = () => {
-  if (!pointsInfo.value.length) {
+  if (!pointsInfo.value.length) { // 无数据时不绘制
     return
   }
   const ctx = myCtx.value
   // 初始位置
   function draw() {
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
     if (pointsInfo.value && pointsInfo.value.length) {
       pointsInfo.value.forEach((e: any, index: number) => {
         ctx.beginPath()
+        // 绘制图形边界
         if (e.boundary && e.boundary.length) { // 画线
           ctx.moveTo(e.boundary[0].x, e.boundary[0].y)
           ctx.lineTo(e.boundary[1].x, e.boundary[1].y)
@@ -53,7 +67,7 @@
           ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034'
         }
         ctx.stroke()
-        ctx.closePath()
+        ctx.closePath() // 闭合路径形成图形
         // --------------------------------文字-------------------------------
         ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑'
         if (lineColors.value.length) {
@@ -81,7 +95,7 @@
     ctx.lineWidth = window.localStorage.getItem('lineWidth') || 2
     ctx.stroke()
   }
-
+  // 理拖拽事件，更新矩形顶点的位置并重新绘制
   function drag(e: any, pointIndex: number) {
     if (props.dialogStatus === 'detail') {
       return
@@ -102,10 +116,83 @@
     else if (mousePos.y > props.height) {
       mousePos.y = props.height
     }
+    // 计算商和余数的辅助函数
     const { quotient, remainder } = divideAndModulo(pointIndex, 4)
     console.log(`移动的是第${quotient + 1}条数据，第${remainder + 1}个点`)
-    pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
-    pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    if (props.currentDrawButton === '1') {
+      const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组
+      const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象
+
+      // 保存原始矩形的宽高（基于未拖拽前的坐标）
+      const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x
+      const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y
+      // 计算动态宽高（根据拖拽点和原始顶点的相对位置）
+      // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标
+      switch (remainder) {
+        case 0:
+          // 左上角顶点（x0,y0）
+          // 保持宽高不变，右下角顶点 = 左上角 + 宽高
+          rect[2].x = draggedPoint.x + originalWidth // 右下角x
+          // rect[2].y = draggedPoint.y + originalHeight // 右下角y
+          // 右上角顶点y与左上角相同，x为宽
+          rect[1].y = draggedPoint.y
+          rect[1].x = draggedPoint.x + originalWidth
+          // 左下角顶点x与左上角相同，y为高
+          rect[3].x = draggedPoint.x
+          // rect[3].y = draggedPoint.y + originalHeight
+          break
+
+        case 1: // 右上角顶点（x1,y1）
+          // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高）
+          rect[3].x = draggedPoint.x - originalWidth // 左下角x
+          rect[3].y = draggedPoint.y + originalHeight // 左下角y
+          // 左上角顶点x = 右上角x - 宽，y相同
+          rect[0].x = draggedPoint.x - originalWidth
+          rect[0].y = draggedPoint.y
+          // 右下角顶点x相同，y = 右上角y + 高
+          rect[2].x = draggedPoint.x
+          rect[2].y = draggedPoint.y + originalHeight
+          break
+
+        case 2:
+          // 右下角顶点（x2,y2）
+          // 保持宽高不变，左上角顶点 = 右下角 - 宽高
+          // rect[0].x = draggedPoint.x - originalWidth // 左上角x
+          rect[0].y = draggedPoint.y - originalHeight // 左上角y
+          // 右上角顶点x = 右下角x，y = 右下角y - 高
+          rect[1].x = draggedPoint.x
+          rect[1].y = draggedPoint.y - originalHeight
+          // 左下角顶点x = 右下角x - 宽，y相同
+          // rect[3].x = draggedPoint.x - originalWidth
+          rect[3].y = draggedPoint.y
+          break
+
+        case 3:
+          // 左下角顶点（x3,y3）
+          // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高）
+          // rect[1].x = draggedPoint.x + originalWidth // 右上角x
+          // rect[1].y = draggedPoint.y - originalHeight // 右上角y
+          // 左上角顶点y = 左下角y - 高，x相同
+          rect[0].x = draggedPoint.x
+          rect[0].y = draggedPoint.y - originalHeight
+          // 右下角顶点x = 左下角x + 宽，y相同
+          rect[2].x = draggedPoint.x + originalWidth
+          rect[2].y = draggedPoint.y
+          break
+      }
+
+      // 更新坐标（注意：顶点对象是引用类型，直接修改即可）
+      // 无需重新赋值数组，直接修改对象属性保证响应式
+      draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标
+      draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标
+
+      // 限制拖拽点在画布内
+    }
+    else {
+      pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
+      pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    }
+
     draw()
   }
 
@@ -117,7 +204,7 @@
       remainder,
     }
   }
-
+  // 为每个点添加拖拽事件监听器
   function addDragEvents() {
     if (props.dialogStatus === 'detail') {
       return
@@ -144,7 +231,7 @@
       pointsInfoElements[i].setAttribute('data-point-index', `${i}`)
     }
   }
-
+  // 初始化绘制和添加拖拽事件
   function init() {
     draw()
     addDragEvents()
diff --git a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
index 735d1e7..09de217 100644
--- a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
@@ -27,6 +27,7 @@
 const videoHeight = ref(360)
 const cameraIndexCode = ref('') // 设备国标号
 const nvrIndexCode = ref('') // nvr国标号
+const currentDrawButton = ref('1')
 // 显示标题
 const textMap: { [key: string]: string } = {
   detail: '详情',
@@ -852,7 +853,20 @@
         </el-form>
       </el-col>
       <el-col :span="12">
-        <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+        <div style="display: flex;">
+          <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+          >
+            <el-radio-button
+              v-for="item in [{ name: '矩形', value: '1' }, { name: '四边形', value: '2' }]" :key="item.value" :label="item.value"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
         <div id="draw-area" class="draw" :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }">
           <iframe
             id="myframe"
@@ -861,7 +875,7 @@
             :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }"
             style="position: absolute; top: 0px; left: 0px;"
           />
-          <draw-area ref="drawAreaRef" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
+          <draw-area ref="drawAreaRef" :current-draw-button="currentDrawButton" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
           <!-- <span v-if="dialogStatus !== 'detail'" style="margin-top: 10px;font-size: 11px;color: red;">注意：请绘制出一个四边形</span> -->
         </div>
       </el-col>
diff --git a/src/views/alarm/policyConfig/videoPreview/videoPreview.vue b/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
index 4368dce..7c3f003 100644
--- a/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
+++ b/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
@@ -24,7 +24,9 @@
 const jessibucaRef = ref()
 const videoWidth = ref(640)
 const videoHeight = ref(360)
-const points = ref() // 标注信息
+const points = ref([]) as any // 标注信息
+const drawPoints = ref([]) as any // 标注信息
+const currentDrawButton = ref('') // 当前画的标注
 // const palyUrl = `${url}?token=${window.localStorage.getItem('token')}`
 
 const defaultProps = ref({
@@ -120,10 +122,11 @@
         }
         else {
           points.value = []
+          drawPoints.value = []
         }
       }
       if (systemType.value === 'sm') { // sm识别流
-      // 获取原始流
+        // 获取原始流
         fetchRecognitionUrl(data.device.boxId, data.device.recognitionGb, data.device.nvrIndexCode).then((res: any) => {
           leafLoading.value = false
           mediaUrl.value = `${res}?token=${window.localStorage.getItem('token')}`
@@ -189,7 +192,7 @@
 }
 
 // 播放流
-function playGmStream(cameraIndexCode: string) {
+async function playGmStream(cameraIndexCode: string) {
   // 先停心跳
   if (timer.value) {
     clearInterval(timer.value)
@@ -200,22 +203,78 @@
     handleStopStream(currentStreamId.value)
   }
   // 获取视频流接口
-  fetchStream(cameraIndexCode).then((res: any) => {
-    leafLoading.value = false
+  // const res: any = await fetchStream(cameraIndexCode)
+  // // .then((res: any) => {
+  // leafLoading.value = false
+  // const { url, createStreamResponseId } = res
+  // mediaUrl.value = `${url}?token=${window.localStorage.getItem('token')}`
+  // jessibucaRef.value.play(mediaUrl.value)
+  // // 记录正在播的流的国标号
+  // currentStreamId.value = createStreamResponseId
+
+  // // 发送心跳
+  // timer.value = setInterval(() => {
+  //   handleSendHeart(createStreamResponseId)
+  // }, Number(window.localStorage.getItem('timeGap')))
+  // }).catch(() => {
+  //   ElMessage.warning('未获取到流！请联系管理员！')
+  //   leafLoading.value = false
+  // })
+
+  // 获取视频流接口--优化上面代码
+  try {
+    leafLoading.value = true // 开始加载时显示 loading
+    const res: any = await fetchStream(cameraIndexCode)
+
+    // 解析响应数据
     const { url, createStreamResponseId } = res
+    if (!url || !createStreamResponseId) {
+      throw new Error('接口返回数据不完整') // 手动抛出异常，触发错误处理
+    }
+
+    // 拼接带 token 的播放地址
     mediaUrl.value = `${url}?token=${window.localStorage.getItem('token')}`
+
+    // 播放视频
     jessibucaRef.value.play(mediaUrl.value)
-    // 记录正在播的流的国标号
+
+    // 记录当前流 ID
     currentStreamId.value = createStreamResponseId
 
-    // 发送心跳
+    // 初始化心跳定时器
+    const timeGap = Number(window.localStorage.getItem('timeGap')) || 30000 // 确保时间间隔有默认值
     timer.value = setInterval(() => {
       handleSendHeart(createStreamResponseId)
-    }, Number(window.localStorage.getItem('timeGap')))
-  }).catch(() => {
-    ElMessage.warning('未获取到流！请联系管理员！')
-    leafLoading.value = false
-  })
+    }, timeGap)
+
+    leafLoading.value = false // 成功获取流后关闭 loading
+  }
+  catch (error) {
+    // 统一错误处理
+    leafLoading.value = false // 无论成功与否，确保 loading 关闭
+    let errorMsg = '获取视频流失败'
+
+    // 处理不同类型的错误
+    if (error instanceof Error) {
+      errorMsg = error.message || errorMsg // 使用自定义错误消息或默认消息
+    }
+    else if (typeof error === 'string') {
+      errorMsg = error // 处理字符串类型的错误
+    }
+
+    // 显示警告信息（使用 ElMessage 需确保已正确引入组件）
+    ElMessage.warning(`${errorMsg}！请联系管理员！`)
+    console.error('获取视频流失败:', error) // 控制台打印详细错误信息
+  }
+
+  // -------------------------------区域绘制----------------------------------------
+  if (currentData.value && currentData.value.deviceBoundaryDTOS && currentData.value.deviceBoundaryDTOS.length) {
+    draw(currentData.value.deviceBoundaryDTOS.filter((item: { boundary: string }) => item.boundary))
+  }
+  else {
+    points.value = []
+    drawPoints.value = []
+  }
 }
 // --------------------------------------------sm获取识别流地址-----------------------------------------------
 // 开启盒子设备流
@@ -329,6 +388,8 @@
     return false
   }
   points.value = [] // 清除标注信息
+  drawPoints.value = []
+
   if (val === '1') { // 原始流
     if (systemType.value === 'sm') { // 流媒体
       // 获取原始流
@@ -401,17 +462,29 @@
   const deviceBoundaryInfo = list.map((item: any) => {
     return {
       ...item,
+      drawId: item.modelRelationId || item.sceneRelationId,
       boundary: item.boundary ? calRealData(JSON.parse(item.boundary)) : item.boundary, // 识别边界
     }
   })
   points.value = deviceBoundaryInfo
-  console.log('标注绘画信息', points.value)
+  drawPoints.value = [{ ...points.value[0] }]
+  console.log('drawPoints', drawPoints.value)
+  currentDrawButton.value = drawPoints.value[0].drawId
 }
 
 const unwatch = watch(filterText, (newVal) => {
   treeRef.value.filter(newVal)
 })
 
+// 切换画框
+const changeRadioDraw = (value: string) => {
+  const index = points.value.findIndex((item: { drawId: string }) => item.drawId === value)
+  if (index !== -1) {
+    drawPoints.value = [{ ...points.value[index] }]
+    currentDrawButton.value = drawPoints.value[index].drawId
+  }
+}
+
 onBeforeUnmount(() => {
   unwatch()
   window.removeEventListener('resize', resize)
@@ -528,7 +601,7 @@
             ref="jessibucaRef"
             :style="{ width: `${width}px`, height: `${height}px` }"
           />
-          <draw-area v-show="radio === '1'" ref="drawAreaRef" style="position: absolute;left: 0; right: 0;" dialog-status="detail" :width="width" :height="height" :points="points" />
+          <draw-area v-show="radio === '1'" ref="drawAreaRef" style="position: absolute;left: 0; right: 0;" dialog-status="detail" :width="width" :height="height" :points="drawPoints" />
           <div class="title" :style="{ width: `${width}px` }">
             {{ title }}
             <el-icon v-if="currentData && currentData.deviceType === '0'" style="margin-left: 3px;">
@@ -560,6 +633,20 @@
           z-index: 1000;top: 50%;left: 35%;letter-spacing: 4px;">
           视频加载中，请稍等...
         </div> -->
+        <div v-if="points.length && points.length > 1" style="position: absolute;z-index: 1000;bottom: 0.2%;right: 1%;">
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+            @change="changeRadioDraw"
+          >
+            <el-radio-button
+              v-for="item in points" :key="item.drawId" :label="item.drawId"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.remark }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
       </div>
       <!-- 右侧报警结果 -->
       <!-- <div class="alarm-result">

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
diff --git a/public/playerVideo6/jessibuca.js b/public/playerVideo6/jessibuca.js
index 601f208..1450494 100644
--- a/public/playerVideo6/jessibuca.js
+++ b/public/playerVideo6/jessibuca.js
@@ -37,8 +37,8 @@
       hasControl: !1,
       loadingText: '',
       background: '',
-      // decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
-      decoder: `/playerVideo6/decoder.js`, // 本地使用
+      decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
+      // decoder: `/playerVideo6/decoder.js`, // 本地使用
       // decoder: import.meta.env.MODE === 'development' ?  `/playerVideo6/decoder.js` : `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`,
       url: '',
       rotate: 0,
diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
index a19c56c..3bab6c4 100644
--- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
@@ -1,41 +1,55 @@
 <script lang="ts" setup name="DrawArea">
 const props = defineProps({
-  dialogStatus: {
+  dialogStatus: { // 对话框的状态，控制是否可编辑
     type: String,
   },
-  points: {
+  points: { // 标记位置信息数组，每个元素包含boundary（顶点坐标）和remark（备注）
     type: Array,
     default: () => [],
   },
-  width: {
+  width: { // 画布宽度
     type: Number,
     default: 640,
   },
-  height: {
+  height: { // 画布高度
     type: Number,
     default: 360,
   },
+  currentDrawButton: { // 当前绘制模式（1=矩形，2=不规则四边形）
+    type: String,
+  },
 })
+
+// 定义组件抛出的事件
 const emits = defineEmits(['givepointsInfo'])
-const lineColor = ref('#1aa034')
-const lineColors = ref([])
-const baseurl = ref(window.location.href.split('/#')[0])
-const canvas = ref(null) as any
-const myCtx = ref(null) as any
-const container = ref([]) as any
-const style = ref([]) as any // 点的位置
-const pointsInfo = ref([]) as any // 标记位置信息
+
+// 颜色相关状态
+const lineColor = ref('#1aa034') // 线条颜色
+const lineColors = ref([]) // 多线条颜色数组
+
+// 画布相关引用
+const canvas = ref(null) as any // 画布dom引用
+const myCtx = ref(null) as any // 画布2D绘图上下文
+
+// 数据存储
+const pointsInfo = ref([]) as any // 存储所有标记的位置信息（含坐标和备注）
+
+/**
+ * 初始化绘制方法
+ * 负责画布渲染和事件绑定
+ */
 const initDraw = () => {
-  if (!pointsInfo.value.length) {
+  if (!pointsInfo.value.length) { // 无数据时不绘制
     return
   }
   const ctx = myCtx.value
   // 初始位置
   function draw() {
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
     if (pointsInfo.value && pointsInfo.value.length) {
       pointsInfo.value.forEach((e: any, index: number) => {
         ctx.beginPath()
+        // 绘制图形边界
         if (e.boundary && e.boundary.length) { // 画线
           ctx.moveTo(e.boundary[0].x, e.boundary[0].y)
           ctx.lineTo(e.boundary[1].x, e.boundary[1].y)
@@ -53,7 +67,7 @@
           ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034'
         }
         ctx.stroke()
-        ctx.closePath()
+        ctx.closePath() // 闭合路径形成图形
         // --------------------------------文字-------------------------------
         ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑'
         if (lineColors.value.length) {
@@ -81,7 +95,7 @@
     ctx.lineWidth = window.localStorage.getItem('lineWidth') || 2
     ctx.stroke()
   }
-
+  // 理拖拽事件，更新矩形顶点的位置并重新绘制
   function drag(e: any, pointIndex: number) {
     if (props.dialogStatus === 'detail') {
       return
@@ -102,10 +116,83 @@
     else if (mousePos.y > props.height) {
       mousePos.y = props.height
     }
+    // 计算商和余数的辅助函数
     const { quotient, remainder } = divideAndModulo(pointIndex, 4)
     console.log(`移动的是第${quotient + 1}条数据，第${remainder + 1}个点`)
-    pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
-    pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    if (props.currentDrawButton === '1') {
+      const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组
+      const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象
+
+      // 保存原始矩形的宽高（基于未拖拽前的坐标）
+      const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x
+      const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y
+      // 计算动态宽高（根据拖拽点和原始顶点的相对位置）
+      // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标
+      switch (remainder) {
+        case 0:
+          // 左上角顶点（x0,y0）
+          // 保持宽高不变，右下角顶点 = 左上角 + 宽高
+          rect[2].x = draggedPoint.x + originalWidth // 右下角x
+          // rect[2].y = draggedPoint.y + originalHeight // 右下角y
+          // 右上角顶点y与左上角相同，x为宽
+          rect[1].y = draggedPoint.y
+          rect[1].x = draggedPoint.x + originalWidth
+          // 左下角顶点x与左上角相同，y为高
+          rect[3].x = draggedPoint.x
+          // rect[3].y = draggedPoint.y + originalHeight
+          break
+
+        case 1: // 右上角顶点（x1,y1）
+          // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高）
+          rect[3].x = draggedPoint.x - originalWidth // 左下角x
+          rect[3].y = draggedPoint.y + originalHeight // 左下角y
+          // 左上角顶点x = 右上角x - 宽，y相同
+          rect[0].x = draggedPoint.x - originalWidth
+          rect[0].y = draggedPoint.y
+          // 右下角顶点x相同，y = 右上角y + 高
+          rect[2].x = draggedPoint.x
+          rect[2].y = draggedPoint.y + originalHeight
+          break
+
+        case 2:
+          // 右下角顶点（x2,y2）
+          // 保持宽高不变，左上角顶点 = 右下角 - 宽高
+          // rect[0].x = draggedPoint.x - originalWidth // 左上角x
+          rect[0].y = draggedPoint.y - originalHeight // 左上角y
+          // 右上角顶点x = 右下角x，y = 右下角y - 高
+          rect[1].x = draggedPoint.x
+          rect[1].y = draggedPoint.y - originalHeight
+          // 左下角顶点x = 右下角x - 宽，y相同
+          // rect[3].x = draggedPoint.x - originalWidth
+          rect[3].y = draggedPoint.y
+          break
+
+        case 3:
+          // 左下角顶点（x3,y3）
+          // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高）
+          // rect[1].x = draggedPoint.x + originalWidth // 右上角x
+          // rect[1].y = draggedPoint.y - originalHeight // 右上角y
+          // 左上角顶点y = 左下角y - 高，x相同
+          rect[0].x = draggedPoint.x
+          rect[0].y = draggedPoint.y - originalHeight
+          // 右下角顶点x = 左下角x + 宽，y相同
+          rect[2].x = draggedPoint.x + originalWidth
+          rect[2].y = draggedPoint.y
+          break
+      }
+
+      // 更新坐标（注意：顶点对象是引用类型，直接修改即可）
+      // 无需重新赋值数组，直接修改对象属性保证响应式
+      draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标
+      draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标
+
+      // 限制拖拽点在画布内
+    }
+    else {
+      pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
+      pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    }
+
     draw()
   }
 
@@ -117,7 +204,7 @@
       remainder,
     }
   }
-
+  // 为每个点添加拖拽事件监听器
   function addDragEvents() {
     if (props.dialogStatus === 'detail') {
       return
@@ -144,7 +231,7 @@
       pointsInfoElements[i].setAttribute('data-point-index', `${i}`)
     }
   }
-
+  // 初始化绘制和添加拖拽事件
   function init() {
     draw()
     addDragEvents()
diff --git a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
index 735d1e7..09de217 100644
--- a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
@@ -27,6 +27,7 @@
 const videoHeight = ref(360)
 const cameraIndexCode = ref('') // 设备国标号
 const nvrIndexCode = ref('') // nvr国标号
+const currentDrawButton = ref('1')
 // 显示标题
 const textMap: { [key: string]: string } = {
   detail: '详情',
@@ -852,7 +853,20 @@
         </el-form>
       </el-col>
       <el-col :span="12">
-        <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+        <div style="display: flex;">
+          <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+          >
+            <el-radio-button
+              v-for="item in [{ name: '矩形', value: '1' }, { name: '四边形', value: '2' }]" :key="item.value" :label="item.value"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
         <div id="draw-area" class="draw" :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }">
           <iframe
             id="myframe"
@@ -861,7 +875,7 @@
             :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }"
             style="position: absolute; top: 0px; left: 0px;"
           />
-          <draw-area ref="drawAreaRef" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
+          <draw-area ref="drawAreaRef" :current-draw-button="currentDrawButton" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
           <!-- <span v-if="dialogStatus !== 'detail'" style="margin-top: 10px;font-size: 11px;color: red;">注意：请绘制出一个四边形</span> -->
         </div>
       </el-col>
diff --git a/src/views/alarm/policyConfig/videoPreview/videoPreview.vue b/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
index 4368dce..7c3f003 100644
--- a/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
+++ b/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
@@ -24,7 +24,9 @@
 const jessibucaRef = ref()
 const videoWidth = ref(640)
 const videoHeight = ref(360)
-const points = ref() // 标注信息
+const points = ref([]) as any // 标注信息
+const drawPoints = ref([]) as any // 标注信息
+const currentDrawButton = ref('') // 当前画的标注
 // const palyUrl = `${url}?token=${window.localStorage.getItem('token')}`
 
 const defaultProps = ref({
@@ -120,10 +122,11 @@
         }
         else {
           points.value = []
+          drawPoints.value = []
         }
       }
       if (systemType.value === 'sm') { // sm识别流
-      // 获取原始流
+        // 获取原始流
         fetchRecognitionUrl(data.device.boxId, data.device.recognitionGb, data.device.nvrIndexCode).then((res: any) => {
           leafLoading.value = false
           mediaUrl.value = `${res}?token=${window.localStorage.getItem('token')}`
@@ -189,7 +192,7 @@
 }
 
 // 播放流
-function playGmStream(cameraIndexCode: string) {
+async function playGmStream(cameraIndexCode: string) {
   // 先停心跳
   if (timer.value) {
     clearInterval(timer.value)
@@ -200,22 +203,78 @@
     handleStopStream(currentStreamId.value)
   }
   // 获取视频流接口
-  fetchStream(cameraIndexCode).then((res: any) => {
-    leafLoading.value = false
+  // const res: any = await fetchStream(cameraIndexCode)
+  // // .then((res: any) => {
+  // leafLoading.value = false
+  // const { url, createStreamResponseId } = res
+  // mediaUrl.value = `${url}?token=${window.localStorage.getItem('token')}`
+  // jessibucaRef.value.play(mediaUrl.value)
+  // // 记录正在播的流的国标号
+  // currentStreamId.value = createStreamResponseId
+
+  // // 发送心跳
+  // timer.value = setInterval(() => {
+  //   handleSendHeart(createStreamResponseId)
+  // }, Number(window.localStorage.getItem('timeGap')))
+  // }).catch(() => {
+  //   ElMessage.warning('未获取到流！请联系管理员！')
+  //   leafLoading.value = false
+  // })
+
+  // 获取视频流接口--优化上面代码
+  try {
+    leafLoading.value = true // 开始加载时显示 loading
+    const res: any = await fetchStream(cameraIndexCode)
+
+    // 解析响应数据
     const { url, createStreamResponseId } = res
+    if (!url || !createStreamResponseId) {
+      throw new Error('接口返回数据不完整') // 手动抛出异常，触发错误处理
+    }
+
+    // 拼接带 token 的播放地址
     mediaUrl.value = `${url}?token=${window.localStorage.getItem('token')}`
+
+    // 播放视频
     jessibucaRef.value.play(mediaUrl.value)
-    // 记录正在播的流的国标号
+
+    // 记录当前流 ID
     currentStreamId.value = createStreamResponseId
 
-    // 发送心跳
+    // 初始化心跳定时器
+    const timeGap = Number(window.localStorage.getItem('timeGap')) || 30000 // 确保时间间隔有默认值
     timer.value = setInterval(() => {
       handleSendHeart(createStreamResponseId)
-    }, Number(window.localStorage.getItem('timeGap')))
-  }).catch(() => {
-    ElMessage.warning('未获取到流！请联系管理员！')
-    leafLoading.value = false
-  })
+    }, timeGap)
+
+    leafLoading.value = false // 成功获取流后关闭 loading
+  }
+  catch (error) {
+    // 统一错误处理
+    leafLoading.value = false // 无论成功与否，确保 loading 关闭
+    let errorMsg = '获取视频流失败'
+
+    // 处理不同类型的错误
+    if (error instanceof Error) {
+      errorMsg = error.message || errorMsg // 使用自定义错误消息或默认消息
+    }
+    else if (typeof error === 'string') {
+      errorMsg = error // 处理字符串类型的错误
+    }
+
+    // 显示警告信息（使用 ElMessage 需确保已正确引入组件）
+    ElMessage.warning(`${errorMsg}！请联系管理员！`)
+    console.error('获取视频流失败:', error) // 控制台打印详细错误信息
+  }
+
+  // -------------------------------区域绘制----------------------------------------
+  if (currentData.value && currentData.value.deviceBoundaryDTOS && currentData.value.deviceBoundaryDTOS.length) {
+    draw(currentData.value.deviceBoundaryDTOS.filter((item: { boundary: string }) => item.boundary))
+  }
+  else {
+    points.value = []
+    drawPoints.value = []
+  }
 }
 // --------------------------------------------sm获取识别流地址-----------------------------------------------
 // 开启盒子设备流
@@ -329,6 +388,8 @@
     return false
   }
   points.value = [] // 清除标注信息
+  drawPoints.value = []
+
   if (val === '1') { // 原始流
     if (systemType.value === 'sm') { // 流媒体
       // 获取原始流
@@ -401,17 +462,29 @@
   const deviceBoundaryInfo = list.map((item: any) => {
     return {
       ...item,
+      drawId: item.modelRelationId || item.sceneRelationId,
       boundary: item.boundary ? calRealData(JSON.parse(item.boundary)) : item.boundary, // 识别边界
     }
   })
   points.value = deviceBoundaryInfo
-  console.log('标注绘画信息', points.value)
+  drawPoints.value = [{ ...points.value[0] }]
+  console.log('drawPoints', drawPoints.value)
+  currentDrawButton.value = drawPoints.value[0].drawId
 }
 
 const unwatch = watch(filterText, (newVal) => {
   treeRef.value.filter(newVal)
 })
 
+// 切换画框
+const changeRadioDraw = (value: string) => {
+  const index = points.value.findIndex((item: { drawId: string }) => item.drawId === value)
+  if (index !== -1) {
+    drawPoints.value = [{ ...points.value[index] }]
+    currentDrawButton.value = drawPoints.value[index].drawId
+  }
+}
+
 onBeforeUnmount(() => {
   unwatch()
   window.removeEventListener('resize', resize)
@@ -528,7 +601,7 @@
             ref="jessibucaRef"
             :style="{ width: `${width}px`, height: `${height}px` }"
           />
-          <draw-area v-show="radio === '1'" ref="drawAreaRef" style="position: absolute;left: 0; right: 0;" dialog-status="detail" :width="width" :height="height" :points="points" />
+          <draw-area v-show="radio === '1'" ref="drawAreaRef" style="position: absolute;left: 0; right: 0;" dialog-status="detail" :width="width" :height="height" :points="drawPoints" />
           <div class="title" :style="{ width: `${width}px` }">
             {{ title }}
             <el-icon v-if="currentData && currentData.deviceType === '0'" style="margin-left: 3px;">
@@ -560,6 +633,20 @@
           z-index: 1000;top: 50%;left: 35%;letter-spacing: 4px;">
           视频加载中，请稍等...
         </div> -->
+        <div v-if="points.length && points.length > 1" style="position: absolute;z-index: 1000;bottom: 0.2%;right: 1%;">
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+            @change="changeRadioDraw"
+          >
+            <el-radio-button
+              v-for="item in points" :key="item.drawId" :label="item.drawId"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.remark }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
       </div>
       <!-- 右侧报警结果 -->
       <!-- <div class="alarm-result">
diff --git a/src/views/bigScreen/jessibuca-OptimizeInitialFrame.vue b/src/views/bigScreen/jessibuca-OptimizeInitialFrame.vue
new file mode 100644
index 0000000..55637cf
--- /dev/null
+++ b/src/views/bigScreen/jessibuca-OptimizeInitialFrame.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+  },
+  showOperateBtns: {
+    type: Boolean,
+    default: false,
+  },
+  preloadUrl: {
+    type: String,
+    default: '',
+  },
+})
+
+const jessibuca = ref(null) // 播放器实例引用
+const container = ref(null) // 播放器容器引用
+const isInitialized = ref(false) // 播放器初始化状态
+const isFirstPlay = ref(true) // 是否首次播放标记
+
+/**
+ * 创建Jessibuca播放器实例并初始化配置
+ */
+function create() {
+  console.log('执行jessibuca初始化', props.id)
+
+  // 等待DOM渲染完成后再初始化播放器，确保容器已存在
+  nextTick(() => {
+    container.value = document.getElementById(props.id)
+
+    jessibuca.value = new Jessibuca({
+      container: container.value,
+      videoBuffer: 0.1, // 减少初始缓冲时间，加快首帧显示
+      isResize: false,
+      loadingText: '视频加载中',
+      useMSE: true, // 优先使用MSE硬解码（适用于大多数现代浏览器）
+      useWCS: true, // 同时启用Webcodecs硬解码（Chrome 94+支持）
+      debug: false,
+      showBandwidth: props.showOperateBtns,
+      loadingTimeout: 15, // 缩短超时时间，避免长时间等待无响应的请求
+      operateBtns: {
+        fullscreen: props.showOperateBtns,
+        screenshot: props.showOperateBtns,
+        play: props.showOperateBtns,
+        audio: false,
+        recorder: false,
+      },
+      forceNoOffscreen: true, // 不使用离屏模式，提升渲染性能
+      isNotMute: false,
+      hotKey: false,
+      keepScreenOn: false,
+      supportDblclickFullscreen: true,
+      hasAudio: false, // 不需要音频，禁用音频解码提升性能
+      autoWasm: true, // H265解码失败时自动降级到WASM模式
+      controlAutoHide: false,
+      wasmDecodeErrorReplay: true,
+      wcsUseVideoRender: true, // 使用video标签渲染，提升渲染性能
+
+      // 新增优化首屏加载的参数
+      firstFrameTimeout: 5, // 首帧超时时间，超时后可尝试重新加载
+      preloadTime: 1, // 预加载时间，提前缓冲一小段视频
+      maxBufferLength: 1, // 限制最大缓冲长度，避免占用过多内存
+      useWorker: true, // 使用Web Worker处理解码，避免阻塞主线程
+    })
+
+    // 播放器事件监听
+    jessibuca.value.on('videoInfo', (data) => {
+      console.log('videoInfo:', 'width:', data.width, 'height:', data.height)
+    })
+
+    jessibuca.value.on('playFailedAndPaused', (error) => {
+      console.log('playFailedAndPaused事件：监听流断掉', error)
+      // 首次播放失败时，自动尝试重连
+      if (isFirstPlay.value) {
+        setTimeout(() => {
+          jessibuca.value && jessibuca.value.replay()
+        }, 1000)
+      }
+    })
+
+    jessibuca.value.on('timeout', (error) => {
+      console.log('timeout当设定的超时时间内无数据返回,则回调:', error)
+      // 首次播放超时，尝试重连
+      if (isFirstPlay.value) {
+        setTimeout(() => {
+          jessibuca.value && jessibuca.value.replay()
+        }, 1000)
+      }
+    })
+
+    jessibuca.value.on('loadingTimeout', () => {
+      console.log('loadingTimeout当play()的时候，如果没有数据返回，则回调: timeout')
+      // 首次加载超时，尝试重连
+      if (isFirstPlay.value) {
+        setTimeout(() => {
+          jessibuca.value && jessibuca.value.replay()
+        }, 1000)
+      }
+    })
+
+    jessibuca.value.on('firstFrame', () => {
+      console.log('首帧渲染完成')
+      isFirstPlay.value = false // 标记首帧已渲染，后续不再触发重连逻辑
+      // 首帧渲染后可以隐藏加载指示器
+      container.value.classList.remove('loading')
+    })
+
+    jessibuca.value.on('playToRenderTimes', (times) => {
+      console.log('监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗:', times)
+    })
+
+    isInitialized.value = true
+
+    // 如果有预加载URL，尝试预加载视频资源
+    if (props.preloadUrl) {
+      jessibuca.value.preload(props.preloadUrl)
+    }
+  })
+}
+
+/**
+ * 预连接视频服务器，减少首次请求延迟
+ * @param {string} url - 视频URL
+ */
+async function preconnect(url) {
+  if (!url) { return }
+
+  try {
+    // 解析URL获取主机名和协议
+    const parsedUrl = new URL(url)
+    const protocol = parsedUrl.protocol === 'https:' ? 'https' : 'http'
+    const host = parsedUrl.host
+
+    // 创建预连接标记并添加到文档头部
+    // 提前进行DNS解析、TCP握手和TLS协商
+    const link = document.createElement('link')
+    link.rel = 'preconnect'
+    link.href = `${protocol}://${host}`
+    document.head.appendChild(link)
+
+    console.log(`已预连接到: ${host}`)
+  }
+  catch (error) {
+    console.error('预连接失败:', error)
+  }
+}
+
+/**
+ * 播放视频
+ * @param {string} playUrl - 视频播放地址
+ */
+async function play(playUrl = '') {
+  if (!playUrl) { return }
+
+  console.log('播放视频路径: ', playUrl)
+
+  // 显示加载指示器
+  if (container.value) {
+    container.value.classList.add('loading')
+  }
+
+  // 首次播放前先预连接服务器，优化网络连接时间
+  if (isFirstPlay.value) {
+    await preconnect(playUrl)
+  }
+
+  // 如果播放器还未初始化完成，等待一段时间
+  if (!isInitialized.value) {
+    await new Promise(resolve => setTimeout(resolve, 500))
+  }
+
+  // 播放视频
+  if (jessibuca.value) {
+    jessibuca.value.play(playUrl)
+  }
+  else {
+    console.error('播放器未初始化')
+    // 隐藏加载指示器
+    if (container.value) {
+      container.value.classList.remove('loading')
+    }
+  }
+}
+
+// 暂停播放
+function pause() {
+  jessibuca.value && jessibuca.value.pause().then(() => {
+    console.log('pause success')
+  })
+}
+
+// 恢复播放
+function restore() {
+  jessibuca.value && jessibuca.value.play().then(() => {
+    console.log('restore success')
+  })
+}
+
+// 销毁播放器实例
+function destroy() {
+  jessibuca.value && jessibuca.value.destroy()
+  jessibuca.value = null
+  isInitialized.value = false
+}
+
+// 组件卸载前清理资源
+onBeforeUnmount(() => {
+  destroy()
+})
+
+// 组件挂载后初始化播放器
+onMounted(() => {
+  create()
+})
+
+// 暴露公共方法供父组件调用
+defineExpose({ play, destroy, pause, restore })
+</script>
+
+<template>
+  <div :id="props.id" class="container" />
+</template>
+
+<style scoped>
+.container {
+  background: rgba(13, 14, 27, 0.7);
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+/* 加载指示器样式 */
+.container::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s linear infinite;
+  z-index: 10;
+  display: none;
+}
+
+/* 显示加载指示器的状态 */
+.container.loading::before {
+  display: block;
+}
+
+/* 加载动画 */
+@keyframes spin {
+  0% { transform: translate(-50%, -50%) rotate(0deg); }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+</style>

diff --git a/public/config/config.json b/public/config/config.json
index abae11f..6b43e49 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -2,7 +2,7 @@
   "title": "安全生产智慧监管系统",
   "baseUrl": "http://192.168.83.42:6909/safe-server/",
   "deployPathDec": "****************注意：这个/alarm的alarm一定要改成部署的文件夹的名字***************************",
-  "deployPath": "/alarm",
+  "deployPath": "/safe",
   "mediaBaseUrl": "http://192.168.83.65:8099",
   "lat-bd": "39.91459528",
   "lng-bd": "116.26499505",
@@ -15,7 +15,32 @@
   "systemType": "gm",
   "lineWidth": "3",
   "lineColor": "#1aa034",
-  "lineColors": ["#FF69B4", "#FFA500", "#87CEEB", "#1E90FF", "#FF1493", "#DC143C", "#FFE4B5", "#32CD32", "#BA55D3", "#90EE90", "#FF4500", "#1E90FF", "#DB7093", "#C71585", "#00BFFF", "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", "#9370DB", "#4169E1", "#00FA9A", "#DA70D6", "#FF6347"],
+  "lineColors": [
+    "#32CD32",
+    "#FFA500",
+    "#87CEEB",
+    "#1E90FF",
+    "#FF1493",
+    "#DC143C",
+    "#FFE4B5",
+    "#FF69B4",
+    "#BA55D3",
+    "#90EE90",
+    "#FF4500",
+    "#1E90FF",
+    "#DB7093",
+    "#C71585",
+    "#00BFFF",
+    "#00FF00",
+    "#2E8B57",
+    "#FF7F50",
+    "#FFC0CB",
+    "#9370DB",
+    "#4169E1",
+    "#00FA9A",
+    "#DA70D6",
+    "#FF6347"
+  ],
   "fontSize": "18px",
   "fontColor": "#1aa034",
   "preventReclick": 2000,
diff --git a/public/player/player.html b/public/player/player.html
index de788f0..686ab22 100644
--- a/public/player/player.html
+++ b/public/player/player.html
@@ -91,6 +91,7 @@
           keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
           supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
 
+          hasAudio: false,
           autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
           controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
           wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
diff --git a/public/playerVideo6/jessibuca.js b/public/playerVideo6/jessibuca.js
index 601f208..1450494 100644
--- a/public/playerVideo6/jessibuca.js
+++ b/public/playerVideo6/jessibuca.js
@@ -37,8 +37,8 @@
       hasControl: !1,
       loadingText: '',
       background: '',
-      // decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
-      decoder: `/playerVideo6/decoder.js`, // 本地使用
+      decoder: `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`, // 线上使用
+      // decoder: `/playerVideo6/decoder.js`, // 本地使用
       // decoder: import.meta.env.MODE === 'development' ?  `/playerVideo6/decoder.js` : `${window.localStorage.getItem('deployPath')}/playerVideo6/decoder.js`,
       url: '',
       rotate: 0,
diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
index a19c56c..3bab6c4 100644
--- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue
@@ -1,41 +1,55 @@
 <script lang="ts" setup name="DrawArea">
 const props = defineProps({
-  dialogStatus: {
+  dialogStatus: { // 对话框的状态，控制是否可编辑
     type: String,
   },
-  points: {
+  points: { // 标记位置信息数组，每个元素包含boundary（顶点坐标）和remark（备注）
     type: Array,
     default: () => [],
   },
-  width: {
+  width: { // 画布宽度
     type: Number,
     default: 640,
   },
-  height: {
+  height: { // 画布高度
     type: Number,
     default: 360,
   },
+  currentDrawButton: { // 当前绘制模式（1=矩形，2=不规则四边形）
+    type: String,
+  },
 })
+
+// 定义组件抛出的事件
 const emits = defineEmits(['givepointsInfo'])
-const lineColor = ref('#1aa034')
-const lineColors = ref([])
-const baseurl = ref(window.location.href.split('/#')[0])
-const canvas = ref(null) as any
-const myCtx = ref(null) as any
-const container = ref([]) as any
-const style = ref([]) as any // 点的位置
-const pointsInfo = ref([]) as any // 标记位置信息
+
+// 颜色相关状态
+const lineColor = ref('#1aa034') // 线条颜色
+const lineColors = ref([]) // 多线条颜色数组
+
+// 画布相关引用
+const canvas = ref(null) as any // 画布dom引用
+const myCtx = ref(null) as any // 画布2D绘图上下文
+
+// 数据存储
+const pointsInfo = ref([]) as any // 存储所有标记的位置信息（含坐标和备注）
+
+/**
+ * 初始化绘制方法
+ * 负责画布渲染和事件绑定
+ */
 const initDraw = () => {
-  if (!pointsInfo.value.length) {
+  if (!pointsInfo.value.length) { // 无数据时不绘制
     return
   }
   const ctx = myCtx.value
   // 初始位置
   function draw() {
-    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
     if (pointsInfo.value && pointsInfo.value.length) {
       pointsInfo.value.forEach((e: any, index: number) => {
         ctx.beginPath()
+        // 绘制图形边界
         if (e.boundary && e.boundary.length) { // 画线
           ctx.moveTo(e.boundary[0].x, e.boundary[0].y)
           ctx.lineTo(e.boundary[1].x, e.boundary[1].y)
@@ -53,7 +67,7 @@
           ctx.strokeStyle = window.localStorage.getItem('lineColor') || '#1aa034'
         }
         ctx.stroke()
-        ctx.closePath()
+        ctx.closePath() // 闭合路径形成图形
         // --------------------------------文字-------------------------------
         ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑'
         if (lineColors.value.length) {
@@ -81,7 +95,7 @@
     ctx.lineWidth = window.localStorage.getItem('lineWidth') || 2
     ctx.stroke()
   }
-
+  // 理拖拽事件，更新矩形顶点的位置并重新绘制
   function drag(e: any, pointIndex: number) {
     if (props.dialogStatus === 'detail') {
       return
@@ -102,10 +116,83 @@
     else if (mousePos.y > props.height) {
       mousePos.y = props.height
     }
+    // 计算商和余数的辅助函数
     const { quotient, remainder } = divideAndModulo(pointIndex, 4)
     console.log(`移动的是第${quotient + 1}条数据，第${remainder + 1}个点`)
-    pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
-    pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    if (props.currentDrawButton === '1') {
+      const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组
+      const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象
+
+      // 保存原始矩形的宽高（基于未拖拽前的坐标）
+      const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x
+      const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y
+      // 计算动态宽高（根据拖拽点和原始顶点的相对位置）
+      // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标
+      switch (remainder) {
+        case 0:
+          // 左上角顶点（x0,y0）
+          // 保持宽高不变，右下角顶点 = 左上角 + 宽高
+          rect[2].x = draggedPoint.x + originalWidth // 右下角x
+          // rect[2].y = draggedPoint.y + originalHeight // 右下角y
+          // 右上角顶点y与左上角相同，x为宽
+          rect[1].y = draggedPoint.y
+          rect[1].x = draggedPoint.x + originalWidth
+          // 左下角顶点x与左上角相同，y为高
+          rect[3].x = draggedPoint.x
+          // rect[3].y = draggedPoint.y + originalHeight
+          break
+
+        case 1: // 右上角顶点（x1,y1）
+          // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高）
+          rect[3].x = draggedPoint.x - originalWidth // 左下角x
+          rect[3].y = draggedPoint.y + originalHeight // 左下角y
+          // 左上角顶点x = 右上角x - 宽，y相同
+          rect[0].x = draggedPoint.x - originalWidth
+          rect[0].y = draggedPoint.y
+          // 右下角顶点x相同，y = 右上角y + 高
+          rect[2].x = draggedPoint.x
+          rect[2].y = draggedPoint.y + originalHeight
+          break
+
+        case 2:
+          // 右下角顶点（x2,y2）
+          // 保持宽高不变，左上角顶点 = 右下角 - 宽高
+          // rect[0].x = draggedPoint.x - originalWidth // 左上角x
+          rect[0].y = draggedPoint.y - originalHeight // 左上角y
+          // 右上角顶点x = 右下角x，y = 右下角y - 高
+          rect[1].x = draggedPoint.x
+          rect[1].y = draggedPoint.y - originalHeight
+          // 左下角顶点x = 右下角x - 宽，y相同
+          // rect[3].x = draggedPoint.x - originalWidth
+          rect[3].y = draggedPoint.y
+          break
+
+        case 3:
+          // 左下角顶点（x3,y3）
+          // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高）
+          // rect[1].x = draggedPoint.x + originalWidth // 右上角x
+          // rect[1].y = draggedPoint.y - originalHeight // 右上角y
+          // 左上角顶点y = 左下角y - 高，x相同
+          rect[0].x = draggedPoint.x
+          rect[0].y = draggedPoint.y - originalHeight
+          // 右下角顶点x = 左下角x + 宽，y相同
+          rect[2].x = draggedPoint.x + originalWidth
+          rect[2].y = draggedPoint.y
+          break
+      }
+
+      // 更新坐标（注意：顶点对象是引用类型，直接修改即可）
+      // 无需重新赋值数组，直接修改对象属性保证响应式
+      draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标
+      draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标
+
+      // 限制拖拽点在画布内
+    }
+    else {
+      pointsInfo.value[quotient].boundary[remainder].x = mousePos.x
+      pointsInfo.value[quotient].boundary[remainder].y = mousePos.y
+    }
+
     draw()
   }
 
@@ -117,7 +204,7 @@
       remainder,
     }
   }
-
+  // 为每个点添加拖拽事件监听器
   function addDragEvents() {
     if (props.dialogStatus === 'detail') {
       return
@@ -144,7 +231,7 @@
       pointsInfoElements[i].setAttribute('data-point-index', `${i}`)
     }
   }
-
+  // 初始化绘制和添加拖拽事件
   function init() {
     draw()
     addDragEvents()
diff --git a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
index 735d1e7..09de217 100644
--- a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
+++ b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue
@@ -27,6 +27,7 @@
 const videoHeight = ref(360)
 const cameraIndexCode = ref('') // 设备国标号
 const nvrIndexCode = ref('') // nvr国标号
+const currentDrawButton = ref('1')
 // 显示标题
 const textMap: { [key: string]: string } = {
   detail: '详情',
@@ -852,7 +853,20 @@
         </el-form>
       </el-col>
       <el-col :span="12">
-        <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+        <div style="display: flex;">
+          <span style="display: block;font-weight: 600; margin-bottom: 6px;font-size: 14px;">区域绘制</span>
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+          >
+            <el-radio-button
+              v-for="item in [{ name: '矩形', value: '1' }, { name: '四边形', value: '2' }]" :key="item.value" :label="item.value"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
         <div id="draw-area" class="draw" :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }">
           <iframe
             id="myframe"
@@ -861,7 +875,7 @@
             :style="{ width: `${videoWidth}px`, height: `${videoHeight}px` }"
             style="position: absolute; top: 0px; left: 0px;"
           />
-          <draw-area ref="drawAreaRef" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
+          <draw-area ref="drawAreaRef" :current-draw-button="currentDrawButton" :width="videoWidth" :height="videoHeight" :dialog-status="dialogStatus" :points="points" @givepoints-info="givePoints" />
           <!-- <span v-if="dialogStatus !== 'detail'" style="margin-top: 10px;font-size: 11px;color: red;">注意：请绘制出一个四边形</span> -->
         </div>
       </el-col>
diff --git a/src/views/alarm/policyConfig/videoPreview/videoPreview.vue b/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
index 4368dce..7c3f003 100644
--- a/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
+++ b/src/views/alarm/policyConfig/videoPreview/videoPreview.vue
@@ -24,7 +24,9 @@
 const jessibucaRef = ref()
 const videoWidth = ref(640)
 const videoHeight = ref(360)
-const points = ref() // 标注信息
+const points = ref([]) as any // 标注信息
+const drawPoints = ref([]) as any // 标注信息
+const currentDrawButton = ref('') // 当前画的标注
 // const palyUrl = `${url}?token=${window.localStorage.getItem('token')}`
 
 const defaultProps = ref({
@@ -120,10 +122,11 @@
         }
         else {
           points.value = []
+          drawPoints.value = []
         }
       }
       if (systemType.value === 'sm') { // sm识别流
-      // 获取原始流
+        // 获取原始流
         fetchRecognitionUrl(data.device.boxId, data.device.recognitionGb, data.device.nvrIndexCode).then((res: any) => {
           leafLoading.value = false
           mediaUrl.value = `${res}?token=${window.localStorage.getItem('token')}`
@@ -189,7 +192,7 @@
 }
 
 // 播放流
-function playGmStream(cameraIndexCode: string) {
+async function playGmStream(cameraIndexCode: string) {
   // 先停心跳
   if (timer.value) {
     clearInterval(timer.value)
@@ -200,22 +203,78 @@
     handleStopStream(currentStreamId.value)
   }
   // 获取视频流接口
-  fetchStream(cameraIndexCode).then((res: any) => {
-    leafLoading.value = false
+  // const res: any = await fetchStream(cameraIndexCode)
+  // // .then((res: any) => {
+  // leafLoading.value = false
+  // const { url, createStreamResponseId } = res
+  // mediaUrl.value = `${url}?token=${window.localStorage.getItem('token')}`
+  // jessibucaRef.value.play(mediaUrl.value)
+  // // 记录正在播的流的国标号
+  // currentStreamId.value = createStreamResponseId
+
+  // // 发送心跳
+  // timer.value = setInterval(() => {
+  //   handleSendHeart(createStreamResponseId)
+  // }, Number(window.localStorage.getItem('timeGap')))
+  // }).catch(() => {
+  //   ElMessage.warning('未获取到流！请联系管理员！')
+  //   leafLoading.value = false
+  // })
+
+  // 获取视频流接口--优化上面代码
+  try {
+    leafLoading.value = true // 开始加载时显示 loading
+    const res: any = await fetchStream(cameraIndexCode)
+
+    // 解析响应数据
     const { url, createStreamResponseId } = res
+    if (!url || !createStreamResponseId) {
+      throw new Error('接口返回数据不完整') // 手动抛出异常，触发错误处理
+    }
+
+    // 拼接带 token 的播放地址
     mediaUrl.value = `${url}?token=${window.localStorage.getItem('token')}`
+
+    // 播放视频
     jessibucaRef.value.play(mediaUrl.value)
-    // 记录正在播的流的国标号
+
+    // 记录当前流 ID
     currentStreamId.value = createStreamResponseId
 
-    // 发送心跳
+    // 初始化心跳定时器
+    const timeGap = Number(window.localStorage.getItem('timeGap')) || 30000 // 确保时间间隔有默认值
     timer.value = setInterval(() => {
       handleSendHeart(createStreamResponseId)
-    }, Number(window.localStorage.getItem('timeGap')))
-  }).catch(() => {
-    ElMessage.warning('未获取到流！请联系管理员！')
-    leafLoading.value = false
-  })
+    }, timeGap)
+
+    leafLoading.value = false // 成功获取流后关闭 loading
+  }
+  catch (error) {
+    // 统一错误处理
+    leafLoading.value = false // 无论成功与否，确保 loading 关闭
+    let errorMsg = '获取视频流失败'
+
+    // 处理不同类型的错误
+    if (error instanceof Error) {
+      errorMsg = error.message || errorMsg // 使用自定义错误消息或默认消息
+    }
+    else if (typeof error === 'string') {
+      errorMsg = error // 处理字符串类型的错误
+    }
+
+    // 显示警告信息（使用 ElMessage 需确保已正确引入组件）
+    ElMessage.warning(`${errorMsg}！请联系管理员！`)
+    console.error('获取视频流失败:', error) // 控制台打印详细错误信息
+  }
+
+  // -------------------------------区域绘制----------------------------------------
+  if (currentData.value && currentData.value.deviceBoundaryDTOS && currentData.value.deviceBoundaryDTOS.length) {
+    draw(currentData.value.deviceBoundaryDTOS.filter((item: { boundary: string }) => item.boundary))
+  }
+  else {
+    points.value = []
+    drawPoints.value = []
+  }
 }
 // --------------------------------------------sm获取识别流地址-----------------------------------------------
 // 开启盒子设备流
@@ -329,6 +388,8 @@
     return false
   }
   points.value = [] // 清除标注信息
+  drawPoints.value = []
+
   if (val === '1') { // 原始流
     if (systemType.value === 'sm') { // 流媒体
       // 获取原始流
@@ -401,17 +462,29 @@
   const deviceBoundaryInfo = list.map((item: any) => {
     return {
       ...item,
+      drawId: item.modelRelationId || item.sceneRelationId,
       boundary: item.boundary ? calRealData(JSON.parse(item.boundary)) : item.boundary, // 识别边界
     }
   })
   points.value = deviceBoundaryInfo
-  console.log('标注绘画信息', points.value)
+  drawPoints.value = [{ ...points.value[0] }]
+  console.log('drawPoints', drawPoints.value)
+  currentDrawButton.value = drawPoints.value[0].drawId
 }
 
 const unwatch = watch(filterText, (newVal) => {
   treeRef.value.filter(newVal)
 })
 
+// 切换画框
+const changeRadioDraw = (value: string) => {
+  const index = points.value.findIndex((item: { drawId: string }) => item.drawId === value)
+  if (index !== -1) {
+    drawPoints.value = [{ ...points.value[index] }]
+    currentDrawButton.value = drawPoints.value[index].drawId
+  }
+}
+
 onBeforeUnmount(() => {
   unwatch()
   window.removeEventListener('resize', resize)
@@ -528,7 +601,7 @@
             ref="jessibucaRef"
             :style="{ width: `${width}px`, height: `${height}px` }"
           />
-          <draw-area v-show="radio === '1'" ref="drawAreaRef" style="position: absolute;left: 0; right: 0;" dialog-status="detail" :width="width" :height="height" :points="points" />
+          <draw-area v-show="radio === '1'" ref="drawAreaRef" style="position: absolute;left: 0; right: 0;" dialog-status="detail" :width="width" :height="height" :points="drawPoints" />
           <div class="title" :style="{ width: `${width}px` }">
             {{ title }}
             <el-icon v-if="currentData && currentData.deviceType === '0'" style="margin-left: 3px;">
@@ -560,6 +633,20 @@
           z-index: 1000;top: 50%;left: 35%;letter-spacing: 4px;">
           视频加载中，请稍等...
         </div> -->
+        <div v-if="points.length && points.length > 1" style="position: absolute;z-index: 1000;bottom: 0.2%;right: 1%;">
+          <el-radio-group
+            v-model="currentDrawButton" size="small"
+            style="display: flex; justify-content: center;margin-left: 10px;"
+            @change="changeRadioDraw"
+          >
+            <el-radio-button
+              v-for="item in points" :key="item.drawId" :label="item.drawId"
+              style="margin-bottom: 8px;"
+            >
+              {{ item.remark }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
       </div>
       <!-- 右侧报警结果 -->
       <!-- <div class="alarm-result">
diff --git a/src/views/bigScreen/jessibuca-OptimizeInitialFrame.vue b/src/views/bigScreen/jessibuca-OptimizeInitialFrame.vue
new file mode 100644
index 0000000..55637cf
--- /dev/null
+++ b/src/views/bigScreen/jessibuca-OptimizeInitialFrame.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+  },
+  showOperateBtns: {
+    type: Boolean,
+    default: false,
+  },
+  preloadUrl: {
+    type: String,
+    default: '',
+  },
+})
+
+const jessibuca = ref(null) // 播放器实例引用
+const container = ref(null) // 播放器容器引用
+const isInitialized = ref(false) // 播放器初始化状态
+const isFirstPlay = ref(true) // 是否首次播放标记
+
+/**
+ * 创建Jessibuca播放器实例并初始化配置
+ */
+function create() {
+  console.log('执行jessibuca初始化', props.id)
+
+  // 等待DOM渲染完成后再初始化播放器，确保容器已存在
+  nextTick(() => {
+    container.value = document.getElementById(props.id)
+
+    jessibuca.value = new Jessibuca({
+      container: container.value,
+      videoBuffer: 0.1, // 减少初始缓冲时间，加快首帧显示
+      isResize: false,
+      loadingText: '视频加载中',
+      useMSE: true, // 优先使用MSE硬解码（适用于大多数现代浏览器）
+      useWCS: true, // 同时启用Webcodecs硬解码（Chrome 94+支持）
+      debug: false,
+      showBandwidth: props.showOperateBtns,
+      loadingTimeout: 15, // 缩短超时时间，避免长时间等待无响应的请求
+      operateBtns: {
+        fullscreen: props.showOperateBtns,
+        screenshot: props.showOperateBtns,
+        play: props.showOperateBtns,
+        audio: false,
+        recorder: false,
+      },
+      forceNoOffscreen: true, // 不使用离屏模式，提升渲染性能
+      isNotMute: false,
+      hotKey: false,
+      keepScreenOn: false,
+      supportDblclickFullscreen: true,
+      hasAudio: false, // 不需要音频，禁用音频解码提升性能
+      autoWasm: true, // H265解码失败时自动降级到WASM模式
+      controlAutoHide: false,
+      wasmDecodeErrorReplay: true,
+      wcsUseVideoRender: true, // 使用video标签渲染，提升渲染性能
+
+      // 新增优化首屏加载的参数
+      firstFrameTimeout: 5, // 首帧超时时间，超时后可尝试重新加载
+      preloadTime: 1, // 预加载时间，提前缓冲一小段视频
+      maxBufferLength: 1, // 限制最大缓冲长度，避免占用过多内存
+      useWorker: true, // 使用Web Worker处理解码，避免阻塞主线程
+    })
+
+    // 播放器事件监听
+    jessibuca.value.on('videoInfo', (data) => {
+      console.log('videoInfo:', 'width:', data.width, 'height:', data.height)
+    })
+
+    jessibuca.value.on('playFailedAndPaused', (error) => {
+      console.log('playFailedAndPaused事件：监听流断掉', error)
+      // 首次播放失败时，自动尝试重连
+      if (isFirstPlay.value) {
+        setTimeout(() => {
+          jessibuca.value && jessibuca.value.replay()
+        }, 1000)
+      }
+    })
+
+    jessibuca.value.on('timeout', (error) => {
+      console.log('timeout当设定的超时时间内无数据返回,则回调:', error)
+      // 首次播放超时，尝试重连
+      if (isFirstPlay.value) {
+        setTimeout(() => {
+          jessibuca.value && jessibuca.value.replay()
+        }, 1000)
+      }
+    })
+
+    jessibuca.value.on('loadingTimeout', () => {
+      console.log('loadingTimeout当play()的时候，如果没有数据返回，则回调: timeout')
+      // 首次加载超时，尝试重连
+      if (isFirstPlay.value) {
+        setTimeout(() => {
+          jessibuca.value && jessibuca.value.replay()
+        }, 1000)
+      }
+    })
+
+    jessibuca.value.on('firstFrame', () => {
+      console.log('首帧渲染完成')
+      isFirstPlay.value = false // 标记首帧已渲染，后续不再触发重连逻辑
+      // 首帧渲染后可以隐藏加载指示器
+      container.value.classList.remove('loading')
+    })
+
+    jessibuca.value.on('playToRenderTimes', (times) => {
+      console.log('监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗:', times)
+    })
+
+    isInitialized.value = true
+
+    // 如果有预加载URL，尝试预加载视频资源
+    if (props.preloadUrl) {
+      jessibuca.value.preload(props.preloadUrl)
+    }
+  })
+}
+
+/**
+ * 预连接视频服务器，减少首次请求延迟
+ * @param {string} url - 视频URL
+ */
+async function preconnect(url) {
+  if (!url) { return }
+
+  try {
+    // 解析URL获取主机名和协议
+    const parsedUrl = new URL(url)
+    const protocol = parsedUrl.protocol === 'https:' ? 'https' : 'http'
+    const host = parsedUrl.host
+
+    // 创建预连接标记并添加到文档头部
+    // 提前进行DNS解析、TCP握手和TLS协商
+    const link = document.createElement('link')
+    link.rel = 'preconnect'
+    link.href = `${protocol}://${host}`
+    document.head.appendChild(link)
+
+    console.log(`已预连接到: ${host}`)
+  }
+  catch (error) {
+    console.error('预连接失败:', error)
+  }
+}
+
+/**
+ * 播放视频
+ * @param {string} playUrl - 视频播放地址
+ */
+async function play(playUrl = '') {
+  if (!playUrl) { return }
+
+  console.log('播放视频路径: ', playUrl)
+
+  // 显示加载指示器
+  if (container.value) {
+    container.value.classList.add('loading')
+  }
+
+  // 首次播放前先预连接服务器，优化网络连接时间
+  if (isFirstPlay.value) {
+    await preconnect(playUrl)
+  }
+
+  // 如果播放器还未初始化完成，等待一段时间
+  if (!isInitialized.value) {
+    await new Promise(resolve => setTimeout(resolve, 500))
+  }
+
+  // 播放视频
+  if (jessibuca.value) {
+    jessibuca.value.play(playUrl)
+  }
+  else {
+    console.error('播放器未初始化')
+    // 隐藏加载指示器
+    if (container.value) {
+      container.value.classList.remove('loading')
+    }
+  }
+}
+
+// 暂停播放
+function pause() {
+  jessibuca.value && jessibuca.value.pause().then(() => {
+    console.log('pause success')
+  })
+}
+
+// 恢复播放
+function restore() {
+  jessibuca.value && jessibuca.value.play().then(() => {
+    console.log('restore success')
+  })
+}
+
+// 销毁播放器实例
+function destroy() {
+  jessibuca.value && jessibuca.value.destroy()
+  jessibuca.value = null
+  isInitialized.value = false
+}
+
+// 组件卸载前清理资源
+onBeforeUnmount(() => {
+  destroy()
+})
+
+// 组件挂载后初始化播放器
+onMounted(() => {
+  create()
+})
+
+// 暴露公共方法供父组件调用
+defineExpose({ play, destroy, pause, restore })
+</script>
+
+<template>
+  <div :id="props.id" class="container" />
+</template>
+
+<style scoped>
+.container {
+  background: rgba(13, 14, 27, 0.7);
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+/* 加载指示器样式 */
+.container::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s linear infinite;
+  z-index: 10;
+  display: none;
+}
+
+/* 显示加载指示器的状态 */
+.container.loading::before {
+  display: block;
+}
+
+/* 加载动画 */
+@keyframes spin {
+  0% { transform: translate(-50%, -50%) rotate(0deg); }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+</style>
diff --git a/src/views/bigScreen/jessibuca.vue b/src/views/bigScreen/jessibuca.vue
index 50109da..eb086c1 100644
--- a/src/views/bigScreen/jessibuca.vue
+++ b/src/views/bigScreen/jessibuca.vue
@@ -27,7 +27,7 @@
     useMSE: true, // 是否开启MediaSource硬解码 视频编码只支持H.264视频（Safari on iOS不支持）不支持 forceNoOffscreen 为 false (开启离屏渲染)
     useWCS: false, // 是否开启Webcodecs硬解码 视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境) 支持 forceNoOffscreen 为 false （开启离屏渲染)
     debug: false, //  是否开启控制台调试
-    showBandwidth: false, // 是否显示显示网速
+    showBandwidth: props.showOperateBtns, // 是否显示显示网速
     loadingTimeout: 60, // flv地址请求超时时间
     operateBtns: {
       // 配置操作按钮
@@ -72,6 +72,9 @@
   jessibuca.on('play', (flag) => {
     console.log('play触发播放事件')
   })
+  jessibuca.on('playToRenderTimes', (times) => {
+    console.log('监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗:', times)
+  })
 }
 
 // 获取视频流地址并播放视频