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] =?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>