湖里大屏(数字工地)：完成建筑总览布局

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/centerTop.vue

@@ -1,42 +1,49 @@
 <template>
-<!-- 出勤统计 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <Card :title="title">
+    <div class="pane"></div>
+    <div class="tabs">
+      <div class="tab" v-for="tab in tabs" :key="tab">{{ tab }}</div>
+    </div>
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 export default {
-
+  components: { Card, JNestedRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
   data() {
     return {
-
-    };
-  },
-
-
+      tabs: ['全部', '塔机监测', '升降机监测', '视频监测', '环境监测', '人脸闸机']
+    }
+  }
 }
 </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;
+.pane {
+  height: 80%;
+}
+.tabs {
+  height: 20%;
+  padding: 0 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  .tab {
+    margin-bottom: 20px;
+    width: 100px;
+    height: 42px;
+    line-height: 42px;
+    text-align: center;
+    border: 1px solid pink;
+    cursor: pointer;
   }
 }
 </style>
-

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/index.vue

@@ -2,29 +2,29 @@
   <div class="container">
     <div class="leftBox">
       <div class="leftTop">
-            <leftTop title="塔吊设备" /> 
+        <leftTop title="塔吊设备" />
       </div>
       <div class="leftCenter">
-            <leftCenter title="AI分析"></leftCenter>
+        <leftCenter title="AI分析"></leftCenter>
       </div>
       <div class="leftBottom">
-            <leftBottom title="视频设备"></leftBottom>
+        <leftBottom title="视频设备"></leftBottom>
       </div>
     </div>
     <div class="centerBox">
       <div class="centerTop">
-            <centerTop title="建筑总览"></centerTop>
+        <centerTop title="建筑总览"></centerTop>
       </div>
     </div>
     <div class="rightBox">
       <div class="rightTop">
-            <rightTop title="升降机设备"></rightTop>
+        <rightTop title="升降机设备"></rightTop>
       </div>
       <div class="rightCenter">
-            <rightCenter title="环境监测"></rightCenter>
+        <rightCenter title="环境监测"></rightCenter>
       </div>
       <div class="rightBottom">
-            <rightBottom title="人脸闸机"></rightBottom>
+        <rightBottom title="人脸闸机"></rightBottom>
       </div>
     </div>
   </div>
@@ -40,14 +40,18 @@ import rightCenter from './rightCenter'
 import rightBottom from './rightBottom'
 export default {
   components: {
-    leftTop,leftCenter,leftBottom,centerTop,rightTop,rightCenter,rightBottom
+    leftTop,
+    leftCenter,
+    leftBottom,
+    centerTop,
+    rightTop,
+    rightCenter,
+    rightBottom
   },
   data() {
-    return {
-       
-    };
-  },
-};
+    return {}
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -82,12 +86,9 @@ export default {
   height: 100%;
   margin-right: 15px;
   .centerTop {
-    height: 80%;
+    height: 100%;
     margin-bottom: 15px;
   }
-  .centerBottom {
-    height: 30%;
-  }
 }
 
 .rightBox {
@@ -105,4 +106,4 @@ export default {
     height: 30%;
   }
 }
-</style>
+</style>