feat(首页): 平均检验通过率

src/views/echartHome/averageTest.vue

+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: 300px; display: flex; justify-content: center"
+  ></div>
+</template>
+<script>
+export default {
+  name: 'AverageTest',
+  props: {
+    value: {
+      type: Number,
+      default: 20
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      // 2.初始化
+      this.chart = this.$echarts.init(this.$refs.chart)
+      // 3.配置数据
+      const option = {
+        series: [
+          {
+            type: 'gauge',
+            center: ['50%', '60%'],
+            startAngle: 200,
+            endAngle: -20,
+            min: 0,
+            max: 100,
+            splitNumber: 10,
+            itemStyle: {
+              color: '#87B3EB'
+            },
+            progress: {
+              show: true,
+              width: 30
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                width: 30
+              }
+            },
+            axisTick: {
+              distance: -45,
+              splitNumber: 5,
+              lineStyle: {
+                width: 2,
+                color: '#999'
+              }
+            },
+            splitLine: {
+              distance: -52,
+              length: 14,
+              lineStyle: {
+                width: 3,
+                color: '#999'
+              }
+            },
+            axisLabel: {
+              distance: -20,
+              color: '#999',
+              fontSize: 20
+            },
+            anchor: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            detail: {
+              valueAnimation: true,
+              width: '60%',
+              lineHeight: 40,
+              borderRadius: 8,
+              offsetCenter: [0, '-15%'],
+              fontSize: 16,
+              fontWeight: 'bolder',
+              formatter: `{b|通过率}\n{value} %`,
+              color: '#303133',
+              rich: {
+                b: {
+                  fontSize: 14,
+                  color: '#606266'
+                }
+              }
+            },
+            data: [
+              {
+                value: 54
+              }
+            ]
+          },
+          {
+            type: 'gauge',
+            center: ['50%', '60%'],
+            startAngle: 200,
+            endAngle: -20,
+            min: 0,
+            max: 100,
+            itemStyle: {
+              color: '#1A6FD7'
+            },
+            progress: {
+              show: true,
+              width: 10
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: this.value
+              }
+            ]
+          }
+        ]
+      }
+      // 4.传入数据
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/views/echartHome/standardClassification.vue

@@ -64,6 +64,31 @@ export default {
               { value: 38, name: 'rose 2' },
               { value: 32, name: 'rose 3' }
             ]
+          },
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: ['30%', '40%'],
+            center: ['50%', '40%'],
+            roseType: 'area',
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: true,
+              position: 'center',
+              formatter: '标准分类', // 自定义lable处展示那些数据及其格式
+              fontSize: 16, // 字体大小
+              color: '#606266'
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 40, name: 'rose 1' },
+              { value: 38, name: 'rose 2' },
+              { value: 32, name: 'rose 3' }
+            ]
           }
         ]
       }

src/views/echartHome/useCaseRisk.vue

 <template>
-  <div ref="chart" style="width: 50%; height: 500px"></div>
+  <div ref="chart" style="width: 50%; height: 480px"></div>
 </template>
 <script>
 export default {
@@ -41,8 +41,8 @@ export default {
             },
             pointer: {
               icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-              width: 8,
-              length: '80%',
+              width: 5,
+              length: '70%',
               offsetCenter: [0, '8%']
             },
             progress: {

src/views/echartHome/useCaseTest.vue

 <template>
-  <div ref="chart" style="width: 100%; height: 500px"></div>
+  <div ref="chart" style="width: 100%; height: 480px"></div>
 </template>
 <script>
 export default {

src/views/index.vue

@@ -92,13 +92,15 @@
                 "
               ></div>
               <span>已完成 ：43个</span>
-              <el-progress
-                :percentage="40"
-                color="#12BEDF"
-                :stroke-width="10"
-                :show-text="false"
-              ></el-progress>
-              <span>40%</span>
+              <div>
+                <el-progress
+                  :percentage="40"
+                  color="#12BEDF"
+                  :stroke-width="10"
+                  :show-text="false"
+                ></el-progress>
+                <div style="margin-top: 10px; text-align: center">40%</div>
+              </div>
             </div>
             <div class="cardChild" style="background: rgba(230, 88, 104, 0.08)">
               <div
@@ -110,13 +112,15 @@
                 "
               ></div>
               <span>已完成 ：43个</span>
-              <el-progress
-                :percentage="40"
-                color="#E55868"
-                :stroke-width="10"
-                :show-text="false"
-              ></el-progress>
-              <span>40%</span>
+              <div>
+                <el-progress
+                  :percentage="40"
+                  color="#E55868"
+                  :stroke-width="10"
+                  :show-text="false"
+                ></el-progress>
+                <div style="margin-top: 10px; text-align: center">40%</div>
+              </div>
             </div>
           </div>
         </div>
@@ -168,14 +172,34 @@
       <el-col :span="10">
         <el-row>
           <el-col :span="24">
-            <div class="cardStyle" style="height: 50%">
-              <div class="cardTitle">平均检验通过率</div>
+            <div class="cardStyle">
+              <el-carousel height="460px" :autoplay="false">
+                <el-carousel-item
+                  v-for="(item, index) in averageTestList"
+                  :key="index"
+                >
+                  <div style="display: flex; justify-content: space-between">
+                    <div class="cardTitle">平均检验通过率</div>
+                    <div
+                      style="color: #1a6fd7; font-weight: 700; font-size: 16px"
+                    >
+                      {{ item.standard }}
+                    </div>
+                  </div>
+                  <AverageTest :value="item.value"></AverageTest>
+                  <div
+                    style="color: #606266; font-size: 16px; text-align: center"
+                  >
+                    检验项目：{{ item.name }}
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
             </div>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <div class="cardStyle">
+            <div class="cardStyle" style="height: 500px">
               <div class="cardTitle">任务完成情况占比</div>
               <div
                 style="
@@ -211,10 +235,12 @@ import StandardClassification from './echartHome/standardClassification.vue'
 import ConfidentialityTasks from './echartHome/confidentialityTasks.vue'
 import UseCaseRisk from './echartHome/useCaseRisk.vue'
 import UseCaseTest from './echartHome/useCaseTest.vue'
+import AverageTest from './echartHome/averageTest.vue'
 
 export default {
   name: 'HomePage',
   components: {
+    AverageTest,
     UseCaseTest,
     UseCaseRisk,
     ConfidentialityTasks,
@@ -222,6 +248,23 @@ export default {
   },
   data() {
     return {
+      averageTestList: [
+        {
+          name: '汽车信息安全管理体系要求',
+          value: 54,
+          standard: 'GB2020-2023'
+        },
+        {
+          name: '汽车信息安全管理体系要求',
+          value: 54,
+          standard: 'GB2020-2023'
+        },
+        {
+          name: '汽车信息安全管理体系要求',
+          value: 54,
+          standard: 'GB2020-2023'
+        }
+      ],
       taskCompleted: [
         { name: '站哨', value: 90 },
         { name: '站哨', value: 90 },
@@ -244,6 +287,27 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+::v-deep .el-carousel__indicator.is-active button {
+  background: #1a6fd7;
+}
+::v-deep .el-carousel__button {
+  display: block;
+  opacity: 0.48;
+  background-color: #ffffff;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #b9c2ce;
+  border-radius: 50%;
+  margin-left: 20px;
+}
 .dangerousCard {
   padding: 20px;
   width: 106px;
@@ -312,7 +376,7 @@ export default {
 .cardThree {
   border: 1px solid #dcdfe3;
   border-radius: 4px;
-  padding: 20px 30px;
+  padding: 20px 20px;
   height: 340px;
   .cardTitle {
     font-size: 16px;
@@ -324,6 +388,10 @@ export default {
     width: calc(50% - 10px);
     height: 174px;
     border-radius: 8px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 }
 </style>