From 8df77fb17a63c1eb21eec06fc71558b210640e54 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 18 Oct 2023 10:34:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B0=E9=83=BD=E5=85=88=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/fengdu/AppBIBoard/AppBIBoard.vue | 78 +++++++++++++++++++++---
 ui/lib/styles/common.scss                |  4 ++
 2 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/project/fengdu/AppBIBoard/AppBIBoard.vue b/project/fengdu/AppBIBoard/AppBIBoard.vue
index f8c4e963..0c95dea7 100644
--- a/project/fengdu/AppBIBoard/AppBIBoard.vue
+++ b/project/fengdu/AppBIBoard/AppBIBoard.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="AppBIBoard" :class="{fullscreen}">
-    <ai-fit-view>
+    <ai-fit-view @scale="v=>scale=v">
       <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
         <template v-slot:head="head">
           <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
@@ -14,11 +14,21 @@
               </div>
               <div class="chart">
                 <div class="title">群活跃率（7日）</div>
-                <ai-echart :ops="chart" :data="chartData"/>
+                <ai-echart :ops="chart" :data="calcProgress()">
+                  <div class="legend">
+                    <ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
+                                  :value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
+                  </div>
+                </ai-echart>
               </div>
               <div class="chart">
                 <div class="title">人员活跃（7日）</div>
-                <ai-echart :ops="chart" :data="chartData"/>
+                <ai-echart :ops="chart" :data="calcProgress()">
+                  <div class="legend">
+                    <ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
+                                  :value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
+                  </div>
+                </ai-echart>
               </div>
             </div>
           </fd-card>
@@ -49,17 +59,20 @@ import FengduHead from "./components/fengduHead.vue";
 import FdCard from "./components/fdCard.vue";
 import AiEchart from "dui/packages/tools/AiEchart.vue";
 import AiHighlight from "dui/packages/layout/AiHighlight.vue";
+import AiInfoItem from "dui/packages/basic/AiInfoItem.vue";
+import AiWrapper from "dui/packages/basic/AiWrapper.vue";
 
 export default {
   name: "AppBIBoard",
   label: "丰都指挥舱",
-  components: {AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
+  components: {AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
   props: {
     instance: Function,
     dict: Object
   },
   data() {
     return {
+      scale: 1,
       fullscreen: false,
       sta: {
         群总数: 5118,
@@ -68,6 +81,7 @@ export default {
         '群消息(30天)': '1,214,098',
       },
       chart: {
+        legend: {show: false},
         series: {
           type: 'gauge',
           startAngle: 90,
@@ -75,18 +89,51 @@ export default {
           center: ['50%', 74],
           radius: 50,
           progress: {
+            show: true,
             overlap: false,
             roundCap: true,
             clip: false,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#139AFF'},
+                  {offset: 1, color: '#0ED5A6'},
+                ]
+              }
+            },
           },
-          splitLine: false,
-          axisTick: false,
+          pointer: {show: false},
+          splitLine: {show: false},
+          axisTick: {show: false},
+          axisLabel: {show: false},
           axisLine: {
-            lineStyle: {width: 6}
-          }
-        }
+            lineStyle: {width: 6, color: [[1, 'rgba(102, 121, 138, 0.4)']]},
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: [0, 0],
+            fontSize: 24,
+            formatter: '{value}%',
+            color: "#02FEFF",
+            fontFamily: "DINAlternate-Bold",
+            width: 50,
+            lineHeight: 50,
+            padding: 12,
+            borderWidth: 1,
+            borderColor: 'rgba(102, 121, 138, 0.4)',
+            borderRadius: 50
+          },
+        },
       },
-      chartData: []
+      chartData: [
+        {name: "活跃居民群", value: 3502},
+        {name: "全部居民群", value: 5118},
+      ]
     }
   },
   methods: {
@@ -95,6 +142,10 @@ export default {
     },
     handleSetting(v) {
       this.$refs.fddv.dialog = v
+    },
+    calcProgress() {
+      const value = (this.chartData[0].value / this.chartData.at(-1).value * 100).toFixed(0)
+      return [{value}]
     }
   },
 }
@@ -164,6 +215,13 @@ export default {
       line-height: 30px;
       background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
     }
+
+    .legend {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 }
 </style>
diff --git a/ui/lib/styles/common.scss b/ui/lib/styles/common.scss
index 61afc2b0..491cc8fd 100644
--- a/ui/lib/styles/common.scss
+++ b/ui/lib/styles/common.scss
@@ -310,6 +310,10 @@ div[flex], .flex {
   &.gap {
     gap: 20px;
   }
+
+  &.center {
+    justify-content: center;
+  }
 }
 
 .fill {