From b804a7e5aad9d67fbc91d85439b7aed7de3215e5 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 17:36:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppPdDv.vue | 99 +++++++++++++++++++++++++++++++------
 1 file changed, 83 insertions(+), 16 deletions(-)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 312115ff..ca4101af 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -33,7 +33,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart1" style="width: 100%; height: 114px;"></div>
+            <div class="chart1" style="width: 100%; height: 134px;"></div>
           </div>
           <div class="item">
             <div class="title">居民群统计</div>
@@ -67,7 +67,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart2" style="width: 100%; height: 114px;"></div>
+            <div class="chart2" style="width: 100%; height: 134px;"></div>
           </div>
           <div class="item item-tags">
             <div class="title">标签人群</div>
@@ -98,21 +98,22 @@
           </div>
           <div class="item">
             <div class="title">单聊统计</div>
-            <div class="item-top">
-              <div class="item-top__item">
+            <div class="item-top dl">
+              <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
                 <h2>单聊会话</h2>
                 <p>279</p>
               </div>
-              <div class="item-top__item">
+              <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
                 <h2>单聊会话</h2>
                 <p>279</p>
               </div>
             </div>
-            <div class="chart3" style="width: 336px; height: 114px;"></div>
+            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 134px;"></div>
+            <div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 134px;"></div>
           </div>
           <div class="item item-tags">
             <div class="title">群聊统计</div>
-            <div class="chart4" style="width: 336px; height: 114px;"></div>
+            <div class="chart4" style="width: 336px; height: 134px;"></div>
           </div>
         </div>
       </div>
@@ -216,7 +217,8 @@
     data () {
       return {
         leftIndex: 0,
-        rightIndex: 0
+        rightIndex: 0,
+        dlIndex: 0
       }
     },
 
@@ -225,8 +227,14 @@
         setTimeout(() => {
           this.initLineChart('.chart1')
           this.initLineChart('.chart2')
-          this.initBarChart('.chart3')
-          this.initBarChart('.chart4')
+          this.initBarChart('.chart4', [
+            {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+            {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
+          ])
+          this.initBarChart('.chart3', [
+            {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+            {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+          ])
         }, 500)
       })
     },
@@ -314,7 +322,7 @@
         option && myChart.setOption(option)
       },
 
-      initBarChart (el) {
+      initBarChart (el, color) {
         var chartDom = document.querySelector(el)
         var myChart = echarts.init(chartDom)
         var option
@@ -357,10 +365,7 @@
               x2: 0,
               y: 0,
               y2: 1,
-              colorStops: [
-                {offset: 0, color: 'rgba(47, 211, 241, 1)'},
-                {offset: 1, color: 'rgba(47, 211, 241, 0)'}
-              ]
+              colorStops: color
             }
           ],
           tooltip: {
@@ -414,7 +419,69 @@
       align-items: center;
       justify-content: space-between;
       height: 84px;
-      margin-bottom: 23px;
+      margin-bottom: 20px;
+    }
+
+    .dl {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-top__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 164px;
+        height: 52px;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl3.png);
+        background-size: 100% 100%;
+
+        h2 {
+          margin-bottom: 4px;
+          color: #4488FB;
+          font-size: 12px;
+        }
+
+        &:nth-of-type(2) {
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl4.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #2AB7D1;
+          }
+        }
+
+        p {
+          font-size: 14px;
+          color: #fff;
+          font-weight: bold;
+          font-style: oblique;
+        }
+
+        &.active {
+          &:nth-of-type(1) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl1.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+        }
+      }
     }
 
     .appPdDv-title {