大屏

project/dv/apps/AppPdDv.vue

@@ -3,11 +3,11 @@
     <div class="left">
       <div class="appPdDv-title">企微数据库</div>
       <div class="tab">
-        <div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']">居民统计</div>
-        <div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']">会话统计</div>
+        <div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']" @click="leftIndex = 0">居民统计</div>
+        <div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']" @click="leftIndex = 1">会话统计</div>
       </div>
       <div class="tab-content">
-        <div class="tab-content__item">
+        <div class="tab-content__item" v-show="leftIndex === 0">
           <div class="item">
             <div class="title">居民好友统计</div>
             <div class="item-top">
@@ -33,7 +33,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart1"></div>
+            <div class="chart1" style="width: 100%; height: 114px;"></div>
           </div>
           <div class="item">
             <div class="title">居民群统计</div>
@@ -67,7 +67,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart2"></div>
+            <div class="chart2" style="width: 100%; height: 114px;"></div>
           </div>
           <div class="item item-tags">
             <div class="title">标签人群</div>
@@ -87,6 +87,34 @@
             </div>
           </div>
         </div>
+        <div class="tab-content__item" v-show="leftIndex === 1">
+          <div class="item">
+            <div class="title">消息回复率</div>
+            <div class="item-top DonutChart-wrapper">
+              <DonutChart v-if="leftIndex === 1" :ratio="100" text="昨日"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="40" text="近7天"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="70" text="近1个月"></DonutChart>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">单聊统计</div>
+            <div class="item-top">
+              <div class="item-top__item">
+                <h2>单聊会话</h2>
+                <p>279</p>
+              </div>
+              <div class="item-top__item">
+                <h2>单聊会话</h2>
+                <p>279</p>
+              </div>
+            </div>
+            <div class="chart3" style="width: 336px; height: 114px;"></div>
+          </div>
+          <div class="item item-tags">
+            <div class="title">群聊统计</div>
+            <div class="chart4" style="width: 336px; height: 114px;"></div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="middle">
@@ -139,7 +167,7 @@
             <span style="width: 60px; text-align: right;">群人数</span>
           </div>
           <div class="item-table__body">
-            <div class="item-table__item" v-for="(item, index) in 4" :key="index">
+            <div class="item-table__item" v-for="(item, index) in 6" :key="index">
               <span style="width: 110px">XX网格居民群</span>
               <span style="flex: 1; text-align: center;">王磊</span>
               <span style="width: 60px; text-align: right;">150</span>
@@ -155,12 +183,12 @@
             <div :class="[rightIndex === 1 ? 'active' : '']">上周积分榜</div>
           </div>
           <div class="tab-content">
-            <div class="tab-item" v-for="(item, index) in 5" :key="index">
+            <div class="tab-item" v-for="(item, index) in 6" :key="index">
               <div class="left" :class="'left'+ index">{{ index + 1 }}</div>
               <div class="middel">
                 <div class="top">
                   <h2>王磊</h2>
-                  <span>网格长</span>
+                  <span v-if="index === 0">网格长</span>
                 </div>
                 <p></p>
               </div>
@@ -174,16 +202,198 @@
 </template>
 
 <script>
+  import DonutChart from './DonutChart'
+  import * as echarts from 'echarts'
   export default {
     name: 'AppPdDv',
 
     label: '微网实格',
 
+    components: {
+      DonutChart
+    },
+
     data () {
       return {
         leftIndex: 0,
         rightIndex: 0
       }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.initLineChart('.chart1')
+          this.initLineChart('.chart2')
+          this.initBarChart('.chart3')
+          this.initBarChart('.chart4')
+        }, 500)
+      })
+    },
+
+    methods: {
+      initLineChart (el) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option
+
+        option = {
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+          },
+          yAxis: {
+            type: 'value',
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisPointer: {show: false}
+          },
+          color: [
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {offset: 0, color: 'rgba(47, 211, 241, 1)'},
+                {offset: 1, color: 'rgba(47, 211, 241, 0)'}
+              ]
+            }
+          ],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '14%',
+            left: '1%',
+            right: '0%',
+            bottom: '0%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: 'line',
+              label: {
+                show: false,
+                position: 'top',
+                color: '#fff'
+              },
+              areaStyle: {},
+              barWidth: 16,
+              barCategoryGap: 40,
+              itemStyle: {}
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      },
+
+      initBarChart (el) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option
+
+        option = {
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+          },
+          yAxis: {
+            type: 'value',
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisPointer: {show: false}
+          },
+          color: [
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {offset: 0, color: 'rgba(47, 211, 241, 1)'},
+                {offset: 1, color: 'rgba(47, 211, 241, 0)'}
+              ]
+            }
+          ],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '14%',
+            left: '1%',
+            right: '0%',
+            bottom: '0%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: 'bar',
+              label: {
+                show: false,
+                position: 'top',
+                color: '#fff'
+              },
+              barWidth: 8,
+              barCategoryGap: 40,
+              itemStyle: {}
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      }
     }
   }
 </script>
@@ -199,6 +409,14 @@
       box-sizing: border-box;
     }
 
+    .DonutChart-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 84px;
+      margin-bottom: 23px;
+    }
+
     .appPdDv-title {
       position: absolute;
       top: 0;
@@ -257,6 +475,10 @@
         }
       }
 
+      .chart1 {
+        margin: 10px 0 18px;
+      }
+
       .item-tags {
         margin-top: 20px;
 

project/dv/apps/DonutChart.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="DonutChart" :id="id">
+    <canvas :id="canvasId"></canvas>
+    <div class="DonutChart-text">
+      <span>{{ ratio }}%</span>
+      <i>{{ text }}</i>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['ratio', 'text'],
+
+    data () {
+      return {
+        id: `DonutChart-${Math.ceil(Math.random() * 10000)}`,
+        canvasId: `DonutChartCanvas-${Math.ceil(Math.random() * 10000)}`,
+        canvasWidth: 90,
+        canvasHeight: 90
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    methods: {
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.lineWidth = lineWidth
+        ctx.strokeStyle = lineColor
+        ctx.beginPath()
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.closePath()
+        ctx.stroke()
+      },
+
+      angle (a, i, ox, oy, or) {
+        var hudu = (2 * Math.PI / 360) * a * i
+        var x = ox + Math.sin(hudu) * or
+        var y = oy - Math.cos(hudu) * or
+        return x + '_' + y
+      },
+
+      mapColor (value) {
+        if (value < 25) {
+          return '#FFC139'
+        }
+
+        if (value < 50) {
+          return '#21E03E'
+        }
+
+        return '#05C8FF'
+      },
+
+      init () {
+        const ctx = document.querySelector(`#${this.canvasId}`).getContext('2d')
+        const canvasWidth = document.querySelector(`#${this.id}`).offsetWidth
+        const canvasHeight = document.querySelector(`#${this.id}`).offsetHeight
+        const angle = this.ratio / 100 * 2
+        let radian = 0
+
+        ctx.width = canvasWidth
+        ctx.height = canvasHeight
+        const x = canvasWidth / 2
+        const y = canvasHeight / 2
+        ctx.lineWidth = 2
+        ctx.strokeStyle = '#383f56'
+        ctx.beginPath();
+        ctx.arc(x, y, x - 3, 0, 2 * Math.PI)
+        ctx.stroke()
+
+        ctx.beginPath()
+        ctx.lineWidth = 4
+        ctx.strokeStyle = 'rgba(76, 202, 227, 1)'
+
+        if (this.ratio < 25) {
+          radian = 3 / 2 + angle
+          ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
+        } else if (this.ratio === 100) {
+          ctx.arc(x, y, x - 4, 0, Math.PI * 2)
+        } else {
+          radian = (this.ratio - 25) / 100 * 2
+          ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
+        }
+        ctx.stroke()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .DonutChart {
+    position: relative;
+    width: 84px;
+    height: 84px;
+    overflow: hidden;
+
+    .DonutChart-text {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      line-height: 1;
+      transform: translate(-50%, -50%);
+
+      span {
+        margin-bottom: 8px;
+        font-size: 20px;
+        font-weight: bold;
+        color: #CEE1FF;
+      }
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        color: rgba(42, 183, 209, 1);
+      }
+    }
+  }
+</style>