From c6843943399af203de9d5c787e297d2e521e0301 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?=
 <wang.haotian@hzleaper.com>
Date: Thu, 14 Dec 2023 09:48:32 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=A4=96=E7=BD=91=E8=AE=BF=E9=97=AE=202.?=
 =?UTF-8?q?=E6=98=86=E8=88=B9=E8=BF=9E=E6=8E=A5=E8=B0=83=E6=95=B4=E4=B8=BA?=
 =?UTF-8?q?30=E7=A7=92=E6=AF=8F=E6=AC=A1=203.=E7=90=83=E6=9C=BA=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E6=94=BE=E5=8D=95=E7=8B=AC=E7=9A=84=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=204.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   1 +
 src/assets/camera.png                    | Bin 0 -> 1668 bytes
 src/layouts/AsideMenu.vue                |  18 +-
 src/layouts/PageHeader.vue               |   2 +-
 src/router/index.js                      | 368 +++++-----
 src/views/camera.vue                     | 627 +++++++++++++++++
 src/views/cameraManage/model.vue         |  11 +-
 src/views/deviceManage/configuration.vue | 846 +++++++++++++++++++++++
 src/views/deviceManage/index.vue         | 222 ++++++
 src/views/deviceManage/model.vue         | 549 +++++++++++++++
 src/views/index.vue                      |   5 +-
 src/views/realTimeMonitoring/index.vue   |  11 +-
 src/views/videoWall/index.vue            |   8 +-
 src/views/videoWall2/index.vue           |   7 +-
 src/views/videoWall3/index.vue           |   7 +-
 vue.config.js                            |   1 +
 16 files changed, 2491 insertions(+), 192 deletions(-)
 create mode 100644 src/assets/camera.png
 create mode 100644 src/views/camera.vue
 create mode 100644 src/views/deviceManage/configuration.vue
 create mode 100644 src/views/deviceManage/index.vue
 create mode 100644 src/views/deviceManage/model.vue

diff --git a/package.json b/package.json
index d239376..6eb109d 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "node antdTheme.js && npm run serve"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^1.6.3",
     "antd-theme-generator": "^1.2.8",
     "axios": "^0.19.2",
diff --git a/src/assets/camera.png b/src/assets/camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..de2dff96f2d2e735fd38826663f3ead45877d21f
GIT binary patch
literal 1668
zcmV-~27CF5P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px*K1oDDRCr$PT5X6FWgP$gXP!MH%lc4;x3fnImzmzB?yOn)K}pd9BMU1kLBUGH
z1jEe0py&m>NTPy#A(SwJ0u>33z9f~UH?xV_X<3He&Z-fW=~a63@{dt>Z*FgQXXbA1
zZkOBnIP?3z{C>~>dFFW|4DpACIDgaxs8zraSD@AfhIj$g2EoX?Kt>bOiFiIh^8wr#
zNre$kv4c$@+MQ6%{gL>*;v`Z5GFogI5x*N{f`z`A=;=h#+!$4i$OJg4iCHq?i>MMS
z=Z6_H5-Dp>6tN-`z|h5a0H#Kfl%Ed<S`(^uhaWD;_eccD92nL}wtXxYkb$!@(aid!
znGTYKAI2S5K-f;e^<6P&Y82x^Gy>?c#RT5u5ny{lwI1{%7Up|K7uyJ!=ZUd4p<1iM
z_$Y>rL;yn<UjvxtX`ST>)r@p7%;>Ra3H(kz2BR&JvL;lD0PIb~VX3Jh)%inTlk?iQ
zYjqPOat?dnDXP`y1`OmN`@Q@qGiI|x<B4z^fZ?UcF+)qFtSM2F&-uz|qLm1#Qof1M
z!N4JAKEe+6HcYX%_~qd%K-hmfGg=ZU>jl5Sz4@Ne#9AV(3T#WfMM>I=%HhijkWGu-
z%$O56AOLo7Z(@q|c^I3Z*i5UKLlSle#b3fPwkav=p^{Zo>O)o+D;an*M6k0U-r=Ws
z2!BPPSv|JZ0na61L||XUbCsn1S>V6GANw%kKOx!xC?2D|Byme8*<X#GgtLKz4<OLZ
z`$C;OogH$!$=zL{`4>~RQ^oQw+6CIvVz$KamhpZ?wFYFC7nNRyF23=K;DF~fsP>LR
z|3w8bbnym&7js}@S{zTAA4HYhK=|n~coW`MlGci#0(=QzdJY`r;$tAlyD=^=%i;3K
zJ$n?@no$#=K!H+Spx-Lsq;}O9g4rYyH38JbfKA}EL}&w9N9!l!WE53WkriO1#X2y0
z^uun11593m2vku5oH>Y*rYUw2kPMPMz$YAtnGNd2<H7JfQ57RVRvR{!$^Nl7L@ZeK
zH>)_^8{3Kzz|ch&K)sg)18D+lj)VO&;Ua@lAlw6>*^48fEw1)%$y*TuWOR8Wfu8J6
zik8Pq>=hX4*oR<VP|)HpDXR5a*eV!w0kWEy#RZ$B%y=b{vR*DnCX<#QC#J1lj0DWC
zSFKPRu7fUsp~Y5!cwL?d;aeqXdFJP(Wyq$*PG-!_&qRUMan)KIrV0jMfV8|BObdH6
zoi_B?5`f?DB21qss`*HD380H30LJB#mL+NYsL7q~JKx7>jZK8a2Ry)^71g@M*U$qP
z^a{x8;v56l=5p$|V2!wS8qNnHab-FFcfNWE9r2`<_Z7s)pbKE=qSw>u9?S6%<3~=M
zN)X^J0MB_^Yo(%E?mOQnqlxE<(9#9u^@?gQ^);-dE|4iWEFs{$7-luz)P&#45xG+S
z?iBb2&mg!|QO)&LB|uh-O=4pAz{I<Sen?TR+shFt+{ppsPnM(^iDc)YsuI9W*3iWo
z0IzmWoPTwQ7B(a;SDgIQuF3aHMDFq0Nbh@x`LTwS{c#xbE_TqzfLy|*PK_BjBLSx!
zz#+mYaQF3sYfqq$;;Q*XSn?Gmz~xGij{`I&3=tyy9#2}`sv(Sh#Z*97B^1u?%FrR+
zpd{@jVF(vuD^376!ECFzizQwFqGke`nQ_hKQpb6BiOj@pGSkkm3!h>_RiprgiJnT=
zjdNtOm5CSgmn-_x>R#Kb5FjeDRa*fy0s2vaS{LZk$&e;*0MS!j4a5&Cs{Ls{Hdy4Y
z+gs&@l0=*Hj!T?3lsFlZ-K(yj<c#|=Ba56_K!--bj+Eo@qGDHOiVJWM3QUpl#v<bP
zP-nNqo6zljz<dS_mOYFFI^|W&w9FgSG_BF2@5G71L`q(fF?w`^OQ!z<_z6IMw`RbY
z1qj59;YBZTG1e$4>-AzT%H9z&bkXhlTYwxY5>oCuU0DG#`|6rWIJ*GEE0URCQiQ(%
zx=%@(`$|E5ugSTF8BMeh;Q;`RelaWII}wgD^BzUDpYh8lkN`O+$8}s+$FZ>hU+w33
zFuuz&b^Oz59&4P6b3x;W5+JD4YQoh7sHWEHk6ddN&>yN+lg}Yv0sjMYp;2z02s^F-
O0000<MNUMnLSTYM!5Pp1

literal 0
HcmV?d00001

diff --git a/src/layouts/AsideMenu.vue b/src/layouts/AsideMenu.vue
index be956a0..b99fef7 100644
--- a/src/layouts/AsideMenu.vue
+++ b/src/layouts/AsideMenu.vue
@@ -1,4 +1,5 @@
 <template>
+    
     <a-layout-sider :class="['aside', collapsed ? 'merge' :'']" v-model="collapsed" theme="dark" :trigger="null" collapsible :style="styles.menu.default">
         <div class="logo" :style="styles.title.style">
 <!--            <img src="@/assets/logo1.png" alt />-->
@@ -71,7 +72,13 @@ export default {
                 parents = this.$router.options.routes[0].children.filter(ele => {
                     if (
                         this.userInfo.permissionList.some(item => {
-                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0 && item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0 && item.rights === ele.name && ele.name.indexOf("plcStatus") < 0 && item.rights === ele.name && ele.name.indexOf("cameraManageModel") < 0 && item.rights === ele.name && ele.name.indexOf("checkOperation") < 0;
+                            return item.rights === ele.name && ele.name.indexOf("center") < 0 
+                            && item.rights === ele.name && ele.name.indexOf("ioTable") < 0 
+                            && item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0 
+                            && item.rights === ele.name && ele.name.indexOf("plcStatus") < 0 
+                            && item.rights === ele.name && ele.name.indexOf("cameraManageModel") < 0 
+                            && item.rights === ele.name && ele.name.indexOf("checkOperation") < 0
+                            && item.rights === ele.name && ele.name.indexOf("deviceManageModel") < 0;
                         })
                     ) {
                         return ele;
@@ -92,7 +99,14 @@ export default {
                 recursionRoute(parents);
             }else {
                 parents = this.$router.options.routes[0].children.filter(item => {
-                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel") && !item.name.startsWith("plcStatus") && !item.name.startsWith("cameraManageModel") && !item.name.startsWith("checkOperation") && !item.name.startsWith("stockLog") ;
+                    return !item.name.startsWith("center") 
+                    && !item.name.startsWith("ioTable") 
+                    && !item.name.startsWith("realTimeMonitoringModel") 
+                    && !item.name.startsWith("plcStatus") 
+                    && !item.name.startsWith("cameraManageModel") 
+                    && !item.name.startsWith("deviceManageModel") 
+                    && !item.name.startsWith("checkOperation") 
+                    && !item.name.startsWith("stockLog") ;
                 });
             }
             this.routes = parents;
diff --git a/src/layouts/PageHeader.vue b/src/layouts/PageHeader.vue
index 8a06236..d058e67 100644
--- a/src/layouts/PageHeader.vue
+++ b/src/layouts/PageHeader.vue
@@ -65,7 +65,7 @@ export default {
         const that = this
         setInterval(function () {
             that.getplcStatus()
-        }, 10000)
+        }, 300000)
     },
     methods: {
         ...mapMutations(["setState"]),
diff --git a/src/router/index.js b/src/router/index.js
index 285b666..acb65ed 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,204 +22,210 @@ VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)
 }
 
-const routes = [{
-    path: '/',
-    redirect: {
-        name: 'realTimeMonitoring'
-    },
-    component: () => import('@/views/index'),
-    children: [
-        {
-            path: 'videoWall1`',
-            name: 'videoWall1`',
-            meta: {
-                icon: 'desktop',
-                name: '视频墙1'
-            },
-            component: () => import('@/views/videoWall/index'),
+const routes = [
+    {
+        path: '/',
+        redirect: {
+            name: 'realTimeMonitoring'
         },
-        {
-            path: 'videoWall2',
-            name: 'videoWall2',
-            meta: {
-                icon: 'desktop',
-                name: '视频墙2'
+        component: () => import('@/views/index'),
+        children: [
+            {
+                path: 'videoWall1`',
+                name: 'videoWall1`',
+                meta: {
+                    icon: 'desktop',
+                    name: '视频墙1'
+                },
+                component: () => import('@/views/videoWall/index'),
             },
-            component: () => import('@/views/videoWall2/index'),
-        },
-        {
-            path: 'videoWall3',
-            name: 'videoWall3',
-            meta: {
-                icon: 'desktop',
-                name: '视频墙3'
+            {
+                path: 'videoWall2',
+                name: 'videoWall2',
+                meta: {
+                    icon: 'desktop',
+                    name: '视频墙2'
+                },
+                component: () => import('@/views/videoWall2/index'),
             },
-            component: () => import('@/views/videoWall3/index'),
-        },
-        {
-            path: 'realTimeMonitoring',
-            name: 'realTimeMonitoring',
-            meta: {
-                icon: 'video-camera',
-                name: '实时视频流'
+            {
+                path: 'videoWall3',
+                name: 'videoWall3',
+                meta: {
+                    icon: 'desktop',
+                    name: '视频墙3'
+                },
+                component: () => import('@/views/videoWall3/index'),
             },
-            component: () => import('@/views/realTimeMonitoring/index'),
+            {
+                path: 'realTimeMonitoring',
+                name: 'realTimeMonitoring',
+                meta: {
+                    icon: 'video-camera',
+                    name: '实时视频流'
+                },
+                component: () => import('@/views/realTimeMonitoring/index'),
 
-        },
-       
-        {
-            path: 'historyMonitoring',
-            name: 'historyMonitoring',
-            meta: {
-                icon: 'book',
-                name: '历史数据'
             },
-            component: () => import('@/views/historyMonitoring/index')
-        },
-        {
-            path: 'alarmLog',
-            name: 'alarmLog',
-            meta: {
-                icon: 'eye',
-                name: '告警日志'
+
+            {
+                path: 'historyMonitoring',
+                name: 'historyMonitoring',
+                meta: {
+                    icon: 'book',
+                    name: '历史数据'
+                },
+                component: () => import('@/views/historyMonitoring/index')
             },
-            component: () => import('@/views/alarmVideos/alarmLog')
-        },
-        {
-            path: 'checkManage',
-            name: 'checkManage',
-            meta: {
-                icon: 'form',
-                name: '盘点管理',
+            {
+                path: 'alarmLog',
+                name: 'alarmLog',
+                meta: {
+                    icon: 'eye',
+                    name: '告警日志'
+                },
+                component: () => import('@/views/alarmVideos/alarmLog')
             },
-            component: () => import('@/views/checkManage/index'),
-        },
-        {
-            path: 'checkOperation',
-            name: 'checkOperation',
-            meta: {
-                name: '盘点操作'
+            {
+                path: 'checkManage',
+                name: 'checkManage',
+                meta: {
+                    icon: 'form',
+                    name: '盘点管理',
+                },
+                component: () => import('@/views/checkManage/index'),
             },
-            component: () => import('@/views/checkManage/checkOperation'),
-        },
-        {
-            path: 'checkHistory',
-            name: 'checkHistory',
-            meta: {
-                icon: 'tag',
-                name: '盘点历史',
+            {
+                path: 'checkOperation',
+                name: 'checkOperation',
+                meta: {
+                    name: '盘点操作'
+                },
+                component: () => import('@/views/checkManage/checkOperation'),
             },
-            component: () => import('@/views/historyCheck/index'),
-        },
-        // {
-        //     path: 'stockHistory',
-        //     name: 'stockHistory',
-        //     meta: {
-        //         icon: 'file-excel',
-        //         name: '库位历史',
-        //     },
-        //     component: () => import('@/views/stockLog/index'),
-        // },
-        // {
-        //     path: 'stockLogDetail',
-        //     name: 'stockLogDetail',
-        //     meta: {
-        //         name: '库位历史详情',
-        //     },
-        //     component: () => import('@/views/stockLog/logPage'),
-        // },
-        {
-            path: 'roadwayManage',
-            name: 'roadwayManage',
-            meta: {
-                icon: 'build',
-                name: '巷道管理'
+            {
+                path: 'checkHistory',
+                name: 'checkHistory',
+                meta: {
+                    icon: 'tag',
+                    name: '盘点历史',
+                },
+                component: () => import('@/views/historyCheck/index'),
             },
-            component: () => import('@/views/roadwayManage/index')
-        },
-        {
-            path: 'cameraManage',
-            name: 'cameraManage',
-            meta: {
-                icon: 'camera',
-                name: '球机管理'
+            // {
+            //     path: 'stockHistory',
+            //     name: 'stockHistory',
+            //     meta: {
+            //         icon: 'file-excel',
+            //         name: '库位历史',
+            //     },
+            //     component: () => import('@/views/stockLog/index'),
+            // },
+            // {
+            //     path: 'stockLogDetail',
+            //     name: 'stockLogDetail',
+            //     meta: {
+            //         name: '库位历史详情',
+            //     },
+            //     component: () => import('@/views/stockLog/logPage'),
+            // },
+            {
+                path: 'roadwayManage',
+                name: 'roadwayManage',
+                meta: {
+                    icon: 'build',
+                    name: '巷道管理'
+                },
+                component: () => import('@/views/roadwayManage/index')
             },
-            component: () => import('@/views/cameraManage/index')
-        },
-        {
-            path: 'cameraManage/model',
-            name: 'cameraManageModel',
-            meta: {
-                name: '球机管理测试or配置'
+            {
+                path: 'cameraManage',
+                name: 'cameraManage',
+                meta: {
+                    icon: 'camera',
+                    name: '球机管理'
+                },
+                component: () => import('@/views/cameraManage/index')
             },
-            component: () => import('@/views/cameraManage/model')
-        },
-        // {
-        //     path: 'productSpecManage',
-        //     name: 'productSpecManage',
-        //     meta: {
-        //         icon: 'pushpin',
-        //         name: '品规管理'
-        //     },
-        //     component: () => import('@/views/productSpecManage/index')
-        // },
-        // {
-        //     path: 'repertoryManage',
-        //     name: 'repertoryManage',
-        //     meta: {
-        //         icon: 'wallet',
-        //         name: '库存管理'
-        //     },
-        //     component: () => import('@/views/repertoryManage/index')
-        // },
-        
-        {
-            path: 'cameraManage/ioTable',
-            name: 'ioTable',
-            meta: {
-                name: 'IO表配置'
+            {
+                path: 'cameraManage/model',
+                name: 'cameraManageModel',
+                meta: {
+                    name: '球机管理测试or配置'
+                },
+                component: () => import('@/views/cameraManage/model')
             },
-            component: () => import('@/views/cameraManage/ioTable')
-        },
-        {
-            path: 'center',
-            name: 'center',
-            meta: {
-                name: '个人中心'
+            // {
+            //     path: 'productSpecManage',
+            //     name: 'productSpecManage',
+            //     meta: {
+            //         icon: 'pushpin',
+            //         name: '品规管理'
+            //     },
+            //     component: () => import('@/views/productSpecManage/index')
+            // },
+            // {
+            //     path: 'repertoryManage',
+            //     name: 'repertoryManage',
+            //     meta: {
+            //         icon: 'wallet',
+            //         name: '库存管理'
+            //     },
+            //     component: () => import('@/views/repertoryManage/index')
+            // },
+
+            {
+                path: 'cameraManage/ioTable',
+                name: 'ioTable',
+                meta: {
+                    name: 'IO表配置'
+                },
+                component: () => import('@/views/cameraManage/ioTable')
             },
-            component: () => import('@/views/center')
-        },
-        {
-            path: 'plcStatus',
-            name: 'plcStatus',
-            meta: {
-                name: 'PLC状态'
+            {
+                path: 'center',
+                name: 'center',
+                meta: {
+                    name: '个人中心'
+                },
+                component: () => import('@/views/center')
             },
-            component: () => import('@/views/plcStatus')
-        }
-    ]
-},
-{
-    path: '/login',
-    name: 'login',
-    component: () => import('../views/login.vue')
-},
-{
-    path: '/guide',
-    name: 'guide',
-    component: () => import('../views/guide.vue')
-},
-{
-    path: '/updateStyles',
-    name: '修改样式',
-    component: () => import('../views/updateStyles/index')
-},
+            {
+                path: 'plcStatus',
+                name: 'plcStatus',
+                meta: {
+                    name: 'PLC状态'
+                },
+                component: () => import('@/views/plcStatus')
+            }
+        ]
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('@/views/login.vue')
+    },
+    {
+        path: '/guide',
+        name: 'guide',
+        component: () => import('../views/guide.vue')
+    },
+    {
+        path: '/updateStyles',
+        name: '修改样式',
+        component: () => import('../views/updateStyles/index')
+    },
 
-{
-    path: '*',
-    name: '404',
-    component: () => import('../views/404.vue')
-}
+    {
+        path: '/camera/*',
+        name: '修改样式',
+        component: () => import('../views/camera.vue')
+    },
+    {
+        path: '*',
+        name: '404',
+        component: () => import('../views/404.vue')
+    }
 ]
 
 const router = new VueRouter({
diff --git a/src/views/camera.vue b/src/views/camera.vue
new file mode 100644
index 0000000..11eeb0d
--- /dev/null
+++ b/src/views/camera.vue
@@ -0,0 +1,627 @@
+<template>
+    <div style="position: relative;width: 700px;height: 576px;">
+        <video
+            :style="{ height: videoHeight,}"
+            :id="`camera${id}`"
+            autoplay
+            muted
+            controls
+        >
+        </video>
+
+        <div class="operation-list">
+            <div class="operation-item">
+                <img
+                    :src="zoomSubUrl"
+                    alt=""
+                    @mousedown=zoomDecStart($event,id)
+                    @mouseleave=zoomDecStop($event,id)
+                >
+                <span>变倍</span>
+                <img
+                    :src="zoomAddUrl"
+                    alt=""
+                    @mousedown=zoomAddStart($event,id)
+                    @mouseleave=zoomAddStop($event,id)
+                >
+            </div>
+            <div class="operation-item">
+                <img
+                    :src="focusSubUrl"
+                    alt=""
+                    @mousedown=focusDecStart($event,id)
+                    @mouseleave=focusDecStop($event,id)
+                    @mouseup=focusDecStop($event,id)
+                >
+                <span>变焦</span>
+                <img
+                    :src="focusAddUrl"
+                    alt=""
+                    @mousedown=focusAddStart($event,id)
+                    @mouseleave=focusAddStop($event,id)
+                    @mouseup=focusAddStop($event,id)
+                >
+            </div>
+            <div class="operation-item">
+                <img
+                    :src="irisSubUrl"
+                    alt=""
+                    @mousedown=irisDecStart($event,id)
+                    @mouseup=irisDecStop($event,id)
+                    @mouseleave=irisDecStop($event,id)
+                >
+                <span>光圈</span>
+                <img
+                    :src="irisAddUrl"
+                    alt=""
+                    @mousedown=irisAddStart($event,id)
+                    @mouseup=irisAddStop($event,id)
+                    @mouseleave=irisAddStop($event,id)
+                >
+            </div>
+        </div>
+        <div class="direction-list">
+            <div class="direction-item">
+                <img
+                    :src="leftUpUrl"
+                    alt=""
+                    @mousedown=leftUpStart($event,id)
+                    @mouseup=leftUpStop($event,id)
+                    @mouseleave=leftUpStop($event,id)
+                >
+                <img
+                    :src="upUrl"
+                    alt=""
+                    @mousedown=upStart($event,id)
+                    @mouseup=upStop($event,id)
+                    @mouseleave=upStop($event,id)
+                >
+                <img
+                    :src="rightUpUrl"
+                    alt=""
+                    @mousedown=rightUpStart($event,id)
+                    @mouseup=rightUpStop($event,id)
+                    @mouseleave=rightUpStop($event,id)
+                >
+            </div>
+            <div class="direction-item">
+
+                <img
+                    :src="leftUrl"
+                    alt=""
+                    @mousedown=leftStart($event,id)
+                    @mouseup=leftStop($event,id)
+                    @mouseleave=leftStop($event,id)
+                >
+                <img
+                    :src="cameraUrl"
+                    alt=""
+                    webkitdirectory
+                    @mouseup=photograph($event,id)
+                >
+                <img
+                    :src="rightUrl"
+                    alt=""
+                    @mousedown=rightStart($event,id)
+                    @mouseup=rightStop($event,id)
+                    @mouseleave=rightStop($event,id)
+                >
+            </div>
+            <div class="direction-item">
+                <img
+                    :src="leftDownUrl"
+                    alt=""
+                    @mousedown=leftDownStart($event,id)
+                    @mouseup=leftDownStop($event,id)
+                    @mouseleave=leftDownStop($event,id)
+                >
+                <img
+                    :src="downUrl"
+                    alt=""
+                    @mousedown=downStart($event,id)
+                    @mouseup=downStop($event,id)
+                    @mouseleave=downStop($event,id)
+                >
+                <img
+                    :src="rightDownUrl"
+                    alt=""
+                    @mousedown=rightDownStart($event,id)
+                    @mouseup=rightDownStop($event,id)
+                    @mouseleave=rightDownStop($event,id)
+                >
+            </div>
+        </div>
+    </div>
+</template>   
+<script>
+import WebRtcPlayer from "../../public/static/webrtcplayer";
+
+export default {
+    data() {
+        return {
+            w:
+                document.documentElement.offsetWidth ||
+                document.body.offsetWidth,
+            h:
+                document.documentElement.offsetHeight ||
+                document.body.offsetHeight,
+            confirmLoading: false,
+            videoHeight: "576px",
+            id: "12",
+            mdata: [],
+            camera:{},
+            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"),
+            cameraUrl: require("@/assets/camera.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"),
+            vlcm: "",
+        };
+    },
+    comments: {
+        WebRtcPlayer,
+    },
+    mounted() {
+        this.mdata = this.$route.path;
+        console.log(this.mdata);
+        this.id = this.mdata.toString().split("/").pop();
+        this.$axios
+            .get("/camera/" + this.id, {
+                data: {},
+            })
+            .then((res) => {
+                this.camera = res.data;
+
+                console.log( this.camera);
+                this.autoPlay();
+            })
+            .catch((err) => {});
+    },
+    // beforeRouteLeave(to, form, next) {
+    //     if (this.vlcm) {
+    //         this.vlcm.playlist.stop();
+    //         next(true)
+    //     } else {
+    //         next(true)
+    //     }
+    // },
+    destroy() {
+        if (this.player != null) {
+            this.player.destroy();
+        }
+    },
+    methods: {
+        autoPlay() {
+            this.players = [];
+            let video = document.getElementById("camera" + this.id);
+            if (video) {
+                console.log("play:" + this.id);
+                
+                let server ;
+                if(this.camera.rtcServerPort != null){
+                    server= this.camera.rtcServer + ":" +  this.camera.rtcServerPort ;
+                }else{
+                    server= this.camera.rtcServer
+                }
+                
+                let player = new WebRtcPlayer(
+                    server,
+                    video,
+                    "camera" + this.id
+                );
+                this.players.push(player);
+            }
+        },
+        handleCancel() {
+            this.$router.push({ name: "realTimeMonitoring" });
+        },
+        getHdVideos(rtsp) {
+            this.$nextTick(() => {
+                var vlc = document.getElementById("video");
+                var options = new Array(":network-caching=100"); //减少延迟
+                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
+                vlc.playlist.playItem(vlcItem);
+                this.vlcm = vlc;
+            });
+        },
+        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) => {});
+        },
+        photograph() {
+            //使用 HTMLCanvasElement 绘制视频帧：在 JavaScript 中创建一个 canvas 元素，并使用 drawImage 方法从视频中绘制出一帧图像。
+            const video = document.querySelector("video");
+            const canvas = document.createElement("canvas");
+            const context = canvas.getContext("2d");
+
+            // 获取 video 尺寸并设置 canvas 尺寸
+            const width = video.videoWidth;
+            const height = video.videoHeight;
+            canvas.width = width;
+            canvas.height = height;
+
+            // 绘制视频帧到画布上
+            context.drawImage(video, 0, 0, width, height);
+
+            // 将画布内容转换为图片格式
+            canvas.toBlob((blob) => {
+                // 创建下载链接并触发下载
+                const a = document.createElement("a");
+                a.href = URL.createObjectURL(blob);
+                a.download = "screenshot.png";
+                document.body.appendChild(a);
+                a.click();
+            }, "image/png");
+        },
+    },
+};
+</script>
+ <style lang="scss" scoped>
+.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;
+        }
+    }
+}
+.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>
+ 
\ No newline at end of file
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index c1a25c9..566c6f2 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -354,6 +354,7 @@ export default {
             if(this.type=='test') {
                 this.$router.go(-1);
             }else if(this.type=='config') {
+                
                 this.$router.go(-1);
                 this.player.destroy();
             }
@@ -363,8 +364,14 @@ export default {
         autoPlay(id){
             let video = document.getElementById('config-camera'+id);
             if(video){
-                let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
-                console.log("server:"+server)
+                
+                let server ;
+                if(this.mdata.rtcServerPort != null){
+                    server= this.mdata.rtcServer+":"+this.mdata.rtcServerPort
+                }else{
+                    server=  this.mdata.rtcServer
+                }
+                
                 let player = new WebRtcPlayer(server,video,'camera'+id);
                 console.log("okkkkkk")
                 //player.load('camera'+id);
diff --git a/src/views/deviceManage/configuration.vue b/src/views/deviceManage/configuration.vue
new file mode 100644
index 0000000..da4d9f9
--- /dev/null
+++ b/src/views/deviceManage/configuration.vue
@@ -0,0 +1,846 @@
+<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="cpe设备IP" :label-col="formItemVerticalLayout.labelCol">
+                        <a-input
+                            v-decorator="['ip', { rules: [{ required: true, message: '请输入cpe设备ip!' }] }]"
+                        />
+                    </a-form-item>
+                    
+                    <a-form-item label="球机端口" :label-col="formItemVerticalLayout.labelCol">
+                        <a-input
+                            v-decorator="['port', { rules: [{ required: true, message: '请输入球机端口!' }] }]"
+                        />
+                    </a-form-item>
+                    <a-form-item label="rtsp端口" :label-col="formItemVerticalLayout.labelCol">
+                        <a-input
+                            v-decorator="['rtspPort', { rules: [{ required: true, message: '请输入rtsp端口!' }] }]"
+                        />
+                    </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=='config'">
+            
+    <div>
+        <a-button type="primary">Primary Button</a-button>
+    </div>
+            <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>
+
+    </div>
+</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') {
+                this.$router.go(-1);
+                this.player.destroy();
+            }
+            
+        },
+       
+        autoPlay(id){
+            let video = document.getElementById('config-camera'+id);
+            if(video){
+                
+                let server ;
+                if(this.mdata.rtcServerPort != null){
+                    server=  this.mdata.rtcServer+":"+this.mdata.rtcServerPort ;
+                }else{
+                    server= this.mdata.rtcServer
+                }
+                
+                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/deviceManage/index.vue b/src/views/deviceManage/index.vue
new file mode 100644
index 0000000..45023b0
--- /dev/null
+++ b/src/views/deviceManage/index.vue
@@ -0,0 +1,222 @@
+<template>
+    <div>
+        <div class="button-box">
+            <a-button type="primary" class="add" @click="showModel('add','')">
+                新增球机
+            </a-button>
+            <a-button type="primary" class="plc" @click="goIo">
+                PLC IO表配置
+            </a-button>
+            <a-button type="primary" class="add" @click="videoConfig">
+                视频流配置
+            </a-button>
+        </div>
+        <a-table
+         style="margin-top:40px"
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="handleGetCameraList"
+        >
+          <span slot="action" slot-scope="text, record">
+          <!-- <a @click="showModel('test',record)">
+            测试
+          </a> -->
+          <a-divider type="vertical"/>
+          <a @click="showModel('config',record)">
+            配置
+          </a>
+          <a-divider type="vertical"/>
+          <a @click="showModel('edit',record)">
+            编辑
+          </a>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+              title="是否删除?"
+              @confirm="() => delDosage(record)"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+          </span>
+        </a-table>
+        <Model
+            :visible.sync="visible"
+            :modelType="modelType"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
+    </div>
+</template>
+
+
+<script>
+import Model from "./model.vue"
+const columns = [
+    {
+        title: '球机名称',
+        dataIndex: 'name',
+    },
+    {
+        title: '球机IP',
+        dataIndex: 'ip',
+    },
+    {
+        title: '视频流IP',
+        dataIndex: 'rtcServer',
+    },
+    {
+        title: '连接状态',
+        dataIndex: 'status',
+    },
+    {
+        title: '修改时间',
+        dataIndex: 'updateTime',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' }
+    },
+];
+export default {
+    data() {
+        return {
+            pageNum:1,
+            pageSize:10,
+            data: [],
+            pagination:{
+                total:0,
+                defaultPageSize:10, // 默认每页显示数量
+                showTotal: total => `共 ${total} 条数据`, // 显示总数
+                showSizeChanger:true, // 显示可改变每页数量
+                pageSizeOptions: ['10', '20', '30'],
+                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
+            },
+            loading: false,
+            columns,
+            visible:false,
+            modelType:'',
+            modelData:[]
+        };
+    },
+    mounted() {
+        this.handleGetCameraList()
+    },
+    methods: {
+        handleGetCameraList(pagination) {
+            if(pagination){
+                this.pagination.current = pagination.current;
+                this.pagination.pageSize = pagination.pageSize;
+                this.pageNum = pagination.current;
+                this.pageSize = pagination.pageSize;
+            }
+        
+            this.request();
+        },
+        request(){
+            this.$api.httpApi.getCameraList({
+                data: {
+                    pageNum:this.pageNum,
+                    pageSize:this.pageSize,
+                }
+            }).then(res => {
+                const pagination = { ...this.pagination };
+                pagination.total = res.data.total;
+                this.data = res.data.list;
+                this.pagination = pagination;
+            }).catch(err => {
+
+            });
+        },
+        showModel(type,data){
+            console.log(type)
+            if (type == 'test') {
+                this.$router.push({
+                    name: 'deviceManageModel',
+                    query: {modelType: type, modelData: data}
+                })
+            } else if (type == 'config') {
+                this.$router.push({
+                    name: 'deviceManageModel',
+                    query: {modelType: type, modelData: data}
+                })
+            } else {
+                this.visible = true
+                this.modelType = type
+                this.modelData = data
+            }
+        },
+        submit(visible){
+            this.visible = visible
+            this.handleGetCameraList()
+        },
+        closeModel(visible,data){
+            this.visible = visible
+            this.modelData=data
+        },
+        delDosage(data){
+            console.log(data.id)
+            var id=data.id
+            this.$axios.delete('/camera/'+id, {
+                data: {}
+            }).then(res => {
+                if(res.code==200){
+                    this.$message.success('删除球机成功');
+                    this.handleGetCameraList()
+                }
+            }).catch(err => {
+
+            })
+        },
+        goIo(){
+            this.$router.push({ name: "ioTable"});
+        },
+        videoConfig(){
+            const that = this
+            this.$confirm({
+                title: "生成全部视频流",
+                content: "确认生成全部视频流？",
+                okText: '确认',
+                onOk() {
+                    return new Promise((resolve, reject) => {
+                        that.downConfig();
+                        setTimeout(resolve, 1000);
+                    }).catch(() => console.log('Oops errors!'));  
+                },
+                cancelText: '取消',
+            });
+            
+        },
+        downConfig(){
+            this.$api.httpApi.videoConfig({
+                
+            }).then(res => {
+                
+            }).catch(err => {
+
+            });
+        },
+    },
+    components:{
+        Model
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .button-box{
+        position: absolute;
+        top:20px;
+        right: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .add{
+            margin-right: 20px;
+        }
+        .plc{
+            margin-right: 20px;
+        }
+    }
+</style>
diff --git a/src/views/deviceManage/model.vue b/src/views/deviceManage/model.vue
new file mode 100644
index 0000000..e4c8d82
--- /dev/null
+++ b/src/views/deviceManage/model.vue
@@ -0,0 +1,549 @@
+<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="cpe设备IP"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['ip', { rules: [{ required: true, message: '请输入cpe设备ip!' }] }]" />
+                    </a-form-item>
+
+                    <a-form-item
+                        label="球机端口"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['port', { rules: [{ required: true, message: '请输入球机端口!' }] }]" />
+                    </a-form-item>
+                    <a-form-item
+                        label="rtsp端口"
+                        :label-col="formItemVerticalLayout.labelCol"
+                    >
+                        <a-input v-decorator="['rtspPort', { rules: [{ required: true, message: '请输入rtsp端口!' }] }]" />
+                    </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=='config'">
+            <a-modal
+                v-model="isShow"
+                @cancel="handleCancel"
+                :footer="null"
+                :maskClosable="false"
+                width="1601px"
+                :bodyStyle="{padding:0}"
+                :centered="true"
+                class="config-model"
+            >
+                
+                <a-row type="flex">
+
+                    <a-col :flex="3">
+                        <cameraVue></cameraVue>
+                        <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-col>
+                </a-row>
+
+            </a-modal>
+        </template>
+
+    </div>
+</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";
+import cameraVue from "../camera.vue";
+export default {
+    name: "model",
+    props: ["visible", "modelType", "modelData"],
+    components: { cameraVue },
+    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);
+            });
+        }
+    },
+    computed: {
+        // 按钮列表
+        buttonList() {
+            return this.buttons.map((button) => {
+                return {
+                    id: button1.id,
+                    text: button1.text,
+                };
+            });
+        },
+    },
+    destroy() {
+        if (this.player != null) {
+            this.player.destroy();
+        }
+    },
+    methods: {
+        addButton() {
+            // 新增一个按钮
+            const newButton = {
+                id: Date.now(),
+                text: "New Button",
+            };
+            this.buttons1.push(newButton);
+        },
+        deleteButton(button) {
+            // 删除按钮
+            this.buttons = this.buttons.filter((b) => b !== button);
+        },
+        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") {
+                console.log(this.$router.history);
+                
+                this.$router.go(-1);
+                if (this.player != null) {
+                    this.player.destroy();
+                }
+            }
+        },
+
+        autoPlay(id) {
+            let video = document.getElementById("config-camera" + id);
+            if (video) {
+                
+                let server ;
+                if(this.mdata.rtcServerPort != null){
+                    server=  this.mdata.rtcServer+":"+this.mdata.rtcServerPort ;
+                }else{
+                    server= this.mdata.rtcServer
+                }
+                
+                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) => {});
+        },
+    },
+};
+</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;
+    }
+    .config-model-header {
+        height: "90px";
+    }
+    .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: 400px;
+        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/index.vue b/src/views/index.vue
index 0e51e03..3315914 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,5 +1,6 @@
 <template>
-    <a-layout class="mainIndex">
+    <div>
+    <a-layout  class="mainIndex">
         <AsideMenu/>
         <div :class="['mainIndex-container', collapsed ? 'collapsedClose' :'']">
             <PageHeader/>
@@ -7,6 +8,8 @@
             <PageContent/>
         </div>
     </a-layout>
+</div>
+
 </template>
 
 <script>
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 16f514f..468b9f6 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -1,7 +1,7 @@
 <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-tab-pane :key="item.streetId.toString()" :tab="item.streetId.toString()" v-for="item in realTimeListData"></a-tab-pane>
         </a-tabs>
 <!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
         <a-row :gutter="20">
@@ -166,7 +166,14 @@ export default {
                     let video = document.getElementById('camera'+b.id);
                     if(video){
                         console.log("play:"+b.id)
-                        let server = b.rtcServer+":"+b.rtcServerPort;
+                        
+                        let server ;
+                        if(b.rtcServerPort != null){
+                            server=  b.rtcServer+":"+b.rtcServerPort;
+                        }else{
+                            server= b.rtcServer
+                        }
+                
                         let player = new WebRtcPlayer(server,video,'camera'+b.id);
                         this.players.push(player)
                     }
diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index dfd81b8..2a71993 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -114,7 +114,13 @@ export default {
                         }
                         let idName = rowIndex + "-" + columnIndex;
                         console.log("idName:"+idName);
-                        let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        
+                        let server ;
+                        if(cameras[i-1].rtcServerPort != null){
+                            server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        }else{
+                            server= cameras[i-1].rtcServer
+                        }
                         let video = document.getElementById(idName);
                         let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
                         this.players.push(player);
diff --git a/src/views/videoWall2/index.vue b/src/views/videoWall2/index.vue
index f463c1e..13ce2e1 100644
--- a/src/views/videoWall2/index.vue
+++ b/src/views/videoWall2/index.vue
@@ -114,7 +114,12 @@ export default {
                         }
                         let idName = rowIndex + "-" + columnIndex;
                         console.log("idName:"+idName);
-                        let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        let server ;
+                        if(cameras[i-1].rtcServerPort != null){
+                            server=  cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        }else{
+                            server= cameras[i-1].rtcServer
+                        }
                         let video = document.getElementById(idName);
                         let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
                         this.players.push(player);
diff --git a/src/views/videoWall3/index.vue b/src/views/videoWall3/index.vue
index 56e1443..e924e3e 100644
--- a/src/views/videoWall3/index.vue
+++ b/src/views/videoWall3/index.vue
@@ -114,7 +114,12 @@ export default {
                         }
                         let idName = rowIndex + "-" + columnIndex;
                         console.log("idName:"+idName);
-                        let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        let server ;
+                        if(cameras[i-1].rtcServerPort != null){
+                            server=  cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        }else{
+                            server= cameras[i-1].rtcServer
+                        }
                         let video = document.getElementById(idName);
                         let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
                         this.players.push(player);
diff --git a/vue.config.js b/vue.config.js
index 3832c02..8e5260b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -23,6 +23,7 @@ module.exports = {
     },
     productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
     devServer: {
+        disableHostCheck: true,
         proxy: {
             '/api/node': {
                 target: 'http://127.0.0.1:8117',