湖里大屏(数字工地):环境监测模块

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

@@ -1,13 +1,40 @@
 <template>
-<!-- 安全培训 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <!-- 环境监测 -->
+  <Card :title="title">
+    <div class="airChart">
+      <airQulityChart></airQulityChart>
+    </div>
+    <div class="counts">
+      <div class="count">
+        <div class="icon"></div>
+        <div class="info">
+          <p class="num">PM2.5</p>
+          <p class="label">21μg/m3</p>
+        </div>
+      </div>
+      <div class="count">
+        <div class="icon"></div>
+        <div class="info">
+          <p class="num">PM2.5</p>
+          <p class="label">21μg/m3</p>
+        </div>
+      </div>
+      <div class="count">
+        <div class="icon"></div>
+        <div class="info">
+          <p class="num">噪声</p>
+          <p class="label">58dB</p>
+        </div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script>
+import Card from "../components/Card.vue";
+import airQulityChart from "../../homePage/environmentWatch.vue";
 export default {
+  components: { Card, airQulityChart },
 
   props: {
     title: {
@@ -16,26 +43,42 @@ export default {
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
-}
+    return {};
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
-  width: 100%;
+.airChart {
+  width: 60%;
   height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+  float: left;
+}
+.counts {
+  padding-top: 5%;
+  display: flex;
+  flex-direction: column;
+  .count {
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      width: 40px;
+      height: 40px;
+      border-radius: 5px;
+      border: 1px solid #2e9586;
+    }
+    .info {
+      color: #fff;
+      .num {
+        margin-bottom: 6px;
+        font-size: 1px;
+      }
+      .label {
+        font-size: 14px;
+      }
+    }
   }
 }
 </style>

src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script>
-import echarts from "echarts4";
 import airQulityChart from "../../homePage/environmentWatch.vue"
 export default {
   components:{airQulityChart},