From de3e4ef25933d818f15d9d7a700886b66c8c3b6c Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 28 Apr 2023 13:47:35 +0800
Subject: [PATCH] bug

---
 packages/bigscreen/dv/AppQxnDv.vue            | 110 +++++++++++++++---
 .../bigscreen/dv/components/DoughnutChart.vue |   9 +-
 2 files changed, 98 insertions(+), 21 deletions(-)

diff --git a/packages/bigscreen/dv/AppQxnDv.vue b/packages/bigscreen/dv/AppQxnDv.vue
index 0f095ccf..ab8075fb 100644
--- a/packages/bigscreen/dv/AppQxnDv.vue
+++ b/packages/bigscreen/dv/AppQxnDv.vue
@@ -91,11 +91,11 @@
             <div class="right wrapper">
               <div class="AppQxnDv-title">
                 <h2>群标签情况</h2>
-                <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
+                <!-- <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
                   <el-option label="XXX派出所" value="1"></el-option>
                   <el-option label="XXX派出所" value="2"></el-option>
                   <el-option label="XXX派出所" value="3"></el-option>
-                </el-select>
+                </el-select> -->
               </div>
               <ai-echart-v2
                 style="height: 220px; width: 100%; margin-top: 10px;"
@@ -122,7 +122,7 @@
                 <h2>群人数规模分布</h2>
               </div>
               <ai-echart-v2
-                style="height: 180px; width: 100%; margin-top: 20px;"
+                style="height: 160px; width: 100%; margin-top: 20px;"
                 :ref="'chart2'"
                 :data="qrsGmData"
                 :ops="pieChart">
@@ -205,8 +205,8 @@
                 <h2>日均活跃率</h2>
               </div>
               <DoughnutChart
-                :ratio="'61'"
-                :value="[{key: '活跃成员', value: '6005'}, {key: '激活成员', value: '9789'}]">
+                :ratio="rjhyRate"
+                :value="rjhyData">
               </DoughnutChart>
             </div>
           </div>
@@ -217,8 +217,8 @@
             <ai-echart-v2
               style="height: 236px; width: 100%;"
               :ref="'chart'"
-              :data="lineData"
-              :ops="lineChart1">
+              :data="cyfbData"
+              :ops="lineChart2">
             </ai-echart-v2>
           </div>
         </AiDvPanel>
@@ -428,6 +428,61 @@
             }
           })
         },
+        lineChart2: {
+          legend: {
+            show: false
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '35px',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            borderColor: 'rgba(0, 102, 154, 0.65)',
+            textStyle: { color: '#fff' },
+            axisPointer: { type: 'cross' }
+          },
+          color: ['#33CCCC', '#33CCCC'],
+          xAxis: {
+            type: "category",
+            axisTick: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+          },
+          yAxis: {
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisPointer: { snap: true }
+          },
+          daemon: (color) => ({
+            showSymbol: false,
+            smooth: true,
+            lineStyle: {
+              shadowBlur: 4,
+              shadowOffsetY: 2,
+              width: 2
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                x2: 0,
+                y: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
+                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
+                ]
+              }
+            }
+          })
+        },
         barChart8: {
           legend: {
             textStyle: {
@@ -569,9 +624,9 @@
             show: false
           },
           grid: {
-            left: '6%',
+            left: '0%',
             top: '6%',
-            right: '6%',
+            right: '0%',
             bottom: '6%'
           },
           yAxis: {
@@ -598,7 +653,7 @@
                 normal: {
                   textStyle: {
                     color: '#9BB7D4',
-                    fontSize: 14
+                    fontSize: 10
                   }
                 }
               }
@@ -629,12 +684,24 @@
     },
 
     computed: {
+      rjhyData () {
+        return [{key: '活跃成员', value: (this.cyActivityInfo['活跃成员总数(7日)'] / 7).toFixed(0)}, {key: '激活成员', value: this.cyActivityInfo['已激活']}]
+      },
+
+      rjhyRate () {
+        if (!this.cyActivityInfo['已激活']) {
+          return 0
+        }
+
+        return Number((((this.cyActivityInfo['活跃成员总数(7日)'] / 7).toFixed(0) / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
+      },
+
       qbqlData () {
-        return [{key: '活跃成员', value: 6006}, {key: '激活成员', value: 9789}]
+        return [{key: '已打标签', value: 2938}, {key: '未打标签', value: 2283}]
       },
 
       qbqRate () {
-        return 61
+        return 26.27
         if (!this.cyActivityInfo['已激活']) {
           return 0
         }
@@ -642,11 +709,11 @@
         return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
       },
       fglData () {
-        return [{key: '已激活成员', value: 9789}, {key: '未激活成员', value: 6}]
+        return [{key: '已关联人数', value: 726079}, {key: '地区户籍数', value: 3015112}]
       },
 
       fglRate () {
-        return 99.93
+        return 24.08
         if (!this.cyActivityInfo['已激活']) {
           return 0
         }
@@ -690,6 +757,19 @@
         return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'])) * 100).toFixed(2))
       },
 
+      cyfbData () {
+        if (!this.cyActivityInfo['成员使用分布']) {
+          return []
+        }
+
+        return this.cyActivityInfo['成员使用分布'].map(v => {
+          return {
+            '日期': v['日期'],
+            '活跃用户数': v['活跃用户数']
+          }
+        })
+      },
+
       barChartData () {
         if (!this.wxGroupOverview['各单位群主及群分布']) {
           return []
@@ -697,7 +777,7 @@
 
         return this.wxGroupOverview['各单位群主及群分布'].map(v => {
           return {
-            name: v['网格名称'],
+            'name': v['网格名称'],
             '群主数量': v['群主数量'],
             '群数量': v['群数量']
           }
diff --git a/packages/bigscreen/dv/components/DoughnutChart.vue b/packages/bigscreen/dv/components/DoughnutChart.vue
index 51935d3e..2ffbf4db 100644
--- a/packages/bigscreen/dv/components/DoughnutChart.vue
+++ b/packages/bigscreen/dv/components/DoughnutChart.vue
@@ -9,7 +9,7 @@
     <div class="DoughnutChart-explain">
       <div class="item" v-for="(item, index) in value" :key="index">
         <i></i>
-        <span>{{ item.key }}</span>
+        <span :style="labelStyle">{{ item.key }}</span>
         <p>{{ item.value }}</p>
       </div>
     </div>
@@ -18,7 +18,7 @@
 
 <script>
   export default {
-    props: ['ratio', 'value'],
+    props: ['ratio', 'value', 'labelStyle'],
 
     data () {
       return {
@@ -146,10 +146,7 @@
         }
 
         span {
-          margin-right: 20px;
-          // width: 88px;
-          // min-width: 50px;
-          // max-width: 70px;
+          width: 78px;
           font-weight: 400;
           font-size: 14px;
           color: #9BB7D4;