<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 class="item-top__item">
                <h2>居民群</h2>
                <div class="bottom">
                  <span>{{ groupNumber.groupSum || 0 }}</span>
                </div>
              </div>
              <div class="item-top__item">
                <h2>群成员</h2>
                <div class="bottom">
                  <span>{{ groupNumber.totalSum || 0 }}</span>
                </div>
              </div>
              <div class="item-top__item">
                <h2>昨日新增</h2>
                <div class="bottom">
                  <span>{{ groupNumber.increaseSum || 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>{{ groupNumber.decreaseSum || 0 }}</span>
                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
                </div>
              </div>
            </div>
            <div class="chart2" style="width: 100%; height: 200px;"></div>
          </div>
          <div class="item item-tags">
            <div class="title">标签人群</div>
            <div class="item-bottom">
              <div class="item-bottom__item">
                <h2>高龄老人</h2>
                <span>{{ tagInfo.elderlyPeople || 0 }}</span>
              </div>
              <div class="item-bottom__item">
                <h2>精神病人</h2>
                <span>{{ tagInfo.mentalIllness || 0 }}</span>
              </div>
              <div class="item-bottom__item">
                <h2>贫困居民</h2>
                <span>{{ tagInfo.poorResidents || 0 }}</span>
              </div>
            </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 class="item-table__header">
            <span style="width: 110px">居民群</span>
            <span style="flex: 1; text-align: center;">群主</span>
            <span style="width: 60px; text-align: right;">群人数</span>
          </div>
          <div class="item-table__body">
            <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
              <span style="width: 110px" :title="item.name">{{ item.name || '未命名群聊' }}</span>
              <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
              <span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
            </div>
          </div>
        </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: 'AppPdDv',
    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>
