仪表盘

.env

@@ -1 +1 @@
-VITE_PROJECT_TITLE = 防控席位
+VITE_PROJECT_TITLE = GIS一张图

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="referrer" content="no-referrer" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="keywords" content="海南省公安厅、综合态势防控平台" />
+  <meta name="keywords" content="GIS一张图" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=8"/>
   <meta http-equiv="Pragma" content="no-cache"/>

src/views/gis/business/resources/index.vue

@@ -99,7 +99,7 @@ export default defineComponent({
         myl: 9612,
         online: 27768,
         offline: 7832,
-        cx: 10
+        cx: 50
       }
     })
     onMounted(() => {

src/views/gis/business/resources/lxfb-cx-chart.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="chart-main" ref="ref_main">
     <div class="chart-ref" ref="ref_chart"/>
+    <div class="circle-bg"/>
+    <div class="circle-block" :style="`background: radial-gradient(circle, ${value <= 30 ? '#58aaff, #1280f1' : (value <= 70 ? '#FFD861, #FFA302' : '#ff82a1, #ff245b')});`">
+      <div v-if="(value / 100) < (1 / 6)" class="circle-block-1" :style="`transform: rotate(${rotateCpt1}deg);`"/>
+      <div v-if="(value / 100) < (2 / 6)" class="circle-block-2" :style="`transform: rotate(${rotateCpt2}deg);`"/>
+      <div v-if="(value / 100) < (3 / 6)" class="circle-block-3" :style="`transform: rotate(${rotateCpt3}deg);`"/>
+      <div v-if="(value / 100) < (4 / 6)" class="circle-block-4" :style="`transform: rotate(${rotateCpt4}deg);`"/>
+      <div v-if="(value / 100) < (5 / 6)" class="circle-block-5" :style="`transform: rotate(${rotateCpt5}deg);`"/>
+      <div class="circle-block-6" :style="`transform: rotate(${rotateCpt6}deg);`"/>
+    </div>
   </div>
 </template>
 
@@ -58,10 +67,6 @@ export default defineComponent({
                 ]
               }
             },
-            progress: {
-              show: false,
-              width: '14'
-            },
             splitLine: {
               show: false
             },
@@ -89,7 +94,7 @@ export default defineComponent({
             },
             anchor: {
               show: true,
-              showAbove: false,
+              showAbove: true,
               size: 10,
               itemStyle: {
                 color: '#ffffff',
@@ -97,6 +102,11 @@ export default defineComponent({
                 borderColor: '#3694FF'
               }
             },
+            detail: {
+              fontSize: 14,
+              color: 'auto',
+              formatter: (v) => `${v}%`
+            },
             data: [
               {
                 value: props.value
@@ -117,6 +127,48 @@ export default defineComponent({
     watch(() => props.value, () => {
       state.chart = initChart()
     })
+    const rotateCpt1 = computed(() => {
+      let du = -270
+      if ((props.value / 100) > 0) {
+        du += (270 - (1 - props.value / 100) * 270)
+      }
+      return du
+    })
+    const rotateCpt2 = computed(() => {
+      let du = -225
+      if ((props.value / 100) > (1 / 6)) {
+        du += (225 - (1 - props.value / 100) * 270)
+      }
+      return du
+    })
+    const rotateCpt3 = computed(() => {
+      let du = -180
+      if ((props.value / 100) > (2 / 6)) {
+        du += (180 - (1 - props.value / 100) * 270)
+      }
+      return du
+    })
+    const rotateCpt4 = computed(() => {
+      let du = -135
+      if ((props.value / 100) > (3 / 6)) {
+        du += (135 - (1 - props.value / 100) * 270)
+      }
+      return du
+    })
+    const rotateCpt5 = computed(() => {
+      let du = -90
+      if ((props.value / 100) > (4 / 6)) {
+        du += (90 - (1 - props.value / 100) * 270)
+      }
+      return du
+    })
+    const rotateCpt6 = computed(() => {
+      let du = -45
+      if ((props.value / 100) > (5 / 6)) {
+        du += (45 - (1 - props.value / 100) * 270)
+      }
+      return du
+    })
     onMounted(() => {
       nextTick(() => {
         state.chart = initChart()
@@ -130,6 +182,12 @@ export default defineComponent({
       ...toRefs(state),
       ref_chart,
       ref_main,
+      rotateCpt1,
+      rotateCpt2,
+      rotateCpt3,
+      rotateCpt4,
+      rotateCpt5,
+      rotateCpt6,
     }
   },
 })
@@ -139,9 +197,65 @@ export default defineComponent({
 .chart-main {
   width: 100%;
   height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
   .chart-ref {
     width: 100%;
     height: 100%;
+    z-index: 3;
+  }
+  .circle-bg {
+    z-index: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 10px solid #D0E6FC;
+    left: 0;
+    top: 0;
+    &:after {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 50%;
+      border-bottom: 75px solid #FFFFFF;
+      border-left: 75px solid transparent;
+      border-right: 75px solid transparent;
+    }
+  }
+  .circle-block {
+    z-index: 2;
+    position: absolute;
+    width: calc(100% - 10px * 2);
+    height: calc(100% - 10px * 2);
+    border-radius: 50%;
+    &:after {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 50%;
+      border-bottom: 75px solid #FFFFFF;
+      border-left: 75px solid transparent;
+      border-right: 75px solid transparent;
+    }
+    .circle-block-1, .circle-block-2, .circle-block-3, .circle-block-4, .circle-block-5, .circle-block-6 {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      &:after {
+        content: '';
+        position: absolute;
+        left: -12px;
+        top: 50%;
+        border-bottom: 76px solid #FFFFFF;
+        border-left: 77px solid transparent;
+        border-right: 77px solid transparent;
+      }
+    }
   }
 }
 </style>