dvcp_v2_webapp/packages/bigscreen/dv/AppQxnDv.vue

<template>
  <div class="AppQxnDv">
    <div class="left">
      <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
      </AiDvPanel>
      <div class="left-list">
        <div
          class="left-item"
          v-for="(item, index) in areaList"
          :class="[gridParentId === item.gridId ? 'active' : '']"
          :key="index"
          @click="init(item.gridId)">
          <i>{{ index + 1 }}</i>
          <div class="left-item__top">
            <h2>{{ item.gridName }}</h2>
            <el-select v-model="gridId" size="mini" @change="onChange" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
              <el-option
                :label="item.gridName"
                :value="item.gridId"
                v-for="(item, index) in policeStationList"
                :key="index">
              </el-option>
            </el-select>
          </div>
          <div class="left-item__bottom">
            <span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
            <span>成员：{{ item.allGridMemberCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-left">
        <AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
          <div class="right-left__total AppQxnDv-total">
            <div class="item">
              <h2>全部人员数</h2>
              <div class="item-bottom">
                <span>{{  wjwqgkInfo['群人数'] ? wjwqgkInfo['群人数'] + wjwqgkInfo['添加好友数'] : 0 }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>群人数</h2>
              <div class="item-bottom">
                <span>{{ wjwqgkInfo['群人数'] }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>添加好友数</h2>
              <div class="item-bottom">
                <span>{{ wjwqgkInfo['添加好友数'] }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>昨日新增</h2>
              <div class="item-bottom">
                <span>{{ wjwqgkInfo['昨日新增'] }}</span>
                <i>人</i>
              </div>
            </div>
          </div>
          <div class="wrapper">
            <div class="AppQxnDv-title">
              <h2>增长情况</h2>
            </div>
            <ai-echart-v2
              style="height: 200px; width: 500px;"
              :ref="'chart'"
              :data="zzData"
              :ops="lineChart1">
            </ai-echart-v2>
          </div>
          <div class="right-left__middle">
            <div class="left">
              <div class="wrapper">
                <div class="AppQxnDv-title">
                  <h2>覆盖率</h2>
                </div>
                <DoughnutChart :ratio="fglRate" :value="fglData"></DoughnutChart>
              </div>
              <div class="wrapper">
                <div class="AppQxnDv-title">
                  <h2>群标签化率</h2>
                </div>
                <DoughnutChart :ratio="qbqRate" :value="qbqlData"></DoughnutChart>
              </div>
            </div>
            <div class="right wrapper">
              <div class="AppQxnDv-title">
                <h2>群标签情况</h2>
                <!-- <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
                  <el-option label="XXX派出所" value="1"></el-option>
                  <el-option label="XXX派出所" value="2"></el-option>
                  <el-option label="XXX派出所" value="3"></el-option>
                </el-select> -->
              </div>
              <ai-echart-v2
                style="height: 220px; width: 100%; margin-top: 10px;"
                :ref="'chart2'"
                :data="lineData1"
                :ops="barChart8">
              </ai-echart-v2>
            </div>
          </div>
          <div class="right-left__bottom">
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>单位成员关系人数</h2>
              </div>
              <ai-echart-v2
                style="height: 236px; width: 100%; margin-top: 10px;"
                :ref="'chart2'"
                :data="dwData"
                :ops="barChart8">
              </ai-echart-v2>
            </div>
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>群人数规模分布</h2>
              </div>
              <ai-echart-v2
                style="height: 160px; width: 100%; margin-top: 20px;"
                :ref="'chart2'"
                :data="qrsGmData"
                :ops="pieChart">
              </ai-echart-v2>
            </div>
          </div>
        </AiDvPanel>
      </div>
      <div class="right-middle">
        <AiDvPanel style="width: 100%" border="border6" title="综合概况图">
          <div class="right-left__total AppQxnDv-total">
            <div class="item">
              <h2>分局数量</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['分局数量'] }}</span>
                <i>个</i>
              </div>
            </div>
            <div class="item">
              <h2>派出所</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['派出所数量'] }}</span>
                <i>个</i>
              </div>
            </div>
            <div class="item">
              <h2>成员总数</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['成员总数'] }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>已激活</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['已激活'] }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>末激活</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['未激活'] }}</span>
                <i>人</i>
              </div>
            </div>
          </div>
          <div class="wrapper" style="position: relative;">
            <DvMap :instance="instance" style="width: 100%; height: 376px;"></DvMap>
            <div class="total-info">
              <div class="total-info__item">
                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
                <span>民警人数</span>
                <i>{{ middleTotalInfo['民警'] }}</i>
              </div>
              <div class="total-info__item">
                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
                <span>辅警人数</span>
                <i>{{ middleTotalInfo['辅警'] }}</i>
              </div>
              <div class="total-info__item">
                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
                <span>其他</span>
                <i>{{ middleTotalInfo['成员总数'] ? middleTotalInfo['成员总数'] - middleTotalInfo['民警'] - middleTotalInfo['辅警'] : 0 }}</i>
              </div>
            </div>
          </div>
          <div class="right-middle__middle">
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>成员激活</h2>
              </div>
              <DoughnutChart
                :ratio="cyjhRate"
                :value="cyjhData">
              </DoughnutChart>
            </div>
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>日均活跃率</h2>
              </div>
              <DoughnutChart
                :ratio="rjhyRate"
                :value="rjhyData">
              </DoughnutChart>
            </div>
          </div>
          <div class="right-middle__bottom">
            <div class="AppQxnDv-title">
              <h2>近期成员使用分布</h2>
            </div>
            <ai-echart-v2
              style="height: 236px; width: 100%;"
              :ref="'chart'"
              :data="cyfbData"
              :ops="lineChart2">
            </ai-echart-v2>
          </div>
        </AiDvPanel>
      </div>
      <div class="right-right">
        <AiDvPanel style="height: auto;" border="border6" title="群动态概况">
          <div class="right-left__total AppQxnDv-total">
            <div class="item">
              <h2>群总数</h2>
              <div class="item-bottom">
                <span>{{ wxGroupOverview['群数量'] }}</span>
                <i>个</i>
              </div>
            </div>
            <div class="item">
              <h2>群主人数</h2>
              <div class="item-bottom">
                <span>{{ wxGroupOverview['群主人数'] }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>群人员活跃数(30天)</h2>
              <div class="item-bottom">
                <span>{{ wxGroupOverview['群人员活跃度(30天)'] }}</span>
                <i>人</i>
              </div>
            </div>
            <div class="item">
              <h2>群消息数(30天)</h2>
              <div class="item-bottom">
                <span>{{ wxGroupOverview['群消息数(30天)'] }}</span>
                <i>个</i>
              </div>
            </div>
          </div>
          <div class="right-right__top">
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>群活跃率(7日）</h2>
              </div>
              <DoughnutChart
                :ratio="qhyRate"
                :value="qhyData">
              </DoughnutChart>
            </div>
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>成员活跃(7日）</h2>
              </div>
              <DoughnutChart
                :ratio="rhyRate"
                :value="rhyData">
              </DoughnutChart>
            </div>
          </div>
          <div class="right-left__middle">
            <div class="AppQxnDv-title">
              <h2>各单位群主及群分布</h2>
            </div>
            <ai-echart-v2
              style="height: 230px; width: 100%; margin-top: 10px;"
              :ref="'chart5'"
              :data="barChartData"
              :ops="barChart">
            </ai-echart-v2>
          </div>
        </AiDvPanel>
        <AiDvPanel class="bottom" style="width: 100%" border="border6" title="群动态多维度排行">
          <ai-table
            width="100%"
            max-height="320px"
            height="310px"
            :tableData="tableList"
            :col-configs="colConfigs"
            :isShowPagination="false"
            @getList="() => {}">
            <el-table-column slot="index" label="排名" align="center" width="38">
              <template slot-scope="{ $index }">
                <div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
          </ai-table>
        </AiDvPanel>
      </div>
    </div>
  </div>
</template>

<script>
  import DvMap from './components/DvMap'
  import DoughnutChart from './components/DoughnutChart'
  export default {
    name: 'AppQxnDv',
    label: '警民互联',

    props: {
      instance: Function,
      dict: Object,
    },

    components: {
      DvMap,
      DoughnutChart
    },

    data ()  {
      return {
        isShowInfo: false,
        lineData: [
          {
            "name": "阿斯达",
            "v1": 23,
            "v2": 33
          },
          {
            "name": "水电费",
            "v1": 12,
            "v2": 34
          },
          {
            "name": "凡哥",
            "v1": 67,
            "v2": 25
          },
          {
            "name": "党费",
            "v1": 98,
            "v2": 85
          }
        ],
        lineData1: [
          {
            "name": "1月",
            "v1": 23
          },
          {
            "name": "2月",
            "v1": 12
          },
          {
            "name": "3月",
            "v1": 67
          },
          {
            "name": "4月",
            "v1": 98
          }
        ],
        lineChart1: {
          legend: {
            icon: 'roundRect',
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '35px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          color: ['#7AA3CC', '#33CCCC'],
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisPointer: { snap: true }
          },
          daemon: (color) => ({
            showSymbol: false,
            smooth: true,
            lineStyle: {
              shadowBlur: 4,
              shadowOffsetY: 2,
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
                ]
              }
            }
          })
        },
        lineChart2: {
          legend: {
            show: false
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '35px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          color: ['#33CCCC', '#33CCCC'],
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisPointer: { snap: true }
          },
          daemon: (color) => ({
            showSymbol: false,
            smooth: true,
            lineStyle: {
              shadowBlur: 4,
              shadowOffsetY: 2,
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
                ]
              }
            }
          })
        },
        barChart8: {
          legend: {
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          yAxis: {
            type: 'category',
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisTick: {show: false},
          },
          xAxis: {
            nameGap: 23, minInterval: 1,
            splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          color: ['#65E0DE', '#E7C074', '#7AA3CC'],
          series: [
            {
              name: '民警',
              type: 'bar',
              barWidth: '15',
              stack: 'one'
            },
            {
              name: '辅警',
              barWidth: '15',
              type: 'bar',
              stack: 'one'
            },
            {
              name: '其他',
              barWidth: '15',
              type: 'bar',
              stack: 'one'
            }
          ]
        },
        barChart: {
          legend: {
            icon: 'roundRect',
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '35px',
            containLabel: true
          },
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 10, rotate: 30},
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
            axisPointer: { show: false },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          axisPointer: {
            type: 'shadow',
            triggerTooltip: false,
            shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
          },
          color: [
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: 'rgba(51, 204, 204, 1)' },
                { offset: 0, color: 'rgba(31, 89, 89, 0.25)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
                { offset: 1, color: 'rgba(219, 179, 110, 1)' }
              ]
            }
          ],
          series: [
            {
              name: '群主数量',
              type: 'bar',
              barWidth: '15'
            },
            {
              name: '群数量',
              barWidth: '15',
              type: 'bar'
            }
          ]
        },
        pieChart: {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          legend: {
            show: false
          },
          grid: {
            left: '0%',
            top: '6%',
            right: '0%',
            bottom: '6%'
          },
          yAxis: {
            axisLine: {show: false},
          },
          xAxis: {
            axisLine: {show: false},
          },
          color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
          series: [
            {
              type: 'pie',
              radius: ['50%', '66%'],
              labelLine:{
                normal:{
                  length: 2,
                  lineStyle: {
                    color: '#526D7A'
                  }
                }
              },
              label: {
                show: true,
                normal: {
                  textStyle: {
                    color: '#9BB7D4',
                    fontSize: 10
                  }
                }
              }
            }
          ]
        },
        policeStationList: [],
        areaList: [],
        gridId: '',
        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
        middleTotalInfo: {},
        cyActivityInfo: {},
        wxGroupOverview: {},
        wjwqgkGMFBInfo: {},
        wjwqgkInfo: {},
        colConfigs: [
          { slot: 'index' },
          { prop: 'ownerName',  label: '姓名', align: 'left', width: 58 },
          { prop: 'deptName',  label: '单位', align: 'left' },
          { prop: 'groupCount', label: '群数量', align: 'center', width: 56 },
          { prop: 'groupMemberCount', label: '群人员', align: 'center', width: 56 },
          { prop: 'newMemberCount',  label: '新增群人员', align: 'center', width: 80 },
          // { prop: 'hasMsgGroupCount', label: '有消息的群', align: 'center', width: 80 },
          { prop: 'msgCount', label: '群聊人数', align: 'center', width: 80 },
          { prop: 'hasMsgMemberCount', label: '群消息总数', align: 'center', width: 80 }
        ]
      }
    },

    computed: {
      rjhyData () {
        return [{key: '活跃成员', value: (this.cyActivityInfo['活跃成员总数(7日)'] / 7).toFixed(0)}, {key: '激活成员', value: this.cyActivityInfo['已激活']}]
      },

      rjhyRate () {
        if (!this.cyActivityInfo['已激活']) {
          return 0
        }

        return Number((((this.cyActivityInfo['活跃成员总数(7日)'] / 7).toFixed(0) / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
      },

      qbqlData () {
        return [{key: '已打标签', value: 2938}, {key: '未打标签', value: 2283}]
      },

      qbqRate () {
        return 26.27
        if (!this.cyActivityInfo['已激活']) {
          return 0
        }

        return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
      },
      fglData () {
        return [{key: '已关联人数', value: 726079}, {key: '地区户籍数', value: 3015112}]
      },

      fglRate () {
        return 24.08
        if (!this.cyActivityInfo['已激活']) {
          return 0
        }

        return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
      },

      cyjhData () {
        return [{key: '已激活', value: this.cyActivityInfo['已激活']}, {key: '未激活', value: this.cyActivityInfo['未激活']}]
      },

      cyjhRate () {
        if (!this.cyActivityInfo['已激活']) {
          return 0
        }

        return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
      },

      qhyData () {
        return [{key: '活跃居民群', value: this.wxGroupOverview['活跃居民群数量(7天)']}, {key: '全部居民群', value: this.wxGroupOverview['群数量']}]
      },

      qhyRate () {
        if (!this.wxGroupOverview['活跃居民群数量(7天)']) {
          return 0
        }

        return Number(((this.wxGroupOverview['活跃居民群数量(7天)'] / (this.wxGroupOverview['群数量'] * 7)) * 100).toFixed(2))
      },

      rhyData () {
        return [{key: '活跃成员', value: (this.wxGroupOverview['活跃群成员数量(7天)'] / 7).toFixed(0)}, {key: '群成员  ', value: (this.wxGroupOverview['群成员数量'] / 7).toFixed(0)}]
      },

      rhyRate () {
        if (!this.wxGroupOverview['群成员数量']) {
          return 0
        }

        return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'])) * 100).toFixed(2))
      },

      cyfbData () {
        if (!this.cyActivityInfo['成员使用分布']) {
          return []
        }

        return this.cyActivityInfo['成员使用分布'].map(v => {
          return {
            '日期': v['日期'],
            '活跃用户数': v['活跃用户数']
          }
        })
      },

      barChartData () {
        if (!this.wxGroupOverview['各单位群主及群分布']) {
          return []
        }

        return this.wxGroupOverview['各单位群主及群分布'].map(v => {
          return {
            'name': v['网格名称'],
            '群主数量': v['群主数量'],
            '群数量': v['群数量']
          }
        })
      },

      dwData () {
        if (!this.wjwqgkGMFBInfo.length) {
          return []
        }

        return this.wjwqgkGMFBInfo.map(v => {
          return {
            '规模': v['规模'],
            '民警': v['民警'],
            '辅警': v['辅警'],
            '其他': v['其他']
          }
        })
      },

      qrsGmData () {
        if (!this.wjwqgkGMFBInfo.length) {
          return []
        }

        return this.wjwqgkGMFBInfo.map(v => {
          return {
            '群人数规模分布': v['规模'],
            v: v['群数量']
          }
        })
      },

      tableList () {
        const list = this.wxGroupOverview['群动态多维度排行']
        if (!list) {
          return []
        }

        return list
      },

      zzData () {
        if (!this.wjwqgkInfo['增长情况']) {
          return []
        }

        return this.wjwqgkInfo['增长情况'].map(v => {
          return {
            '月份': v['月份'] + '月',
            '居民人数': v['居民人数'],
            '新增居民': v['新增居民']
          }
        })
      }
    },

    mounted () {
      this.init()
    },

    methods: {
      onChange () {
        this.$nextTick(() => {
          this.instance.post(`/api/wxgridinfo/tree`, null, {
            params: {
              gridParentId: this.gridId,
              corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
            }
          }).then(res => {
            if (res.code === 0) {
              this.getInfo()
            }
          })
        })
      },

      init (gridId) {
        this.gridId = ''
        this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
        this.instance.post(`/api/wxgridinfo/tree`, null, {
          params: {
            gridParentId: gridId || '',
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            if (gridId) {
              this.policeStationList = res.data
            } else {
              this.areaList = res.data
            }

            this.getInfo()
          }
        })
      },

      getInfo () {
        this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            this.middleTotalInfo = res.data
          }
        })

        this.instance.post(`/api/wxgridinfo/wxGroupOverview`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId
          }
        }).then(res => {
          if (res.code === 0) {
            this.wxGroupOverview = res.data
          }
        })

        this.instance.post(`/api/wxgridinfo/wjwqgk`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId
          }
        }).then(res => {
          if (res.code === 0) {
            this.wjwqgkInfo = res.data
          }
        })

        this.instance.post(`/api/wxgridinfo/wjwqgkGMFB`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId
          }
        }).then(res => {
          if (res.code === 0) {
            this.wjwqgkGMFBInfo = res.data
          }
        })

        this.instance.post(`/api/wxgridinfo/cyActivity`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId
          }
        }).then(res => {
          if (res.code === 0) {
            this.cyActivityInfo = res.data
          }
        })
      },

      Hex2RGBA(color, alpha = 1) {
        let hex = 0;
        if (color.charAt(0) == "#") {
          if (color.length == 4) {
            //检测诸如#FFF简写格式
            color = "#" + color.charAt(1).repeat(2) +
                color.charAt(2).repeat(2) +
                color.charAt(3).repeat(2);
          }
          hex = parseInt(color.slice(1), 16);
        }
        let r = hex >> 16 & 0xFF;
        let g = hex >> 8 & 0xFF;
        let b = hex & 0xFF;
        return `rgba(${r},${g},${b},${alpha})`;
      },

      RGBtoHex(r, g, b) {
        let hex = r << 16 | g << 8 | b;
        return "#" + hex.toString(16);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppQxnDv {
    display: flex;
    justify-content: center;
    height: 100%;
    padding-top: 16px;
    box-sizing: border-box;
    background: #0c0c0c;
    overflow: hidden;

    .table-index {
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        width: 22px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #42BED5;
      }

      &.table-index__active span {
        border-color: #EDAA38;
      }
    }

    .wrapper {
      flex: 1;
      margin-bottom: 12px;
    }

    .total-info {
      display: flex;
      position: absolute;
      flex-direction: column;
      right: 11px;
      top: 26px;
      z-index: 11;

      .total-info__item {
        display: flex;
        align-items: center;
        margin-bottom: 11px;

        &:last-child {
          margin-bottom: 0;
        }

        img {
          width: 22px;
          height: 22px;
        }

        span {
          width: 60px;
          margin: 0 16px 0 6px;
          color: #C6D6E6;
          font-size: 14px;
        }

        i {
          font-style: normal;
          font-size: 16px;
          color: #fff;
        }
      }
    }

    .AppQxnDv-title {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      color: rgba(172, 201, 230, 0.8);
      background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);

      h2 {
        position: relative;
        font-size: 16px;
        font-weight: 500;
        padding: 0 10px;

        &::after {
          position: absolute;
          bottom: 0;
          left: 27px;
          z-index: 1;
          width: 9px;
          height: 2px;
          background: rgba(41, 77, 102, 1);
          content: ' ';
        }
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 9px;
        height: 2px;
        background: #5299CC;
        content: ' ';
      }

      &::before {
        position: absolute;
        bottom: 0;
        left: 14px;
        z-index: 1;
        width: 9px;
        height: 2px;
        background: rgba(41, 77, 102, 1);
        content: ' ';
      }
    }

    .AppQxnDv-total {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 1;

        h2 {
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: 500;
          color: #FFFFFF;
        }

        .item-bottom {
          display: flex;
          align-items: baseline;

          span {
            font-weight: 700;
            font-size: 18px;
            color: #02FEFF;
          }

          i {
            margin-left: 4px;
            font-style: normal;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
          }
        }
      }
    }

    :deep(.el-select) {
      height: 24px;
      line-height: 24px;

      input {
        width: 100%;
        height: 24px;
        line-height: 24px;
        padding: 0 26px 0 6px;
        font-size: 12px;
        color: rgba(179, 229, 229, 1);
        border: 1px solid #2A7A92;
        border-radius: 2px;
        background: transparent;

        &::placeholder {
          color: rgba(179, 229, 229, 0.6);
        }
      }

      .el-input__suffix {
        right: 1px;
        top: 0px;
      }

      i {
        color: #B3E5E5;
      }
    }

    :deep(.ai-table) {
      .el-table {
        font-size: 11px;
        color: #d0e1e8;
        background-color: transparent!important;

        th.el-table__cell.is-leaf, .el-table td.el-table__cell {
          border: none!important;
        }

        tr.el-table__row--striped td {
          background: rgba(33, 180, 253, 0.1)!important;
        }

        .el-table__header tr th:first-child .cell {
          padding: 0!important;
        }

        .el-table__body tr td:first-child .cell {
          padding: 0!important;
        }

        &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
          background-color: rgba(33, 180, 253, 0.1)!important;
        }

        th.el-table__cell {
          background-color: transparent;
        }

        tr {
          background-color: transparent;
        }

        .el-table__cell {
          padding: 7px 0;
          color: #d0e1e8;
        }

        .el-table__header tr .cell {
          color: #02FEFF!important;
        }
      }
      .ai-table__header {
        background: rgba(33, 180, 253, 0.1)!important;
      }
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 14px;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
    }

    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
    }

    * {
      box-sizing: border-box;
    }

    & > .right {
      display: flex;
      flex: 1;
      overflow: hidden;

      .right-left {
        width: 500px;

        .right-left__middle {
          display: flex;
          .left {
            width: 245px;
            margin-right: 12px;
          }

          .right {
            flex: 1;
          }
        }

        .right-left__bottom {
          display: flex;

          div {
            flex: 1;

            &:first-child {
              margin-right: 12px;
            }
          }
        }
      }
      .right-middle {
        width: 542px;
        margin: 0 14px;

        .right-middle__middle {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
        }
      }

      .right-right {
        display: flex;
        flex-direction: column;
        // flex: 1;
        width: 570px;
        overflow: hidden;

        .bottom {
          padding-top: 16px;
          overflow: hidden;
        }

        .right-right__top {
          display: flex;
          margin-bottom: 16px;

          & > div {
            flex: 1;

            &:first-child {
              margin-right: 12px;
            }
          }
        }
      }
    }

    & > .left {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 230px;
      margin-right: 10px;

      .left-list {
        flex: 1;
        overflow-y: auto;
        width: 100%;

        .left-item {
          position: relative;
          width: 100%;
          cursor: pointer;
          margin-bottom: 10px;
          padding: 30px 14px 14px;
          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
          border-radius: 6px;
          box-shadow: inset 0 -1px 0 0 transparent;
          transition: all ease 0.3s;

          &:hover {
            opacity: 0.7;
          }

          &.active {
            background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
            box-shadow: inset 0 -1px 0 0 #23B2C7;

            &:hover {
              opacity: 1;
            }
          }

          i {
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 21px;
            line-height: 21px;
            text-align: center;
            font-weight: 600;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
            background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
            border-radius: 6px 0 6px 0;
          }

          .left-item__bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
              color: #fff;
              font-weight: 600;
              font-size: 12px;
            }
          }

          .left-item__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            .el-select {
              width: 100px;
            }

            h2 {
              font-weight: 600;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
</style>