dvcp_v2_webapp/project/oms/apps/AppWechatStatistics/AppWechatStatistics.vue

<template>
  <ai-list class="AppWechatStatistics">
    <template slot="title">
      <ai-title title="公众号统计" isShowBottomBorder :instance="instance" @change="onChange()">
        <template #rightBtn>
          <div class="flex" flex>
            <el-radio-group style="margin: 0 12px;" v-model="search.type" size="small" @change="getInfo">
              <el-radio-button label="0">昨日</el-radio-button>
              <el-radio-button label="1">近七天</el-radio-button>
              <el-radio-button label="2">近30天</el-radio-button>
            </el-radio-group>
            <el-date-picker
              style="width: 240px; margin-right: 12px;"
              v-model="date"
              value-format="yyyy-MM-dd"
              @change="onDateChange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small">
            </el-date-picker>
            <ai-select
              :selectList="wechatList"
              placeholder="请选择公众号"
              v-model="search.appId"
              @change="getInfo">
            </ai-select>
          </div>
        </template>
      </ai-title>
    </template>
    <template slot="content">
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>曝光量</span>
          <h2 style="color: #2266FF;">{{ info['曝光量'] || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>曝光率</span>
          <h2 style="color: #22AA99;">{{ info['曝光量'] || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>点击量</span>
          <h2 style="color: #F8B425">{{ info['点击量'] || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>收入（元）</span>
          <h2 style="color: #2266FF;">{{ info['收入'] ? (info['收入'] / 100).toFixed(2) : 0 }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>已结算金额（元）</span>
          <h2 style="color: #22AA99;">{{ info['已结算金额'] || 0 }}</h2>
        </div>
      </div>
      <ai-card title="每日收益明细">
        <template #right>
          <ai-download
            :instance="instance"
            url="/api/wxmppublisheradposgeneral/export"
            :params="params" fileName="每日收益明细"
             :disabled="tableData.length == 0">
            <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
          </ai-download>
        </template>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
        </ai-table>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
  export default {
    name: 'AppWechatStatistics',
    label: '公众号统计',

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

    data () {
      return {
        today: '',
        date: '',
        search: {
          current: 1,
          size: 10,
          type: '0',
          appId: ''
        },
        total: 0,
        info: {},
        tableData: [],
        wechatList: [],
        colConfigs: [
          { prop: 'ymd', label: '日期' },
          { prop: 'adSlot', label: '广告位类型', align: 'center', format: v => this.dict.getLabel('ad_slot', v) },
          { prop: 'reqSuccCount', label: '拉取量', align: 'center' },
          { prop: 'exposureCount', label: '曝光量', align: 'center' },
          { prop: 'exposureRate', label: '曝光率', align: 'center', format: v => (v * 100).toFixed(2) + '%' },
          { prop: 'clickCount', label: '点击量', align: 'center' },
          { prop: 'clickRate', label: '点击率', align: 'center', format: v => (v * 100).toFixed(2) + '%' },
          { prop: 'ecpm', label: 'eCPM（元）', align: 'center', format: v => (v / 100).toFixed(2) },
          { prop: 'income', label: '收入（元）', align: 'center', format: v => (v / 100).toFixed(2) }
        ]
      }
    },

    computed: {
      params () {
        return {
          ...this.search,
          startTime: this.search.type === '3' ? this.date[0] : '',
          endTime: this.search.type === '3' ? this.date[1] : ''
        }
      }
    },

    created () {
      this.getInfo()
      this.dict.load('ad_slot').then(() => {
        this.getWechatList()
      })
    },

    methods: {
      onDateChange (e) {
        if (!e) {
          this.search.type = '0'
        } else {
          this.search.type = '3'
        }

        this.getInfo()
      },

      getInfo () {
        this.instance.post(`/api/wxmppublisheradposgeneral/statistics`, null, {
          params: {
            ...this.search,
            startTime: this.search.type === '3' ? this.date[0] : '',
            endTime: this.search.type === '3' ? this.date[1] : ''
          }
        }).then(res => {
          if (res.code === 0) {
            this.info = res.data

            this.getList()
          }
        })
      },

      getList () {
        this.instance.post(`/api/wxmppublisheradposgeneral/list`, null, {
          params: {
            ...this.search,
            startTime: this.search.type === '3' ? this.date[0] : '',
            endTime: this.search.type === '3' ? this.date[1] : ''
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      getWechatList () {
        this.instance.post(`/api/wxmpconfig/queryMyAppids`).then(res => {
          if (res.code == 0) {
            this.wechatList = res.data.map(v => {
              return {
                dictValue: v.appId,
                dictName: v.mpName
              }
            })
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .AppWechatStatistics {

    .bottom {
      display: flex;
      align-items: center;

      & > .ai-card {
        flex: 1;

        &:last-child {
          margin-left: 20px;
        }
      }
    }

    :deep( .ai-list__content ){
      padding: 0!important;

      .ai-list__content--right-wrapper {
        background: transparent!important;
        box-shadow: none!important;
        margin: 0!important;
        padding: 12px 16px 12px!important;
      }
    }

    :deep( .ai-card) {
      .ai-card__body {
        padding: 12px 16px;
      }
    }

    .statistics-top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      & > div {
        flex: 1;
        height: 96px;
        line-height: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

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

        h3 {
          font-size: 24px;
        }

        span {
          display: block;
          margin-bottom: 16px;
          color: #888888;
          font-size: 16px;
        }
      }
    }

    .content {
      padding: 16px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
    }
  }
</style>