diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
diff --git a/src/layouts/components/Tools/pushConfig.vue b/src/layouts/components/Tools/pushConfig.vue
new file mode 100644
index 0000000..002b32e
--- /dev/null
+++ b/src/layouts/components/Tools/pushConfig.vue
@@ -0,0 +1,156 @@
+<!-- 配置下发弹窗 -->
+<script lang="ts" setup name="PushConfig">
+import axios from 'axios'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getConfig, pushConfig } from '@/api/page/control'
+const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
+const dataFormRef = ref<FormInstance>()
+// 表单对象
+const dataForm = ref({
+  push_url: '', // 地址
+  push_interval: '', // 间隔
+  push_type: '', // 类型
+})
+function validateURL(url: string) {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+const validateIp = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('地址不能为空'))
+  }
+  else {
+    if (validateURL(value)) {
+      callback()
+    }
+    else {
+      callback(new Error('地址不合法'))
+    }
+    callback()
+  }
+}
+const validateNumber = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback()
+  }
+  else {
+    if (Number(value) < 0) {
+      callback(new Error('请输入大于等于0的数字'))
+    }
+    else {
+      callback()
+    }
+    callback()
+  }
+}
+// 校验规则
+const rules: FormRules = reactive({
+  push_type: [{ required: true, message: '推送类型必选', trigger: ['blur', 'change'] }],
+  push_url: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
+  push_interval: [{ validator: validateNumber, trigger: ['blur', 'change'] }],
+})// 前端校验规则
+// 弹窗初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+  resetForm()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+  })
+}
+
+defineExpose({ initDialog })
+
+// 重置表单
+function resetForm() {
+  // console.log(dataForm.value)
+  dataForm.value.push_url = ''
+  dataForm.value.push_interval = ''
+  dataForm.value.push_type = ''
+}
+// 保存数据
+function saveData() {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      ElMessageBox.confirm(
+        `确认推送配置吗？`,
+        '提示',
+        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+      ).then(() => {
+        pushConfig(dataForm.value).then((res) => {
+          ElMessage.success('操作成功')
+          dialogFormVisible.value = false
+        })
+      })
+
+    }
+  })
+}
+const pushList = ref<any[]>([])
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  pushList.value = res.data.push_type
+})
+// 监听类型 获取之前的配置
+watch(() => dataForm.value.push_type, (newVal) => {
+  if (newVal) {
+    getConfig().then(res => {
+      const current = res.data.filter((item: any) => String(item.push_type) === newVal)
+      if (current.length) {
+        ElMessageBox.confirm(
+          `查询到上一次下发配置内容，是否填充到当前？`,
+          '提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+        ).then(() => {
+          dataForm.value.push_url = current[0].push_url
+          dataForm.value.push_interval = current[0].push_interval
+        })
+
+      }
+    })
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="推送配置" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-form-item label="推送类型" prop="push_type">
+        <el-select v-model="dataForm.push_type" placeholder="推送类型" clearable class="select" style="width: 100%;"
+          @change="changeType">
+          <el-option v-for="item in pushList" :key="item.value" :value="item.value" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送地址" prop="push_url">
+        <el-input v-model.trim="dataForm.push_url" type="text" placeholder="必填" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="推送间隔" prop="push_interval">
+        <el-input v-model.trim="dataForm.push_interval" type="number" :step="10" controls-position="right"
+          style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
diff --git a/src/layouts/components/Tools/pushConfig.vue b/src/layouts/components/Tools/pushConfig.vue
new file mode 100644
index 0000000..002b32e
--- /dev/null
+++ b/src/layouts/components/Tools/pushConfig.vue
@@ -0,0 +1,156 @@
+<!-- 配置下发弹窗 -->
+<script lang="ts" setup name="PushConfig">
+import axios from 'axios'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getConfig, pushConfig } from '@/api/page/control'
+const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
+const dataFormRef = ref<FormInstance>()
+// 表单对象
+const dataForm = ref({
+  push_url: '', // 地址
+  push_interval: '', // 间隔
+  push_type: '', // 类型
+})
+function validateURL(url: string) {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+const validateIp = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('地址不能为空'))
+  }
+  else {
+    if (validateURL(value)) {
+      callback()
+    }
+    else {
+      callback(new Error('地址不合法'))
+    }
+    callback()
+  }
+}
+const validateNumber = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback()
+  }
+  else {
+    if (Number(value) < 0) {
+      callback(new Error('请输入大于等于0的数字'))
+    }
+    else {
+      callback()
+    }
+    callback()
+  }
+}
+// 校验规则
+const rules: FormRules = reactive({
+  push_type: [{ required: true, message: '推送类型必选', trigger: ['blur', 'change'] }],
+  push_url: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
+  push_interval: [{ validator: validateNumber, trigger: ['blur', 'change'] }],
+})// 前端校验规则
+// 弹窗初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+  resetForm()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+  })
+}
+
+defineExpose({ initDialog })
+
+// 重置表单
+function resetForm() {
+  // console.log(dataForm.value)
+  dataForm.value.push_url = ''
+  dataForm.value.push_interval = ''
+  dataForm.value.push_type = ''
+}
+// 保存数据
+function saveData() {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      ElMessageBox.confirm(
+        `确认推送配置吗？`,
+        '提示',
+        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+      ).then(() => {
+        pushConfig(dataForm.value).then((res) => {
+          ElMessage.success('操作成功')
+          dialogFormVisible.value = false
+        })
+      })
+
+    }
+  })
+}
+const pushList = ref<any[]>([])
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  pushList.value = res.data.push_type
+})
+// 监听类型 获取之前的配置
+watch(() => dataForm.value.push_type, (newVal) => {
+  if (newVal) {
+    getConfig().then(res => {
+      const current = res.data.filter((item: any) => String(item.push_type) === newVal)
+      if (current.length) {
+        ElMessageBox.confirm(
+          `查询到上一次下发配置内容，是否填充到当前？`,
+          '提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+        ).then(() => {
+          dataForm.value.push_url = current[0].push_url
+          dataForm.value.push_interval = current[0].push_interval
+        })
+
+      }
+    })
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="推送配置" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-form-item label="推送类型" prop="push_type">
+        <el-select v-model="dataForm.push_type" placeholder="推送类型" clearable class="select" style="width: 100%;"
+          @change="changeType">
+          <el-option v-for="item in pushList" :key="item.value" :value="item.value" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送地址" prop="push_url">
+        <el-input v-model.trim="dataForm.push_url" type="text" placeholder="必填" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="推送间隔" prop="push_interval">
+        <el-input v-model.trim="dataForm.push_interval" type="number" :step="10" controls-position="right"
+          style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index ff9abc1..a539195 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -5,10 +5,10 @@
  -->
 <script lang="ts" setup name="DeviceManageEdit">
 import { ElMessage, type FormRules } from 'element-plus'
-import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 import { getSceneAll } from '@/api/page/scene'
 import { getModelAll } from '@/api/page/model'
-import { addDevice, getModelRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import { addDevice, getModelRelations, getSceneRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import drawArea from './drawArea.vue'
 const emits = defineEmits(['refresh'])
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -49,11 +49,13 @@
 const sceneList = ref<any[]>([])
 const modelList = ref<any[]>([])
 const modelAllList = ref<any[]>([])
-
+const areaRef = ref()
+const showVideo = ref(false)
 // 初始化对话框
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
+  showVideo.value = false
   if (dialogStatusValue === 'create') {
     resetForm()
     // nextTick(() => {
@@ -102,16 +104,24 @@
         })
       })
     }
+    else if (dataForm.value.mode === '2') {
+      getSceneRelations({ id: row.id }).then(res => {
+        if (res.data.range_points) {
+          areaRef.value.setPonits(res.data.range_points)
+        }
+        else {
+          areaRef.value.setPonits()
+        }
+      })
+      playerVideo()
+    }
   }
 }
 defineExpose({
   initDialog,
 })
 
-const cancel = () => {
-  dialogFormVisible.value = false
-  resetForm()
-}
+
 // 选择的算法
 const selectModelList = ref<any[]>([])
 const selectModel = (value: any) => {
@@ -180,10 +190,12 @@
       })
     }
     else if (dataForm.value.mode === '2') {
+      // console.log(JSON.stringify(areaRef.value.getPoints()), 'JSON.stringify(areaRef.value.getPoints())')
       // 场景
       updateSceneRelations({
         id: dialogStatus.value === 'update' ? dataForm.value.id : res.data.id,
         scene_id: sceneList.value.filter((item: any) => item.name === dataForm.value.relation_scene_name)[0]?.id || '',
+        range_points: JSON.stringify(areaRef.value.getPoints())
       }).then(() => {
         confirm()
       })
@@ -193,6 +205,7 @@
     }
   })
 }
+
 const saveData = () => {
   // 验证
   // 1.关联算法
@@ -217,14 +230,70 @@
     }
   })
 }
+// 电子围栏恢复默认
+const resetArea = () => {
+  areaRef.value.setPonits()
+}
+// 清空电子围栏
+const clearArea = () => {
+  areaRef.value.setPonits('[]')
+}
+const webRtcServer = ref(null)
+// 视频地址
+function playerVideo() {
+  if (webRtcServer.value) {
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    console.log('销毁视频')
+  }
+  if (dataForm.value.mode !== '2' || !dataForm.value.input_stream_url) {
+    return
+  }
+  showVideo.value = true
+  setTimeout(() => {
+    nextTick(() => {
+      webRtcServer.value = new WebRtcStreamer('video-rtsp-container', 'http://127.0.0.1:8000')
+      webRtcServer.value.connect(dataForm.value.input_stream_url)
+    })
+  })
+}
+watch(() => dataForm.value.mode, (newVal) => {
+  if (newVal === '2' && dataForm.value.input_stream_url) {
+    playerVideo()
+  }
+})
+watch(() => dialogFormVisible.value, (newVal) => {
+  if (webRtcServer.value && !newVal) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+onUnmounted(() => {
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+  resetForm()
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+}
 </script>
 
 <template>
   <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body top="6vh">
-    <el-form
-      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
-      :disabled="dialogStatus === 'detail'"
-    >
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
+      :disabled="dialogStatus === 'detail'">
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="摄像头名称" prop="name">
@@ -243,7 +312,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="RTSP地址" prop="input_stream_url">
-            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" />
+            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" @blur="playerVideo" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -290,10 +359,8 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select
-              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
-              style="width: 100%;"
-            >
+            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;">
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
@@ -302,10 +369,8 @@
       <el-row v-if="dataForm.mode === '1'" :gutter="24">
         <el-col :span="18">
           <el-form-item label="算法关联" prop="relation_model_names">
-            <el-table
-              ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;"
-              height="300px" @selection-change="selectModel"
-            >
+            <el-table ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;" height="300px"
+              @selection-change="selectModel">
               <el-table-column label="算法名称" align="center" value="name">
                 <template #default="scope">
                   {{ scope.row.name }}
@@ -321,6 +386,27 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row v-show="dataForm.mode === '2'" :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="监控区域绘制" prop="">
+            <!-- 电子围栏 -->
+            <div style="border: 1px solid #000;position: relative;">
+              <draw-area ref="areaRef" :disabled="dialogStatus === 'detail'" v-show="dataForm.mode === '2'" />
+              <!--  -->
+              <video v-if="showVideo" id="video-rtsp-container" autoplay muted width="426.4" height="240"
+                style="object-fit: fill;width: 426.4px; height: 240px;position: absolute;top:0;left:0;z-index: 0;" />
+            </div>
+            <div v-if="dialogStatus !== 'detail'" style="margin-left: 15px;height: 240px;">
+              <div><el-button type="primary" @click="resetArea">恢复默认</el-button></div>
+              <div style="margin-top: 15px;width: 100%;" @click="clearArea"><el-button
+                  style="margin: 0 auto;">清空</el-button>
+              </div>
+
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
     </el-form>
     <template #footer>
       <div class="dialog-footer">

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
diff --git a/src/layouts/components/Tools/pushConfig.vue b/src/layouts/components/Tools/pushConfig.vue
new file mode 100644
index 0000000..002b32e
--- /dev/null
+++ b/src/layouts/components/Tools/pushConfig.vue
@@ -0,0 +1,156 @@
+<!-- 配置下发弹窗 -->
+<script lang="ts" setup name="PushConfig">
+import axios from 'axios'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getConfig, pushConfig } from '@/api/page/control'
+const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
+const dataFormRef = ref<FormInstance>()
+// 表单对象
+const dataForm = ref({
+  push_url: '', // 地址
+  push_interval: '', // 间隔
+  push_type: '', // 类型
+})
+function validateURL(url: string) {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+const validateIp = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('地址不能为空'))
+  }
+  else {
+    if (validateURL(value)) {
+      callback()
+    }
+    else {
+      callback(new Error('地址不合法'))
+    }
+    callback()
+  }
+}
+const validateNumber = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback()
+  }
+  else {
+    if (Number(value) < 0) {
+      callback(new Error('请输入大于等于0的数字'))
+    }
+    else {
+      callback()
+    }
+    callback()
+  }
+}
+// 校验规则
+const rules: FormRules = reactive({
+  push_type: [{ required: true, message: '推送类型必选', trigger: ['blur', 'change'] }],
+  push_url: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
+  push_interval: [{ validator: validateNumber, trigger: ['blur', 'change'] }],
+})// 前端校验规则
+// 弹窗初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+  resetForm()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+  })
+}
+
+defineExpose({ initDialog })
+
+// 重置表单
+function resetForm() {
+  // console.log(dataForm.value)
+  dataForm.value.push_url = ''
+  dataForm.value.push_interval = ''
+  dataForm.value.push_type = ''
+}
+// 保存数据
+function saveData() {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      ElMessageBox.confirm(
+        `确认推送配置吗？`,
+        '提示',
+        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+      ).then(() => {
+        pushConfig(dataForm.value).then((res) => {
+          ElMessage.success('操作成功')
+          dialogFormVisible.value = false
+        })
+      })
+
+    }
+  })
+}
+const pushList = ref<any[]>([])
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  pushList.value = res.data.push_type
+})
+// 监听类型 获取之前的配置
+watch(() => dataForm.value.push_type, (newVal) => {
+  if (newVal) {
+    getConfig().then(res => {
+      const current = res.data.filter((item: any) => String(item.push_type) === newVal)
+      if (current.length) {
+        ElMessageBox.confirm(
+          `查询到上一次下发配置内容，是否填充到当前？`,
+          '提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+        ).then(() => {
+          dataForm.value.push_url = current[0].push_url
+          dataForm.value.push_interval = current[0].push_interval
+        })
+
+      }
+    })
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="推送配置" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-form-item label="推送类型" prop="push_type">
+        <el-select v-model="dataForm.push_type" placeholder="推送类型" clearable class="select" style="width: 100%;"
+          @change="changeType">
+          <el-option v-for="item in pushList" :key="item.value" :value="item.value" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送地址" prop="push_url">
+        <el-input v-model.trim="dataForm.push_url" type="text" placeholder="必填" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="推送间隔" prop="push_interval">
+        <el-input v-model.trim="dataForm.push_interval" type="number" :step="10" controls-position="right"
+          style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index ff9abc1..a539195 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -5,10 +5,10 @@
  -->
 <script lang="ts" setup name="DeviceManageEdit">
 import { ElMessage, type FormRules } from 'element-plus'
-import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 import { getSceneAll } from '@/api/page/scene'
 import { getModelAll } from '@/api/page/model'
-import { addDevice, getModelRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import { addDevice, getModelRelations, getSceneRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import drawArea from './drawArea.vue'
 const emits = defineEmits(['refresh'])
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -49,11 +49,13 @@
 const sceneList = ref<any[]>([])
 const modelList = ref<any[]>([])
 const modelAllList = ref<any[]>([])
-
+const areaRef = ref()
+const showVideo = ref(false)
 // 初始化对话框
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
+  showVideo.value = false
   if (dialogStatusValue === 'create') {
     resetForm()
     // nextTick(() => {
@@ -102,16 +104,24 @@
         })
       })
     }
+    else if (dataForm.value.mode === '2') {
+      getSceneRelations({ id: row.id }).then(res => {
+        if (res.data.range_points) {
+          areaRef.value.setPonits(res.data.range_points)
+        }
+        else {
+          areaRef.value.setPonits()
+        }
+      })
+      playerVideo()
+    }
   }
 }
 defineExpose({
   initDialog,
 })
 
-const cancel = () => {
-  dialogFormVisible.value = false
-  resetForm()
-}
+
 // 选择的算法
 const selectModelList = ref<any[]>([])
 const selectModel = (value: any) => {
@@ -180,10 +190,12 @@
       })
     }
     else if (dataForm.value.mode === '2') {
+      // console.log(JSON.stringify(areaRef.value.getPoints()), 'JSON.stringify(areaRef.value.getPoints())')
       // 场景
       updateSceneRelations({
         id: dialogStatus.value === 'update' ? dataForm.value.id : res.data.id,
         scene_id: sceneList.value.filter((item: any) => item.name === dataForm.value.relation_scene_name)[0]?.id || '',
+        range_points: JSON.stringify(areaRef.value.getPoints())
       }).then(() => {
         confirm()
       })
@@ -193,6 +205,7 @@
     }
   })
 }
+
 const saveData = () => {
   // 验证
   // 1.关联算法
@@ -217,14 +230,70 @@
     }
   })
 }
+// 电子围栏恢复默认
+const resetArea = () => {
+  areaRef.value.setPonits()
+}
+// 清空电子围栏
+const clearArea = () => {
+  areaRef.value.setPonits('[]')
+}
+const webRtcServer = ref(null)
+// 视频地址
+function playerVideo() {
+  if (webRtcServer.value) {
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    console.log('销毁视频')
+  }
+  if (dataForm.value.mode !== '2' || !dataForm.value.input_stream_url) {
+    return
+  }
+  showVideo.value = true
+  setTimeout(() => {
+    nextTick(() => {
+      webRtcServer.value = new WebRtcStreamer('video-rtsp-container', 'http://127.0.0.1:8000')
+      webRtcServer.value.connect(dataForm.value.input_stream_url)
+    })
+  })
+}
+watch(() => dataForm.value.mode, (newVal) => {
+  if (newVal === '2' && dataForm.value.input_stream_url) {
+    playerVideo()
+  }
+})
+watch(() => dialogFormVisible.value, (newVal) => {
+  if (webRtcServer.value && !newVal) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+onUnmounted(() => {
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+  resetForm()
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+}
 </script>
 
 <template>
   <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body top="6vh">
-    <el-form
-      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
-      :disabled="dialogStatus === 'detail'"
-    >
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
+      :disabled="dialogStatus === 'detail'">
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="摄像头名称" prop="name">
@@ -243,7 +312,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="RTSP地址" prop="input_stream_url">
-            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" />
+            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" @blur="playerVideo" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -290,10 +359,8 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select
-              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
-              style="width: 100%;"
-            >
+            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;">
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
@@ -302,10 +369,8 @@
       <el-row v-if="dataForm.mode === '1'" :gutter="24">
         <el-col :span="18">
           <el-form-item label="算法关联" prop="relation_model_names">
-            <el-table
-              ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;"
-              height="300px" @selection-change="selectModel"
-            >
+            <el-table ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;" height="300px"
+              @selection-change="selectModel">
               <el-table-column label="算法名称" align="center" value="name">
                 <template #default="scope">
                   {{ scope.row.name }}
@@ -321,6 +386,27 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row v-show="dataForm.mode === '2'" :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="监控区域绘制" prop="">
+            <!-- 电子围栏 -->
+            <div style="border: 1px solid #000;position: relative;">
+              <draw-area ref="areaRef" :disabled="dialogStatus === 'detail'" v-show="dataForm.mode === '2'" />
+              <!--  -->
+              <video v-if="showVideo" id="video-rtsp-container" autoplay muted width="426.4" height="240"
+                style="object-fit: fill;width: 426.4px; height: 240px;position: absolute;top:0;left:0;z-index: 0;" />
+            </div>
+            <div v-if="dialogStatus !== 'detail'" style="margin-left: 15px;height: 240px;">
+              <div><el-button type="primary" @click="resetArea">恢复默认</el-button></div>
+              <div style="margin-top: 15px;width: 100%;" @click="clearArea"><el-button
+                  style="margin: 0 auto;">清空</el-button>
+              </div>
+
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
     </el-form>
     <template #footer>
       <div class="dialog-footer">
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
index b0c40cb..d6e05a9 100644
--- a/src/views/page/device/components/drawArea.vue
+++ b/src/views/page/device/components/drawArea.vue
@@ -5,30 +5,46 @@
  -->
 
 <script lang="ts" setup name="DrawArea">
-// const props = defineProps({
-//   width: {
-//     type: Number,
-//     required: true,
-//   },
-//   height: {
-//     type: Number,
-//     required: true,
-//   },
-// })
+import { HtmlHTMLAttributes } from 'vue'
 
+const $props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: Number,
+    default: 426.4
+  },
+  height: {
+    type: Number,
+    default: 240
+  }
+})
 const points = ref([
-  { x: 50, y: 50 },
-  { x: 480, y: 50 },
-  { x: 480, y: 250 },
-  { x: 50, y: 250 },
+  { x: 30, y: 30 },
+  { x: 395, y: 30 },
+  { x: 395, y: 210 },
+  { x: 30, y: 210 },
 ])
-onMounted(() => {
-  const canvas = document.getElementById('myCanvas')
-  const container = document.getElementById('draw-area')
+const elementId = ref(`${new Date().getTime()}`)
+const setSize = () => {
+  const container = document.getElementById(`${elementId.value}-container`) as HTMLElement
+  container.style.width = `${$props.width}px`
+  container.style.height = `${$props.height}px`
+  const canvas = document.getElementById(`${elementId.value}-canvas`) as HTMLCanvasElement
+  canvas.width = $props.width
+  canvas.height = $props.height
+}
+const initDraw = () => {
+  const canvas = document.getElementById(`${elementId.value}-canvas`)
+  const container = document.getElementById(`${elementId.value}-container`)
   const ctx = canvas.getContext('2d')
+  // console.log(canvas, points.value, 'canvas')
   ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
   // 初始位置
   function draw() {
+    if(points.value.length !== 4) { return}
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.beginPath()
     ctx.moveTo(points.value[0].x, points.value[0].y)
@@ -42,10 +58,13 @@
   }
 
   function drag(e, pointIndex) {
+    if ($props.disabled) {
+      return true
+    }
     e = e || window.event
     e.preventDefault()
     var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
-    console.log(mousePos, 'mousePos')
+    // console.log(mousePos, 'mousePos')
     // 限制在指定区域内
     if (mousePos.x < 0) {
       mousePos.x = 0
@@ -65,6 +84,9 @@
   }
 
   function addDragEvents() {
+    // if ($props.disabled) {
+    //   return true
+    // }
     var dragEvents = {
       dragStart(e) {
         e = e || window.event
@@ -93,6 +115,12 @@
     addDragEvents()
   }
   init()
+}
+onMounted(() => {
+  setSize()
+  setTimeout(() => {
+    initDraw()
+  }, 100);
 })
 
 const style = ref([
@@ -115,6 +143,10 @@
 ])
 
 watch(() => points.value, () => {
+  if(points.value.length !== 4) {
+    style.value = []
+   return
+  }
   style.value = [
     {
       top: `${points.value[0].y - 5}px`,
@@ -136,16 +168,56 @@
 }, {
   deep: true,
 })
+const getPoints = () => {
+  return points.value.map((item) => ([item.x / $props.width, item.y / $props.height]))
+}
+const setPonits = (data) => {
+  if (!data) {
+    points.value = [
+      { x: 30, y: 30 },
+      { x: 395, y: 30 },
+      { x: 395, y: 210 },
+      { x: 30, y: 210 },
+    ]
+    initDraw()
+    return
+  }
+  const pointsArr = JSON.parse(data)
+  points.value = pointsArr.map((item: any) => ({
+    x: Number(item[0]) * $props.width,
+    y: Number(item[1]) * $props.height,
+  }))
+  initDraw()
+}
+defineExpose({
+  points,
+  getPoints,
+  setPonits
+})
+watch([() => $props.width, $props.height], () => {
+  //
+  // console.log(document.getElementById('myCanvas'))
+  // console.log($props.width, $props.height, '123')
+}, {
+  deep: true,
+  immediate: true
+})
 </script>
 
 <template>
-  <div style="width: 533px;height: 300px;">
-    <canvas id="myCanvas" width="533" height="300" class="canvans" />
-    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  <div :style="{ width: `${$props.width}px`, height: `${$props.height}px`, position: 'relative' }"
+    :id="`${elementId}-container`">
+    <canvas :id="`${elementId}-canvas`" :width="$props.width" :height="$props.height" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :class="$props.disabled ? 'no' : ''"
+      :style="style[index]" />
   </div>
 </template>
 
 <style scoped>
+#draw-area {
+  /* border: 1px solid #000; */
+}
+
 .canvans {
   padding: 0;
   margin: 0;
@@ -174,5 +246,12 @@
   &:hover {
     cursor: move;
   }
+
+}
+
+.no {
+  &:hover {
+    cursor: default !important;
+  }
 }
 </style>

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
diff --git a/src/layouts/components/Tools/pushConfig.vue b/src/layouts/components/Tools/pushConfig.vue
new file mode 100644
index 0000000..002b32e
--- /dev/null
+++ b/src/layouts/components/Tools/pushConfig.vue
@@ -0,0 +1,156 @@
+<!-- 配置下发弹窗 -->
+<script lang="ts" setup name="PushConfig">
+import axios from 'axios'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getConfig, pushConfig } from '@/api/page/control'
+const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
+const dataFormRef = ref<FormInstance>()
+// 表单对象
+const dataForm = ref({
+  push_url: '', // 地址
+  push_interval: '', // 间隔
+  push_type: '', // 类型
+})
+function validateURL(url: string) {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+const validateIp = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('地址不能为空'))
+  }
+  else {
+    if (validateURL(value)) {
+      callback()
+    }
+    else {
+      callback(new Error('地址不合法'))
+    }
+    callback()
+  }
+}
+const validateNumber = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback()
+  }
+  else {
+    if (Number(value) < 0) {
+      callback(new Error('请输入大于等于0的数字'))
+    }
+    else {
+      callback()
+    }
+    callback()
+  }
+}
+// 校验规则
+const rules: FormRules = reactive({
+  push_type: [{ required: true, message: '推送类型必选', trigger: ['blur', 'change'] }],
+  push_url: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
+  push_interval: [{ validator: validateNumber, trigger: ['blur', 'change'] }],
+})// 前端校验规则
+// 弹窗初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+  resetForm()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+  })
+}
+
+defineExpose({ initDialog })
+
+// 重置表单
+function resetForm() {
+  // console.log(dataForm.value)
+  dataForm.value.push_url = ''
+  dataForm.value.push_interval = ''
+  dataForm.value.push_type = ''
+}
+// 保存数据
+function saveData() {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      ElMessageBox.confirm(
+        `确认推送配置吗？`,
+        '提示',
+        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+      ).then(() => {
+        pushConfig(dataForm.value).then((res) => {
+          ElMessage.success('操作成功')
+          dialogFormVisible.value = false
+        })
+      })
+
+    }
+  })
+}
+const pushList = ref<any[]>([])
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  pushList.value = res.data.push_type
+})
+// 监听类型 获取之前的配置
+watch(() => dataForm.value.push_type, (newVal) => {
+  if (newVal) {
+    getConfig().then(res => {
+      const current = res.data.filter((item: any) => String(item.push_type) === newVal)
+      if (current.length) {
+        ElMessageBox.confirm(
+          `查询到上一次下发配置内容，是否填充到当前？`,
+          '提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+        ).then(() => {
+          dataForm.value.push_url = current[0].push_url
+          dataForm.value.push_interval = current[0].push_interval
+        })
+
+      }
+    })
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="推送配置" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-form-item label="推送类型" prop="push_type">
+        <el-select v-model="dataForm.push_type" placeholder="推送类型" clearable class="select" style="width: 100%;"
+          @change="changeType">
+          <el-option v-for="item in pushList" :key="item.value" :value="item.value" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送地址" prop="push_url">
+        <el-input v-model.trim="dataForm.push_url" type="text" placeholder="必填" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="推送间隔" prop="push_interval">
+        <el-input v-model.trim="dataForm.push_interval" type="number" :step="10" controls-position="right"
+          style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index ff9abc1..a539195 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -5,10 +5,10 @@
  -->
 <script lang="ts" setup name="DeviceManageEdit">
 import { ElMessage, type FormRules } from 'element-plus'
-import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 import { getSceneAll } from '@/api/page/scene'
 import { getModelAll } from '@/api/page/model'
-import { addDevice, getModelRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import { addDevice, getModelRelations, getSceneRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import drawArea from './drawArea.vue'
 const emits = defineEmits(['refresh'])
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -49,11 +49,13 @@
 const sceneList = ref<any[]>([])
 const modelList = ref<any[]>([])
 const modelAllList = ref<any[]>([])
-
+const areaRef = ref()
+const showVideo = ref(false)
 // 初始化对话框
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
+  showVideo.value = false
   if (dialogStatusValue === 'create') {
     resetForm()
     // nextTick(() => {
@@ -102,16 +104,24 @@
         })
       })
     }
+    else if (dataForm.value.mode === '2') {
+      getSceneRelations({ id: row.id }).then(res => {
+        if (res.data.range_points) {
+          areaRef.value.setPonits(res.data.range_points)
+        }
+        else {
+          areaRef.value.setPonits()
+        }
+      })
+      playerVideo()
+    }
   }
 }
 defineExpose({
   initDialog,
 })
 
-const cancel = () => {
-  dialogFormVisible.value = false
-  resetForm()
-}
+
 // 选择的算法
 const selectModelList = ref<any[]>([])
 const selectModel = (value: any) => {
@@ -180,10 +190,12 @@
       })
     }
     else if (dataForm.value.mode === '2') {
+      // console.log(JSON.stringify(areaRef.value.getPoints()), 'JSON.stringify(areaRef.value.getPoints())')
       // 场景
       updateSceneRelations({
         id: dialogStatus.value === 'update' ? dataForm.value.id : res.data.id,
         scene_id: sceneList.value.filter((item: any) => item.name === dataForm.value.relation_scene_name)[0]?.id || '',
+        range_points: JSON.stringify(areaRef.value.getPoints())
       }).then(() => {
         confirm()
       })
@@ -193,6 +205,7 @@
     }
   })
 }
+
 const saveData = () => {
   // 验证
   // 1.关联算法
@@ -217,14 +230,70 @@
     }
   })
 }
+// 电子围栏恢复默认
+const resetArea = () => {
+  areaRef.value.setPonits()
+}
+// 清空电子围栏
+const clearArea = () => {
+  areaRef.value.setPonits('[]')
+}
+const webRtcServer = ref(null)
+// 视频地址
+function playerVideo() {
+  if (webRtcServer.value) {
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    console.log('销毁视频')
+  }
+  if (dataForm.value.mode !== '2' || !dataForm.value.input_stream_url) {
+    return
+  }
+  showVideo.value = true
+  setTimeout(() => {
+    nextTick(() => {
+      webRtcServer.value = new WebRtcStreamer('video-rtsp-container', 'http://127.0.0.1:8000')
+      webRtcServer.value.connect(dataForm.value.input_stream_url)
+    })
+  })
+}
+watch(() => dataForm.value.mode, (newVal) => {
+  if (newVal === '2' && dataForm.value.input_stream_url) {
+    playerVideo()
+  }
+})
+watch(() => dialogFormVisible.value, (newVal) => {
+  if (webRtcServer.value && !newVal) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+onUnmounted(() => {
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+  resetForm()
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+}
 </script>
 
 <template>
   <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body top="6vh">
-    <el-form
-      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
-      :disabled="dialogStatus === 'detail'"
-    >
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
+      :disabled="dialogStatus === 'detail'">
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="摄像头名称" prop="name">
@@ -243,7 +312,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="RTSP地址" prop="input_stream_url">
-            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" />
+            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" @blur="playerVideo" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -290,10 +359,8 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select
-              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
-              style="width: 100%;"
-            >
+            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;">
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
@@ -302,10 +369,8 @@
       <el-row v-if="dataForm.mode === '1'" :gutter="24">
         <el-col :span="18">
           <el-form-item label="算法关联" prop="relation_model_names">
-            <el-table
-              ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;"
-              height="300px" @selection-change="selectModel"
-            >
+            <el-table ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;" height="300px"
+              @selection-change="selectModel">
               <el-table-column label="算法名称" align="center" value="name">
                 <template #default="scope">
                   {{ scope.row.name }}
@@ -321,6 +386,27 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row v-show="dataForm.mode === '2'" :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="监控区域绘制" prop="">
+            <!-- 电子围栏 -->
+            <div style="border: 1px solid #000;position: relative;">
+              <draw-area ref="areaRef" :disabled="dialogStatus === 'detail'" v-show="dataForm.mode === '2'" />
+              <!--  -->
+              <video v-if="showVideo" id="video-rtsp-container" autoplay muted width="426.4" height="240"
+                style="object-fit: fill;width: 426.4px; height: 240px;position: absolute;top:0;left:0;z-index: 0;" />
+            </div>
+            <div v-if="dialogStatus !== 'detail'" style="margin-left: 15px;height: 240px;">
+              <div><el-button type="primary" @click="resetArea">恢复默认</el-button></div>
+              <div style="margin-top: 15px;width: 100%;" @click="clearArea"><el-button
+                  style="margin: 0 auto;">清空</el-button>
+              </div>
+
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
     </el-form>
     <template #footer>
       <div class="dialog-footer">
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
index b0c40cb..d6e05a9 100644
--- a/src/views/page/device/components/drawArea.vue
+++ b/src/views/page/device/components/drawArea.vue
@@ -5,30 +5,46 @@
  -->
 
 <script lang="ts" setup name="DrawArea">
-// const props = defineProps({
-//   width: {
-//     type: Number,
-//     required: true,
-//   },
-//   height: {
-//     type: Number,
-//     required: true,
-//   },
-// })
+import { HtmlHTMLAttributes } from 'vue'
 
+const $props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: Number,
+    default: 426.4
+  },
+  height: {
+    type: Number,
+    default: 240
+  }
+})
 const points = ref([
-  { x: 50, y: 50 },
-  { x: 480, y: 50 },
-  { x: 480, y: 250 },
-  { x: 50, y: 250 },
+  { x: 30, y: 30 },
+  { x: 395, y: 30 },
+  { x: 395, y: 210 },
+  { x: 30, y: 210 },
 ])
-onMounted(() => {
-  const canvas = document.getElementById('myCanvas')
-  const container = document.getElementById('draw-area')
+const elementId = ref(`${new Date().getTime()}`)
+const setSize = () => {
+  const container = document.getElementById(`${elementId.value}-container`) as HTMLElement
+  container.style.width = `${$props.width}px`
+  container.style.height = `${$props.height}px`
+  const canvas = document.getElementById(`${elementId.value}-canvas`) as HTMLCanvasElement
+  canvas.width = $props.width
+  canvas.height = $props.height
+}
+const initDraw = () => {
+  const canvas = document.getElementById(`${elementId.value}-canvas`)
+  const container = document.getElementById(`${elementId.value}-container`)
   const ctx = canvas.getContext('2d')
+  // console.log(canvas, points.value, 'canvas')
   ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
   // 初始位置
   function draw() {
+    if(points.value.length !== 4) { return}
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.beginPath()
     ctx.moveTo(points.value[0].x, points.value[0].y)
@@ -42,10 +58,13 @@
   }
 
   function drag(e, pointIndex) {
+    if ($props.disabled) {
+      return true
+    }
     e = e || window.event
     e.preventDefault()
     var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
-    console.log(mousePos, 'mousePos')
+    // console.log(mousePos, 'mousePos')
     // 限制在指定区域内
     if (mousePos.x < 0) {
       mousePos.x = 0
@@ -65,6 +84,9 @@
   }
 
   function addDragEvents() {
+    // if ($props.disabled) {
+    //   return true
+    // }
     var dragEvents = {
       dragStart(e) {
         e = e || window.event
@@ -93,6 +115,12 @@
     addDragEvents()
   }
   init()
+}
+onMounted(() => {
+  setSize()
+  setTimeout(() => {
+    initDraw()
+  }, 100);
 })
 
 const style = ref([
@@ -115,6 +143,10 @@
 ])
 
 watch(() => points.value, () => {
+  if(points.value.length !== 4) {
+    style.value = []
+   return
+  }
   style.value = [
     {
       top: `${points.value[0].y - 5}px`,
@@ -136,16 +168,56 @@
 }, {
   deep: true,
 })
+const getPoints = () => {
+  return points.value.map((item) => ([item.x / $props.width, item.y / $props.height]))
+}
+const setPonits = (data) => {
+  if (!data) {
+    points.value = [
+      { x: 30, y: 30 },
+      { x: 395, y: 30 },
+      { x: 395, y: 210 },
+      { x: 30, y: 210 },
+    ]
+    initDraw()
+    return
+  }
+  const pointsArr = JSON.parse(data)
+  points.value = pointsArr.map((item: any) => ({
+    x: Number(item[0]) * $props.width,
+    y: Number(item[1]) * $props.height,
+  }))
+  initDraw()
+}
+defineExpose({
+  points,
+  getPoints,
+  setPonits
+})
+watch([() => $props.width, $props.height], () => {
+  //
+  // console.log(document.getElementById('myCanvas'))
+  // console.log($props.width, $props.height, '123')
+}, {
+  deep: true,
+  immediate: true
+})
 </script>
 
 <template>
-  <div style="width: 533px;height: 300px;">
-    <canvas id="myCanvas" width="533" height="300" class="canvans" />
-    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  <div :style="{ width: `${$props.width}px`, height: `${$props.height}px`, position: 'relative' }"
+    :id="`${elementId}-container`">
+    <canvas :id="`${elementId}-canvas`" :width="$props.width" :height="$props.height" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :class="$props.disabled ? 'no' : ''"
+      :style="style[index]" />
   </div>
 </template>
 
 <style scoped>
+#draw-area {
+  /* border: 1px solid #000; */
+}
+
 .canvans {
   padding: 0;
   margin: 0;
@@ -174,5 +246,12 @@
   &:hover {
     cursor: move;
   }
+
+}
+
+.no {
+  &:hover {
+    cursor: default !important;
+  }
 }
 </style>
diff --git a/src/views/page/sence/components/addDialog.vue b/src/views/page/sence/components/addDialog.vue
index 4ec1d64..c758b35 100644
--- a/src/views/page/sence/components/addDialog.vue
+++ b/src/views/page/sence/components/addDialog.vue
@@ -35,7 +35,7 @@
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
-  console.log(dialogStatusValue, 'dialogStatusValue')
+  // console.log(dialogStatusValue, 'dialogStatusValue')
   if (dialogStatusValue === 'create') {
     resetForm()
   }

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
diff --git a/src/layouts/components/Tools/pushConfig.vue b/src/layouts/components/Tools/pushConfig.vue
new file mode 100644
index 0000000..002b32e
--- /dev/null
+++ b/src/layouts/components/Tools/pushConfig.vue
@@ -0,0 +1,156 @@
+<!-- 配置下发弹窗 -->
+<script lang="ts" setup name="PushConfig">
+import axios from 'axios'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getConfig, pushConfig } from '@/api/page/control'
+const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
+const dataFormRef = ref<FormInstance>()
+// 表单对象
+const dataForm = ref({
+  push_url: '', // 地址
+  push_interval: '', // 间隔
+  push_type: '', // 类型
+})
+function validateURL(url: string) {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+const validateIp = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('地址不能为空'))
+  }
+  else {
+    if (validateURL(value)) {
+      callback()
+    }
+    else {
+      callback(new Error('地址不合法'))
+    }
+    callback()
+  }
+}
+const validateNumber = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback()
+  }
+  else {
+    if (Number(value) < 0) {
+      callback(new Error('请输入大于等于0的数字'))
+    }
+    else {
+      callback()
+    }
+    callback()
+  }
+}
+// 校验规则
+const rules: FormRules = reactive({
+  push_type: [{ required: true, message: '推送类型必选', trigger: ['blur', 'change'] }],
+  push_url: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
+  push_interval: [{ validator: validateNumber, trigger: ['blur', 'change'] }],
+})// 前端校验规则
+// 弹窗初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+  resetForm()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+  })
+}
+
+defineExpose({ initDialog })
+
+// 重置表单
+function resetForm() {
+  // console.log(dataForm.value)
+  dataForm.value.push_url = ''
+  dataForm.value.push_interval = ''
+  dataForm.value.push_type = ''
+}
+// 保存数据
+function saveData() {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      ElMessageBox.confirm(
+        `确认推送配置吗？`,
+        '提示',
+        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+      ).then(() => {
+        pushConfig(dataForm.value).then((res) => {
+          ElMessage.success('操作成功')
+          dialogFormVisible.value = false
+        })
+      })
+
+    }
+  })
+}
+const pushList = ref<any[]>([])
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  pushList.value = res.data.push_type
+})
+// 监听类型 获取之前的配置
+watch(() => dataForm.value.push_type, (newVal) => {
+  if (newVal) {
+    getConfig().then(res => {
+      const current = res.data.filter((item: any) => String(item.push_type) === newVal)
+      if (current.length) {
+        ElMessageBox.confirm(
+          `查询到上一次下发配置内容，是否填充到当前？`,
+          '提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+        ).then(() => {
+          dataForm.value.push_url = current[0].push_url
+          dataForm.value.push_interval = current[0].push_interval
+        })
+
+      }
+    })
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="推送配置" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-form-item label="推送类型" prop="push_type">
+        <el-select v-model="dataForm.push_type" placeholder="推送类型" clearable class="select" style="width: 100%;"
+          @change="changeType">
+          <el-option v-for="item in pushList" :key="item.value" :value="item.value" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送地址" prop="push_url">
+        <el-input v-model.trim="dataForm.push_url" type="text" placeholder="必填" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="推送间隔" prop="push_interval">
+        <el-input v-model.trim="dataForm.push_interval" type="number" :step="10" controls-position="right"
+          style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index ff9abc1..a539195 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -5,10 +5,10 @@
  -->
 <script lang="ts" setup name="DeviceManageEdit">
 import { ElMessage, type FormRules } from 'element-plus'
-import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 import { getSceneAll } from '@/api/page/scene'
 import { getModelAll } from '@/api/page/model'
-import { addDevice, getModelRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import { addDevice, getModelRelations, getSceneRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import drawArea from './drawArea.vue'
 const emits = defineEmits(['refresh'])
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -49,11 +49,13 @@
 const sceneList = ref<any[]>([])
 const modelList = ref<any[]>([])
 const modelAllList = ref<any[]>([])
-
+const areaRef = ref()
+const showVideo = ref(false)
 // 初始化对话框
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
+  showVideo.value = false
   if (dialogStatusValue === 'create') {
     resetForm()
     // nextTick(() => {
@@ -102,16 +104,24 @@
         })
       })
     }
+    else if (dataForm.value.mode === '2') {
+      getSceneRelations({ id: row.id }).then(res => {
+        if (res.data.range_points) {
+          areaRef.value.setPonits(res.data.range_points)
+        }
+        else {
+          areaRef.value.setPonits()
+        }
+      })
+      playerVideo()
+    }
   }
 }
 defineExpose({
   initDialog,
 })
 
-const cancel = () => {
-  dialogFormVisible.value = false
-  resetForm()
-}
+
 // 选择的算法
 const selectModelList = ref<any[]>([])
 const selectModel = (value: any) => {
@@ -180,10 +190,12 @@
       })
     }
     else if (dataForm.value.mode === '2') {
+      // console.log(JSON.stringify(areaRef.value.getPoints()), 'JSON.stringify(areaRef.value.getPoints())')
       // 场景
       updateSceneRelations({
         id: dialogStatus.value === 'update' ? dataForm.value.id : res.data.id,
         scene_id: sceneList.value.filter((item: any) => item.name === dataForm.value.relation_scene_name)[0]?.id || '',
+        range_points: JSON.stringify(areaRef.value.getPoints())
       }).then(() => {
         confirm()
       })
@@ -193,6 +205,7 @@
     }
   })
 }
+
 const saveData = () => {
   // 验证
   // 1.关联算法
@@ -217,14 +230,70 @@
     }
   })
 }
+// 电子围栏恢复默认
+const resetArea = () => {
+  areaRef.value.setPonits()
+}
+// 清空电子围栏
+const clearArea = () => {
+  areaRef.value.setPonits('[]')
+}
+const webRtcServer = ref(null)
+// 视频地址
+function playerVideo() {
+  if (webRtcServer.value) {
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    console.log('销毁视频')
+  }
+  if (dataForm.value.mode !== '2' || !dataForm.value.input_stream_url) {
+    return
+  }
+  showVideo.value = true
+  setTimeout(() => {
+    nextTick(() => {
+      webRtcServer.value = new WebRtcStreamer('video-rtsp-container', 'http://127.0.0.1:8000')
+      webRtcServer.value.connect(dataForm.value.input_stream_url)
+    })
+  })
+}
+watch(() => dataForm.value.mode, (newVal) => {
+  if (newVal === '2' && dataForm.value.input_stream_url) {
+    playerVideo()
+  }
+})
+watch(() => dialogFormVisible.value, (newVal) => {
+  if (webRtcServer.value && !newVal) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+onUnmounted(() => {
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+  resetForm()
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+}
 </script>
 
 <template>
   <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body top="6vh">
-    <el-form
-      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
-      :disabled="dialogStatus === 'detail'"
-    >
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
+      :disabled="dialogStatus === 'detail'">
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="摄像头名称" prop="name">
@@ -243,7 +312,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="RTSP地址" prop="input_stream_url">
-            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" />
+            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" @blur="playerVideo" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -290,10 +359,8 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select
-              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
-              style="width: 100%;"
-            >
+            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;">
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
@@ -302,10 +369,8 @@
       <el-row v-if="dataForm.mode === '1'" :gutter="24">
         <el-col :span="18">
           <el-form-item label="算法关联" prop="relation_model_names">
-            <el-table
-              ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;"
-              height="300px" @selection-change="selectModel"
-            >
+            <el-table ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;" height="300px"
+              @selection-change="selectModel">
               <el-table-column label="算法名称" align="center" value="name">
                 <template #default="scope">
                   {{ scope.row.name }}
@@ -321,6 +386,27 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row v-show="dataForm.mode === '2'" :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="监控区域绘制" prop="">
+            <!-- 电子围栏 -->
+            <div style="border: 1px solid #000;position: relative;">
+              <draw-area ref="areaRef" :disabled="dialogStatus === 'detail'" v-show="dataForm.mode === '2'" />
+              <!--  -->
+              <video v-if="showVideo" id="video-rtsp-container" autoplay muted width="426.4" height="240"
+                style="object-fit: fill;width: 426.4px; height: 240px;position: absolute;top:0;left:0;z-index: 0;" />
+            </div>
+            <div v-if="dialogStatus !== 'detail'" style="margin-left: 15px;height: 240px;">
+              <div><el-button type="primary" @click="resetArea">恢复默认</el-button></div>
+              <div style="margin-top: 15px;width: 100%;" @click="clearArea"><el-button
+                  style="margin: 0 auto;">清空</el-button>
+              </div>
+
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
     </el-form>
     <template #footer>
       <div class="dialog-footer">
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
index b0c40cb..d6e05a9 100644
--- a/src/views/page/device/components/drawArea.vue
+++ b/src/views/page/device/components/drawArea.vue
@@ -5,30 +5,46 @@
  -->
 
 <script lang="ts" setup name="DrawArea">
-// const props = defineProps({
-//   width: {
-//     type: Number,
-//     required: true,
-//   },
-//   height: {
-//     type: Number,
-//     required: true,
-//   },
-// })
+import { HtmlHTMLAttributes } from 'vue'
 
+const $props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: Number,
+    default: 426.4
+  },
+  height: {
+    type: Number,
+    default: 240
+  }
+})
 const points = ref([
-  { x: 50, y: 50 },
-  { x: 480, y: 50 },
-  { x: 480, y: 250 },
-  { x: 50, y: 250 },
+  { x: 30, y: 30 },
+  { x: 395, y: 30 },
+  { x: 395, y: 210 },
+  { x: 30, y: 210 },
 ])
-onMounted(() => {
-  const canvas = document.getElementById('myCanvas')
-  const container = document.getElementById('draw-area')
+const elementId = ref(`${new Date().getTime()}`)
+const setSize = () => {
+  const container = document.getElementById(`${elementId.value}-container`) as HTMLElement
+  container.style.width = `${$props.width}px`
+  container.style.height = `${$props.height}px`
+  const canvas = document.getElementById(`${elementId.value}-canvas`) as HTMLCanvasElement
+  canvas.width = $props.width
+  canvas.height = $props.height
+}
+const initDraw = () => {
+  const canvas = document.getElementById(`${elementId.value}-canvas`)
+  const container = document.getElementById(`${elementId.value}-container`)
   const ctx = canvas.getContext('2d')
+  // console.log(canvas, points.value, 'canvas')
   ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
   // 初始位置
   function draw() {
+    if(points.value.length !== 4) { return}
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.beginPath()
     ctx.moveTo(points.value[0].x, points.value[0].y)
@@ -42,10 +58,13 @@
   }
 
   function drag(e, pointIndex) {
+    if ($props.disabled) {
+      return true
+    }
     e = e || window.event
     e.preventDefault()
     var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
-    console.log(mousePos, 'mousePos')
+    // console.log(mousePos, 'mousePos')
     // 限制在指定区域内
     if (mousePos.x < 0) {
       mousePos.x = 0
@@ -65,6 +84,9 @@
   }
 
   function addDragEvents() {
+    // if ($props.disabled) {
+    //   return true
+    // }
     var dragEvents = {
       dragStart(e) {
         e = e || window.event
@@ -93,6 +115,12 @@
     addDragEvents()
   }
   init()
+}
+onMounted(() => {
+  setSize()
+  setTimeout(() => {
+    initDraw()
+  }, 100);
 })
 
 const style = ref([
@@ -115,6 +143,10 @@
 ])
 
 watch(() => points.value, () => {
+  if(points.value.length !== 4) {
+    style.value = []
+   return
+  }
   style.value = [
     {
       top: `${points.value[0].y - 5}px`,
@@ -136,16 +168,56 @@
 }, {
   deep: true,
 })
+const getPoints = () => {
+  return points.value.map((item) => ([item.x / $props.width, item.y / $props.height]))
+}
+const setPonits = (data) => {
+  if (!data) {
+    points.value = [
+      { x: 30, y: 30 },
+      { x: 395, y: 30 },
+      { x: 395, y: 210 },
+      { x: 30, y: 210 },
+    ]
+    initDraw()
+    return
+  }
+  const pointsArr = JSON.parse(data)
+  points.value = pointsArr.map((item: any) => ({
+    x: Number(item[0]) * $props.width,
+    y: Number(item[1]) * $props.height,
+  }))
+  initDraw()
+}
+defineExpose({
+  points,
+  getPoints,
+  setPonits
+})
+watch([() => $props.width, $props.height], () => {
+  //
+  // console.log(document.getElementById('myCanvas'))
+  // console.log($props.width, $props.height, '123')
+}, {
+  deep: true,
+  immediate: true
+})
 </script>
 
 <template>
-  <div style="width: 533px;height: 300px;">
-    <canvas id="myCanvas" width="533" height="300" class="canvans" />
-    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  <div :style="{ width: `${$props.width}px`, height: `${$props.height}px`, position: 'relative' }"
+    :id="`${elementId}-container`">
+    <canvas :id="`${elementId}-canvas`" :width="$props.width" :height="$props.height" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :class="$props.disabled ? 'no' : ''"
+      :style="style[index]" />
   </div>
 </template>
 
 <style scoped>
+#draw-area {
+  /* border: 1px solid #000; */
+}
+
 .canvans {
   padding: 0;
   margin: 0;
@@ -174,5 +246,12 @@
   &:hover {
     cursor: move;
   }
+
+}
+
+.no {
+  &:hover {
+    cursor: default !important;
+  }
 }
 </style>
diff --git a/src/views/page/sence/components/addDialog.vue b/src/views/page/sence/components/addDialog.vue
index 4ec1d64..c758b35 100644
--- a/src/views/page/sence/components/addDialog.vue
+++ b/src/views/page/sence/components/addDialog.vue
@@ -35,7 +35,7 @@
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
-  console.log(dialogStatusValue, 'dialogStatusValue')
+  // console.log(dialogStatusValue, 'dialogStatusValue')
   if (dialogStatusValue === 'create') {
     resetForm()
   }
diff --git a/src/views/page/video/components/getPlayer.vue b/src/views/page/video/components/getPlayer.vue
index 95b8a61..0ad6539 100644
--- a/src/views/page/video/components/getPlayer.vue
+++ b/src/views/page/video/components/getPlayer.vue
@@ -5,6 +5,9 @@
  -->
 <script lang="ts" setup name="VideoPlayer">
 import axios from 'axios'
+import { getSceneList } from '@/api/page/scene'
+import { getSceneRelations } from '@/api/page/device'
+import drawArea from '../../device/components/drawArea.vue'
 const $props = defineProps({
   id: {
     type: String,
@@ -14,11 +17,16 @@
     type: String,
     default: '',
   },
+  sence: {
+    type: String,
+    default: '',
+  }
 })
 const publicPath = window.location.href.split('#')[0]
 const src = ref(`${publicPath}/image/normal.png`)
 const webSocket = ref()
 watch(() => $props.id, (newVal) => {
+  // console.log(newVal, 'newValid')
   if (!newVal) {
     src.value = `${publicPath}/image/nodata.png`
     return
@@ -50,12 +58,67 @@
   deep: true,
   immediate: true,
 })
+const elementId = ref(`ele-${new Date().getTime()}`)
+const timer = ref()
+const showArea = ref(false)
+const drawRef = ref()
+const drawWidth = ref(0)
+const drawHieght = ref(0)
+watch(() => $props.sence, (newVal) => {
+  if (newVal) {
+    if (timer.value) {
+      clearInterval(timer.value)
+      timer.value = null
+    }
+    timer.value = setInterval(() => {
+      // console.log(newVal, 'newValsence')
+      // 判断视频状态
+      if ($props.status !== '在线' || !$props.id) {
+        return
+      }
+      // console.log(src.value, 'src.value')
+      const img = document.getElementById(elementId.value) as HTMLImageElement
+      console.log(img.complete, 'img.complete')
+      if (!img.complete || src.value.includes('loading') || src.value.includes('error') || src.value.includes('nodata') || src.value.includes('normal')) {
+        return
+      }
+      clearInterval(timer.value)
+      timer.value = null
+      // 画框
+      // getSceneList({ offset: 1, limit: 999 }).then(res => {
+      //   const current = res.data.items.filter((item: any) => item.name === newVal)[0] || {}
+      //   if (current.name) {
+      //     console.log(current, 'current')
+
+      //   }
+      // })
+      getSceneRelations({ id: $props.id }).then(res => {
+        // console.log(res.data, '框的数据')
+        const img = document.getElementById(elementId.value)
+        if (img) {
+          if(!img.offsetWidth) { return }
+          drawWidth.value = img.offsetWidth
+          drawHieght.value = img.offsetHeight
+        }
+        showArea.value = true
+        setTimeout(() => {
+          drawRef.value.setPonits(res.data.range_points)
+        }, 1000)
+      })
+    }, 1500);
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 onUnmounted(() => {
   if (webSocket.value) {
     webSocket.value.close()
     webSocket.value = ''
     src.value = `${publicPath}/image/normal.png`
   }
+  clearInterval(timer.value)
+  timer.value = null
 })
 
 const errorImage = () => {
@@ -65,9 +128,12 @@
 </script>
 
 <template>
-  <img
-    :src="src" style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" alt="视频流"
-    object-fit="cover" @error="errorImage"
-  >
+  <div style="width: 100%;height: 100%;position: relative;">
+    <img :id="elementId" :src="src" style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" alt="视频流"
+      object-fit="cover" @error="errorImage">
+    <drawArea v-if="showArea" :width="drawWidth" :height="drawHieght" ref="drawRef"
+      style="position: absolute; left: 0; top: 0;" />
+  </div>
+
   <!-- <el-image style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" :src="src" fit="fill" /> -->
 </template>

diff --git a/public/config/config.json b/public/config/config.json
index 935dfd6..f4aab33 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -1,7 +1,29 @@
 {
-  "title":"智能一体机管理系统",
-  "baseUrl": "http://192.168.10.236:9000",
+  "title": "智能一体机管理系统",
+  "baseUrl": "http://192.168.166.127:9000",
   "playerType": "get",
   "version": "1.0.0",
-  "node": "16.18.1"
+  "node": "16.18.1",
+  "push_type": [
+    {
+      "name": "甲烷浓度推送",
+      "value": "1"
+    },
+    {
+      "name": "模型识别结果推送",
+      "value": "2"
+    },
+    {
+      "name": "报警记录推送",
+      "value": "3"
+    },
+    {
+      "name": "有害气体浓度推送",
+      "value": "4"
+    },
+    {
+      "name": "心率血氧数据推送",
+      "value": "5"
+    }
+  ]
 }
diff --git a/src/api/page/control.ts b/src/api/page/control.ts
index f98a662..ea910f3 100644
--- a/src/api/page/control.ts
+++ b/src/api/page/control.ts
@@ -7,3 +7,18 @@
     method: 'get',
   })
 }
+// 下发配置
+export function pushConfig(data: any) {
+  return request({
+    url: '/api/push/set_push_config',
+    method: 'post',
+    data
+  })
+}
+// 获取
+export function getConfig() {
+  return request({
+    url: '/api/push/list',
+    method: 'get',
+  })
+}
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
index 40d80a4..4cfd8df 100644
--- a/src/api/page/device.ts
+++ b/src/api/page/device.ts
@@ -61,7 +61,14 @@
 // 更新场景和摄像头的绑定
 export function updateSceneRelations(data: any) {
   return request({
-    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}`,
+    url: `/api/device_scene_relation/update_by_device?device_id=${data.id}&scene_id=${data.scene_id}&range_points=${data.range_points}`,
     method: 'post',
   })
 }
+// 获取场景和摄像头的绑定
+export function getSceneRelations(data: any) {
+  return request({
+    url: `/api/device_scene_relation/get_by_device?device_id=${data.id}`,
+    method: 'get',
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1c34de2..ec769ff 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ResetPwd from './resetPwd.vue'
+import pushConfig from './pushConfig.vue'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
@@ -90,15 +91,30 @@
     })
   })
 }
+// 配置下发
+const configRef = ref()
+const setting = () => {
+  configRef.value.initDialog()
+}
 </script>
 
 <template>
   <div class="tools">
+    <pushConfig ref="configRef" />
     <div class="buttons">
+      <span class="item" @click="setting">
+        <el-tooltip content="下发配置" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:setting" />
+          </el-icon>
+        </el-tooltip>
+      </span>
       <span class="item" @click="restart">
-        <el-icon>
-          <svg-icon name="icon-restart" />
-        </el-icon>
+        <el-tooltip content="重启" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="icon-restart" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
@@ -106,19 +122,21 @@
         </el-icon>
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
+          </el-icon>
+        </el-tooltip>
       </span>
       <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <el-tooltip content="刷新页面" placement="bottom" effect="light">
+          <el-icon>
+            <svg-icon name="ep:refresh-right" />
+          </el-icon>
+        </el-tooltip>
       </span>
-      <span
-        v-if="settingsStore.toolbar.enableColorScheme" class="item"
-        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"
-      >
+      <span v-if="settingsStore.toolbar.enableColorScheme" class="item"
+        @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
           <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
           <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
diff --git a/src/layouts/components/Tools/pushConfig.vue b/src/layouts/components/Tools/pushConfig.vue
new file mode 100644
index 0000000..002b32e
--- /dev/null
+++ b/src/layouts/components/Tools/pushConfig.vue
@@ -0,0 +1,156 @@
+<!-- 配置下发弹窗 -->
+<script lang="ts" setup name="PushConfig">
+import axios from 'axios'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getConfig, pushConfig } from '@/api/page/control'
+const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
+const dataFormRef = ref<FormInstance>()
+// 表单对象
+const dataForm = ref({
+  push_url: '', // 地址
+  push_interval: '', // 间隔
+  push_type: '', // 类型
+})
+function validateURL(url: string) {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+const validateIp = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('地址不能为空'))
+  }
+  else {
+    if (validateURL(value)) {
+      callback()
+    }
+    else {
+      callback(new Error('地址不合法'))
+    }
+    callback()
+  }
+}
+const validateNumber = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback()
+  }
+  else {
+    if (Number(value) < 0) {
+      callback(new Error('请输入大于等于0的数字'))
+    }
+    else {
+      callback()
+    }
+    callback()
+  }
+}
+// 校验规则
+const rules: FormRules = reactive({
+  push_type: [{ required: true, message: '推送类型必选', trigger: ['blur', 'change'] }],
+  push_url: [{ required: true, validator: validateIp, trigger: ['blur', 'change'] }],
+  push_interval: [{ validator: validateNumber, trigger: ['blur', 'change'] }],
+})// 前端校验规则
+// 弹窗初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+  resetForm()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+  })
+}
+
+defineExpose({ initDialog })
+
+// 重置表单
+function resetForm() {
+  // console.log(dataForm.value)
+  dataForm.value.push_url = ''
+  dataForm.value.push_interval = ''
+  dataForm.value.push_type = ''
+}
+// 保存数据
+function saveData() {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      ElMessageBox.confirm(
+        `确认推送配置吗？`,
+        '提示',
+        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+      ).then(() => {
+        pushConfig(dataForm.value).then((res) => {
+          ElMessage.success('操作成功')
+          dialogFormVisible.value = false
+        })
+      })
+
+    }
+  })
+}
+const pushList = ref<any[]>([])
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  pushList.value = res.data.push_type
+})
+// 监听类型 获取之前的配置
+watch(() => dataForm.value.push_type, (newVal) => {
+  if (newVal) {
+    getConfig().then(res => {
+      const current = res.data.filter((item: any) => String(item.push_type) === newVal)
+      if (current.length) {
+        ElMessageBox.confirm(
+          `查询到上一次下发配置内容，是否填充到当前？`,
+          '提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
+        ).then(() => {
+          dataForm.value.push_url = current[0].push_url
+          dataForm.value.push_interval = current[0].push_interval
+        })
+
+      }
+    })
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="推送配置" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-form-item label="推送类型" prop="push_type">
+        <el-select v-model="dataForm.push_type" placeholder="推送类型" clearable class="select" style="width: 100%;"
+          @change="changeType">
+          <el-option v-for="item in pushList" :key="item.value" :value="item.value" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送地址" prop="push_url">
+        <el-input v-model.trim="dataForm.push_url" type="text" placeholder="必填" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="推送间隔" prop="push_interval">
+        <el-input v-model.trim="dataForm.push_interval" type="number" :step="10" controls-position="right"
+          style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
index ff9abc1..a539195 100644
--- a/src/views/page/device/components/addDialog.vue
+++ b/src/views/page/device/components/addDialog.vue
@@ -5,10 +5,10 @@
  -->
 <script lang="ts" setup name="DeviceManageEdit">
 import { ElMessage, type FormRules } from 'element-plus'
-import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 import { getSceneAll } from '@/api/page/scene'
 import { getModelAll } from '@/api/page/model'
-import { addDevice, getModelRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import { addDevice, getModelRelations, getSceneRelations, updateDevice, updateModelRelations, updateSceneRelations } from '@/api/page/device'
+import drawArea from './drawArea.vue'
 const emits = defineEmits(['refresh'])
 const dataFormRef = ref()
 const dialogFormVisible = ref(false) // 对话框是否显示
@@ -49,11 +49,13 @@
 const sceneList = ref<any[]>([])
 const modelList = ref<any[]>([])
 const modelAllList = ref<any[]>([])
-
+const areaRef = ref()
+const showVideo = ref(false)
 // 初始化对话框
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
+  showVideo.value = false
   if (dialogStatusValue === 'create') {
     resetForm()
     // nextTick(() => {
@@ -102,16 +104,24 @@
         })
       })
     }
+    else if (dataForm.value.mode === '2') {
+      getSceneRelations({ id: row.id }).then(res => {
+        if (res.data.range_points) {
+          areaRef.value.setPonits(res.data.range_points)
+        }
+        else {
+          areaRef.value.setPonits()
+        }
+      })
+      playerVideo()
+    }
   }
 }
 defineExpose({
   initDialog,
 })
 
-const cancel = () => {
-  dialogFormVisible.value = false
-  resetForm()
-}
+
 // 选择的算法
 const selectModelList = ref<any[]>([])
 const selectModel = (value: any) => {
@@ -180,10 +190,12 @@
       })
     }
     else if (dataForm.value.mode === '2') {
+      // console.log(JSON.stringify(areaRef.value.getPoints()), 'JSON.stringify(areaRef.value.getPoints())')
       // 场景
       updateSceneRelations({
         id: dialogStatus.value === 'update' ? dataForm.value.id : res.data.id,
         scene_id: sceneList.value.filter((item: any) => item.name === dataForm.value.relation_scene_name)[0]?.id || '',
+        range_points: JSON.stringify(areaRef.value.getPoints())
       }).then(() => {
         confirm()
       })
@@ -193,6 +205,7 @@
     }
   })
 }
+
 const saveData = () => {
   // 验证
   // 1.关联算法
@@ -217,14 +230,70 @@
     }
   })
 }
+// 电子围栏恢复默认
+const resetArea = () => {
+  areaRef.value.setPonits()
+}
+// 清空电子围栏
+const clearArea = () => {
+  areaRef.value.setPonits('[]')
+}
+const webRtcServer = ref(null)
+// 视频地址
+function playerVideo() {
+  if (webRtcServer.value) {
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    console.log('销毁视频')
+  }
+  if (dataForm.value.mode !== '2' || !dataForm.value.input_stream_url) {
+    return
+  }
+  showVideo.value = true
+  setTimeout(() => {
+    nextTick(() => {
+      webRtcServer.value = new WebRtcStreamer('video-rtsp-container', 'http://127.0.0.1:8000')
+      webRtcServer.value.connect(dataForm.value.input_stream_url)
+    })
+  })
+}
+watch(() => dataForm.value.mode, (newVal) => {
+  if (newVal === '2' && dataForm.value.input_stream_url) {
+    playerVideo()
+  }
+})
+watch(() => dialogFormVisible.value, (newVal) => {
+  if (webRtcServer.value && !newVal) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+onUnmounted(() => {
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+})
+const cancel = () => {
+  dialogFormVisible.value = false
+  resetForm()
+  if (webRtcServer.value) {
+    console.log('销毁视频')
+    webRtcServer.value.disconnect()
+    webRtcServer.value = null
+    showVideo.value = false
+  }
+}
 </script>
 
 <template>
   <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body top="6vh">
-    <el-form
-      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
-      :disabled="dialogStatus === 'detail'"
-    >
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
+      :disabled="dialogStatus === 'detail'">
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="摄像头名称" prop="name">
@@ -243,7 +312,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="RTSP地址" prop="input_stream_url">
-            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" />
+            <el-input v-model.trim="dataForm.input_stream_url" type="text" placeholder="必填" @blur="playerVideo" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -290,10 +359,8 @@
       <el-row v-if="dataForm.mode === '2'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="业务场景" prop="relation_scene_name">
-            <el-select
-              v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
-              style="width: 100%;"
-            >
+            <el-select v-model="dataForm.relation_scene_name" placeholder="业务场景" clearable class="select"
+              style="width: 100%;">
               <el-option v-for="item in sceneList" :key="item.id" :value="item.name" :label="item.name" />
             </el-select>
           </el-form-item>
@@ -302,10 +369,8 @@
       <el-row v-if="dataForm.mode === '1'" :gutter="24">
         <el-col :span="18">
           <el-form-item label="算法关联" prop="relation_model_names">
-            <el-table
-              ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;"
-              height="300px" @selection-change="selectModel"
-            >
+            <el-table ref="multipleTableRef" :data="modelList" border stripe style="width: 100%;" height="300px"
+              @selection-change="selectModel">
               <el-table-column label="算法名称" align="center" value="name">
                 <template #default="scope">
                   {{ scope.row.name }}
@@ -321,6 +386,27 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row v-show="dataForm.mode === '2'" :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="监控区域绘制" prop="">
+            <!-- 电子围栏 -->
+            <div style="border: 1px solid #000;position: relative;">
+              <draw-area ref="areaRef" :disabled="dialogStatus === 'detail'" v-show="dataForm.mode === '2'" />
+              <!--  -->
+              <video v-if="showVideo" id="video-rtsp-container" autoplay muted width="426.4" height="240"
+                style="object-fit: fill;width: 426.4px; height: 240px;position: absolute;top:0;left:0;z-index: 0;" />
+            </div>
+            <div v-if="dialogStatus !== 'detail'" style="margin-left: 15px;height: 240px;">
+              <div><el-button type="primary" @click="resetArea">恢复默认</el-button></div>
+              <div style="margin-top: 15px;width: 100%;" @click="clearArea"><el-button
+                  style="margin: 0 auto;">清空</el-button>
+              </div>
+
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
     </el-form>
     <template #footer>
       <div class="dialog-footer">
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
index b0c40cb..d6e05a9 100644
--- a/src/views/page/device/components/drawArea.vue
+++ b/src/views/page/device/components/drawArea.vue
@@ -5,30 +5,46 @@
  -->
 
 <script lang="ts" setup name="DrawArea">
-// const props = defineProps({
-//   width: {
-//     type: Number,
-//     required: true,
-//   },
-//   height: {
-//     type: Number,
-//     required: true,
-//   },
-// })
+import { HtmlHTMLAttributes } from 'vue'
 
+const $props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: Number,
+    default: 426.4
+  },
+  height: {
+    type: Number,
+    default: 240
+  }
+})
 const points = ref([
-  { x: 50, y: 50 },
-  { x: 480, y: 50 },
-  { x: 480, y: 250 },
-  { x: 50, y: 250 },
+  { x: 30, y: 30 },
+  { x: 395, y: 30 },
+  { x: 395, y: 210 },
+  { x: 30, y: 210 },
 ])
-onMounted(() => {
-  const canvas = document.getElementById('myCanvas')
-  const container = document.getElementById('draw-area')
+const elementId = ref(`${new Date().getTime()}`)
+const setSize = () => {
+  const container = document.getElementById(`${elementId.value}-container`) as HTMLElement
+  container.style.width = `${$props.width}px`
+  container.style.height = `${$props.height}px`
+  const canvas = document.getElementById(`${elementId.value}-canvas`) as HTMLCanvasElement
+  canvas.width = $props.width
+  canvas.height = $props.height
+}
+const initDraw = () => {
+  const canvas = document.getElementById(`${elementId.value}-canvas`)
+  const container = document.getElementById(`${elementId.value}-container`)
   const ctx = canvas.getContext('2d')
+  // console.log(canvas, points.value, 'canvas')
   ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
   // 初始位置
   function draw() {
+    if(points.value.length !== 4) { return}
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.beginPath()
     ctx.moveTo(points.value[0].x, points.value[0].y)
@@ -42,10 +58,13 @@
   }
 
   function drag(e, pointIndex) {
+    if ($props.disabled) {
+      return true
+    }
     e = e || window.event
     e.preventDefault()
     var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
-    console.log(mousePos, 'mousePos')
+    // console.log(mousePos, 'mousePos')
     // 限制在指定区域内
     if (mousePos.x < 0) {
       mousePos.x = 0
@@ -65,6 +84,9 @@
   }
 
   function addDragEvents() {
+    // if ($props.disabled) {
+    //   return true
+    // }
     var dragEvents = {
       dragStart(e) {
         e = e || window.event
@@ -93,6 +115,12 @@
     addDragEvents()
   }
   init()
+}
+onMounted(() => {
+  setSize()
+  setTimeout(() => {
+    initDraw()
+  }, 100);
 })
 
 const style = ref([
@@ -115,6 +143,10 @@
 ])
 
 watch(() => points.value, () => {
+  if(points.value.length !== 4) {
+    style.value = []
+   return
+  }
   style.value = [
     {
       top: `${points.value[0].y - 5}px`,
@@ -136,16 +168,56 @@
 }, {
   deep: true,
 })
+const getPoints = () => {
+  return points.value.map((item) => ([item.x / $props.width, item.y / $props.height]))
+}
+const setPonits = (data) => {
+  if (!data) {
+    points.value = [
+      { x: 30, y: 30 },
+      { x: 395, y: 30 },
+      { x: 395, y: 210 },
+      { x: 30, y: 210 },
+    ]
+    initDraw()
+    return
+  }
+  const pointsArr = JSON.parse(data)
+  points.value = pointsArr.map((item: any) => ({
+    x: Number(item[0]) * $props.width,
+    y: Number(item[1]) * $props.height,
+  }))
+  initDraw()
+}
+defineExpose({
+  points,
+  getPoints,
+  setPonits
+})
+watch([() => $props.width, $props.height], () => {
+  //
+  // console.log(document.getElementById('myCanvas'))
+  // console.log($props.width, $props.height, '123')
+}, {
+  deep: true,
+  immediate: true
+})
 </script>
 
 <template>
-  <div style="width: 533px;height: 300px;">
-    <canvas id="myCanvas" width="533" height="300" class="canvans" />
-    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  <div :style="{ width: `${$props.width}px`, height: `${$props.height}px`, position: 'relative' }"
+    :id="`${elementId}-container`">
+    <canvas :id="`${elementId}-canvas`" :width="$props.width" :height="$props.height" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :class="$props.disabled ? 'no' : ''"
+      :style="style[index]" />
   </div>
 </template>
 
 <style scoped>
+#draw-area {
+  /* border: 1px solid #000; */
+}
+
 .canvans {
   padding: 0;
   margin: 0;
@@ -174,5 +246,12 @@
   &:hover {
     cursor: move;
   }
+
+}
+
+.no {
+  &:hover {
+    cursor: default !important;
+  }
 }
 </style>
diff --git a/src/views/page/sence/components/addDialog.vue b/src/views/page/sence/components/addDialog.vue
index 4ec1d64..c758b35 100644
--- a/src/views/page/sence/components/addDialog.vue
+++ b/src/views/page/sence/components/addDialog.vue
@@ -35,7 +35,7 @@
 const initDialog = (row: any, dialogStatusValue: string) => {
   dialogStatus.value = dialogStatusValue
   dialogFormVisible.value = true
-  console.log(dialogStatusValue, 'dialogStatusValue')
+  // console.log(dialogStatusValue, 'dialogStatusValue')
   if (dialogStatusValue === 'create') {
     resetForm()
   }
diff --git a/src/views/page/video/components/getPlayer.vue b/src/views/page/video/components/getPlayer.vue
index 95b8a61..0ad6539 100644
--- a/src/views/page/video/components/getPlayer.vue
+++ b/src/views/page/video/components/getPlayer.vue
@@ -5,6 +5,9 @@
  -->
 <script lang="ts" setup name="VideoPlayer">
 import axios from 'axios'
+import { getSceneList } from '@/api/page/scene'
+import { getSceneRelations } from '@/api/page/device'
+import drawArea from '../../device/components/drawArea.vue'
 const $props = defineProps({
   id: {
     type: String,
@@ -14,11 +17,16 @@
     type: String,
     default: '',
   },
+  sence: {
+    type: String,
+    default: '',
+  }
 })
 const publicPath = window.location.href.split('#')[0]
 const src = ref(`${publicPath}/image/normal.png`)
 const webSocket = ref()
 watch(() => $props.id, (newVal) => {
+  // console.log(newVal, 'newValid')
   if (!newVal) {
     src.value = `${publicPath}/image/nodata.png`
     return
@@ -50,12 +58,67 @@
   deep: true,
   immediate: true,
 })
+const elementId = ref(`ele-${new Date().getTime()}`)
+const timer = ref()
+const showArea = ref(false)
+const drawRef = ref()
+const drawWidth = ref(0)
+const drawHieght = ref(0)
+watch(() => $props.sence, (newVal) => {
+  if (newVal) {
+    if (timer.value) {
+      clearInterval(timer.value)
+      timer.value = null
+    }
+    timer.value = setInterval(() => {
+      // console.log(newVal, 'newValsence')
+      // 判断视频状态
+      if ($props.status !== '在线' || !$props.id) {
+        return
+      }
+      // console.log(src.value, 'src.value')
+      const img = document.getElementById(elementId.value) as HTMLImageElement
+      console.log(img.complete, 'img.complete')
+      if (!img.complete || src.value.includes('loading') || src.value.includes('error') || src.value.includes('nodata') || src.value.includes('normal')) {
+        return
+      }
+      clearInterval(timer.value)
+      timer.value = null
+      // 画框
+      // getSceneList({ offset: 1, limit: 999 }).then(res => {
+      //   const current = res.data.items.filter((item: any) => item.name === newVal)[0] || {}
+      //   if (current.name) {
+      //     console.log(current, 'current')
+
+      //   }
+      // })
+      getSceneRelations({ id: $props.id }).then(res => {
+        // console.log(res.data, '框的数据')
+        const img = document.getElementById(elementId.value)
+        if (img) {
+          if(!img.offsetWidth) { return }
+          drawWidth.value = img.offsetWidth
+          drawHieght.value = img.offsetHeight
+        }
+        showArea.value = true
+        setTimeout(() => {
+          drawRef.value.setPonits(res.data.range_points)
+        }, 1000)
+      })
+    }, 1500);
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 onUnmounted(() => {
   if (webSocket.value) {
     webSocket.value.close()
     webSocket.value = ''
     src.value = `${publicPath}/image/normal.png`
   }
+  clearInterval(timer.value)
+  timer.value = null
 })
 
 const errorImage = () => {
@@ -65,9 +128,12 @@
 </script>
 
 <template>
-  <img
-    :src="src" style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" alt="视频流"
-    object-fit="cover" @error="errorImage"
-  >
+  <div style="width: 100%;height: 100%;position: relative;">
+    <img :id="elementId" :src="src" style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" alt="视频流"
+      object-fit="cover" @error="errorImage">
+    <drawArea v-if="showArea" :width="drawWidth" :height="drawHieght" ref="drawRef"
+      style="position: absolute; left: 0; top: 0;" />
+  </div>
+
   <!-- <el-image style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" :src="src" fit="fill" /> -->
 </template>
diff --git a/src/views/page/video/index.vue b/src/views/page/video/index.vue
index 1c910c7..fee6d53 100644
--- a/src/views/page/video/index.vue
+++ b/src/views/page/video/index.vue
@@ -25,7 +25,7 @@
 const resultList = ref<any[]>([])
 const offset = ref(1)
 const isFullScreen = ref(false)
-const showFull = ref({ id: '', status: '' })
+const showFull = ref({ id: '', status: '', relation_scene_name: '', })
 function changeFullScreen(row: any) {
   if (row.id) {
     showFull.value = row
@@ -121,10 +121,10 @@
   if (!row.id) {
     getDeviceList({ offset: 1, limit: 4 }).then((res) => {
       deviceList.value = res.data.items
-      showVideo.value.push(res.data.items[0] || { url: '', id: '' })
-      showVideo.value.push(res.data.items[1] || { url: '', id: '' })
-      showVideo.value.push(res.data.items[2] || { url: '', id: '' })
-      showVideo.value.push(res.data.items[3] || { url: '', id: '' })
+      showVideo.value.push(res.data.items[0] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(res.data.items[1] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(res.data.items[2] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(res.data.items[3] || { url: '', id: '', relation_scene_name: '' })
     })
     setTimeout(() => {
       fetchResultData()
@@ -241,14 +241,14 @@
       // showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
     }
     if (newVal === '二屏') {
-      showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
-      showVideo.value.push(deviceList.value[1] || { url: '', id: '' })
+      showVideo.value.push(deviceList.value[0] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(deviceList.value[1] || { url: '', id: '', relation_scene_name: '' })
     }
     else if (newVal === '四屏') {
-      showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
-      showVideo.value.push(deviceList.value[1] || { url: '', id: '' })
-      showVideo.value.push(deviceList.value[2] || { url: '', id: '' })
-      showVideo.value.push(deviceList.value[3] || { url: '', id: '' })
+      showVideo.value.push(deviceList.value[0] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(deviceList.value[1] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(deviceList.value[2] || { url: '', id: '', relation_scene_name: '' })
+      showVideo.value.push(deviceList.value[3] || { url: '', id: '', relation_scene_name: '' })
       isFullScreen.value = false
       resultList.value = []
       fetchResultData()
@@ -283,11 +283,8 @@
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    v-for="(item, index) in deviceList"
-                    :key="item.id"
-                    @click="changeShowVideoNum(index)"
-                  >
+                  <el-dropdown-item v-for="(item, index) in deviceList" :key="item.id"
+                    @click="changeShowVideoNum(index)">
                     {{
                       `${item.type === '1' ? '摄像头' : '安全树'}-${item.name}`
                     }}
@@ -298,143 +295,75 @@
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-button
-              :type="showVideoNum === '四屏' ? 'primary' : ''"
-              @click="
-                () => {
-                  showVideoNum = '四屏'
-                }
-              "
-            >
+            <el-button :type="showVideoNum === '四屏' ? 'primary' : ''" @click="() => {
+                showVideoNum = '四屏'
+              }
+              ">
               四屏
             </el-button>
           </div>
           <div v-else style="height: 32px;" />
         </div>
         <div v-show="!isFullScreen" class="video">
-          <player
-            v-if="playerType === 'ws'"
-            :id="`${showVideo[0]?.id}` || ''"
-            :status="`${showVideo[0]?.status}` || ''"
-            class="border-1"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[0] || {})"
-          />
-          <player1
-            v-if="playerType === 'get'"
-            :id="`${showVideo[0]?.id}` || ''"
-            :status="`${showVideo[0]?.status}` || ''"
-            class="border-1"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[0] || {})"
-          />
-          <player
-            v-if="playerType === 'ws'"
-            :id="`${showVideo[1]?.id}` || ''"
-            :status="`${showVideo[1]?.status}` || ''"
-            class="border-2"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[1] || {})"
-          />
-          <player1
-            v-if="playerType === 'get'"
-            :id="`${showVideo[1]?.id}` || ''"
-            :status="`${showVideo[1]?.status}` || ''"
-            class="border-1"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[1] || {})"
-          />
-          <player
-            v-if="playerType === 'ws'"
-            :id="`${showVideo[2]?.id}` || ''"
-            :status="`${showVideo[2]?.status}` || ''"
-            class="border-3"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[2] || {})"
-          />
-          <player1
-            v-if="playerType === 'get'"
-            :id="`${showVideo[2]?.id}` || ''"
-            :status="`${showVideo[2]?.status}` || ''"
-            class="border-1"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[2] || {})"
-          />
-          <player
-            v-if="playerType === 'ws'"
-            :id="`${showVideo[3]?.id}` || ''"
-            :status="`${showVideo[3]?.status}` || ''"
-            class="border-4"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[3] || {})"
-          />
-          <player1
-            v-if="playerType === 'get'"
-            :id="`${showVideo[3]?.id}` || ''"
-            :status="`${showVideo[3]?.status}` || ''"
-            class="border-1"
-            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
-            @dblclick="changeFullScreen(showVideo[3] || {})"
-          />
+          <player v-if="playerType === 'ws'" :id="`${showVideo[0]?.id}` || ''" :status="`${showVideo[0]?.status}` || ''"
+            class="border-1" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px`, position: 'relative'}"
+            @dblclick="changeFullScreen(showVideo[0] || {})" />
+          <player1 v-if="playerType === 'get'" :sence="`${showVideo[0]?.relation_scene_name}` || ''" :id="`${showVideo[0]?.id}` || ''"
+            :status="`${showVideo[0]?.status}` || ''" class="border-1"
+            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px`, position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[0] || {})" />
+          <player v-if="playerType === 'ws'" :id="`${showVideo[1]?.id}` || ''" :status="`${showVideo[1]?.status}` || ''"
+            class="border-2" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` , position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[1] || {})" />
+          <player1 v-if="playerType === 'get'" :sence="`${showVideo[1]?.relation_scene_name}` || ''" :id="`${showVideo[1]?.id}` || ''"
+            :status="`${showVideo[1]?.status}` || ''" class="border-1"
+            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` , position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[1] || {})" />
+          <player v-if="playerType === 'ws'" :id="`${showVideo[2]?.id}` || ''" :status="`${showVideo[2]?.status}` || ''"
+            class="border-3" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` , position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[2] || {})" />
+          <player1 v-if="playerType === 'get'" :sence="`${showVideo[2]?.relation_scene_name}` || ''" :id="`${showVideo[2]?.id}` || ''"
+            :status="`${showVideo[2]?.status}` || ''" class="border-1"
+            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` , position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[2] || {})" />
+          <player v-if="playerType === 'ws'" :id="`${showVideo[3]?.id}` || ''" :status="`${showVideo[3]?.status}` || ''"
+            class="border-4" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` , position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[3] || {})" />
+          <player1 v-if="playerType === 'get'"  :sence="`${showVideo[3]?.relation_scene_name}` || ''" :id="`${showVideo[3]?.id}` || ''"
+            :status="`${showVideo[3]?.status}` || ''" class="border-1"
+            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` , position: 'relative' }"
+            @dblclick="changeFullScreen(showVideo[3] || {})" />
         </div>
         <div v-if="isFullScreen" class="video">
-          <player
-            v-if="playerType === 'ws'"
-            :id="`${showFull?.id}` || ''"
-            :status="`${showFull?.status}` || ''"
-            class="border"
-            :style="{ width: '100%', height: `${pageHeight - 35}px` }"
-            @dblclick="dblclickFull"
-          />
-          <player1
-            v-if="playerType === 'get'"
-            :id="`${showFull?.id}` || ''"
-            :status="`${showFull?.status}` || ''"
-            class="border"
-            :style="{ width: '100%', height: `${pageHeight - 35}px` }"
-            @dblclick="dblclickFull"
-          />
+          <player v-if="playerType === 'ws'" :id="`${showFull?.id}` || ''" :status="`${showFull?.status}` || ''"
+            class="border" :style="{ width: '100%', height: `${pageHeight - 35}px`, position: 'relative' }" @dblclick="dblclickFull" />
+          <player1 v-if="playerType === 'get'" :sence="`${showFull?.relation_scene_name}` || ''" :id="`${showFull?.id}` || ''" :status="`${showFull?.status}` || ''"
+            class="border" :style="{ width: '100%', height: `${pageHeight - 35}px` , position: 'relative' }" @dblclick="dblclickFull" />
         </div>
       </div>
       <div class="right" :style="{ height: `${pageHeight}px` }">
         <el-card v-loading="loadingResult">
-          <div
-            class="title"
-            style="
+          <div class="title" style="
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding-left: 10px;
               padding-right: 10px;
-"
-          >
+">
             <span> 识别结果 </span>
             <el-button size="small" @click="refrshResult">
               刷新
             </el-button>
           </div>
-          <ul
-            v-if="resultList.length"
-            v-infinite-scroll="load"
-            class="infinite-list"
-            style="overflow: auto;"
-            :style="{ height: `${pageHeight - 64}px` }"
-          >
+          <ul v-if="resultList.length" v-infinite-scroll="load" class="infinite-list" style="overflow: auto;"
+            :style="{ height: `${pageHeight - 64}px` }">
             <li v-for="item in resultList" :key="item.id" class="item">
-              <el-image
-                class="img"
-                :style="{ height: `${imgHeight}px` }"
-                :preview-src-list="[item.url]"
-                :src="item.url"
-                fit="cover"
-              />
+              <el-image class="img" :style="{ height: `${imgHeight}px` }" :preview-src-list="[item.url]" :src="item.url"
+                fit="cover" />
               <span class="time">{{ item.time }}</span>
             </li>
           </ul>
-          <div
-            v-if="!resultList.length"
-            :style="{ height: `${pageHeight - 64}px`, width: '100%' }"
-          >
+          <div v-if="!resultList.length" :style="{ height: `${pageHeight - 64}px`, width: '100%' }">
             <el-empty :size="100" description="暂无数据" />
           </div>
         </el-card>