dvcp_v2_webapp/packages/wechat/AppResidentGroupManage/components/Detail.vue

<template>
  <ai-detail class="AppResidentManage">
    <template slot="title">
      <ai-title title="居民群详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>
    <template slot="content">
      <div class="detail-top">
        <div class="detail-top__header">
          <div class="header-left">
            <img src="https://cdn.cunwuyun.cn/dvcp/h5/groupAvatar.png">
            <div class="header-left__right">
              <h2>{{ info.name }}</h2>
            </div>
          </div>
          <div class="header-right">
            <!--            <div class="header-right__item">-->
            <!--              <span>成员总数</span>-->
            <!--              <h3>{{ chartData.groupSum}}</h3>-->
            <!--            </div>-->
            <div class="header-right__item">
              <span>成员总数</span>
              <h3>{{ chartData.today && chartData.today.total }}</h3>
            </div>
            <div class="header-right__item">
              <span>今日新增</span>
              <h3>{{ chartData.today && chartData.today.increase }}</h3>
            </div>
            <div class="header-right__item">
              <span>今日流失</span>
              <h3>{{ chartData.today && chartData.today.decrease }}</h3>
            </div>
          </div>
        </div>
        <div class="detail-top__content">
          <ai-wrapper
              label-width="80px">
            <ai-info-item label="群主" :value="info.ownerName"></ai-info-item>
            <ai-info-item label="群公告" :value="info.notice" isLine></ai-info-item>
            <ai-info-item label="群聊标签" isLine>
              <div class="table-tags">
                <el-tag type="info" v-for="(item, index) in info.tagList" size="small" :key="index">{{ item.tagName }}
                </el-tag>
              </div>
            </ai-info-item>
          </ai-wrapper>
        </div>
      </div>
      <ai-card title="图表数据">
        <template slot="content">
          <div id="lineChart"></div>
        </template>
      </ai-card>
      <ai-card title="成员列表">
        <template slot="content">
          <ai-table
              :tableData="tableData"
              :col-configs="colConfigs"
              :total="total"
              border
              ref="aitableex"
              @getList="getDynamicInfo"
              :current.sync="search.current"
              :size.sync="search.size"
              :dict="dict">
            <el-table-column slot="member" label="成员">
              <template slot-scope="{row}">
                <el-row type="flex" align="middle">
                  <img class="avatar" :src='row.avatar || "https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png"'/>
                  <div v-text="row.memberName"/>
                  <span :style="{color: row.customerType == 1 ? '#2EA222' : '#3C7FC8', marginLeft: '8px'}"
                        v-text="(row.customerType == 1 ? '@微信' : '@' + row.corpName)|| ''"/>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column slot="options" label="操作" width="100" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" v-if="row.type==2 && row.avatar" @click="toDetail(row)">居民详情</el-button>
              </template>
            </el-table-column>
          </ai-table>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Detail',

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

  computed: {
    colConfigs() {
      return [
        {slot: "member"},
        {prop: 'type', label: '类型', dict: "wxGroupMemberType"},
        {prop: 'joinTime', label: '入群时间'},
        {prop: 'joinScene', label: '入群方式', dict: "wxGroupMemberJoinScene"},
        {slot: "options"},
      ]
    }
  },

  data() {
    return {
      isShow: false,
      info: {},
      search: {
        current: 1,
        size: 10
      },
      total: 0,
      tableData: [],
      chart: null,
      chartData: {},
    }
  },

  created() {
    this.dict.load("wxGroupMemberJoinScene", "wxGroupMemberType")
  },

  mounted() {
    if (this.params && this.params.id) {
      this.getInfo()
      this.getDynamicInfo()
      this.getChart()
    }
  },

  methods: {
    getChart() {
      this.instance.post(`/app/wxcp/wxgroup/groupStatistic`, null, {
        params: {
          id: this.params.id
        }
      }).then(res => {
        if (res && res.data) {
          this.chartData = res.data
          this.initChart()
        }
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('lineChart'))
      this.setOptions()
    },
    setOptions() {
      const x = Object.keys(this.chartData.list)
      const y = Object.values(this.chartData.list)
      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: "plain"
        },
        grid: {
          left: '20px',
          right: '38px',
          bottom: '14px',
          top: '30px',
          containLabel: true
        },
        color: ['#2266FF', '#22AA99', '#F8B425'],
        xAxis: {
          type: 'category',
          axisLabel: {
            align: 'center',
            padding: [2, 0, 0, 0],
            interval: 0,
            fontSize: 14,
            color: '#666666'
          },
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E1E5EF'
            }
          },
          data: x
        },
        yAxis: {
          axisTick: {
            length: 0,
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#E1E5EF'],
              width: 1,
              type: 'solid'
            }
          },
          nameTextStyle: {
            color: '#666666',
            align: 'left'
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#666666'
          },
          type: 'value'
        },
        series: [
          {
            name: '成员总数',
            type: 'line',
            data: y.map(v => v.total)
          },
          {
            name: '新增成员数',
            type: 'line',
            data: y.map(v => v.increase)
          },
          {
            name: '流失成员数',
            type: 'line',
            data: y.map(v => v.decrease)
          }
        ]
      })
    },

    getInfo() {
      this.instance.post(`/app/wxcp/wxgroup/getDetail?id=${this.params.id}`).then(res => {
        if (res && res.data) {
          this.info = res.data
        }
      })
    },

    getDynamicInfo() {
      this.instance.post(`/app/wxcp/wxgroup/listMember?groupId=${this.params.id}`, null, {
        params: {
          ...this.search
        }
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    toDetail(row) {
      this.$router.push({
        name: '68',
        query: {
          id: row.userId,
          type: 'Detail'
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: isRefresh ? true : false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.AppResidentManage {
  ::v-deep .ai-detail__content--wrapper {
    max-width: 100% !important;
    padding: 20px;
  }

  h2, h3 {
    margin: 0;
  }

  .detail-top {
    padding: 30px 40px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
    border-radius: 2px;
    margin-bottom: 20px;

    .detail-top__content {
      padding-top: 32px;
    }

    .detail-top__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 32px;
      border-bottom: 1px solid #EEEEEE;

      .header-right {
        .header-right__item {
          width: 120px;
          margin-right: 8px;
          text-align: center;
        }

        div {
          text-align: center;

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

          span {
            display: block;
            margin-bottom: 10px;
            color: #888888;
          }
        }

        .el-button {
          height: 28px;
          margin-left: 8px;
          border-radius: 14px;
          font-size: 12px;
          padding: 7px 15px;
        }
      }

      .header-left, .header-right {
        display: flex;
        align-items: center;
      }

      .header-left {
        img {
          width: 64px;
          height: 64px;
          margin-right: 16px;
        }

        h2 {
          margin-bottom: 6px;
          color: #222222;
          font-size: 16px;
        }

        p {
          color: #2EA222;
          font-size: 14px;
        }
      }
    }
  }

  #lineChart {
    width: 100%;
    height: 336px;
  }

  .table-tags {
    .el-tag {
      margin-right: 8px;

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

  ::v-deep .avatar {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: fill;
  }
}
</style>