中建四局(双碳管理):今日报警统计模块

src/views/projectAdmin/zjsj/carbon/rightCenter.vue

@@ -1,14 +1,84 @@
 <template>
   <Card title="今日报警统计">
-    今日报警统计
+    <div class="contentBox">
+      <div class="chart">
+        <JNestedRingChart
+          :title="{ text: '27', subTitle: '质量问题数' }"
+          :series="series"
+          :legend="{ show: false }"
+        />
+      </div>
+      <div class="right">
+        <span class="point"></span>
+        <span>扬尘噪声报警<p class="num">13</p></span>
+        
+        <span class="point point2"></span>
+        <span>PM2.5超标报警</span>
+        <div class="num">14</div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card.vue";
+import JNestedRingChart from "../../common/jChart/pie/JNestedRingChart.vue";
 export default {
-  components: { Card }
-}
+  components: { Card, JNestedRingChart },
+  data() {
+    return {
+      series: [
+        {
+          roseType: "area",
+          radius: ["62%", "65%"],
+          color: ["#080a17", "#47939a"],
+          data: [50, 50]
+        },
+        {
+          radius: ["75%", "82%"],
+          color: ["#65d3d8", "#e5612a"],
+          data: [
+            { value: 13, name: "扬尘噪声报警" },
+            { value: 14, name: "PM2.5超标报警" }
+          ]
+        }
+      ]
+    };
+  }
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.contentBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .chart {
+    box-sizing: border-box;
+    padding-top: 20px;
+    height: 100%;
+    width: 50%;
+  }
+  .right {
+    flex: 1;
+    margin-top: 30px;
+    .point {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      display: inline-block;
+      background-color: #fb6a2e;
+      margin-right: 15px;
+    }
+    .point2{
+      background-color: #65d3d8;
+    }
+    .num{
+      color: #d2a104;
+      margin: 5px 0px 30px 25px;
+    }
+  }
+}
+</style>