zc

README.md

@@ -99,7 +99,7 @@
 
 | 功能标识 | 功能名称 | 业务字段 | 备注 |
 |  ---- | ---- | ---- | ---- | 
-| type == 12 | 化学品终端扫码双人认证 | doorId,subId,macId | 前端生成 |
+| type == 12 | 化学品终端扫码双人认证 | doorId,subId,macId,code | 前端生成 |
 | type == 11 | 化学品终端扫码单人登录 | code,subId,macId | 前端生成 |
 | type == 10 | 实验室危险源 | -- | 前端生成 |
 | type == 9 | 化学品 | -- | 前端生成 |

src/api/commonality/permission.js

@@ -556,3 +556,12 @@ export function menuLinkPost(url,data) {
     data: data
   })
 }
+//查询当前正在发生的预案
+export function laboratoryBigViewSelectTriggerInfo(query) {
+  return request({
+    url: '/laboratory/bigView/selectTriggerInfo',
+    method: 'get',
+    params: query
+  })
+}
+

src/api/emergencyManagement/index.js

@@ -279,4 +279,57 @@ export function laboratoryBigViewGetFloorByBigView(query) {
     params: query
   })
 }
+//获取楼层-智能物联设备列表
+export function iotBigViewStatisticsHardwareDeviceType(query) {
+  return request({
+    url: '/iot/bigView/statistics/hardwareDeviceType',
+    method: 'get',
+    params: query
+  })
+}
+/*
+指定物联设备查询列表
+typeKey:'camera'//摄像头
+楼层或实验室 floorId 楼层ID  subjectId  实验室ID
+*/
+export function iotBigViewDeviceList(data) {
+  return request({
+    url: '/iot/bigView/device/list',
+    method: 'post',
+    data: data
+  })
+}
+//获取当前楼栋-楼层下的疏散数据
+export function laboratoryExitLineGetRedisEvacuation(data) {
+  return request({
+    url: '/laboratory/exitLine/getRedisEvacuation',
+    method: 'post',
+    data: data
+  })
+}
+//执行疏散
+export function laboratoryExitLineExecuteEvacuation(data) {
+  return request({
+    url: '/laboratory/exitLine/executeEvacuation',
+    method: 'post',
+    data: data
+  })
+}
+//结束疏散
+export function laboratoryExitLineEndEvacuation(data) {
+  return request({
+    url: '/laboratory/exitLine/endEvacuation',
+    method: 'post',
+    data: data
+  })
+}
+//查询-楼层/实验室人员
+export function laboratoryBigViewOnLineUserList(data) {
+  return request({
+    url: '/laboratory/bigView/onLineUserList',
+    method: 'post',
+    data: data
+  })
+}
+
 

src/assets/styles/commonality.scss

@@ -18,15 +18,6 @@
     overflow: hidden;
   }
 }
-//.app-container::-webkit-scrollbar{
-//  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-//  height: 6px;
-//}
-//.app-container::-webkit-scrollbar-thumb{
-//  border-radius: 5px;
-//  -webkit-box-shadow: inset 0 0 5px $acquiesceThemeScrollbarB;
-//  background: $acquiesceThemeScrollbarA;
-//}
 //===========================右侧内容窗口页面公共样式===========================
 .page-form-title-box{
   height:80px;
@@ -436,8 +427,8 @@
 }
 //表格滚动条样式
 .el-table__body-wrapper::-webkit-scrollbar{
-  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8px;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
 }
 .el-table__body-wrapper::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -701,8 +692,8 @@
       }
       //滚动条样式
       .el-scrollbar__view::-webkit-scrollbar{
-        width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-        height: 8px;
+        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+        height: 6px;
       }
       .el-scrollbar__view::-webkit-scrollbar-thumb{
         border-radius: 5px;

src/assets/styles/index.scss

@@ -8,9 +8,13 @@
   margin:0;
   padding:0;
   font-weight:500;
-  /*火狐浏览器*/
-  scrollbar-color: $acquiesceThemeScrollbarD rgba(255,255,255,0); /* 滑块颜色  滚动条背景颜色 */
-  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
+}
+/*火狐浏览器*/
+@-moz-document url-prefix() {
+  * {
+    scrollbar-color: $acquiesceThemeScrollbarD rgba(255,255,255,0); /* 滑块颜色  滚动条背景颜色 */
+    scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
+  }
 }
 *,
 *:before,
@@ -259,8 +263,8 @@ aside {
 }
 //抽屉滚动条
 .el-drawer__body::-webkit-scrollbar{
-  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8px;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
 }
 .el-drawer__body::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -391,8 +395,8 @@ aside {
 }
 //富文本滚动条样式
 .w-e-text::-webkit-scrollbar{
-  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8px;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
 }
 .w-e-text::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -417,8 +421,8 @@ aside {
   overflow-y: scroll;
 }
 .scrollbar-box::-webkit-scrollbar{
-  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8px;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
 }
 .scrollbar-box::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -439,8 +443,8 @@ aside {
   white-space: nowrap;
 }
 .scrollbar-x-box::-webkit-scrollbar{
-  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8px;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
 }
 .scrollbar-x-box::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -459,13 +463,11 @@ aside {
   overflow-y: scroll;
 }
 .el-textarea__inner::-webkit-scrollbar{
-  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8px;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
 }
 .el-textarea__inner::-webkit-scrollbar-thumb{
   border-radius: 5px;
-  //-webkit-box-shadow: inset 0 0 5px $acquiesceThemeScrollbarB;
-  //background: $acquiesceThemeScrollbarA;
   -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
   background: rgba(255,255,255,0);
 }

src/components/mpegtsVideo/mpegtsVideo.vue

@@ -57,6 +57,7 @@
         decodedFramesNum:null,//断流计数器
         reconnectType:false,//重连状态
         videoImg:null,
+        errorNum:0//异常次数
       }
     },
     created(){
@@ -137,8 +138,13 @@
           });
           this.flvPlayer.on(mpegts.Events.ERROR, e=> {
             // 发生异常
-            this.$set(this,'reconnectType',true);
-            this.reconnectVideo();
+            if(this.errorNum > 5){
+              this.videoOff();
+            }else{
+              this.errorNum++
+              this.$set(this,'reconnectType',true);
+              this.reconnectVideo();
+            }
           });
           this.flvPlayer.on(mpegts.Events.LOADING_COMPLETE, (e) => {
             // 视频流已结束

src/views/emergencyManagement/performEvacuation/performEvacuation.vue

@@ -29,7 +29,11 @@
       }
     },
     created () {
-      if(this.$route.query.subId){
+      if(this.$route.query.buildId){
+        this.$set(this,'propsBigData',{
+          buildId:this.$route.query.buildId,
+          floorId:this.$route.query.floorId,
+        });
         this.$set(this,'pageType',2);
       }else{
         this.$set(this,'pageType',1);
@@ -56,7 +60,7 @@
           this.$set(this,'propsBigData',null);
           this.$set(this,'pageType',type);
         } else if(type == 2){
-          this.$set(this,'propsBigData',data);
+          this.$set(this,'propsBigData',JSON.parse(JSON.stringify(data)));
           this.$set(this,'pageType',type);
         }
       },

src/views/emergencyManagement/performEvacuation/performEvacuationBig.vue

@@ -21,7 +21,12 @@
       }
     },
     created () {
-      if(this.$route.query.subId){
+      if(this.$route.query.buildId){
+        this.$set(this,'propsBigData',{
+          buildId:this.$route.query.buildId,
+          floorId:this.$route.query.floorId,
+          subId:this.$route.query.subId,
+        });
         this.$set(this,'pageType',2);
       }else{
         this.$set(this,'pageType',1);
@@ -48,7 +53,7 @@
           this.$set(this,'propsBigData',null);
           this.$set(this,'pageType',type);
         } else if(type == 2){
-          this.$set(this,'propsBigData',data);
+          this.$set(this,'propsBigData',JSON.parse(JSON.stringify(data)));
           this.$set(this,'pageType',type);
         }
       },

src/views/emergencyManagement/performEvacuation/performEvacuationHome.vue

@@ -14,16 +14,23 @@
         <div class="content-floor-num-box">
           <!--楼层选择-->
           <div class="content-floor-box">
-            <el-select v-model="buildingId" placeholder="请选择"
+            <el-select v-model="buildId" placeholder="请选择"
                        :popper-append-to-body="false"
                        @change="buildingChange"
                        style="width:240px;"
                        class="building-select-box">
               <el-option
-                v-for="item in buildingOptions"
+                v-for="item in buildOptions"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
+                <div style="display: flex" v-if="item.planType">
+                  <img src="@/assets/ZDimages/emergencyManagement/icon_lc_yc.png" style="margin:11px 10px 0 0;width:14px;height:12px;">
+                  <p style="margin-right:24px;">{{ item.name }}</p>
+                </div>
+                <div style="display: flex" v-else>
+                  <p  style="margin:0 24px;">{{ item.name }}</p>
+                </div>
               </el-option>
             </el-select>
           </div>
@@ -41,7 +48,7 @@
             <div class="newEvacuation-map-max-big-box"
                  v-if="mapType"
                  :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
-              <div class="newEvacuation-map-big-box"
+              <div class="newEvacuation-map-big-box" @click="clickMap"
                    :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
                 <div class="newEvacuation-map-for-box for-map-box-one"
                      :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
@@ -49,7 +56,6 @@
                            item.planType && checkSubId ==item.subId ? 'room-type-three':(
                            !item.loginAdmin ? 'room-type-noe':''
                            )))"
-                     @click="checkSubClick(item)"
                      v-for="(item,index) in mapList" :key="item.key" v-if="item.type == 1"
                      :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'+(item.levelColor?'background-color:'+item.levelColor+';':'')">
                   <div class="newEvacuation-map-for-min-box">
@@ -96,7 +102,6 @@
                 </div>
                 <div class="plan-map-for-box" :class="checkPlanId == item.subId?'check-plan-map-for-box':''"
                      :style="'width:'+item.width+'px;height:'+item.height+'px;left:'+item.left+'px;top:'+item.top+'px;'"
-                     @click="checkPlanButton(item.subId)"
                      v-for="(item,index) in planMapList" :key="item.subId" v-if="item.planType">
                   <div class="plan-top-button-box">
                     <p></p>
@@ -127,16 +132,28 @@
             </div>
           </div>
         </div>
-        <!--智能监测/危险源-->
+        <!--智能物联/危险源-->
         <div class="content-monitor-danger-box">
-          <!--智能监测-->
+          <!--智能物联-->
           <div class="content-monitor-box">
             <div class="big-title-box">
-              <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_tb.png">
+              <img src="@/assets/ZDimages/emergencyManagement/icon_znjc_tb.png">
               <p>智能物联</p>
             </div>
+            <p class="content-position-monitor-num-p">总数：{{monitorNum}}</p>
             <div class="content-monitor-for-box" :class="!monitorList[0]?'content-monitor-null-box':''">
-              <div class="null-box">
+              <div class="monitor-for-box" v-for="(item,index) in monitorList" :key="index">
+                <div class="monitor-num-box">
+                  <p class="monitor-num-p">{{item.count}}</p>
+                  <div class="monitor-img-box">
+                    <!--svg组件-->
+                    <!--<svg-icon class="svg-img" icon-class="http://192.168.1.43/labSystem/admin/statics/statics/bigFile/2022020818/404.svg"/>-->
+                    <svg-icon class="svg-img" :icon-class="item.smallIcon"/>
+                  </div>
+                </div>
+                <p class="monitor-name-p">{{item.name}}</p>
+              </div>
+              <div class="null-box" v-if="!monitorList[0]">
                 <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_znjcsj.png">
                 <p class="null-p">暂无数据</p>
               </div>
@@ -145,11 +162,11 @@
           <!--危险源-->
           <div class="content-danger-box">
             <div class="big-title-box">
-              <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_tb.png">
+              <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_wxy.png">
               <p>危险源</p>
             </div>
             <div class="content-danger-for-box" :class="!dangerList[0]?'content-danger-null-box':''">
-              <div class="null-box">
+              <div class="null-box" v-if="!dangerList[0]">
                 <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwzzsj.png">
                 <p class="null-p">暂无数据</p>
               </div>
@@ -160,11 +177,26 @@
       <!--摄像头-->
       <div class="content-right-max-big-box">
         <div class="big-title-box">
-          <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_tb.png">
+          <img src="@/assets/ZDimages/emergencyManagement/icon_sysnry_jk.png">
           <p>视频监控</p>
         </div>
         <div class="content-video-for-box" :class="!videoList[0]?'content-video-null-box':''">
-          <div class="null-box">
+          <div class="video-for-box">
+            <mpegts-video style="display: inline-block;margin-bottom:20px;" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+          </div>
+          <div class="pagination-box">
+            <p class="flex-null-p"></p>
+            <pagination
+              v-show="videoTotal > 3"
+              :total="videoTotal"
+              layout="total, prev, pager, next"
+              :page.sync="videoQueryParams.page"
+              :limit.sync="videoQueryParams.pageSize"
+              @pagination="iotBigViewDeviceList"
+            />
+            <p class="flex-null-p"></p>
+          </div>
+          <div class="null-box" v-if="!videoList[0]">
             <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwsj.png">
             <p class="null-p">暂无数据</p>
           </div>
@@ -174,16 +206,22 @@
   </div>
 </template>
 <script>
-  import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView } from "@/api/emergencyManagement/index";
+  import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView,
+    iotBigViewStatisticsHardwareDeviceType,iotBigViewDeviceList,laboratoryBigViewOnLineUserList } from "@/api/emergencyManagement/index";
+  import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   export default {
     name: 'performEvacuationHome',
+    components: {
+      mpegtsVideo,
+    },
     data () {
       return {
         //当前路由状态
         routeType:false,
         //楼栋数据
-        buildingId:null,
-        buildingOptions:[],
+        buildId:null,
+        buildOptions:[],
         //楼层数据
         floorId:null,
         floorOptions:[],
@@ -193,10 +231,16 @@
         checkFloor:0,
         //智能物联
         monitorList:[],
+        monitorNum:0,
         //危险源
         dangerList:[],
         //视频数据
+        videoQueryParams:{
+          page:1,
+          pageSize:3,
+        },
         videoList:[],
+        videoTotal:0,
         //地图数据
         mapList:[],
         zoomData:null,
@@ -205,6 +249,8 @@
         mapType:false,
         //实验室选中/报警数据
         checkSubId:null,
+        //优先显示的提示
+        checkPlanId:null,
       }
     },
     created () {
@@ -219,11 +265,37 @@
       this.getBuild();
     },
     methods: {
+      //地图点击跳转2级
+      clickMap(){
+        let obj = {
+          buildId:this.buildId,
+          floorId:this.floorId,
+        }
+        this.$parent.goPage(2,obj);
+      },
+      //获取楼层相关数据
+      getFloorData(){
+        //重置 摄像头查询参数
+        this.$set(this,'videoQueryParams',{
+          page:1,
+          pageSize:3,
+        });
+        //获取楼层数据
+        this.laboratoryBigViewGetFloorByBigView();
+        //获取楼层-总人数;
+        this.laboratoryBigViewOnLineUserList();
+        //获取楼层-智能物联设备列表;
+        this.iotBigViewStatisticsHardwareDeviceType();
+        //获取楼层-摄像头列表;
+        this.iotBigViewDeviceList();
+        //获取楼层-危险源统计;
+        //获取楼层-内实验室内人数;
+      },
       //切换楼层
       clickFloor(item,index){
         this.$set(this,'checkFloor',index);
         this.$set(this,'floorId',item.id);
-        this.laboratoryBigViewGetFloorByBigView();
+        this.getFloorData();
       },
       //楼栋数据选择
       buildingChange(){
@@ -248,8 +320,8 @@
       getBuild(){
         laboratoryBigViewGetBuildByBigView({type:2}).then(response => {
           if(response.data[0]){
-            this.$set(this,'buildingOptions',response.data);
-            this.$set(this,'buildingId',response.data[0].id);
+            this.$set(this,'buildOptions',response.data);
+            this.$set(this,'buildId',response.data[0].id);
             //获取楼层数据
             this.getFloor();
           }
@@ -257,17 +329,13 @@
       },
       //获取楼层数据
       getFloor(){
-        laboratoryBigViewGetBuildByBigView({id:this.buildingId,type:3}).then(response => {
+        laboratoryBigViewGetBuildByBigView({id:this.buildId,type:3}).then(response => {
+          //重置 楼层数据
           this.$set(this,'floorOptions',response.data);
           this.$set(this,'floorId',response.data[0].id);
+          //重置 选中楼层
           this.$set(this,'checkFloor',0);
-          //获取楼层数据
-          this.laboratoryBigViewGetFloorByBigView();
-          //获取楼层-总人数;
-          //获取楼层-智能物联设备列表;
-          //获取楼层-摄像头列表;
-          //获取楼层-危险源统计;
-          //获取楼层-内实验室内人数;
+          this.getFloorData();
         })
       },
       //获取楼层布局数据
@@ -295,7 +363,6 @@
                   };
                   for(let o=0;o<response.data[0].buildLayoutVoList.length;o++){
                     if(list[i].key == response.data[0].buildLayoutVoList[o].pointName){
-                      console.log('response.data[0].buildLayoutVoList[o]',response.data[0].buildLayoutVoList[o])
                       list[i].id = response.data[0].buildLayoutVoList[o].id;
                       list[i].buildId = response.data[0].buildLayoutVoList[o].buildId;
                       list[i].floorId = response.data[0].buildLayoutVoList[o].floorId;
@@ -360,15 +427,110 @@
               this.$set(this,'mapData',{});
               this.$set(this,'mapList',[]);
               this.$set(this,'mapType',false);
+              this.$set(this,'planMapList',[]);
             }
+            //获取预警列表
+            this.laboratoryBigViewSelectTriggerInfo();
           }
         })
       },
+      //查询楼层人数
+      laboratoryBigViewOnLineUserList(){
+        laboratoryBigViewOnLineUserList({floorId:this.floorId}).then(response => {
+          this.$set(this,'floorUserNum',response.data);
+        })
+      },
+      //查询当前正在发生的预案
+      laboratoryBigViewSelectTriggerInfo(){
+        let self = this;
+        laboratoryBigViewSelectTriggerInfo().then(response => {
+          //楼栋预案标记
+          for(let o=0;o<self.buildOptions.length;o++){
+            let num = 0;
+            for(let i=0;i<response.data.length;i++){
+              if(response.data[i].buildId == self.buildOptions[o].id){
+                num++
+              }
+            }
+            self.$set(self.buildOptions[o],'planType',num != 0);
+          }
+          //实验室预案标记
+          let num = 0;
+          for(let o=0;o<self.mapList.length;o++){
+            if(self.mapList[o].type == 1){
+              let newData = {};
+              for(let i=0;i<response.data.length;i++){
+                if(response.data[i].subId == self.mapList[o].subId){
+                  num++
+                  newData = response.data[i];
+                }
+              }
+              if(num != 0){
+                self.$set(self.mapList[o],'planType',true);
+                for(let x=0;x<self.planMapList.length;x++){
+                  if(self.planMapList[x].subId == self.mapList[o].subId){
+                    self.$set(self.planMapList[x],'riskPlanTriggerTime',this.parseTime(newData.eventStartTime,"{y}-{m}-{d} {h}:{i}:{s}"));
+                    self.$set(self.planMapList[x],'riskAttribute',newData.riskAttribute);
+                    self.$set(self.planMapList[x],'riskPlanLevel',newData.riskPlanLevel);
+                    self.$set(self.planMapList[x],'riskPlanLevelName',newData.riskPlanLevel==1?'低风险':(newData.riskPlanLevel==2?'中风险':(newData.riskPlanLevel==3?'较高风险':(newData.riskPlanLevel==4?'高风险':''))));
+                    self.$set(self.planMapList[x],'name',newData.riskPlanName);
+                    self.$set(self.planMapList[x],'groupId',newData.eventId);
+                    self.$set(self.planMapList[x],'planType',true);
+                  }
+                }
+              }else{
+                self.mapList[o].planType = false;
+                for(let x=0;x<self.planMapList.length;x++){
+                  if(self.planMapList[x].subId == self.mapList[o].subId){
+                    self.$set(self.planMapList[x],'planType',false);
+                    self.$set(self.planMapList[x],'riskPlanTriggerTime',null);
+                    self.$set(self.planMapList[x],'riskAttribute',null);
+                    self.$set(self.planMapList[x],'riskPlanLevel',null);
+                    self.$set(self.planMapList[x],'riskPlanLevelName',null);
+                    self.$set(self.planMapList[x],'groupId',null);
+                    self.$set(self.planMapList[x],'name',null);
+                  }
+                }
+              }
+            }
+          }
+          this.$forceUpdate();
+        })
+      },
+      //获取楼层-智能物联设备列表;
+      iotBigViewStatisticsHardwareDeviceType(){
+        iotBigViewStatisticsHardwareDeviceType({floorId:this.floorId}).then(response => {
+          this.$set(this,'monitorList',response.data.devices);
+          this.$set(this,'monitorNum',response.data.total);
+        })
+      },
+      //获取楼层-摄像头列表
+      iotBigViewDeviceList(){
+        let obj = JSON.parse(JSON.stringify(this.videoQueryParams))
+        obj.floorId = this.floorId;
+        obj.typeKey = 'camera'
+        iotBigViewDeviceList(obj).then(response => {
+          let list = [];
+          response.data.records.forEach((item)=>{
+            let obj = JSON.parse(item.reservedField)
+            if(obj.url){
+              item.width = 397;
+              item.height = 223;
+              item.type = 'flv';
+              item.isLive = true;
+              item.url = '';
+              list.push(item);
+            }
+          })
+          this.$set(this,'videoList',list);
+          this.$set(this,'videoTotal',response.data.total);
+        })
+      },
       //计算布局最大尺寸
       calculateMapMax(list) {
         //基础参数
         let height = 500;
-        let width = 1000;
+        let width = 1020;
         let maxWidth = 0
         let maxHeight = 0
         let zoomData = 1;
@@ -566,6 +728,7 @@
               .newEvacuation-map-big-box{
                 position: relative;
                 border:1px dashed #24D1F9;
+                cursor: pointer;
                 .newEvacuation-map-for-box{
                   position: absolute;
                   display: flex;
@@ -878,15 +1041,63 @@
           display: flex;
           .content-monitor-box{
             width:954px;
+            position: relative;
+            .content-position-monitor-num-p{
+              position: absolute;
+              top:27px;
+              right:90px;
+              color:#CCD6D6;
+              font-size:16px;
+            }
             .big-title-box{
               margin-left:33px;
             }
             .content-monitor-for-box{
               margin-left:33px;
               margin-top:20px;
-              width:820px;
+              width:860px;
               height:260px;
               position: relative;
+              .monitor-for-box{
+                display: inline-block;
+                margin:15px 30px 0 0;
+                .monitor-num-box{
+                  background: url("../../../assets/ZDimages/emergencyManagement/monitor/icon_znjc_bg.png");
+                  background-size: 100%;
+                  width:77px;
+                  height:86px;
+                  .monitor-num-p{
+                    line-height:24px;
+                    text-align: center;
+                    font-size:24px;
+                    color:#23FFFC;
+                  }
+                  .monitor-img-box{
+                    height:62px;
+                    width:77px;
+                    //栅格布局居中
+                    display: grid;
+                    align-items: center;
+                    justify-items: center;
+                    overflow: hidden;
+                    .svg-img{
+                      display: block;
+                      width:40px;
+                      height:40px;
+                      color:#24D1F9;
+                      /*svg投影改色*/
+                      //filter: drop-shadow(#24D1F9 100px 0);
+                      //transform: translateX(-100px);
+                    }
+                  }
+                }
+                .monitor-name-p{
+                  text-align: center;
+                  font-size:16px;
+                  line-height:30px;
+                  color:#fff;
+                }
+              }
               .null-box{
                 position: absolute;
                 left:50%;
@@ -955,6 +1166,29 @@
           margin:20px 30px 30px 0;
           height:870px;
           position: relative;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          .video-for-box{
+            /*height:818px;*/
+            height:740px;
+          }
+          ::v-deep .pagination-box{
+            display: flex;
+            .flex-null-p{
+              flex:1;
+            }
+            .el-pagination__total,.active{
+              color:#24D1F9;
+            }
+            .active{
+              border:1px solid #24D1F9!important;
+            }
+            .btn-next,.btn-prev,.number{
+              border:1px solid #19667e;
+              background-color: rgba(0,0,0,0);
+            }
+          }
           .null-box{
             position: absolute;
             left:50%;

src/views/iotDevice/intelligenceIot/iotClassification/attributePage.vue

@@ -618,25 +618,12 @@
         }
       },
       beforeAvatarUpload(file) {
+        console.log('file',file);
         return new Promise((resolve, reject) => {
-          if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
-            let reader = new FileReader()
-            reader.readAsDataURL(file) // 必须用file.raw
-            reader.onload = e => { // 让页面中的img标签的src指向读取的路径
-              let img = e.target.result;
-              const image = new Image()
-              image.src=img
-              image.onload = _=>{
-                if(image.width <= 200 && image.height <= 200){
-                  resolve()
-                }else{
-                  this.$message.error('最大尺寸不可超过200px*200px')
-                  reject();
-                }
-              }
-            }
+          if (file.type == 'image/svg+xml') {
+            resolve()
           }else{
-            this.$message.error('只能上传png/jpeg/gif格式图片');
+            this.$message.error('只能上传svg格式图片');
             reject();
           }
         })