diff --git a/public/antd_color.less b/public/antd_color.less
index b746b9c..d06c6c0 100644
--- a/public/antd_color.less
+++ b/public/antd_color.less
@@ -42,7 +42,7 @@ html {--antd-wave-shadow-color: @primary-color;}
 .ant-alert-info .ant-alert-icon {color: #1890ff;}
 .ant-alert-warning {background-color: #fffbe6;border: 1px solid #ffe58f;}
 .ant-alert-warning .ant-alert-icon {color: #faad14;}
-.ant-alert-error {background-color: #fff1f0;border: 1px solid #ffa39e;}
+.ant-alert-error {background-color: color(~`colorPalette("@{text-color-secondary}", 1)`);border: 1px solid #ffa39e;}
 .ant-alert-error .ant-alert-icon {color: #f5222d;}
 .ant-alert-close-icon {background-color: transparent;border: none;}
 .ant-alert-close-icon .anticon-close {color: @text-color-secondary;}
@@ -1377,7 +1377,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
 .ant-tag-magenta {color: #eb2f96;background: #fff0f6;border-color: #ffadd2;}
 .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-red {color: #f5222d;background: #fff1f0;border-color: #ffa39e;}
+.ant-tag-red {color: #f5222d;background: color(~`colorPalette("@{text-color-secondary}", 1)`);border-color: #ffa39e;}
 .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
 .ant-tag-volcano {color: #fa541c;background: #fff2e8;border-color: #ffbb96;}
 .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index c9da053..c5223b8 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -6,7 +6,7 @@ export default  {
     },
     getRealTimeList: {
         method: "POST",
-        url: "/realTime",
+        url: "/cameraIo/realTimeCamera",
         name: "获取实时监控列表"
     },
     getHistoryList: {
@@ -242,6 +242,47 @@ export default  {
         url: '/category/export/model',
         name: '品规模板下载',
         method: 'GET'
+    }, 
+    EaseAiController: {
+        url: '/EaseAiController',
+        name: 'easeai简单测试',
+        method: 'POST'
+    },
+    cameraIoConfigPage: {
+        url: '/cameraIo/config/page',
+        name: '获取列表',
+        method: 'POST'
+    },
+    cameraIoConfigAdd: {
+        url: '/cameraIo/config',
+        name: '新增预置点',
+        method: 'POST'
+    },
+    cameraIoConfigDel: {
+        url: '/cameraIo/config',
+        name: '删除预置点',
+        method: 'DELETE'
+    },
+    sseGetUid: {
+        url: '/sse/index',
+        name: '获取sseUid',
+        method: 'GET'
+    },
+    
+    getDeviceTree: {
+        url: '/cameraIo/getDeviceTree',
+        name: '获取设备树',
+        method: 'POST'
+    },
+    sseClose: {
+        url: '/sse/closeSse',
+        name: '断连sse',
+        method: 'POST'
+    },
+    cameraIoConfigPut: {
+        url: '/cameraIo/config',
+        name: '修改预置点',
+        method: 'PUT'
     },
     stockExportModel: {
         url: '/stock/export/model',
diff --git a/src/layouts/PageHeader.vue b/src/layouts/PageHeader.vue
index 8a06236..34e4ff5 100644
--- a/src/layouts/PageHeader.vue
+++ b/src/layouts/PageHeader.vue
@@ -10,7 +10,7 @@
                 <slot name="title">{{ title }}</slot>
             </a-layout-header>
         </div>
-        <div class="header-right">
+        <!-- <div class="header-right">
             <div class="header-top-right-circle" @click="visible = !visible"></div>
             <a-badge :count="count" @click="openPlc">
                 <a-icon type="bell" style="font-size:20px;cursor:pointer"/>
@@ -30,7 +30,7 @@
                     <a href="javascript:;" @click="logout">退出登录</a>
                 </div>
             </a-popover>
-        </div>
+        </div> -->
     </div>
 </template>
 
diff --git a/src/router/index.js b/src/router/index.js
index fb15f7a..c086252 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,15 +51,25 @@ const routes = [{
         },
        
         {
-            path: 'historyMonitoring',
-            name: 'historyMonitoring',
+            path: 'test',
+            name: 'test',
             meta: {
-                icon: 'book',
-                name: '历史数据'
+                icon: 'video-camera',
+                name: '测试'
             },
-            component: () => import('@/views/historyMonitoring/index')
+            component: () => import('@/views/picTest/index'),
+
         },
         // {
+        //     path: 'historyMonitoring',
+        //     name: 'historyMonitoring',
+        //     meta: {
+        //         icon: 'book',
+        //         name: '历史数据'
+        //     },
+        //     component: () => import('@/views/historyMonitoring/index')
+        // },
+        // {
         //     path: 'alarmLog',
         //     name: 'alarmLog',
         //     meta: {
@@ -68,32 +78,32 @@ const routes = [{
         //     },
         //     component: () => import('@/views/alarmVideos/alarmLog')
         // },
-        {
-            path: 'checkManage',
-            name: 'checkManage',
-            meta: {
-                icon: 'form',
-                name: '盘点管理',
-            },
-            component: () => import('@/views/checkManage/index'),
-        },
-        {
-            path: 'checkOperation',
-            name: 'checkOperation',
-            meta: {
-                name: '盘点操作'
-            },
-            component: () => import('@/views/checkManage/checkOperation'),
-        },
-        {
-            path: 'checkHistory',
-            name: 'checkHistory',
-            meta: {
-                icon: 'tag',
-                name: '盘点历史',
-            },
-            component: () => import('@/views/historyCheck/index'),
-        },
+        // {
+        //     path: 'checkManage',
+        //     name: 'checkManage',
+        //     meta: {
+        //         icon: 'form',
+        //         name: '盘点管理',
+        //     },
+        //     component: () => import('@/views/checkManage/index'),
+        // },
+        // {
+        //     path: 'checkOperation',
+        //     name: 'checkOperation',
+        //     meta: {
+        //         name: '盘点操作'
+        //     },
+        //     component: () => import('@/views/checkManage/checkOperation'),
+        // },
+        // {
+        //     path: 'checkHistory',
+        //     name: 'checkHistory',
+        //     meta: {
+        //         icon: 'tag',
+        //         name: '盘点历史',
+        //     },
+        //     component: () => import('@/views/historyCheck/index'),
+        // },
         // {
         //     path: 'stockHistory',
         //     name: 'stockHistory',
@@ -111,15 +121,15 @@ const routes = [{
         //     },
         //     component: () => import('@/views/stockLog/logPage'),
         // },
-        {
-            path: 'roadwayManage',
-            name: 'roadwayManage',
-            meta: {
-                icon: 'build',
-                name: '巷道管理'
-            },
-            component: () => import('@/views/roadwayManage/index')
-        },
+        // {
+        //     path: 'roadwayManage',
+        //     name: 'roadwayManage',
+        //     meta: {
+        //         icon: 'build',
+        //         name: '巷道管理'
+        //     },
+        //     component: () => import('@/views/roadwayManage/index')
+        // },
         {
             path: 'cameraManage',
             name: 'cameraManage',
diff --git a/src/views/cameraManage/controllerModel.vue b/src/views/cameraManage/controllerModel.vue
index 3976d7b..bad842a 100644
--- a/src/views/cameraManage/controllerModel.vue
+++ b/src/views/cameraManage/controllerModel.vue
@@ -311,8 +311,11 @@ export default {
            if(this.type=='test') {
                this.$router.go(-1);
            }else if(this.type=='config') {
+                if(this.player != null){
+                    this.player.destroy()
+                }
                this.$router.go(-1);
-               this.player.destroy();
+               
            }
            
        },
diff --git a/src/views/cameraManage/index.vue b/src/views/cameraManage/index.vue
index 70ff2cb..8d8be70 100644
--- a/src/views/cameraManage/index.vue
+++ b/src/views/cameraManage/index.vue
@@ -47,12 +47,20 @@
             @sure="submit"
             @close="closeModel"
         />
+        <modelCamera
+            :visible.sync="visible"
+            :modelType="modelType"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
     </div>
 </template>
 
 
 <script>
 import Model from "./model.vue"
+import modelCamera from "./modelCamera.vue"
 import ioModel from "./ioModel.vue"
 const columns = [
     {
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index ec5d5d8..24f8d23 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -1,39 +1,54 @@
 <template>
-     <div v-if="isShow">
-         <template v-if="type=='add' || type=='edit'">
-             <a-modal
-                 v-model="isShow"
-                 :title="[type =='add' ? '新增球机':'编辑球机']"
-                 :closable="closable"
-                 @ok="handleOk"
-                 @cancel="handleCancel"
-                 ok-text="确认"
-                 cancel-text="取消"
-                 class="add-edit-model"
-             >
-                 <a-form
-                     :form="form"
-                     :wrapper-col="formItemAcrossLayout.wrapperCol"
-                 >
-                     <a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
-                         <a-input
-                             v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
-                         />
-                     </a-form-item>
-                     <a-form-item label="球机IP" :label-col="formItemVerticalLayout.labelCol">
-                         <a-input
-                             v-decorator="['ip', { rules: [{ required: true, message: '请输入球机ip!' }] }]"
-                         />
-                     </a-form-item>
-                     <a-form-item label="视频流IP" :label-col="formItemVerticalLayout.labelCol">
-                         <a-input
-                             v-decorator="['rtcServer']"
-                         />
-                     </a-form-item>
-                 </a-form>
-             </a-modal>
-         </template>
-         <!-- <template v-else-if="type=='test'">
+    <div v-if="isShow">
+        <template v-if="type=='add' || type=='edit'">
+            <a-modal
+                v-model="isShow"
+                :title="[type =='add' ? '新增球机':'编辑球机']"
+                :closable="closable"
+                @ok="handleOk"
+                @cancel="handleCancel"
+                ok-text="确认"
+                cancel-text="取消"
+                class="add-edit-model"
+            >
+                <a-form
+                    :form="form"
+                    :wrapper-col="formItemAcrossLayout.wrapperCol"
+                >
+                    <a-form-item
+                        label="球机名称"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]" />
+                    </a-form-item>
+                    <a-form-item
+                        label="球机IP"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['ip', { rules: [{ required: true, message: '请输入球机ip!' }] }]" />
+                    </a-form-item>
+                    <a-form-item
+                        label="视频流IP"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['rtcServer']" />
+                    </a-form-item>
+                    <a-form-item
+                        label="通道"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['channel', { rules: [{ required: true, message: '请输入通道!' }] }]" />
+                </a-form-item>
+                <a-form-item
+                        label="设备"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['type', { rules: [{ required: true, message: '请输入设备名!' }] }]" />
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </template>
+        <!-- <template v-else-if="type=='test'">
              <a-modal
                  v-model="isShow"
                  @cancel="handleCancel"
@@ -91,244 +106,464 @@
              </a-modal>
          </template> -->
 
-         <template v-else-if="type=='config'">
-             <a-modal
-                 v-model="isShow"
-                 @cancel="handleCancel"
-                 :footer="null"
-                 :maskClosable="false"
-                 width="1600px"
-                 :bodyStyle="{padding:0,display:'flex'}"
-                 :centered="true"
-                 class="config-model"
-             >
-                
-                 <video width="900"
-                         height="600"
-                :id="`config-camera${id}`" 
-                autoplay muted ></video>
-                 <!-- <div class="operation-list">
-                     <div class="operation-item">
-                         <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
-                              @mouseup="zoomDecStop" @mouseleave="zoomDecStop">
-                         <span>变倍</span>
-                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
-                              @mouseup="zoomAddStop" @mouseleave="zoomAddStop">
-                     </div>
-                     <div class="operation-item">
-                         <img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
-                              @mouseup="focusDecStop" @mouseleave="focusDecStop">
-                         <span>变焦</span>
-                         <img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
-                              @mouseup="focusAddStop" @mouseleave="focusAddStop">
-                     </div>
-                     <div class="operation-item">
-                         <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop" @mouseleave="irisDecStop">
-                         <span>光圈</span>
-                         <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop" @mouseleave="irisAddStop">
-                     </div>
-                 </div>
-                 <div class="direction-list">
-                     <div class="direction-item">
-                         <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop" @mouseleave="leftUpStop">
-                         <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop" @mouseleave="upStop">
-                         <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop" @mouseleave="rightUpStop">
-                     </div>
-                     <div class="direction-item">
-                         <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop" @mouseleave="leftStop">
-                         <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop" @mouseleave="rightStop">
-                     </div>
-                     <div class="direction-item">
-                         <img :src="leftDownUrl" alt="" @mousedown="leftDownStart"
-                              @mouseup="leftDownStop" @mouseleave="leftDownStop">
-                         <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop" @mouseleave="downStop">
-                         <img :src="rightDownUrl" alt="" @mousedown="rightDownStart"
-                              @mouseup="rightDownStop" @mouseleave="rightDownStop">
-                     </div>
-                 </div>
-                 <div class="config-table">
-                     <h2>球机配置</h2>
-                     <a-table
-                         :columns="columns"
-                         :row-key="record => record.name"
-                         :data-source="configData"
-                         @change="getConfigIoList"
-                         bordered
-                         :pagination="false"
-                         :scroll="{y:335}"
-                     >
-                     <span slot="name" slot-scope="text,record">
-                         <a-button type="link" @click="toPtz(record)">{{text}}({{record.code}})</a-button>
-                      </span>
-                         <span slot="position" slot-scope="text, record">
-                            <div v-if="text">
-                               已写入
-                               <a-button type="link" class="plc" @click="coverage(0,record)">
-                                    覆盖
-                               </a-button>
-                            </div>
-                            <a-button type="primary" class="plc" v-else @click="coverage(0,record)">
-                                    写入
+        <template v-else-if="type=='config'">
+            <a-modal
+                v-model="isShow"
+                @cancel="handleCancel"
+                :footer="null"
+                :maskClosable="false"
+                width="1600px"
+                :bodyStyle="{padding:0,display:'flex'}"
+                :centered="true"
+                class="config-model"
+            >
+
+                <video
+                    width="900"
+                    height="600"
+                    :id="`config-camera${id}`"
+                    autoplay
+                    muted
+                ></video>
+                <div class="operation-list">
+                    <div class="operation-item">
+                        <img
+                            :src="zoomSubUrl"
+                            alt=""
+                            @mousedown="zoomDecStart"
+                            @mouseup="zoomDecStop"
+                            @mouseleave="zoomDecStop"
+                        >
+                        <span>变倍</span>
+                        <img
+                            :src="zoomAddUrl"
+                            alt=""
+                            @mousedown="zoomAddStart"
+                            @mouseup="zoomAddStop"
+                            @mouseleave="zoomAddStop"
+                        >
+                    </div>
+                    <div class="operation-item">
+                        <img
+                            :src="focusSubUrl"
+                            alt=""
+                            @mousedown="focusDecStart"
+                            @mouseup="focusDecStop"
+                            @mouseleave="focusDecStop"
+                        >
+                        <span>变焦</span>
+                        <img
+                            :src="focusAddUrl"
+                            alt=""
+                            @mousedown="focusAddStart"
+                            @mouseup="focusAddStop"
+                            @mouseleave="focusAddStop"
+                        >
+                    </div>
+                    <div class="operation-item">
+                        <img
+                            :src="irisSubUrl"
+                            alt=""
+                            @mousedown="irisDecStart"
+                            @mouseup="irisDecStop"
+                            @mouseleave="irisDecStop"
+                        >
+                        <span>光圈</span>
+                        <img
+                            :src="irisAddUrl"
+                            alt=""
+                            @mousedown="irisAddStart"
+                            @mouseup="irisAddStop"
+                            @mouseleave="irisAddStop"
+                        >
+                    </div>
+                </div>
+                <div class="direction-list">
+                    <div class="direction-item">
+                        <img
+                            :src="leftUpUrl"
+                            alt=""
+                            @mousedown="leftUpStart"
+                            @mouseup="leftUpStop"
+                            @mouseleave="leftUpStop"
+                        >
+                        <img
+                            :src="upUrl"
+                            alt=""
+                            @mousedown="upStart"
+                            @mouseup="upStop"
+                            @mouseleave="upStop"
+                        >
+                        <img
+                            :src="rightUpUrl"
+                            alt=""
+                            @mousedown="rightUpStart"
+                            @mouseup="rightUpStop"
+                            @mouseleave="rightUpStop"
+                        >
+                    </div>
+                    <div class="direction-item">
+                        <img
+                            :src="leftUrl"
+                            alt=""
+                            @mousedown="leftStart"
+                            @mouseup="leftStop"
+                            @mouseleave="leftStop"
+                        >
+                        <img
+                            :src="rightUrl"
+                            alt=""
+                            @mousedown="rightStart"
+                            @mouseup="rightStop"
+                            @mouseleave="rightStop"
+                        >
+                    </div>
+                    <div class="direction-item">
+                        <img
+                            :src="leftDownUrl"
+                            alt=""
+                            @mousedown="leftDownStart"
+                            @mouseup="leftDownStop"
+                            @mouseleave="leftDownStop"
+                        >
+                        <img
+                            :src="downUrl"
+                            alt=""
+                            @mousedown="downStart"
+                            @mouseup="downStop"
+                            @mouseleave="downStop"
+                        >
+                        <img
+                            :src="rightDownUrl"
+                            alt=""
+                            @mousedown="rightDownStart"
+                            @mouseup="rightDownStop"
+                            @mouseleave="rightDownStop"
+                        >
+                    </div>
+                </div>
+                <div class="config-table">
+                    <h2>球机配置</h2>
+                    <a-row>
+      <a-col :span="8">
+        <a-input  v-model="newCode" placeholder="输入新的编号"/>
+      </a-col>
+      <a-col :span="8">
+        <a-input  v-model="newName" placeholder="输入新的名称"/>
+      </a-col>
+      <a-col :span="8">
+        <a-button
+                        type="delete"
+                        @click="showModel('add','')"
+                    >
+                        新增
+                    </a-button>
+      </a-col>
+    </a-row>
+                    
+                    
+     
+                    
+                    <a-table
+                        :columns="columns"
+                        :row-key="record => record.id"
+                        :data-source="configData"
+                        @change="getConfigIoList"
+                        bordered
+                        :pagination="false"
+                        :scroll="{y:335}"
+                    >
+
+                      
+                        <span
+                            slot="name"
+                            slot-scope="text,record"
+                        >
+                            <a-button
+                                type="link"
+                                @click="toPtz(record)"
+                            >{{text}}({{record.code}})</a-button>
+                        </span>
+                        <span
+                            slot="position"
+                            slot-scope="text, record"
+                        >
+
+                            <a-button
+                                v-if="text"
+                                type="link"
+                                class="plc"
+                                @click="coverage(0,record)"
+                            >
+                                覆盖
                             </a-button>
 
-                      </span>
-                         
-                         
-                     </a-table>
-                 </div> -->
-             </a-modal>
-         </template>
+                            <a-button
+                                type="link"
+                                class="plc"
+                                v-else
+                                @click="coverage(0,record)"
+                            >
+                                写入
+                            </a-button>
 
-     </div>
+                            <a-button
+                                type="link"
+                                class="plc"
+                                @click="showModelDel(record.id,record)"
+                            >
+                                删除
+                            </a-button>
+                        </span>
+
+                    </a-table>
+                </div>
+            </a-modal>
+
+        </template>
+
+    </div>
 </template>
 <script>
-var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
-    labelCol: { span: 8 },    //lable长度
-    wrapperCol: { span: 14 },  //input长度
+import IoModel from "./ioModel.vue";
+const EditableCell = {
+    template: `
+      <div class="editable-cell">
+        <div v-if="editable" class="editable-cell-input-wrapper">
+          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
+            type="check"
+            class="editable-cell-icon-check"
+            @click="check"
+          />
+        </div>
+        <div v-else class="editable-cell-text-wrapper">
+          {{ value || ' ' }}
+          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
+        </div>
+      </div>
+    `,
+    props: {
+        text: String,
+    },
+    data() {
+        return {
+            value: this.text,
+            editable: false,
+        };
+    },
+    methods: {
+        handleChange(e) {
+            const value = e.target.value;
+            this.value = value;
+        },
+        check() {
+            this.editable = false;
+            this.$emit("change", this.value);
+        },
+        edit() {
+            this.editable = true;
+        },
+    },
+};
+var formItemAcrossLayout = {
+    //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: { span: 8 }, //lable长度
+    wrapperCol: { span: 14 }, //input长度
 };
-var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+var formItemVerticalLayout = {
+    //formItemVerticalLayout当表单内item纵向排列时用
     labelCol: { span: 4 },
     wrapperCol: { span: 8, offset: 4 },
 };
 const columns = [
     {
-        title: 'PLC IO指令',
-        dataIndex: 'name',
-        scopedSlots: { customRender: 'name' }
+        title: "指令编码",
+        dataIndex: "code",
+        scopedSlots: { customRender: "code" },
     },
     {
-        title: '配置',
-        dataIndex: 'position',
-        scopedSlots: { customRender: 'position' }
-    }
+        title: "指令名称",
+        dataIndex: "name",
+        scopedSlots: { customRender: "name" },
+    },
+    {
+        title: "配置",
+        dataIndex: "position",
+        scopedSlots: { customRender: "position" },
+    },
 ];
-import WebRtcPlayer from "../../../public/static/webrtcplayer"
+import WebRtcPlayer from "../../../public/static/webrtcplayer";
 export default {
-    props:[ 'visible', 'modelType', 'modelData'],
+    components: {
+        EditableCell,
+    },
+    props: ["visible", "modelType", "modelData"],
     watch: {
         //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
-        visible: function(newVal){
-            this.isShow = newVal;  //newVal即是visible
+        visible: function (newVal) {
+            this.isShow = newVal; //newVal即是visible
             // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
         },
-        modelType: function(newVal){
+        modelType: function (newVal) {
             this.type = newVal;
         },
-        modelData: function(newVal){
+        modelData: function (newVal) {
             // console.log(newVal)
-            this.mdata=newVal
-            console.log(this.type)
-            if(newVal.id && this.type=='edit'){
-                this.id = newVal.id
+            this.mdata = newVal;
+            console.log(this.type);
+            if (newVal.id && this.type == "edit") {
+                this.id = newVal.id;
+                console.log(newVal.id);
                 // console.log('触发了watch，重新赋值')
-                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
-                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
-                        name:newVal.name,
-                        ip:newVal.ip,
-                        rtsp:newVal.rtsp,
-                        rtcServer:newVal.rtcServer,
-                        rtcServerPort:newVal.rtcServerPort
-                    })
-                })
-            }else if (newVal.id && this.type=='config'){
-                this.id = newVal.id
-                this.mdata = newVal
-                console.log(newVal)
+                this.$nextTick(() => {
+                    //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    this.form.setFieldsValue({
+                        //setFieldsValue 表示对form表单重新设置值
+                        name: newVal.name,
+                        ip: newVal.ip,
+                        rtsp: newVal.rtsp,
+                        rtcServer: newVal.rtcServer,
+                        rtcServerPort: newVal.rtcServerPort,
+                        channel: newVal.channel,
+                        type: newVal.type,
+                    });
+                });
+            } else if (newVal.id && this.type == "config") {
+                this.id = newVal.id;
+                this.mdata = newVal;
+                console.log(newVal.id);
+                this.getConfigIoList();
             }
-
         },
     },
     data() {
         return {
-            isShow:false,
-            player:null,
-            type:'',
-            title:'',
-            closable:false,//取消model模态框右上角的X号
+            isShow: false,
+            player: null,
+            type: "",
+            title: "",
+            closable: false, //取消model模态框右上角的X号
             formItemAcrossLayout,
             formItemVerticalLayout,
             confirmLoading: false,
-            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
-            id:'',
-            mdata:[],
+            form: this.$form.createForm(this, { name: "dynamic_rule" }),
+            id: "",
+            mdata: [],
             //测试相关
-            zoomSubUrl:require('@/assets/sub-icon.png'),
-            zoomAddUrl:require('@/assets/add-icon.png'),
-            focusSubUrl:require('@/assets/sub-icon.png'),
-            focusAddUrl:require('@/assets/add-icon.png'),
-            irisSubUrl:require('@/assets/sub-icon.png'),
-            irisAddUrl:require('@/assets/add-icon.png'),
-            leftUpUrl:require('@/assets/left-up-icon.png'),
-            upUrl:require('@/assets/up-icon.png'),
-            rightUpUrl:require('@/assets/right-up-icon.png'),
-            leftUrl:require('@/assets/left-icon.png'),
-            rightUrl:require('@/assets/right-icon.png'),
-            leftDownUrl:require('@/assets/left-down-icon.png'),
-            downUrl:require('@/assets/down-icon.png'),
-            rightDownUrl:require('@/assets/right-down-icon.png'),
+            zoomSubUrl: require("@/assets/sub-icon.png"),
+            zoomAddUrl: require("@/assets/add-icon.png"),
+            focusSubUrl: require("@/assets/sub-icon.png"),
+            focusAddUrl: require("@/assets/add-icon.png"),
+            irisSubUrl: require("@/assets/sub-icon.png"),
+            irisAddUrl: require("@/assets/add-icon.png"),
+            leftUpUrl: require("@/assets/left-up-icon.png"),
+            upUrl: require("@/assets/up-icon.png"),
+            rightUpUrl: require("@/assets/right-up-icon.png"),
+            leftUrl: require("@/assets/left-icon.png"),
+            rightUrl: require("@/assets/right-icon.png"),
+            leftDownUrl: require("@/assets/left-down-icon.png"),
+            downUrl: require("@/assets/down-icon.png"),
+            rightDownUrl: require("@/assets/right-down-icon.png"),
             columns,
-            configData:[]
+            configData: [],
+            newCode:'',
+            newName:'',
         };
     },
     mounted() {
-        if (this.$route.query.modelType == 'test') {
-            this.isShow = true
-            this.id = this.$route.query.modelData.id
-            this.type = this.$route.query.modelType
-            this.mdata = this.$route.query.modelData
+        if (this.$route.query.modelType == "test") {
+            this.isShow = true;
+            this.id = this.$route.query.modelData.id;
+            this.type = this.$route.query.modelType;
+            this.mdata = this.$route.query.modelData;
             this.$nextTick(() => {
-                this.autoPlay(this.id)
-            })
-        } else if (this.$route.query.modelType == 'config') {
-            
-            this.isShow = true
-            this.id = this.$route.query.modelData.id
-            this.getConfigIoList()
-            this.type = this.$route.query.modelType
-            this.mdata = this.$route.query.modelData
+                this.autoPlay(this.id);
+            });
+        } else if (this.$route.query.modelType == "config") {
+            this.isShow = true;
+            this.id = this.$route.query.modelData.id;
+            this.getConfigIoList();
+            this.type = this.$route.query.modelType;
+            this.mdata = this.$route.query.modelData;
             this.$nextTick(() => {
-                this.autoPlay(this.id)
-            })
-            
+                this.autoPlay(this.id);
+            });
         }
     },
-    destroy(){
-        if(this.player != null){
-            this.player.destroy()
+    destroy() {
+        if (this.player != null) {
+            this.player.destroy();
         }
-        
     },
     methods: {
+        showModel(type, data) {
+            console.log(this.id);
+            this.$api.httpApi
+                .cameraIoConfigAdd({
+                    data: {
+                        cameraId: this.id,
+                        code: this.newCode,
+                        name: this.newName,
+                    },
+                })
+                .then((res) => {
+                    this.getConfigIoList();
+                })
+                .catch((err) => {});
+        }, 
+        showModelDel(id) {
+            console.log(this.id);
+            this.$api.httpApi
+                .cameraIoConfigDel({
+                    data: {
+                        id: id
+                    },
+                })
+                .then((res) => {
+                    this.getConfigIoList();
+                })
+                .catch((err) => {});
+        },
+        submit(visible) {
+            this.visible = visible;
+            this.handleGetCameraIoList();
+        },
+        closeModel(visible, data) {
+            this.visible = visible;
+            this.modelData = data;
+        },
         handleOk() {
             this.confirmLoading = true;
             setTimeout(() => {
                 this.form.validateFields((err, values) => {
-                    console.log(values)
+                    console.log(values);
                     if (!err) {
-                        console.log(this.title)
-                        if(this.type=='add'){
-                            this.$api.httpApi.addCamera({
-                                data:values
-                            }).then(res => {
-                                if(res.code==200){
-                                    this.$emit('sure',false)
-                                    this.$message.success('新增球机成功');
-                                }
-                            }).catch(err => {
-
-                            });
-                        }else if(this.type=='edit'){
-                            values.id = this.id
-                            this.$api.httpApi.editCamera({
-                                data:values
-                            }).then(res => {
-                                if(res.code==200){
-                                    this.$emit('sure',false)
-                                    this.$message.success('编辑球机成功');
-                                }
-                            }).catch(err => {
-
-                            });
+                        console.log(this.title);
+                        if (this.type == "add") {
+                            this.$api.httpApi
+                                .addCamera({
+                                    data: values,
+                                })
+                                .then((res) => {
+                                    if (res.code == 200) {
+                                        this.$emit("sure", false);
+                                        this.$message.success("新增球机成功");
+                                    }
+                                })
+                                .catch((err) => {});
+                        } else if (this.type == "edit") {
+                            values.id = this.id;
+                            this.$api.httpApi
+                                .editCamera({
+                                    data: values,
+                                })
+                                .then((res) => {
+                                    if (res.code == 200) {
+                                        this.$emit("sure", false);
+                                        this.$message.success("编辑球机成功");
+                                    }
+                                })
+                                .catch((err) => {});
                         }
                     }
                 });
@@ -337,544 +572,518 @@ export default {
         },
 
         handleCancel() {
-            
-            console.log('Clicked cancel button');
-            this.$emit('close', false, {})
-            if(this.type=='test') {
-                this.$router.go(-1);
-            }else if(this.type=='config') {
+            console.log("Clicked cancel button");
+            this.$emit("close", false, {});
+            if (this.type == "test") {
                 this.$router.go(-1);
-                this.player.destroy();
+            } else if (this.type == "config") {
+                if (this.player != null) {
+                    this.player.destroy();
+                }
             }
-            
-        },
-       
-        autoPlay(id){
-            let video = document.getElementById('config-camera'+id);
-            if(video){
-                let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
-                console.log("server:"+server)
-                let player = new WebRtcPlayer(server,video,'camera'+id);
-                console.log("okkkkkk")
+        },
+
+        autoPlay(id) {
+            let video = document.getElementById("config-camera" + id);
+            if (video) {
+                let server =
+                    this.mdata.rtcServer + ":" + this.mdata.rtcServerPort;
+                console.log("server:" + server);
+                let player = new WebRtcPlayer(server, video, "camera" + id);
+                console.log("okkkkkk");
                 //player.load('camera'+id);
-                this.player = player
+                this.player = player;
             }
-            
         },
-        getConfigIoList(){
-            this.$axios.post('/camera/'+this.id+'/io/list', {
-                data: {
-                }
-            }).then(res => {
-                console.log(res)
-                if(res.code==200){
-                    this.configData=res.data
-                }
-            }).catch(err => {
-
-            });
+        getConfigIoList() {
+            console.log(this.id);
+            this.$api.httpApi
+                .cameraIoConfigPage({
+                    data: {
+                        cameraId: this.id,
+                    },
+                })
+                .then((res) => {
+                    console.log(res);
+                    if (res.code == 200) {
+                        this.configData = res.data;
+                    }
+                })
+                .catch((err) => {});
         },
-        
-        coverage(type,data){
-            
-            this.$api.httpApi.writeInCameraIoptz({
-                data: {
-                    cameraId: this.id,
-                    cameraIOId: data.id,
-                    name: data.name,
-                    code: data.code,
-                    type: type
-                }
-            }).then(res => {
-                
-                this.getConfigIoList()
-            }).catch(err => {
 
-            });
+        coverage(type, data) {
+            this.$api.httpApi
+                .writeInCameraIoptz({
+                    data: {
+                        cameraId: this.id,
+                        cameraIOId: data.id,
+                        name: data.name,
+                        code: data.code,
+                        type: type,
+                    },
+                })
+                .then((res) => {
+                    this.getConfigIoList();
+                })
+                .catch((err) => {});
         },
-        toPtz(data){
-            this.$api.httpApi.cameraIoToPtz({
-                data: {
-                    cameraId:this.id,
-                    cameraIOId:data.id,
-                    name:data.name,
-                }
-            }).then(res => {
-                console.log(res)
-            }).catch(err => {
-
-            });
+        toPtz(data) {
+            this.$api.httpApi
+                .cameraIoToPtz({
+                    data: {
+                        cameraId: this.id,
+                        cameraIOId: data.id,
+                        name: data.name,
+                    },
+                })
+                .then((res) => {
+                    console.log(res);
+                })
+                .catch((err) => {});
         },
 
-        zoomDecStart(){
-            console.log('变倍-按下')
-            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
-            this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        zoomDecStop(){
-            console.log('变倍-抬起')
-            this.zoomSubUrl=require('@/assets/sub-icon.png')
-            this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        zoomAddStart(){
-            console.log('变倍+按下')
-            this.zoomAddUrl=require('@/assets/add-active-icon.png')
-            this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        zoomAddStop(){
-            console.log('变倍+抬起')
-            this.zoomAddUrl=require('@/assets/add-icon.png')
-            this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusDecStart(){
-            console.log('变焦-按下')
-            this.focusSubUrl=require('@/assets/sub-active-icon.png')
-            this.$axios.post('/camera/control/focusDec/start/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusDecStop(){
-            console.log('变焦-抬起')
-            this.focusSubUrl=require('@/assets/sub-icon.png')
-            this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusAddStart(){
-            console.log('变焦+按下')
-            this.focusAddUrl=require('@/assets/add-active-icon.png')
-            this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusAddStop(){
-            console.log('变焦+抬起')
-            this.focusAddUrl=require('@/assets/add-icon.png')
-            this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisDecStart(){
-            console.log('光圈-按下')
-            this.irisSubUrl=require('@/assets/sub-active-icon.png')
-            this.$axios.post('/camera/control/irisDec/start/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisDecStop(){
-            console.log('光圈-抬起')
-            this.irisSubUrl=require('@/assets/sub-icon.png')
-            this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisAddStart(){
-            console.log('光圈+按下')
-            this.irisAddUrl=require('@/assets/add-active-icon.png')
-            this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisAddStop(){
-            console.log('光圈+抬起')
-            this.irisAddUrl=require('@/assets/add-icon.png')
-            this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftUpStart(){
-            console.log('左上鼠标按下')
-            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
-            this.$axios.post('/camera/control/leftUp/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftUpStop(){
-            console.log('左上鼠标抬起')
-            this.leftUpUrl=require('@/assets/left-up-icon.png')
-            this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        upStart(){
-            console.log('上鼠标按下')
-            this.upUrl=require('@/assets/up-active-icon.png')
-            this.$axios.post('/camera/control/up/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        upStop(){
-            console.log('上鼠标抬起')
-            this.upUrl=require('@/assets/up-icon.png')
-            this.$axios.post('/camera/control/up/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightUpStart(){
-            console.log('右上鼠标按下')
-            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
-            this.$axios.post('/camera/control/rightUp/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightUpStop(){
-            console.log('右上鼠标抬起')
-            this.rightUpUrl=require('@/assets/right-up-icon.png')
-            this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
+        zoomDecStart() {
+            console.log("变倍-按下");
+            this.zoomSubUrl = require("@/assets/sub-active-icon.png");
+            this.$axios
+                .post("/camera/control/zoomDec/start/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        zoomDecStop() {
+            console.log("变倍-抬起");
+            this.zoomSubUrl = require("@/assets/sub-icon.png");
+            this.$axios
+                .post("/camera/control/zoomDec/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        zoomAddStart() {
+            console.log("变倍+按下");
+            this.zoomAddUrl = require("@/assets/add-active-icon.png");
+            this.$axios
+                .post("/camera/control/zoomAdd/start/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        zoomAddStop() {
+            console.log("变倍+抬起");
+            this.zoomAddUrl = require("@/assets/add-icon.png");
+            this.$axios
+                .post("/camera/control/zoomAdd/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusDecStart() {
+            console.log("变焦-按下");
+            this.focusSubUrl = require("@/assets/sub-active-icon.png");
+            this.$axios
+                .post("/camera/control/focusDec/start/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusDecStop() {
+            console.log("变焦-抬起");
+            this.focusSubUrl = require("@/assets/sub-icon.png");
+            this.$axios
+                .post("/camera/control/focusDec/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusAddStart() {
+            console.log("变焦+按下");
+            this.focusAddUrl = require("@/assets/add-active-icon.png");
+            this.$axios
+                .post("/camera/control/focusAdd/start/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusAddStop() {
+            console.log("变焦+抬起");
+            this.focusAddUrl = require("@/assets/add-icon.png");
+            this.$axios
+                .post("/camera/control/focusAdd/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisDecStart() {
+            console.log("光圈-按下");
+            this.irisSubUrl = require("@/assets/sub-active-icon.png");
+            this.$axios
+                .post("/camera/control/irisDec/start/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisDecStop() {
+            console.log("光圈-抬起");
+            this.irisSubUrl = require("@/assets/sub-icon.png");
+            this.$axios
+                .post("/camera/control/irisDec/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisAddStart() {
+            console.log("光圈+按下");
+            this.irisAddUrl = require("@/assets/add-active-icon.png");
+            this.$axios
+                .post("/camera/control/irisAdd/start/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisAddStop() {
+            console.log("光圈+抬起");
+            this.irisAddUrl = require("@/assets/add-icon.png");
+            this.$axios
+                .post("/camera/control/irisAdd/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftUpStart() {
+            console.log("左上鼠标按下");
+            this.leftUpUrl = require("@/assets/left-up-active-icon.png");
+            this.$axios
+                .post("/camera/control/leftUp/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftUpStop() {
+            console.log("左上鼠标抬起");
+            this.leftUpUrl = require("@/assets/left-up-icon.png");
+            this.$axios
+                .post("/camera/control/leftUp/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        upStart() {
+            console.log("上鼠标按下");
+            this.upUrl = require("@/assets/up-active-icon.png");
+            this.$axios
+                .post("/camera/control/up/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
         },
-        leftStart(){
+        upStop() {
+            console.log("上鼠标抬起");
+            this.upUrl = require("@/assets/up-icon.png");
+            this.$axios
+                .post("/camera/control/up/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightUpStart() {
+            console.log("右上鼠标按下");
+            this.rightUpUrl = require("@/assets/right-up-active-icon.png");
+            this.$axios
+                .post("/camera/control/rightUp/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightUpStop() {
+            console.log("右上鼠标抬起");
+            this.rightUpUrl = require("@/assets/right-up-icon.png");
+            this.$axios
+                .post("/camera/control/rightUp/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftStart() {
             // console.log(this.id)
-            console.log('左转鼠标按下')
-            this.leftUrl=require('@/assets/left-active-icon.png')
-            this.$axios.post('/camera/control/left/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftStop(){
-            this.leftUrl=require('@/assets/left-icon.png')
-            console.log('左转鼠标抬起')
-            this.$axios.post('/camera/control/left/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightStart(){
-            console.log('右转鼠标按下')
-            this.rightUrl=require('@/assets/right-active-icon.png')
-            this.$axios.post('/camera/control/right/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightStop(){
-            console.log('右转鼠标抬起')
-            this.rightUrl=require('@/assets/right-icon.png')
-            this.$axios.post('/camera/control/right/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftDownStart(){
-            console.log('左下鼠标按下')
-            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
-            this.$axios.post('/camera/control/leftDown/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftDownStop(){
-            console.log('左下鼠标抬起')
-            this.leftDownUrl=require('@/assets/left-down-icon.png')
-            this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        downStart(){
-            console.log('下鼠标按下')
-            this.downUrl=require('@/assets/down-active-icon.png')
-            this.$axios.post('/camera/control/down/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        downStop(){
-            console.log('下鼠标抬起')
-            this.downUrl=require('@/assets/down-icon.png')
-            this.$axios.post('/camera/control/down/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightDownStart(){
-            console.log('右下鼠标按下')
-            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
-            this.$axios.post('/camera/control/rightDown/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightDownStop(){
-            console.log('右下鼠标抬起')
-            this.rightDownUrl=require('@/assets/right-down-icon.png')
-            this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
+            console.log("左转鼠标按下");
+            this.leftUrl = require("@/assets/left-active-icon.png");
+            this.$axios
+                .post("/camera/control/left/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftStop() {
+            this.leftUrl = require("@/assets/left-icon.png");
+            console.log("左转鼠标抬起");
+            this.$axios
+                .post("/camera/control/left/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightStart() {
+            console.log("右转鼠标按下");
+            this.rightUrl = require("@/assets/right-active-icon.png");
+            this.$axios
+                .post("/camera/control/right/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightStop() {
+            console.log("右转鼠标抬起");
+            this.rightUrl = require("@/assets/right-icon.png");
+            this.$axios
+                .post("/camera/control/right/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftDownStart() {
+            console.log("左下鼠标按下");
+            this.leftDownUrl = require("@/assets/left-down-active-icon.png");
+            this.$axios
+                .post("/camera/control/leftDown/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftDownStop() {
+            console.log("左下鼠标抬起");
+            this.leftDownUrl = require("@/assets/left-down-icon.png");
+            this.$axios
+                .post("/camera/control/leftDown/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        downStart() {
+            console.log("下鼠标按下");
+            this.downUrl = require("@/assets/down-active-icon.png");
+            this.$axios
+                .post("/camera/control/down/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        downStop() {
+            console.log("下鼠标抬起");
+            this.downUrl = require("@/assets/down-icon.png");
+            this.$axios
+                .post("/camera/control/down/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightDownStart() {
+            console.log("右下鼠标按下");
+            this.rightDownUrl = require("@/assets/right-down-active-icon.png");
+            this.$axios
+                .post("/camera/control/rightDown/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightDownStop() {
+            console.log("右下鼠标抬起");
+            this.rightDownUrl = require("@/assets/right-down-icon.png");
+            this.$axios
+                .post("/camera/control/rightDown/stop/" + this.id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
         },
     },
 };
 </script>
 <style lang="scss" scoped>
-    .add-edit-model{
-        .across-layout{
-            display: flex;
-        }
-        .ant-divider-horizontal{
-            margin:6px 0;
-        }
+.add-edit-model {
+    .across-layout {
+        display: flex;
     }
-    .test-model{
-        position:fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color:rgba(0,0,0,0.5);
-        z-index:1000;
+    .ant-divider-horizontal {
+        margin: 6px 0;
+    }
+}
+.test-model {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    #video-test {
+        width: 100%;
+        height: 100%;
+    }
+    .video-close {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        color: #ffffff;
+        font-size: 24px;
+        width: 32px;
+        height: 32px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
-        #video-test {
-            width: 100%;
-            height: 100%;
+        cursor: pointer;
+        z-index: 10;
+    }
+    .operation-list {
+        position: absolute;
+        right: 200px;
+        bottom: 20px;
+        /*width: 150px;*/
+        /*border: solid 1px blue;*/
+        z-index: 10;
+        .operation-item {
+            img {
+                width: 42px;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                -webkit-user-drag: none;
+                user-select: none;
+            }
+            span {
+                padding: 5px 10px;
+                background: rgba(0, 0, 0, 0.5);
+                font-size: 18px;
+                color: #ffffff;
+            }
         }
-        .video-close{
-            position: absolute;
-            right: 20px;
-            top: 20px;
-            color: #ffffff;
-            font-size: 24px;
-            width: 32px;
-            height: 32px;
-            background: rgba(0,0,0,0.5);
-            border-radius: 50%;
+    }
+    .direction-list {
+        position: absolute;
+        right: 30px;
+        bottom: 20px;
+        width: 150px;
+        z-index: 10;
+        /*border: solid 1px blue;*/
+        .direction-item {
             display: flex;
             align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 10;
-        }
-        .operation-list{
-            position: absolute;
-            right: 200px;
-            bottom: 20px;
-            /*width: 150px;*/
-            /*border: solid 1px blue;*/
-            z-index: 10;
-            .operation-item{
-                img{
-                    width: 42px;
-                    -webkit-user-select: none;
-                    -ms-user-select: none;
-                    -webkit-user-drag: none;
-                    user-select: none;
-                }
-                span{
-                    padding: 5px 10px;
-                    background: rgba(0,0,0,0.5);
-                    font-size: 18px;
-                    color: #ffffff;
-                }
+            justify-content: space-between;
+            img {
+                width: 42px;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                -webkit-user-drag: none;
+                user-select: none;
             }
         }
-        .direction-list{
-            position: absolute;
-            right: 30px;
-            bottom: 20px;
-            width: 150px;
-            z-index: 10;
-            /*border: solid 1px blue;*/
-            .direction-item{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                img{
-                    width: 42px;
-                    -webkit-user-select: none;
-                    -ms-user-select: none;
-                    -webkit-user-drag: none;
-                    user-select: none;
-                }
-            }
-        }
-        img{
-            cursor: pointer;
-        }
     }
-    .config-model{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .operation-list{
-            position: absolute;
-            right: 1000px;
-            bottom: 20px;
-            /*width: 150px;*/
-            /*border: solid 1px blue;*/
-            z-index: 10;
-            .operation-item{
-                img{
-                    width: 32px;
-                    -webkit-user-select: none;
-                    -ms-user-select: none;
-                    -webkit-user-drag: none;
-                    user-select: none;
-                }
-                span{
-                    padding: 3px 6px;
-                    background: rgba(0,0,0,0.5);
-                    font-size: 16px;
-                    color: #ffffff;
-                }
+    img {
+        cursor: pointer;
+    }
+}
+.config-model {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .operation-list {
+        position: absolute;
+        right: 1000px;
+        bottom: 20px;
+        /*width: 150px;*/
+        /*border: solid 1px blue;*/
+        z-index: 10;
+        .operation-item {
+            img {
+                width: 32px;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                -webkit-user-drag: none;
+                user-select: none;
             }
-        }
-        .direction-list{
-            position: absolute;
-            right: 830px;
-            bottom: 20px;
-            width: 150px;
-            z-index: 10;
-            /*border: solid 1px blue;*/
-            .direction-item{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                img{
-                    width: 32px;
-                    -webkit-user-select: none;
-                    -ms-user-select: none;
-                    -webkit-user-drag: none;
-                    user-select: none;
-                }
+            span {
+                padding: 3px 6px;
+                background: rgba(0, 0, 0, 0.5);
+                font-size: 16px;
+                color: #ffffff;
             }
         }
-        img{
-            cursor: pointer;
-        }
-        .config-table {
-            width: 800px;
-            height: 600px;
-            overflow: hidden;
-
-            h2 {
-                padding: 15px;
-                font-size: 20px;
-                background: #fafafa;
-                margin: 0;
+    }
+    .direction-list {
+        position: absolute;
+        right: 830px;
+        bottom: 20px;
+        width: 150px;
+        z-index: 10;
+        /*border: solid 1px blue;*/
+        .direction-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            img {
+                width: 32px;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                -webkit-user-drag: none;
+                user-select: none;
             }
         }
     }
-    .vxgplayer{
-        border: none;
-        margin: 0;
-        display: block;
+    img {
+        cursor: pointer;
     }
-    .ant-btn{
-        white-space: inherit;
-        text-align: left;
+    .config-table {
+        width: 800px;
+        height: 600px;
+        overflow: hidden;
+
+        h2 {
+            padding: 15px;
+            font-size: 20px;
+            background: #fafafa;
+            margin: 0;
+        }
     }
+}
+.vxgplayer {
+    border: none;
+    margin: 0;
+    display: block;
+}
+.ant-btn {
+    white-space: inherit;
+    text-align: left;
+}
 </style>
diff --git a/src/views/cameraManage/modelCamera.vue b/src/views/cameraManage/modelCamera.vue
new file mode 100644
index 0000000..a6115aa
--- /dev/null
+++ b/src/views/cameraManage/modelCamera.vue
@@ -0,0 +1,790 @@
+<template>
+    
+         
+
+             <a-modal
+                 v-model="isShow"
+                 @cancel="handleCancel"
+                 :footer="null"
+                 :maskClosable="false"
+                 width="1600px"
+                 :bodyStyle="{padding:0,display:'flex'}"
+                 :centered="true"
+                 class="config-model"
+             >
+                
+                 <video width="900"
+                         height="600"
+                :id="`config-camera${id}`" 
+                autoplay muted ></video>
+                 <div class="operation-list">
+                     <div class="operation-item">
+                         <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
+                              @mouseup="zoomDecStop" @mouseleave="zoomDecStop">
+                         <span>变倍</span>
+                         <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
+                              @mouseup="zoomAddStop" @mouseleave="zoomAddStop">
+                     </div>
+                     <div class="operation-item">
+                         <img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
+                              @mouseup="focusDecStop" @mouseleave="focusDecStop">
+                         <span>变焦</span>
+                         <img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
+                              @mouseup="focusAddStop" @mouseleave="focusAddStop">
+                     </div>
+                     <div class="operation-item">
+                         <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop" @mouseleave="irisDecStop">
+                         <span>光圈</span>
+                         <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop" @mouseleave="irisAddStop">
+                     </div>
+                 </div>
+                 <div class="direction-list">
+                     <div class="direction-item">
+                         <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop" @mouseleave="leftUpStop">
+                         <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop" @mouseleave="upStop">
+                         <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop" @mouseleave="rightUpStop">
+                     </div>
+                     <div class="direction-item">
+                         <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop" @mouseleave="leftStop">
+                         <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop" @mouseleave="rightStop">
+                     </div>
+                     <div class="direction-item">
+                         <img :src="leftDownUrl" alt="" @mousedown="leftDownStart"
+                              @mouseup="leftDownStop" @mouseleave="leftDownStop">
+                         <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop" @mouseleave="downStop">
+                         <img :src="rightDownUrl" alt="" @mousedown="rightDownStart"
+                              @mouseup="rightDownStop" @mouseleave="rightDownStop">
+                     </div>
+                 </div>
+                 <div class="config-table">
+                     <h2>球机配置</h2>
+                     <a-table
+                         :columns="columns"
+                         :row-key="record => record.name"
+                         :data-source="configData"
+                         @change="getConfigIoList"
+                         bordered
+                         :pagination="false"
+                         :scroll="{y:335}"
+                     >
+                     <span slot="name" slot-scope="text,record">
+                         <a-button type="link" @click="toPtz(record)">{{text}}({{record.code}})</a-button>
+                      </span>
+                         <span slot="position" slot-scope="text, record">
+                            <div v-if="text">
+                               已写入
+                               <a-button type="link" class="plc" @click="coverage(0,record)">
+                                    覆盖
+                               </a-button>
+                            </div>
+                            <a-button type="primary" class="plc" v-else @click="coverage(0,record)">
+                                    写入
+                            </a-button>
+
+                      </span>
+                         
+                         
+                     </a-table>
+                 </div>
+             </a-modal>
+
+</template>
+<script>
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: { span: 8 },    //lable长度
+    wrapperCol: { span: 14 },  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8, offset: 4 },
+};
+const columns = [
+    {
+        title: 'PLC IO指令',
+        dataIndex: 'name',
+        scopedSlots: { customRender: 'name' }
+    },
+    {
+        title: '配置',
+        dataIndex: 'position',
+        scopedSlots: { customRender: 'position' }
+    }
+];
+import WebRtcPlayer from "../../../public/static/webrtcplayer"
+export default {
+    props:[ 'visible', 'modelType', 'modelData'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function(newVal){
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelType: function(newVal){
+            this.type = newVal;
+        },
+        modelData: function(newVal){
+            // console.log(newVal)
+            this.mdata=newVal
+            console.log(this.type)
+            if(newVal.id && this.type=='edit'){
+                this.id = newVal.id
+                // console.log('触发了watch，重新赋值')
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                        name:newVal.name,
+                        ip:newVal.ip,
+                        rtsp:newVal.rtsp,
+                        rtcServer:newVal.rtcServer,
+                        rtcServerPort:newVal.rtcServerPort
+                    })
+                })
+            }else if (newVal.id && this.type=='config'){
+                this.id = newVal.id
+                this.mdata = newVal
+                console.log(newVal)
+            }
+
+        },
+    },
+    data() {
+        return {
+            isShow:false,
+            player:null,
+            type:'',
+            title:'',
+            closable:false,//取消model模态框右上角的X号
+            formItemAcrossLayout,
+            formItemVerticalLayout,
+            confirmLoading: false,
+            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
+            id:'',
+            mdata:[],
+            //测试相关
+            zoomSubUrl:require('@/assets/sub-icon.png'),
+            zoomAddUrl:require('@/assets/add-icon.png'),
+            focusSubUrl:require('@/assets/sub-icon.png'),
+            focusAddUrl:require('@/assets/add-icon.png'),
+            irisSubUrl:require('@/assets/sub-icon.png'),
+            irisAddUrl:require('@/assets/add-icon.png'),
+            leftUpUrl:require('@/assets/left-up-icon.png'),
+            upUrl:require('@/assets/up-icon.png'),
+            rightUpUrl:require('@/assets/right-up-icon.png'),
+            leftUrl:require('@/assets/left-icon.png'),
+            rightUrl:require('@/assets/right-icon.png'),
+            leftDownUrl:require('@/assets/left-down-icon.png'),
+            downUrl:require('@/assets/down-icon.png'),
+            rightDownUrl:require('@/assets/right-down-icon.png'),
+            columns,
+            configData:[]
+        };
+    },
+    mounted() {
+        if (this.$route.query.modelType == 'test') {
+            this.isShow = true
+            this.id = this.$route.query.modelData.id
+            this.type = this.$route.query.modelType
+            this.mdata = this.$route.query.modelData
+            this.$nextTick(() => {
+                this.autoPlay(this.id)
+            })
+        } else if (this.$route.query.modelType == 'config') {
+            
+            this.isShow = true
+            this.id = this.$route.query.modelData.id
+            this.getConfigIoList()
+            this.type = this.$route.query.modelType
+            this.mdata = this.$route.query.modelData
+            this.$nextTick(() => {
+                this.autoPlay(this.id)
+            })
+            
+        }
+    },
+    destroy(){
+        if(this.player != null){
+            this.player.destroy()
+        }
+        
+    },
+    methods: {
+        handleOk() {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.form.validateFields((err, values) => {
+                    console.log(values)
+                    if (!err) {
+                        console.log(this.title)
+                        if(this.type=='add'){
+                            this.$api.httpApi.addCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('新增球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }else if(this.type=='edit'){
+                            values.id = this.id
+                            this.$api.httpApi.editCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('编辑球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }
+                    }
+                });
+                this.confirmLoading = false;
+            }, 500);
+        },
+
+        handleCancel() {
+            
+            console.log('Clicked cancel button');
+            this.$emit('close', false, {})
+            if(this.type=='test') {
+                this.$router.go(-1);
+            }else if(this.type=='config') {
+                if(this.player != null){
+                    this.player.destroy()
+                }
+                this.$router.go(-1);
+            }
+            
+        },
+       
+        autoPlay(id){
+            let video = document.getElementById('config-camera'+id);
+            if(video){
+                let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
+                console.log("server:"+server)
+                let player = new WebRtcPlayer(server,video,'camera'+id);
+                console.log("okkkkkk")
+                //player.load('camera'+id);
+                this.player = player
+            }
+            
+        },
+        getConfigIoList(){
+            this.$axios.post('/camera/'+this.id+'/io/list', {
+                data: {
+                }
+            }).then(res => {
+                console.log(res)
+                if(res.code==200){
+                    this.configData=res.data
+                }
+            }).catch(err => {
+
+            });
+        },
+        
+        coverage(type,data){
+            
+            this.$api.httpApi.writeInCameraIoptz({
+                data: {
+                    cameraId: this.id,
+                    cameraIOId: data.id,
+                    name: data.name,
+                    code: data.code,
+                    type: type
+                }
+            }).then(res => {
+                
+                this.getConfigIoList()
+            }).catch(err => {
+
+            });
+        },
+        toPtz(data){
+            this.$api.httpApi.cameraIoToPtz({
+                data: {
+                    cameraId:this.id,
+                    cameraIOId:data.id,
+                    name:data.name,
+                }
+            }).then(res => {
+                console.log(res)
+            }).catch(err => {
+
+            });
+        },
+
+        zoomDecStart(){
+            console.log('变倍-按下')
+            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
+            this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        zoomDecStop(){
+            console.log('变倍-抬起')
+            this.zoomSubUrl=require('@/assets/sub-icon.png')
+            this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        zoomAddStart(){
+            console.log('变倍+按下')
+            this.zoomAddUrl=require('@/assets/add-active-icon.png')
+            this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        zoomAddStop(){
+            console.log('变倍+抬起')
+            this.zoomAddUrl=require('@/assets/add-icon.png')
+            this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusDecStart(){
+            console.log('变焦-按下')
+            this.focusSubUrl=require('@/assets/sub-active-icon.png')
+            this.$axios.post('/camera/control/focusDec/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusDecStop(){
+            console.log('变焦-抬起')
+            this.focusSubUrl=require('@/assets/sub-icon.png')
+            this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusAddStart(){
+            console.log('变焦+按下')
+            this.focusAddUrl=require('@/assets/add-active-icon.png')
+            this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        focusAddStop(){
+            console.log('变焦+抬起')
+            this.focusAddUrl=require('@/assets/add-icon.png')
+            this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisDecStart(){
+            console.log('光圈-按下')
+            this.irisSubUrl=require('@/assets/sub-active-icon.png')
+            this.$axios.post('/camera/control/irisDec/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisDecStop(){
+            console.log('光圈-抬起')
+            this.irisSubUrl=require('@/assets/sub-icon.png')
+            this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisAddStart(){
+            console.log('光圈+按下')
+            this.irisAddUrl=require('@/assets/add-active-icon.png')
+            this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        irisAddStop(){
+            console.log('光圈+抬起')
+            this.irisAddUrl=require('@/assets/add-icon.png')
+            this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftUpStart(){
+            console.log('左上鼠标按下')
+            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
+            this.$axios.post('/camera/control/leftUp/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftUpStop(){
+            console.log('左上鼠标抬起')
+            this.leftUpUrl=require('@/assets/left-up-icon.png')
+            this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        upStart(){
+            console.log('上鼠标按下')
+            this.upUrl=require('@/assets/up-active-icon.png')
+            this.$axios.post('/camera/control/up/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        upStop(){
+            console.log('上鼠标抬起')
+            this.upUrl=require('@/assets/up-icon.png')
+            this.$axios.post('/camera/control/up/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightUpStart(){
+            console.log('右上鼠标按下')
+            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
+            this.$axios.post('/camera/control/rightUp/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightUpStop(){
+            console.log('右上鼠标抬起')
+            this.rightUpUrl=require('@/assets/right-up-icon.png')
+            this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftStart(){
+            // console.log(this.id)
+            console.log('左转鼠标按下')
+            this.leftUrl=require('@/assets/left-active-icon.png')
+            this.$axios.post('/camera/control/left/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftStop(){
+            this.leftUrl=require('@/assets/left-icon.png')
+            console.log('左转鼠标抬起')
+            this.$axios.post('/camera/control/left/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightStart(){
+            console.log('右转鼠标按下')
+            this.rightUrl=require('@/assets/right-active-icon.png')
+            this.$axios.post('/camera/control/right/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightStop(){
+            console.log('右转鼠标抬起')
+            this.rightUrl=require('@/assets/right-icon.png')
+            this.$axios.post('/camera/control/right/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftDownStart(){
+            console.log('左下鼠标按下')
+            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
+            this.$axios.post('/camera/control/leftDown/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        leftDownStop(){
+            console.log('左下鼠标抬起')
+            this.leftDownUrl=require('@/assets/left-down-icon.png')
+            this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        downStart(){
+            console.log('下鼠标按下')
+            this.downUrl=require('@/assets/down-active-icon.png')
+            this.$axios.post('/camera/control/down/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        downStop(){
+            console.log('下鼠标抬起')
+            this.downUrl=require('@/assets/down-icon.png')
+            this.$axios.post('/camera/control/down/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightDownStart(){
+            console.log('右下鼠标按下')
+            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
+            this.$axios.post('/camera/control/rightDown/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightDownStop(){
+            console.log('右下鼠标抬起')
+            this.rightDownUrl=require('@/assets/right-down-icon.png')
+            this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+    .add-edit-model{
+        .across-layout{
+            display: flex;
+        }
+        .ant-divider-horizontal{
+            margin:6px 0;
+        }
+    }
+    .test-model{
+        position:fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color:rgba(0,0,0,0.5);
+        z-index:1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        #video-test {
+            width: 100%;
+            height: 100%;
+        }
+        .video-close{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            color: #ffffff;
+            font-size: 24px;
+            width: 32px;
+            height: 32px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .operation-list{
+            position: absolute;
+            right: 200px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            z-index: 10;
+            .operation-item{
+                img{
+                    width: 42px;
+                    -webkit-user-select: none;
+                    -ms-user-select: none;
+                    -webkit-user-drag: none;
+                    user-select: none;
+                }
+                span{
+                    padding: 5px 10px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 18px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 30px;
+            bottom: 20px;
+            width: 150px;
+            z-index: 10;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 42px;
+                    -webkit-user-select: none;
+                    -ms-user-select: none;
+                    -webkit-user-drag: none;
+                    user-select: none;
+                }
+            }
+        }
+        img{
+            cursor: pointer;
+        }
+    }
+    .config-model{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .operation-list{
+            position: absolute;
+            right: 1000px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            z-index: 10;
+            .operation-item{
+                img{
+                    width: 32px;
+                    -webkit-user-select: none;
+                    -ms-user-select: none;
+                    -webkit-user-drag: none;
+                    user-select: none;
+                }
+                span{
+                    padding: 3px 6px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 16px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 830px;
+            bottom: 20px;
+            width: 150px;
+            z-index: 10;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 32px;
+                    -webkit-user-select: none;
+                    -ms-user-select: none;
+                    -webkit-user-drag: none;
+                    user-select: none;
+                }
+            }
+        }
+        img{
+            cursor: pointer;
+        }
+        .config-table {
+            width: 800px;
+            height: 600px;
+            overflow: hidden;
+
+            h2 {
+                padding: 15px;
+                font-size: 20px;
+                background: #fafafa;
+                margin: 0;
+            }
+        }
+    }
+    .vxgplayer{
+        border: none;
+        margin: 0;
+        display: block;
+    }
+    .ant-btn{
+        white-space: inherit;
+        text-align: left;
+    }
+</style>
diff --git a/src/views/picTest/index.vue b/src/views/picTest/index.vue
new file mode 100644
index 0000000..6865c90
--- /dev/null
+++ b/src/views/picTest/index.vue
@@ -0,0 +1,191 @@
+<template>
+    <div class="app-container">
+        <!-- 图片上传区域 -->
+        <a-upload
+            :before-upload="beforeUpload"
+            showUploadlist="false"
+            @change="handleChange"
+            :custom-request="uploadImage" 
+            accept=".jpg,.jpeg,.png,.bmp"
+        >
+        <a-button>点击选择图片</a-button>
+        </a-upload>
+        <!-- 获取区域坐标按钮 -->
+       
+        <a-input v-model="typeID" placeholder="Basic usage" />
+        <a-button v-if="typeID!=''&& coordinates.length>0" @click="getCoordinates">提交</a-button>
+        <a-button v-if="typeID!=''&& coordinates.length>0" @click="removeCoordinates">清除</a-button>
+
+        <!-- 显示坐标 -->
+        <div
+            v-if="coordinates.length"
+            class="coordinates"
+        >
+            <p><strong>坐标:</strong> {{ coordinates }}</p>
+        </div>
+        <!-- 图片展示区域 -->
+        <div
+            v-if="imageUrl&&typeID!=''"
+            class="image-container"
+            @mousedown="onMouseDown"
+            @mouseup="onMouseUp"
+            @mousemove="onMouseMove"
+        >
+            <img
+                :src="imageUrl"
+                alt="Selected Image"
+                ref="image"
+                style="width: 100%;height: 100%;object-fit: none;"
+            />
+            <!-- 绘制矩形 -->
+            <div
+                v-if="isDrawing"
+                :style="squareStyle"
+                class="square"
+            ></div>
+        </div>
+
+    </div>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            imageUrl: "", // 存储图片 URL
+            isDrawing: false, // 是否正在绘制矩形
+            startX: 0, // 起始位置
+            startY: 0, // 起始位置
+            currentX: 0, // 当前鼠标位置
+            currentY: 0, // 当前鼠标位置
+            typeID:"",
+            fileName: '',        // 存储文件名称
+            coordinates: [], // 存储选定的区域坐标
+            visible:false,
+            modelType:'',
+            modelData:[],
+            
+        };
+    },
+    computed: {
+        squareStyle() {
+            // 计算矩形的样式
+            const width = Math.abs(this.currentX - this.startX);
+            const height = Math.abs(this.currentY - this.startY);
+            const left = Math.min(this.startX, this.currentX);
+            const top = Math.min(this.startY, this.currentY);
+            return {
+                width: `${width}px`,
+                height: `${height}px`,
+                left: `${left}px`,
+                top: `${top}px`,
+                position: "absolute",
+                border: "2px solid red",
+            };
+        },
+    },
+    methods: {
+        // 上传图片之前的处理
+        getCoordinates(){
+            console.log(this.typeID);
+            this.$api.httpApi.EaseAiController({
+                data: {
+                    locationURL: this.typeID+"/"+this.fileName,
+                    yoloBodies: this.coordinates,
+                }
+            }).then(res => {
+                this.$message.info(`选定的区域坐标: ${JSON.stringify(this.coordinates)}`
+                );
+            }).catch(err => {
+
+            });
+        },
+        removeCoordinates(){
+            this.typeID ='';
+            this.imageUrl = '';
+            this.coordinates =[];
+        },
+        handleChange(info){
+
+        },
+        beforeUpload(file) {
+            console.log(file.name); // 输出文件名（如果需要）
+            this.fileName = file.name;
+            const isJPG =
+                file.type === "image/jpeg" || file.type === "image/png";
+            if (!isJPG) {
+                this.$message.error("只能选择JPG/PNG 图片!");
+            }
+            return isJPG;
+        },
+        // 自定义图片上传
+        uploadImage({ file, onSuccess }) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.imageUrl = e.target.result;
+                onSuccess(null, file);
+            };
+            reader.readAsDataURL(file);
+        },
+        // 鼠标按下，开始绘制
+        onMouseDown(event) {
+            const rect = this.$refs.image.getBoundingClientRect();
+            this.startX = event.clientX - rect.left;
+            this.startY = event.clientY - rect.top;
+            this.isDrawing = true;
+        },
+        // 鼠标移动时，实时更新矩形位置
+        onMouseMove(event) {
+            if (!this.isDrawing) return;
+            const rect = this.$refs.image.getBoundingClientRect();
+            this.currentX = event.clientX - rect.left;
+            this.currentY = event.clientY - rect.top;
+        },
+        // 鼠标松开，记录区域坐标
+        onMouseUp() {
+            if (!this.isDrawing) return;
+            const width = Math.abs(this.currentX - this.startX);
+            const height = Math.abs(this.currentY - this.startY);
+            if (width > 0 && height > 0) {
+                // 保存坐标
+                this.coordinates.push({
+                    x: Math.min(this.startX, this.currentX),
+                    y: Math.min(this.startY, this.currentY),
+                    width,
+                    height,
+                    typeID:this.typeID
+                });
+            }
+            this.isDrawing = false;
+        },
+        // 获取坐标并输出
+        logCoordinates() {
+            console.log(this.coordinates);
+            this.$message.info(
+                `选定的区域坐标: ${JSON.stringify(this.coordinates)}`
+            );
+        },
+    },
+};
+</script>
+  
+  <style scoped>
+.app-container {
+    padding: 20px;
+}
+
+.image-container {
+    position: relative;
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.square {
+    position: absolute;
+    border: 2px solid red;
+}
+
+.coordinates {
+    margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 16f514f..ca32a05 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -1,11 +1,184 @@
 <template>
     <div class="realTime bg-white">
-        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px style="width: 80vw">
-            <a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
-        </a-tabs>
-<!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
+        <!-- <a-tabs
+            default-active-key="1"
+            slot="headerContent"
+            v-model="tabKey"
+            @change="tabsChange"
+            padding:10px
+            style="width: 80vw"
+        >
+            <a-tab-pane
+                :key="item.id.toString()"
+                :tab="item.name"
+                v-for="item in realTimeListData"
+            ></a-tab-pane>
+        </a-tabs> -->
+        <!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
         <a-row :gutter="20">
             <a-col
+                :span="4"
+                style="height:87vh;overflow: scroll;"
+            >
+                <a-input-search
+                    style="margin-bottom: 8px"
+                    placeholder="Search"
+                    @selsect="onChange"
+                />
+                <a-tree
+                    :tree-data="treeData"
+                    @select="rightClick"
+                    :default-selected-keys="[defaultKey]"
+                    :replace-fields="replaceFields"
+                    @expand="onExpand"
+                >
+                    <template
+                        slot="title"
+                        slot-scope="{ title }"
+                    >
+                        <span v-if="title.indexOf(searchValue) > -1">
+                            {{ title.substr(0, title.indexOf(searchValue)) }}
+                            <span style="color: #f50">{{ searchValue }}</span>
+                            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+                        </span>
+                        <span v-else>{{ title }}</span>
+                    </template>
+                </a-tree>
+            </a-col>
+            <a-col :span="20" style="height:87vh;">
+
+                <div style="{
+                        height: 87vh
+                        
+                       
+                    }">
+                    <video
+                        :style="{ height: '87vh',width: '100%', 'object-fit': 'fill' }"
+                        :id="`camera${camera.id}`"
+                        autoplay
+                        muted
+                        controls
+                    >
+                    </video>
+                    <div class="operation-list">
+                        <div class="operation-item">
+                            <img
+                                :src="zoomSubUrl"
+                                alt=""
+                                @mousedown=zoomDecStart($event,camera.id)
+                                @mouseleave=zoomDecStop($event,camera.id)
+                            >
+                            <span>变倍</span>
+                            <img
+                                :src="zoomAddUrl"
+                                alt=""
+                                @mousedown=zoomAddStart($event,camera.id)
+                                @mouseleave=zoomAddStop($event,camera.id)
+                            >
+                        </div>
+                        <div class="operation-item">
+                            <img
+                                :src="focusSubUrl"
+                                alt=""
+                                @mousedown=focusDecStart($event,camera.id)
+                                @mouseleave=focusDecStop($event,camera.id)
+                                @mouseup=focusDecStop($event,camera.id)
+                            >
+                            <span>变焦</span>
+                            <img
+                                :src="focusAddUrl"
+                                alt=""
+                                @mousedown=focusAddStart($event,camera.id)
+                                @mouseleave=focusAddStop($event,camera.id)
+                                @mouseup=focusAddStop($event,camera.id)
+                            >
+                        </div>
+                        <div class="operation-item">
+                            <img
+                                :src="irisSubUrl"
+                                alt=""
+                                @mousedown=irisDecStart($event,camera.id)
+                                @mouseup=irisDecStop($event,camera.id)
+                                @mouseleave=irisDecStop($event,camera.id)
+                            >
+                            <span>光圈</span>
+                            <img
+                                :src="irisAddUrl"
+                                alt=""
+                                @mousedown=irisAddStart($event,camera.id)
+                                @mouseup=irisAddStop($event,camera.id)
+                                @mouseleave=irisAddStop($event,camera.id)
+                            >
+                        </div>
+                    </div>
+                    <div class="direction-list">
+                        <div class="direction-item">
+                            <img
+                                :src="leftUpUrl"
+                                alt=""
+                                @mousedown=leftUpStart($event,camera.id)
+                                @mouseup=leftUpStop($event,camera.id)
+                                @mouseleave=leftUpStop($event,camera.id)
+                            >
+                            <img
+                                :src="upUrl"
+                                alt=""
+                                @mousedown=upStart($event,camera.id)
+                                @mouseup=upStop($event,camera.id)
+                                @mouseleave=upStop($event,camera.id)
+                            >
+                            <img
+                                :src="rightUpUrl"
+                                alt=""
+                                @mousedown=rightUpStart($event,camera.id)
+                                @mouseup=rightUpStop($event,camera.id)
+                                @mouseleave=rightUpStop($event,camera.id)
+                            >
+                        </div>
+                        <div class="direction-item">
+                            <img
+                                :src="leftUrl"
+                                alt=""
+                                @mousedown=leftStart($event,camera.id)
+                                @mouseup=leftStop($event,camera.id)
+                                @mouseleave=leftStop($event,camera.id)
+                            >
+                            <img
+                                :src="rightUrl"
+                                alt=""
+                                @mousedown=rightStart($event,camera.id)
+                                @mouseup=rightStop($event,camera.id)
+                                @mouseleave=rightStop($event,camera.id)
+                            >
+                        </div>
+                        <div class="direction-item">
+                            <img
+                                :src="leftDownUrl"
+                                alt=""
+                                @mousedown=leftDownStart($event,camera.id)
+                                @mouseup=leftDownStop($event,camera.id)
+                                @mouseleave=leftDownStop($event,camera.id)
+                            >
+                            <img
+                                :src="downUrl"
+                                alt=""
+                                @mousedown=downStart($event,camera.id)
+                                @mouseup=downStop($event,camera.id)
+                                @mouseleave=downStop($event,camera.id)
+                            >
+                            <img
+                                :src="rightDownUrl"
+                                alt=""
+                                @mousedown=rightDownStart($event,camera.id)
+                                @mouseup=rightDownStop($event,camera.id)
+                                @mouseleave=rightDownStop($event,camera.id)
+                            >
+                        </div>
+                    </div>
+                </div>
+
+            </a-col>
+            <!-- <a-col
                 v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
                 :span="24 / selectTab.videoStyleColumn"
                 :key="index"
@@ -14,61 +187,15 @@
                         
                         marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
                     }"
-            >
-            <div style="position: relative;width: 100%;">
-                <video :style="{ height: videoHeight,}" :id="`camera${item.id}`"  autoplay muted controls>
-                </video>
-                <div class="operation-list">
-                     <div class="operation-item">
-                         <img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
-                              >
-                         <span>变倍</span>
-                         <img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
-                              >
-                     </div>
-                     <div class="operation-item">
-                         <img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
-                              @mouseup=focusDecStop($event,item.id)>
-                         <span>变焦</span>
-                         <img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
-                              @mouseup=focusAddStop($event,item.id)>
-                     </div>
-                     <div class="operation-item">
-                         <img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
-                         <span>光圈</span>
-                         <img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
-                     </div>
-                 </div>
-                 <div class="direction-list">
-                     <div class="direction-item">
-                         <img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
-                         <img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
-                         <img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
-                     </div>
-                     <div class="direction-item">
-                         <img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
-                         <img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
-                     </div>
-                     <div class="direction-item">
-                         <img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
-                              @mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
-                         <img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
-                         <img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
-                              @mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
-                     </div>
-                 </div>
-            </div>
-                
-                
-            </a-col>
+            > -->
+            <!-- </a-col> -->
         </a-row>
-        
+
     </div>
 </template>
 
 <script>
-
-import WebRtcPlayer from "../../../public/static/webrtcplayer"
+import WebRtcPlayer from "../../../public/static/webrtcplayer";
 export default {
     name: "realTimeMonitoring",
     components: {
@@ -80,420 +207,560 @@ export default {
             url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
             tabKey: "0",
             path: [],
+            expandedKeys: [],
+            searchValue: '',
             player: "",
             visible: false,
             modelData: [],
             clientHeight: 0,
-            
+            camera: null,
             players: [],
-            zoomSubUrl:require('@/assets/sub-icon.png'),
-            zoomAddUrl:require('@/assets/add-icon.png'),
-            focusSubUrl:require('@/assets/sub-icon.png'),
-            focusAddUrl:require('@/assets/add-icon.png'),
-            irisSubUrl:require('@/assets/sub-icon.png'),
-            irisAddUrl:require('@/assets/add-icon.png'),
-            leftUpUrl:require('@/assets/left-up-icon.png'),
-            upUrl:require('@/assets/up-icon.png'),
-            rightUpUrl:require('@/assets/right-up-icon.png'),
-            leftUrl:require('@/assets/left-icon.png'),
-            rightUrl:require('@/assets/right-icon.png'),
-            leftDownUrl:require('@/assets/left-down-icon.png'),
-            downUrl:require('@/assets/down-icon.png'),
-            rightDownUrl:require('@/assets/right-down-icon.png'),
+            zoomSubUrl: require("@/assets/sub-icon.png"),
+            zoomAddUrl: require("@/assets/add-icon.png"),
+            focusSubUrl: require("@/assets/sub-icon.png"),
+            focusAddUrl: require("@/assets/add-icon.png"),
+            irisSubUrl: require("@/assets/sub-icon.png"),
+            irisAddUrl: require("@/assets/add-icon.png"),
+            leftUpUrl: require("@/assets/left-up-icon.png"),
+            upUrl: require("@/assets/up-icon.png"),
+            rightUpUrl: require("@/assets/right-up-icon.png"),
+            leftUrl: require("@/assets/left-icon.png"),
+            rightUrl: require("@/assets/right-icon.png"),
+            leftDownUrl: require("@/assets/left-down-icon.png"),
+            downUrl: require("@/assets/down-icon.png"),
+            rightDownUrl: require("@/assets/right-down-icon.png"),
+            defaultKey:"",
+            //
+            eventSource: null, // EventSource 实例
+            isConnected: false, // 是否连接
+            receivedMessage: "", // 接收到的消息
+            connectionStatus: "", // 连接状态
+            uid: "", // uuid
+            replaceFields: {
+                children: "child",
+                title: "title",
+            },
+            treeData: [],
         };
     },
     computed: {
-        selectTab() {
-            return (this.realTimeListData.filter(item=> item.streetId == this.tabKey)[0] || {})
-        },
-        cameras() {
-            return this.selectTab.cameras || [];
-        },
+        // selectTab() {
+        //     return (
+        //         this.realTimeListData.filter(
+        //             (item) => item.id == this.tabKey
+        //         )[0] || {}
+        //     );
+        // },
+        // cameras() {
+        //     return this.selectTab.cameras || [];
+        // },
         videoHeight() {
-            return (( this.clientHeight)/ this.selectTab.videoStyleRow ) + 'px'
+            console.log(this.clientHeight + "px");
+            return "700px";
+            // return this.clientHeight + "px";
         },
     },
     //inject: ['reload'],
     mounted() {
-        this.getClientHeight()
-        this.getRealTimeList()
-        
-        this.tabKey = sessionStorage.getItem('tabKey');
-
+        this.getClientHeight();
+        this.getRealTimeList();
+        this.getSSEUid();
+        this.getTreeData();
+        this.tabKey = sessionStorage.getItem("tabKey");
     },
     destroyed() {
-        this.destory()
+        this.stopSSE();
+        this.destory();
     },
     methods: {
+        onExpand(expandedKeys) {
+            this.expandedKeys = expandedKeys;
+            this.autoExpandParent = false;
+        },
+        toPtz(cameraId, cameraIOId) {
+            console.log("toptz：",cameraId, cameraIOId);
+            this.$api.httpApi
+                .cameraIoToPtz({
+                    data: {
+                        cameraId: cameraId,
+                        cameraIOId: cameraIOId,
+                    },
+                })
+                .then((res) => {
+                    console.log(res);
+                })
+                .catch((err) => {});
+        },
+        
+        //触发点击效果
+        handleClick(key) {
+            let result = str.split("-");
+            if (result.length > 1) {
+                //触发相机
+                sessionStorage.setItem("defaultKey", result[0]+"-"+result[1]);
+                this.destory();
+                this.voideoPlay(result[1]);
+            }
+            if (result.length > 2) {
+                //触发plc
+                this.toPtz(result[1],result[2]);
+            }
+        },
+        onChange(e) {
+            const value = e.target.value;
+            const expandedKeys = dataList
+                .map((item) => {
+                    if (item.title.indexOf(value) > -1) {
+                        return getParentKey(item.key, gData);
+                    }
+                    return null;
+                })
+                .filter((item, i, self) => item && self.indexOf(item) === i);
+            Object.assign(this, {
+                expandedKeys,
+                searchValue: value,
+                autoExpandParent: true,
+            });
+        },
+        // 选择节点时的处理方法
+        handleSelect(selectedKeys, info) {
+            // 确保只有一个节点被选中
+            this.selectedKeys = selectedKeys;
+        },
+        getTreeData() {
+            this.$api.httpApi
+                .getDeviceTree({})
+                .then((res) => {
+                    this.treeData = res.data;
+                })
+                .catch((err) => {});
+        },
+        // 启动 SSE 连接
+        getSSEUid() {
+            this.$api.httpApi
+                .sseGetUid({})
+                .then((res) => {
+                    this.startSSE(res.data);
+                    this.uid = res.data;
+                })
+                .catch((err) => {});
+        },
+
+        startSSE(uid) {
+            this.eventSource = new EventSource("/api/sse/createSse/" + uid); // 与服务器建立 SSE 连接
+            this.eventSource.onopen = () => {
+                this.isConnected = true;
+                this.connectionStatus = "连接成功";
+            };
+
+            this.eventSource.onmessage = (event) => {
+                // 接收消息并更新
+                const data = JSON.parse(event.data);
+                this.receivedMessage = data;
+                console.log("接收到的消息:", data);
+            };
+
+            this.eventSource.onerror = (error) => {
+                console.error("SSE 错误:", error);
+                this.connectionStatus = "连接出错";
+                this.isConnected = false;
+            };
+        },
+        rightClick(selectedKeys, info) {
+            const selectedNode = info.selectedNodes[0];
+            console.log("onCheck", selectedNode); // 处理节点的变色
+            const node = document.querySelector(
+                `[title="${selectedNode.label}"]`
+            );
+
+            if (node) {
+                // 改变选中节点的背景色
+                node.style.backgroundColor = "lightblue";
+            }
+        },
+
+        // 关闭 SSE 连接
+        stopSSE() {
+            if (this.eventSource) {
+                this.eventSource.close();
+                this.$api.httpApi
+                    .sseClose({
+                        data: {
+                            uid: this.uid,
+                        },
+                    })
+                    .then((res) => {})
+                    .catch((err) => {});
+                this.isConnected = false;
+                this.connectionStatus = "连接已关闭";
+            }
+        },
         getClientHeight() {
             this.clientHeight = this.$el.clientHeight - 80;
         },
-        getRealTimeList(){
-            
-            this.$api.httpApi.getRealTimeList({
-                data: {}
-            }).then(res => {
-                if(res.code == 200) {
-                    this.realTimeListData = res.data.reverse();
-                    if (sessionStorage.getItem('tabKey') == null) {
-                        console.log("tabKey"+this.realTimeListData[0].id)
-                        sessionStorage.setItem('tabKey', this.realTimeListData[0].streetId)
-                        this.tabKey = sessionStorage.getItem('tabKey');
+        getRealTimeList() {
+            this.$api.httpApi
+                .getRealTimeList({
+                    data: {},
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        
+                        this.realTimeListData = res.data;
+                        if (sessionStorage.getItem("defaultKey") == null) {
+                            console.log("tabKey" + this.realTimeListData[0].id);
+                            sessionStorage.setItem(
+                                "defaultKey",
+                                this.realTimeListData[0].type+"-"+this.realTimeListData[0].id
+                            );
+                           
+                        }
+                        this.defaultKey = sessionStorage.getItem("defaultKey");
+                        console.log(this.defaultKey);
+                        let result = this.defaultKey.split("-");
+                        this.$nextTick(() => {
+                            this.voideoPlay(result[1]);
+                        });
                     }
-                    this.$nextTick(() => {
-                        this.autoPlay()
-                    })
-                }
-                
-            }).catch(err => {
-                console.log(err)
-            })
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
         },
-        
+
         tabsChange(key) {
-            sessionStorage.setItem('tabKey', key)
-            this.destory()
+            sessionStorage.setItem("tabKey", key);
+            this.destory();
             this.$nextTick(() => {
-                this.autoPlay()
-            })
-            
-        },
-        
-        autoPlay(){
-            this.players = []
-            for(var a of this.realTimeListData){
-                for (let b of a.cameras){
-                    let video = document.getElementById('camera'+b.id);
-                    if(video){
-                        console.log("play:"+b.id)
-                        let server = b.rtcServer+":"+b.rtcServerPort;
-                        let player = new WebRtcPlayer(server,video,'camera'+b.id);
-                        this.players.push(player)
-                    }
-                    
+                this.autoPlay();
+            });
+        },
+
+        autoPlay() {
+            this.players = [];
+            console.log(this.realTimeListData);
+            for (var a of this.realTimeListData) {
+                this.camera = a;
+                let video = document.getElementById("camera" + a.id);
+                if (video) {
+                    console.log("play:" + a.id);
+                    let server = a.rtcServer + ":" + a.rtcServerPort;
+                    let player = new WebRtcPlayer(
+                        server,
+                        video,
+                        "camera" + a.id
+                    );
+                    this.players.push(player);
                 }
-                
             }
-        
         },
-        destory(){
-            for(let player of this.players){
-                console.log("stop")
-                player.destroy()
+        voideoPlay(cameraId) {
+            this.players = [];
+            console.log(this.realTimeListData);
+            for (var a of this.realTimeListData) {
+                if (cameraId == a.id) {
+                    this.camera = a;
+                    let video = document.getElementById("camera");
+                    console.log("play:" + a.id);
+                    let server = a.rtcServer + ":" + a.rtcServerPort;
+                    let player = new WebRtcPlayer(
+                        server,
+                        video,
+                        "camera" + a.id
+                    );
+                    this.players.push(player);
+                }
             }
         },
-        zoomDecStart(event,id){
-            console.log('变倍-按下')
-            console.log(id)
-            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
-            this.$axios.post('/camera/control/zoomDec/start/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        zoomDecStop(event,id){
-            console.log('变倍-抬起')
-            console.log(id)
-            this.zoomSubUrl=require('@/assets/sub-icon.png')
-            this.$axios.post('/camera/control/zoomDec/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        zoomAddStart(event,id){
-            console.log('变倍+按下')
-            this.zoomAddUrl=require('@/assets/add-active-icon.png')
-            this.$axios.post('/camera/control/zoomAdd/start/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        zoomAddStop(event,id){
-            console.log('变倍+抬起')
-            this.zoomAddUrl=require('@/assets/add-icon.png')
-            this.$axios.post('/camera/control/zoomAdd/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusDecStart(event,id){
-            console.log('变焦-按下')
-            this.focusSubUrl=require('@/assets/sub-active-icon.png')
-            this.$axios.post('/camera/control/focusDec/start/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusDecStop(event,id){
-            console.log('变焦-抬起')
-            this.focusSubUrl=require('@/assets/sub-icon.png')
-            this.$axios.post('/camera/control/focusDec/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusAddStart(event,id){
-            console.log('变焦+按下')
-            this.focusAddUrl=require('@/assets/add-active-icon.png')
-            this.$axios.post('/camera/control/focusAdd/start/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        focusAddStop(event,id){
-            console.log('变焦+抬起')
-            this.focusAddUrl=require('@/assets/add-icon.png')
-            this.$axios.post('/camera/control/focusAdd/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisDecStart(event,id){
-            console.log('光圈-按下')
-            this.irisSubUrl=require('@/assets/sub-active-icon.png')
-            this.$axios.post('/camera/control/irisDec/start/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisDecStop(event,id){
-            console.log('光圈-抬起')
-            this.irisSubUrl=require('@/assets/sub-icon.png')
-            this.$axios.post('/camera/control/irisDec/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisAddStart(event,id){
-            console.log('光圈+按下')
-            this.irisAddUrl=require('@/assets/add-active-icon.png')
-            this.$axios.post('/camera/control/irisAdd/start/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        irisAddStop(event,id){
-            console.log('光圈+抬起')
-            this.irisAddUrl=require('@/assets/add-icon.png')
-            this.$axios.post('/camera/control/irisAdd/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftUpStart(event,id){
-            console.log('左上鼠标按下')
-            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
-            this.$axios.post('/camera/control/leftUp/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftUpStop(event,id){
-            console.log('左上鼠标抬起')
-            this.leftUpUrl=require('@/assets/left-up-icon.png')
-            this.$axios.post('/camera/control/leftUp/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        upStart(event,id){
-            console.log('上鼠标按下')
-            this.upUrl=require('@/assets/up-active-icon.png')
-            this.$axios.post('/camera/control/up/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        upStop(event,id){
-            console.log('上鼠标抬起')
-            this.upUrl=require('@/assets/up-icon.png')
-            this.$axios.post('/camera/control/up/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightUpStart(event,id){
-            console.log('右上鼠标按下')
-            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
-            this.$axios.post('/camera/control/rightUp/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightUpStop(event,id){
-            console.log('右上鼠标抬起')
-            this.rightUpUrl=require('@/assets/right-up-icon.png')
-            this.$axios.post('/camera/control/rightUp/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
+        destory() {
+            for (let player of this.players) {
+                console.log("stop");
+                player.destroy();
+            }
         },
-        leftStart(event,id){
+        zoomDecStart(event, id) {
+            console.log("变倍-按下");
+            console.log(id);
+            this.zoomSubUrl = require("@/assets/sub-active-icon.png");
+            this.$axios
+                .post("/camera/control/zoomDec/start/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        zoomDecStop(event, id) {
+            console.log("变倍-抬起");
+            console.log(id);
+            this.zoomSubUrl = require("@/assets/sub-icon.png");
+            this.$axios
+                .post("/camera/control/zoomDec/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        zoomAddStart(event, id) {
+            console.log("变倍+按下");
+            this.zoomAddUrl = require("@/assets/add-active-icon.png");
+            this.$axios
+                .post("/camera/control/zoomAdd/start/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        zoomAddStop(event, id) {
+            console.log("变倍+抬起");
+            this.zoomAddUrl = require("@/assets/add-icon.png");
+            this.$axios
+                .post("/camera/control/zoomAdd/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusDecStart(event, id) {
+            console.log("变焦-按下");
+            this.focusSubUrl = require("@/assets/sub-active-icon.png");
+            this.$axios
+                .post("/camera/control/focusDec/start/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusDecStop(event, id) {
+            console.log("变焦-抬起");
+            this.focusSubUrl = require("@/assets/sub-icon.png");
+            this.$axios
+                .post("/camera/control/focusDec/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusAddStart(event, id) {
+            console.log("变焦+按下");
+            this.focusAddUrl = require("@/assets/add-active-icon.png");
+            this.$axios
+                .post("/camera/control/focusAdd/start/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        focusAddStop(event, id) {
+            console.log("变焦+抬起");
+            this.focusAddUrl = require("@/assets/add-icon.png");
+            this.$axios
+                .post("/camera/control/focusAdd/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisDecStart(event, id) {
+            console.log("光圈-按下");
+            this.irisSubUrl = require("@/assets/sub-active-icon.png");
+            this.$axios
+                .post("/camera/control/irisDec/start/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisDecStop(event, id) {
+            console.log("光圈-抬起");
+            this.irisSubUrl = require("@/assets/sub-icon.png");
+            this.$axios
+                .post("/camera/control/irisDec/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisAddStart(event, id) {
+            console.log("光圈+按下");
+            this.irisAddUrl = require("@/assets/add-active-icon.png");
+            this.$axios
+                .post("/camera/control/irisAdd/start/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        irisAddStop(event, id) {
+            console.log("光圈+抬起");
+            this.irisAddUrl = require("@/assets/add-icon.png");
+            this.$axios
+                .post("/camera/control/irisAdd/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftUpStart(event, id) {
+            console.log("左上鼠标按下");
+            this.leftUpUrl = require("@/assets/left-up-active-icon.png");
+            this.$axios
+                .post("/camera/control/leftUp/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftUpStop(event, id) {
+            console.log("左上鼠标抬起");
+            this.leftUpUrl = require("@/assets/left-up-icon.png");
+            this.$axios
+                .post("/camera/control/leftUp/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        upStart(event, id) {
+            console.log("上鼠标按下");
+            this.upUrl = require("@/assets/up-active-icon.png");
+            this.$axios
+                .post("/camera/control/up/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        upStop(event, id) {
+            console.log("上鼠标抬起");
+            this.upUrl = require("@/assets/up-icon.png");
+            this.$axios
+                .post("/camera/control/up/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightUpStart(event, id) {
+            console.log("右上鼠标按下");
+            this.rightUpUrl = require("@/assets/right-up-active-icon.png");
+            this.$axios
+                .post("/camera/control/rightUp/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightUpStop(event, id) {
+            console.log("右上鼠标抬起");
+            this.rightUpUrl = require("@/assets/right-up-icon.png");
+            this.$axios
+                .post("/camera/control/rightUp/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftStart(event, id) {
             // console.log(this.id)
-            console.log('左转鼠标按下')
-            this.leftUrl=require('@/assets/left-active-icon.png')
-            this.$axios.post('/camera/control/left/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftStop(event,id){
-            this.leftUrl=require('@/assets/left-icon.png')
-            console.log('左转鼠标抬起')
-            this.$axios.post('/camera/control/left/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightStart(event,id){
-            console.log('右转鼠标按下')
-            this.rightUrl=require('@/assets/right-active-icon.png')
-            this.$axios.post('/camera/control/right/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightStop(event,id){
-            console.log('右转鼠标抬起')
-            this.rightUrl=require('@/assets/right-icon.png')
-            this.$axios.post('/camera/control/right/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftDownStart(event,id){
-            console.log('左下鼠标按下')
-            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
-            this.$axios.post('/camera/control/leftDown/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        leftDownStop(event,id){
-            console.log('左下鼠标抬起')
-            this.leftDownUrl=require('@/assets/left-down-icon.png')
-            this.$axios.post('/camera/control/leftDown/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        downStart(event,id){
-            console.log('下鼠标按下')
-            this.downUrl=require('@/assets/down-active-icon.png')
-            this.$axios.post('/camera/control/down/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        downStop(event,id){
-            console.log('下鼠标抬起')
-            this.downUrl=require('@/assets/down-icon.png')
-            this.$axios.post('/camera/control/down/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightDownStart(event,id){
-            console.log('右下鼠标按下')
-            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
-            this.$axios.post('/camera/control/rightDown/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
-        },
-        rightDownStop(event,id){
-            console.log('右下鼠标抬起')
-            this.rightDownUrl=require('@/assets/right-down-icon.png')
-            this.$axios.post('/camera/control/rightDown/stop/'+id, {
-                data: {}
-            }).then(res => {
-
-            }).catch(err => {
-
-            })
+            console.log("左转鼠标按下");
+            this.leftUrl = require("@/assets/left-active-icon.png");
+            this.$axios
+                .post("/camera/control/left/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftStop(event, id) {
+            this.leftUrl = require("@/assets/left-icon.png");
+            console.log("左转鼠标抬起");
+            this.$axios
+                .post("/camera/control/left/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightStart(event, id) {
+            console.log("右转鼠标按下");
+            this.rightUrl = require("@/assets/right-active-icon.png");
+            this.$axios
+                .post("/camera/control/right/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightStop(event, id) {
+            console.log("右转鼠标抬起");
+            this.rightUrl = require("@/assets/right-icon.png");
+            this.$axios
+                .post("/camera/control/right/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftDownStart(event, id) {
+            console.log("左下鼠标按下");
+            this.leftDownUrl = require("@/assets/left-down-active-icon.png");
+            this.$axios
+                .post("/camera/control/leftDown/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        leftDownStop(event, id) {
+            console.log("左下鼠标抬起");
+            this.leftDownUrl = require("@/assets/left-down-icon.png");
+            this.$axios
+                .post("/camera/control/leftDown/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        downStart(event, id) {
+            console.log("下鼠标按下");
+            this.downUrl = require("@/assets/down-active-icon.png");
+            this.$axios
+                .post("/camera/control/down/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        downStop(event, id) {
+            console.log("下鼠标抬起");
+            this.downUrl = require("@/assets/down-icon.png");
+            this.$axios
+                .post("/camera/control/down/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightDownStart(event, id) {
+            console.log("右下鼠标按下");
+            this.rightDownUrl = require("@/assets/right-down-active-icon.png");
+            this.$axios
+                .post("/camera/control/rightDown/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
+        },
+        rightDownStop(event, id) {
+            console.log("右下鼠标抬起");
+            this.rightDownUrl = require("@/assets/right-down-icon.png");
+            this.$axios
+                .post("/camera/control/rightDown/stop/" + id, {
+                    data: {},
+                })
+                .then((res) => {})
+                .catch((err) => {});
         },
-  
     },
 };
 </script>
@@ -502,80 +769,80 @@ export default {
 .realTime {
     padding: 10px;
 }
-	//全屏按钮
-    
-    //播放按钮
-    video::-webkit-media-controls-play-button {
-        display: none;
-    }
-    //进度条
-    video::-webkit-media-controls-timeline {
-        display: none;
-    }
-    //观看的当前时间
-    video::-webkit-media-controls-current-time-display{
-        display: none;            
-    }
-    //剩余时间
-    video::-webkit-media-controls-time-remaining-display {
-        display: none;            
-    }
-    //音量按钮
-    video::-webkit-media-controls-mute-button {
-        display: none;            
-    }
-    video::-webkit-media-controls-toggle-closed-captions-button {
-        display: none;            
-    }
-    //音量的控制条
-    video::-webkit-media-controls-volume-slider {
-        display: none;            
-    }
-    //所有控件
-    video::-webkit-media-controls-enclosure{ 
-        display: none;
-    }
-    .operation-list {
-            position: absolute;
-            right: 200px;
-            bottom: 20px;
-            /*width: 150px;*/
-            /*border: solid 1px blue;*/
-            z-index: 10;
-            .operation-item{
-                img{
-                    width: 32px;
-                    -webkit-user-select: none;
-                    -ms-user-select: none;
-                    -webkit-user-drag: none;
-                    user-select: none;
-                }
-                span{
-                    padding: 3px 6px;
-                    background: rgba(0,0,0,0.5);
-                    font-size: 16px;
-                    color: #ffffff;
-                }
-            }
+//全屏按钮
+
+//播放按钮
+video::-webkit-media-controls-play-button {
+    display: none;
+}
+//进度条
+video::-webkit-media-controls-timeline {
+    display: none;
+}
+//观看的当前时间
+video::-webkit-media-controls-current-time-display {
+    display: none;
+}
+//剩余时间
+video::-webkit-media-controls-time-remaining-display {
+    display: none;
+}
+//音量按钮
+video::-webkit-media-controls-mute-button {
+    display: none;
+}
+video::-webkit-media-controls-toggle-closed-captions-button {
+    display: none;
+}
+//音量的控制条
+video::-webkit-media-controls-volume-slider {
+    display: none;
+}
+//所有控件
+video::-webkit-media-controls-enclosure {
+    display: none;
+}
+.operation-list {
+    position: absolute;
+    right: 200px;
+    bottom: 20px;
+    /*width: 150px;*/
+    /*border: solid 1px blue;*/
+    z-index: 10;
+    .operation-item {
+        img {
+            width: 32px;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            -webkit-user-drag: none;
+            user-select: none;
         }
-        .direction-list{
-            position: absolute;
-            right: 30px;
-            bottom: 20px;
-            width: 150px;
-            z-index: 10;
-            /*border: solid 1px blue;*/
-            .direction-item{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                img{
-                    width: 32px;
-                    -webkit-user-select: none;
-                    -ms-user-select: none;
-                    -webkit-user-drag: none;
-                    user-select: none;
-                }
-            }
+        span {
+            padding: 3px 6px;
+            background: rgba(0, 0, 0, 0.5);
+            font-size: 16px;
+            color: #ffffff;
         }
+    }
+}
+.direction-list {
+    position: absolute;
+    right: 30px;
+    bottom: 20px;
+    width: 150px;
+    z-index: 10;
+    /*border: solid 1px blue;*/
+    .direction-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        img {
+            width: 32px;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            -webkit-user-drag: none;
+            user-select: none;
+        }
+    }
+}
 </style>