样式

src/assets/styles/index.scss

@@ -248,6 +248,10 @@ aside {
   .el-table__inner-wrapper::after,
   .el-table__inner-wrapper::before {
     background-color: #00174b !important;
-    color: #fff !important
+    color: #fff !important;
+    
+  }
+  .el-table {
+    border: 1px solid #2E6099 !important;
   }
 }

src/views/bim/bimHome/components/CheckDetial.vue

@@ -1,16 +1,32 @@
 <template>
-    <div>
+    <div class="check-div">
+        <div class="device-list">
+            <div v-for="(item, index) of deviceList" :key="index">
+                <el-icon size="60" color="#1890ff" v-if="index == 0">
+                    <Suitcase />
+                </el-icon>
+                <el-icon size="60" color="#1890ff" v-if="index == 1">
+                    <TakeawayBox />
+                </el-icon>
+                <el-icon size="60" color="#1890ff" v-if="index == 2">
+                    <Box />
+                </el-icon>
+                <font class="num" :style="{ 'color': item.color }">{{ item.num }}</font>
+                <span>{{ item.name }}</span>
+            </div>
+        </div>
         <el-table :data="checkArr" border style="width: 100%" height="320">
             <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
             <el-table-column prop="name" label="设备名称" align="center" />
             <el-table-column prop="isPass" label="巡检结果" align="center">
                 <template #default="scope">
-                    <span :style="{'color': scope.row.isPass? '#0dbc79' : '#e03528'}">{{ scope.row.isPass ? '通过' : '不通过' }}</span>
+                    <span :style="{ 'color': scope.row.isPass ? '#0dbc79' : '#e03528' }">{{ scope.row.isPass ? '通过' : '不通过'
+                    }}</span>
                 </template>
             </el-table-column>
             <el-table-column label="巡检时间" align="center">
                 <template #default="scope">
-                    {{ scope.row.isPass ? '2023-12-23': '2023-01-11' }}
+                    {{ scope.row.isPass ? '2023-12-23' : '2023-01-11' }}
                 </template>
             </el-table-column>
         </el-table>
@@ -18,8 +34,63 @@
 </template>
 <script setup>
 import bimStore from '@/store/modules/bim';
+import IconBy from '@/assets/images/icon-by.png';
+import IconWx from '@/assets/images/icon-wx.png';
+import IconXj from '@/assets/images/icon-xj.png';
+import IconPd from '@/assets/images/icon-pd.png';
 import { computed } from 'vue';
+const deviceList = [
+    {
+        name: '巡检总数',
+        num: '4',
+        color: '#fff',
+        imgUrl: IconPd,
+        icon: 'Suitcase'
+    },
+    {
+        name: '通过数',
+        num: '2',
+        color: '#fff',
+        imgUrl: IconWx,
+        icon: 'TakeawayBox'
+    },
+    {
+        name: '未通过数',
+        num: '2',
+        color: '#fff',
+        imgUrl: IconXj,
+        icon: 'Box'
+    }
+]
 const checkArr = computed(() =>
     bimStore().checkArr
 );
 </script>
+<style lang="scss" scoped>
+.check-div {
+    .device-list {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        border: 1px solid #2E6099;
+        margin-bottom: 15px;
+        border-radius: 4px;
+
+        >div {
+            width: 24%;
+            height: 80%;
+            // border: 1px solid red;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            color: #fff;
+
+            .num {
+                font-size: 36px;
+            }
+        }
+    }
+}</style>

src/views/bim/bimHome/components/DeviceInfoDialog.vue

@@ -13,7 +13,7 @@
                     style="width: 100%;height:100%"></div>
             </div>
             <div class="bottom-div">
-                <el-table :data="tableData" border style="width: 100%" height="420">
+                <el-table :data="tableData" border style="width: 100%" height="445">
                     <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
                     <el-table-column prop="name" label="名称" align="center" />
                     <el-table-column prop="num" label="编码" align="center" />
@@ -460,7 +460,7 @@ const viewDetail = (val) => {
 
         .bottom-div {
             height: 74%;
-            border: 1px solid #2E6099;
+            // border: 1px solid #2E6099;
         }
     }
 }

src/views/bim/bimHome/components/ThreeView2.vue

@@ -177,6 +177,9 @@ const loadSence = () => {
             if (enableGroup.indexOf(e.name) != -1) {
                 xfobj.push(e);
             }
+            if (yjGroup.indexOf(e.name) != -1) {
+                yjobj.push(e);
+            }
         })
         // 设置漫游点位
         const objname = ['start', 'middle1', 'middle2', 'end']
@@ -254,6 +257,10 @@ const enableGroup = [
     'T11',// 立仓
     'T12'
 ]
+// 预警设备
+const yjGroup = [
+    'T11',
+]
 const isSelent = (obj) => {
     var o = obj
     while (true) {
@@ -377,17 +384,18 @@ const cleanColor = () => {
 }
 // 预警
 const warn = () => {
-    ['T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12'].forEach(item => {
+    ['T11'].forEach(item => {
         warnSets.push(scene.getObjectByName(item));
     })
 
-    warnSets[2].traverse(e => {
+    warnSets[0].traverse(e => {
         e.material = new THREE.MeshBasicMaterial({
             transparent: true,
             opacity: 0.9,
             color: new THREE.Color('rgb( 237,33,2 )')
         });
     })
+    yjf();
 
     // animateCamera(warnSets[0]);
 }
@@ -591,12 +599,22 @@ const xiaof = () => {
         xfadd(o, Math.random() < 0.3);
     })
 }
+// 预警
+const yjf = () => {
+    yjobj.forEach((o) => {
+        xfadd(o, 'yj');
+    })
+}
 let xfobj = [];
+let yjobj = [];
 // 消防标签
 const xfadd = (obj, state) => {
     const texLoader = new THREE.TextureLoader();
     let texture = null;
-    if (state) {
+    if(state == 'yj') {
+        texture = texLoader.load("/yj.png");
+    }
+    else if (state) {
         texture = texLoader.load("/ygr.png");
     } else {
         texture = texLoader.load("/yg.png");
@@ -825,6 +843,9 @@ const checkComplete = () => {
 }
 .arrow_outer {
     display: flex;
-    
+    flex-direction: column;
+    >div {
+        line-height: 24px;
+    }
 }
 </style>