playlet/project/src/components/dataBoard/playletData....

<template>
  <div v-loading="loading" class="playletData">
    <div class="screenBox flex">
      <div class="flex-align-center">
        <date-picker title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime"></date-picker>
        <self-channel title="剧集" type='dramaList' @channelDefine="(val)=>{playlet_id = val;init(1)}"></self-channel>
      </div>
      <el-button type="primary" size="mini" @click="init(1,'export')">导出Excel</el-button>
    </div>
    <div class="dataInfoBox">
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/iconNew/首日roi@2x.png" style="height:14px" class="titleIcon" alt="">
          <span>首日ROI</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.first_day_roi||dataInfo.first_day_roi==0)?$formatNum(dataInfo.first_day_roi):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/iconNew/当天总消耗@2x.png" style="height:14px" class="titleIcon" alt="">
          <span>当天总消耗</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.day_paid||dataInfo.day_paid==0)?$formatNum(dataInfo.day_paid):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/icon/累计充值@2x.png" style="height:20px" class="titleIcon" alt="">
          <span>当日新用户累计充值</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.charge_total||dataInfo.charge_total==0)?$formatNum(dataInfo.charge_total):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/iconNew/回本率@2x.png" style="height:14px" class="titleIcon" alt="">
          <span>回本率</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.cost_cover_rate||dataInfo.cost_cover_rate==0)?dataInfo.cost_cover_rate:'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/icon/总关注人数@2x.png" style="height:18px" class="titleIcon" alt="">
          <span>新增粉丝数</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.fans_increase||dataInfo.fans_increase==0)?$formatNum(dataInfo.fans_increase):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/icon/平均关注人数成本@2x.png" style="height:14px" class="titleIcon" alt="">
          <span>新增粉丝成本</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.new_user_cost||dataInfo.new_user_cost==0)?$formatNum(dataInfo.new_user_cost):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/iconNew/充值人数@2x.png" style="height:14px" class="titleIcon" alt="">
          <span>充值人数</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.new_user_charge_uv||dataInfo.new_user_charge_uv==0)?$formatNum(dataInfo.new_user_charge_uv):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/iconNew/充值次数@2x.png" style="height:14px" class="titleIcon" alt="">
          <span>充值次数</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.new_user_charge_pv||dataInfo.new_user_charge_pv==0)?$formatNum(dataInfo.new_user_charge_pv):'-'}}</div>
      </div>
      <div class="dataInfoItem">
        <div class="dataItemTitle">
          <img src="@/assets/img/iconNew/充值用户成本@2x.png" class="titleIcon" alt="">
          <span>充值用户成本</span>
        </div>
        <div class="dataItem-data">{{dataInfo&&(dataInfo.charge_user_cost||dataInfo.charge_user_cost==0)?$formatNum(dataInfo.charge_user_cost):'-'}}</div>
      </div>
    </div>
    <ux-grid ref="plxTableDj" class="djtfqs" key="plxTableDj" :border="false" @row-click="()=>{return}" :header-cell-style="()=>{return { backgroundColor: '#FFFFFF !important', border: 'none!important',height: '50px !important' }}" :height="height+130" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
      <ux-table-column v-for="item in desColDj" :key="item.prop" :resizable="true" :field="item.prop" :title="item.label" :min-width="item.min_width?item.min_width:120" :fixed="item.fixed?item.fixed:''" align="center">
        <template #header>
          <div :class="['flex-align-jus-center',item.sort?'pointer':'',sort_field==item.prop?'sortFieldStyle':'']" @click="item.sort?sortFieldEvent(item.prop):''">{{item.label}}<i class="el-icon-caret-bottom" v-if="item.sort"></i>
            <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
              <div><i class="el-icon-question"></i></div>
            </el-tooltip>
          </div>
        </template>
        <template v-slot="{ row }">
          <span :class="sort_field==item.prop?'sortFieldStyle':''">{{row[item.prop]||row[item.prop]==0?$formatNum(row[item.prop]):'-' }}</span>
        </template>
      </ux-table-column>
      <ux-table-column title="统计" width="100" v-for="(item_extra,index_extra) in extra" :key="index_extra+'extra'">
        <template #header>
          <div class="flex-align-jus-center">{{item_extra}}
            <el-tooltip placement="top" v-if="index_extra==0">
              <div slot="content">充：当日回收<br />增：当日回收/当天消耗<br />回：累计充值/当天消耗<br />倍：回/增</div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </template>
        <template v-slot="{ row }">
          <div>
            <span class="font" style="color:#2C9841">充:</span>
            <span>{{row.charge_data&&(row.charge_data[item_extra].day_charge||row.charge_data[item_extra].day_charge==0)?$formatNum(row.charge_data[item_extra].day_charge):'-'}}</span>
          </div>
          <div>
            <span class="font" style="color:#F28544">增:</span>
            <span>{{row.charge_data&&(row.charge_data[item_extra].day_add||row.charge_data[item_extra].day_add==0)?$formatNum(row.charge_data[item_extra].day_add):'-'}}</span>
          </div>
          <div>
            <span class="font" style="color:#EB4315">回:</span>
            <span>{{row.charge_data&&(row.charge_data[item_extra].day_cover||row.charge_data[item_extra].day_cover==0)?$formatNum(row.charge_data[item_extra].day_cover):'-'}}</span>
          </div>
          <div>
            <span class="font" style="color:#2983DF">倍:</span>
            <span>{{row.charge_data&&(row.charge_data[item_extra].day_times||row.charge_data[item_extra].day_times==0)?$formatNum(row.charge_data[item_extra].day_times):'-'}}</span>
          </div>
        </template>
      </ux-table-column>
    </ux-grid>
    <div class="pagination" v-show="total>0">
      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
      </el-pagination>
    </div>
  </div>
</template>
<script>
import datePicker from '@/components/assembly/screen/datePicker.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
export default {
  components: { selfChannel, datePicker },
  data () {
    return {
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 10,
      tableData: [],
      sort_field: '',
      dataInfo: {},
      default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
      time: [],
      playlet_id: '',
      height: '',
      desColDj: [
        { prop: "ref_date", label: "时间", fixed: 'left' },
        { prop: "playlet_name", label: "短剧", fixed: 'left' },
        { prop: "first_day_roi", label: "首日ROI" },
        { prop: "day_paid", label: "当天消耗" },
        { prop: "charge_total", min_width: "160", label: "当日新用户累计充值" },
        { prop: 'cost_cover_rate', label: "回本率(%)" },
        { prop: 'fans_increase', label: "新增粉丝数" },
        { prop: 'new_user_cost', label: "新增粉丝成本" },
        { prop: 'new_user_charge_uv_count', label: "充值总人数", },
        { prop: 'new_user_charge_uv', label: "当日首充人数", },
        { prop: 'new_user_charge_pv_count', label: "总充值次数", },
        { prop: 'new_user_charge_pv', label: "新用户首日充值次数", min_width: "170"},
        { prop: 'charge_user_cost', label: "充值用户成本", notes: '充值用户成本=当天消耗/充值人数', min_width: "160" },
      ],
      extra: [],
    }
  },
  created () {
    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 400 : 400
    this.time = this.default_time
    this.init(1)
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      return row.self_class ? row.self_class : ''
    },
    //头部颜色
    headerColor ({ row, column, rowIndex, columnIndex }) {
      if (column.level == 2) {
        return 'display: none'
      }
      return { backgroundColor: "#EFEFEF !important", border: 'none!important', height: '50px !important' }
    },
    rowStyle ({ row, rowIndex }) {//行颜色控制
      if (row.self_class == 'warning-row') {
        return { background: '#f4f4f4' }
      }
    },
    changeTime (time) {//筛选时间变化
      if (!time || time && time.length == 0) {
        this.time = []
      } else {
        this.time = time
      }
      this.init(1)
    },
    init (page, type) {
      if (type != 'export') {
        this.page = page ? page : this.page;
      } else {
        if (this.total == 0) {
          this.$message({
            message: '暂无数据可导出',
            type: "warning"
          })
          return
        }
      }
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.statistics_playletDataTrend, {
        params: {
          // sort_field: this.sort_field,
          playlet_id: this.playlet_id,
          start_date: this.time[0],
          end_date: this.time[1],
          page: type == 'export' ? 1 : this.page,
          page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          if (type == 'export') {
            this.exportEvent_playletData(res.rst.data.list)
          } else {
            this.dataInfo = res.rst.data.overview;
            this.extra = res.rst.data.extra;
            this.datas = res.rst.data.list // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
            this.$nextTick(() => {
              this.$refs.plxTableDj.reloadData(this.datas)
            })
            this.total = res.rst.pageInfo.total;
            this.pages = res.rst.pageInfo.pages;
          }
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    handleCurrentChange (val) {
      this.init(val)
    },
    // sortFieldEvent (type) {
    //   this.sort_field = type;
    //   this.init(1)
    // },
    exportEvent_playletData (data) {
      let list = data;
      let tHeader = this.desColDj.map((v) => {
        return v.label;
      })
      let self_extra = this.extra.map((v) => {
        return 'chargeData_' + v
      })
      tHeader = tHeader.concat(...this.extra)
      let filterVal = this.desColDj.map((v) => {
        return v.prop
      })
      filterVal = filterVal.concat(...self_extra)
      list.forEach((item) => {
        for (var i in item.charge_data) {
          self_extra.forEach((v) => {
            item[v] = `
            充：${item.charge_data[i] && (item.charge_data[i].day_charge || item.charge_data[i].day_charge == 0) ? item.charge_data[i].day_charge : '-'}
            增：${item.charge_data[i] && (item.charge_data[i].day_add || item.charge_data[i].day_add == 0) ? item.charge_data[i].day_add : '-'}
            回：${item.charge_data[i] && (item.charge_data[i].day_cover || item.charge_data[i].day_cover == 0) ? item.charge_data[i].day_cover : '-'}
            倍：${item.charge_data[i] && (item.charge_data[i].day_times || item.charge_data[i].day_times == 0) ? item.charge_data[i].day_times : '-'}`
          })
        }
      })
      let excelDatas = [
        {
          tHeader: tHeader, // sheet表一头部
          filterVal: filterVal, // 表一的数据字段
          tableDatas: list, // 表一的整体json数据
          sheetName: ''// 表一的sheet名字
        }
      ]
      this.$exportOrder({ excelDatas, name: `短剧数据（导出时间：${this.$getDay(0)}）` })
    },
  }
}
</script>
<style lang="scss" scoped>
.screenBox {
  background: #fff;
  padding: 5px 20px;
}
.dataInfoBox {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  .dataInfoItem {
    background: #ffffff;
    border-radius: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 16px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .dataItemTitle {
      display: flex;
      align-items: center;
      color: #6f6f6f;
      font-size: 13px;
      line-height: 17px;
      font-weight: bold;
      .titleIcon {
        height: 16px;
        margin-right: 4px;
      }
    }
    .dataItem-data {
      color: #000000;
      font-size: 19px;
      line-height: 28px;
      font-weight: bold;
      margin-top: 2px;
    }
  }
}
</style>
<style lang="scss">
.playletData .elx-table .elx-table--border-line {
  border: 1px solid #ebeef5 !important;
}
.playletData .djtfqs {
  .elx-table.elx-editable.size--mini .elx-body--column,
  .elx-table.size--mini .elx-body--column.col--ellipsis,
  .elx-table.size--mini .elx-footer--column.col--ellipsis,
  .elx-table.size--mini .elx-header--column.col--ellipsis {
    height: 110px !important;
  }
  .elx-table.size--mini .elx-body--column.col--ellipsis > .elx-cell,
  .elx-table.size--mini .elx-footer--column.col--ellipsis > .elx-cell,
  .elx-table.size--mini .elx-header--column.col--ellipsis > .elx-cell {
    max-height: initial !important;
  }
}
</style>