From 140a53a7732a72e55026e0149dfc0a5e65550f67 Mon Sep 17 00:00:00 2001
From: jxj_gmj <1351094127@qq.com>
Date: Fri, 9 Dec 2022 09:07:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E5=85=A8=E6=95=99=E8=82=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fourEngin/security/centerTop.vue          | 120 +++++++++-----
 .../fourEngin/security/leftBottom.vue         |  54 +++++--
 .../fourEngin/security/leftTop.vue            |  98 ++++++++----
 .../fourEngin/security/rightTop.vue           | 149 +++++++++++++++++-
 .../security/rightTopComponents/aiDevList.vue |  84 ++++++++++
 .../rightTopComponents/electrical.vue         |  86 ++++++++++
 .../rightTopComponents/environmentDevList.vue |  85 ++++++++++
 .../rightTopComponents/lifterList.vue         |  90 +++++++++++
 .../security/rightTopComponents/towerList.vue |  94 +++++++++++
 .../rightTopComponents/videoItemList.vue      |  99 ++++++++++++
 10 files changed, 869 insertions(+), 90 deletions(-)
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightTopComponents/aiDevList.vue
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightTopComponents/electrical.vue
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightTopComponents/environmentDevList.vue
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightTopComponents/lifterList.vue
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightTopComponents/towerList.vue
 create mode 100644 src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue

diff --git a/src/views/projectAdmin/fourEngin/security/centerTop.vue b/src/views/projectAdmin/fourEngin/security/centerTop.vue
index f5e457f1..a6c20bf4 100644
--- a/src/views/projectAdmin/fourEngin/security/centerTop.vue
+++ b/src/views/projectAdmin/fourEngin/security/centerTop.vue
@@ -6,15 +6,15 @@
 
         <div class="textDivBox">
           <div class="textDiv">
-            <span>67</span>
+            <span>{{threeLevel.projectWorkerNumber}}</span>
             <p>项目总人数</p>
           </div>
           <div class="textDiv">
-            <span>51</span>
+            <span>{{threeLevel.projectTrainWorkerNumber}}</span>
             <p>项目培训人数</p>
           </div>
           <div class="textDiv">
-            <span>46.79%</span>
+            <span>{{threeLevel.projectTrainRatio}}%</span>
             <p>项目培训率</p>
           </div>
         </div>
@@ -28,11 +28,14 @@
           </div>
           <div class="tbody">
             <vue-scroll>
-              <div class="row" v-for="i in 20" :key="i">
-                <div class="td">每日安全交底</div>
-                <div class="td">缪维彪</div>
-                <div class="td">45</div>
-                <div class="td">2022-09-28</div>
+              <div class="row" v-for="i in threeLevel.workerSafeEducationList" :key="i.id">
+                <div class="td">{{i.eduCourseName}}</div>
+                <div class="td">{{i.eduTeacher}}</div>
+                <div class="td">{{(i.eduClasshour!=0?i.eduClasshour/60:0)}}</div>
+                <div class="td">{{i.eduTime}}</div>
+              </div>
+              <div class="row" v-if="threeLevel.workerSafeEducationList.length==0">
+                <div style="font-size:14px;color: #999;text-align: center;width: 100%;">暂无数据</div>
               </div>
             </vue-scroll>
           </div>
@@ -43,11 +46,11 @@
 
         <div class="textDivBox">
           <div class="textDiv">
-            <span>3次</span>
+            <span>{{shouting.allCount}}</span>
             <p>今日班前喊话次数</p>
           </div>
           <div class="textDiv">
-            <span>12</span>
+            <span>{{shouting.todayCount}}</span>
             <p>班前喊话次数</p>
           </div>
         </div>
@@ -61,11 +64,14 @@
           </div>
           <div class="tbody">
             <vue-scroll>
-              <div class="row" v-for="(item,index) in imgList" :key="index">
-                <div class="td">{{item.time}}</div>
-                <div class="td">{{item.names}}</div>
-                <div class="td">{{item.team}}</div>
-                <div class="td"><img :src="item.src" /></div>
+              <div class="row" v-for="(item,index) in shouting.shoutInfoList" :key="index">
+                <div class="td">{{item.shoutTime}}</div>
+                <div class="td">{{item.dutyUserName}}</div>
+                <div class="td">{{item.teamName}}</div>
+                <div class="td"><img :src="item.shoutImage" /></div>
+              </div>
+              <div class="row" v-if="shouting.shoutInfoList.length==0">
+                <div style="font-size:14px;color: #999;text-align: center;width: 100%;">暂无数据</div>
               </div>
             </vue-scroll>
           </div>
@@ -78,21 +84,21 @@
           安<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">全交</span>底
         </div>
 
-        <div class="textDivBox">
+        <div  class="textDivBox">
           <div class="textDiv">
-            <span>67次</span>
+            <span>{{safetyDisclosure.trainNumber}}次</span>
             <p>培训次数</p>
           </div>
           <div class="textDiv">
-            <span>23次</span>
+            <span>{{safetyDisclosure.specialOperationsNumber}}次</span>
             <p>特种作业</p>
           </div>
           <div class="textDiv">
-            <span>11次</span>
+            <span>{{safetyDisclosure.disclosureInRainySeasonNumber}}次</span>
             <p>雨季交底</p>
           </div>
           <div class="textDiv">
-            <span>26次</span>
+            <span>{{safetyDisclosure.electricityDisclosureNumber}}次</span>
             <p>用电交底</p>
           </div>
         </div>
@@ -106,11 +112,14 @@
           </div>
           <div class="tbody">
             <vue-scroll>
-              <div class="row" v-for="i in 20" :key="i">
-                <div class="td">每日安全交底</div>
-                <div class="td">钢筋交底</div>
-                <div class="td">缪维彪</div>
-                <div class="td">2022-09-28</div>
+              <div class="row" v-for="i in safetyDisclosure.workerSafeEducationList" :key="i.id">
+                <div class="td">{{i.eduCourseName}}</div>
+                <div class="td">{{i.eduTypeList[i.eduType]}}</div>
+                <div class="td">{{i.eduTeacher}}</div>
+                <div class="td">{{i.eduTime}}</div>
+              </div>
+              <div class="row" v-if="safetyDisclosure.workerSafeEducationList.length==0">
+                <div style="font-size:14px;color: #999;text-align: center;width: 100%;">暂无数据</div>
               </div>
             </vue-scroll>
           </div>
@@ -122,29 +131,60 @@
 
 <script>
 import Card from '../components/Card.vue'
+import { mapState } from 'vuex'
+import {getThreeLevelDataByProjectSnApi,getSecurityDataByProjectSnApi,getTodayInfoByProjectSnApi} from '@/assets/js/api/zhongjianFourth'
 export default {
   components: {
     Card
   },
   data() {
     return {
-     imgList: [
-     { src:require("../assets/images/common/bg_fmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_wmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_wmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_kmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_fmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_pmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_rmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_dmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_bmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_amk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_nmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
-     { src:require("../assets/images/common/bg_nmk.png"),time:"2022-09-28", names:"缪维彪",team:"钢筋班组"},
 
-     ]
+     threeLevel:{
+      workerSafeEducationList:[]
+     },
+     safetyDisclosure:{
+      workerSafeEducationList:[]
+     },
+     shouting:{
+      shoutInfoList:[]
+     },
+     eduTypeList:{
+      1:'入场三级教育',2:'定期安全教育',3:'日常安全交底',4:'VR安全教育',5:'班前教育',6:'日常教育（日常违规教育)',7:'每日交底（方案交底）',8:'每日交底（安全技术交底）',9:'每日交底（大工程交底）',10:'入职培训'
+     }
     }
-  }
+  },
+  computed: {
+    ...mapState(['projectSn']),
+  },
+  created() {
+    this.getThreeLevelDataByProjectSn();
+    this.getSecurityDataByProjectSn();
+    this.getTodayInfoByProjectSn();
+  },
+  methods: {
+    // 进场三级交底
+    getThreeLevelDataByProjectSn(){
+      getThreeLevelDataByProjectSnApi({projectSn:this.projectSn}).then(res=>{
+        console.log(res,'getThreeLevelDataByProjectSn')
+        this.threeLevel=res.result;
+      })
+    },
+    //安全交底
+    getSecurityDataByProjectSn(){
+      getSecurityDataByProjectSnApi({projectSn:this.projectSn}).then(res=>{
+        console.log(res,'getThreeLevelDataByProjectSn')
+        this.safetyDisclosure=res.result;
+      })
+    },
+    //班前喊话
+    getTodayInfoByProjectSn(){
+      getTodayInfoByProjectSnApi({projectSn:this.projectSn}).then(res=>{
+        console.log(res,'getTodayInfoByProjectSnApi')
+        this.shouting=res.result;
+      })
+    },
+  },
 }
 </script>
 
diff --git a/src/views/projectAdmin/fourEngin/security/leftBottom.vue b/src/views/projectAdmin/fourEngin/security/leftBottom.vue
index e64af4dc..36d33d22 100644
--- a/src/views/projectAdmin/fourEngin/security/leftBottom.vue
+++ b/src/views/projectAdmin/fourEngin/security/leftBottom.vue
@@ -10,12 +10,12 @@
       </div>
       <div class="tbody">
         <vue-scroll>
-          <div class="row" v-for="(item,index) in aiList" :key="index">
+          <div class="row" v-for="(item, index) in aiList" :key="index">
             <div>
-              <img :src= item.src />
+              <img :src=item.imageUrl />
             </div>
-            <div class="carNum">{{item.thingType}}</div>
-            <div class="datetime">{{item.time}}</div>
+            <div class="carNum">{{ alarmTypeList[item.thingType] }}</div>
+            <div class="datetime">{{ item.createTime }}</div>
           </div>
         </vue-scroll>
       </div>
@@ -25,18 +25,39 @@
 
 <script>
 import Card from "../components/Card.vue";
+import { mapState } from 'vuex'
+import {
+
+  selectNewPAiListApi
+} from '@/assets/js/api/zhongjianFourth'
 export default {
   components: { Card },
-  data(){
-    return{
-      aiList:[
-        { src:require("../assets/images/common/bg_smk.png"),thingType:"上班抽烟", time: "2022-01-23 15:30" },
-        { src:require("../assets/images/common/bg_omk.png"),thingType:"未戴安全帽", time: "2022-01-23 15:30" },
-        { src:require("../assets/images/common/bg_ymk.png"),thingType:"未穿反光衣", time: "2022-01-23 15:30" },
-        { src:require("../assets/images/common/bg_ymk.png"),thingType:"未穿反光衣", time: "2022-01-23 15:30" },
+  data() {
+    return {
+      alarmTypeList: {
+        1: '烟感', 2: '明火', 3: '人员倒地', 4: '未戴安全帽', 5: '区域入侵', 6: '越界入侵', 7: '人员聚集衣', 8: '反光衣', 9: '裸土覆盖', 13: '口罩识别', 14: '徘徊预警', 15: '物体滞留监测', 16: '绊线监测'
+      },
+      aiList: [
+        { imageUrl: require("../assets/images/common/bg_smk.png"), thingType: "3", createTime: "2022-01-23 15:30" },
+        { imageUrl: require("../assets/images/common/bg_omk.png"), thingType: "2", createTime: "2022-01-23 15:30" },
+        { imageUrl: require("../assets/images/common/bg_ymk.png"), thingType: "6", createTime: "2022-01-23 15:30" },
       ]
     }
-  }
+  },
+  computed: {
+    ...mapState(['projectSn']),
+  },
+  created() {
+    this.getSelectNewPAiListApi()
+  },
+  methods: {
+    getSelectNewPAiListApi() {
+      selectNewPAiListApi({ projectSn: this.projectSn, count: 20 }).then(res => {
+        console.log(res, '=============ai分析')
+        this.aiList = res.result.length>0?res.result:this.aiList;
+      })
+    }
+  },
 };
 </script>
 
@@ -45,32 +66,41 @@ export default {
   width: 100%;
   height: 100%;
   color: #fff;
+
   .thead {
     height: 36px;
     line-height: 36px;
     color: #59b2c0;
   }
+
   .tbody {
     height: calc(100% - 30px);
     font-size: 12px;
   }
+
   .row {
     display: flex;
     align-items: center;
+
     &:not(:last-child) {
       margin-bottom: 12px;
     }
+
     div {
       text-align: center;
+
       &:last-child {
         flex: 1;
       }
+
       &:first-child {
         width: 100px;
       }
+
       &:not(:last-child) {
         width: 100px;
       }
+
       img {
         width: 80px;
         height: 50px;
diff --git a/src/views/projectAdmin/fourEngin/security/leftTop.vue b/src/views/projectAdmin/fourEngin/security/leftTop.vue
index 59e2631b..f924a764 100644
--- a/src/views/projectAdmin/fourEngin/security/leftTop.vue
+++ b/src/views/projectAdmin/fourEngin/security/leftTop.vue
@@ -3,13 +3,10 @@
     <div class="charts">
       <div class="dllm">
         <div class="woria">
-          <JRingChart
-            :title="{ text: '安全隐患', subTitle: `${todayInspection.totalNum}件`, fontSize: 18 }"
+          <JRingChart :title="{ text: '安全隐患', subTitle: `${safetyPatrolInspection.allTotalNum}件`, fontSize: 18 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: safetyPeril.rectificationNum, name:'已处理' }, { value: safetyPeril.noRectificationNum, name:'未处理' }]"
-            :radius="['60%', '85%']"
-            :legend="false"
-          />
+            :data="[{ value: safetyPatrolInspection.allRectificationNum, name: '已处理' }, { value: safetyPatrolInspection.allNoRectificationNum, name: '未处理' }]"
+            :radius="['60%', '85%']" :legend="false" />
         </div>
         <div class="legend">
           <div class="row">
@@ -17,8 +14,8 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>{{ safetyPeril.rectificationNum || 0 }}</span>
-            <span>{{ safetyPeril.rectificationRatio || 0 }}%</span>
+            <span>{{ safetyPatrolInspection.allRectificationNum || 0 }}</span>
+            <span>{{ safetyPatrolInspection.allRectificationRatio || 0 }}%</span>
           </div>
         </div>
         <div class="legend">
@@ -27,20 +24,17 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>{{ safetyPeril.noRectificationNum || 0 }}</span>
-            <span>{{ safetyPeril.noRectificationRatio || 0 }}%</span>
+            <span>{{ safetyPatrolInspection.allNoRectificationNum || 0 }}</span>
+            <span>{{ safetyPatrolInspection.noRectificationRatio || 0 }}%</span>
           </div>
         </div>
       </div>
       <div class="dllm">
         <div class="woria">
-          <JRingChart
-            :title="{ text: '今日巡检', subTitle: `${todayInspection.totalNum}件`, fontSize: 18 }"
+          <JRingChart :title="{ text: '今日隐患', subTitle: `${safetyPatrolInspection.todayTotalNum}件`, fontSize: 18 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: todayInspection.rectificationNum, name:'已巡检' }, { value: todayInspection.noRectificationNum, name:'未巡检' }]"
-            :radius="['60%', '85%']"
-            :legend="false"
-          />
+            :data="[{ value: safetyPatrolInspection.todayRectificationNum, name: '已巡检' }, { value: safetyPatrolInspection.todayNoRectificationRatio, name: '未巡检' }]"
+            :radius="['60%', '85%']" :legend="false" />
         </div>
         <div class="legend">
           <div class="row">
@@ -48,8 +42,8 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>{{ todayInspection.rectificationNum || 0 }}</span>
-            <span>{{ todayInspection.rectificationRatio || 0 }}%</span>
+            <span>{{ safetyPatrolInspection.todayRectificationNum || 0 }}</span>
+            <span>{{ safetyPatrolInspection.todayRectificationRatio || 0 }}%</span>
           </div>
         </div>
         <div class="legend">
@@ -58,8 +52,8 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>{{ todayInspection.noRectificationNum || 0 }}</span>
-            <span>{{ todayInspection.noRectificationRatio || 0 }}%</span>
+            <span>{{ safetyPatrolInspection.todayNoRectificationRatio || 0 }}</span>
+            <span>{{ safetyPatrolInspection.todayNoRectificationRatio || 0 }}%</span>
           </div>
         </div>
       </div>
@@ -74,11 +68,15 @@
       </div>
       <div class="tbody">
         <vue-scroll>
-          <div class="row" :class="fmtStatusColor(item.status)" v-for="(item, index) in list" :key="index">
-            <div class="td">{{ fmtType(item.type) }}</div>
-            <div class="td">{{ item.datetime }}</div>
+          <div class="row" :class="fmtStatusColor(item.status)"
+            v-for="(item, index) in safetyPatrolInspection.hiddenDangerInspectRecordList" :key="index">
+            <div class="td">{{ fmtType(item.recordType) }}</div>
+            <div class="td">{{ item.inspectTime }}</div>
             <div class="td" :class="fmtStatusColor(item.status)">{{ fmtStatus(item.status) }}</div>
           </div>
+          <div class="row" v-if="safetyPatrolInspection.hiddenDangerInspectRecordList.length == 0">
+            <div style="font-size:14px;color: #999;text-align: center;width: 100%;">暂无数据</div>
+          </div>
         </vue-scroll>
       </div>
     </div>
@@ -86,10 +84,10 @@
 </template>
 
 <script>
-import { 
-  // getSafetyPerilInfo, 
+import {
+  getAllTodayDataHdirApi,
   getTodayInspectionInfo
- } from '@/assets/js/api/zhongjianFourth'
+} from '@/assets/js/api/zhongjianFourth'
 import { mapState } from 'vuex'
 
 import Card from '../components/Card.vue'
@@ -98,6 +96,9 @@ export default {
   components: { Card, JRingChart },
   data() {
     return {
+      safetyPatrolInspection: {
+        hiddenDangerInspectRecordList:[]
+      },
       // 安全隐患
       safetyPeril: {
         rectificationNum: 0,
@@ -125,12 +126,19 @@ export default {
   },
   created() {
     // this.getSafetyPerilInfo()
-    this.getTodayInspectionInfo()
+    this.getTodayInspectionInfo();
+    this.getAllTodayDataHdir();
   },
   computed: {
     ...mapState(['projectSn']),
   },
   methods: {
+    getAllTodayDataHdir() {
+      getAllTodayDataHdirApi({ projectSn: this.projectSn }).then(res => {
+        console.log(res, 'getAllTodayDataHdir')
+        this.safetyPatrolInspection = res.result
+      })
+    },
     // /** 查询安全隐患数据 */
     // getSafetyPerilInfo() {
     //   getSafetyPerilInfo({ projectSn: this.projectSn }).then(res => {
@@ -149,13 +157,14 @@ export default {
         Object.keys(todayInspection).forEach(key => {
           todayInspection[key] = res.result[key];
         })
-      }) 
+      })
     },
     fmtType(type) {
-      return type === 1 ? '物料堆放' : type === 2 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
+      return type == 1 ? '隐患问题' : type == 2 ? '排查记录' : ''
+      // return type === 1 ? '物料堆放' : type === 2 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
     },
     fmtStatus(status) {
-      return status === 1 ? '未处理' : status === 2 ? '已处理' : status === 3 ? '整改中' : '--'
+      return status === 1 ? '无需整改' : status === 2 ? '待整改' : status === 3 ? '待复查' : status === 4 ? '合格' : status === 5 ? '不合格' : ''
     },
     fmtStatusColor(status) {
       return status === 1 ? 'orange' : status === 2 ? 'green' : status === 3 ? 'blue' : ''
@@ -170,19 +179,23 @@ export default {
   height: 47%;
   display: flex;
   color: #fff;
+
   .dllm {
     flex: 1;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .woria {
       width: 100%;
       height: calc(100% - 92px);
     }
+
     .legend {
       position: relative;
       width: 100px;
+
       &::before {
         content: '';
         position: absolute;
@@ -190,32 +203,40 @@ export default {
         left: -10px;
         width: 6px;
         height: 6px;
-        
+
       }
+
       &:nth-child(2)::before {
         width: 12px;
         height: 12px;
         background-color: #6ee4ef;
       }
+
       &:nth-child(3)::before {
-         width: 12px;
+        width: 12px;
         height: 12px;
         background-color: #e7622a;
       }
+
       .row {
         display: flex;
+
         span {
           text-align: center;
+
           &:first-child {
             width: 60%;
           }
+
           &:last-child {
             width: 40%;
           }
         }
+
         &:first-child {
           font-size: 14px;
         }
+
         &:last-child {
           height: 30px;
           line-height: 30px;
@@ -226,24 +247,30 @@ export default {
     }
   }
 }
+
 .security-list {
   margin-top: 3%;
   height: 48%;
   color: #fff;
+
   .thead {
     color: #6ae3eb;
     margin-bottom: 5px;
   }
+
   .tbody {
     height: calc(100% - 50px);
     font-size: 12px;
   }
+
   .row {
     width: 98%;
     height: 50px;
     line-height: 50px;
     display: flex;
+
     &.orange {
+
       //background: linear-gradient(90deg, #356f83, #213c4f);
       &::before {
         content: '';
@@ -252,23 +279,30 @@ export default {
         // background-color: #67d4d9;
       }
     }
+
     .td {
       text-align: center;
+
       &:nth-child(1) {
         width: 28%;
       }
+
       &:nth-child(2) {
         width: calc(72% - 80px);
       }
+
       &:nth-child(3) {
         width: 80px;
       }
+
       &.orange {
         color: #e7622a;
       }
+
       &.green {
         color: #40cdad;
       }
+
       &.blue {
         color: #64ccd9;
       }
diff --git a/src/views/projectAdmin/fourEngin/security/rightTop.vue b/src/views/projectAdmin/fourEngin/security/rightTop.vue
index 6aed76d3..8026d8f0 100644
--- a/src/views/projectAdmin/fourEngin/security/rightTop.vue
+++ b/src/views/projectAdmin/fourEngin/security/rightTop.vue
@@ -1,9 +1,33 @@
 <template>
   <Card title="设备监控">
     <div class="devices">
-      <vue-scroll>
-        <div class="device" v-for="i in 5" :key="i">
-          <div class="device-name">空压机{{i}}</div>
+      <div class="">
+        <div class="flex  between devList">
+          <div v-for="(item, index) in devList" :key="index" @click="selectDev(item.val,index)"  class="devItem">
+            <span :class="selectDevVal==item.val?'that_class':''" >
+              {{ item.tit }}
+            </span>
+          </div>
+
+        </div>
+      </div>
+
+      <vue-scroll style="height:calc(100% - 52px)">
+        <!-- ai设备 -->
+        <aiDev v-if="devindex==0" :list="viewlist"></aiDev>
+        <!-- 电箱 -->
+        <electrical :list="viewlist" v-if="(devindex==2)"></electrical>
+        <!-- 绿色设备 -->
+        <environmentDevList :list="viewlist" v-if="(devindex==3)"></environmentDevList>
+        <!-- 升降机 -->
+        <lifterList :list="viewlist" v-if="(devindex==4)"></lifterList>
+        <!-- 塔吊 -->
+        <towerList :list="viewlist" v-if="(devindex==5)"></towerList>
+        <!-- 摄像 -->
+        <videoItemList :list="viewlist" v-if="(devindex==6)"></videoItemList>
+
+        <!-- <div class="device" v-for="i in 5" :key="i">
+          <div class="device-name">空压机{{ i }}</div>
           <div class="info">
             <img class="image" src="../assets/images/common/bg_kyj.png" />
             <div class="detail">
@@ -15,39 +39,149 @@
               <div class="detail-item">漏电流：99A</div>
             </div>
           </div>
-        </div>
+        </div> -->
       </vue-scroll>
     </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import { getAllDevApi } from '@/assets/js/api/zhongjianFourth';
+import { mapState } from 'vuex';
+import aiDev from './rightTopComponents/aiDevList.vue'
+import electrical from './rightTopComponents/electrical.vue'
+import environmentDevList from './rightTopComponents/environmentDevList.vue'
+import lifterList from './rightTopComponents/lifterList.vue'
+import towerList from './rightTopComponents/towerList.vue'
+import videoItemList from './rightTopComponents/videoItemList.vue'
+import Card from '../components/Card.vue';
 export default {
-  components: { Card }
+  components: { Card,aiDev,electrical,environmentDevList,lifterList,towerList,videoItemList},
+  data() {
+    return {
+      viewlist:[],
+      devList: [
+        {
+          tit: 'AI设备',
+          val: 1,
+          key:'aiList'
+        },
+        {
+          tit: '车辆',
+          val: 2,
+          key:'carList'
+        },
+        {
+          tit: '电箱',
+          val: 3,
+          key:'electricalDevList',
+        },
+        {
+          tit: '绿色设备',
+          val: 4,
+          key:'environmentDevList',
+        },
+        {
+          tit: '升降机',
+          val: 5,
+          key:'lifterList'
+        },
+        {
+          tit: '塔吊',
+          val: 6,
+          key:'towerList'
+        },
+        {
+          tit: '摄像头',
+          val: 7,
+          key:'videoItemList'
+        },
+      ],
+      selectDevVal:1,
+      devindex:0,
+      allDevlist:[]
+    }
+  },
+
+  computed: {
+    ...mapState(['projectSn']),
+  },
+  created() {
+    this.getAllDev();
+  },
+  methods: {
+    selectDev(v,i) {
+      this.selectDevVal = v;
+      this.devindex=i;
+      let key=this.devList[i].key;
+      this.viewlist=this.allDevlist[key]
+
+    },
+    getAllDev() {
+      getAllDevApi({ projectSn: this.projectSn }).then(res => {
+        console.log(res, 'getAllDevApi===========')
+        this.allDevlist=res.result
+      })
+    }
+  },
 }
 </script>
 
 <style lang="less" scoped>
+.that_class{
+  color: #6EE5F0!important;
+}
+.devList {
+
+  width: 100%;
+  font-size: 14px;
+  height: 40px;
+
+  .devItem {
+    cursor: pointer;
+  }
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.between {
+  justify-content: space-between;
+}
+
+.start {
+  justify-content: flex-start;
+}
+
+.wrap {
+  flex-wrap: wrap;
+}
+
 .devices {
   padding-left: 20px;
   height: 100%;
   color: #fff;
+
   .device {
     width: 100%;
     height: 176px;
+
     .device-name {
       // margin-top: 20px;
       height: 40px;
       line-height: 40px;
       font-size: 12px;
     }
+
     .info {
       height: 22px;
       line-height: 22px;
       font-size: 12px;
       color: #68d8e4;
       display: flex;
+
       .image {
         margin-right: 20px;
         width: 170px;
@@ -55,12 +189,15 @@ export default {
       }
     }
   }
+
   .green {
     color: #46d7b6;
   }
+
   .grey {
     color: #9da1aa;
   }
+
   .orange {
     color: #e7622a;
   }
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/aiDevList.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/aiDevList.vue
new file mode 100644
index 00000000..6b77415a
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/aiDevList.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="device" v-for="i in list" :key="i">
+      <div class="device-name">{{i.hardwareName}}</div>
+      <div class="info">
+        
+        <div class="detail">
+          <div class="detail-item green">状态：{{(i.deviceState==1?'在线':'离线')}}</div>
+          <div class="detail-item grey">标识：{{i.hardwareId}}</div>
+          
+        </div>
+      </div>
+    </div>
+    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      default: function(){
+        return []
+      }
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+
+  .device {
+    width: 100%;
+    // margin-top: 12px;
+
+    .device-name {
+      // margin-top: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+
+    .info {
+     
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+
+  .green {
+    color: #46d7b6;
+  }
+
+  .grey {
+    color: #9da1aa;
+  }
+
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/electrical.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/electrical.vue
new file mode 100644
index 00000000..bed3891f
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/electrical.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="device" v-for="i in list" :key="i">
+      <div class="device-name">{{ i.devName }}</div>
+      <div class="info">
+
+        <div class="detail">
+          <div class="detail-item green">状态：{{ i.isClosed == 1 ? '在线' : '离线' }}</div>
+          <div class="detail-item grey">开关状态：{{ i.switchState == 1 ? '开' : '关' }}</div>
+          <div class="detail-item grey">安装单位：{{ i.installCompany }}</div>
+          <div class="detail-item orange">安装地址：{{ i.installAddress }}</div>
+
+        </div>
+      </div>
+    </div>
+    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+
+  .device {
+    width: 100%;
+    // margin-top: 12px;
+
+    .device-name {
+      // margin-top: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+
+    .info {
+
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+
+  .green {
+    color: #46d7b6;
+  }
+
+  .grey {
+    color: #9da1aa;
+  }
+
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/environmentDevList.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/environmentDevList.vue
new file mode 100644
index 00000000..afab73e4
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/environmentDevList.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="device" v-for="i in list" :key="i">
+      <div class="device-name">{{i.deviceName}}</div>
+      <div class="info">
+        <!-- <img class="image" src="../../assets/images/common/bg_kyj.png" /> -->
+        <div class="detail">
+          <div class="detail-item green">状态：{{ i.isClosed == 1 ? '在线' : '离线' }}</div>
+          <div class="detail-item grey">是否启用：{{ i.isEnable == 1 ? '是' : '否' }}</div>
+         
+          <div class="detail-item orange">安装地址：{{ i.address }}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+    props: {
+    list: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+
+  .device {
+    width: 100%;
+    // margin-top: 12px;
+
+    .device-name {
+      // margin-top: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+
+    .info {
+
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+
+  .green {
+    color: #46d7b6;
+  }
+
+  .grey {
+    color: #9da1aa;
+  }
+
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/lifterList.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/lifterList.vue
new file mode 100644
index 00000000..16d485ca
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/lifterList.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="device" v-for="i in list" :key="i">
+      <div class="device-name">{{ i.devName }}</div>
+      <div class="info">
+        <img class="image" :src="i.installationImage" />
+        <div class="detail">
+          <div class="detail-item green">状态：{{ i.devOnline == 1 ? '在线' : '离线' }}</div>
+          <div class="detail-item grey">设备状态：{{devStateList[i.devState]}}</div>
+          <div class="detail-item orange">类型：{{i.elevatorType==0?'单笼':'多笼'}}</div>
+          <div class="detail-item">额定人数:{{i.ratedPeopleNum}}</div>
+          <div class="detail-item">最大载重：{{i.maxLoad}}</div>
+          <div class="detail-item">最大高度：{{i.maxHeight}}</div>
+          <div class="detail-item">承包企业：{{i.generalContractorsName}}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      devStateList:{
+        1:'设备进场',2:'设备安装',3:'设备验收',4:'设备使用',5:'设备拆除',6:'设备退场'
+      }
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+
+  .device {
+    width: 100%;
+    // margin-top: 12px;
+
+    .device-name {
+      // margin-top: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+
+    .info {
+
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+
+  .green {
+    color: #46d7b6;
+  }
+
+  .grey {
+    color: #9da1aa;
+  }
+
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/towerList.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/towerList.vue
new file mode 100644
index 00000000..f8f2c34b
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/towerList.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div class="device" v-for="i in list" :key="i">
+      <div class="device-name">{{ i.devName }}</div>
+      <div class="info">
+        <img class="image" :src="i.installationImage" />
+        <div class="detail">
+          
+          <div class="detail-item grey">设备状态：{{devStateList[i.devState]}}</div>
+          <div class="detail-item orange">类型：{{typeObj[i.type]}}</div>
+          <div class="detail-item">额定人数:{{i.ratedPeopleNum}}</div>
+          <div class="detail-item">最大起重重量：{{i.maxLiftingCapacity}}</div>
+          <div class="detail-item">塔身高度:{{i.maxHeight}}</div>
+          <div class="detail-item">塔节数量:{{i.nodeCount}}</div>
+          <div class="detail-item">承包企业：{{i.generalContractorsName}}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="list.length==0" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      devStateList:{
+        1:'设备进场',2:'设备安装',3:'设备验收',4:'设备使用',5:'设备拆除',6:'设备退场'
+      },
+      typeObj:{
+        1:'塔吊',2:'升降机',3:'龙门吊'
+      }
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+
+  .device {
+    width: 100%;
+    // margin-top: 12px;
+
+    .device-name {
+      // margin-top: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+
+    .info {
+
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+
+  .green {
+    color: #46d7b6;
+  }
+
+  .grey {
+    color: #9da1aa;
+  }
+
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue b/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue
new file mode 100644
index 00000000..79b530f1
--- /dev/null
+++ b/src/views/projectAdmin/fourEngin/security/rightTopComponents/videoItemList.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div class="device" v-for="i in list" :key="i">
+      <div class="device-name">{{ i.videoName }}</div>
+      <div class="info">
+        <img class="image" :src="i.coverUrl" />
+        <div class="detail">
+
+          <div class="detail-item green">状态：{{ i.deviceState == 1 ? '在线' : '离线' }}</div>
+          <div class="detail-item red">报警总数：{{i.alarmCount}}</div>
+          <div class="detail-item orange">类型：{{deviceTypeObj[i.deviceType]}}</div>
+          <div class="detail-item green">视频类型：{{videoTypeObj[i.videoType]}}</div>
+         
+          <div class="detail-item">最大载重：{{i.maxLoad}}</div>
+          <div class="detail-item">AI识别功能：{{(i.aiFunctionType==0?'否':'是')}}</div>
+        
+          <div class="detail-item">承包企业：{{i.generalContractorsName}}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      deviceTypeObj:{
+        1:'枪机',2:'球机',3:'热成像',4:'单兵',5:'全景',6:'无人机'
+      },
+      videoTypeObj:{
+        1:'萤石云',2:'乐橙',3:'ISC',4:'大华',5:'宇视',6:'国标'
+      }
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+
+  .device {
+    width: 100%;
+    // margin-top: 12px;
+
+    .device-name {
+      // margin-top: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+
+    .info {
+
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+
+  .green {
+    color: #46d7b6;
+  }
+
+  .grey {
+    color: #9da1aa;
+  }
+  .red{
+    color: red;
+  }
+
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>
\ No newline at end of file