feat: 完成隐患处理排行榜以及今日隐患处理结果占比

src/components/LegendLabel/index.vue

@@ -75,7 +75,7 @@ export default {
     align-items: center;
     width: 150px;
     height: 28px;
-    background-color: #00000050;
+    background-color: #ffffff10;
     padding: 0px 10px;
     margin-bottom: 5px;
     .name-block {

src/views/main/components/Button.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'Button',
   props: {
@@ -21,7 +22,8 @@ export default {
 .custom-button {
   color: #fff;
   font-size: 12px;
-  padding: 2px 10px;
+  height: 32px;
+  padding: 0px 20px;
   border: 2px solid;
   background-color: transparent;
   border-color: #192A66;

src/views/main/modules/left/DeviceStateChart.vue

@@ -37,16 +37,12 @@ export default {
             {
               name: '其他',
               value: 2,
-              itemStyle: {
-                color: '#EC1F84'
-              }
+              color: '#EC1F84'
             },
             {
               name: '异常设备',
               value: 3,
-              itemStyle: {
-                color: '#3C1FEC'
-              }
+              color: '#3C1FEC'
             },
             {
               name: '正常设备',
@@ -58,16 +54,12 @@ export default {
             {
               name: '离线设备',
               value: 5,
-              itemStyle: {
-                color: '#1DF9C8'
-              }
+              color: '#1DF9C8'
             },
             {
               name: '在线设备',
               value: 6,
-              itemStyle: {
-                color: '#1DD2F9'
-              }
+              color: '#1DD2F9'
             }
           ],
       options: {
@@ -103,11 +95,8 @@ export default {
           }
         },
         tooltip: {},
-        legend: {
-          top: '0',
-          data: ['在线设备', '离线设备', '正常设备', '异常设备', '其他'],
-        },
         series: {
+          name: '设备状态占比',
           type: 'bar',
           showBackground: true,
           data: [

src/views/main/modules/right/HiddenDangerHandlingList.vue

@@ -0,0 +1,120 @@
+<template >
+  <div style="color: #fff;">
+    <!-- 按钮组 -->
+    <ButtonGroup :buttons="buttons" @click="onClickHander" />
+    <!-- 隐患处理排行榜 -->
+    <div class="row header">
+      <span class="idx">排名</span>
+      <span class="address">区县</span>
+      <span class="warning_count">预警数量</span>
+      <span class="process_warning_count">已处理预警</span>
+      <span class="percent">处理率</span>
+    </div>
+    <div>
+      <vue-seamless-scroll
+        :data="listData"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li class="row" v-for="(item, index) in listData" :key="index">
+            <span class="idx" v-text="toIdx(index + 1)"></span>
+            <span class="address" v-text="item.address"></span>
+            <span class="warning_count" v-text="item.warningCount"></span>
+            <span class="process_warning_count" v-text="item.processedCount"></span>
+            <span class="percent" v-text="item.percent"></span>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import ButtonGroup from '../../components/ButtonGroup.vue'
+import VueSeamlessScroll from 'vue-seamless-scroll'
+
+export default {
+  name: 'HiddenDangerHandlingList',
+  components: {
+    ButtonGroup,
+    VueSeamlessScroll
+  },
+  data() {
+    return {
+      
+      // 按钮组数据
+      buttons: [
+        {
+          name: '当日',
+          key: 'today'
+        },
+        {
+          name: '近一周',
+          key: 'week'
+        },
+        {
+          name: '近一月',
+          key: 'mouth'
+        }
+      ],
+      listData: [
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+        { address: "渝北区",  warningCount: 2356,  processedCount: 256, percent: "36%" },
+      ],
+      classOption: {
+        singleHeight: 30
+      }
+    }
+  },
+  methods: {
+    onClickHander: (data) => {
+      console.log('切换隐患处理', data)
+    },
+    toIdx(index) {
+      return index < 10 ? `0${index}`: index
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+
+.header {
+  color: #73CCE2;
+}
+
+.row,li,a {
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 15px;
+  span {
+    text-align: center;
+    font-size: 12px;
+    flex: 1;
+  }
+}
+
+.warp {
+  height: 150px;
+  width: 300px;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/main/modules/right/TodayHiddenTroubleProcessingResults.vue

@@ -0,0 +1,118 @@
+<template >
+  <div class="TodayHiddenTroubleProcessingResults">
+    <VChart class="chart" autoresize :option="options"/>
+    <LegendLabel class="legend" :data="data"/>
+  </div>
+</template>
+
+<script>
+import { LegendLabel } from '@/components'
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { PieChart } from "echarts/charts";
+import {
+  TooltipComponent,
+  LegendComponent,
+  PolarComponent
+} from "echarts/components";
+import VChart from "vue-echarts";
+
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TooltipComponent,
+  LegendComponent,
+  PolarComponent,
+]);
+
+export default {
+  name: 'TodayHiddenTroubleProcessingResults',
+  components: {
+    LegendLabel,
+    VChart
+  },
+  data() {
+    return {
+      data: [
+            {
+              name: '真实火情',
+              value: 2,
+              color: '#00EAFF'
+            },
+            {
+              name: '误报',
+              value: 3,
+              color: '#E77052'
+            },
+            {
+              name: '消防测试',
+              value: 4,
+              color: '#CAF6FF'
+            },
+            {
+              name: '维保检修',
+              value: 5,
+              color: '#054B99'
+            },
+            {
+              name: '其他',
+              value: 6,
+              color: '#00CEBD'
+            }
+          ],
+      options: {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '今日隐患处理结果占比',
+            type: 'pie',
+            radius: ['75%', '80%'],
+            avoidLabelOverlap: false,
+            label: {
+              position: 'center',
+              formatter: () => `3234\n\n次数`,
+              fontSize: '20',
+              color: '#fff',
+              fontWeight: '100'
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: '真实火情', value: 2, itemStyle: { color: '#00EAFF'  } },
+              { name: '误报', value: 3, itemStyle: { color: '#E77052'  } },
+              { name: '消防测试', value: 4, itemStyle: { color: '#CAF6FF' } },
+              { name: '维保检修', value: 5, itemStyle: { color: '#054B99'  } },
+              { name: '其他', value: 6, itemStyle: { color: '#00CEBD' } }
+            ]
+          }
+        ]
+}
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+.TodayHiddenTroubleProcessingResults {
+  position: relative;
+
+  .chart {
+    width: 11vw;
+    height: 11vw;
+    position: absolute;
+    left: -35px;
+  }
+
+  .legend {
+    position: absolute;
+    right: -2px;
+    top: 25px;
+  }
+}
+  
+</style>

src/views/main/modules/right/index.vue

@@ -1,25 +1,25 @@
 <template >
-  <div style="color: #fff;">
+  <div>
     <ContainerBorder title="隐患处理排行榜">
-      <ButtonGroup :buttons="buttons" @click="onClickHander">
-        按钮
-      </ButtonGroup>
+      <HiddenDangerHandlingListVue />
     </ContainerBorder>
     <ContainerBorder title="今日隐患处理结果占比">
-      11
+      <TodayHiddenTroubleProcessingResults />
     </ContainerBorder>
   </div>
 </template>
 
 <script>
 import { ContainerBorder } from '@/components'
-import ButtonGroup from '../../components/ButtonGroup.vue'
+import HiddenDangerHandlingListVue from './HiddenDangerHandlingList.vue'
+import TodayHiddenTroubleProcessingResults from './TodayHiddenTroubleProcessingResults.vue'
 
 export default {
   name: 'Main.Right',
   components: {
     ContainerBorder,
-    ButtonGroup
+    HiddenDangerHandlingListVue,
+    TodayHiddenTroubleProcessingResults
   },
   provide() {
     return {
@@ -28,29 +28,9 @@ export default {
   },
   data() {
     return {
-      buttons: [
-        {
-          name: '当日',
-          key: 'today',
-          params: '[当日] 参数'
-        },
-        {
-          name: '近一周',
-          key: 'week',
-          params: '[近一周] 参数'
-        },
-        {
-          name: '近一月',
-          key: 'mouth',
-          params: '[近一月] 参数'
-        }
-      ]
     }
   },
   methods: {
-    onClickHander: (data) => {
-      console.log('click', data)
-    }
   }
 }
 </script>