湖里大屏(CIM+)：完成 BIM 预留接口布局

src/views/projectAdmin/dataBoard/projectHuScreen/CIM/rightTop.vue

@@ -1,42 +1,29 @@
 <template>
-<!-- Bim预留接口 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <Card :title="title">
+    <CountList
+      type="persons"
+      :allCount="{ value: 22, label: '人脸闸机总数' }"
+      :todayCount="{ value: 65, label: '今日报警总数' }"
+      :list="[]"
+    />
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import CountList from '../components/CountList.vue'
 export default {
-
+  components: { Card, CountList },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {}
+  }
 }
 </script>
 
-<style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-
+<style lang="less" scoped></style>

src/views/projectAdmin/dataBoard/projectHuScreen/components/CountList.vue

@@ -20,7 +20,11 @@
       <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
         <div class="status">在线</div>
         <div class="label">1号塔吊</div>
-        <div class="num">今日报警：2</div>
+        <div class="num" v-if="type === 'waring'">今日报警：2</div>
+        <div class="persons" v-if="type === 'persons'">
+          <div class="person">进场人数：67</div>
+          <div class="person">出场人数：67</div>
+        </div>
       </div>
     </div>
   </div>
@@ -29,6 +33,10 @@
 <script>
 export default {
   props: {
+    type: {
+      type: String,
+      default: 'waring'
+    },
     allCount: {
       type: Object,
       required: true,
@@ -122,6 +130,13 @@ export default {
       .num {
         width: 100px;
       }
+      .persons {
+        width: 200px;
+        display: flex;
+        .person {
+          flex: 1;
+        }
+      }
     }
   }