From 6dfb287c9f5e7066eaf69d8e34d38a3f48d68910 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 7 Sep 2022 10:09:26 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=85=B4=E4=B9=89=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppXyDv.vue | 1166 +++++++++++++++++++++++++++++++++++
 1 file changed, 1166 insertions(+)
 create mode 100644 project/dv/apps/AppXyDv.vue

diff --git a/project/dv/apps/AppXyDv.vue b/project/dv/apps/AppXyDv.vue
new file mode 100644
index 00000000..bfdf8949
--- /dev/null
+++ b/project/dv/apps/AppXyDv.vue
@@ -0,0 +1,1166 @@
+<template>
+  <div class="AppPdDv">
+    <div class="left">
+      <div class="appPdDv-title">企微数据库</div>
+      <div class="tab">
+        <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" v-show="leftIndex === 0">
+          <div class="item">
+            <div class="title">居民好友统计</div>
+            <div class="item-top jmhy">
+              <div class="item-top__item">
+                <h2>居民好友</h2>
+                <div class="bottom">
+                  <span>{{ residentInfo.customerTotal || 0 }}</span>
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日新增</h2>
+                <div class="bottom">
+                  <span>{{ residentInfo.addCustomerCount || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日流失</h2>
+                <div class="bottom">
+                  <span>{{ residentInfo.removeCustomerCount || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+            </div>
+            <div class="chart1" style="width: 100%; height: 200px;"></div>
+          </div>
+          <div class="item">
+            <div class="title">各局统计</div>
+            <div class="item-top jmq">
+            </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="replyPercentage ? replyPercentage.replyPercentage : 0" text="昨日"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.weekSum : 0" text="近7天"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.monthSum : 0" text="近1个月"></DonutChart>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">单聊统计</div>
+            <div class="item-top dl">
+              <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
+                <h2>单聊会话</h2>
+                <p>{{ userChatNumber ? userChatNumber.chatCnt : 0 }}</p>
+              </div>
+              <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
+                <h2>单聊消息</h2>
+                <p>{{ userChatNumber ? userChatNumber.messageCnt : 0 }}</p>
+              </div>
+            </div>
+            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 200px;"></div>
+            <div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 200px;"></div>
+          </div>
+          <div class="item item-tags">
+            <div class="title">群聊统计</div>
+            <div class="item-top ql">
+              <div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
+                <h2>活跃群聊</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.chatHasMsg : 0 }}</p>
+              </div>
+              <div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
+                <h2>活跃群成员</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.memberHasMsg : 0 }}</p>
+              </div>
+              <div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
+                <h2>群聊消息</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.msgTotal : 0 }}</p>
+              </div>
+            </div>
+            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 200px;"></div>
+            <div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 200px;"></div>
+            <div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 200px;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="middle">
+      <div class="top">
+        <PdGrid :instance="instance" @nodeClick="onNodeClick"></PdGrid>
+      </div>
+      <div class="bottom">
+        <div class="bottom-title">
+          <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
+          <h2>网格动态</h2>
+        </div>
+        <div class="bottom-list">
+          <div class="item" v-for="item in dynamicList" :key="item.id">
+            <i>{{ item.createTime }}</i>
+            <em>{{ item.logDescription }}</em>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="appPdDv-title">网格信息</div>
+      <div class="right-item top-wrapper">
+        <div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
+        <div class="item-wrapper">
+          <div class="item-top__item">
+            <h2>{{ girdInfo['微网格长'] || 0 }}</h2>
+            <p>微网格长</p>
+          </div>
+          <div class="item-top__item">
+            <h2>{{ girdInfo['居民群'] || 0 }}</h2>
+            <p>居民群</p>
+          </div>
+          <div class="item-top__item">
+            <h2>{{ girdInfo['群成员'] || 0 }}</h2>
+            <p>群成员</p>
+          </div>
+          <div class="item-top__item">
+            <h2>{{ girdInfo['居民好友'] || 0 }}</h2>
+            <p>居民好友</p>
+          </div>
+        </div>
+      </div>
+      <div class="right-item middle-wrapper">
+        <div class="title">分类统计</div>
+        <div class="item-table">
+        </div>
+      </div>
+      <div class="right-item bottom-wrapper">
+        <div class="title">积分排行</div>
+        <div class="item-wrapper">
+          <div class="tab">
+            <div :class="[rightIndex === 0 ? 'active' : '']" @click="rightIndex = 0">累计积分榜</div>
+            <div :class="[rightIndex === 1 ? 'active' : '']" @click="rightIndex = 1">上周积分榜</div>
+          </div>
+          <div class="tab-content">
+            <div class="tab-item" v-for="(item, index) in pointList" :key="index" v-show="rightIndex === 0">
+              <div class="left" :class="'left'+ index">{{ index + 1 }}</div>
+              <div class="middel">
+                <div class="top">
+                  <h2>{{ item.userName }}</h2>
+                  <!-- <span v-if="index === 0">网格长</span> -->
+                </div>
+                <p></p>
+              </div>
+              <i>{{ item.userIntegral }}</i>
+            </div>
+            <div class="tab-item" v-for="(item, index) in rankList" :key="index" v-show="rightIndex === 1">
+              <div class="left" :class="'left'+ index">{{ index + 1 }}</div>
+              <div class="middel">
+                <div class="top">
+                  <h2>{{ item.userName }}</h2>
+                  <!-- <span v-if="index === 0">网格长</span> -->
+                </div>
+                <p></p>
+              </div>
+              <i>{{ item.changeIntegral }}</i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import DonutChart from './components/DonutChart'
+  import PdGrid from './components/PdGrid'
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'AppXyDv',
+    label: '兴义大屏',
+
+    props: {
+      instance: Function,
+      dict: Object,
+    },
+
+    components: {
+      DonutChart,
+      PdGrid
+    },
+
+    data () {
+      return {
+        leftIndex: 0,
+        rightIndex: 0,
+        dlIndex: 0,
+        qlIndex: 0,
+        currGirdName: '',
+        girdInfo: {},
+        gridList: [],
+        userChatNumber: {},
+        residentInfo: {},
+        tagInfo: {},
+        groupNumber: {},
+        replyPercentage: {},
+        groupChatNumber: {},
+        dynamicList: [],
+        rankList: [],
+        pointList: []
+      }
+    },
+
+    created () {
+      this.getInfo()
+      this.getGridInfo()
+    },
+
+    mounted () {
+      document.title = '兴义大屏'
+      this.$nextTick(() => {
+        if (document.querySelector('.AiDvWrapper .viewPanel')) {
+          document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
+        }
+      })
+    },
+
+    methods: {
+      onNodeClick (e) {
+        this.getGridInfo(e)
+      },
+
+      getInfo () {
+        this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
+          if (res.code === 0) {
+            this.pointList = res.data
+          }
+        })
+        this.instance.post(`app/appintegraluser/suffixWeekIntegralSort`).then(res => {
+          if (res.code === 0) {
+            this.rankList = res.data
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
+          if (res.code === 0) {
+            this.residentInfo = res.data['居民统计']
+            this.initLineChart('.chart1', {
+              x: res.data['居民好友数'].map(v => v.month),
+              value: res.data['居民好友数'].map(v => v.totalNumber),
+              name: '居民好友'
+            })
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/replyPercentage`).then(res => {
+          if (res.code === 0) {
+            this.replyPercentage = res.data
+          }
+        })
+        this.instance.post(`/app/appUserOperation/list?size=10000`).then(res => {
+          if (res.code === 0) {
+            this.dynamicList = res.data.records
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
+          if (res.code === 0) {
+            this.groupNumber = res.data['居民群统计']
+            this.initLineChart('.chart2', {
+              x: res.data['群成员数'].map(v => v.month),
+              value: res.data['群成员数'].map(v => v.totalNumber),
+              name: '居民群'
+            })
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
+          if (res.code === 0) {
+            this.tagInfo = res.data
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
+          if (res.code === 0) {
+            this.userChatNumber = res.data['单聊总和']
+            this.initBarChart('.chart4', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.messageCnt),
+              name: '单聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
+            ])
+            this.initBarChart('.chart3', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatCnt),
+              name: '单聊会话'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
+          this.groupChatNumber = res.data['群聊总和']
+          if (res.code === 0) {
+            this.initBarChart('.chart5', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatHasMsg),
+              name: '活跃群聊'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
+            ])
+            this.initBarChart('.chart6', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.memberHasMsg),
+              name: '活跃群成员'
+            }, [
+              {offset: 0, color: 'rgba(255, 190, 66, 1)'},
+              {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
+            ])
+            this.initBarChart('.chart7', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.msgTotal),
+              name: '群聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+      },
+
+      getGridInfo (id) {
+        this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.girdInfo = res.data
+          }
+        })
+        this.instance.post(`/app/wxcp/wxgroup/listBtGridId?size=1000&girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.gridList = res.data.records
+          }
+        })
+      },
+
+      initLineChart (el, data) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option = {
+          xAxis: {
+            type: 'category',
+            data: data.x,
+            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: data.value,
+              type: 'line',
+              label: {
+                show: false,
+                position: 'top',
+                color: '#fff'
+              },
+              name: data.name,
+              areaStyle: {},
+              barWidth: 16,
+              barCategoryGap: 40,
+              itemStyle: {}
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      },
+
+      initBarChart (el, data, color) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option
+
+        option = {
+          xAxis: {
+            type: 'category',
+            data: data.x,
+            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: color
+            }
+          ],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '14%',
+            left: '1%',
+            right: '0%',
+            bottom: '0%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: data.value,
+              name: data.name,
+              type: 'bar',
+              label: {
+                show: false,
+                position: 'top',
+                color: '#fff'
+              },
+              barWidth: 8,
+              barCategoryGap: 40,
+              itemStyle: {}
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppPdDv {
+    display: flex;
+    height: 100%;
+    padding-top: 24px;
+    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
+    background-size: 100% 100%;
+
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background: rgba(93, 163, 255, 0.1);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: rgba(173, 208, 255, 0.5);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .DonutChart-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 84px;
+      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;
+            }
+          }
+        }
+      }
+    }
+
+    .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;
+      left: 10px;
+      z-index: 1;
+      width: 146px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 10px;
+      font-family: YouSheBiaoTiHei;
+      color: #FFFFFF;
+      font-weight: bold;
+      transform: translateY(-50%);
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/b-title__bg.png);
+      background-size: 100% 100%;
+    }
+
+    .title {
+      width: 154px;
+      height: 42px;
+      margin-bottom: 8px;
+      padding: 4px 0 0 34px;
+      color: #fff;
+      font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
+      background-size: 100% 100%;
+    }
+
+    & > .left {
+      position: relative;
+      width: 360px;
+      height: 100%;
+      padding: 36px 12px 12px;
+      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
+      border-radius: 8px;
+      border: 1px solid #030D1C;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 15px;
+        border: 1px solid #0E6EB5;
+
+        div {
+          flex: 1;
+          line-height: 32px;
+          text-align: center;
+          color: #fff;
+          font-size: 14px;
+          cursor: pointer;
+          user-select: none;
+
+          &.active {
+            background: #0F93B8;
+          }
+        }
+      }
+
+      .jmhy {
+        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;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm1.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/jm2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #5ADA92;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #FF5655;
+            }
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-right: 2px;
+              font-size: 14px;
+              color: #fff;
+              font-weight: bold;
+              font-style: oblique;
+            }
+
+            img {
+              position: relative;
+              top: 2px;
+            }
+          }
+        }
+      }
+
+      .jmq {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .item-top__item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 78px;
+          height: 52px;
+          line-height: 1;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq1.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/jmq2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #2AB7D1;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #5ADA92;
+            }
+          }
+
+          &:nth-of-type(4) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq4.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #FF5655;
+            }
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-right: 2px;
+              font-size: 14px;
+              color: #fff;
+              font-weight: bold;
+              font-style: oblique;
+            }
+
+            img {
+              position: relative;
+              top: 2px;
+            }
+          }
+        }
+      }
+
+      .chart1 {
+        margin: 10px 0 18px;
+      }
+
+      .item-tags {
+        margin-top: 20px;
+
+        .item-bottom__item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          height: 36px;
+          padding: 0 20px 0 39px;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/tag-title.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #aeacaf;
+            font-size: 13px;
+          }
+
+          span {
+            color: #FFFFFF;
+            font-size: 16px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    & > .middle {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100%;
+      margin: 0 16px;
+
+      .top {
+        flex: 1;
+        margin-bottom: 29px;
+      }
+
+      .bottom {
+        width: 100%;
+        height: 160px;
+        padding: 20px 24px;
+        background: rgba(15,20,47,0.5000);
+        box-shadow: inset 0px 0px 24px 4px rgba(163,247,255,0.7000);
+        border-radius: 8px;
+
+        .bottom-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          h2 {
+            margin-left: 4px;
+            font-size: 16px;
+            font-family: MicrosoftYaHeiSemibold;
+            color: #FFFFFF;
+            text-shadow: 0px 0px 10px #1C2F92;
+          }
+        }
+
+        .bottom-list {
+          height: 80px;
+          overflow-y: auto;
+
+          .item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            font-size: 14px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            i {
+              margin-right: 24px;
+              color: #aeacaf;
+              font-style: normal;
+              font-size: 14px;
+            }
+
+            span {
+              color: #FFD458;
+            }
+
+            em {
+              font-style: normal;
+              color: #2CF0F4;
+            }
+          }
+        }
+      }
+    }
+
+    & > .right {
+      position: relative;
+      width: 360px;
+      height: 100%;
+      padding: 36px 12px 12px;
+      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
+      border-radius: 8px;
+      border: 1px solid #030D1C;
+
+      .top-wrapper {
+        margin-bottom: 23px;
+
+        .item-wrapper {
+          display: flex;
+          align-items: center;
+
+          .item-top__item {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1;
+            margin-right: 8px;
+            width: 78px;
+            height: 66px;
+            border-radius: 4px;
+            border: 1px solid #23A0AC;
+
+            h2 {
+              margin-bottom: 4px;
+              color: #fff;
+              font-size: 20px;
+            }
+
+            p {
+              color: #2AF0F8;
+              font-size: 12px;
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+
+      .middle-wrapper {
+        margin-bottom: 23px;
+
+        .item-table {
+          .item-table__header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 40px;
+            padding: 0 24px;
+            color: #82C5FF;
+            font-size: 14px;
+            background: rgba(35,160,172,0.2000);
+          }
+
+          .item-table__body {
+            height: 280px;
+            overflow-y: overlay;
+
+            .item-table__item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              height: 40px;
+              padding: 0 24px;
+              color: #fff;
+              font-size: 14px;
+              background: rgba(35,160,172,0.2000);
+
+              &:nth-of-type(2n - 1) {
+                background: transparent;
+              }
+
+              span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+
+      .bottom-wrapper {
+        .tab {
+          display: flex;
+          align-items: center;
+          height: 32px;
+          margin-bottom: 15px;
+          border: 1px solid #0E6EB5;
+
+          div {
+            flex: 1;
+            line-height: 32px;
+            text-align: center;
+            color: #fff;
+            font-size: 14px;
+            cursor: pointer;
+            user-select: none;
+
+            &.active {
+              background: #0F93B8;
+            }
+          }
+        }
+
+        .tab-content {
+          height: 230px;
+          overflow-y: auto;
+          .tab-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .left {
+              width: 22px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              color: #fff;
+              font-size: 14px;
+              background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon3.png);
+              background-size: 100% 100%;
+
+              &.left0 {
+                background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon1.png);
+                background-size: 100% 100%;
+              }
+
+              &.left1 {
+                background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon2.png);
+                background-size: 100% 100%;
+              }
+            }
+
+            i {
+              position: relative;
+              color: #fff;
+              font-size: 12px;
+              font-style: normal;
+              transform: translateY(50%);
+            }
+
+            .middel {
+              width: 250px;
+              margin: 0 8px;
+
+              p {
+                width: 100%;
+                height: 8px;
+                background: linear-gradient(270deg, #51BF34 0%, #257718 100%);
+                border: 1px solid;
+                border-image: linear-gradient(270deg, rgba(96, 255, 99, 1), rgba(13, 156, 17, 1)) 1 1;
+              }
+
+              .top {
+                display: flex;
+                align-items: center;
+                margin-bottom: 4px;
+
+                h2 {
+                  margin-right: 4px;
+                  color: #FFFFFF;
+                  font-size: 14px;
+                }
+
+                span {
+                  width: 48px;
+                  height: 20px;
+                  line-height: 20px;
+                  text-align: center;
+                  color: #2AF0F8;
+                  font-size: 12px;
+                  background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%);
+                  border: 1px solid;
+                  border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

From 022a15cc9d54e28c7b156e0cd74a1d00a2c72442 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 7 Sep 2022 14:04:21 +0800
Subject: [PATCH 2/4] =?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/AppXyDv.vue | 161 ++++++++++++++++++++++++++++++------
 1 file changed, 136 insertions(+), 25 deletions(-)

diff --git a/project/dv/apps/AppXyDv.vue b/project/dv/apps/AppXyDv.vue
index bfdf8949..6e140eef 100644
--- a/project/dv/apps/AppXyDv.vue
+++ b/project/dv/apps/AppXyDv.vue
@@ -130,6 +130,22 @@
       <div class="right-item middle-wrapper">
         <div class="title">分类统计</div>
         <div class="item-table">
+          <div class="left">
+            <div class="chart10" style="width: 100%; height: 240px;"></div>
+            <div class="left-text">
+              <h2>240</h2>
+              <span>总数</span>
+            </div>
+          </div>
+          <div class="right">
+            <div class="right-item" v-for="(item, index) in 5" :key="index">
+              <div class="right-item__left">
+                <i></i>
+                <span>类型A</span>
+              </div>
+              <p>类型A</p>
+            </div>
+          </div>
         </div>
       </div>
       <div class="right-item bottom-wrapper">
@@ -220,6 +236,14 @@
         if (document.querySelector('.AiDvWrapper .viewPanel')) {
           document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
         }
+
+        this.initChart5('.chart10', [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' }
+        ])
       })
     },
 
@@ -227,6 +251,60 @@
       onNodeClick (e) {
         this.getGridInfo(e)
       },
+      initChart5 (el, data) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option = {
+          color: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#DBE8FF', '#FD6C39'],
+          tooltip: {
+            trigger: 'item'
+          },
+          grid: {
+            top: '0%',
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            height: 230,
+            containLabel: true
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: ['50%', '70%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 0,
+                borderColor: '#030D1C',
+                borderWidth: 3
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: false,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 1048, name: 'Search Engine' },
+                { value: 735, name: 'Direct' },
+                { value: 580, name: 'Email' },
+                { value: 484, name: 'Union Ads' },
+                { value: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      },
 
       getInfo () {
         this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
@@ -1019,39 +1097,72 @@
         margin-bottom: 23px;
 
         .item-table {
-          .item-table__header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 40px;
-            padding: 0 24px;
-            color: #82C5FF;
-            font-size: 14px;
-            background: rgba(35,160,172,0.2000);
-          }
+          position: relative;
+          height: 240px;
 
-          .item-table__body {
-            height: 280px;
-            overflow-y: overlay;
+          .left {
+            position: relative;
+            left: -70px;
+            height: 240px;
 
-            .item-table__item {
+            .left-text {
               display: flex;
               align-items: center;
-              justify-content: space-between;
-              height: 40px;
-              padding: 0 24px;
-              color: #fff;
-              font-size: 14px;
-              background: rgba(35,160,172,0.2000);
+              justify-items: center;
+              flex-direction: column;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              z-index: 11;
+              line-height: 1;
+              transform: translate(-50%, -50%);
 
-              &:nth-of-type(2n - 1) {
-                background: transparent;
+              h2 {
+                font-size: 36px;
+                color: #fff;
               }
 
               span {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+                margin-top: 4px;
+                color: #a4adbd;
+                font-size: 20px;
+              }
+            }
+          }
+
+          .right {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: 111;
+            transform: translateY(-50%);
+
+            .right-item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .right-item__left {
+                display: flex;
+                align-items: center;
+                margin-right: 40px;
+
+                i {
+                  width: 14px;
+                  height: 14px;
+                  margin-right: 8px;
+                  background: #2891FF;
+                }
+
+                span {
+                  font-size: 14px;
+                  color: #fff;
+                }
+              }
+
+              P {
+                color: #fff;
+                font-size: 14px;
               }
             }
           }

From db431af91649fa1d55fb2265b2edda5db9c1d033 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 7 Sep 2022 14:33:19 +0800
Subject: [PATCH 3/4] =?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/AppXyDv.vue | 91 +++++++++++++++----------------------
 1 file changed, 36 insertions(+), 55 deletions(-)

diff --git a/project/dv/apps/AppXyDv.vue b/project/dv/apps/AppXyDv.vue
index 6e140eef..cb1c852e 100644
--- a/project/dv/apps/AppXyDv.vue
+++ b/project/dv/apps/AppXyDv.vue
@@ -37,6 +37,24 @@
           <div class="item">
             <div class="title">各局统计</div>
             <div class="item-top jmq">
+              <div class="header">
+                <span>居民群</span>
+                <span>公安局</span>
+                <span>群成员</span>
+              </div>
+              <div class="item-top__list">
+                <div class="item" v-for="(item, index) in 10" :key="index">
+                  <div class="left">
+                    <span>65</span>
+                    <div style="width: 50%"></div>
+                  </div>
+                  <h2>兴义</h2>
+                  <div class="right">
+                    <div style="width: 50%"></div>
+                    <span>32144</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -879,70 +897,33 @@
       }
 
       .jmq {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 10px;
-
-        .item-top__item {
+        .header {
           display: flex;
           align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          width: 78px;
-          height: 52px;
-          line-height: 1;
-          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq1.png);
-          background-size: 100% 100%;
+          justify-content: space-between;
+          height: 40px;
+          padding: 0 25px;
+          background: rgba(14,110,181,0.10);
+          border: 1px solid #0E6EB5;
 
-          h2 {
-            margin-bottom: 4px;
-            color: #2AB7D1;
-            font-size: 12px;
+          span {
+            color: #fff;
+            font-size: 15px;
           }
+        }
 
-          &:nth-of-type(2) {
-            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq2.png);
-            background-size: 100% 100%;
+        .item-top__list {
+          height: 400px;
+          overflow-y: auto;
 
-            h2 {
-              color: #2AB7D1;
-            }
-          }
-
-          &:nth-of-type(3) {
-            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq3.png);
-            background-size: 100% 100%;
-
-            h2 {
-              color: #5ADA92;
-            }
-          }
-
-          &:nth-of-type(4) {
-            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq4.png);
-            background-size: 100% 100%;
-
-            h2 {
-              color: #FF5655;
-            }
-          }
-
-          .bottom {
+          .item {
             display: flex;
             align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
 
-            span {
-              margin-right: 2px;
-              font-size: 14px;
-              color: #fff;
-              font-weight: bold;
-              font-style: oblique;
-            }
-
-            img {
-              position: relative;
-              top: 2px;
+            div {
+              flex: 1;
             }
           }
         }

From 85caf086b76d96a875d527b457ab6c9690f3bc7a Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 7 Sep 2022 14:54:36 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=85=B4=E4=B9=89=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppXyDv.vue | 52 ++++++++++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/project/dv/apps/AppXyDv.vue b/project/dv/apps/AppXyDv.vue
index cb1c852e..5807af5e 100644
--- a/project/dv/apps/AppXyDv.vue
+++ b/project/dv/apps/AppXyDv.vue
@@ -46,11 +46,15 @@
                 <div class="item" v-for="(item, index) in 10" :key="index">
                   <div class="left">
                     <span>65</span>
-                    <div style="width: 50%"></div>
+                    <div class="rate-wrapper">
+                      <span class="rate" style="width: 40%"></span>
+                    </div>
                   </div>
                   <h2>兴义</h2>
                   <div class="right">
-                    <div style="width: 50%"></div>
+                    <div class="rate-wrapper">
+                      <span class="rate" style="width: 100%"></span>
+                    </div>
                     <span>32144</span>
                   </div>
                 </div>
@@ -914,16 +918,58 @@
 
         .item-top__list {
           height: 400px;
+          padding: 10px 0;
           overflow-y: auto;
 
           .item {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 10px 0;
+            padding: 10px 4px;
+
+            .left .rate-wrapper {
+              flex-direction: row-reverse;
+            }
 
             div {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
               flex: 1;
+
+              .rate-wrapper {
+                width: 100%;
+                padding: 0 10px;
+              }
+
+              .rate {
+                height: 10px;
+                text-align: right;
+                background-image: linear-gradient(270deg, rgba(255,208,63,0.00) 0%, rgba(255,208,63,0.80) 100%);
+              }
+            }
+
+            .right {
+              .rate {
+                background-image: linear-gradient(270deg, rgba(0,240,251,0.80) 0%, rgba(0,240,251,0.00) 100%);
+              }
+            }
+
+            h2 {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: #FFFFFF;
+              font-size: 16px;
+              text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
+              background: #fff;
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+
+            span {
+              color: #aeacaf;
+              font-size: 15px;
             }
           }
         }