湖里大屏：优化若干布局和样式

src/views/projectAdmin/jlw/envirManage/rightCenter.vue

@@ -3,12 +3,22 @@
   <Card :title="title">
     <div class="contentBox">
       <div class="myChart" ref="myChart" />
+      <div class="count">
+        <div class="count-item">
+          <div class="label">扬尘噪声报警</div>
+          <div class="num">{{ alarmData.noiseNum }}</div>
+        </div>
+        <div class="count-item">
+          <div class="label">PM2.5超标报警</div>
+          <div class="num">{{ alarmData.pm25Num }}</div>
+        </div>
+      </div>
     </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card';
+import Card from '../components/Card'
 
 import echarts from 'echarts4'
 import { selectEnvironmentAlarmCountTotalApi } from '@/assets/js/api/dataBoard'
@@ -38,7 +48,7 @@ export default {
         sn: this.$store.state.projectSn
       }).then(res => {
         this.alarmData = res.result
-        // console.log('报警统计',res.result);
+        console.log('报警统计',res.result);
         this.initMyChart()
       })
     },
@@ -47,7 +57,7 @@ export default {
       const option = {
         title: {
           textAlign: 'center',
-          x: '29%',
+          x: '48%',
           y: '38%',
           text: this.alarmData.totalAlarm,
           textStyle: {
@@ -65,27 +75,27 @@ export default {
         tooltip: {
           trigger: 'item'
         },
-        legend: {
-          type: 'scroll',
-          orient: 'vertical',
-          right: 30,
-          top: 'center',
-          itemWidth: 10, // 设置宽度
-          itemHeight: 10, // 设置高度
-          selectedMode: true,
-          itemGap: 50,
-          icon: 'circle',
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 16,
-          }
-        },
+        // legend: {
+        //   type: 'scroll',
+        //   orient: 'vertical',
+        //   right: 30,
+        //   top: 'center',
+        //   itemWidth: 10, // 设置宽度
+        //   itemHeight: 10, // 设置高度
+        //   selectedMode: true,
+        //   itemGap: 50,
+        //   icon: 'circle',
+        //   textStyle: {
+        //     color: '#ffffff',
+        //     fontSize: 16,
+        //   }
+        // },
         color: ['#ff6c7f', '#567cf6'],
         series: [
           {
             type: 'pie',
             radius: ['50%', '65%'],
-            center: ['30%', '50%'],
+            center: ['50%', '50%'],
             avoidLabelOverlap: true,
             // itemStyle: {
             //   borderRadius: 8,
@@ -109,8 +119,8 @@ export default {
               show: false
             },
             data: [
-              { value: this.alarmData.noiseNum, name: `扬尘噪声报警 :  ${this.alarmData.noiseNum}` },
-              { value: this.alarmData.pm25Num, name: `PM2.5超标报警 : ${this.alarmData.pm25Num}` }
+              { value: this.alarmData.noiseNum, name: `扬尘噪声报警` },
+              { value: this.alarmData.pm25Num, name: `PM2.5超标报警` }
             ]
           }
         ]
@@ -124,13 +134,57 @@ export default {
 
 <style lang="less" scoped>
 .contentBox {
+  display: flex;
+
   width: 100%;
   height: 100%;
 
   .myChart {
-    width: 100%;
+    width: 50%;
     height: 100%;
   }
+
+  .count {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: 10%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    .count-item {
+      position: relative;
+      &::before {
+        position: absolute;
+        left: -16px;
+        top: 10px;
+        content: '';
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      &:first-child {
+        margin-bottom: 20px;
+      }
+      &:first-child::before {
+        background-color: #ff768b;
+        transform: translateY(-6px);
+      }
+      &:last-child::before {
+        background-color: #3cabfd;
+        transform: translateY(-6px);
+      }
+      .label {
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+      .num {
+        font-size: 20px;
+      }
+    }
+  }
 }
 </style>