From 262ec2866e55363f3654b51971498d2260ce0cdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Fri, 24 Mar 2023 16:50:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |    3 +-
 src/api/api.js                            |   30 +
 src/api/personnel.js                      |   13 +-
 src/components/common/RadarChart.vue      |   32 +-
 src/components/common/mdScreenPie.vue     |    4 +
 src/components/common/pieChart.vue        |    4 +
 src/components/common/pieChartUnImg.vue   |    4 +
 src/components/common/pieDateChart.vue    |  271 ++--
 src/main.js                               |    8 +
 src/views/index.vue                       |   30 +-
 src/views/modelScreenComponents.vue       |   43 +-
 src/views/personnelComponents.vue         |  186 ++-
 src/views/videoSurveillanceComponents.vue | 1529 +++++++++---------
 src/views/videoViewingComponents.vue      | 1725 +++++++++++----------
 14 files changed, 2149 insertions(+), 1733 deletions(-)

diff --git a/package.json b/package.json
index 848c688..540b5da 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "vue-router": "^3.0.1",
     "vue2-scale-box": "^0.1.4",
     "vuedraggable": "2.24.3",
-    "vuex": "3.0.1"
+    "vuex": "3.0.1",
+    "moment": "^2.29.4"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/api/api.js b/src/api/api.js
index fa544e5..9dcf31d 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -88,3 +88,33 @@ export const getCompleteMonthStatus = (params) => {
   {params},
    )
 };
+//视频监控
+export const getIsImportant = (params) => {
+  return axios.get('api/ems-third-party-service/camera/isImportant',
+  {params},
+   )
+};
+//获取所有监控接口 
+export const getAllCamera = (params) => {
+  return axios.get('api/ems-third-party-service/camera/all/get',
+  {params},
+   )
+};
+//获取所有监控接口列表 
+export const getAllCameraList = (params) => {
+  return axios.get('api/ems-third-party-service/camera/all/get',
+  {params},
+   )
+};
+//获取摄像头数量接口
+export const getCameraCount = (params) => {
+  return axios.get('api/ems-third-party-service/camera/count',
+  {params},
+   )
+};
+//获取摄像头历史监控
+export const getCameraHistory = (params) => {
+  return axios.get('api/ems-third-party-service/camera/history',
+  {params},
+   )
+};
diff --git a/src/api/personnel.js b/src/api/personnel.js
index ec19b9c..14bffac 100644
--- a/src/api/personnel.js
+++ b/src/api/personnel.js
@@ -38,4 +38,15 @@ export const getAttend = (params) => {
     {params},
      )
 };
-
+//站班会记录
+export const getRecentMeeting = (params) => {
+    return axios.get('api/ems-third-party-service/project/recentMeeting',
+    {params},
+     )
+};
+//站班会统计
+export const getMonthCensus = (params) => {
+    return axios.get('api/ems-third-party-service/project/monthCensus',
+    {params},
+     )
+};
diff --git a/src/components/common/RadarChart.vue b/src/components/common/RadarChart.vue
index 9bac692..b66505a 100644
--- a/src/components/common/RadarChart.vue
+++ b/src/components/common/RadarChart.vue
@@ -8,7 +8,7 @@
       height="100%"
       :extensionFun="extensionFun"
     ></Chart>
-    <div class="lineBox"></div>
+    <!-- <div class="lineBox"></div> -->
   </div>
 </template>
 <script>
@@ -53,7 +53,11 @@ export default {
     yAxisPadding: {
       type: Array,
       default: null
-    }
+    },
+    radarList:{
+      type: Array,
+      default: null
+    } //父传子的数组
   },
 
   components: {
@@ -69,7 +73,13 @@ export default {
 
   watch: {
     // 监听父组件中的数据变化，重新触发Echarts
-    chartData: {
+    // chartData: {
+    //   deep: true,
+    //   handler () {
+    //     this.resetOption()
+    //   }
+    // },
+    radarList:{
       deep: true,
       handler () {
         this.resetOption()
@@ -100,6 +110,12 @@ export default {
       }
     },
     option () {
+      let month = [];
+      let number = [];
+      this.radarList.forEach((item,index) => {
+        month.push(item.month + '月')
+        number.push(item.number)
+      });
       const self = this
       return {
         title: {
@@ -119,10 +135,10 @@ export default {
         }
     },
         grid: {
-          top: '121',
+          top: '80',
           left: '37',
           right: '31',
-          bottom: '46',
+          bottom: '20',
           containLabel: true
         },
         xAxis: {
@@ -130,7 +146,7 @@ export default {
             // x轴线的颜色以及宽度
             show: true,
             lineStyle: {
-              color: '#ffff',
+              color: '#fff',
               height: 0
             }
           },
@@ -146,7 +162,7 @@ export default {
           },
           triggerEvent: true,
           type: 'category',
-          data: this.xAxisData
+          data: month
         },
         yAxis: {
           name: '次数',
@@ -183,7 +199,7 @@ export default {
         series: [
           {
             name:'检查次数',
-            data: this.chartData,
+            data: number,
             type: 'bar',
             barWidth:10,
             color:'#0DFFFF'
diff --git a/src/components/common/mdScreenPie.vue b/src/components/common/mdScreenPie.vue
index 2e464ce..ae30ecd 100644
--- a/src/components/common/mdScreenPie.vue
+++ b/src/components/common/mdScreenPie.vue
@@ -89,6 +89,10 @@
         var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
         // 绘制图表
         myChart.setOption({
+          tooltip:{
+          trigger:'item',
+          formatter: '{b}：{c}',
+        },
           graphic: {
             elements: [{
               type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
diff --git a/src/components/common/pieChart.vue b/src/components/common/pieChart.vue
index 0773a54..c77da81 100644
--- a/src/components/common/pieChart.vue
+++ b/src/components/common/pieChart.vue
@@ -79,6 +79,10 @@ export default {
       var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
       // 绘制图表
       myChart.setOption({
+        tooltip:{
+          trigger:'item',
+          formatter: '{b}：{c}%',
+        },
         graphic: {
           elements: [{
             type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
diff --git a/src/components/common/pieChartUnImg.vue b/src/components/common/pieChartUnImg.vue
index 7a8ce72..c31f3b5 100644
--- a/src/components/common/pieChartUnImg.vue
+++ b/src/components/common/pieChartUnImg.vue
@@ -72,6 +72,10 @@ export default {
       var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
       // 绘制图表
       myChart.setOption({
+        tooltip:{
+          trigger:'item',
+          formatter: '{b}：{c}%',
+        },  
         series: [
           {
             type: "pie",
diff --git a/src/components/common/pieDateChart.vue b/src/components/common/pieDateChart.vue
index f9139f9..cce5635 100644
--- a/src/components/common/pieDateChart.vue
+++ b/src/components/common/pieDateChart.vue
@@ -9,7 +9,7 @@
     <div class="jsBox">
       <div class="bogJs" v-for="(item, i) in pieData" :key="i">
         <div class="jsChild">
-          <span :style="item.color"></span>
+          <span :style="{'background':item.colorList}"></span>
           <!-- <span :background="item.color"></span> -->
           <span>{{item.groupName}}</span>
         </div>
@@ -58,10 +58,11 @@ export default {
         totalPer:0,
         pieDataNew:[],
         color:['background-color:#00B3FF','background-color:#F1E453','background-color:#F85B60','background-color:#00A572', 'background-color:#008AA4', 'background-color:#7968D9', 'background-color:#C7A73E'],
+        colorList:['#00B3FF','#F1E453','#F85B60','#00A572', '#008AA4', '#7968D9', '#C7A73E'],
     };
   },
   mounted() {
-    this.initCharts();
+    // this.initCharts();
   },
   watch: {
     // 监听父组件中的数据变化，重新触发Echarts
@@ -74,10 +75,8 @@ export default {
     pieData: {
         deep: true,
         handler(newVal) {
-          console.log(newVal,'==============');
-        //    this.initCharts(newVal)
           this.changeNewVal(newVal)
-          
+          this.initCharts(newVal)
         }
       }
   },
@@ -85,21 +84,74 @@ export default {
   methods: {
     //获取人员数据
     changeNewVal(newVal){
-        console.log("newVal",newVal)
         this.pieDataNew = newVal
         // var pieDataN = []
             newVal.map((item,index) => {
                 this.totalPer+=item.number
                 console.log("this.totalPer",this.totalPer)
-             this.color.forEach((items,indexs) => {
+             this.colorList.forEach((items,indexs) => {
                 if(index==indexs){
-                   return  item.color = items
+                   return  item.colorList = items
                 }
              })            
             })
     },
 
-    initCharts() {
+    initCharts(dataList) {
+      let series = [];
+      let serItem={}
+      dataList.forEach((item,index) => {
+        serItem={}
+        serItem={
+          name: item.groupName,
+            type: 'pie',
+            clockWise: true,
+            hoverAnimation: false,
+            radius: [80-(index*10), 82-(index*10)],
+            center: ['50%', '50%'],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false,
+                  length: 100,
+                  smooth: 0.5
+                },
+                borderWidth: 3,
+                shadowBlur: 40,
+                borderColor: item.colorList,
+                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+              }
+            },
+            data: [ {
+              value: item.number,
+            }, {
+              value: item.number + 5,
+              // name: '',
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: false,
+                    position: "center"
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                  color: "rgb(8,76,71)",
+                  borderWidth: 0
+                },
+                emphasis: {
+                  color: "#104841a3",
+                  borderColor: "#00b3ff",
+                  borderWidth: 0
+                }
+              }
+            }]
+          },
+          series.push(serItem)
+      });
       let myChart = this.$echarts.init(this.$refs.chart);
       var placeHolderStyle = {
         normal: {
@@ -121,103 +173,110 @@ export default {
       };
       // 绘制图表
       myChart.setOption({
-        series: [
-          {
-            name: '值',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['92%', '97%'],
-            center: ['50%', '50%'],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false,
-                  length: 100,
-                  smooth: 0.5
-                },
-                borderWidth: 5,
-                shadowBlur: 40,
-                borderColor: "#00B3FF",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
-            },
-            data: [{
-              value: 12,
-            }, {
-              value: 4,
-              name: '',
-              itemStyle: placeHolderStyle
-            }]
-          },
-          // ------------2
-          {
-            name: '值',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['72%', '67%'],
-            center: ['50%', '50%'],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false,
-                  length: 100,
-                  smooth: 0.5
-                },
-                borderWidth: 5,
-                shadowBlur: 40,
-                borderColor: "#F1E453",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
-            },
-            data: [{
-              value: 6,
-            }, {
-              value: 4,
-              name: '',
-              itemStyle: placeHolderStyle
-            }]
-          },
-          // ------------3
-          {
-            name: '值',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['48%', '44%'],
-            center: ['50%', '50%'],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false,
-                  length: 100,
-                  smooth: 0.5
-                },
-                borderWidth: 5,
-                shadowBlur: 40,
-                borderColor: "#f85b60",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
-            },
-            data: [{
-              value: 9,
-            }, {
-              value: 44,
-              name: '',
-              itemStyle: placeHolderStyle
-            }]
-          },
-        ]
+        tooltip:{
+          trigger:'item',
+          formatter: function (params) {
+            return params.seriesName+':' +params.value
+          }
+        },
+        series: series,
+        // [
+        //   {
+        //     name: '值',
+        //     type: 'pie',
+        //     clockWise: true,
+        //     hoverAnimation: false,
+        //     radius: ['92%', '97%'],
+        //     center: ['50%', '50%'],
+        //     itemStyle: {
+        //       normal: {
+        //         label: {
+        //           show: false
+        //         },
+        //         labelLine: {
+        //           show: false,
+        //           length: 100,
+        //           smooth: 0.5
+        //         },
+        //         borderWidth: 5,
+        //         shadowBlur: 40,
+        //         borderColor: "#00B3FF",
+        //         shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+        //       }
+        //     },
+        //     data: [{
+        //       value: 12,
+        //     }, {
+        //       value: 4,
+        //       name: '',
+        //       itemStyle: placeHolderStyle
+        //     }]
+        //   },
+        //   // ------------2
+        //   {
+        //     name: '值',
+        //     type: 'pie',
+        //     clockWise: true,
+        //     hoverAnimation: false,
+        //     radius: ['72%', '67%'],
+        //     center: ['50%', '50%'],
+        //     itemStyle: {
+        //       normal: {
+        //         label: {
+        //           show: false
+        //         },
+        //         labelLine: {
+        //           show: false,
+        //           length: 100,
+        //           smooth: 0.5
+        //         },
+        //         borderWidth: 5,
+        //         shadowBlur: 40,
+        //         borderColor: "#F1E453",
+        //         shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+        //       }
+        //     },
+        //     data: [{
+        //       value: 6,
+        //     }, {
+        //       value: 4,
+        //       name: '',
+        //       itemStyle: placeHolderStyle
+        //     }]
+        //   },
+        //   // ------------3
+        //   {
+        //     name: '值',
+        //     type: 'pie',
+        //     clockWise: true,
+        //     hoverAnimation: false,
+        //     radius: ['48%', '44%'],
+        //     center: ['50%', '50%'],
+        //     itemStyle: {
+        //       normal: {
+        //         label: {
+        //           show: false
+        //         },
+        //         labelLine: {
+        //           show: false,
+        //           length: 100,
+        //           smooth: 0.5
+        //         },
+        //         borderWidth: 5,
+        //         shadowBlur: 40,
+        //         borderColor: "#f85b60",
+        //         shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+        //       }
+        //     },
+        //     data: [{
+        //       value: 9,
+        //     }, {
+        //       value: 44,
+        //       name: '',
+        //       itemStyle: placeHolderStyle
+        //     }]
+        //   },
+        // ]
       });
   
       //默认第一条高亮
diff --git a/src/main.js b/src/main.js
index 48a6923..bf9f201 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,6 +35,14 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+import moment from 'moment'
+//定义一个全局过滤器实现日期格式化
+Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
+  // 使用momentjs这个日期格式化类库实现日期的格式化功能
+  return moment(input).format(fmtstring);
+});
+
+Vue.prototype.$moment = moment
 Vue.config.productionTip = false
 //MQTT订阅
 var currentTopics = null;
diff --git a/src/views/index.vue b/src/views/index.vue
index 207ebe2..1223ea6 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -38,7 +38,7 @@
           <!-- 视频监控 -->
         <VideoSurveillanceComponents v-if="videoSurveillanceShow" @transfer="getUser"/>
         <!-- 视频监控子页面 -->
-        <VideoViewingComponents  v-if="videoViewingShow"/>
+        <VideoViewingComponents  v-if="videoViewingShow" :videoName="videoName" :videoId="videoId"/>
         <!-- 进度管理 -->
          <ProgressComponents v-if="progressShow"/>
         <!-- 安全管理 -->
@@ -111,6 +111,8 @@ export default {
   },
   data() {
     return {
+       videoName:'', //子传父的视频名称
+       videoId:'',//子传父的视频Id
         //显示首页
         indexShow:true,
          //人员管理
@@ -371,7 +373,26 @@ export default {
       }
     },
     closeindex(){
-         this.$router.push('/')
+        //  this.$router.push('/')
+          this.$confirm("确定退出登录？", "确认信息", {
+        distinguishCancelAndClose: true,
+        confirmButtonText: "退出",
+        cancelButtonText: "取消",
+      })
+        .then(() => {
+          this.$message({
+            type: "info",
+            message: "返回登录",
+          });
+          this.$router.push("/");
+          sessionStorage.clear(); //清除所有session值
+        })
+        .catch((action) => {
+          this.$message({
+            type: "info",
+            message: action === "cancel" ? "取消退出" : "停留在当前页面",
+          });
+        });
     },
     //获取当前时间
     getTime(){
@@ -401,7 +422,6 @@ export default {
                 url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
                 methods: ''
             }).then(res => {
-              console.log(res.data,'=======================');
                 this.weatherItem = res.data.lives[0];
             });
     } ,
@@ -439,7 +459,7 @@ export default {
     //获取视频子传父数据
      getUser(msg){
     //    this.username= msg
-    if(msg=='into'){
+    if(msg != null){
          this.indexShow = false
         this.personnelShow = false
         this.videoSurveillanceShow = false
@@ -447,6 +467,8 @@ export default {
         this.managementShow= false
         this.progressShow = false
         this.titLeftshow = true
+        this.videoName = msg.videoName
+        this.videoId = msg.videoId
     }
      },
     tableRowClassName({ row, rowIndex }) {
diff --git a/src/views/modelScreenComponents.vue b/src/views/modelScreenComponents.vue
index 19bb034..3059373 100644
--- a/src/views/modelScreenComponents.vue
+++ b/src/views/modelScreenComponents.vue
@@ -200,6 +200,7 @@
       </div>
     </div>
     <!-- 右侧模块1 -->
+    
     <div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }">
       <div class="titName">
         <span></span>
@@ -210,16 +211,19 @@
         <div
           style="position: relative; margin-left: 30px; margin-right: 20px"
           class="videoFat"
+          v-for="(item,index) in videoList"
+          :key="index"
         >
-          <img src="@/assets/pic/23.png" alt="" />
-          <div class="smallBox">隧道2号位摄像头</div>
+          <img :src="item.thumbnail" alt="" />
+          <div class="smallBox">{{item.equipmentName}}</div>
         </div>
-        <div style="position: relative" class="videoFat">
+        <!-- <div style="position: relative" class="videoFat">
           <img src="@/assets/pic/23.png" alt="" />
           <div class="smallBox">隧道3号位摄像头</div>
-        </div>
+        </div> -->
       </div>
     </div>
+    
     <!-- 右侧模块2 -->
     <div class="rightTwoBox" :style="{ right: boxNone ? '27px' : '-442px' }">
       <div class="titName">
@@ -352,6 +356,7 @@ import {
   getProjectStatus,
   getProjectCheckCensus,
   getProjectCheckInfo,
+  getIsImportant,
 } from "@/api/api";
 export default {
   name: "report",
@@ -363,6 +368,7 @@ export default {
   },
   data() {
     return {
+      videoList:[],//视频监控数据
       jinduList:0, //计算进度条的宽度
       progress:0, //计算进度条的值
       securityCheck: [], //安全检查统计
@@ -729,6 +735,12 @@ export default {
         }
         this.tableData = res.data.data;
       });
+      //视频监控
+      getIsImportant().then((res)=>{
+        this.videoList = Object.keys(res.data.data).map((item,index)=>{
+          return {thumbnail:res.data.data[item].thumbnail,equipmentName:res.data.data[item].equipmentName}
+        })
+      })
     });
 
     window.onresize = () => {
@@ -894,7 +906,7 @@ export default {
 }
 
 .smallBox {
-  width: 105px;
+  // width: 105px;
   height: 28px;
   background: rgba(0, 37, 35, 0.5);
   position: absolute;
@@ -1125,15 +1137,19 @@ export default {
 
 .videoBox {
   position: absolute;
-  bottom: 33px;
-  display: flex;
-
+  // bottom: 33px;
+  // display: flex;
+  // width: 100%;
+  overflow-y: auto; //重点
+  height: calc(100% - 60px);
+      top: 40px;
   .videoFat {
     background: gray;
     flex: 1;
-    width: 180px;
+    width: 165px;
     height: 183px;
-
+    float: left;
+        margin-top: 5%;
     img {
       width: 100%;
       height: 100%;
@@ -1442,10 +1458,11 @@ export default {
   position: absolute;
   top: 96px;
   right: 27px;
-  overflow-x: hidden;
+  // overflow-x: auto;
   transition: right 0.8s, height 1s;
-  overflow-y: hidden; //重点
-
+  // overflow-y: auto; //重点
+  display: flex;
+    flex-direction: column;
   @media only screen and (max-height: 1000px) {
     top: 76px;
     height: 282px;
diff --git a/src/views/personnelComponents.vue b/src/views/personnelComponents.vue
index 5586d68..4824cca 100644
--- a/src/views/personnelComponents.vue
+++ b/src/views/personnelComponents.vue
@@ -48,37 +48,40 @@
         <span></span>
       </div>
       <div class="kqjk">
-        <div class="oneKqjk">
-          <img src="@/assets/pic/23.png" alt="" />
-        </div>
         <div class="twoKqjk">
           <div class="nameMessage" v-for="(item, i) in peopleList" :key="i">
-              <div>
-                  <span style="color: #7ffffc">姓名：</span>
-                  <span style="color: #ffffff">{{ item.value }}</span>
+               <div class="oneKqjk">
+          <img :src="item.picture" alt="" />
+        </div>
+        <div class="textRight">
+            <div style="margin-top:10px">
+                  <span style="color: #7ffffc;white-space: nowrap">姓名：</span>
+                  <span style="color: #ffffff">{{ item.name }}</span>
               </div>
-              <div>
-                  <span style="color: #7ffffc">岗位：</span>
-                  <span style="color: #ffffff">{{ item.value }}</span>
+              <div style="margin-top:10px">
+                  <span style="color: #7ffffc;white-space: nowrap">岗位：</span>
+                  <span style="color: #ffffff">{{ item.post }}</span>
               </div>
-              <div>
-                  <span style="color: #7ffffc">体温：</span>
-                  <span style="color: #ffffff">{{ item.value }}</span>
+              <div style="margin-top:10px">
+                  <span style="color: #7ffffc;white-space: nowrap">体温：</span>
+                  <span style="color: #ffffff">{{ item.temperature }}</span>
               </div>
-              <div>
-                  <span style="color: #7ffffc">入场时间：</span>
-                  <span style="color: #ffffff">{{ item.value }}</span>
+              <div style="margin-top:10px">
+                  <span style="color: #7ffffc;white-space: nowrap">入场时间：</span>
+                  <span style="color: #ffffff">{{ item.time }}</span>
               </div>
-              <div>
-                  <span style="color: #7ffffc">考勤类型：</span>
-                  <span style="color: #ffffff">{{ item.value }}</span>
+              <div style="margin-top:10px">
+                  <span style="color: #7ffffc;white-space: nowrap">考勤类型：</span>
+                  <span style="color: #ffffff;">{{ item.type }}</span>
               </div>
-              <div>
-                  <span style="color: #7ffffc">打卡设备：</span>
-                  <span style="color: #ffffff">{{ item.value }}</span>
+              <div style="margin-top:10px">
+                  <span style="color: #7ffffc;white-space: nowrap">打卡设备：</span>
+                  <span style="color: #ffffff">{{ item.equipment }}</span>
               </div>
           </div>
         </div>
+              
+        </div>
       </div>
     </div>
     <!-- 右侧模块1 -->
@@ -96,15 +99,15 @@
         <div class="mesBox">
           <div>
             <span style="color: #82dddb">会议时间：</span>
-            <span style="color: #ffffff">2023-01-02</span>
+            <span style="color: #ffffff">{{meeting.date}}</span>
           </div>
           <div>
             <span style="color: #82dddb">会议类型：</span>
-            <span style="color: #ffffff">项目早会</span>
+            <span style="color: #ffffff">{{meeting.type}}</span>
           </div>
           <div>
             <span style="color: #82dddb">会议主持：</span>
-            <span style="color: #ffffff">王毅</span>
+            <span style="color: #ffffff">{{meeting.host}}</span>
           </div>
           <div>
             <span style="color: #82dddb">参会人员：</span>
@@ -115,23 +118,18 @@
                 display: inline-block;
                 white-space: pre-wrap;
               "
-              >王小龙，高红，澄澈</span
+              >{{meeting.participants}}</span
             >
           </div>
         </div>
       </div>
       <div class="meeting">会议内容</div>
       <div class="mettiogBox">
-        <div>
-          <div>1、施工部署</div>
-          <div>
-            (1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
+          <div  class="meetContent">
+              {{meeting.content}}</div>
+          <div style="height:10%;width:100%">
+             <div class="lookFor" @click="gantDialog"></div>
           </div>
-          <div>
-            (2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-          </div>
-        </div>
-        <div class="lookFor" @click="gantDialog"></div>
       </div>
     </div>
     <!-- 右侧模块2 -->
@@ -148,6 +146,7 @@
           :color-array="['#021C9F', '#01B1FF']"
           :chart-data="qyList"
           :x-axis-data="qyList.map((item) => item.name)"
+          :radarList="radarList"
         />
       </div>
     </div>
@@ -199,15 +198,15 @@
             <div class="mesBox">
               <div>
                 <span style="color: #82dddb">会议时间：</span>
-                <span style="color: #ffffff">2023-01-02</span>
+                <span style="color: #ffffff">{{meeting.date}}</span>
               </div>
               <div>
                 <span style="color: #82dddb">会议类型：</span>
-                <span style="color: #ffffff">项目早会</span>
+                <span style="color: #ffffff">{{meeting.type}}</span>
               </div>
               <div>
                 <span style="color: #82dddb">会议主持：</span>
-                <span style="color: #ffffff">王毅</span>
+                <span style="color: #ffffff">{{meeting.host}}</span>
               </div>
               <div>
                 <span style="color: #82dddb">参会人员：</span>
@@ -218,29 +217,17 @@
                     display: inline-block;
                     white-space: pre-wrap;
                   "
-                  >王小龙，高红，澄澈</span
+                  >{{meeting.participants}}</span
                 >
               </div>
             </div>
           </div>
           <div class="meet2ing">会议内容</div>
-          <div class="mettiog2Box">
-            <div>
-              <div>1、施工部署</div>
-              <div>
-                (1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
+           <div class="mettiog2Box">
+          <div  class="meetContent">
+              {{meeting.content}}
               </div>
-              <div>
-                (2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-              </div>
-              <div>
-                (3)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-              </div>
-              <div>
-                (4)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
-              </div>
-            </div>
-          </div>
+      </div>
         </div>
       </div>
     </div>
@@ -255,7 +242,7 @@ import RadarChart from "@/components/common/RadarChart";
 import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
 import Resize from "../utils/Resize.vue";
-import { getUserGroup, getGroupCensus, getAttend } from "@/api/personnel";
+import { getUserGroup, getGroupCensus, getAttend,getRecentMeeting,getMonthCensus } from "@/api/personnel";
 export default {
   name: "report",
   components: {
@@ -266,6 +253,8 @@ export default {
   },
   data() {
     return {
+        radarList:[], //站班会统计
+        meeting:{}, //站班会记录
       boxNone: true,
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
       iconPicList: [
@@ -374,7 +363,13 @@ export default {
       chartData: [],
       peopleList: [
           {
-              name:'王刚'
+              name:'史蒂芬库里',
+              post:'经理',
+              temperature:'36.7',
+              time:'2023-2-1',
+              type:'lala',
+              equipment:'一号打卡机',
+              picture:require('../assets/pic/23.png')
           }
       ],
       vdaH: 0,
@@ -413,7 +408,6 @@ export default {
       getUserGroup({
         projectId: projectId,
       }).then((res) => {
-        console.log("res.data.data", res.data.data);
         //   this.projectUser = res.data.data
         this.pieData = res.data.data;
       });
@@ -423,11 +417,26 @@ export default {
       }).then((res) => {
         this.constructionPersonnel = res.data.data;
       });
+      //考勤监控
       getAttend({
         projectId: projectId,
       }).then((res) => {
-        console.log(res.data, "=============");
+        this.peopleList = Object.keys(res.data.data).map((item,index)=>{
+            return {name:res.data.data[item].name,post:res.data.data[item].post,type:res.data.data[item].type,time:res.data.data[item].time,picture:res.data.data[item].picture,equipment:res.data.data[item].equipment,temperature:res.data.data[item].temperature}
+        })
       });
+      //站班会记录
+      getRecentMeeting({
+          projectId: projectId,
+      }).then((res)=>{
+          this.meeting = res.data.data
+      })
+      //站班会统计
+      getMonthCensus({
+          projectId: projectId,
+      }).then((res)=>{
+          this.radarList = res.data.data
+      })
     },
 
     createMqtt() {
@@ -659,13 +668,17 @@ export default {
   font-size: 14px;
   font-family: SourceHanSansCN-Medium, SourceHanSansCN;
   font-weight: 500;
-  margin-top: 10px;
-  margin-left: 18px;
-
-  span:nth-child(1) {
-    display: inline-block;
-    width: 56px;
-    text-align-last: justify;
+//   margin-top: 10px;
+//   margin-left: 18px;
+  width: 100%;
+  display: flex;
+//   span:nth-child(1) {
+//     display: inline-block;
+//     width: 56px;
+//     text-align-last: justify;
+//   }
+  .textRight{
+      width: 50%;
   }
 }
 
@@ -736,6 +749,17 @@ export default {
   color: #ffffff;
   padding: 0 22px 0 0px;
   height: 260px;
+    ::-webkit-scrollbar {
+    display: none;
+  }
+  .meetContent{
+      overflow: auto;
+      height: 90%;
+      width: 100%;
+      word-wrap: break-word;
+      word-break: break-all;
+     
+  }
 }
 
 .mettiogBox {
@@ -747,16 +771,31 @@ export default {
   font-weight: 500;
   color: #ffffff;
   padding: 0 22px 0 30px;
-  height: 260px;
-
+  height: 215px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   @media only screen and (max-height: 1000px) {
     top: 330px;
   }
+   ::-webkit-scrollbar {
+    display: none;
+  }
+  .meetContent{
+      overflow: auto;
+      height: 90%;
+      width: 100%;
+      word-wrap: break-word;
+      word-break: break-all;
+     
+  }
 }
 
 .lookFor {
   width: 57px;
-  height: 24px;
+  height: 100%;
   background: url("~@/assets/pic/view.png") no-repeat;
   background-size: 100% 100%;
   float: right;
@@ -812,7 +851,9 @@ export default {
   position: absolute;
   top: 48px;
   display: flex;
-
+  ::-webkit-scrollbar {
+    display: none ;
+  }
   @media only screen and (max-height: 1000px) {
     top: 24px;
   }
@@ -822,7 +863,7 @@ export default {
     height: 160px;
     padding: 5px;
     border: 1px solid #00ebeb;
-    margin-top: 38px;
+    margin-top: 11px;
     margin-left: 18px;
     margin-right: 14px;
 
@@ -833,10 +874,11 @@ export default {
   }
 
   .twoKqjk {
-    width: 234px;
-    height: 200px;
+    width: 100%;
+    height: 194px;
     margin-top: 25px;
     background: rgba(0, 84, 79, 0.3);
+    overflow-y: auto;
   }
 }
 
diff --git a/src/views/videoSurveillanceComponents.vue b/src/views/videoSurveillanceComponents.vue
index 6486da9..a38e9dc 100644
--- a/src/views/videoSurveillanceComponents.vue
+++ b/src/views/videoSurveillanceComponents.vue
@@ -1,7 +1,7 @@
 <template>
-    <!-- <Resize> -->
-        <div >
-            <!-- <div class="bgPicture" :style="{ height: vdaH }">
+  <!-- <Resize> -->
+  <div>
+    <!-- <div class="bgPicture" :style="{ height: vdaH }">
                 <div class="title"></div>
                 <div class="titTop">
                     <div class="titLeft">
@@ -17,826 +17,943 @@
                     </div>
                 </div>
             </div> -->
-            <!-- 左侧大模块 -->
-            <div class="scFathBox scroller" style="overflow-y: scroll;overflow-x: hidden">
-                <div class="scFathChild" v-for="(item, i) in 20" :key="i" @click="tzSp">
-                    <img src="../assets/pic/23.png" alt="" style="width:100%;height:100%">
-                    <div class="childrenBox">
-                        隧道{{ i + 1 }}号位摄像头
-                    </div>
-                </div>
-            </div>
-
-            <!-- 右侧模块1 -->
-            <div class="rightOneBox">
-                <div class="titName">
-                    <span></span>
-                    <span>统计信息</span>
-                    <span></span>
-                </div>
-                <div class="tjBox">
-                    <div style="display: flex;margin-left: 57px;">
-                        <span class="tt tt1"></span>
-                        <div class="ttgd">
-                            <span class="nameBox">固定摄像头</span>
-                            <div class="status-one">
-                                <div class="process-one"></div>
-                            </div>
-                            <span class="nameBox" style="color:#fff">在线<span
-                                    style="color:#fff;font-size: 16px;font-weight: bold;">52</span>台</span>
-                            <span class="nameBox" style="float:right;">共100台</span>
-                        </div>
-                    </div>
-                    <div style="display: flex;margin-left: 57px;margin-top: 23px;">
-                        <span class="tt tt2"></span>
-                        <div class="ttgd">
-                            <span class="nameBox">移动监控</span>
-                            <div class="status-one">
-                                <div class="process-one"></div>
-                            </div>
-                            <span class="nameBox" style="color:#fff">在线<span
-                                    style="color:#fff;font-size: 16px;font-weight: bold;">52</span>台</span>
-                            <span class="nameBox" style="float:right;">共100台</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 右侧模块2 -->
-            <div class="rightThreeBox">
-                <div class="titName">
-                    <span></span>
-                    <span>在线摄像头列表</span>
-                    <span style="width: 201px;"></span>
-                </div>
-                <div class="securityCheck">
-                    <div class="vidBox">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox" @click="tzSp"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox" style="background: none;">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox" style="background: none;">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox" style="background: none;">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox" style="background: none;">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox" style="background: none;">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                    <div class="vidBox">
-                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
-                        <div style="overflow:hidden;">
-                            <span class="playBox"></span>
-                            <span class="lookForMessage">查看</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <!-- 左侧大模块 -->
+    <div
+      class="scFathBox scroller"
+      style="overflow-y: scroll; overflow-x: hidden"
+    >
+      <div
+        class="scFathChild"
+        v-for="(item, i) in videoAllList"
+        :key="i"
+        @click="tzSp(item.equipmentName, item.id)"
+      >
+        <img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" />
+        <div class="childrenBox">
+          {{ item.equipmentName }}
         </div>
-    <!-- </Resize> -->
+      </div>
+    </div>
+
+    <!-- 右侧模块1 -->
+    <div class="rightOneBox">
+      <div class="titName">
+        <span></span>
+        <span>统计信息</span>
+        <span></span>
+      </div>
+      <div class="tjBox">
+        <div style="display: flex; margin-left: 57px">
+          <span class="tt tt1"></span>
+          <div class="ttgd">
+            <span class="nameBox">固定摄像头</span>
+            <div class="status-one">
+              <!-- <div class="process-one"> -->
+              <el-progress
+                class="process-one"
+                :text-inside="true"
+                :stroke-width="25"
+                :percentage="lockPer"
+              ></el-progress>
+              <!-- </div> -->
+            </div>
+            <div style="margin-top: 10px">
+              <span class="nameBox" style="color: #fff"
+                >在线<span
+                  style="color: #fff; font-size: 16px; font-weight: bold"
+                  >{{ onlineLock }}</span
+                >台</span
+              >
+              <span class="nameBox" style="float: right"
+                >共{{ allLock }}台</span
+              >
+            </div>
+          </div>
+        </div>
+        <div style="display: flex; margin-left: 57px; margin-top: 23px">
+          <span class="tt tt2"></span>
+          <div class="ttgd">
+            <span class="nameBox">移动监控</span>
+            <div class="status-one">
+              <!-- <div class="process-one"></div> -->
+              <el-progress
+                class="process-one"
+                :text-inside="true"
+                :stroke-width="25"
+                :percentage="movePer"
+              ></el-progress>
+            </div>
+            <div style="margin-top: 10px">
+              <span class="nameBox" style="color: #fff"
+                >在线<span
+                  style="color: #fff; font-size: 16px; font-weight: bold"
+                  >{{ onlineMove }}</span
+                >台</span
+              >
+              <span class="nameBox" style="float: right"
+                >共{{ allMove }}台</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧模块2 -->
+    <div class="rightThreeBox">
+      <div class="titName">
+        <span></span>
+        <span>在线摄像头列表</span>
+        <span style="width: 201px"></span>
+      </div>
+      <div class="securityCheck">
+        <div
+          class="vidBox"
+          :style="index % 2 != 0 ? 'background: none' : 'background: block'"
+          v-for="(item, index) in videoList"
+          :key="index"
+        >
+          <span>{{ item.name }}</span>
+          <div style="display: flex; align-items: center">
+            <!-- <span class="playBox" @click="tzSp"></span> -->
+            <img
+              :src="item.icon"
+              @click="tzSp(item.name, item.id)"
+              style="
+                width: 16px;
+                height: 16px;
+                margin-right: 5px;
+                cursor: pointer;
+              "
+            />
+            <span class="lookForMessage">{{ item.lookOver }}</span>
+          </div>
+        </div>
+        <!-- <div class="vidBox" style="background: none;">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox" style="background: none;">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox" style="background: none;">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox" style="background: none;">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox" style="background: none;">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                    <div class="vidBox">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div>
+                     <div class="vidBox">
+                        <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
+                        <div style="overflow:hidden;">
+                            <span class="playBox"></span>
+                            <span class="lookForMessage">查看</span>
+                        </div>
+                    </div> -->
+      </div>
+    </div>
+  </div>
+  <!-- </Resize> -->
 </template>
 
 <script>
 import RadarChart from "@/components/common/RadarChart";
 import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
-import Resize from '../utils/Resize.vue'
-
+import Resize from "../utils/Resize.vue";
+import { getAllCamera, getAllCameraList, getCameraCount } from "@/api/api";
 export default {
-    name: "report",
-    components: {
-        pieChart,
-        RadarChart,
-        pieDateChart,
-        Resize
+  name: "report",
+  components: {
+    pieChart,
+    RadarChart,
+    pieDateChart,
+    Resize,
+  },
+  data() {
+    return {
+      allLock: 0, //所有固定摄像头
+      allMove: 0, //所有移动摄像头
+      onlineLock: 0, //在线固定摄像头
+      onlineMove: 0, //在线移动摄像头
+      lockPer: 0, //固定摄像头占比
+      movePer: 0, //移动摄像头占比
+      videoAllList: [], //获取所有监控
+      videoList: [],
+      colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
+      iconPicList: [
+        {
+          icon: "wendu",
+          name: "温度",
+          val: "19.8",
+          tem: "℃",
+        },
+        {
+          icon: "shidu",
+          name: "湿度",
+          val: "19.8",
+          tem: "%",
+        },
+        {
+          icon: "yangqi",
+          name: "氧气值",
+          val: "19.8",
+          tem: "%VOL",
+        },
+        {
+          icon: "co2",
+          name: "二氧化碳",
+          val: "19.8",
+          tem: "%VOL",
+        },
+        {
+          icon: "ch4",
+          name: "甲烷",
+          val: "19.8",
+          tem: "ppm",
+        },
+        {
+          icon: "h2s",
+          name: "硫化氢",
+          val: "19.8",
+          tem: "ppm",
+        },
+      ],
+      tableData: [
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+      ],
+      qyList: [
+        {
+          name: "我的",
+          value: 12,
+        },
+        {
+          name: "我的",
+          value: 112,
+        },
+        {
+          name: "我的",
+          value: 132,
+        },
+      ],
+      xArry: [],
+      chartData: [],
+      peopleList: [
+        {
+          name: "姓名",
+          value: "：王刚",
+        },
+        {
+          name: "岗位",
+          value: "：项目经理",
+        },
+        {
+          name: "体温",
+          value: "：36.5℃",
+        },
+        {
+          name: "入场时间",
+          value: "：2022-11-26",
+        },
+        {
+          name: "考勤类型",
+          value: "：进场",
+        },
+        {
+          name: "打卡设备",
+          value: "：1号打卡机",
+        },
+      ],
+      vdaH: 0,
+      type: false,
+      menuType: 2,
+      numberList: [5, 5],
+      rightThreeHeightBox: 0,
+      leftOneBox: 0,
+    };
+  },
+  created() {
+    let h = document.documentElement.clientHeight || document.body.clientHeight;
+    this.vdaH = h - 0 + "px";
+  },
+  methods: {
+    goBack(val) {
+      if (val === 1) {
+        this.$router.push("/");
+      } else {
+        this.$router.go(0);
+      }
     },
-    data() {
+    tzSp(name, id) {
+      // this.$router.push('/videoViewing')
+      let videoObj = {
+        videoName: name,
+        videoId: id,
+      };
+      this.$emit("transfer", videoObj);
+    },
+    getDivHeight() {
+      const screenheight = window.innerHeight;
+      this.rightThreeHeightBox = screenheight - 440 + "px";
+      this.leftOneBox = screenheight - 187 + "px";
+      let h =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      this.vdaH = h - 0 + "px";
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === 1) {
+        return "warning-row";
+      } else if (rowIndex === 3) {
+        return "success-row";
+      }
+      return "";
+    },
+    // 菜单点击
+    childBoxClick(val) {
+      this.menuType = val;
+      if (val === 3) {
+        this.$router.push("/progress");
+      } else if (val === 1) {
+        this.$router.push("/personnel");
+      } else if (val === 4) {
+        this.$router.push("/management");
+      }
+    },
+    switchDiv() {
+      if (this.type) {
+        this.type = false;
+        this.$refs.switchBtn.style.display = "none";
+      } else {
+        this.type = true;
+        setTimeout(() => {
+          // 俩秒之后让模块消失
+          this.$refs.switchBtn.style.display = "block";
+        }, 800);
+      }
+    },
+  },
+  mounted() {
+    this.switchDiv();
+    this.getDivHeight();
+    window.addEventListener("resize", this.getDivHeight);
+    //获取所有监控
+    getAllCamera().then((res) => {
+      this.videoAllList = Object.keys(res.data.data).map((item, index) => {
         return {
-            colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
-            tableData: [
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                }
-            ],
-            qyList: [
-                {
-                    name: "我的",
-                    value: 12
-                },
-                {
-                    name: "我的",
-                    value: 112
-                },
-                {
-                    name: "我的",
-                    value: 132
-                }
-            ],
-            xArry: [],
-            chartData: [],
-            peopleList: [
-                {
-                    name: "姓名",
-                    value: "：王刚"
-                },
-                {
-                    name: "岗位",
-                    value: "：项目经理"
-                },
-                {
-                    name: "体温",
-                    value: "：36.5℃"
-                },
-                {
-                    name: "入场时间",
-                    value: "：2022-11-26"
-                },
-                {
-                    name: "考勤类型",
-                    value: "：进场"
-                },
-                {
-                    name: "打卡设备",
-                    value: "：1号打卡机"
-                },
-            ],
-            vdaH: 0,
-            type: false,
-            menuType: 2,
-            numberList: [5, 5],
-            rightThreeHeightBox: 0,
-            leftOneBox: 0
+          thumbnail: res.data.data[item].thumbnail,
+          equipmentName: res.data.data[item].equipmentName,
+          id: res.data.data[item].id,
         };
-    },
-    created() {
-        let h = document.documentElement.clientHeight || document.body.clientHeight;
-        this.vdaH = h - 0 + "px";
-    },
-    methods: {
-        goBack(val) {
-            if (val === 1) {
-                this.$router.push('/')
-            } else {
-                this.$router.go(0)
-            }
-        },
-        tzSp() {
-            // this.$router.push('/videoViewing')
-             this.$emit('transfer','into')
-        },
-        getDivHeight() {
-            const screenheight = window.innerHeight
-            this.rightThreeHeightBox = screenheight - 440 + 'px'
-            this.leftOneBox = screenheight - 187 + 'px'
-            let h = document.documentElement.clientHeight || document.body.clientHeight;
-        this.vdaH = h - 0 + "px";
-        },
-        tableRowClassName({ row, rowIndex }) {
-            if (rowIndex === 1) {
-                return "warning-row";
-            } else if (rowIndex === 3) {
-                return "success-row";
-            }
-            return "";
-        },
-        // 菜单点击
-        childBoxClick(val) {
-            this.menuType = val;
-            if (val === 3) {
-                this.$router.push('/progress')
-            } else if (val === 1) {
-                this.$router.push('/personnel')
-            } else if (val === 4) {
-                this.$router.push('/management')
-            }
-        },
-        switchDiv() {
-            if (this.type) {
-                this.type = false;
-                this.$refs.switchBtn.style.display = "none";
-            } else {
-                this.type = true;
-                setTimeout(() => {
-                    // 俩秒之后让模块消失
-                    this.$refs.switchBtn.style.display = "block";
-                }, 800)
-            }
-        }
-    },
-    mounted() {
-        this.switchDiv();
-        this.getDivHeight();
-        window.addEventListener('resize', this.getDivHeight)
-    }
+      });
+    });
+    //获取所有接口列表
+    getAllCameraList().then((res) => {
+      this.videoList = Object.keys(res.data.data).map((item, index) => {
+        return {
+          name: res.data.data[item].equipmentName,
+          icon: require("../assets/pic/play.png"),
+          lookOver: "查看",
+          id: res.data.data[item].id,
+        };
+      });
+    });
+    //获取摄像头数量接口
+    getCameraCount().then((res) => {
+      this.allLock = res.data.data.allLock;
+      this.onlineLock = res.data.data.onlineLock;
+      this.allMove = res.data.data.allMove;
+      this.onlineMove = res.data.data.onlineMove;
+      if (this.allLock != 0) {
+        this.lockPer = (this.onlineLock / this.allLock) * 100;
+      }
+      if (this.allMove != 0) {
+        this.movePer = (this.onlineMove / this.allMove) * 100;
+      }
+    });
+  },
 };
 </script>
 
 <style scoped lang="less">
 .scroller::-webkit-scrollbar {
-    width: 11px;
-    padding: 10px;
+  width: 11px;
+  padding: 10px;
 }
 
 .scroller::-webkit-scrollbar-track-piece {
-    border-radius: 4px;
-    padding: 4px;
+  border-radius: 4px;
+  padding: 4px;
 }
 
 .scroller::-webkit-scrollbar-track {
-    background: #053635;
-    border-radius: 4px;
-    opacity: 0.6;
-    border: 1px solid #0E6760;
+  background: #053635;
+  border-radius: 4px;
+  opacity: 0.6;
+  border: 1px solid #0e6760;
 }
 
 .scroller::-webkit-scrollbar-thumb {
-    width: 11em;
-    background-color: #0E6760;
-    -webkit-border-radius: 2em;
-    -moz-border-radius: 2em;
-    border-radius: 2em;
+  width: 11em;
+  background-color: #0e6760;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
 }
 
 .scFathBox {
-    width: 1375px;
-    height: 835px;
-    overflow: auto;
-    position: absolute;
-    top: 141px;
-    left: 48px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+  width: 1375px;
+  height: 835px;
+  overflow: auto;
+  position: absolute;
+  top: 141px;
+  left: 48px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
 
-    @media only screen and (max-height: 1000px) {
-        top: 121px;
-        height: 790px;
+  @media only screen and (max-height: 1000px) {
+    top: 121px;
+    height: 790px;
+  }
+
+  .scFathChild:hover {
+    transform: scale(1.1);
+  }
+
+  .scFathChild {
+    width: 311px;
+    height: 251px;
+    margin-bottom: 43px;
+    border: 1px solid rgba(0, 235, 235, 0.2);
+    padding: 3px;
+    position: relative;
+    cursor: pointer;
+    transition: All 0.2s ease-in-out;
+
+    .childrenBox {
+      // width: 123px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background: rgba(0, 37, 35, 0.2);
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      font-size: 14px;
+      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+      font-weight: 500;
+      color: #ffffff;
     }
-
-    .scFathChild:hover {
-        transform: scale(1.1);
-
-    }
-
-    .scFathChild {
-        width: 311px;
-        height: 251px;
-        margin-bottom: 43px;
-        border: 1px solid rgba(0, 235, 235, 0.2);
-        padding: 3px;
-        position: relative;
-        cursor: pointer;
-        transition: All 0.2s ease-in-out;
-
-        .childrenBox {
-            width: 123px;
-            height: 30px;
-            line-height: 30px;
-            text-align: center;
-            background: rgba(0, 37, 35, 0.2);
-            position: absolute;
-            top: 4px;
-            right: 4px;
-            font-size: 14px;
-            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-            font-weight: 500;
-            color: #FFFFFF;
-        }
-    }
-
+  }
 }
 
 .meeting {
-    width: 76px;
-    height: 29px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
-    background-size: 100% 100%;
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 305px;
-    left: 29px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding-right: 6px;
+  width: 76px;
+  height: 29px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
+    no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 305px;
+  left: 29px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding-right: 6px;
 }
 
 .mettiogBox {
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 345px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding: 0 22px 0 33px;
-    height: 260px;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 345px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding: 0 22px 0 33px;
+  height: 260px;
 }
 
 .lookFor {
-    width: 57px;
-    height: 24px;
-    background: url("~@/assets/pic/view.png") no-repeat;
-    background-size: 100% 100%;
-    float: right;
-    margin-top: 20px;
+  width: 57px;
+  height: 24px;
+  background: url("~@/assets/pic/view.png") no-repeat;
+  background-size: 100% 100%;
+  float: right;
+  margin-top: 20px;
 }
 
 .videoBox {
-    position: absolute;
-    top: 70px;
-    display: flex;
+  position: absolute;
+  top: 70px;
+  display: flex;
 
-    .oneCls {
-        width: 172px;
-        height: 146px;
-        margin-left: 33px;
-        margin-right: 18px;
+  .oneCls {
+    width: 172px;
+    height: 146px;
+    margin-left: 33px;
+    margin-right: 18px;
 
-        img {
-            width: 100%;
-            height: 100%;
-        }
+    img {
+      width: 100%;
+      height: 100%;
     }
+  }
 
-    .mesBox {
-        div {
-            font-size: 14px;
-            height: 26px;
-            font-weight: 500;
-            width: 200px;
-        }
+  .mesBox {
+    div {
+      font-size: 14px;
+      height: 26px;
+      font-weight: 500;
+      width: 200px;
     }
+  }
 }
 
-
-
-
 .bgPicture {
-    width: 100%;
-    background: url("~@/assets/pic/b1g.png") no-repeat;
-    background-size: 100% 100%;
+  width: 100%;
+  background: url("~@/assets/pic/b1g.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .title {
-    width: 100%;
-    height: 168px;
-    background: url("~@/assets/pic/title1.png") no-repeat;
-    background-size: 100% 100%;
+  width: 100%;
+  height: 168px;
+  background: url("~@/assets/pic/title1.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .titTop {
-    width: 100%;
-    position: absolute;
-    top: 9px;
-    left: 9px;
-    display: flex;
-    justify-content: space-between;
+  width: 100%;
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  display: flex;
+  justify-content: space-between;
 
-    .titLeft {
-        width: 138px;
-        height: 40px;
-        background: #025A5F;
-        line-height: 40px;
-        text-align: center;
-
-        span:nth-child(1),
-        span:nth-child(2) {
-            font-size: 14px;
-            color: #3CFFF9;
-            letter-spacing: 1px;
-            font-weight: 400;
-            cursor: pointer;
-        }
-
-        span:nth-child(3) {
-            font-size: 14px;
-            color: #fff;
-            letter-spacing: 1px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-    }
-
-    .titRight {
-        padding-top: 11px;
-        padding-right: 25px;
-        font-size: 14px;
-        font-weight: 400;
-        color: #D1FFFE;
-
-        span:nth-child(2) {
-            display: inline-block;
-            position: absolute;
-            right: 80px;
-            width: 17.5px;
-            height: 18px;
-            background: url("~@/assets/pic/sun.png") no-repeat;
-            background-size: 100% 100%;
-        }
-    }
-
-}
-
-.titName {
-    width: 100%;
-    height: 30px;
-    position: absolute;
-    top: 15px;
-
-    span:nth-child(1) {
-        display: inline-block;
-        width: 18px;
-        height: 18px;
-        background: url("~@/assets/pic/titleMark.png") no-repeat;
-        background-size: 100% 100%;
-        margin-left: 16px;
-        margin-right: 8px;
-    }
+  .titLeft {
+    width: 138px;
+    height: 40px;
+    background: #025a5f;
+    line-height: 40px;
+    text-align: center;
 
+    span:nth-child(1),
     span:nth-child(2) {
-        display: inline-block;
-        font-size: 22px;
-        font-family: ht2;
-        font-weight: bold;
-        color: #86eee7;
-        margin-right: 7px;
+      font-size: 14px;
+      color: #3cfff9;
+      letter-spacing: 1px;
+      font-weight: 400;
+      cursor: pointer;
     }
 
     span:nth-child(3) {
-        display: inline-block;
-        width: 248px;
-        height: 12px;
-        background: url("~@/assets/pic/4words.png") no-repeat;
-        background-size: 100% 100%;
+      font-size: 14px;
+      color: #fff;
+      letter-spacing: 1px;
+      font-weight: bold;
+      cursor: pointer;
     }
+  }
+
+  .titRight {
+    padding-top: 11px;
+    padding-right: 25px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #d1fffe;
+
+    span:nth-child(2) {
+      display: inline-block;
+      position: absolute;
+      right: 80px;
+      width: 17.5px;
+      height: 18px;
+      background: url("~@/assets/pic/sun.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }
 
+.titName {
+  width: 100%;
+  height: 30px;
+  position: absolute;
+  top: 15px;
 
+  span:nth-child(1) {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background: url("~@/assets/pic/titleMark.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 16px;
+    margin-right: 8px;
+  }
 
+  span:nth-child(2) {
+    display: inline-block;
+    font-size: 22px;
+    font-family: ht2;
+    font-weight: bold;
+    color: #86eee7;
+    margin-right: 7px;
+  }
+
+  span:nth-child(3) {
+    display: inline-block;
+    width: 248px;
+    height: 12px;
+    background: url("~@/assets/pic/4words.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
 
 .rightOneBox {
-    width: 424px;
-    height: 302px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
+  width: 424px;
+  height: 302px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 96px;
+  right: 27px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+
+  @media only screen and (max-height: 1000px) {
+    top: 76px;
+  }
+
+  .tjBox {
     position: absolute;
-    top: 96px;
-    right: 27px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+    top: 92px;
 
-    @media only screen and (max-height: 1000px) {
-        top: 76px;
+    .tt1 {
+      background: url("~@/assets/pic/guding.png") no-repeat;
+      background-size: 100% 100%;
+      width: 28px;
+      height: 25px;
     }
 
-    .tjBox {
-        position: absolute;
-        top: 92px;
-
-        .tt1 {
-            background: url("~@/assets/pic/guding.png") no-repeat;
-            background-size: 100% 100%;
-            width: 28px;
-            height: 25px;
-        }
-
-        .tt2 {
-            background: url("~@/assets/pic/yidong.png") no-repeat;
-            background-size: 100% 100%;
-            width: 27px;
-            height: 33px;
-
-        }
-
-        .tt {
-            display: inline-block;
-            margin-top: 26px;
-        }
-
-        .ttgd {
-            margin-left: 22px;
-
-            .nameBox {
-                font-size: 14px;
-                font-weight: 500;
-                color: #60D5CD;
-            }
-
-            .status-one {
-                width: 260px;
-                border: 1px #60D5CD solid;
-                height: 20px;
-                background: transparent; // 此时是最新的语法；
-                padding: 1px;
-                margin-top: 8px;
-
-                .process-one {
-                    background: linear-gradient(89deg, #105752, #25E8B3);
-                    width: 50%;
-                    height: 100%;
-                }
-            }
-        }
+    .tt2 {
+      background: url("~@/assets/pic/yidong.png") no-repeat;
+      background-size: 100% 100%;
+      width: 27px;
+      height: 33px;
     }
+
+    .tt {
+      display: inline-block;
+      margin-top: 26px;
+    }
+
+    .ttgd {
+      margin-left: 22px;
+
+      .nameBox {
+        font-size: 14px;
+        font-weight: 500;
+        color: #60d5cd;
+      }
+
+      .status-one {
+        width: 260px;
+        // border: 1px #60D5CD solid;
+        height: 20px;
+        background: transparent; // 此时是最新的语法；
+        padding: 1px;
+        margin-top: 4px;
+
+        .process-one {
+          width: 100%;
+          height: 100%;
+          /deep/ .el-progress-bar__inner {
+            background-color: unset;
+            background-image: linear-gradient(89deg, #105752, #25e8b3);
+            border-radius: 0;
+          }
+          /deep/ .el-progress-bar__outer {
+            border-radius: 0;
+            border: 1px #60d5cd solid;
+          }
+          /deep/ .el-progress-bar__outer {
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
 }
 
 .securityCheck {
-    width: 100%;
-    height: 80%;
-    position: absolute;
-    top: 86px;
+  width: 100%;
+  height: 80%;
+  position: absolute;
+  top: 86px;
+  overflow-y: auto;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  @media only screen and (max-height: 1000px) {
+    top: 66px;
+    // overflow: hidden;
+    overflow: auto;
+  }
 
-    @media only screen and (max-height: 1000px) {
-        top: 66px;
-        overflow: hidden;
+  .vidBox {
+    width: 354px;
+    height: 46px;
+    background: rgba(55, 142, 124, 0.3);
+    font-size: 16px;
+    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+    font-weight: 500;
+    color: #adfffe;
+    display: flex;
+    align-items: center;
+    margin-left: 30px;
+    justify-content: space-around;
+
+    .playBox {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      background: url("~@/assets/pic/play.png") no-repeat;
+      background-size: 100% 100%;
+      margin-top: 3px;
+      vertical-align: middle;
+      margin-right: 3px;
+      cursor: pointer;
     }
 
-    .vidBox {
-        width: 354px;
-        height: 46px;
-        background: rgba(55, 142, 124, 0.3);
-        font-size: 16px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        color: #ADFFFE;
-        display: flex;
-        align-items: center;
-        margin-left: 38px;
-
-
-        .playBox {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            background: url("~@/assets/pic/play.png") no-repeat;
-            background-size: 100% 100%;
-            margin-top: 3px;
-            vertical-align: middle;
-            margin-right: 3px;
-            cursor: pointer;
-        }
-
-        .lookForMessage {
-            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-            font-weight: 500;
-            color: #92FFFC;
-            vertical-align: middle
-        }
+    .lookForMessage {
+      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+      font-weight: 500;
+      color: #92fffc;
+      vertical-align: middle;
     }
+  }
 }
 
 .rightThreeBox {
-    width: 424px;
-    height: 629px;
-    background: url("~@/assets/pic/rightTwoBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 421px;
-    right: 27px;
-
-    @media only screen and (max-height: 1000px) {
-        top: 401px;
-        height: 510px;
-        overflow: hidden;
+  width: 424px;
+  height: 629px;
+  background: url("~@/assets/pic/rightTwoBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 421px;
+  right: 27px;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  @media only screen and (max-height: 1000px) {
+    top: 401px;
+    height: 510px;
+    // overflow: hidden;
+    ::-webkit-scrollbar {
+      display: none;
     }
+  }
 }
 
 .container {
-    display: flex;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
 }
 
 .box {
-    height: 784px;
-    overflow-x: hidden;
-    transition: width 1s, height 1s;
-    overflow-y: hidden; //重点
-    background: url("~@/assets/pic/closeMenu.png") no-repeat;
-    background-size: 100% 100%;
-    flex-direction: column;
+  height: 784px;
+  overflow-x: hidden;
+  transition: width 1s, height 1s;
+  overflow-y: hidden; //重点
+  background: url("~@/assets/pic/closeMenu.png") no-repeat;
+  background-size: 100% 100%;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .childBoxChoose {
+    cursor: pointer;
+    width: 166px;
+    height: 54px;
+    margin-bottom: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: url("~@/assets/pic/btn1.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 20px;
 
-    .childBoxChoose {
-        cursor: pointer;
-        width: 166px;
-        height: 54px;
-        margin-bottom: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url("~@/assets/pic/btn1.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 19px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #ffffff;
-        margin-left: 20px;
-
-        span:nth-child(1) {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-        }
-
-        span:nth-child(3) {
-            display: inline-block;
-            width: 10px;
-            height: 17px;
-            margin-left: 10px;
-            background: url("~@/assets/pic/enter1.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(1) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
     }
 
-    .childBox:hover {
-        background: url("~@/assets/pic/btn1.png") no-repeat;
+    span:nth-child(3) {
+      display: inline-block;
+      width: 10px;
+      height: 17px;
+      margin-left: 10px;
+      background: url("~@/assets/pic/enter1.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .childBox:hover {
+    background: url("~@/assets/pic/btn1.png") no-repeat;
+  }
+
+  .childBox {
+    cursor: pointer;
+    width: 166px;
+    height: 54px;
+    margin-bottom: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url("~@/assets/pic/btn2.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 20px;
+
+    span:nth-child(1) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
     }
 
-    .childBox {
-        cursor: pointer;
-        width: 166px;
-        height: 54px;
-        margin-bottom: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url("~@/assets/pic/btn2.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 19px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #ffffff;
-        margin-left: 20px;
-
-        span:nth-child(1) {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-        }
-
-        span:nth-child(3) {
-            display: inline-block;
-            width: 10px;
-            height: 17px;
-            margin-left: 10px;
-            background: url("~@/assets/pic/enter2.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(3) {
+      display: inline-block;
+      width: 10px;
+      height: 17px;
+      margin-left: 10px;
+      background: url("~@/assets/pic/enter2.png") no-repeat;
+      background-size: 100% 100%;
     }
+  }
 }
 
 .icon1 {
-    background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon2 {
-    background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon3 {
-    background: url("~@/assets/pic/jinduguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/jinduguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon4 {
-    background: url("~@/assets/pic/anquanguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/anquanguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .closeBtn {
-    position: relative;
-    top: 343px;
-    height: 53px;
-    width: 14px;
-    cursor: pointer;
-    left: -265px;
+  position: relative;
+  top: 343px;
+  height: 53px;
+  width: 14px;
+  cursor: pointer;
+  left: -265px;
 }
 
 .switchBtn {
-    position: absolute;
-    transform: rotateY(358deg);
-    left: -14px;
-    top: 44%;
-    height: 53px;
-    width: 14px;
-    background: url("~@/assets/pic/openMenu.png") no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
-    display: none;
+  position: absolute;
+  transform: rotateY(358deg);
+  left: -14px;
+  top: 44%;
+  height: 53px;
+  width: 14px;
+  background: url("~@/assets/pic/openMenu.png") no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+  display: none;
 }
 </style>
diff --git a/src/views/videoViewingComponents.vue b/src/views/videoViewingComponents.vue
index f9ab566..0130382 100644
--- a/src/views/videoViewingComponents.vue
+++ b/src/views/videoViewingComponents.vue
@@ -1,7 +1,7 @@
 <template>
-    <!-- <Resize> -->
-        <div >
-            <!-- <div class="bgPicture" :style="{ height: vdaH }">
+  <!-- <Resize> -->
+  <div>
+    <!-- <div class="bgPicture" :style="{ height: vdaH }">
                 <div class="title"></div>
                 <div class="titTop">
                     <div class="titLeft">
@@ -17,985 +17,1066 @@
                     </div>
                 </div>
             </div> -->
-            <!-- 左侧大模块-->
-            <div class="scFathBox" :style="{ height: leftOneBox }">
-                <div class="scFathChild">
-                    <img src="../assets/pic/bh.png" alt="" style="width:100%;height:100%">
-                    <div class="childrenBox">
-                        隧道1号位摄像头
-                    </div>
-                </div>
-            </div>
-            <!-- 右侧模块1 -->
-            <div class="rightOneBox">
-                <div class="titName">
-                    <span></span>
-                    <span>统计信息</span>
-                    <span></span>
-                </div>
-                <div class="tjBox">
-                    <div style="display: flex;">
-                        <span class="tt tt1"></span>
-                        <div class="ttgd">
-                            <span class="nameBox">固定摄像头</span>
-                            <div class="status-one">
-                                <div class="process-one"></div>
-                            </div>
-                            <span class="nameBox" style="color:#fff">在线<span
-                                    style="color:#fff;font-size: 16px;font-weight: bold;">52</span>台</span>
-                            <span class="nameBox" style="float:right;">共100台</span>
-                        </div>
-                    </div>
-                    <div style="display: flex;margin-top: 23px;">
-                        <span class="tt tt2"></span>
-                        <div class="ttgd">
-                            <span class="nameBox">移动监控</span>
-                            <div class="status-one">
-                                <div class="process-one"></div>
-                            </div>
-                            <span class="nameBox" style="color:#fff">在线<span
-                                    style="color:#fff;font-size: 16px;font-weight: bold;">50</span>台</span>
-                            <span class="nameBox" style="float:right;">共80台</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 右侧模块2 -->
-            <div class="rightTwoBox">
-                <div class="titName">
-                    <span></span>
-                    <span>历史监控</span>
-                    <span></span>
-                </div>
-                <div class="securityCheck">
-                    <el-form ref="form" :model="timeForm" label-width="100px">
-                        <el-form-item label="开始时间：">
-                            <el-date-picker :clearable="false" popper-class="elDatePicker" style="width:100%;"
-                                v-model="timeForm.start" type="datetime" placeholder="选择日期时间">
-                            </el-date-picker>
-                        </el-form-item>
-                        <el-form-item label="结束时间：">
-                            <el-date-picker :clearable="false" style="width:100%;" v-model="timeForm.end" type="datetime"
-                                placeholder="选择日期时间">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-form>
-                    <div class="topIcon cc"></div>
-                    <div class="bottomIcon dd"></div>
-                </div>
-                <div class="btnon" @click="lookForVideo">
-
-                </div>
-            </div>
-            <!-- 右侧模块3 -->
-            <div class="rightThreeBox">
-                <div class="titName">
-                    <span></span>
-                    <span>视频控制</span>
-                    <span></span>
-                </div>
-                <div class="kzBtn">
-                    <div :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"></div>
-                    <div @click="bfClick" :class="[isShowLookFor ? 'ciedo2One' : 'ciedoOne', bfkzBtn ? 'xsbfOne' : 'ciedoOne']">
-                    </div>
-                    <div :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"></div>
-                </div>
-                <div class="bottomTitle">隧道5号位摄像头</div>
-            </div>
+    <!-- 左侧大模块-->
+    <div class="scFathBox" :style="{ height: leftOneBox }">
+      <div class="scFathChild">
+        <img
+          src="../assets/pic/bh.png"
+          alt=""
+          style="width: 100%; height: 100%"
+        />
+        <div class="childrenBox">
+          {{ videoName }}
         </div>
+      </div>
+    </div>
+    <!-- 右侧模块1 -->
+    <div class="rightOneBox">
+      <div class="titName">
+        <span></span>
+        <span>统计信息</span>
+        <span></span>
+      </div>
+      <div class="tjBox">
+        <div style="display: flex">
+          <span class="tt tt1"></span>
+          <div class="ttgd">
+            <span class="nameBox">固定摄像头</span>
+            <div class="status-one">
+              <!-- <div class="process-one"></div> -->
+              <el-progress
+                class="process-one"
+                :text-inside="true"
+                :stroke-width="25"
+                :percentage="lockPer"
+              ></el-progress>
+            </div>
+            <div style="margin-top: 10px">
+              <span class="nameBox" style="color: #fff"
+                >在线<span
+                  style="color: #fff; font-size: 16px; font-weight: bold"
+                  >{{ onlineLock }}</span
+                >台</span
+              >
+              <span class="nameBox" style="float: right"
+                >共{{ allLock }}台</span
+              >
+            </div>
+          </div>
+        </div>
+        <div style="display: flex; margin-top: 23px">
+          <span class="tt tt2"></span>
+          <div class="ttgd">
+            <span class="nameBox">移动监控</span>
+            <div class="status-one">
+              <!-- <div class="process-one"></div> -->
+              <el-progress
+                class="process-one"
+                :text-inside="true"
+                :stroke-width="25"
+                :percentage="movePer"
+              ></el-progress>
+            </div>
+            <div style="margin-top: 10px">
+              <span class="nameBox" style="color: #fff"
+                >在线<span
+                  style="color: #fff; font-size: 16px; font-weight: bold"
+                  >{{ onlineMove }}</span
+                >台</span
+              >
+              <span class="nameBox" style="float: right"
+                >共{{ allMove }}台</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧模块2 -->
+    <div class="rightTwoBox">
+      <div class="titName">
+        <span></span>
+        <span>历史监控</span>
+        <span></span>
+      </div>
+      <div class="securityCheck">
+        <el-form ref="form" :model="timeForm" label-width="100px">
+          <el-form-item label="开始时间：">
+            <el-date-picker
+              :clearable="false"
+              popper-class="elDatePicker"
+              style="width: 100%"
+              v-model="timeForm.start"
+              type="datetime"
+              placeholder="选择日期时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="结束时间：">
+            <el-date-picker
+              :clearable="false"
+              style="width: 100%"
+              v-model="timeForm.end"
+              type="datetime"
+              placeholder="选择日期时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+        <div class="topIcon cc"></div>
+        <div class="bottomIcon dd"></div>
+      </div>
+      <div class="btnon" @click="lookForVideo"></div>
+    </div>
+    <!-- 右侧模块3 -->
+    <div class="rightThreeBox">
+      <div class="titName">
+        <span></span>
+        <span>视频控制</span>
+        <span></span>
+      </div>
+      <div class="kzBtn">
+        <div :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"></div>
+        <div
+          @click="bfClick"
+          :class="[
+            isShowLookFor ? 'ciedo2One' : 'ciedoOne',
+            bfkzBtn ? 'xsbfOne' : 'ciedoOne',
+          ]"
+        ></div>
+        <div :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"></div>
+      </div>
+      <div class="bottomTitle"> {{ videoName }}</div>
+    </div>
+  </div>
 
-    <!-- </Resize> -->
+  <!-- </Resize> -->
 </template>
 
 <script>
 import RadarChart from "@/components/common/RadarChart";
 import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
-import Resize from '../utils/Resize.vue'
-
+import Resize from "../utils/Resize.vue";
+import { getCameraCount, getCameraHistory } from "@/api/api";
 export default {
-    name: "report",
-    components: {
-        pieChart,
-        RadarChart,
-        pieDateChart,
-        Resize
+  name: "report",
+  props: {
+    videoName: {
+      type: String,
+      default: "",
     },
-    data() {
-        return {
-            timeForm: {
-                start: '',
-                end: ''
-            },
-            colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
-            tableData: [
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                },
-                {
-                    entName: "我打打死"
-                }
-            ],
-            qyList: [
-                {
-                    name: "我的",
-                    value: 12
-                },
-                {
-                    name: "我的",
-                    value: 112
-                },
-                {
-                    name: "我的",
-                    value: 132
-                }
-            ],
-            xArry: [],
-            chartData: [],
-            peopleList: [
-                {
-                    name: "姓名",
-                    value: "：王刚"
-                },
-                {
-                    name: "岗位",
-                    value: "：项目经理"
-                },
-                {
-                    name: "体温",
-                    value: "：36.5℃"
-                },
-                {
-                    name: "入场时间",
-                    value: "：2022-11-26"
-                },
-                {
-                    name: "考勤类型",
-                    value: "：进场"
-                },
-                {
-                    name: "打卡设备",
-                    value: "：1号打卡机"
-                },
-            ],
-            vdaH: 0,
-            type: false,
-            menuType: null,
-            numberList: [5, 5],
-            rightThreeHeightBox: 0,
-            leftOneBox: 0,
-            isShowLookFor: false,
-            bfkzBtn: false
+    videoId: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    pieChart,
+    RadarChart,
+    pieDateChart,
+    Resize,
+  },
+  data() {
+    return {
+      allLock: 0, //所有固定摄像头
+      allMove: 0, //所有移动摄像头
+      onlineLock: 0, //在线固定摄像头
+      onlineMove: 0, //在线移动摄像头
+      lockPer: 0, //固定摄像头占比
+      movePer: 0, //移动摄像头占比
+      timeForm: {
+        start: "",
+        end: "",
+      },
+      colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
+      iconPicList: [
+        {
+          icon: "wendu",
+          name: "温度",
+          val: "19.8",
+          tem: "℃",
+        },
+        {
+          icon: "shidu",
+          name: "湿度",
+          val: "19.8",
+          tem: "%",
+        },
+        {
+          icon: "yangqi",
+          name: "氧气值",
+          val: "19.8",
+          tem: "%VOL",
+        },
+        {
+          icon: "co2",
+          name: "二氧化碳",
+          val: "19.8",
+          tem: "%VOL",
+        },
+        {
+          icon: "ch4",
+          name: "甲烷",
+          val: "19.8",
+          tem: "ppm",
+        },
+        {
+          icon: "h2s",
+          name: "硫化氢",
+          val: "19.8",
+          tem: "ppm",
+        },
+      ],
+      tableData: [
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+        {
+          entName: "我打打死",
+        },
+      ],
+      qyList: [
+        {
+          name: "我的",
+          value: 12,
+        },
+        {
+          name: "我的",
+          value: 112,
+        },
+        {
+          name: "我的",
+          value: 132,
+        },
+      ],
+      xArry: [],
+      chartData: [],
+      peopleList: [
+        {
+          name: "姓名",
+          value: "：王刚",
+        },
+        {
+          name: "岗位",
+          value: "：项目经理",
+        },
+        {
+          name: "体温",
+          value: "：36.5℃",
+        },
+        {
+          name: "入场时间",
+          value: "：2022-11-26",
+        },
+        {
+          name: "考勤类型",
+          value: "：进场",
+        },
+        {
+          name: "打卡设备",
+          value: "：1号打卡机",
+        },
+      ],
+      vdaH: 0,
+      type: false,
+      menuType: null,
+      numberList: [5, 5],
+      rightThreeHeightBox: 0,
+      leftOneBox: 0,
+      isShowLookFor: false,
+      bfkzBtn: false,
+    };
+  },
+  created() {
+    let h = document.documentElement.clientHeight || document.body.clientHeight;
+    this.vdaH = h - 0 + "px";
+  },
+  methods: {
+    //点击播放按
+    bfClick() {
+      if (this.isShowLookFor) {
+        this.bfkzBtn = !this.bfkzBtn;
+      }
+    },
+    //点击开始查看按钮
+    lookForVideo() {
+      if (this.timeForm.start == "" && this.timeForm.end == "") {
+        this.isShowLookFor = false;
+      } else {
+        let data = {
+          equipmentId: this.videoId,
+          startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
+          endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
         };
+        getCameraHistory(data).then((res) => {
+            console.log(res.data,'qqqqqqqqqqqqqqqqqqqqqqqqqqq');
+        });
+        this.isShowLookFor = true;
+      }
     },
-    created() {
-        let h = document.documentElement.clientHeight || document.body.clientHeight;
-        this.vdaH = h - 0 + "px";
+    goBack(val) {
+      if (val === 1) {
+        this.$router.push("/");
+      } else {
+        this.$router.push("/videoSurveillance");
+      }
     },
-    methods: {
-        //点击播放按
-        bfClick() {
-            if (this.isShowLookFor) {
-                this.bfkzBtn = !this.bfkzBtn
-            }
-        },
-        //点击开始查看按钮
-        lookForVideo() {
-            if (this.timeForm.start == '' && this.timeForm.end == '') {
-                this.isShowLookFor = false
-            } else {
-                this.isShowLookFor = true;
-            }
-            console.log(this.isShowLookFor);
-        },
-        goBack(val) {
-            if (val === 1) {
-                this.$router.push('/')
-            } else {
-                this.$router.push('/videoSurveillance')
-            }
-        },
-        getDivHeight() {
-            const screenheight = window.innerHeight
-            console.log(window.innerHeight);
-            this.rightThreeHeightBox = screenheight - 780 + 'px'
-            this.leftOneBox = screenheight - 216 + 'px'
-            let h = document.documentElement.clientHeight || document.body.clientHeight;
-            this.vdaH = h - 0 + "px";
-        },
-        tableRowClassName({ row, rowIndex }) {
-            if (rowIndex === 1) {
-                return "warning-row";
-            } else if (rowIndex === 3) {
-                return "success-row";
-            }
-            return "";
-        },
-        // 菜单点击
-        childBoxClick(val) {
-            this.menuType = val;
-            if (val === 3) {
-                this.$router.push('/progress')
-            } else if (val === 2) {
-                this.$router.push('/videoSurveillance')
-            } else if (val === 4) {
-                this.$router.push('/management')
-            } else if (val === 1) {
-                this.$router.push('/personnel')
-            }
-        },
-        switchDiv() {
-            if (this.type) {
-                this.type = false;
-                this.$refs.switchBtn.style.display = "none";
-            } else {
-                this.type = true;
-                setTimeout(() => {
-                    // 俩秒之后让模块消失
-                    this.$refs.switchBtn.style.display = "block";
-                }, 800)
-            }
-        }
-
+    getDivHeight() {
+      const screenheight = window.innerHeight;
+      console.log(window.innerHeight);
+      this.rightThreeHeightBox = screenheight - 780 + "px";
+      this.leftOneBox = screenheight - 216 + "px";
+      let h =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      this.vdaH = h - 0 + "px";
     },
-    mounted() {
-        this.switchDiv();
-        this.getDivHeight();
-        window.addEventListener('resize', this.getDivHeight)
-    }
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === 1) {
+        return "warning-row";
+      } else if (rowIndex === 3) {
+        return "success-row";
+      }
+      return "";
+    },
+    // 菜单点击
+    childBoxClick(val) {
+      this.menuType = val;
+      if (val === 3) {
+        this.$router.push("/progress");
+      } else if (val === 2) {
+        this.$router.push("/videoSurveillance");
+      } else if (val === 4) {
+        this.$router.push("/management");
+      } else if (val === 1) {
+        this.$router.push("/personnel");
+      }
+    },
+    switchDiv() {
+      if (this.type) {
+        this.type = false;
+        this.$refs.switchBtn.style.display = "none";
+      } else {
+        this.type = true;
+        setTimeout(() => {
+          // 俩秒之后让模块消失
+          this.$refs.switchBtn.style.display = "block";
+        }, 800);
+      }
+    },
+  },
+  mounted() {
+    this.switchDiv();
+    this.getDivHeight();
+    window.addEventListener("resize", this.getDivHeight);
+    //获取摄像头数量接口
+    getCameraCount().then((res) => {
+      this.allLock = res.data.data.allLock;
+      this.onlineLock = res.data.data.onlineLock;
+      this.allMove = res.data.data.allMove;
+      this.onlineMove = res.data.data.onlineMove;
+      if (this.allLock != 0) {
+        this.lockPer = (this.onlineLock / this.allLock) * 100;
+      }
+      if (this.allMove != 0) {
+        this.movePer = (this.onlineMove / this.allMove) * 100;
+      }
+    });
+  },
 };
 </script>
 
 <style scoped lang="less">
 .titTop {
-    width: 100%;
-    position: absolute;
-    top: 9px;
-    left: 9px;
-    display: flex;
-    justify-content: space-between;
+  width: 100%;
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  display: flex;
+  justify-content: space-between;
 
-    .titLeft {
-        width: 138px;
-        height: 40px;
-        background: #025A5F;
-        line-height: 40px;
-        cursor: pointer;
-        text-align: center;
+  .titLeft {
+    width: 138px;
+    height: 40px;
+    background: #025a5f;
+    line-height: 40px;
+    cursor: pointer;
+    text-align: center;
 
-        span:nth-child(1),
-        span:nth-child(2) {
-            font-size: 14px;
-            color: #3CFFF9;
-            letter-spacing: 1px;
-            font-weight: 400;
-            cursor: pointer;
-        }
-
-        span:nth-child(3) {
-            font-size: 14px;
-            color: #fff;
-            letter-spacing: 1px;
-            font-weight: bold;
-
-        }
+    span:nth-child(1),
+    span:nth-child(2) {
+      font-size: 14px;
+      color: #3cfff9;
+      letter-spacing: 1px;
+      font-weight: 400;
+      cursor: pointer;
     }
 
-    .titRight {
-        padding-top: 11px;
-        padding-right: 25px;
-        font-size: 14px;
-        font-weight: 400;
-        color: #D1FFFE;
-
-        span:nth-child(2) {
-            display: inline-block;
-            position: absolute;
-            right: 80px;
-            width: 17.5px;
-            height: 18px;
-            background: url("~@/assets/pic/sun.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(3) {
+      font-size: 14px;
+      color: #fff;
+      letter-spacing: 1px;
+      font-weight: bold;
     }
+  }
 
+  .titRight {
+    padding-top: 11px;
+    padding-right: 25px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #d1fffe;
+
+    span:nth-child(2) {
+      display: inline-block;
+      position: absolute;
+      right: 80px;
+      width: 17.5px;
+      height: 18px;
+      background: url("~@/assets/pic/sun.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }
 
 // 隐藏小时钟图标
 /deep/ .el-date-editor {
-    position: relative;
+  position: relative;
 
-    .el-input__prefix {
-        display: none;
-    }
+  .el-input__prefix {
+    display: none;
+  }
 }
 
 .scFathBox {
-    width: 1375px;
-    position: absolute;
-    top: 152px;
-    left: 48px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+  width: 1375px;
+  position: absolute;
+  top: 152px;
+  left: 48px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
 
-    .scFathChild {
-        width: 100%;
-        height: 100%;
-        border: 1px solid rgba(0, 235, 235, 0.2);
-        padding: 3px;
-        position: relative;
+  .scFathChild {
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(0, 235, 235, 0.2);
+    padding: 3px;
+    position: relative;
 
-        .childrenBox {
-            width: 123px;
-            height: 30px;
-            line-height: 30px;
-            text-align: center;
-            background: rgba(0, 37, 35, 0.2);
-            position: absolute;
-            top: 4px;
-            right: 4px;
-            font-size: 14px;
-            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-            font-weight: 500;
-            color: #FFFFFF;
-        }
+    .childrenBox {
+      // width: 123px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background: rgba(0, 37, 35, 0.2);
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      font-size: 14px;
+      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+      font-weight: 500;
+      color: #ffffff;
     }
+  }
 }
 
 .meeting {
-    width: 76px;
-    height: 29px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
-    background-size: 100% 100%;
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 305px;
-    left: 29px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding-right: 6px;
+  width: 76px;
+  height: 29px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
+    no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 305px;
+  left: 29px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding-right: 6px;
 }
 
 .mettiogBox {
-    text-align: center;
-    line-height: 29px;
-    position: absolute;
-    top: 345px;
-    font-size: 14px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-    font-weight: 500;
-    color: #FFFFFF;
-    padding: 0 22px 0 33px;
-    height: 260px;
+  text-align: center;
+  line-height: 29px;
+  position: absolute;
+  top: 345px;
+  font-size: 14px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  font-weight: 500;
+  color: #ffffff;
+  padding: 0 22px 0 33px;
+  height: 260px;
 }
 
 .lookFor {
-    width: 57px;
-    height: 24px;
-    background: url("~@/assets/pic/view.png") no-repeat;
-    background-size: 100% 100%;
-    float: right;
-    margin-top: 20px;
+  width: 57px;
+  height: 24px;
+  background: url("~@/assets/pic/view.png") no-repeat;
+  background-size: 100% 100%;
+  float: right;
+  margin-top: 20px;
 }
 
 .videoBox {
-    position: absolute;
-    top: 70px;
-    display: flex;
+  position: absolute;
+  top: 70px;
+  display: flex;
 
-    .oneCls {
-        width: 172px;
-        height: 146px;
-        margin-left: 33px;
-        margin-right: 18px;
+  .oneCls {
+    width: 172px;
+    height: 146px;
+    margin-left: 33px;
+    margin-right: 18px;
 
-        img {
-            width: 100%;
-            height: 100%;
-        }
+    img {
+      width: 100%;
+      height: 100%;
     }
+  }
 
-    .mesBox {
-        div {
-            font-size: 14px;
-            height: 26px;
-            font-weight: 500;
-            width: 200px;
-        }
+  .mesBox {
+    div {
+      font-size: 14px;
+      height: 26px;
+      font-weight: 500;
+      width: 200px;
     }
+  }
 }
 
 .bgPicture {
-    width: 100%;
-    background: url("~@/assets/pic/BG.jpg") no-repeat;
-    background-size: 100% 100%;
+  width: 100%;
+  background: url("~@/assets/pic/BG.jpg") no-repeat;
+  background-size: 100% 100%;
 }
 
 .title {
-    width: 100%;
-    height: 168px;
-    background: url("~@/assets/pic/title1.png") no-repeat;
-    background-size: 100% 100%;
+  width: 100%;
+  height: 168px;
+  background: url("~@/assets/pic/title1.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .titName {
-    width: 100%;
-    height: 30px;
-    position: absolute;
-    top: 15px;
+  width: 100%;
+  height: 30px;
+  position: absolute;
+  top: 15px;
 
-    span:nth-child(1) {
-        display: inline-block;
-        width: 18px;
-        height: 18px;
-        background: url("~@/assets/pic/titleMark.png") no-repeat;
-        background-size: 100% 100%;
-        margin-left: 16px;
-        margin-right: 8px;
-    }
+  span:nth-child(1) {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background: url("~@/assets/pic/titleMark.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 16px;
+    margin-right: 8px;
+  }
 
-    span:nth-child(2) {
-        display: inline-block;
-        font-size: 22px;
-        font-family: ht2;
-        font-weight: bold;
-        color: #86eee7;
-        margin-right: 7px;
-    }
+  span:nth-child(2) {
+    display: inline-block;
+    font-size: 22px;
+    font-family: ht2;
+    font-weight: bold;
+    color: #86eee7;
+    margin-right: 7px;
+  }
 
-    span:nth-child(3) {
-        display: inline-block;
-        width: 248px;
-        height: 12px;
-        background: url("~@/assets/pic/4words.png") no-repeat;
-        background-size: 100% 100%;
-    }
+  span:nth-child(3) {
+    display: inline-block;
+    width: 248px;
+    height: 12px;
+    background: url("~@/assets/pic/4words.png") no-repeat;
+    background-size: 100% 100%;
+  }
 }
 
 .rightOneBox {
-    width: 422px;
-    height: 300px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 97px;
-    right: 27px;
-    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+  width: 422px;
+  height: 300px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 97px;
+  right: 27px;
+  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
 
-    @media only screen and (max-height: 960px) {
-        height: 270px;
-        top: 77px;
-
-        .tjBox {
-            top: 64px;
-        }
-    }
+  @media only screen and (max-height: 969px) {
+    height: 270px;
+    top: 77px;
 
     .tjBox {
-        position: absolute;
-        top: 92px;
-        left: 56px;
-
-        @media only screen and (max-height: 960px) {
-            top: 64px;
-        }
-
-        .tt1 {
-            background: url("~@/assets/pic/guding.png") no-repeat;
-            background-size: 100% 100%;
-            width: 28px;
-            height: 25px;
-        }
-
-        .tt2 {
-            background: url("~@/assets/pic/yidong.png") no-repeat;
-            background-size: 100% 100%;
-            width: 27px;
-            height: 33px;
-
-        }
-
-        .tt {
-            display: inline-block;
-            margin-top: 26px;
-        }
-
-        .ttgd {
-            margin-left: 22px;
-
-            .nameBox {
-                font-size: 14px;
-                font-weight: 500;
-                color: #60D5CD;
-            }
-
-            .status-one {
-                width: 260px;
-                border: 1px #60D5CD solid;
-                height: 20px;
-                background: transparent; // 此时是最新的语法；
-                padding: 1px;
-                margin-top: 8px;
-
-                .process-one {
-                    background: linear-gradient(89deg, #105752, #25E8B3);
-                    width: 50%;
-                    height: 100%;
-                }
-            }
-        }
+      top: 64px;
     }
+  }
+
+  .tjBox {
+    position: absolute;
+    top: 92px;
+    left: 56px;
+
+    @media only screen and (max-height: 969px) {
+      top: 64px;
+    }
+
+    .tt1 {
+      background: url("~@/assets/pic/guding.png") no-repeat;
+      background-size: 100% 100%;
+      width: 28px;
+      height: 25px;
+    }
+
+    .tt2 {
+      background: url("~@/assets/pic/yidong.png") no-repeat;
+      background-size: 100% 100%;
+      width: 27px;
+      height: 33px;
+    }
+
+    .tt {
+      display: inline-block;
+      margin-top: 26px;
+    }
+
+    .ttgd {
+      margin-left: 22px;
+
+      .nameBox {
+        font-size: 14px;
+        font-weight: 500;
+        color: #60d5cd;
+      }
+
+      .status-one {
+        width: 260px;
+        // border: 1px #60D5CD solid;
+        height: 20px;
+        background: transparent; // 此时是最新的语法；
+        padding: 1px;
+        // margin-top: 8px;
+
+        .process-one {
+          // background: linear-gradient(89deg, #105752, #25E8B3);
+          width: 100%;
+          height: 100%;
+          /deep/ .el-progress-bar__inner {
+            background-color: unset;
+            background-image: linear-gradient(89deg, #105752, #25e8b3);
+            border-radius: 0;
+          }
+          /deep/ .el-progress-bar__outer {
+            border-radius: 0;
+            border: 1px #60d5cd solid;
+          }
+          /deep/ .el-progress-bar__outer {
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
 }
 
 .kzBtn {
-    display: flex;
-    position: absolute;
-    top: 107px;
-    display: flex;
-    align-items: center;
-    left: 50%;
-    transform: translateX(-50%);
+  display: flex;
+  position: absolute;
+  top: 107px;
+  display: flex;
+  align-items: center;
+  left: 50%;
+  transform: translateX(-50%);
 
-    @media only screen and (max-height: 960px) {
-        top: 97px;
-    }
+  @media only screen and (max-height: 969px) {
+    top: 97px;
+  }
 
-    .viedoOne {
-        width: 60px;
-        height: 60px;
-        background-size: 100% 100%;
-        cursor: pointer;
-        background: url("~@/assets/pic/keleft.png") no-repeat;
-    }
+  .viedoOne {
+    width: 60px;
+    height: 60px;
+    background-size: 100% 100%;
+    cursor: pointer;
+    background: url("~@/assets/pic/keleft.png") no-repeat;
+  }
 
-    .viedoOne:hover {
-        width: 60px;
-        height: 60px;
-        background-size: 100% 100%;
-        cursor: pointer;
-        background: url("~@/assets/pic/jgleft.png") no-repeat;
-    }
+  .viedoOne:hover {
+    width: 60px;
+    height: 60px;
+    background-size: 100% 100%;
+    cursor: pointer;
+    background: url("~@/assets/pic/jgleft.png") no-repeat;
+  }
 
-    .viedo2One {
-        width: 60px;
-        height: 60px;
-        background-size: 100% 100%;
-        background: url("~@/assets/pic/notleft.png") no-repeat;
-        cursor: pointer;
-    }
+  .viedo2One {
+    width: 60px;
+    height: 60px;
+    background-size: 100% 100%;
+    background: url("~@/assets/pic/notleft.png") no-repeat;
+    cursor: pointer;
+  }
 
-    .xsbfOne {
-        width: 107px;
-        height: 107px;
-        background: url("~@/assets/pic/kezt.png") no-repeat !important;
-        background-size: 100% 100%;
-        margin: 0 28px;
-        cursor: pointer;
-    }
+  .xsbfOne {
+    width: 107px;
+    height: 107px;
+    background: url("~@/assets/pic/kezt.png") no-repeat !important;
+    background-size: 100% 100%;
+    margin: 0 28px;
+    cursor: pointer;
+  }
 
-    .xsbfOne:hover {
-        width: 107px;
-        height: 107px;
-        background: url("~@/assets/pic/jgzt.png") no-repeat !important;
-        background-size: 100% 100%;
-        margin: 0 28px;
-        cursor: pointer;
-    }
+  .xsbfOne:hover {
+    width: 107px;
+    height: 107px;
+    background: url("~@/assets/pic/jgzt.png") no-repeat !important;
+    background-size: 100% 100%;
+    margin: 0 28px;
+    cursor: pointer;
+  }
 
-    .xsbf2One {
-        width: 107px;
-        height: 107px;
-        background: url("~@/assets/pic/notbf.png") no-repeat;
-        background-size: 100% 100%;
-        margin: 0 28px;
-        cursor: pointer;
-    }
+  .xsbf2One {
+    width: 107px;
+    height: 107px;
+    background: url("~@/assets/pic/notbf.png") no-repeat;
+    background-size: 100% 100%;
+    margin: 0 28px;
+    cursor: pointer;
+  }
 
+  .ciedoOne {
+    width: 107px;
+    height: 107px;
+    background: url("~@/assets/pic/notbf.png") no-repeat;
+    background-size: 100% 100%;
+    margin: 0 28px;
+    cursor: pointer;
+  }
 
+  .ciedo2One {
+    width: 107px;
+    height: 107px;
+    background: url("~@/assets/pic/play1.png") no-repeat;
+    background-size: 100% 100%;
+    margin: 0 28px;
+    cursor: pointer;
+  }
 
-    .ciedoOne {
-        width: 107px;
-        height: 107px;
-        background: url("~@/assets/pic/notbf.png") no-repeat;
-        background-size: 100% 100%;
-        margin: 0 28px;
-        cursor: pointer;
-    }
+  .ciedo2One:hover {
+    width: 107px;
+    height: 107px;
+    background-size: 100% 100%;
+    cursor: pointer;
+    background: url("~@/assets/pic/jgbf.png") no-repeat;
+  }
 
-    .ciedo2One {
-        width: 107px;
-        height: 107px;
-        background: url("~@/assets/pic/play1.png") no-repeat;
-        background-size: 100% 100%;
-        margin: 0 28px;
-        cursor: pointer;
-    }
-
-    .ciedo2One:hover {
-        width: 107px;
-        height: 107px;
-        background-size: 100% 100%;
-        cursor: pointer;
-        background: url("~@/assets/pic/jgbf.png") no-repeat;
-    }
-
-    .diedoOne {
-        width: 60px;
-        height: 60px;
-        background: url("~@/assets/pic/notright.png") no-repeat;
-        background-size: 100% 100%;
-        cursor: pointer;
-    }
-
-    .diedo2One {
-        width: 60px;
-        height: 60px;
-        background: url("~@/assets/pic/keright.png") no-repeat;
-        background-size: 100% 100%;
-        cursor: pointer;
-    }
-
-    .diedo2One:hover {
-        width: 60px;
-        height: 60px;
-        background-size: 100% 100%;
-        cursor: pointer;
-        background: url("~@/assets/pic/jgright.png") no-repeat;
-    }
+  .diedoOne {
+    width: 60px;
+    height: 60px;
+    background: url("~@/assets/pic/notright.png") no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
 
+  .diedo2One {
+    width: 60px;
+    height: 60px;
+    background: url("~@/assets/pic/keright.png") no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
 
+  .diedo2One:hover {
+    width: 60px;
+    height: 60px;
+    background-size: 100% 100%;
+    cursor: pointer;
+    background: url("~@/assets/pic/jgright.png") no-repeat;
+  }
 }
 
 .btnon {
-    width: 106px;
-    height: 48px;
-    background: url("~@/assets/pic/monitor.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    bottom: 37px;
-    left: 50%;
-    transform: translateX(-50%);
-    cursor: pointer;
+  width: 106px;
+  height: 48px;
+  background: url("~@/assets/pic/monitor.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  bottom: 37px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: pointer;
 
-    @media only screen and (max-height: 960px) {
-        bottom: 20px;
-    }
+  @media only screen and (max-height: 969px) {
+    bottom: 20px;
+  }
 }
 
 .btnon:hover {
-    width: 106px;
-    height: 48px;
-    background: url("~@/assets/pic/jgck.png") no-repeat;
-    background-size: 100% 100%;
-
+  width: 106px;
+  height: 48px;
+  background: url("~@/assets/pic/jgck.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .cc {
-    top: 10px;
+  top: 10px;
 }
 
 .dd {
-    top: 72px;
+  top: 72px;
 }
 
 .topIcon,
 .bottomIcon {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    background: url("~@/assets/pic/calendar.png") no-repeat;
-    background-size: 100% 100%;
-    right: 10px;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  background: url("~@/assets/pic/calendar.png") no-repeat;
+  background-size: 100% 100%;
+  right: 10px;
 }
 
 .securityCheck {
-    width: 320px;
-    position: absolute;
-    top: 80px;
-    right: 66px;
+  width: 320px;
+  position: absolute;
+  top: 80px;
+  right: 66px;
 
-    .vidBox {
-        width: 345px;
-        height: 46px;
-        background: #378E7C;
-        font-size: 16px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        color: #ADFFFE;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        margin: 0 auto;
+  .vidBox {
+    width: 345px;
+    height: 46px;
+    background: #378e7c;
+    font-size: 16px;
+    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+    font-weight: 500;
+    color: #adfffe;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: 0 auto;
 
-        .playBox {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            background: url("~@/assets/pic/play.png") no-repeat;
-            background-size: 100% 100%;
-            margin-top: 3px;
-            vertical-align: middle
-        }
-
-        .lookForMessage {
-            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-            font-weight: 500;
-            color: #92FFFC;
-            vertical-align: middle
-        }
+    .playBox {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      background: url("~@/assets/pic/play.png") no-repeat;
+      background-size: 100% 100%;
+      margin-top: 3px;
+      vertical-align: middle;
     }
+
+    .lookForMessage {
+      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+      font-weight: 500;
+      color: #92fffc;
+      vertical-align: middle;
+    }
+  }
 }
 
 .rightTwoBox {
-    width: 422px;
-    height: 299px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 422px;
-    right: 27px;
-
-    @media only screen and (max-height: 960px) {
-        top: 366px;
-        height: 270px;
-    }
+  width: 422px;
+  height: 299px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 422px;
+  right: 27px;
 
+  @media only screen and (max-height: 969px) {
+    top: 366px;
+    height: 270px;
+  }
 }
 
 .rightThreeBox {
-    width: 422px;
-    height: 299px;
-    background: url("~@/assets/pic/rightBox.png") no-repeat;
-    background-size: 100% 100%;
+  width: 422px;
+  height: 299px;
+  background: url("~@/assets/pic/rightBox.png") no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 746px;
+  right: 27px;
+  @media only screen and (max-height: 969px) {
+    height: 270px;
+    top: 654px;
+  }
+  .bottomTitle {
+    width: 100%;
+    height: 36px;
+    background: rgba(0, 37, 35, 0.5);
     position: absolute;
-    top: 746px;
-    right: 27px;
+    bottom: 31px;
+    // left: 142px;
+    font-size: 16px;
+    text-align: center;
+    line-height: 36px;
+    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+    font-weight: 500;
+    color: #ffffff;
 
-    .bottomTitle {
-        width: 138px;
-        height: 36px;
-        background: rgba(0, 37, 35, 0.5);
-        position: absolute;
-        bottom: 31px;
-        left: 142px;
-        font-size: 16px;
-        text-align: center;
-        line-height: 36px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        color: #FFFFFF;
-
-        @media only screen and (max-height: 960px) {
-            bottom: 15px;
-        }
-    }
-
-    @media only screen and (max-height: 960px) {
-        height: 270px;
-        top: 654px;
+    @media only screen and (max-height: 969px) {
+      bottom: 15px;
     }
+  }
 }
 
 .container {
-    display: flex;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
 }
 
 .box {
-    height: 784px;
-    overflow-x: hidden;
-    transition: width 1s, height 1s;
-    overflow-y: hidden; //重点
-    background: url("~@/assets/pic/closeMenu.png") no-repeat;
-    background-size: 100% 100%;
-    flex-direction: column;
+  height: 784px;
+  overflow-x: hidden;
+  transition: width 1s, height 1s;
+  overflow-y: hidden; //重点
+  background: url("~@/assets/pic/closeMenu.png") no-repeat;
+  background-size: 100% 100%;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .childBoxChoose {
+    cursor: pointer;
+    width: 166px;
+    height: 54px;
+    margin-bottom: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: url("~@/assets/pic/btn1.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 20px;
 
-    .childBoxChoose {
-        cursor: pointer;
-        width: 166px;
-        height: 54px;
-        margin-bottom: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url("~@/assets/pic/btn1.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 19px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #ffffff;
-        margin-left: 20px;
-
-        span:nth-child(1) {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-        }
-
-        span:nth-child(3) {
-            display: inline-block;
-            width: 10px;
-            height: 17px;
-            margin-left: 10px;
-            background: url("~@/assets/pic/enter1.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(1) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
     }
 
-    .childBox:hover {
-        background: url("~@/assets/pic/btn1.png") no-repeat;
+    span:nth-child(3) {
+      display: inline-block;
+      width: 10px;
+      height: 17px;
+      margin-left: 10px;
+      background: url("~@/assets/pic/enter1.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .childBox:hover {
+    background: url("~@/assets/pic/btn1.png") no-repeat;
+  }
+
+  .childBox {
+    cursor: pointer;
+    width: 166px;
+    height: 54px;
+    margin-bottom: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url("~@/assets/pic/btn2.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 19px;
+    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 20px;
+
+    span:nth-child(1) {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
     }
 
-    .childBox {
-        cursor: pointer;
-        width: 166px;
-        height: 54px;
-        margin-bottom: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url("~@/assets/pic/btn2.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 19px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #ffffff;
-        margin-left: 20px;
-
-        span:nth-child(1) {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-right: 8px;
-        }
-
-        span:nth-child(3) {
-            display: inline-block;
-            width: 10px;
-            height: 17px;
-            margin-left: 10px;
-            background: url("~@/assets/pic/enter2.png") no-repeat;
-            background-size: 100% 100%;
-        }
+    span:nth-child(3) {
+      display: inline-block;
+      width: 10px;
+      height: 17px;
+      margin-left: 10px;
+      background: url("~@/assets/pic/enter2.png") no-repeat;
+      background-size: 100% 100%;
     }
+  }
 }
 
 .icon1 {
-    background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon2 {
-    background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon3 {
-    background: url("~@/assets/pic/jinduguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/jinduguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .icon4 {
-    background: url("~@/assets/pic/anquanguanli.png") no-repeat;
-    background-size: 100% 100%;
+  background: url("~@/assets/pic/anquanguanli.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .closeBtn {
-    position: relative;
-    top: 343px;
-    height: 53px;
-    width: 14px;
-    cursor: pointer;
-    left: -265px;
+  position: relative;
+  top: 343px;
+  height: 53px;
+  width: 14px;
+  cursor: pointer;
+  left: -265px;
 }
 
 .switchBtn {
-    position: absolute;
-    transform: rotateY(358deg);
-    left: -14px;
-    top: 44%;
-    height: 53px;
-    width: 14px;
-    background: url("~@/assets/pic/openMenu.png") no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
+  position: absolute;
+  transform: rotateY(358deg);
+  left: -14px;
+  top: 44%;
+  height: 53px;
+  width: 14px;
+  background: url("~@/assets/pic/openMenu.png") no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
 }
 </style>
 <style  lang="less" >
 .securityCheck {
-    .el-form-item__label {
-        color: #fff;
-        font-weight: 500;
-    }
+  .el-form-item__label {
+    color: #fff;
+    font-weight: 500;
+  }
 
-    .el-input--prefix .el-input__inner {
-        background: #002220 !important;
-        ;
-        border-radius: 2px !important;
-        ;
-        border: 1px solid #31A49C !important;
-        ;
-        color: #fff;
-    }
+  .el-input--prefix .el-input__inner {
+    background: #002220 !important;
+    border-radius: 2px !important;
+    border: 1px solid #31a49c !important;
+    color: #fff;
+  }
 
-    .el-picker-panelr {
-        margin-left: 300px;
-    }
+  .el-picker-panelr {
+    margin-left: 300px;
+  }
 }
 </style>