From 0fa7124dfc83940bffc50fa5dd755dffc1932fdb Mon Sep 17 00:00:00 2001
From: "zyc@123456" <784479659@qq.com>
Date: Wed, 24 May 2023 18:19:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=B5=E5=AD=90=E5=B7=A1?=
 =?UTF-8?q?=E6=9B=B4=EF=BC=8C=E6=B6=88=E9=98=B2=E6=8A=A5=E8=AD=A6=E7=AD=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E8=A7=86=E9=A2=91=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/Item.vue        |   9 +-
 src/layout/components/Sidebar/index.vue       |  57 +-
 src/router/index.js                           |  40 +
 src/views/dianzixungeng/dianzixungengL.vue    | 740 ++++++++++++++++++
 .../echarts/components/PieChartrenyuanb.vue   | 317 ++++++++
 src/views/index.vue                           |  29 +-
 src/views/monitor/videos/index.vue            | 274 ++++++-
 .../shebeitaizhang/shebeitaizhangList.vue     | 161 +++-
 .../xiaofangbaojing/xiaofangbaojingL.vue      | 740 ++++++++++++++++++
 9 files changed, 2309 insertions(+), 58 deletions(-)
 create mode 100644 src/views/dianzixungeng/dianzixungengL.vue
 create mode 100644 src/views/echarts/components/PieChartrenyuanb.vue
 create mode 100644 src/views/xiaofangbaojing/xiaofangbaojingL.vue

diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index aa1f5da..e3fedf0 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -19,7 +19,10 @@ export default {
     if (icon) {
       if (icon.includes('el-icon')) {
         vnodes.push(<i class={[icon, 'sub-el-icon']} />)
-      } else {
+      } else if (icon.includes('icon-')) {
+        // vnodes.push(<span class="myiconfont icon-shipin1"></span>)
+        vnodes.push(<span class={[icon, 'myiconfont']}></span>)
+      }else {
         vnodes.push(<svg-icon icon-class={icon}/>)
       }
     }
@@ -38,4 +41,8 @@ export default {
   width: 1em;
   height: 1em;
 }
+.myiconfont{
+  width: 1em;margin: 0 20px 0 0px;
+  height: 1em;
+}
 </style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 187de36..8691f4b 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -38,7 +38,10 @@
           alwaysShow: true,
           component: "index",
           meta: {
-            icon: "el-icon-menu",
+           // icon: "el-icon-menu",
+
+            icon: "icon-shouye",
+
             title: "首页",
           },
           name: "",
@@ -58,7 +61,7 @@
           alwaysShow: true,
           component: "monitor",
           meta: {
-            icon: "el-icon-menu",
+            icon: "icon-shipin1",
             title: "视频中心",
           },
           name: "",
@@ -94,11 +97,31 @@
         //     path: "/gongyingshang/gongyingshanggaunli",
         //   }]
         // },
+        {
+          alwaysShow: true,
+          component: "dianzixungeng",
+          meta: {
+            icon: "icon-jingwuicon_svg-",
+            title: "电子巡更",
+          },
+          name: "",
+          path: "/dianzixungeng/dianzixungengL",
+          // children: [{
+          //   alwaysShow: true,
+          //   component: "index",
+          //   meta: {
+          //     icon: "el-icon-help",
+          //     title: "电子巡更",
+          //   },
+          //   name: "/dianzixungeng/dianzixungengL",
+          //   path: "/dianzixungeng/dianzixungengL",
+          // }]
+        },
         {
           alwaysShow: true,
           component: "renlianshibie",
           meta: {
-            icon: "el-icon-menu",
+            icon: "icon-renlianshibie6",
             title: "人脸识别",
           },
           name: "",
@@ -114,11 +137,31 @@
           //   path: "/renlianshibie/renlianshibieList",
           // }]
         },
+        {
+          alwaysShow: true,
+          component: "xiaofangbaojing",
+          meta: {
+            icon: "icon-baojingshu",
+            title: "消防报警",
+          },
+          name: "",
+          path: "/xiaofangbaojing/xiaofangbaojingL",
+          // children: [{
+          //   alwaysShow: true,
+          //   component: "index",
+          //   meta: {
+          //     icon: "el-icon-help",
+          //     title: "消防报警",
+          //   },
+          //   name: "/xiaofangbaojing/xiaofangbaojingL",
+          //   path: "/xiaofangbaojing/xiaofangbaojingL",
+          // }]
+        },
         {
           alwaysShow: true,
           component: "shebeitaizhang",
           meta: {
-            icon: "el-icon-menu",
+            icon: "icon-supervision",
             title: "设备台账",
           },
           name: "",
@@ -138,7 +181,7 @@
           alwaysShow: true,
           component: "baojingchaxun",
           meta: {
-            icon: "el-icon-menu",
+            icon: "icon-baojing",
             title: "报警查询",
           },
           name: "",
@@ -158,7 +201,7 @@
           alwaysShow: true,
           component: "shebeizhuangtai",
           meta: {
-            icon: "el-icon-menu",
+            icon: "icon-shebeizhuangtai1",
             title: "设备状态",
           },
           name: "",
@@ -178,7 +221,7 @@
           alwaysShow: true,
           component: "shebeirizhi",
           meta: {
-            icon: "el-icon-menu",
+            icon: "icon-nenghaoshuju",
             title: "设备日志",
           },
           name: "",
diff --git a/src/router/index.js b/src/router/index.js
index 2d4f136..bcbc72e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -192,6 +192,46 @@ export const constantRoutes = [
       },
     ],
   },
+  ////电子巡更
+  {
+    path: "/dianzixungengL",
+    component: Layout,
+    redirect: "/dianzixungeng/dianzixungengL",
+    meta: {
+      title: "电子巡更",
+    },
+    children: [
+      {
+        path: "/dianzixungeng/dianzixungengL",
+        component: () => import("@/views/dianzixungeng/dianzixungengL.vue"),
+        name: "dianzixungengL",
+        meta: {
+          title: "电子巡更",
+          noCache: true,
+        },
+      },
+    ],
+  },
+  ////消防报警
+  {
+    path: "/xiaofangbaojingL",
+    component: Layout,
+    redirect: "/xiaofangbaojing/xiaofangbaojingL",
+    meta: {
+      title: "消防报警",
+    },
+    children: [
+      {
+        path: "/xiaofangbaojing/xiaofangbaojingL",
+        component: () => import("@/views/xiaofangbaojing/xiaofangbaojingL.vue"),
+        name: "xiaofangbaojingL",
+        meta: {
+          title: "消防报警",
+          noCache: true,
+        },
+      },
+    ],
+  },
   ////
 
   ...codemenu,
diff --git a/src/views/dianzixungeng/dianzixungengL.vue b/src/views/dianzixungeng/dianzixungengL.vue
new file mode 100644
index 0000000..e63312c
--- /dev/null
+++ b/src/views/dianzixungeng/dianzixungengL.vue
@@ -0,0 +1,740 @@
+<template>
+  <div class="app-container">
+    <div v-show="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-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>
+              </el-form-item>
+              <el-form-item label="选择楼层">
+                <el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层">
+                  <el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
+                </el-select>
+              </el-form-item>
+            </el-form>
+
+          <div class="mores" >
+              <div class="more">
+                <p class="bluezi">正常</p>
+                <span class="myiconfont iconbox bluezibg">&#xe63e;</span>
+              </div>
+              <div class="more">
+                <p class="huizi">离线</p>
+                <span class="myiconfont iconbox huizibg">&#xe63e;</span>
+              </div>
+              <div class="more"  v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
+                <p class="redzi">报警</p>
+                <span class="myiconfont iconbox redzibg">&#xe63e;</span>
+              </div>
+          </div>
+          <!-- <div class="mores"  v-show="showShipinjiankong == true">
+              <div class="more">
+                <p class="bluezi">正常</p>
+                <span class="myiconfont iconbox bluezibg">&#xe63e;</span>
+              </div>
+              <div class="more">
+                <p class="huizi">离线</p>
+                <span class="myiconfont iconbox huizibg">&#xe63e;</span>
+              </div>
+          </div> -->
+          <!-- 11 -->
+        </div>
+        <div class="shipinscon">
+
+          <div class="shipinstu">
+            <!-- 111入侵报警 -->
+            <div class="ruqinbaojing" v-show="showRuqinbaojing">
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang1"  @click="openshipinRuqinbaojing()">&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe63e;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe63e;</div>
+
+              <div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe63e;</div>
+              <div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe63e;</div>
+
+              <div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe63e;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe63e;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe63e;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe63e;</div>
+              <!-- 显示文字 -->
+              <div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
+                <p @click="toMore()">布防</p>
+                <p @click="toMore()">撤防</p>
+                <p @click="toMore()">报警确认</p>
+                <p @click="toMore()">旁路</p>
+              </div>
+            </div>
+            <!-- 111end -->
+            <!-- 222视频监控 -->
+            <div class="ruqinbaojing" v-show="showShipinjiankong">
+              <div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
+
+              <div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
+
+              <div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
+              <!-- 显示文字 -->
+              <div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
+                <p @click="toMore()">实时视频</p>
+                <p @click="toMore()">回放视频</p>
+              </div>
+              <!-- 鼠标移入显示文字 -->
+              <div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
+                <p>设备名称：1号楼1F西侧走廊像机1</p>
+                <p>设备编号：HK023123</p>
+                <p>设备IP：192.168.1.2</p>
+              </div>
+            </div>
+            <!-- 2222end -->
+            <!-- 333门禁管理 -->
+            <div class="ruqinbaojing" v-show="showMenjinguanli">
+              <div class="myiconfont bluezibg jingicon menjin_zhengchang1"  @click="openshipinMenjinguanli()">&#xe60b;</div>
+
+              <div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
+
+              <div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
+              <!-- 显示文字 -->
+              <div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
+                <p @click="toMore()">开门</p>
+              </div>
+            </div>
+            <!-- 333end -->
+            <!--444门电子围栏-->
+            <div class="ruqinbaojing" v-show="showDianziweilan">
+              <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1"  @click="openshipinDianziweilan()">&#xe6b8;</div>
+
+              <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
+
+              <div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
+              <!-- 显示文字 -->
+              <div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
+                <p @click="toMore()">布防</p>
+                <p @click="toMore()">撤防</p>
+                <p @click="toMore()">报警确认</p>
+                <p @click="toMore()">旁路</p>
+              </div>
+            </div>
+            <!-- 444end -->
+
+          </div>
+            <!-- 下部机构导航 -->
+            <div class="tabhead">
+              <!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
+                <el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
+                  <span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
+                  {{item.label}}
+                </el-checkbox-button>
+              </el-checkbox-group> -->
+              <!-- <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 label="2"><div  @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
+                <el-checkbox-button label="3"><div  @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
+                <el-checkbox-button label="4"><div  @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
+              </el-checkbox-group> -->
+            </div>
+          <!-- 列表结束 -->
+        </div>
+
+      </div>
+    </div>
+
+    <!-- 查看视频 -->
+    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
+      <div class="shipin">
+        <video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
+            <source :src="videoSrc" type="video/mp4">
+          </video>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import ButtonBar from '@/components/ButtonBar'
+// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
+// import baojingchaxunAdd from './baojingchaxunAdd'
+// import baojingchaxunInfo from './baojingchaxunInfo'
+// import req from '@/api/baojingchaxun/baojingchaxun'
+
+export default {
+  name: 'shipinzhongxin',
+  components: {
+    Pagination,
+    pageye,
+    ButtonBar
+
+  },
+  data() {
+    return {   checkList: ['选中且禁用','复选框 A'],
+      btndisabled: false,
+      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',
+          icon: 'cross',
+          btnKey: 'doClose',
+          btnLabel: '关闭'
+        }
+      ],
+      viewState: 1,
+      isSearchShow: false,
+      searchxianshitit: '显示查询条件',
+      sids: [],
+      // 查询 -----------
+      tableKey: 0,
+      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: {
+          manufacturerName: '',
+          supplierType: '',
+          useOrgSid: '',
+          createOrgSid: '',
+          manufacturerTelePhone: '',
+          contactName: ''
+        },
+        current: 1,
+        size: 5,
+        total: 0
+      },
+      cangku_list: [
+        {dictValue:'仓库1',dictKey:'1'}
+      ],
+      loudong_list: [
+        {dictValue:'1号楼',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',
+
+      playStatus: '',
+      muteStatus: '',
+      isMute: true,
+      isPlay: true,
+      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'],
+      jigounavType: [
+        { value: '4', label: '入侵报警', zi: 'icon-dituleiditu' },
+        { value: '2', label: '视频监控', zi: 'icon-dituleiditu' },
+        { value: '1', label: '门禁管理', zi: '禁' },
+        { value: '3', label: '电子围栏', zi: '电' },
+      ],
+      // 视频结束
+      seenshipinRuqinbaojing: false,
+      seenshipinShipinjiankong: false,
+      seenshipinMenjinguanli: false,
+      seenshipinDianziweilan: false,
+      //
+      showRuqinbaojing: true,
+      showShipinjiankong: false,
+      showMenjinguanli: false,
+      showDianziweilan: false,
+      //鼠标移入
+      seen_shubiaoShipinjiankong: false,
+
+      rules: {}
+    }
+  },
+  // mounted() {
+  //   this.$refs['btnbar'].setButtonList(this.btnList)
+  // },
+  created() {
+    // 初始化变量
+    // this.init()
+  },
+  methods: {
+    openshipinRuqinbaojing() {
+      this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
+    },
+    openshipinShipinjiankong() {
+      this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
+    },
+    openshipinMenjinguanli() {
+      this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
+    },
+    openshipinDianziweilan() {
+      this.seenshipinDianziweilan = !this.seenshipinDianziweilan
+    },
+    // 、、、、
+    openruqinbaojing() {
+
+      this.showRuqinbaojing = !this.showRuqinbaojing
+    },
+    openshipinjiankong() {
+      this.showShipinjiankong = !this.showShipinjiankong
+    },
+    openmenjinguanli() {
+      this.showMenjinguanli = !this.showMenjinguanli
+    },
+    opendianziweilan() {
+      this.showDianziweilan = !this.showDianziweilan
+    },
+    //鼠标移入
+    enter() {
+      this.seen_shubiaoShipinjiankong = true
+    },
+    leave() {
+      this.seen_shubiaoShipinjiankong = false
+    },
+
+    resetState() {
+      this.viewState = 1
+    },
+    btnHandle(btnKey) {
+      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
+      switch (btnKey) {
+        case 'toAdd':
+          this.toAdd()
+          break
+        case 'doDel':
+          this.doDel()
+          break
+        case 'toChangShang':
+          this.toChangShang()
+          break
+        case 'toGain':
+          this.toGain()
+          break
+        case 'doExport':
+          this.doExport()
+          break
+        case 'doClose':
+          this.doClose()
+          break
+        default:
+          break
+      }
+    },
+    // 搜索条件效果
+    clicksearchShow() {
+      this.isSearchShow = !this.isSearchShow
+      if (this.isSearchShow) {
+        this.searchxianshitit = '隐藏查询条件'
+      } else {
+        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)
+    //     }
+    //   })
+    // },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    // 查询列表信息
+    getList() {
+      // this.listLoading = true
+      // req.gysPagerList(this.listQuery).then((response) => {
+      //   this.listLoading = false
+      //   if (response.code === '200' && response.data && response.data.total > 0) {
+      //     this.list = response.data.records
+      //     this.listQuery.total = response.data.total
+      //   } else {
+      //     this.list = []
+      //     this.listQuery.total = 0
+      //   }
+      // })
+    },
+    // 查询按钮
+    handleFilter() {
+      this.listQuery.current = 1
+      this.getList()
+    },
+    handleReset() {
+      // this.listQuery = {
+      //   params: {
+      //     manufacturerName: '',
+      //     supplierType: '',
+      //     useOrgSid: '',
+      //     createOrgSid: '',
+      //     manufacturerTelePhone: '',
+      //     contactName: ''
+      //   },
+      //   current: 1,
+      //   size: 5
+      // }
+      // this.init()
+    },
+    // 打开添加对话框
+    toAdd() {
+      this.viewState = 2
+       this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid)
+    },
+
+    handleSelectionChange(row) {
+      const aa = []
+      row.forEach((element) => {
+        aa.push(element.sid)
+      })
+      this.sids = aa
+    },
+    // 根据本行ID删除数据
+    doDel() {
+      if (this.sids.length > 0) {
+        const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
+        this.$confirm(tip, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          req.delBySids(this.sids.toString()).then(resp => {
+            if (resp.success) {
+              loading.close()
+              this.$message({ type: 'success', message: resp.msg, showClose: true })
+              this.getList()
+            } else {
+              loading.close()
+            }
+          }).catch(e => {
+            loading.close()
+          })
+        }).catch(() => {
+        })
+      } else {
+        this.$message({ type: 'error', message: '没有选择!!', showClose: true })
+        return
+      }
+    },
+    // toChangShang() {
+    //   req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => {
+    //     if (resp.success) {
+    //       this.$message({ showClose: true, type: 'success', message: '获取成功' })
+    //       this.getList()
+    //     }
+    //   })
+    // },
+    // toGain() {
+    //   req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => {
+    //     if (resp.success) {
+    //       this.$message({ showClose: true, type: 'success', message: '获取成功' })
+    //       this.getList()
+    //     }
+    //   })
+    // },
+    handleEdit(row) {
+      this.viewState = 3
+      this.$refs['divadd'].showEdit(row)
+      // if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') {
+      //   this.viewState = 3
+      //   this.$refs['divadd'].showEdit(row)
+      // } else {
+      //   this.viewState = 5
+      //   this.$refs['divHosts'].showInfo(row)
+      // }
+    },
+    // 打开查看
+    handleCheck(row) {
+      this.viewState = 4
+      this.$refs['divinfo'].showInfo(row)
+    },
+    // 导出
+    // doExport() {
+    //   basefinbankExportExcel(this.sids).then((res) => {
+    //     const blob = new Blob([res], {
+    //       type: 'application/vnd.ms-excel'
+    //     })
+    //     const objectUrl = URL.createObjectURL(blob)
+    //     window.location.href = objectUrl
+    //     this.$notify({
+    //       title: '提示',
+    //       message: '导出成功',
+    //       type: 'success',
+    //       duration: 2000
+    //     })
+    //   })
+    // },
+    doClose() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.go(-1)
+    },
+    toMore() {
+      this.dialogImage = true
+    },
+    checkbox(item) {
+      // this.departmentTypeArray = this.departmentTypeArray.includes(item.value)
+      //   ? [item.value]
+      //   : []
+    },
+  }
+}
+</script>
+
+<style scoped>
+.seencons{background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 0 10px;}
+.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
+/* // */
+/* 鼠标移入 */
+.seenconsc{background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 0 10px;}
+.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
+/* .app-container{background-color: #f5f5f5;margin: 0;} */
+.shipinlisttop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  /* padding: 0 0 0 15px; */
+  margin: 20px 0;
+  background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 10px;
+}
+.tab-header{background-color: #fff;}
+  .shipinscon {margin: 20px 0 0 0;
+  padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+}
+  .shipinstu {z-index: 0;
+   background: url("/image/cangkutub.png") center bottom no-repeat;
+  background-size: 100% 100%;min-height: 580px;
+  padding: 0 20px;position: relative;
+}
+.shipinstu .jingicon {cursor: pointer;
+  font-size: 22px !important;
+  border-radius: 40px !important;
+  width: 40px !important;
+  height: 40px !important;line-height: 40px;
+  padding: 0px;text-align: center;
+
+
+}
+
+.redzibg {
+  color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  border: 1px solid #fd0808;
+}
+.bluezibg {
+  color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
+  border: 1px solid #469efd;
+}
+.huizibg {
+  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 .shipin_baojing1{position: absolute;top: 35px;left: 22%;}
+.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
+.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
+.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
+.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
+
+/* //门禁管理// */
+.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
+.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
+.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
+
+.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
+/* //电子围栏// */
+.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
+.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
+.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
+
+.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
+.mores{padding: 0 10px;display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: center;}
+.mores .more{flex: 1;font-size: 14px;padding: 0 10px;cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: center;}
+  .mores .more p {display: inline-block;
+		font-size: 14px;
+	}
+.mores .more .iconbox {display: inline-block;
+		border-radius: 30px;
+		line-height: 30px;
+		width: 30px;
+		height: 30px;
+		color: #fff;
+		font-size: 18px;text-align: center;margin: 0 5px;
+	}
+  /* .iconbox_red {
+    color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  border: 1px solid #fd0808;
+	}
+
+	.iconbox_yellow {
+		background-color: #ff7521;
+	}
+
+
+  .iconbox_green {
+		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;}
+
+
+  /* // 底部导航 */
+.tabhead {
+  position: fixed;
+  bottom: 50px;
+  left: 230px;
+  z-index: 900;
+  /* background-color: rgba( #04154d, 0.8); */
+  /* box-shadow: 0px 0px 6px #0d27c2; */
+}
+.iconfontyuan {
+  font-size: 18px !important;
+  margin: 0 3px 0 3px;
+  border-radius: 60px !important;
+  width: 60px !important;
+  height: 60px !important;
+  padding: 5px;
+
+}
+.yellowziyuan {
+  color: #fff;
+  background-color: #f57c13;
+}
+
+.redziyuan {
+  color: #fff;
+  background-color: #ff0000;
+}
+
+.blueziyuan {
+  color: #fff;
+  background-color: #5b9cf7;
+}
+
+.greenziyuan {
+  color: #fff;
+  background-color: #06be4d;
+}
+
+.ziziyuan {
+  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;} */
+</style>
diff --git a/src/views/echarts/components/PieChartrenyuanb.vue b/src/views/echarts/components/PieChartrenyuanb.vue
new file mode 100644
index 0000000..d579028
--- /dev/null
+++ b/src/views/echarts/components/PieChartrenyuanb.vue
@@ -0,0 +1,317 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+// require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+import router from '../../../router/index'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '100%',
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      startCharts: null,
+      charPie3currentIndex: 0,
+      dataLen: 0,
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      },
+    },
+  },
+  // mounted() {
+  //   this.$nextTick(() => {
+  //     this.initChart()
+  //   })
+  // },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    // 加的自适应
+    // this.init(); // 初始化图表
+    let _this = this
+    window.addEventListener('resize', function () {
+      if (_this.resizeTimer) clearTimeout(_this.resizeTimer)
+      _this.resizeTimer = setTimeout(function () {
+        _this.chart.resize()
+      }, 100)
+    })
+  },
+
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.startCharts) {
+      clearInterval(this.startCharts)
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({
+      legend,
+      seriesName,
+      Data,
+      nextUrl,
+      unit,
+      params,
+      color,
+    } = {}) {
+      var option = {
+        title: {
+          text: seriesName,
+          // subtext: '纯属虚构',
+          x: 'center',
+          // bottom: 0,
+          top: 0,
+          // left: 30,
+
+          textStyle: {
+            // fontSize: 20,
+            color: '#b7d8fa',
+            fontSize: 0,
+
+            // fontWeight: 'bolder' // 字体加粗
+          },
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 10,
+          top: 0,
+          containLabel: true,
+        },
+        tooltip: {
+          show: false,
+          trigger: 'item',
+          formatter: '{b} : {c} ' + unit + ' ({d}%)',
+          // formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {show: false,
+          // right: '10',
+          bottom: '0',
+          data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+          textStyle: {
+            fontSize: 14,
+            color: '#b7d8fa',
+            // fontWeight: 'bolder' // 字体加粗
+          },
+        },
+        series: [
+          {
+            name: seriesName, // 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            color: color,
+            // color:[ 'green','blue'],
+            // roseType: 'radius',
+            radius: [55, 60],
+            center: ['50%', '50%'],
+            data: Data.seriesData,
+            // roseType: 'area',
+            // [
+            //   { value: 320, name: 'Industries' },
+            //   { value: 240, name: 'Technology' },
+            //   { value: 149, name: 'Forex' },
+            //   { value: 100, name: 'Gold' },
+            //   { value: 59, name: 'Forecasts' }
+            // ],
+            // itemStyle: {
+            //  borderRadius: 3
+            // borderColor: '#091243',
+            // borderWidth: 2
+            // },
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600,
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            label: {
+              show: false,
+              // formatter: '{b}:\n{c} ' + unit,
+              formatter: '{d}%',
+              position: 'center',
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: '22',
+                  color: '#3595f9',
+                },
+              },
+            },
+            label22: {
+              normal: {
+                show: false,
+                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c} \n{hr|}\n  {per|{d}%}  ',
+                formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n  {per|{d}%}  ',
+                // backgroundColor: '#eee',
+                // borderColor: '#aaa',
+                // borderWidth: 1,
+                // borderRadius: 4,
+                // shadowBlur:3,
+                // shadowOffsetX: 2,
+                // shadowOffsetY: 2,
+                // shadowColor: '#999',
+                padding: [0, 7],
+                rich: {
+                  // a: {
+                  //   color: '#999',
+                  //   lineHeight: 22,
+                  //   align: 'center'
+                  // },
+                  // abg: {
+                  //     backgroundColor: '#333',
+                  //     width: '100%',
+                  //     align: 'right',
+                  //     height: 22,
+                  //     borderRadius: [4, 4, 0, 0]
+                  // },
+                  hr: {
+                    borderColor: '#aaa',
+                    width: '100%',
+                    borderWidth: 0.5,
+                    height: 0,
+                  },
+                  b: {
+                    fontSize: 14,
+                    lineHeight: 33,
+                  },
+                  per: {
+                    color: '#eee',
+                    backgroundColor: '#334455',
+                    padding: [2, 4],
+                    borderRadius: 2,
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }
+      this.chart.setOption(option)
+      this.chart.on('click', function (param) {
+        if (nextUrl != null && nextUrl.length > 0) {
+          // 判断 nexurl数与那个列
+          var url = ''
+          for (var i = 0; i < nextUrl.length; i++) {
+            if (nextUrl[i].name === param.name) {
+              url = nextUrl[i].url
+            }
+          }
+          // --在当前路径新窗口打开
+          router.push({
+            path: url,
+            query: {
+              id: param.name,
+              start: params.start,
+              end: params.end,
+            },
+          })
+          // --在最外层新窗口打开
+          // let routeUrl = router.resolve({
+          //   path: './situationMapZhiDui',
+          //   query: { id: 96 }
+          // })
+          // window.open(routeUrl.href, '_blank')
+
+          // 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link>
+          // 方法2：this.$router.push({name:'details',params:{id:123}})
+          // 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
+        }
+      })
+
+      var _this = this
+      var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
+      _this.charPie3currentIndex = 0
+      // 2、鼠标移动上去的时候的高亮动画
+      this.chart.on('mouseover', function (param) {
+        isSet = false
+        // 取消之前高亮的图形
+        _this.chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          // dataIndex: _this.charPie3currentIndex
+        })
+        // 高亮当前图形
+        _this.chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: param.dataIndex,
+        })
+        // 显示 tooltip
+        // _this.chart.dispatchAction({
+        //   type: "showTip",
+        //   seriesIndex: 0,
+        //   dataIndex: param.dataIndex,
+        // });
+      })
+      // 3、自动高亮展示
+      var chartHover = function () {
+        _this.dataLen = option.series[0].data.length
+        // 取消之前高亮的图形
+        _this.chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          // dataIndex: _this.charPie3currentIndex
+        })
+        _this.charPie3currentIndex =
+          (_this.charPie3currentIndex + 1) % _this.dataLen
+        // 高亮当前图形
+        _this.chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: _this.charPie3currentIndex,
+        })
+        // 显示 tooltip
+        // _this.chart.dispatchAction({
+        //   type: "showTip",
+        //   seriesIndex: 0,
+        //   dataIndex: _this.charPie3currentIndex,
+        // });
+      }
+      clearInterval(_this.startCharts)
+      _this.startCharts = setInterval(chartHover, 2000)
+      // 4、鼠标移出之后，恢复自动高亮
+      this.chart.on('mouseout', function (param) {
+        if (!isSet) {
+          clearInterval(_this.startCharts)
+          _this.startCharts = setInterval(chartHover, 2000)
+          isSet = true
+        }
+      })
+    },
+  },
+}
+</script>
diff --git a/src/views/index.vue b/src/views/index.vue
index b61e90a..74059ff 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -25,7 +25,7 @@
           <div class="rights">
             <div class="note">正常：<span class="bluezi">36</span></div>
             <div class="note">离线：<span  class="huizi">16</span></div>
-            <div class="note">报警：<span  class="redzi">15</span></div>
+            <div class="note"><span  class="redzi"></span></div>
           </div>
         </div>
       </div>
@@ -86,7 +86,7 @@
       <div class="tbar">
         <div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div>
         <div class="bar">
-          <pie-chartrenyuan :chart-data="ruqinbaojing_Chart" ></pie-chartrenyuan>
+          <pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan>
         </div>
       </div>
       <!-- 第1个图表 -->
@@ -130,7 +130,7 @@
        <!-- 第1 -->
        <div class="news">
         <div class="title">
-          <div class="newstits">报警消息</div>
+          <div class="newstits">待办</div>
           <div class="more" @click="toMore()">更多></div>
         </div>
         <div class="content">
@@ -144,7 +144,7 @@
       <!-- 第1 -->
       <div class="news">
         <div class="title">
-          <div class="newstits">视频消息</div>
+          <div class="newstits">工作流</div>
           <div class="more" @click="toMore()">更多></div>
         </div>
         <div class="content">
@@ -198,7 +198,27 @@
 
   // radius: ['50%', '55%']
 }
+  // 1.2视频监控饼图
+  const shipinjiankong_Chart = {
+  // seriesName: '视频监控',
+  unit: '次',
+  color: ['#fe7f02', '#049f51', '#fdc004'],
+  Data: {
+    seriesData: [
+    { value: 39, name: '正常' },
+      { value: 16, name: '离线' },
+      // { value: 12, name: '报警' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
 
+  // radius: ['50%', '55%']
+}
   export default {
     name: 'index',
     components: {
@@ -207,6 +227,7 @@
     data() {
       return {
         ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
+        shipinjiankong_Chart:shipinjiankong_Chart,
       	token:'',
         Datalista: [
          { title: '您有新任务了', createTime: '2023-05-23' },
diff --git a/src/views/monitor/videos/index.vue b/src/views/monitor/videos/index.vue
index 4989f99..9bce13e 100644
--- a/src/views/monitor/videos/index.vue
+++ b/src/views/monitor/videos/index.vue
@@ -6,9 +6,14 @@
 
         <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-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼栋">
-                  <el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
+                  <el-option v-for="item in loudong_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                 </el-select>
               </el-form-item>
               <el-form-item label="选择楼层">
@@ -18,51 +23,139 @@
               </el-form-item>
             </el-form>
 
-          <div class="mores">
+          <div class="mores" >
               <div class="more">
                 <p class="bluezi">正常</p>
-                <span class="myiconfont iconbox iconbox_blue">&#xe608;</span>
+                <span class="myiconfont iconbox bluezibg">&#xe608;</span>
               </div>
               <div class="more">
                 <p class="huizi">离线</p>
-                <span class="myiconfont iconbox iconbox_hui">&#xe608;</span>
+                <span class="myiconfont iconbox huizibg">&#xe608;</span>
               </div>
-              <div class="more">
+              <div class="more"  v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
                 <p class="redzi">报警</p>
-                <span class="myiconfont iconbox iconbox_red">&#xe608;</span>
+                <span class="myiconfont iconbox redzibg">&#xe608;</span>
               </div>
           </div>
-        
+          <!-- <div class="mores"  v-show="showShipinjiankong == true">
+              <div class="more">
+                <p class="bluezi">正常</p>
+                <span class="myiconfont iconbox bluezibg">&#xe608;</span>
+              </div>
+              <div class="more">
+                <p class="huizi">离线</p>
+                <span class="myiconfont iconbox huizibg">&#xe608;</span>
+              </div>
+          </div> -->
+          <!-- 11 -->
         </div>
         <div class="shipinscon">
 
           <div class="shipinstu">
-              <div class="myiconfont redzibg jingicon jingicona1">&#xe608;</div>
-              <div class="myiconfont redzibg jingicon jingicona2">&#xe608;</div>
-              <div class="myiconfont redzibg jingicon jingicona3">&#xe608;</div>
-              <div class="myiconfont redzibg jingicon jingicona4">&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon jingiconb1">&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon jingiconb2">&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon jingiconb3">&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon jingiconb4">&#xe608;</div>
+            <!-- 111入侵报警 -->
+            <div class="ruqinbaojing" v-show="showRuqinbaojing">
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang1"  @click="openshipinRuqinbaojing()">&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe608;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe608;</div>
+
+              <div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe608;</div>
+              <div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe608;</div>
+
+              <div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe608;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe608;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe608;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe608;</div>
+              <!-- 显示文字 -->
+              <div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
+                <p @click="toMore()">布防</p>
+                <p @click="toMore()">撤防</p>
+                <p @click="toMore()">报警确认</p>
+                <p @click="toMore()">旁路</p>
+              </div>
+            </div>
+            <!-- 111end -->
+            <!-- 222视频监控 -->
+            <div class="ruqinbaojing" v-show="showShipinjiankong">
+              <div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
+
+              <div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
+
+              <div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
+              <!-- 显示文字 -->
+              <div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
+                <p @click="toMore()">实时视频</p>
+                <p @click="toMore()">回放视频</p>
+              </div>
+              <!-- 鼠标移入显示文字 -->
+              <div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
+                <p>设备名称：1号楼1F西侧走廊像机1</p>
+                <p>设备编号：HK023123</p>
+                <p>设备IP：192.168.1.2</p>
+              </div>
+            </div>
+            <!-- 2222end -->
+            <!-- 333门禁管理 -->
+            <div class="ruqinbaojing" v-show="showMenjinguanli">
+              <div class="myiconfont bluezibg jingicon menjin_zhengchang1"  @click="openshipinMenjinguanli()">&#xe60b;</div>
+
+              <div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
+
+              <div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
+              <!-- 显示文字 -->
+              <div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
+                <p @click="toMore()">开门</p>
+              </div>
+            </div>
+            <!-- 333end -->
+            <!--444门电子围栏-->
+            <div class="ruqinbaojing" v-show="showDianziweilan">
+              <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1"  @click="openshipinDianziweilan()">&#xe6b8;</div>
+
+              <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
+
+              <div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
+              <!-- 显示文字 -->
+              <div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
+                <p @click="toMore()">布防</p>
+                <p @click="toMore()">撤防</p>
+                <p @click="toMore()">报警确认</p>
+                <p @click="toMore()">旁路</p>
+              </div>
+            </div>
+            <!-- 444end -->
+
           </div>
             <!-- 下部机构导航 -->
             <div class="tabhead">
-              <el-checkbox-group v-model="departmentTypeArray" @change="getList">
+              <!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
                 <el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
                   <span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
                   {{item.label}}
                 </el-checkbox-button>
+              </el-checkbox-group> -->
+              <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 label="2"><div  @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
+                <el-checkbox-button label="3"><div  @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
+                <el-checkbox-button label="4"><div  @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
               </el-checkbox-group>
-             
             </div>
           <!-- 列表结束 -->
         </div>
 
       </div>
     </div>
+
     <!-- 查看视频 -->
-    <el-dialog v-el-drag-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
+    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
       <div class="shipin">
         <video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
             <source :src="videoSrc" type="video/mp4">
@@ -160,7 +253,14 @@ export default {
         size: 5,
         total: 0
       },
-      supplierType_list: [],
+      cangku_list: [
+        {dictValue:'仓库1',dictKey:'1'}
+      ],
+      loudong_list: [
+        {dictValue:'1号楼',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: '李明华' },
@@ -193,17 +293,63 @@ export default {
         { value: '3', label: '电子围栏', zi: '电' },
       ],
       // 视频结束
+      seenshipinRuqinbaojing: false,
+      seenshipinShipinjiankong: false,
+      seenshipinMenjinguanli: false,
+      seenshipinDianziweilan: false,
+      //
+      showRuqinbaojing: true,
+      showShipinjiankong: false,
+      showMenjinguanli: false,
+      showDianziweilan: false,
+      //鼠标移入
+      seen_shubiaoShipinjiankong: false,
+
       rules: {}
     }
   },
-  mounted() {
-    this.$refs['btnbar'].setButtonList(this.btnList)
-  },
+  // mounted() {
+  //   this.$refs['btnbar'].setButtonList(this.btnList)
+  // },
   created() {
     // 初始化变量
     // this.init()
   },
   methods: {
+    openshipinRuqinbaojing() {
+      this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
+    },
+    openshipinShipinjiankong() {
+      this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
+    },
+    openshipinMenjinguanli() {
+      this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
+    },
+    openshipinDianziweilan() {
+      this.seenshipinDianziweilan = !this.seenshipinDianziweilan
+    },
+    // 、、、、
+    openruqinbaojing() {
+
+      this.showRuqinbaojing = !this.showRuqinbaojing
+    },
+    openshipinjiankong() {
+      this.showShipinjiankong = !this.showShipinjiankong
+    },
+    openmenjinguanli() {
+      this.showMenjinguanli = !this.showMenjinguanli
+    },
+    opendianziweilan() {
+      this.showDianziweilan = !this.showDianziweilan
+    },
+    //鼠标移入
+    enter() {
+      this.seen_shubiaoShipinjiankong = true
+    },
+    leave() {
+      this.seen_shubiaoShipinjiankong = false
+    },
+
     resetState() {
       this.viewState = 1
     },
@@ -411,6 +557,16 @@ export default {
 </script>
 
 <style scoped>
+.seencons{background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 0 10px;}
+.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
+/* // */
+/* 鼠标移入 */
+.seenconsc{background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 0 10px;}
+.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
 /* .app-container{background-color: #f5f5f5;margin: 0;} */
 .shipinlisttop {
   display: flex;
@@ -432,38 +588,72 @@ export default {
   background-size: 100% 100%;min-height: 580px;
   padding: 0 20px;position: relative;
 }
-.shipinstu .jingicon {
+.shipinstu .jingicon {cursor: pointer;
   font-size: 22px !important;
   border-radius: 40px !important;
   width: 40px !important;
   height: 40px !important;line-height: 40px;
   padding: 0px;text-align: center;
- 
+
 
 }
 
 .redzibg {
-  color: #fff; background: radial-gradient(circle, #9c0808, #c50101);
-  border: 1px solid #eb0606;
+  color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  border: 1px solid #fd0808;
 }
 .bluezibg {
-  color: #fff;
-  color: #fff; background: radial-gradient(circle, #2669f1, #327af9);
+  color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
   border: 1px solid #469efd;
 }
-.shipinstu .jingicona1{position: absolute;top: 10px;left: 1%;}
-.shipinstu .jingicona2{position: absolute;top: 10px;left: 40%;}
-.shipinstu .jingicona3{position: absolute;top: 10px;left: 70%;}
-.shipinstu .jingicona4{position: absolute;top: 10px;left: 95%;}
-.shipinstu .jingiconb1{position: absolute;top: 30%;left: 1%;}
-.shipinstu .jingiconb2{position: absolute;top: 150px;left: 30%;}
-.shipinstu .jingiconb3{position: absolute;top: 150px;left: 50%;}
-.shipinstu .jingiconb4{position: absolute;top: 150px;left: 70%;}
+.huizibg {
+  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 .shipin_baojing1{position: absolute;top: 35px;left: 22%;}
+.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
+.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
+.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
+.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
+
+/* //门禁管理// */
+.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
+.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
+.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
+
+.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
+/* //电子围栏// */
+.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
+.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
+.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
+
+.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
 .mores{padding: 0 10px;display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;align-items: center;}
-.mores .more{flex: 1;font-size: 14px;padding: 0 10px;
+.mores .more{flex: 1;font-size: 14px;padding: 0 10px;cursor: pointer;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -479,8 +669,9 @@ export default {
 		color: #fff;
 		font-size: 18px;text-align: center;margin: 0 5px;
 	}
-  .iconbox_red {
-		background-color: #df2f07;
+  /* .iconbox_red {
+    color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  border: 1px solid #fd0808;
 	}
 
 	.iconbox_yellow {
@@ -492,8 +683,9 @@ export default {
 		background-color: #07C160;
 	}
 	.iconbox_blue {
-		background-color: #3f9bfa;
-	}
+    color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
+  border: 1px solid #469efd;
+	} */
 	.iconbox_hui {
 		background-color: #373739;
 	}
diff --git a/src/views/shebeitaizhang/shebeitaizhangList.vue b/src/views/shebeitaizhang/shebeitaizhangList.vue
index 53eb236..bb23c49 100644
--- a/src/views/shebeitaizhang/shebeitaizhangList.vue
+++ b/src/views/shebeitaizhang/shebeitaizhangList.vue
@@ -1,6 +1,36 @@
 <template>
-  <div class="app-container">
-    <div v-show="viewState == 1">
+<div  class="app-container">
+  <div  class="app-containerb" v-show="viewState == 1">
+    <!-- 饼图 -->
+    <div class="tbars">
+      <!-- 第1个图表 -->
+      <div class="tbar">
+
+        <div class="bar">
+          <pie-chartrenyuan :chart-data="wanhao_Chart"></pie-chartrenyuan>
+          <!-- <div class="zhongzi">75%</div> -->
+        </div>
+        <div class="title"><span class="iconfont icon-jiating greenzi"></span>完好率</div>
+      </div>
+      <!-- 第1个图表 -->
+      <div class="tbar">
+
+        <div class="bar">
+          <pie-chartrenyuan :chart-data="weixiu_Chart" ></pie-chartrenyuan>
+          <!-- <div class="zhongzi">15%</div> -->
+        </div>
+        <div class="title"><span class="iconfont icon-jiating greenzi"></span>维修率</div>
+      </div>
+      <!-- 第1个图表 -->
+      <div class="tbar">
+        <div class="bar">
+          <pie-chartrenyuan :chart-data="sunhai_Chart"></pie-chartrenyuan>
+          <!-- <div class="zhongzi">10%</div> -->
+        </div>
+        <div class="title"><span class="iconfont icon-jiating greenzi"></span>损害率</div>
+      </div>
+    </div>
+    <div class="webye" >
       <button-bar view-title="设备台账" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle" />
       <div class="main-content">
         <div class="searchcon">
@@ -111,12 +141,14 @@
         </div>
       </div>
     </div>
+  </div>
     <shebeitaizhangAdd v-show="viewState == 2" ref="divadd" @doback="resetState" @reloadlist="handleFilter" />
     <shebeitaizhangInfo v-show="viewState == 4" ref="divinfo" @doback="resetState" />
-  </div>
+</div>
 </template>
 
 <script>
+
   import Pagination from '@/components/pagination'
   import pageye from '@/components/pagination/pageye'
   import ButtonBar from '@/components/ButtonBar'
@@ -124,6 +156,70 @@
   import shebeitaizhangAdd from './shebeitaizhangAdd'
   import shebeitaizhangInfo from './shebeitaizhangInfo'
   // import req from '@/api/shebeitaizhang/shebeitaizhang'
+  import * as echarts from "echarts";
+  import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuanb'
+  // 1.1完好率饼图
+  const wanhao_Chart = {
+  // seriesName: '完好率',
+  unit: '次',
+  color: ['#30e9ff', '#d9d9d9', '#fdc004'],
+  Data: {
+    seriesData: [
+    { value: 75, name: '完好' },
+      { value: 25, name: '不完好' },
+      // { value: 12, name: '报警' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
+
+  // radius: ['50%', '55%']
+}
+  // 1.2维修率饼图
+  const weixiu_Chart = {
+  // seriesName: '维修率',
+  unit: '次',
+  color: ['#fe7f02', '#fdc004'],
+  Data: {
+    seriesData: [
+    { value: 15, name: '维修' },
+      { value: 85, name: '无维修' },
+      // { value: 12, name: '报警' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
+
+  // radius: ['50%', '55%']
+}
+  // 1.3损害率饼图
+  const sunhai_Chart = {
+  // seriesName: '损害率',
+  unit: '次',
+  color: [ '#d2cece','#ff0202', '#fdc004'],
+  Data: {
+    seriesData: [
+    { value: 10, name: '损害' },
+      { value: 90, name: '无损害' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
+
+  // radius: ['50%', '55%']
+}
 
   export default {
     name: 'shebeitaizhangList',
@@ -132,10 +228,13 @@
       pageye,
       ButtonBar,
       shebeitaizhangAdd,
-      shebeitaizhangInfo,
+      shebeitaizhangInfo,PieChartrenyuan
     },
     data() {
       return {
+        wanhao_Chart: wanhao_Chart, // 1.1
+        weixiu_Chart:weixiu_Chart,
+        sunhai_Chart: sunhai_Chart,
         btndisabled: false,
         btnList: [
           {
@@ -460,4 +559,56 @@
 </script>
 
 <style scoped>
-</style>
\ No newline at end of file
+.app-containerb{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: flex-start;
+}
+.webye{flex: 1;text-align: left;}
+/* 饼图部分 */
+.tbars {width: 250px;height: 100%;
+  /* display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: flex-start; */
+  margin: 0 20px 0 0;
+  padding: 10px;
+  background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+}
+.tbar {
+  /* width: 25%; */
+  margin: 0 0px 0 0;
+  /* background-color: #fff;
+  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: 0px 20px;text-align: center;
+  font-weight: bold;  color: #333;font-size: 16px;
+  /* border-bottom: 1px solid #ececee; */
+}
+.tbar .title span {
+  padding: 0 10px 0 0;
+}
+.tbar .bar {position: relative;
+  /* display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: center; */
+  margin: 0;
+  padding: 0px;
+  height: 190px;
+}
+.tbar .bar .zhongzi {position: absolute;top:0;bottom: 0;left: 0;right: 0;line-height: 240px;text-align: center;
+  font-weight: bold;  color: #333;font-size: 18px;
+}
+</style>
diff --git a/src/views/xiaofangbaojing/xiaofangbaojingL.vue b/src/views/xiaofangbaojing/xiaofangbaojingL.vue
new file mode 100644
index 0000000..ad23739
--- /dev/null
+++ b/src/views/xiaofangbaojing/xiaofangbaojingL.vue
@@ -0,0 +1,740 @@
+<template>
+  <div class="app-container">
+    <div v-show="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-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>
+              </el-form-item>
+              <el-form-item label="选择楼层">
+                <el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层">
+                  <el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
+                </el-select>
+              </el-form-item>
+            </el-form>
+
+          <div class="mores" >
+              <div class="more">
+                <p class="bluezi">正常</p>
+                <span class="myiconfont iconbox bluezibg">&#xe613;</span>
+              </div>
+              <!-- <div class="more">
+                <p class="huizi">离线</p>
+                <span class="myiconfont iconbox huizibg">&#xe613;</span>
+              </div> -->
+              <div class="more"  v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
+                <p class="redzi">报警</p>
+                <span class="myiconfont iconbox redzibg">&#xe677;</span>
+              </div>
+          </div>
+          <!-- <div class="mores"  v-show="showShipinjiankong == true">
+              <div class="more">
+                <p class="bluezi">正常</p>
+                <span class="myiconfont iconbox bluezibg">&#xe613;</span>
+              </div>
+              <div class="more">
+                <p class="huizi">离线</p>
+                <span class="myiconfont iconbox huizibg">&#xe613;</span>
+              </div>
+          </div> -->
+          <!-- 11 -->
+        </div>
+        <div class="shipinscon">
+
+          <div class="shipinstu">
+            <!-- 111入侵报警 -->
+            <div class="ruqinbaojing" v-show="showRuqinbaojing">
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang1"  @click="openshipinRuqinbaojing()">&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe613;</div>
+              <div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe613;</div>
+
+              <!-- <div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe613;</div>
+              <div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe613;</div> -->
+
+              <div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe677;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe677;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe677;</div>
+              <div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe677;</div>
+              <!-- 显示文字 -->
+              <div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
+                <p @click="toMore()">布防</p>
+                <p @click="toMore()">撤防</p>
+                <p @click="toMore()">报警确认</p>
+                <p @click="toMore()">旁路</p>
+              </div>
+            </div>
+            <!-- 111end -->
+            <!-- 222视频监控 -->
+            <div class="ruqinbaojing" v-show="showShipinjiankong">
+              <div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
+
+              <div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
+
+              <div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
+              <!-- 显示文字 -->
+              <div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
+                <p @click="toMore()">实时视频</p>
+                <p @click="toMore()">回放视频</p>
+              </div>
+              <!-- 鼠标移入显示文字 -->
+              <div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
+                <p>设备名称：1号楼1F西侧走廊像机1</p>
+                <p>设备编号：HK023123</p>
+                <p>设备IP：192.168.1.2</p>
+              </div>
+            </div>
+            <!-- 2222end -->
+            <!-- 333门禁管理 -->
+            <div class="ruqinbaojing" v-show="showMenjinguanli">
+              <div class="myiconfont bluezibg jingicon menjin_zhengchang1"  @click="openshipinMenjinguanli()">&#xe60b;</div>
+
+              <div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
+
+              <div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
+              <!-- 显示文字 -->
+              <div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
+                <p @click="toMore()">开门</p>
+              </div>
+            </div>
+            <!-- 333end -->
+            <!--444门电子围栏-->
+            <div class="ruqinbaojing" v-show="showDianziweilan">
+              <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1"  @click="openshipinDianziweilan()">&#xe6b8;</div>
+
+              <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
+
+              <div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
+              <!-- 显示文字 -->
+              <div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
+                <p @click="toMore()">布防</p>
+                <p @click="toMore()">撤防</p>
+                <p @click="toMore()">报警确认</p>
+                <p @click="toMore()">旁路</p>
+              </div>
+            </div>
+            <!-- 444end -->
+
+          </div>
+            <!-- 下部机构导航 -->
+            <div class="tabhead">
+              <!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
+                <el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
+                  <span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
+                  {{item.label}}
+                </el-checkbox-button>
+              </el-checkbox-group> -->
+              <!-- <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 label="2"><div  @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
+                <el-checkbox-button label="3"><div  @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
+                <el-checkbox-button label="4"><div  @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
+              </el-checkbox-group> -->
+            </div>
+          <!-- 列表结束 -->
+        </div>
+
+      </div>
+    </div>
+
+    <!-- 查看视频 -->
+    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
+      <div class="shipin">
+        <video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
+            <source :src="videoSrc" type="video/mp4">
+          </video>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import ButtonBar from '@/components/ButtonBar'
+// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
+// import baojingchaxunAdd from './baojingchaxunAdd'
+// import baojingchaxunInfo from './baojingchaxunInfo'
+// import req from '@/api/baojingchaxun/baojingchaxun'
+
+export default {
+  name: 'shipinzhongxin',
+  components: {
+    Pagination,
+    pageye,
+    ButtonBar
+
+  },
+  data() {
+    return {   checkList: ['选中且禁用','复选框 A'],
+      btndisabled: false,
+      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',
+          icon: 'cross',
+          btnKey: 'doClose',
+          btnLabel: '关闭'
+        }
+      ],
+      viewState: 1,
+      isSearchShow: false,
+      searchxianshitit: '显示查询条件',
+      sids: [],
+      // 查询 -----------
+      tableKey: 0,
+      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: {
+          manufacturerName: '',
+          supplierType: '',
+          useOrgSid: '',
+          createOrgSid: '',
+          manufacturerTelePhone: '',
+          contactName: ''
+        },
+        current: 1,
+        size: 5,
+        total: 0
+      },
+      cangku_list: [
+        {dictValue:'仓库1',dictKey:'1'}
+      ],
+      loudong_list: [
+        {dictValue:'1号楼',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',
+
+      playStatus: '',
+      muteStatus: '',
+      isMute: true,
+      isPlay: true,
+      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'],
+      jigounavType: [
+        { value: '4', label: '入侵报警', zi: 'icon-dituleiditu' },
+        { value: '2', label: '视频监控', zi: 'icon-dituleiditu' },
+        { value: '1', label: '门禁管理', zi: '禁' },
+        { value: '3', label: '电子围栏', zi: '电' },
+      ],
+      // 视频结束
+      seenshipinRuqinbaojing: false,
+      seenshipinShipinjiankong: false,
+      seenshipinMenjinguanli: false,
+      seenshipinDianziweilan: false,
+      //
+      showRuqinbaojing: true,
+      showShipinjiankong: false,
+      showMenjinguanli: false,
+      showDianziweilan: false,
+      //鼠标移入
+      seen_shubiaoShipinjiankong: false,
+
+      rules: {}
+    }
+  },
+  // mounted() {
+  //   this.$refs['btnbar'].setButtonList(this.btnList)
+  // },
+  created() {
+    // 初始化变量
+    // this.init()
+  },
+  methods: {
+    openshipinRuqinbaojing() {
+      this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
+    },
+    openshipinShipinjiankong() {
+      this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
+    },
+    openshipinMenjinguanli() {
+      this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
+    },
+    openshipinDianziweilan() {
+      this.seenshipinDianziweilan = !this.seenshipinDianziweilan
+    },
+    // 、、、、
+    openruqinbaojing() {
+
+      this.showRuqinbaojing = !this.showRuqinbaojing
+    },
+    openshipinjiankong() {
+      this.showShipinjiankong = !this.showShipinjiankong
+    },
+    openmenjinguanli() {
+      this.showMenjinguanli = !this.showMenjinguanli
+    },
+    opendianziweilan() {
+      this.showDianziweilan = !this.showDianziweilan
+    },
+    //鼠标移入
+    enter() {
+      this.seen_shubiaoShipinjiankong = true
+    },
+    leave() {
+      this.seen_shubiaoShipinjiankong = false
+    },
+
+    resetState() {
+      this.viewState = 1
+    },
+    btnHandle(btnKey) {
+      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
+      switch (btnKey) {
+        case 'toAdd':
+          this.toAdd()
+          break
+        case 'doDel':
+          this.doDel()
+          break
+        case 'toChangShang':
+          this.toChangShang()
+          break
+        case 'toGain':
+          this.toGain()
+          break
+        case 'doExport':
+          this.doExport()
+          break
+        case 'doClose':
+          this.doClose()
+          break
+        default:
+          break
+      }
+    },
+    // 搜索条件效果
+    clicksearchShow() {
+      this.isSearchShow = !this.isSearchShow
+      if (this.isSearchShow) {
+        this.searchxianshitit = '隐藏查询条件'
+      } else {
+        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)
+    //     }
+    //   })
+    // },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    // 查询列表信息
+    getList() {
+      // this.listLoading = true
+      // req.gysPagerList(this.listQuery).then((response) => {
+      //   this.listLoading = false
+      //   if (response.code === '200' && response.data && response.data.total > 0) {
+      //     this.list = response.data.records
+      //     this.listQuery.total = response.data.total
+      //   } else {
+      //     this.list = []
+      //     this.listQuery.total = 0
+      //   }
+      // })
+    },
+    // 查询按钮
+    handleFilter() {
+      this.listQuery.current = 1
+      this.getList()
+    },
+    handleReset() {
+      // this.listQuery = {
+      //   params: {
+      //     manufacturerName: '',
+      //     supplierType: '',
+      //     useOrgSid: '',
+      //     createOrgSid: '',
+      //     manufacturerTelePhone: '',
+      //     contactName: ''
+      //   },
+      //   current: 1,
+      //   size: 5
+      // }
+      // this.init()
+    },
+    // 打开添加对话框
+    toAdd() {
+      this.viewState = 2
+       this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid)
+    },
+
+    handleSelectionChange(row) {
+      const aa = []
+      row.forEach((element) => {
+        aa.push(element.sid)
+      })
+      this.sids = aa
+    },
+    // 根据本行ID删除数据
+    doDel() {
+      if (this.sids.length > 0) {
+        const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
+        this.$confirm(tip, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          req.delBySids(this.sids.toString()).then(resp => {
+            if (resp.success) {
+              loading.close()
+              this.$message({ type: 'success', message: resp.msg, showClose: true })
+              this.getList()
+            } else {
+              loading.close()
+            }
+          }).catch(e => {
+            loading.close()
+          })
+        }).catch(() => {
+        })
+      } else {
+        this.$message({ type: 'error', message: '没有选择!!', showClose: true })
+        return
+      }
+    },
+    // toChangShang() {
+    //   req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => {
+    //     if (resp.success) {
+    //       this.$message({ showClose: true, type: 'success', message: '获取成功' })
+    //       this.getList()
+    //     }
+    //   })
+    // },
+    // toGain() {
+    //   req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => {
+    //     if (resp.success) {
+    //       this.$message({ showClose: true, type: 'success', message: '获取成功' })
+    //       this.getList()
+    //     }
+    //   })
+    // },
+    handleEdit(row) {
+      this.viewState = 3
+      this.$refs['divadd'].showEdit(row)
+      // if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') {
+      //   this.viewState = 3
+      //   this.$refs['divadd'].showEdit(row)
+      // } else {
+      //   this.viewState = 5
+      //   this.$refs['divHosts'].showInfo(row)
+      // }
+    },
+    // 打开查看
+    handleCheck(row) {
+      this.viewState = 4
+      this.$refs['divinfo'].showInfo(row)
+    },
+    // 导出
+    // doExport() {
+    //   basefinbankExportExcel(this.sids).then((res) => {
+    //     const blob = new Blob([res], {
+    //       type: 'application/vnd.ms-excel'
+    //     })
+    //     const objectUrl = URL.createObjectURL(blob)
+    //     window.location.href = objectUrl
+    //     this.$notify({
+    //       title: '提示',
+    //       message: '导出成功',
+    //       type: 'success',
+    //       duration: 2000
+    //     })
+    //   })
+    // },
+    doClose() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.go(-1)
+    },
+    toMore() {
+      this.dialogImage = true
+    },
+    checkbox(item) {
+      // this.departmentTypeArray = this.departmentTypeArray.includes(item.value)
+      //   ? [item.value]
+      //   : []
+    },
+  }
+}
+</script>
+
+<style scoped>
+.seencons{background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 0 10px;}
+.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
+/* // */
+/* 鼠标移入 */
+.seenconsc{background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 0 10px;}
+.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
+/* .app-container{background-color: #f5f5f5;margin: 0;} */
+.shipinlisttop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  /* padding: 0 0 0 15px; */
+  margin: 20px 0;
+  background-color: #fff;
+  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  padding: 10px;
+}
+.tab-header{background-color: #fff;}
+  .shipinscon {margin: 20px 0 0 0;
+  padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+}
+  .shipinstu {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 .jingicon {cursor: pointer;
+  font-size: 22px !important;
+  border-radius: 40px !important;
+  width: 40px !important;
+  height: 40px !important;line-height: 40px;
+  padding: 0px;text-align: center;
+
+
+}
+
+.redzibg {
+  color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  border: 1px solid #fd0808;
+}
+.bluezibg {
+  color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
+  border: 1px solid #469efd;
+}
+.huizibg {
+  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 .shipin_baojing1{position: absolute;top: 35px;left: 22%;}
+.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
+.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
+.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
+.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
+
+/* //门禁管理// */
+.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
+.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
+.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
+
+.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
+/* //电子围栏// */
+.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
+.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
+.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
+
+.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
+.mores{padding: 0 10px;display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: center;}
+.mores .more{flex: 1;font-size: 14px;padding: 0 10px;cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;align-items: center;}
+  .mores .more p {display: inline-block;
+		font-size: 14px;
+	}
+.mores .more .iconbox {display: inline-block;
+		border-radius: 30px;
+		line-height: 30px;
+		width: 30px;
+		height: 30px;
+		color: #fff;
+		font-size: 18px;text-align: center;margin: 0 5px;
+	}
+  /* .iconbox_red {
+    color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
+  border: 1px solid #fd0808;
+	}
+
+	.iconbox_yellow {
+		background-color: #ff7521;
+	}
+
+
+  .iconbox_green {
+		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;}
+
+
+  /* // 底部导航 */
+.tabhead {
+  position: fixed;
+  bottom: 50px;
+  left: 230px;
+  z-index: 900;
+  /* background-color: rgba( #04154d, 0.8); */
+  /* box-shadow: 0px 0px 6px #0d27c2; */
+}
+.iconfontyuan {
+  font-size: 18px !important;
+  margin: 0 3px 0 3px;
+  border-radius: 60px !important;
+  width: 60px !important;
+  height: 60px !important;
+  padding: 5px;
+
+}
+.yellowziyuan {
+  color: #fff;
+  background-color: #f57c13;
+}
+
+.redziyuan {
+  color: #fff;
+  background-color: #ff0000;
+}
+
+.blueziyuan {
+  color: #fff;
+  background-color: #5b9cf7;
+}
+
+.greenziyuan {
+  color: #fff;
+  background-color: #06be4d;
+}
+
+.ziziyuan {
+  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;} */
+</style>