From 5a58ff9a1a49f568eb2006bcd4ca7a2367e4cf65 Mon Sep 17 00:00:00 2001
From: yangzongjia <yangzongjia>
Date: Wed, 7 Jun 2023 19:20:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=EF=BC=8C=E5=BE=AA=E7=8E=AF=E9=81=8D=E5=8E=86?=
 =?UTF-8?q?=20=E8=A7=86=E9=A2=91=E4=B8=AD=E5=BF=83=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/device.js                      |    7 +-
 src/views/index.vue                           |  645 ++++++-----
 src/views/monitor/videos/index.vue            | 1008 +++++++++++------
 .../shebeitaizhang/shebeitaizhangAdd.vue      |   31 +-
 src/views/zhiwujiance/zhiwujianceList.vue     |    1 -
 5 files changed, 1061 insertions(+), 631 deletions(-)

diff --git a/src/api/device/device.js b/src/api/device/device.js
index e744b13..dae2c82 100644
--- a/src/api/device/device.js
+++ b/src/api/device/device.js
@@ -37,6 +37,12 @@ export function getInfoById(data) {
   return request({ url: '/device/getInfoById', method: 'GET', params: data })
 }
 
+// 获取摄像头列表
+export function getSxtList() {
+  return request({ url: '/device/getSxtList', method: 'GET' })
+}
+
+/******************************************************************************************************************************************** */
 
 
 // 创建消息消费者
@@ -59,4 +65,3 @@ export function doCallMessageOffsets(data) {
 export function getCallZoneStatusList(data) {
   return request({ url: '/call/getCallZoneStatusList', method: 'GET' })
 }
-
diff --git a/src/views/index.vue b/src/views/index.vue
index c686138..1f0675e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,81 +1,81 @@
 <template>
   <div class="webindex">
     <div class="zongcons">
-        <div class="maps">
-          <div class="wenboxs">
-            <div class="wenbox">
-              <div class="tubiao"><span class="myiconfont icon-shishijiance1 tolzi"></span></div>
-              <div class="tos">
-                <div class="tit nums">河北仓库<span class="num">3</span>家</div>
-                <div class="tit nums">货物数<span class="num">4575</span>个</div>
-              </div>
+      <div class="maps">
+        <div class="wenboxs">
+          <div class="wenbox">
+            <div class="tubiao"><span class="myiconfont icon-shishijiance1 tolzi"></span></div>
+            <div class="tos">
+              <div class="tit nums">河北仓库<span class="num">3</span>家</div>
+              <div class="tit nums">货物数<span class="num">4575</span>个</div>
             </div>
-            <div class="wenbox">
-              <div class="tubiao"><span class="myiconfont icon-louyuzidonghua tolzi"></span></div>
-              <div class="tos">
-                <div class="tit nums">湖北仓库<span class="num">3</span>家</div>
-                <div class="tit nums">货物数<span class="num">2575</span>个</div>
-              </div>
+          </div>
+          <div class="wenbox">
+            <div class="tubiao"><span class="myiconfont icon-louyuzidonghua tolzi"></span></div>
+            <div class="tos">
+              <div class="tit nums">湖北仓库<span class="num">3</span>家</div>
+              <div class="tit nums">货物数<span class="num">2575</span>个</div>
             </div>
-            <div class="wenbox">
-              <div class="tubiao"><span class="myiconfont icon-shebeitaizhang tolzi"></span></div>
-              <div class="tos">
-                <div class="tit nums">黑龙江<span class="num">3</span>家</div>
-                <div class="tit nums">货物数<span class="num">4575</span>个</div>
-              </div>
+          </div>
+          <div class="wenbox">
+            <div class="tubiao"><span class="myiconfont icon-shebeitaizhang tolzi"></span></div>
+            <div class="tos">
+              <div class="tit nums">黑龙江<span class="num">3</span>家</div>
+              <div class="tit nums">货物数<span class="num">4575</span>个</div>
             </div>
-            <div class="wenbox">
-              <div class="tubiao"><span class="myiconfont icon-zhihuilouyu tolzi"></span></div>
-              <div class="tos">
-                <div class="tit nums">上海仓库<span class="num">1</span>家</div>
-                <div class="tit nums">货物数<span class="num">123</span>个</div>
-              </div>
+          </div>
+          <div class="wenbox">
+            <div class="tubiao"><span class="myiconfont icon-zhihuilouyu tolzi"></span></div>
+            <div class="tos">
+              <div class="tit nums">上海仓库<span class="num">1</span>家</div>
+              <div class="tit nums">货物数<span class="num">123</span>个</div>
             </div>
-            <div class="wenbox">
-              <div class="tubiao"><span class="myiconfont icon-rizhi2 tolzi"></span></div>
-              <div class="tos">
-                <div class="tit nums">江苏仓库<span class="num">1</span>家</div>
-                <div class="tit nums">货物数<span class="num">126</span>个</div>
-              </div>
+          </div>
+          <div class="wenbox">
+            <div class="tubiao"><span class="myiconfont icon-rizhi2 tolzi"></span></div>
+            <div class="tos">
+              <div class="tit nums">江苏仓库<span class="num">1</span>家</div>
+              <div class="tit nums">货物数<span class="num">126</span>个</div>
             </div>
+          </div>
 
 
 
-          </div>
-          <home-map style="height:600px"></home-map>
         </div>
-          <!-- 第3行 -->
-        <div class="con">
-          <!-- 第1 -->
-          <div class="news">
-            <div class="title">
-              <div class="newstits">报警信息</div>
-              <div class="more" @click="toMore()">更多></div>
-            </div>
-            <div class="content">
-              <div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
-                <div class="dot">&bull;</div>
-                <div class="tit">{{item.title}}</div>
-                <div class="time">{{item.createTime}}</div>
-              </div>
-            </div>
+        <home-map style="height:600px"></home-map>
+      </div>
+      <!-- 第3行 -->
+      <div class="con">
+        <!-- 第1 -->
+        <div class="news">
+          <div class="title">
+            <div class="newstits">报警信息</div>
+            <div class="more" @click="toMore()">更多></div>
           </div>
-          <!-- 第1 -->
-          <div class="news">
-            <div class="title">
-              <div class="newstits">提醒任务</div>
-              <div class="more" @click="toMoreb()">更多></div>
+          <div class="content">
+            <div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
+              <div class="dot">&bull;</div>
+              <div class="tit">{{ item.name }}</div>
+              <div class="time">{{ item.createTime }}</div>
             </div>
-            <div class="content">
-              <div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
-                <div class="dot">&bull;</div>
-                <div class="tit">{{item.title}}</div>
-                <div class="time">{{item.createTime}}</div>
-              </div>
+          </div>
+        </div>
+        <!-- 第1 -->
+        <div class="news">
+          <div class="title">
+            <div class="newstits">提醒任务</div>
+            <div class="more" @click="toMoreb()">更多></div>
+          </div>
+          <div class="content">
+            <div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
+              <div class="dot">&bull;</div>
+              <div class="tit">{{ item.title }}</div>
+              <div class="time">{{ item.createTime }}</div>
             </div>
           </div>
-          <!-- -->
         </div>
+        <!-- -->
+      </div>
     </div>
 
 
@@ -114,8 +114,8 @@
               <div class="note"><span class="redzi"></span></div>
             </div>
             <div class="bar">
-            <pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan>
-          </div>
+              <pie-chartrenyuan :chart-data="shipinjiankong_Chart"></pie-chartrenyuan>
+            </div>
           </div>
         </div>
       </div>
@@ -165,18 +165,20 @@
 </template>
 
 <script>
-  import { login1 } from '@/api/system/user/login.js'
-  import * as echarts from "echarts";
-  import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
-  import HomeMap from '@/views/dashboard/components/HomeMap'
-  // 1.1入侵报警饼图
-  const ruqinbaojing_Chart = {
+import { login1 } from '@/api/system/user/login.js'
+import * as echarts from "echarts";
+import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
+import HomeMap from '@/views/dashboard/components/HomeMap'
+import { getCallPolicePage } from '@/api/callPolice/callPolice'
+import { init } from 'events';
+// 1.1入侵报警饼图
+const ruqinbaojing_Chart = {
   // seriesName: '入侵报警',
   unit: '次',
   color: ['#34ffff', '#34abff', '#4c6eff'],
   Data: {
     seriesData: [
-    { value: 56, name: '正常' },
+      { value: 56, name: '正常' },
       { value: 39, name: '离线' },
       { value: 28, name: '报警' }
     ]
@@ -190,14 +192,14 @@
 
   // radius: ['50%', '55%']
 }
-  // 1.2视频监控饼图
-  const shipinjiankong_Chart = {
+// 1.2视频监控饼图
+const shipinjiankong_Chart = {
   // seriesName: '视频监控',
   unit: '次',
   color: ['#fe7f02', '#049f51', '#fdc004'],
   Data: {
     seriesData: [
-    { value: 39, name: '正常' },
+      { value: 39, name: '正常' },
       { value: 19, name: '离线' },
       // { value: 12, name: '报警' }
     ]
@@ -211,18 +213,18 @@
 
   // radius: ['50%', '55%']
 }
-  // 1.3门禁管理饼图
-  const menjinguanli_Chart = {
+// 1.3门禁管理饼图
+const menjinguanli_Chart = {
   // seriesName: '门禁管理',
   unit: '次',
-  color: [ '#FCCE10',
-  '#E87C25',
-  '#C1232B'],
+  color: ['#FCCE10',
+    '#E87C25',
+    '#C1232B'],
   Data: {
     seriesData: [
-    { value: 28, name: '正常' },
+      { value: 28, name: '正常' },
       { value: 22, name: '离线' },
-      { value:18, name: '报警' }
+      { value: 18, name: '报警' }
     ]
   },
   label: {
@@ -234,16 +236,16 @@
 
   // radius: ['50%', '55%']
 }
-  // 1.4电子围栏饼图
-  const dianziweilan_Chart = {
+// 1.4电子围栏饼图
+const dianziweilan_Chart = {
   // seriesName: '电子围栏',
   unit: '次',
   color: ['#9BCA63',
-  '#FAD860',
-  '#F3A43B'],
+    '#FAD860',
+    '#F3A43B'],
   Data: {
     seriesData: [
-    { value: 24, name: '正常' },
+      { value: 24, name: '正常' },
       { value: 8, name: '离线' },
       { value: 16, name: '报警' }
     ]
@@ -257,16 +259,16 @@
 
   // radius: ['50%', '55%']
 }
-  // 1.电子巡更饼图
-  const dianzixungeng_Chart = {
+// 1.电子巡更饼图
+const dianzixungeng_Chart = {
   // seriesName: '电子巡更',
   unit: '次',
   color: ['#60C0DD',
-  '#D7504B',
-  '#C6E579'],
+    '#D7504B',
+    '#C6E579'],
   Data: {
     seriesData: [
-    { value: 39, name: '正常' },
+      { value: 39, name: '正常' },
       { value: 16, name: '离线' },
       { value: 12, name: '报警' }
     ]
@@ -280,100 +282,123 @@
 
   // radius: ['50%', '55%']
 }
-  export default {
-    name: 'index',
-    components: {
-      PieChartrenyuan,HomeMap,
-    },
-    created() {
-      var _self = this
-      setInterval(function () {
-        _self.getMessage();
-      }, 20000)
+export default {
+  name: 'index',
+  components: {
+    PieChartrenyuan, HomeMap,
+  },
+  created() {
+    var _self = this
+    setInterval(function () {
+      _self.getMessage();
+    }, 20000)
+
+    this.init()
+  },
+  data() {
+    return {
+      ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
+      shipinjiankong_Chart: shipinjiankong_Chart,
+      menjinguanli_Chart: menjinguanli_Chart,
+      dianziweilan_Chart: dianziweilan_Chart,
+      dianzixungeng_Chart: dianzixungeng_Chart,
+      token: '',
+      Datalista: [
+        { title: '您有新任务了', createTime: '2023-05-23' },
+        { title: '您有新任务了', createTime: '2023-05-23' },
+        { title: '您有新任务了', createTime: '2023-05-23' },
+        { title: '您有新任务了', createTime: '2023-05-23' },
+        { title: '您有新任务了', createTime: '2023-05-23' },
+      ],
+      Datalist: [],
+    }
+  },
+  methods: {
+    init() {
+      getCallPolicePage({ current: 1, size: 5 }).then((res) => {
+        console.log(res)
+        if (res.code == 200) {
+          this.Datalist = res.data.records
+        } else {
+          this.list = []
+        }
+      })
     },
-    data() {
-      return {
-        ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
-        shipinjiankong_Chart:shipinjiankong_Chart,
-        menjinguanli_Chart: menjinguanli_Chart,
-        dianziweilan_Chart: dianziweilan_Chart,
-        dianzixungeng_Chart: dianzixungeng_Chart,
-        token: '',
-        Datalista: [
-          { title: '您有新任务了', createTime: '2023-05-23' },
-          { title: '您有新任务了', createTime: '2023-05-23' },
-          { title: '您有新任务了', createTime: '2023-05-23' },
-          { title: '您有新任务了', createTime: '2023-05-23' },
-          { title: '您有新任务了', createTime: '2023-05-23' },
-        ],
-        Datalist: [
-          { title: '您有新消息了', createTime: '2023-05-23' },
-          { title: '您有新消息了', createTime: '2023-05-23' },
-          { title: '您有新消息了', createTime: '2023-05-23' },
-          { title: '您有新消息了', createTime: '2023-05-23' },
-          { title: '您有新消息了', createTime: '2023-05-23' },
-        ],
-      }
+    toMore() {
+      this.$router.push({
+        path: '/baojingchaxun/baojingchaxunList',
+      })
     },
-    methods: {
-      toMore() {
-          this.$router.push({
-            path: '/baojingchaxun/baojingchaxunList',
-          })
+    getMessage() {
+
+      this.$notify({
+        title: '报警消息',
+        dangerouslyUseHTMLString: true,
+        // // message: "<img src='" + warningIcon + "'>" + data.messageContent,
+        // message: "<img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span>",
+
+        message: " <div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span></div>",
+        position: 'bottom-right',
+        onClick: () => {
+          alert("这是一条新订单")
+          // this.playText('你有一条报警信息未读')
+          // this.getServicePageLists()
+
+
         },
-      getMessage() {
-
-        this.$notify({
-          title: '报警消息',
-          dangerouslyUseHTMLString: true,
-          // // message: "<img src='" + warningIcon + "'>" + data.messageContent,
-         // message: "<img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span>",
-
-         message: " <div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span></div>",
-         position: 'bottom-right',
-          onClick: () => {
-            alert("这是一条新订单")
-            // this.playText('你有一条报警信息未读')
-            // this.getServicePageLists()
-
-
-          },
-          duration: 3000,
-        })
-      },
-      //  	getToken(){
-      //  		let params = {
-      //  			password: "329653",
-      //					roleSid: "",
-      //					token: "",
-      //					userName: "15097329653",
-      //					verifyCode: ""
-      //  		}
-      //  		login1(params).then(res => {
-      //  			this.token = res.data.token
-      //  			window.sessionStorage.setItem('token', res.data.token)
-      //        })
-      //  	}
-    }
+        duration: 3000,
+      })
+    },
+    //  	getToken(){
+    //  		let params = {
+    //  			password: "329653",
+    //					roleSid: "",
+    //					token: "",
+    //					userName: "15097329653",
+    //					verifyCode: ""
+    //  		}
+    //  		login1(params).then(res => {
+    //  			this.token = res.data.token
+    //  			window.sessionStorage.setItem('token', res.data.token)
+    //        })
+    //  	}
   }
+}
 </script>
 
 <style lang="scss" scoped>
-.zongcons{margin: 0;padding: 0;flex: 1;width: 100%;height: calc(100% - 160px);}
-.rightbars{
+.zongcons {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 160px);
+}
+
+.rightbars {}
 
+.zongcons .maps {
+  width: 100%;
+  height: 605px;
+  padding: 40px 0 0 100px;
+  text-align: right;
 }
-.zongcons .maps{width: 100%;height: 605px;padding:40px 0 0 100px;text-align: right;}
-  .webindex {
-    display: flex;
+
+.webindex {
+  display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: flex-start;
-    width: 100%; padding: 20px;
-    height: 100%;overflow-y: auto;
-    background: radial-gradient(#fff,#f5f7f4, #fff);
-  }
-  .tops {width: 470px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  padding: 20px;
+  height: 100%;
+  overflow-y: auto;
+  background: radial-gradient(#fff, #f5f7f4, #fff);
+}
+
+.tops {
+  width: 470px;
   // display: flex;
   // flex-direction: row;
   // flex-wrap: nowrap;
@@ -381,75 +406,96 @@
   padding: 0 0 0 20px;
   margin: 0px;
 }
-.tops .topboxs {width: 100%;
+
+.tops .topboxs {
+  width: 100%;
 
   padding: 0px 0px 15px 0 !important;
 
 }
+
 .topbox {
   // width: 25%;
   //margin: 20px 20 0 0 !important;
   background-color: #fff;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
-  padding:  20px 10px 21px 10px;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
+  padding: 20px 10px 21px 10px;
 }
+
 // .tops .topbox:last-of-type {
 //   margin: 0;
 // }
 .topbox .toptitle {
   font-size: 20px;
   padding: 10px 20px;
-  font-weight: bold;  color: #333;font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  font-size: 16px;
   border-bottom: 1px solid #ececee;
 }
+
 .topbox .mids {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: center;
+  justify-content: flex-start;
+  align-items: center;
   margin: 0;
-  padding:  35px 20px 38px 20px;
+  padding: 35px 20px 38px 20px;
   // padding: 20px ;
 }
-.topbox .mids .lefts{width: 100px;}
+
+.topbox .mids .lefts {
+  width: 100px;
+}
+
 .topbox .mids .lefts .iconbox {
-		border-radius: 10px;
-		line-height: 80px;
-		width: 80px;
-		height: 80px;
-		color: #fff;
-		font-size: 36px;text-align: center;
-	}
-  .iconbox_red {
-		background-color: #df2f07;
-	}
-
-	.iconbox_yellow {
-		background-color: #ff7521;
-	}
-
-
-  .iconbox_green {
-		background-color: #07C160;
-	}
-	.iconbox_blue {
-		background-color: #3f9bfa;
-	}
-	.iconbox_zi {
-		background-color: #6421ff;
-	}
-
-	.iconbox_fen {
-		background-color: #9b2efb;
-	}
-.topbox .mids .rights {flex: 1;
+  border-radius: 10px;
+  line-height: 80px;
+  width: 80px;
+  height: 80px;
+  color: #fff;
+  font-size: 36px;
+  text-align: center;
+}
+
+.iconbox_red {
+  background-color: #df2f07;
+}
+
+.iconbox_yellow {
+  background-color: #ff7521;
+}
+
+
+.iconbox_green {
+  background-color: #07C160;
+}
+
+.iconbox_blue {
+  background-color: #3f9bfa;
+}
+
+.iconbox_zi {
+  background-color: #6421ff;
+}
+
+.iconbox_fen {
+  background-color: #9b2efb;
+}
+
+.topbox .mids .rights {
+  flex: 1;
   padding: 2px 0 2px 10px;
 }
+
 .topbox .mids .rights .note {
   color: #333;
   font-size: 14px;
   padding: 0 0 3px 0;
 }
+
 .topbox .mids .rights .note span {
   font-size: 20px;
   padding: 0 5px;
@@ -460,42 +506,54 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: flex-start;
+  justify-content: flex-start;
+  align-items: flex-start;
   margin: 0;
   padding: 20px 0 0 0;
 }
+
 .tbar {
   width: 25%;
   margin: 0 20px 0 0;
   background-color: #fff;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
   padding: 10px;
 }
+
 .tbar:last-of-type {
   margin: 0;
 }
+
 .tbar0 {
   border-bottom: 0px solid #032ab8;
 }
+
 .tbar .title {
   font-size: 20px;
   padding: 10px 20px;
-  font-weight: bold;  color: #333;font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  font-size: 16px;
   border-bottom: 1px solid #ececee;
 }
+
 .tbar .title span {
   padding: 0 10px 0 0;
 }
+
 .tbar .bar {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: center;
+  justify-content: flex-start;
+  align-items: center;
   margin: 0;
   padding: 0px;
   height: 190px;
 
 }
+
 .con {
   padding: 10px 0 0 0;
   display: flex;
@@ -503,16 +561,20 @@
   flex-wrap: nowrap;
   justify-content: space-around;
 }
+
 .news {
   width: calc(100% / 2);
   margin: 0 20px 0 0;
   background-color: #fff;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
   padding: 10px;
 }
+
 .news:last-of-type {
   margin: 0;
 }
+
 .news .title {
   display: flex;
   flex-direction: row;
@@ -524,15 +586,21 @@
 }
 
 .news .title .newstits {
-  font-weight: bold;  color: #333;font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  font-size: 16px;
 }
 
-.news .title .more {text-align: right;
-  cursor: pointer;color: #6c6a6a;font-size: 14px;
+.news .title .more {
+  text-align: right;
+  cursor: pointer;
+  color: #6c6a6a;
+  font-size: 14px;
 }
 
 .news .content {
-  padding: 10px 0; height:120px;
+  padding: 10px 0;
+  height: 120px;
   // height:160px;
   overflow: hidden;
 }
@@ -546,12 +614,15 @@
   padding: 5px 10px;
   border-bottom: 1px solid #ececee;
 }
+
 .news .content .newsli .dot {
   padding: 0px 8px 0 0;
   font-size: 18px;
   height: 25px;
-  line-height: 25px;color: #047cf7;
+  line-height: 25px;
+  color: #047cf7;
 }
+
 .news .content .newsli .tit {
   padding: 0px 0;
   font-size: 14px;
@@ -566,8 +637,9 @@
 .news .content .newsli .time {
   padding: 0px 0;
   color: #666666;
-  text-align: right;font-size: 14px;
-  width: 100px;
+  text-align: right;
+  font-size: 14px;
+  width: 200px;
   height: 25px;
   line-height: 25px;
 }
@@ -575,77 +647,78 @@
 /////
 
 .wenboxs {
-    padding: 20px;
-    margin: 0;
-    position: absolute;
-    z-index: 600;
-    top: 20px;left: 20px;
-    // background-color: rgba($color: #ffffff, $alpha: 0.7);
-    // box-shadow: 0px 0px 6px #0d27c2;
-    background-color: #fff;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
-  }
-
-  .wenboxs .wenbox {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0;
-    font-size: 18px;
-    color: #8d8e90;
-    padding: 10px;
-    border-bottom: 1px solid #E9E9E9;
-  }
+  padding: 20px;
+  margin: 0;
+  position: absolute;
+  z-index: 600;
+  top: 20px;
+  left: 20px;
+  // background-color: rgba($color: #ffffff, $alpha: 0.7);
+  // box-shadow: 0px 0px 6px #0d27c2;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
+}
 
-  .wenboxs .wenbox:last-of-type {
-    border-bottom: 0px solid #E9E9E9;
-  }
+.wenboxs .wenbox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0;
+  font-size: 18px;
+  color: #8d8e90;
+  padding: 10px;
+  border-bottom: 1px solid #E9E9E9;
+}
 
-  .wenbox .tubiao {
-    margin: 0 5px;
-    font-size: 18px;
-    // color: #b7d8fa;
-    padding: 0 5px 0 0;
-  }
+.wenboxs .wenbox:last-of-type {
+  border-bottom: 0px solid #E9E9E9;
+}
 
-  .wenbox .tubiao .tolzi {
-    color: #3f9bfa;
-    font-size: 40px;
-  }
+.wenbox .tubiao {
+  margin: 0 5px;
+  font-size: 18px;
+  // color: #b7d8fa;
+  padding: 0 5px 0 0;
+}
 
-  .bluezi {
-    // color: #042d6a;
-    font-size: 18px !important;
-  }
+.wenbox .tubiao .tolzi {
+  color: #3f9bfa;
+  font-size: 40px;
+}
 
-  .wenbox .tos {
-    margin: 0;
-    font-size: 14px;
-    color: #474848;
-    padding: 0;
-    text-align: left;
-  }
+.bluezi {
+  // color: #042d6a;
+  font-size: 18px !important;
+}
 
-  .wenbox .tos .tit {
-    margin: 0;
-    font-size: 14px;
-    // color: #6f7172;
-    padding: 0 0 10px 0;
-  }
+.wenbox .tos {
+  margin: 0;
+  font-size: 14px;
+  color: #474848;
+  padding: 0;
+  text-align: left;
+}
 
-  .wenbox .tos .nums {
-    margin: 0;
-    padding: 0;
-  }
+.wenbox .tos .tit {
+  margin: 0;
+  font-size: 14px;
+  // color: #6f7172;
+  padding: 0 0 10px 0;
+}
 
-  .wenbox .tos .nums .num {
-    font-size: 20px;
-    padding: 0 5px;
-    font-weight: bold;
-    display: inline-block;
-    color: #fc6f04;
-  }
+.wenbox .tos .nums {
+  margin: 0;
+  padding: 0;
+}
 
+.wenbox .tos .nums .num {
+  font-size: 20px;
+  padding: 0 5px;
+  font-weight: bold;
+  display: inline-block;
+  color: #fc6f04;
+}
 </style>
diff --git a/src/views/monitor/videos/index.vue b/src/views/monitor/videos/index.vue
index a76002f..55a46d4 100644
--- a/src/views/monitor/videos/index.vue
+++ b/src/views/monitor/videos/index.vue
@@ -1,17 +1,18 @@
-<template>
-  <div class="app-container">
+<template >
+  <div class="app-container" @click="() => active = -1">
     <div v-if="viewState == 1">
       <!-- <button-bar view-title="视频中心" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> -->
       <div class="main-content">
 
         <div class="shipinlisttop">
-            <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
-              <el-form-item label="选择仓库">
-                <el-select v-model="listQuery.params.cangku" filterable clearable placeholder="请选择仓库">
-                  <el-option v-for="item in cangku_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
-                </el-select>
-              </el-form-item>
-              <!-- <el-form-item label="选择楼栋">
+          <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
+            <el-form-item label="选择仓库">
+              <el-select v-model="listQuery.params.cangku" filterable clearable placeholder="请选择仓库">
+                <el-option v-for="item in cangku_list" :key="item.dictKey" :label="item.dictValue"
+                  :value="item.dictKey" />
+              </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="选择楼栋">
                 <el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼栋">
                   <el-option v-for="item in loudong_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                 </el-select>
@@ -21,14 +22,14 @@
                   <el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                 </el-select>
               </el-form-item> -->
-            </el-form>
+          </el-form>
           <!-- 11 -->
         </div>
         <div class="shipinscons">
           <div class="shipinscon">
 
             <div class="shipinstu">
-              <img src="/image/cangkutu.png"/>
+              <img src="/image/cangkutu.png" />
               <!-- 111入侵报警 -->
               <!-- <div class="ruqinbaojingcss" style="z-index: 10;" v-if="showRuqinbaojing">
                 <div class="myiconfont bluezibg jingicon ruqin_zhengchang1"  v-if="showRuqinbaojing_zhengchang"  @click="openshipinRuqinbaojing()">&#xe608;</div>
@@ -59,82 +60,23 @@
               </div> -->
               <!-- 111end -->
               <!-- 222视频监控 -->
-              <div class="ruqinbaojingcss" v-if="showShipinjiankong">
-                <div class="myiconfont huizibg jingicon shipin_lixian1" v-if="showShipinjiankong_lixian">&#xe644;</div>
-                <div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div>
-
-                <div class="shipincss  Shipin_yingzi" v-if="showShipinjiankong_zhengchang">
-                  <div class="jingicon  shipin_zhengchang1" v-if="showShipinjiankong_zhengchang">
-                    <div class="myiconfont jingicon   bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
-                    <!-- 显示文字 -->
-                    <div class="seencons shipin_out" v-if="seenshipinShipinjiankong">
-                      <p @click="toMore()">实时视频</p>
+              <div class="ruqinbaojingcss" v-if="showShipinjiankong" v-for="(item, index) in zc_list">
+                <!-- <div class="myiconfont huizibg jingicon shipin_lixian1" v-if="showShipinjiankong_lixian">&#xe644;</div>
+                <div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div> -->
+                <div class="shipincss  Shipin_yingzi blockDiv" v-if="showShipinjiankong_zhengchang">
+                  <div class="jingicon  shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
+                    :id=item.sid v-if="showShipinjiankong_zhengchang">
+                    <div class="myiconfont jingicon  bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"
+                      @mouseleave="leave" @click.stop="openshipinShipinjiankong(index)">&#xe644;</div>
+                    <div class="seencons shipin_out noneDiv2" v-if="active == index">
+                      <p @click="getShiPin(item.channelNo)">实时视频</p>
                       <p @click="toMore()">回放视频</p>
                     </div>
-                    <!-- 鼠标移入显示文字 -->
-                    <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong">
-                      <p>设备名称：1号楼1F西侧走廊像头1</p>
-                      <p>设备编号：HK023123</p>
+                    <div class="seenconsc shipin_out noneDiv">
+                      <p>设备名称：{{ item.name }}</p>
+                      <p>设备编号：{{ item.number }}</p>
                     </div>
                   </div>
-                  <div class="jingicon  shipin_zhengchang2" v-if="showShipinjiankong_zhengchang">
-                    <div class="myiconfont jingicon   bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter2"  @mouseleave="leave2"  @click="openshipinShipinjiankong2()">&#xe644;</div>
-                    <!-- 显示文字 -->
-                    <!-- <div class="seencons shipin_out" v-if="seenshipinShipinjiankong2">
-                      <p @click="toMore()">实时视频2</p>
-                      <p @click="toMore()">回放视频2</p>
-                    </div> -->
-                    <!-- 鼠标移入显示文字 -->
-                    <!-- <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong2">
-                      <p>设备名称：1号楼1F西侧走廊像头222</p>
-                      <p>设备编号：HK222222</p>
-
-                    </div> -->
-                  </div>
-                  <div class="jingicon  shipin_zhengchang3" v-if="showShipinjiankong_zhengchang">
-                    <div class="myiconfont jingicon   bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter3"  @mouseleave="leave3"  @click="openshipinShipinjiankong3()">&#xe644;</div>
-                    <!-- 显示文字 -->
-                    <!-- <div class="seencons shipin_out" v-if="seenshipinShipinjiankong3">
-                      <p @click="toMore()">实时视频</p>
-                      <p @click="toMore()">回放视频3</p>
-                    </div> -->
-                    <!-- 鼠标移入显示文字 -->
-                    <!-- <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong3">
-                      <p>设备名称：1号楼1F西侧走廊像头33</p>
-                      <p>设备编号：HK3333</p>
-                    </div> -->
-                  </div>
-                  <div class="jingicon  shipin_zhengchang4" v-if="showShipinjiankong_zhengchang">
-                    <div class="myiconfont jingicon   bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter4"  @mouseleave="leave4"  @click="openshipinShipinjiankong4()">&#xe644;</div>
-                    <!-- 显示文字 -->
-                    <!-- <div class="seencons shipin_out" v-if="seenshipinShipinjiankong4">
-                      <p @click="toMore()">实时视频4</p>
-                      <p @click="toMore()">回放视频</p>
-                    </div> -->
-                    <!-- 鼠标移入显示文字 -->
-                    <!-- <div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong4">
-                      <p>设备名称：1号楼1F西侧走廊像头4</p>
-                      <p>设备编号：HK0244444</p>
-
-                    </div> -->
-                  </div>
-
-
-                  <!-- <div class="myiconfont bluezibg jingicon shipin_zhengchang1" v-if="showShipinjiankong_zhengchang" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
-
-                  <div class="myiconfont bluezibg jingicon shipin_zhengchang2" v-if="showShipinjiankong_zhengchang">&#xe644;</div>
-                  <div class="myiconfont bluezibg jingicon shipin_zhengchang3" v-if="showShipinjiankong_zhengchang">&#xe644;</div>
-                  <div class="myiconfont bluezibg jingicon shipin_zhengchang4" v-if="showShipinjiankong_zhengchang">&#xe644;</div> -->
-                  <!-- 显示文字 -->
-                  <!-- <div class="seencons shipin_zhengchang1b" v-if="seenshipinShipinjiankong">
-                    <p @click="toMore()">实时视频</p>
-                    <p @click="toMore()">回放视频</p>
-                  </div> -->
-                  <!-- 鼠标移入显示文字 -->
-                  <!-- <div class="seenconsc shipin_zhengchang1c" v-if="seen_shubiaoShipinjiankong">
-                    <p>设备名称：1号楼1F西侧走廊像头1</p>
-                    <p>设备编号：HK023123</p>
-                  </div> -->
                 </div>
               </div>
               <!-- 2222end -->
@@ -142,9 +84,11 @@
               <div class="ruqinbaojingcss" v-if="showMenjinguanli">
                 <div class="Menjincss Menjin_yingzi" v-if="showMenjinguanli_zhengchang">
                   <!-- <div class="myiconfont bluezibg jingicon menjin_zhengchang1"  v-if="showMenjinguanli_zhengchang"  @click="openshipinMenjinguanli()">&#xe60b;</div> -->
-                  <div class="myiconfont bluezibg jingicon menjin_zhengchang2"  v-if="showMenjinguanli_zhengchang">&#xe60b;</div>
+                  <div class="myiconfont bluezibg jingicon menjin_zhengchang2" v-if="showMenjinguanli_zhengchang">&#xe60b;
+                  </div>
                   <div class="jingicon  menjin_zhengchang1" v-if="showMenjinguanli_zhengchang">
-                    <div class="myiconfont jingicon   bluezibg" v-if="showMenjinguanli_zhengchang"  @click="openshipinMenjinguanli()">&#xe60b;</div>
+                    <div class="myiconfont jingicon   bluezibg" v-if="showMenjinguanli_zhengchang"
+                      @click="openshipinMenjinguanli()">&#xe60b;</div>
                     <!-- 显示文字 -->
                     <div class="seencons shipin_out" v-if="seenshipinMenjinguanli">
                       <p @click="openshipinMenjinguanli()">开门</p>
@@ -159,7 +103,7 @@
 
                 </div>
 
-                <div class="myiconfont huizibg jingicon menjin_lixian1"  v-if="showMenjinguanli_lixian">&#xe60b;</div>
+                <div class="myiconfont huizibg jingicon menjin_lixian1" v-if="showMenjinguanli_lixian">&#xe60b;</div>
                 <div class="myiconfont redzibg jingicon menjin_baojing1" v-if="showMenjinguanli_baojing">&#xe60b;</div>
                 <!-- 显示文字 -->
                 <!-- <div class="seencons menjin_zhengchang1b" v-if="seenshipinMenjinguanli">
@@ -168,13 +112,16 @@
               </div>
               <!-- 333end -->
               <!--444门电子围栏-->
-              <div class="ruqinbaojingcss"  v-if="showDianziweilan">
-                  <div class="myiconfont huizibg jingicon Dianziweilan_lixian1"  v-if="showDianziweilan_lixian">&#xe6b8;</div>
-                  <div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;</div>
+              <div class="ruqinbaojingcss" v-if="showDianziweilan">
+                <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" v-if="showDianziweilan_lixian">&#xe6b8;
+                </div>
+                <div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;
+                </div>
                 <div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_zhengchang">
                   <!-- <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" v-if="showDianziweilan_zhengchang"  @click="openshipinDianziweilan()">&#xe6b8;</div> -->
                   <div class="jingicon  Dianziweilan_zhengchang1" v-if="showDianziweilan_zhengchang">
-                    <div class="myiconfont jingicon   bluezibg" v-if="showDianziweilan_zhengchang"  @click="openshipinDianziweilan()">&#xe6b8;</div>
+                    <div class="myiconfont jingicon   bluezibg" v-if="showDianziweilan_zhengchang"
+                      @click="openshipinDianziweilan()">&#xe6b8;</div>
                     <!-- 显示文字 -->
                     <div class="seencons shipin_out" v-if="seenshipinDianziweilan">
                       <p @click="openshipinDianziweilan()">布防</p>
@@ -191,12 +138,17 @@
 
 
 
-                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang2" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
+                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang2" v-if="showDianziweilan_zhengchang">
+                    &#xe6b8;</div>
 
-                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang3" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
-                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang4" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
-                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang5" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
-                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang6" v-if="showDianziweilan_zhengchang">&#xe6b8;</div>
+                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang3" v-if="showDianziweilan_zhengchang">
+                    &#xe6b8;</div>
+                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang4" v-if="showDianziweilan_zhengchang">
+                    &#xe6b8;</div>
+                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang5" v-if="showDianziweilan_zhengchang">
+                    &#xe6b8;</div>
+                  <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang6" v-if="showDianziweilan_zhengchang">
+                    &#xe6b8;</div>
                   <!-- 显示文字 -->
                   <!-- <div class="seencons Dianziweilan_zhengchang1b" v-if="seenshipinDianziweilan">
                     <p @click="toMore()">布防</p>
@@ -215,18 +167,27 @@
             <div class="tabhead">
               <el-checkbox-group v-model="departmentTypeArray">
                 <!-- <el-checkbox-button label="1" checked><div  @click="openruqinbaojing()"><span  class="iconfontyuan myiconfont redziyuan icon-intruder-alarm"></span>入侵报警</div></el-checkbox-button> -->
-                <el-checkbox-button   checked label="2"><div  @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
-                <el-checkbox-button   checked label="3"><div  @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
-                <el-checkbox-button   checked label="4"><div  @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
+                <el-checkbox-button checked label="2">
+                  <div @click="openshipinjiankong()"><span
+                      class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div>
+                </el-checkbox-button>
+                <el-checkbox-button checked label="3">
+                  <div @click="openmenjinguanli()"><span
+                      class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div>
+                </el-checkbox-button>
+                <el-checkbox-button checked label="4">
+                  <div @click="opendianziweilan()"><span
+                      class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div>
+                </el-checkbox-button>
               </el-checkbox-group>
             </div>
 
-            <div class="moress" >
+            <div class="moress">
               <!-- 视频监控按钮组 -->
               <div class="mores">
-                <el-checkbox-group size="mini"  v-model="btnShipinjiankong">
-                  <el-checkbox-button  checked label="备选项1" border>
-                    <div class="more"  @click="open_zhengchang()">
+                <el-checkbox-group size="mini" v-model="btnShipinjiankong">
+                  <el-checkbox-button checked label="备选项1" border>
+                    <div class="more" @click="open_zhengchang()">
                       <p class="bluezi">正常</p>
 
                       <span class="myiconfont iconbox bluezibg">&#xe651;</span><span class="numzi bluezi">216</span>
@@ -234,13 +195,13 @@
                     </div>
                   </el-checkbox-button>
                   <el-checkbox-button checked label="备选项2" border>
-                    <div class="more"   @click="open_lixian()">
+                    <div class="more" @click="open_lixian()">
                       <p class="huizi">离线</p>
                       <span class="myiconfont iconbox huizibg">&#xe651;</span><span class="numzi huizi">23</span>
                     </div>
                   </el-checkbox-button>
                   <el-checkbox-button checked label="备选项3" border>
-                    <div class="more"  @click="open_baojing()">
+                    <div class="more" @click="open_baojing()">
                       <p class="redzi">报警</p>
                       <span class="myiconfont iconbox redzibg">&#xe651;</span><span class="numzi redzi">38</span>
                     </div>
@@ -256,12 +217,18 @@
       </div>
     </div>
 
+    <!-- 查看监控 -->
+    <el-dialog title="查看视频" :visible.sync="dialogImageJK" width="800px" :before-close="handleCloseJK" style="z-index:999">
+      <iframe :src="this.spUrl" width="750" height="400" id="ysOpenDevice" allowfullscreen>
+      </iframe>
+    </el-dialog>
+
     <!-- 查看视频 -->
-    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px"  :before-close="handleClose">
+    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px" :before-close="handleClose">
       <div class="shipin">
         <video id="video" :preload="preload" :height="height" :width="width" align="center" :controls="controls">
-            <source :src="videoSrc" type="video/mp4">
-          </video>
+          <source :src="videoSrc" type="video/mp4">
+        </video>
       </div>
       <!-- <span slot="footer" class="dialog-footer">
         <el-button @click="dialogImage = false">取 消</el-button>
@@ -274,7 +241,8 @@
 import Pagination from '@/components/pagination'
 import pageye from '@/components/pagination/pageye'
 import ButtonBar from '@/components/ButtonBar'
-// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
+import { getSxtList } from '@/api/device/device'
+import { getShiPinByChannelNo } from '@/api/deviceImage/deviceImage'
 // import baojingchaxunAdd from './baojingchaxunAdd'
 // import baojingchaxunInfo from './baojingchaxunInfo'
 // import req from '@/api/baojingchaxun/baojingchaxun'
@@ -289,49 +257,17 @@ export default {
   },
   data() {
     return {
-      checkList: ['选中且禁用','复选框 A'],
-      btnRuqinbaojing:[],
-      btnShipinjiankong:[],
-      btnMenjinguanli:[],
-      btnDianziweilan:[],
+      checkList: ['选中且禁用', '复选框 A'],
+      btnRuqinbaojing: [],
+      btnShipinjiankong: [],
+      btnMenjinguanli: [],
+      btnDianziweilan: [],
       btndisabled: false,
+      zc_list: [
+        { name: '左', number: '123', left: '2%', top: '2%' },
+        { name: '右', number: 'ABC', left: '20%', top: '20%' }
+      ],
       btnList: [
-        // {
-        //   type: 'primary',
-        //   size: 'small',
-        //   icon: 'plus',
-        //   btnKey: 'toAdd',
-        //   btnLabel: '新增'
-        // },
-        // {
-        //   type: 'danger',
-        //   size: 'small',
-        //   icon: 'del',
-        //   btnKey: 'doDel',
-        //   btnLabel: '删除'
-        // },
-        // {
-        //   type: 'primary',
-        //   size: 'small',
-        //   icon: '',
-        //   btnKey: 'toChangShang',
-        //   btnLabel: '获取厂商'
-        // },
-        // {
-        //   type: 'primary',
-        //   size: 'small',
-        //   icon: '',
-        //   btnKey: 'toGain',
-        //   btnLabel: '获取分公司'
-        // },
-
-        // {
-        //   type: 'success',
-        //   size: 'small',
-        //   icon: 'export',
-        //   btnKey: 'build',
-        //   btnLabel: '导出'
-        // },
         {
           type: 'info',
           size: 'small',
@@ -346,9 +282,11 @@ export default {
       sids: [],
       // 查询 -----------
       tableKey: 0,
-      list: [{bianma:'212233433',supplierTypeValue:'222',weizhi:'212233433',time:'2023-02-26',anzhuangtime:'2023-02-26',gonghuashang:'222'
-      ,supplierTypeValue:'222',zhuangtai:'222'}
-    ],
+      list: [{
+        bianma: '212233433', supplierTypeValue: '222', weizhi: '212233433', time: '2023-02-26', anzhuangtime: '2023-02-26', gonghuashang: '222'
+        , supplierTypeValue: '222', zhuangtai: '222'
+      }
+      ],
       listLoading: false,
       listQuery: {
         params: {
@@ -364,38 +302,41 @@ export default {
         total: 0
       },
       cangku_list: [
-        {dictValue:'仓库1',dictKey:'1'}
+        { dictValue: '仓库1', dictKey: '1' }
       ],
       loudong_list: [
-        {dictValue:'1号楼',dictKey:'1'}
+        { dictValue: '1号楼', dictKey: '1' }
       ],
-      supplierType_list: [ {dictValue:'一层',dictKey:'1'}],
+      supplierType_list: [{ dictValue: '一层', dictKey: '1' }],
 
       Datalista: [
-         {xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
-         {xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
-        ],
-        dialogImage: false,
-        // 视频开始
-     videoSrc: '../../../image/cangkushipin.mp4',
+        { xiaoqu: '和平家园小区南门出口', tuUrl: './image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区东门出口', tuUrl: './image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区西门出口', tuUrl: './image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区东门出口', tuUrl: './image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区南门出口', tuUrl: './image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区东门出口', tuUrl: './image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区西门出口', tuUrl: './image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
+        { xiaoqu: '和平家园小区东门出口', tuUrl: './image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
+      ],
+      dialogImage: false,
+      dialogImageJK: false,
+      // 视频开始
+      videoSrc: '../../../image/cangkushipin.mp4',
 
       playStatus: '',
       muteStatus: '',
+      spUrl: '',
+      active: -1,
       isMute: true,
       isPlay: false,
       width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
       height: '430', // 设置视频播放器的显示高度（以像素为单位）
       preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
       controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
-       autoplay: true,
-       departmentTypeArray: [],
-       icontu: ['redziyuan icon-intruder-alarm', 'greenziyuan icon-shipin1', 'yellowziyuan icon-menjin', 'blueziyuan icon-electronic-patrol'],
+      autoplay: true,
+      departmentTypeArray: [],
+      icontu: ['redziyuan icon-intruder-alarm', 'greenziyuan icon-shipin1', 'yellowziyuan icon-menjin', 'blueziyuan icon-electronic-patrol'],
       jigounavType: [
         { value: '4', label: '入侵报警', zi: 'icon-dituleiditu' },
         { value: '2', label: '视频监控', zi: 'icon-dituleiditu' },
@@ -433,8 +374,8 @@ export default {
       //上边的按钮视频监控报警
       showShipinjiankong_baojing: true,
 
-       //上边的按钮门禁管理正常
-       showMenjinguanli_zhengchang: true,
+      //上边的按钮门禁管理正常
+      showMenjinguanli_zhengchang: true,
       //上边的按钮门禁管理离线
       showMenjinguanli_lixian: true,
       //上边的按钮门禁管理报警
@@ -450,19 +391,26 @@ export default {
     }
   },
   // mounted() {
-  //   this.$refs['btnbar'].setButtonList(this.btnList)
+  // this.$refs['btnbar'].setButtonList(this.btnList)
   // },
   created() {
     // 初始化变量
-    // this.init()
+    this.init()
   },
   methods: {
+    bodyCloseMenus() {
+      console.log(111111)
+      this.active = -1
+    },
     handleClose() {
       this.dialogImage = false
       // 关闭弹出框时 视频关闭播放
       const video = document.getElementById('video')
       video.pause()
     },
+    handleCloseJK() {
+      this.dialogImageJK = false
+    },
     handleVideo() {
       this.$refs.videoDiolag.dialogImage = true
     },
@@ -470,7 +418,8 @@ export default {
     openshipinRuqinbaojing() {
       this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
     },
-    openshipinShipinjiankong() {
+    openshipinShipinjiankong(index) {
+      this.active = index
       this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
     },
     openshipinShipinjiankong2() {
@@ -508,7 +457,7 @@ export default {
     //上边的按钮入侵报警正常
     openruqinbaojing_zhengchang() {
       this.showRuqinbaojing = true
-    this.showRuqinbaojing_zhengchang = !this.showRuqinbaojing_zhengchang
+      this.showRuqinbaojing_zhengchang = !this.showRuqinbaojing_zhengchang
     },
     //入侵报警离线
     openruqinbaojing_lixian() {
@@ -522,7 +471,7 @@ export default {
     },
     //上边的按钮视频监控正常
     openShipinjiankong_zhengchang() {
-    this.showShipinjiankong_zhengchang = !this.showShipinjiankong_zhengchang
+      this.showShipinjiankong_zhengchang = !this.showShipinjiankong_zhengchang
     },
     //上边的按钮视频监控离线
     openShipinjiankong_lixian() {
@@ -535,7 +484,7 @@ export default {
 
     //上边的按钮门禁管理正常
     openMenjinguanli_zhengchang() {
-    this.showMenjinguanli_zhengchang = !this.showMenjinguanli_zhengchang
+      this.showMenjinguanli_zhengchang = !this.showMenjinguanli_zhengchang
     },
     //上边的按钮门禁管理离线
     openMenjinguanli_lixian() {
@@ -591,15 +540,15 @@ export default {
     leave2() {
       this.seen_shubiaoShipinjiankong2 = false
     },
-        //鼠标移入3
-        enter3() {
+    //鼠标移入3
+    enter3() {
       this.seen_shubiaoShipinjiankong3 = true
     },
     leave3() {
       this.seen_shubiaoShipinjiankong3 = false
     },
-        //鼠标移入2
-        enter4() {
+    //鼠标移入2
+    enter4() {
       this.seen_shubiaoShipinjiankong4 = true
     },
     leave4() {
@@ -642,25 +591,14 @@ export default {
         this.searchxianshitit = '显示查询条件'
       }
     },
-    // init() {
-    //   getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => {
-    //     if (res.success) {
-    //       this.listQuery.params.createOrgSid = res.data
-    //       this.getType()
-    //       this.getList()
-    //     }
-    //   })
-    // },
-    // getType() {
-    //   typeValues({
-    //     type: 'supplierType'
-    //   }).then((res) => {
-    //     if (res.code === '200') {
-    //       this.supplierType_list = res.data
-    //       console.log('选择楼层', this.supplierType_list)
-    //     }
-    //   })
-    // },
+    init() {
+      getSxtList().then((res) => {
+        console.log(res)
+        if (res.code == 200) {
+          this.zc_list = res.data
+        }
+      })
+    },
     // 序号
     indexMethod(index) {
       var pagestart = (this.listQuery.current - 1) * this.listQuery.size
@@ -704,7 +642,7 @@ export default {
     // 打开添加对话框
     toAdd() {
       this.viewState = 2
-       this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid)
+      this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid)
     },
 
     handleSelectionChange(row) {
@@ -799,7 +737,14 @@ export default {
       this.$store.dispatch('tagsView/delView', this.$route)
       this.$router.go(-1)
     },
+    getShiPin(channelNo) {
+      getShiPinByChannelNo({ channelNo: channelNo }).then(res => {
+        this.spUrl = res.data
+        this.dialogImageJK = true
+      })
+    },
     toMore() {
+      this.active = -1
       this.dialogImage = true
     },
     checkbox(item) {
@@ -812,21 +757,59 @@ export default {
 </script>
 
 <style scoped>
+.main-content {
+  position: relative;
+  overflow: hidden;
+}
+
+.seencons {
+  background-color: #fff;
+  width: 130px;
+  z-index: 9900;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
+  padding: 0 30px;
+}
+
+
+.seencons p {
+  padding: 0px 0 0px 0;
+  border-bottom: 1px solid #ececee;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  margin: 0;
+}
 
-.main-content{position: relative;overflow: hidden;}
-.seencons{background-color: #fff;width: 130px;z-index: 9900;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
-  padding: 0 30px;}
-.seencons p{padding: 0px 0 0px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;margin: 0;}
 /* // */
 /* 鼠标移入 */
-.seenconsc{background-color: #fff;width: 250px;z-index: 9800;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
-  padding: 0 30px;}
-.seenconsc p{padding: 0px 0 0px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;margin: 0;}
-.shipin_out{position: absolute;top: 40px;left: 35px;}
+.seenconsc {
+  background-color: #fff;
+  width: 250px;
+  z-index: 9800;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
+  padding: 0 30px;
+}
+
+.seenconsc p {
+  padding: 0px 0 0px 0;
+  border-bottom: 1px solid #ececee;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  margin: 0;
+}
+
+.shipin_out {
+  position: absolute;
+  top: 40px;
+  left: 35px;
+}
+
 /* .app-container{background-color: #f5f5f5;margin: 0;} */
-.shipinlisttop {position: relative;
+.shipinlisttop {
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -834,164 +817,457 @@ export default {
   /* padding: 0 0 0 15px; */
   margin: 20px 0;
   background-color: #fff;
-  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
   padding: 10px;
 }
-.tab-header{background-color: #fff;}
-  /* .shipinscons {height: 95%;text-align: center;overflow-y: auto;
+
+.tab-header {
+  background-color: #fff;
+}
+
+/* .shipinscons {height: 95%;text-align: center;overflow-y: auto;
     margin: 20px auto 0;
     text-align: center;position: relative;
   padding: 20px 50px 20px 50px;
   background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
 } */
-.shipinscons {height: 95%;text-align: center;overflow-y: auto;
-    margin: 0px auto 0;
-    text-align: center;position: relative;
+.shipinscons {
+  height: 95%;
+  text-align: center;
+  overflow-y: auto;
+  margin: 0px auto 0;
+  text-align: center;
+  position: relative;
   padding: 20px 50px 20px 50px;
-  background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
 }
-.shipinscon {width: 60%;
-    margin: 0px auto 0;
-    text-align: center;position: relative;
+
+.shipinscon {
+  width: 60%;
+  margin: 0px auto 0;
+  text-align: center;
+  position: relative;
   padding: 20px 50px 20px 50px;
 
 }
-  .shipinstu {
-    /* border:1px solid #0241c1; */
-    position:absolute;left: 0;
-    margin: 0 auto;text-align: center;
+
+.shipinstu {
+  /* border:1px solid #0241c1; */
+  position: absolute;
+  left: 0;
+  margin: 0 auto;
+  text-align: center;
 
   /* z-index: 0;
   background: url("/image/cangkutu.png") center bottom no-repeat;
   background-size: 100% 100%;min-height: 580px;
   padding: 0 20px;position: relative; */
 }
-.shipinstu img{margin: 0 auto;height: 550px;}
-.shipinstu .ruqinbaojingcss{position:absolute;left: 0;top:0;
-     /* position:absolute; */
-     /* border: #e20202 solid 2px; */
-     width: 100%;
-     height: 100%;
-     /* float: left;
+
+.shipinstu img {
+  margin: 0 auto;
+  height: 550px;
+}
+
+.shipinstu .ruqinbaojingcss {
+  position: absolute;
+  left: 0;
+  top: 0;
+  /* position:absolute; */
+  /* border: #e20202 solid 2px; */
+  width: 100%;
+  height: 100%;
+  /* float: left;
      top:0; */
 }
-.Dianziweilancss{position:absolute;top:4%;right: 15%;bottom: 4%;left: 15%;
+
+.Dianziweilancss {
+  position: absolute;
+  top: 4%;
+  right: 15%;
+  bottom: 4%;
+  left: 15%;
 }
-.shipincss{position:absolute;top:2%;right: 1%;bottom: 2%;left: 2%;
+
+.shipincss {
+  position: absolute;
+  top: 2%;
+  right: 1%;
+  bottom: 2%;
+  left: 2%;
 }
-.Menjincss{position:absolute;top:2%;right: 2%;bottom: 2%;left: 2%;
+
+.Menjincss {
+  position: absolute;
+  top: 2%;
+  right: 2%;
+  bottom: 2%;
+  left: 2%;
 }
-.shipinstu .jingicon {cursor: pointer;position: relative;
+
+.shipinstu .jingicon {
+  cursor: pointer;
+  position: relative;
   font-size: 22px !important;
   border-radius: 40px !important;
   width: 40px !important;
-  height: 40px !important;line-height: 40px;
-  padding: 0px;text-align: center;z-index: 20;
+  height: 40px !important;
+  line-height: 40px;
+  padding: 0px;
+  text-align: center;
+  z-index: 20;
+
+
+}
 
+.noneDiv {
+  display: none;
+}
 
+.blockDiv:hover .noneDiv {
+  display: block;
+  opacity: 1;
+  transition: 0.3s;
+  pointer-events: all;
 }
 
 .redzibg {
-  color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  color: #fff;
+  background: radial-gradient(circle, #8c0303, #e20202);
   border: 1px solid #fd0808;
 }
+
 .bluezibg {
-  color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
+  color: #fff;
+  background: radial-gradient(circle, #0241c1, #327af9);
   border: 1px solid #469efd;
 }
+
 .huizibg {
-  color: #fff; background: radial-gradient(circle, #303030, #636363);
+  color: #fff;
+  background: radial-gradient(circle, #303030, #636363);
   border: 1px solid #878788;
 }
-.shipinstu .ruqin_baojing1{position: absolute;top: 10px;left: 20%;}
-.shipinstu .ruqin_baojing1b{position: absolute;top: 50px;left: 22%;}
-.shipinstu .ruqin_baojing2{position: absolute;top: 10px;left: 40%;}
-.shipinstu .ruqin_baojing3{position: absolute;top: 10px;left: 70%;}
-.shipinstu .ruqin_baojing4{position: absolute;top: 10px;left: 95%;}
-.shipinstu .ruqin_zhengchang1{position: absolute;top: 10%;left: 1%;}
-.shipinstu .ruqin_zhengchang1b{position: absolute;top: 15%;left: 3%;}
-.shipinstu .ruqin_zhengchang2{position: absolute;top: 30%;left: 1%;}
-.shipinstu .ruqin_zhengchang3{position: absolute;top: 45%;left: 1%;}
-.shipinstu .ruqin_zhengchang4{position: absolute;top: 65%;left: 8%;}
-.shipinstu .ruqin_zhengchang5{position: absolute;top: 90%;left: 8%;}
-.shipinstu .ruqin_zhengchang6{position: absolute;top: 90%;left: 15%;}
-.shipinstu .ruqin_zhengchang7{position: absolute;top: 90%;left: 30%;}
-.shipinstu .ruqin_zhengchang8{position: absolute;top: 90%;left: 40%;}
-.shipinstu .ruqin_zhengchang9{position: absolute;top: 90%;left: 60%;}
-.shipinstu .ruqin_zhengchang10{position: absolute;top: 90%;left: 90%;}
-.shipinstu .ruqin_zhengchang11{position: absolute;top: 70%;left: 98%;}
-.shipinstu .ruqin_lixian1{position: absolute;top: 50%;left: 98%;}
-.shipinstu .ruqin_lixian2{position: absolute;top: 30%;left: 98%;}
+
+.shipinstu .ruqin_baojing1 {
+  position: absolute;
+  top: 10px;
+  left: 20%;
+}
+
+.shipinstu .ruqin_baojing1b {
+  position: absolute;
+  top: 50px;
+  left: 22%;
+}
+
+.shipinstu .ruqin_baojing2 {
+  position: absolute;
+  top: 10px;
+  left: 40%;
+}
+
+.shipinstu .ruqin_baojing3 {
+  position: absolute;
+  top: 10px;
+  left: 70%;
+}
+
+.shipinstu .ruqin_baojing4 {
+  position: absolute;
+  top: 10px;
+  left: 95%;
+}
+
+.shipinstu .ruqin_zhengchang1 {
+  position: absolute;
+  top: 10%;
+  left: 1%;
+}
+
+.shipinstu .ruqin_zhengchang1b {
+  position: absolute;
+  top: 15%;
+  left: 3%;
+}
+
+.shipinstu .ruqin_zhengchang2 {
+  position: absolute;
+  top: 30%;
+  left: 1%;
+}
+
+.shipinstu .ruqin_zhengchang3 {
+  position: absolute;
+  top: 45%;
+  left: 1%;
+}
+
+.shipinstu .ruqin_zhengchang4 {
+  position: absolute;
+  top: 65%;
+  left: 8%;
+}
+
+.shipinstu .ruqin_zhengchang5 {
+  position: absolute;
+  top: 90%;
+  left: 8%;
+}
+
+.shipinstu .ruqin_zhengchang6 {
+  position: absolute;
+  top: 90%;
+  left: 15%;
+}
+
+.shipinstu .ruqin_zhengchang7 {
+  position: absolute;
+  top: 90%;
+  left: 30%;
+}
+
+.shipinstu .ruqin_zhengchang8 {
+  position: absolute;
+  top: 90%;
+  left: 40%;
+}
+
+.shipinstu .ruqin_zhengchang9 {
+  position: absolute;
+  top: 90%;
+  left: 60%;
+}
+
+.shipinstu .ruqin_zhengchang10 {
+  position: absolute;
+  top: 90%;
+  left: 90%;
+}
+
+.shipinstu .ruqin_zhengchang11 {
+  position: absolute;
+  top: 70%;
+  left: 98%;
+}
+
+.shipinstu .ruqin_lixian1 {
+  position: absolute;
+  top: 50%;
+  left: 98%;
+}
+
+.shipinstu .ruqin_lixian2 {
+  position: absolute;
+  top: 30%;
+  left: 98%;
+}
 
 /* //视频监控// */
-.shipinstu .shipin_baojing1{position: absolute;top: 13%;left: 2%;}
-.shipinstu .shipin_zhengchang1{position: absolute;top: 2%;left: 2%;}
+.shipinstu .shipin_baojing1 {
+  position: absolute;
+  top: 13%;
+  left: 2%;
+}
+
+.shipinstu .shipin_zhengchang {
+  position: absolute;
+}
+
 /* .shipinstu .shipin_out{position: absolute;top: 40%;left: 40%;z-index: 800;}
 .shipinstu .shipin_dianout{position: absolute;top: 40%;left: 40%;z-index: 200;} */
-.shipinstu .shipin_zhengchang1b{position: absolute;top: 7%;left: 7%;z-index: 8000;}
-.shipinstu .shipin_zhengchang1c{position: absolute;top: 7%;left: 7%;z-index: 8000;}
-.shipinstu .shipin_lixian1{position: absolute;top: 78%;left: 2%;}
-.shipinstu .shipin_zhengchang2{position: absolute;top: 90%;left: 2%;}
-.shipinstu .shipin_zhengchang3{position: absolute;top: 2%;left: 93%;}
-.shipinstu .shipin_zhengchang4{position: absolute;top: 90%;left: 93%;}
+.shipinstu .shipin_zhengchang1b {
+  position: absolute;
+  top: 7%;
+  left: 7%;
+  z-index: 8000;
+}
+
+.shipinstu .shipin_zhengchang1c {
+  position: absolute;
+  top: 7%;
+  left: 7%;
+  z-index: 8000;
+}
+
+.shipinstu .shipin_lixian1 {
+  position: absolute;
+  top: 78%;
+  left: 2%;
+}
+
+.shipinstu .shipin_zhengchang2 {
+  position: absolute;
+  top: 90%;
+  left: 2%;
+}
+
+.shipinstu .shipin_zhengchang3 {
+  position: absolute;
+  top: 2%;
+  left: 93%;
+}
+
+.shipinstu .shipin_zhengchang4 {
+  position: absolute;
+  top: 90%;
+  left: 93%;
+}
+
 /* //门禁管理// */
-.shipinstu .menjin_baojing1{position: absolute;top: 12%;left: 90%;}
-.shipinstu .menjin_zhengchang1{position: absolute;top: 14%;left: 95%;}
-.shipinstu .menjin_zhengchang1b{position: absolute;top: 19%;left: 92%;z-index: 800;}
-.shipinstu .menjin_lixian1{position: absolute;top: 78%;left: 90%;}
+.shipinstu .menjin_baojing1 {
+  position: absolute;
+  top: 12%;
+  left: 90%;
+}
+
+.shipinstu .menjin_zhengchang1 {
+  position: absolute;
+  top: 14%;
+  left: 95%;
+}
+
+.shipinstu .menjin_zhengchang1b {
+  position: absolute;
+  top: 19%;
+  left: 92%;
+  z-index: 800;
+}
+
+.shipinstu .menjin_lixian1 {
+  position: absolute;
+  top: 78%;
+  left: 90%;
+}
+
+.shipinstu .menjin_zhengchang2 {
+  position: absolute;
+  top: 78%;
+  left: 95%;
+}
 
-.shipinstu .menjin_zhengchang2{position: absolute;top: 78%;left: 95%;}
 /* //电子围栏// */
-.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;z-index: 5000;}
-.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 0%;left: 93%;z-index: 500;}
-.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 5%;left: 88%;z-index: 500;}
-.shipinstu .Dianziweilan_lixian1{position: absolute;top: 87%;left: 42%;}
-
-.shipinstu .Dianziweilan_zhengchang2{position: absolute;top: 92%;left: 93%;}
-.shipinstu .Dianziweilan_zhengchang3{position: absolute;top: 0%;left: 46%;}
-.shipinstu .Dianziweilan_zhengchang4{position: absolute;top: 92%;left: 46%;}
-.shipinstu .Dianziweilan_zhengchang5{position: absolute;top: 0%;left: 0%;}
-.shipinstu .Dianziweilan_zhengchang6{position: absolute;top: 92%;left: 0%;}
-
-.Dianziweilan_yingzi{
+.shipinstu .Dianziweilan_baojing1 {
+  position: absolute;
+  top: 35px;
+  left: 42%;
+  z-index: 500;
+}
+
+.shipinstu .Dianziweilan_zhengchang1 {
+  position: absolute;
+  top: 0%;
+  left: 93%;
+  z-index: 500;
+}
+
+.shipinstu .Dianziweilan_zhengchang1b {
+  position: absolute;
+  top: 5%;
+  left: 88%;
+  z-index: 500;
+}
+
+.shipinstu .Dianziweilan_lixian1 {
+  position: absolute;
+  top: 87%;
+  left: 42%;
+}
+
+.shipinstu .Dianziweilan_zhengchang2 {
+  position: absolute;
+  top: 92%;
+  left: 93%;
+}
+
+.shipinstu .Dianziweilan_zhengchang3 {
+  position: absolute;
+  top: 0%;
+  left: 46%;
+}
+
+.shipinstu .Dianziweilan_zhengchang4 {
+  position: absolute;
+  top: 92%;
+  left: 46%;
+}
+
+.shipinstu .Dianziweilan_zhengchang5 {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+}
+
+.shipinstu .Dianziweilan_zhengchang6 {
+  position: absolute;
+  top: 92%;
+  left: 0%;
+}
+
+.Dianziweilan_yingzi {
   /* background-color: rgba(73, 74, 75, 0.2); */
-  border-radius: 30px;}
-.Shipin_yingzi{
+  border-radius: 30px;
+}
+
+.Shipin_yingzi {
   /* background-color: rgba(70, 117, 192, 0.2); */
   /* z-index: 200; */
 }
-.Menjin_yingzi{
+
+.Menjin_yingzi {
   /* background-color: rgba(70, 117, 192, 0.2); */
   /* z-index: 200; */
 }
 
-.Shipinlixian_yingzi{
+.Shipinlixian_yingzi {
   /* background-color: rgba(94, 4, 4, 0.2); */
-  z-index: 10;}
-.mores  /deep/ .el-checkbox{width: 126px;margin: 0;}
-.mores  /deep/ .el-checkbox-button {
-   background-color: #dbd9d9;height: 40px;margin: 0px 0 20px 0;
+  z-index: 10;
+}
+
+.mores /deep/ .el-checkbox {
+  width: 126px;
+  margin: 0;
 }
-.mores  /deep/ .el-checkbox-button__inner {
-   background-color: #fff;height: 40px;border: 1px solid #e1e2e4;
+
+.mores /deep/ .el-checkbox-button {
+  background-color: #dbd9d9;
+  height: 40px;
+  margin: 0px 0 20px 0;
 }
+
+.mores /deep/ .el-checkbox-button__inner {
+  background-color: #fff;
+  height: 40px;
+  border: 1px solid #e1e2e4;
+}
+
 .mores /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
-  background-color: #e9f7fa;border: 1px solid #469efd;color: #000;
+  background-color: #e9f7fa;
+  border: 1px solid #469efd;
+  color: #000;
 }
-  /* // 底部导航 */
-  .sbottombars{
+
+/* // 底部导航 */
+.sbottombars {
   /* padding: 30px;
     background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
-    position: fixed;
+  position: fixed;
   bottom: 50px;
-  left: 230px;width: 100%;
+  left: 230px;
+  width: 100%;
   /* z-index: 900; */
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: center;
+  justify-content: flex-start;
+  align-items: center;
 }
-  .tabhead {padding: 0 0px 0 0;
+
+.tabhead {
+  padding: 0 0px 0 0;
 
   /* position: fixed;
   bottom: 50px;
@@ -999,60 +1275,89 @@ export default {
   z-index: 900; */
 
 }
-.moress{
+
+.moress {
   /* position: absolute;bottom:30px;right: 20px;z-index: 9000;left: 20px; */
-  padding: 20px 0 0 170px;margin: 0px 0 0px 0;
+  padding: 20px 0 0 170px;
+  margin: 0px 0 0px 0;
   /* display: flex;
   flex-direction: column;
   justify-content: center;align-items: center; */
 }
-.mores{padding: 0 0px;margin: 0px 0 0px 0;
+
+.mores {
+  padding: 0 0px;
+  margin: 0px 0 0px 0;
   /* flex: 1; */
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: center;
+  justify-content: flex-start;
+  align-items: center;
 }
-.mores .more{flex: 1;font-size: 14px;padding: 0 0 10px 0;cursor: pointer;margin: 0;
+
+.mores .more {
+  flex: 1;
+  font-size: 14px;
+  padding: 0 0 10px 0;
+  cursor: pointer;
+  margin: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;align-items: center;}
-  .mores .more p {display: inline-block;margin: 0;
-		font-size: 14px;
-	}
-  .mores .more .numzi {display: inline-block;margin: 0;
-		font-size: 18px;font-weight: bold;
-	}
-.mores .more .iconbox {display: inline-block;
-		border-radius: 25px;
-		line-height: 25px;
-		width: 25px;
-		height: 25px;
-		color: #fff;
-		font-size: 18px;text-align: center;margin: 0 2px;
-	}
-  /* .iconbox_red {
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.mores .more p {
+  display: inline-block;
+  margin: 0;
+  font-size: 14px;
+}
+
+.mores .more .numzi {
+  display: inline-block;
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.mores .more .iconbox {
+  display: inline-block;
+  border-radius: 25px;
+  line-height: 25px;
+  width: 25px;
+  height: 25px;
+  color: #fff;
+  font-size: 18px;
+  text-align: center;
+  margin: 0 2px;
+}
+
+/* .iconbox_red {
     color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
   border: 1px solid #fd0808;
-	}
+    }
 
-	.iconbox_yellow {
-		background-color: #ff7521;
-	}
+    .iconbox_yellow {
+        background-color: #ff7521;
+    }
 
 
   .iconbox_green {
-		background-color: #07C160;
-	}
-	.iconbox_blue {
+        background-color: #07C160;
+    }
+    .iconbox_blue {
     color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
   border: 1px solid #469efd;
-	} */
-	.iconbox_hui {
-		background-color: #373739;
-	}
-  .huizi{color: #373739;}
+    } */
+.iconbox_hui {
+  background-color: #373739;
+}
+
+.huizi {
+  color: #373739;
+}
 
 
 
@@ -1065,6 +1370,7 @@ export default {
   padding: 5px;
 
 }
+
 .yellowziyuan {
   color: #fff;
   background-color: #f57c13;
@@ -1089,10 +1395,30 @@ export default {
   color: #fff;
   background-color: #683afd;
 }
-.tabhead .bar{background-color: #0b5394;color: #f5f7fa;border-right: 1px solid #fff;padding: 11px 0;text-align: center;display: inline-block;vertical-align: top;
- width: calc((100% - 1px) / 4 );box-sizing: border-box;font-size:18px;}
- .tabhead .bar:last-of-type{border-right: 0px solid #eeeeee;width: calc((100% - 0px) / 4 );}
- .tabhead .barb {background-color: #fff;color: #0b5394;}
+
+.tabhead .bar {
+  background-color: #0b5394;
+  color: #f5f7fa;
+  border-right: 1px solid #fff;
+  padding: 11px 0;
+  text-align: center;
+  display: inline-block;
+  vertical-align: top;
+  width: calc((100% - 1px) / 4);
+  box-sizing: border-box;
+  font-size: 18px;
+}
+
+.tabhead .bar:last-of-type {
+  border-right: 0px solid #eeeeee;
+  width: calc((100% - 0px) / 4);
+}
+
+.tabhead .barb {
+  background-color: #fff;
+  color: #0b5394;
+}
+
 /* .leftbars{
    position: absolute;
   top: 60px;
diff --git a/src/views/shebeitaizhang/shebeitaizhangAdd.vue b/src/views/shebeitaizhang/shebeitaizhangAdd.vue
index c590424..7876e12 100644
--- a/src/views/shebeitaizhang/shebeitaizhangAdd.vue
+++ b/src/views/shebeitaizhang/shebeitaizhangAdd.vue
@@ -57,8 +57,6 @@
             </el-col>
             <el-col :span="8">
               <el-form-item prop="">
-                <!-- <el-date-picker type="date" placeholder="选择日期" v-model="addForm.manufacturerCode" style="width: 410px;"
-                  maxlength="20"></el-date-picker> -->
                 <el-input v-model="addForm.remarks" maxlength="20" placeholder="请填写备注" class="addinputw" clearable />
               </el-form-item>
             </el-col>
@@ -73,6 +71,35 @@
                   clearable />
               </el-form-item>
             </el-col>
+            <el-col :span="4" class="tleftb">
+              <span>上偏移</span>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="topPosition">
+                <el-input v-model="addForm.topPosition" maxlength="20" placeholder="请填写上偏移" class="addinputw"
+                  clearable />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="tleftb">
+              <span>左偏移</span>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="leftPosition">
+                <el-input v-model="addForm.leftPosition" maxlength="20" placeholder="请填写左偏移" class="addinputw"
+                  clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="tleftb">
+              <span>摄像头编数</span>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="channelNo">
+                <el-input v-model="addForm.channelNo" maxlength="20" placeholder="请填写摄像头编数,比如：1,2,3,4" class="addinputw"
+                  clearable />
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
       </div>
diff --git a/src/views/zhiwujiance/zhiwujianceList.vue b/src/views/zhiwujiance/zhiwujianceList.vue
index a8434bb..f30f5cb 100644
--- a/src/views/zhiwujiance/zhiwujianceList.vue
+++ b/src/views/zhiwujiance/zhiwujianceList.vue
@@ -288,7 +288,6 @@ export default {
         this.spUrl = res.data
         this.dialogImage = true
       })
-
     },
     handleClose() {
       this.dialogImage = false