大屏

project/dv/apps/AppPdDv.vue

@@ -113,7 +113,23 @@
           </div>
           <div class="item item-tags">
             <div class="title">群聊统计</div>
-            <div class="chart4" style="width: 336px; height: 134px;"></div>
+            <div class="item-top ql">
+              <div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
+                <h2>单聊会话</h2>
+                <p>279</p>
+              </div>
+              <div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
+                <h2>单聊会话</h2>
+                <p>279</p>
+              </div>
+              <div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
+                <h2>单聊会话</h2>
+                <p>279</p>
+              </div>
+            </div>
+            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 134px;"></div>
+            <div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 134px;"></div>
+            <div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 134px;"></div>
           </div>
         </div>
       </div>
@@ -218,7 +234,8 @@
       return {
         leftIndex: 0,
         rightIndex: 0,
-        dlIndex: 0
+        dlIndex: 0,
+        qlIndex: 0
       }
     },
 
@@ -235,6 +252,18 @@
             {offset: 0, color: 'rgba(66, 187, 255, 1)'},
             {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
           ])
+          this.initBarChart('.chart5', [
+            {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+            {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
+          ])
+          this.initBarChart('.chart6', [
+            {offset: 0, color: 'rgba(255, 190, 66, 1)'},
+            {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
+          ])
+          this.initBarChart('.chart7', [
+            {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+            {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+          ])
         }, 500)
       })
     },
@@ -484,6 +513,86 @@
       }
     }
 
+    .ql {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-top__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 107px;
+        height: 52px;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.png);
+        background-size: 100% 100%;
+
+        h2 {
+          margin-bottom: 4px;
+          color: #2AB7D1;
+          font-size: 12px;
+        }
+
+        &:nth-of-type(2) {
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql5.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #FFD458;
+          }
+        }
+
+        &:nth-of-type(3) {
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql6.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #4488FB;
+          }
+        }
+
+        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/ql1.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+
     .appPdDv-title {
       position: absolute;
       top: 0;