feat: 企微数据 - 短剧数据趋势 - 前端页面

project/src/components/dataBoard/shortDramaTrends.vue

@@ -0,0 +1,635 @@
+<template>
+  <div>
+    <div class="screenBox flex">
+      <switchMpAdq v-model="filter.order_type" @change="onChangeOrderType" />
+      <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
+    </div>
+    <!-- S 筛选区 -->
+    <div class="screenBox filter-wrap">
+      <!-- 日期 -->
+      <datePicker style="margin-right: 30px;" :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
+      <!-- 短剧 -->
+      <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="短剧" type="dramaList" labelWidth @channelDefine="onChangePlayletId" />
+      <!-- 收益截止日期 -->
+      <div style="margin-right: 30px;" class="common-screen-item">
+        <label class="common-screen-label">收益截止日期</label>
+        <el-date-picker v-model="filter.closing_date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small" style="width:150px" @change="onChangeClosingDate" />
+      </div>
+      <!-- 推广类型 -->
+      <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="推广类型" type="promotionType" labelWidth @channelDefine="onChangePromotionType" />
+      <div class="flex">
+        <!-- 回本率(范围) -->
+        <inputRange style="margin-right: 10px;" v-model="filter.totalRoi" label="回本率" />
+        <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
+        <el-button size="mini" plain @click="onClickReset">重置</el-button>
+      </div>
+    </div>
+    <!-- E 筛选区 -->
+
+    <!-- S 折线图 -->
+    <div class="trendBox mt-10" v-loading="chartLoading">
+      <div class="legendBox">
+        <div class="legendItem" v-for="(item, index) in legendList" :key="index" @click="onClickLegend(item, index)">{{ item.name }}
+          <div :class="['checkbox', item.selectFlag ? 'checkbox_active': '']" :style="item.selectFlag ? `background: ${item.color};border-color: ${item.color};`: '' "><i class="el-icon-check" /></div>
+        </div>
+      </div>
+      <div id="trend" style="width: 100%; height: 250px;" />
+    </div>
+    <!-- E 折线图 -->
+
+    <!-- S 表 -->
+    <div v-loading="loading">
+      <!-- S 汇总表 summaryTable -->
+      <ux-grid class="summaryTable" ref="summaryTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+        <ux-table-column v-for="item in summaryTableCol" :key="item.column" :resizable="true" :field="item.column" :title="item.name" :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.name }}
+              <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>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <!-- E 汇总表 summaryTable -->
+      <!-- S 明细表 detailsTable -->
+      <ux-grid class="detailsTable" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+        <ux-table-column v-for="item in detailsTableCol" :key="item.column" :resizable="true" :field="item.column" :title="item.name" :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.name }}
+              <div v-if="item.isSort" class="sort-wrap">
+                <i class="el-icon-caret-top" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
+                <i class="el-icon-caret-bottom" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
+              </div>
+              <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>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="pagination.total > 0">
+        <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pagination.pages)' />
+      </div>
+      <!-- E 明细表 detailsTable -->
+    </div>
+    <!-- E 表 -->
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import inputRange from '@/components/dataBoard/inputRange.vue'
+import selfChannel from '@/components/assembly/screen/channel.vue'
+import switchMpAdq from '@/components/assembly/screen/switchMpAdq.vue'
+import { orderTypeOptions } from '@/assets/js/staticTypes'
+import _lodash from 'lodash'
+
+export default {
+  components: {
+    datePicker,
+    inputRange,
+    selfChannel,
+    switchMpAdq,
+  },
+  data () {
+    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
+    return {
+      default_time: DEFAULT_TIME,
+      reset: false,
+
+      chartLoading: false,
+      myChart: null,
+      chartDataList: [],
+      legendList: [
+        { name: '消耗', key: 'cust_total_uc', color: '#2983DF', selectFlag: true },
+        { name: '下单成本', key: 'cust_add_uc', color: '#00B38A', selectFlag: true },
+        { name: '首日arpu值', key: 'cust_loss_uc', color: '#EB4315', selectFlag: true },
+        { name: '首日roi', key: 'cust_gain_uc', color: '#AED570', selectFlag: true },
+        { name: '3天倍率', key: 'official_account_uc', color: '#EFAF47', selectFlag: true },
+        { name: '7天倍率', key: 'cust_pay_uc', color: '#7366FF', selectFlag: true },
+        { name: '15天倍率', key: 'cust_pay_amount', color: '#F28544', selectFlag: true },
+        { name: '30天倍率', key: 'charge_user_cost', color: '#E360C8', selectFlag: true },
+      ],
+
+      loading: false,
+      summaryTableCol: [
+        { "column": "date", "name": "用户注册时间", "notes": ""},
+        { "column": "advertiser_cost", "name": "投放消耗", "notes": "",},
+        { "column": "follow_uv", "name": "企微关注数", "notes": ""},
+        { "column": "per_follow_cost", "name": "企微关注成本", "notes": ""},
+        { "column": "total_roi", "name": "总回收", "notes": "总回收金额/投放消耗"},
+        { "column": "day1_roi", "name": "day1", "notes": ""}
+      ],
+      detailsTableCol: [
+        { "column": "date", "name": "用户注册时间", "notes": ""},
+        { "column": "advertiser_cost", "name": "投放消耗", "notes": "", isSort: 1},
+        { "column": "follow_uv", "name": "企微关注数", "notes": "", isSort: 1},
+        { "column": "per_follow_cost", "name": "企微关注成本", "notes": ""},
+        { "column": "total_roi", "name": "总回收", "notes": "总回收金额/投放消耗", isSort: 1},
+        { "column": "day1_roi", "name": "day1", "notes": ""}
+      ],
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        order_type: orderTypeOptions.MP,
+        time: DEFAULT_TIME, // 自定义日期
+        playlet_id: '', // 账号MP
+        closing_date: '', // 收益截止日期
+        promotion_type: '', // 推广类型
+        totalRoi: ['', ''], // 回本率（范围）
+        sort_field: '', // 排序字段
+        sort_type: '', // 升序/降序
+      },
+    }
+  },
+  computed: {
+    // // 当前列表是否为"MP运营数据"
+    // isMP() {
+    //   return this.filter.order_type === orderTypeOptions.MP
+    // },
+    // // 当前列表是否为"ADQ运营数据"
+    // isADQ() {
+    //   return this.filter.order_type === orderTypeOptions.ADQ
+    // },
+  },
+  created () {
+    this.handleGetList()
+    this.handleGetChart()
+  },
+  beforeDestroy () {
+    this.myChart && this.myChart.clear()
+  },
+  methods: {
+    // 获取列表数据
+    async handleGetList() {
+      console.log('handleGetList => ',)
+      console.log('filter => ', JSON.parse(JSON.stringify(this.filter)))
+      console.log('pagination => ', JSON.parse(JSON.stringify(this.pagination)))
+      // mock
+      await this.$nextTick()
+      this.$refs.summaryTable.reloadData([{
+        "date": "2022-08-24",
+        "advertiser_cost": "105.57",
+        "first_order_ucnt_unique": 0,
+        "first_order_ucnt": 0,
+        "follow_uv": 5,
+        "total_cvt_amt": "0.00",
+        "per_follow_cost": "21.11",
+        "total_roi": "0%",
+        "charge_data": "[0]",
+        "first_day_charge": "0.00",
+        "first_day_roi": "0%",
+        "first_order_cost": "0.00",
+        "first_order_cost_unique": "0.00",
+        "day1_roi": "0%"
+      }])
+      this.$refs.detailsTable.reloadData([{
+        "date": "2022-08-24",
+        "advertiser_cost": "105.57",
+        "first_order_ucnt_unique": 0,
+        "first_order_ucnt": 0,
+        "follow_uv": 5,
+        "total_cvt_amt": "0.00",
+        "per_follow_cost": "21.11",
+        "total_roi": "0%",
+        "charge_data": "[0]",
+        "first_day_charge": "0.00",
+        "first_day_roi": "0%",
+        "first_order_cost": "0.00",
+        "first_order_cost_unique": "0.00",
+        "day1_roi": "0%"
+      }, {
+        "date": "2022-08-25",
+        "advertiser_cost": "200",
+        "first_order_ucnt_unique": 1,
+        "first_order_ucnt": 1,
+        "follow_uv": 6,
+        "total_cvt_amt": "1.00",
+        "per_follow_cost": "1.11",
+        "total_roi": "8%",
+        "charge_data": "[0]",
+        "first_day_charge": "0.00",
+        "first_day_roi": "0%",
+        "first_order_cost": "0.00",
+        "first_order_cost_unique": "0.00",
+        "day1_roi": "0%"
+      }])
+      this.pagination.total = 2
+      this.pagination.pages = 2
+      // mock
+      return // mock
+      this.loading = true
+      this.$axios.get(`${this.URL.BASEURL}${this.URL.statistics_reg_range_report_new}`, {
+        params: {
+          begin_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          total_roi_min: this.filter.totalRoi[0],
+          total_roi_max: this.filter.totalRoi[1],
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          this.summaryTableCol = res.rst.data.head;
+          this.$nextTick((item) => {
+            this.datas = res.rst.data.list // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
+            this.$refs.summaryTable.reloadData(this.datas)
+          })
+          this.pagination.total = res.rst.pageInfo.total;
+          this.pagination.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    // 获取折线图数据
+    handleGetChart() {
+      console.log('handleGetChart => ')
+      // return // mock
+      this.chartLoading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.stat_custTrendsNew, {
+        params: {
+          corpid: 'wpezvKNwAA9d7LlcuOOAhvlx5ikwJjHg',
+          start: '2022-08-09',
+          end: '2022-09-08',
+        }
+      }).then((_res) => {
+        const res = _res.data
+        this.chartLoading = false
+        if (res && res.errno == 0) {
+          this.chartDataList = res.rst
+          this.$nextTick(() => {
+            this.handleDrawChart()
+          })
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.chartLoading = false
+      });
+    },
+    // 绘制折线图
+    handleDrawChart() {
+      this.myChart && this.myChart.clear()
+      const _this = this;
+      const series = []
+      const yAxis = []
+      const xArr = this.chartDataList.map(v => v.idate)
+      this.legendList.forEach((item, index) => {
+        if (item.selectFlag) {
+          yAxis.push({
+            type: "value",
+            name: '',
+            show: false,
+            position: 'left',
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#F2F2f2',
+                type: "dashed"
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#F2F2f2'
+              }
+            },
+            nameTextStyle: {
+              color: "#999999",
+              fontSize: 13,
+            },
+            axisLabel: {
+              color: '#999999',
+              fontSize: 12,
+              show: true,
+              formatter: function(params) {
+                return _this.$NumberHandle(params)
+              }
+            }
+          })
+
+          const data = this.chartDataList.map(v => v[item.key] || v[item.key] == 0 ? v[item.key] : '-')
+
+          series.push({
+            type: "line",
+            smooth: true,
+            name: item.name,
+            yAxisIndex: 0,
+            data,
+            lineStyle: {
+              width: 2
+            },
+            symbol: xArr.length == 1 ? 'emptyCircle' : 'none',
+            itemStyle: {
+              color: item.color,
+              borderType: "emptyCircle"
+            },
+          })
+        }
+      })
+      yAxis.forEach((item, index) => {
+        item.show = index == 0 ? true : false
+      })
+      series.forEach((item, index) => {
+        item.yAxisIndex = index
+      })
+      const option = {
+        title: '',
+        tooltip: {
+          trigger: 'axis',
+          show: true,
+          formatter: function(params) {
+            let result = `${params[0].name}<br/>`
+            params.forEach(item => {
+              result += `${item.marker}${item.seriesName}：${_this.$formatNum(item.value)}<br/>`
+            });
+            return result;
+          }
+        },
+        legend: {
+          itemWidth: 8,
+          itemHeight: 2,
+          icon: "plain",
+          show: false,
+          textStyle: {
+            fontSize: 12,
+            color: '#666666'
+          },
+        },
+        grid: {
+          top: '6%',
+          left: '4%',
+          right: '4%',
+          bottom: '16%',
+          containLabel: false
+        },
+        xAxis: [{
+          type: "category",
+          data: xArr,
+          boundaryGap: false,//设置数据从头开始
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F2F2f2'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#666',
+            fontSize: 10,
+            rotate: 30,
+          },
+        }],
+        yAxis,
+        series,
+      }
+      // 初始化echarts实例
+      this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
+      this.myChart.setOption(option);
+    },
+    // 监听点击图例
+    async onClickLegend(currentItem, index) {
+      const arr = this.legendList.filter(v => v.selectFlag)
+      if (arr.length == 1 && arr[0].key == currentItem.key) {
+        return this.$message.warning('至少存在一条曲线')
+      }
+      const item = _lodash.cloneDeep(currentItem)
+      item.selectFlag = !item.selectFlag
+      this.$set(this.legendList, index, item)
+      await this.$nextTick()
+      this.handleDrawChart()
+    },
+    // 监听数据类型切换
+    onChangeOrderType() {
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听时间筛选变化
+    onChangeTime(time) {
+      this.filter.time = Array.isArray(time) ? time : []
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听“短剧”筛选变化
+    onChangePlayletId(val) {
+      this.filter.playlet_id = val
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听“收益截止日期”筛选变化
+    onChangeClosingDate(val) {
+      this.filter.closing_date = val || ''
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听“推广类型”筛选变化
+    onChangePromotionType(val) {
+      this.filter.promotion_type = val || ''
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听当前页变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage
+      this.handleGetList()
+    },
+    // 监听点击"确定(搜索)"按钮
+    onClickSearch() {
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听排序变化
+    onClickSort(sort_field, sort_type) {
+      // sort_type：升序asc、降序desc
+      if (this.filter.sort_field === sort_field) {
+        if (this.filter.sort_type === sort_type) {
+          // 点击的是当前排序字段 && 是当前排序类型 => 重置 取消排序
+          this.filter.sort_field = ''
+          this.filter.sort_type = ''
+        } else {
+          // 点击的是当前排序字段 && 非当前排序类型 => 设置排序类型
+          this.filter.sort_type = sort_type
+        }
+      } else {
+        // 点击的不是当前排序字段 => 设置排序字段和类型
+        this.filter.sort_field = sort_field
+        this.filter.sort_type = sort_type
+      }
+      // 后端排序 => 获取最新数据
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听点击"重置"按钮
+    onClickReset() {
+      this.reset = !this.reset
+      this.filter.order_type = orderTypeOptions.MP
+      this.filter.time = this.default_time
+      this.filter.playlet_id = ''
+      this.filter.closing_date = '',
+      this.filter.promotion_type = ''
+      this.filter.totalRoi = ['', '']
+      this.filter.sort_field = ''
+      this.filter.sort_type = ''
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听点击"导出"按钮
+    onClickExport() {
+      console.log('onClickExport => ')
+      if (!this.pagination.total) return this.$message.warning('暂无数据可导出')
+      this.loading = true
+      this.$axios.get(`${this.URL.BASEURL}${this.URL.statistics_reg_range_report_new}`, {
+        params: {
+          begin_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          total_roi_min: this.totalRoi[0],
+          total_roi_max: this.totalRoi[1],
+          page: 1,
+          page_size: this.$store.state.exportNumber,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          this.handleExport(res.rst.data.list)
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    // 执行导出逻辑
+    handleExport(data) {
+      let list = data;
+      let tHeader = this.summaryTableCol.map((v) => {
+        return v.name;
+      })
+      let filterVal = this.summaryTableCol.map((v) => {
+        return v.column
+      })
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `账号数据趋势（导出时间：${this.$getDay(0)}）` })
+    },
+    getHeaderCellStyle() {
+      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  position: relative;
+  background: #fff;
+  padding: 5px 20px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.filter-wrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-bottom: 10px;
+  & > div {
+    margin: 0 10px 10px 0;
+  }
+  & > button {
+    margin: -10px 0 0 10px;
+  }
+  .el-button+.el-button {
+    margin-left: 10px;
+  }
+}
+.trendBox {
+  background: #ffffff;
+  padding: 22px 23px;
+  position: relative;
+  .noData {
+    position: absolute;
+    top: 100px;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  .legendBox {
+    display: flex;
+    align-items: center;
+    .legendItem {
+      color: #333333;
+      font-size: 14px;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+.summaryTable {
+  margin-top: 10px;
+}
+.detailsTable {
+  margin-top: 10px;
+}
+.sort-wrap {
+  display: flex;
+  flex-direction: column;
+  i {
+    cursor: pointer;
+    &.active {
+      color: #32B38A;
+    }
+  }
+  i:first-child {
+    margin-bottom: -3px;
+  }
+  i:last-child {
+    margin-top: -3px;
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -53,7 +53,10 @@ const groupCodeIndex = () => import(/* webpackChunkName: 'groupCodeIndex' */ '@/
 const createGroupCode = () => import(/* webpackChunkName: 'createGroupCode' */ '@/components/groupCode/createGroupCode.vue')
 const groupCodeAnalyse = () => import(/* webpackChunkName: 'groupCodeAnalyse' */ '@/components/groupCode/groupCodeAnalyse.vue')
 
+// 数据看板 - 账号数据趋势
 const accountTrends = () => import(/* webpackChunkName: 'accountTrends' */ '@/components/dataBoard/accountTrends.vue')
+// 数据看板 - 短剧数据趋势
+const shortDramaTrends = () => import(/* webpackChunkName: 'shortDramaTrends' */ '@/components/dataBoard/shortDramaTrends.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -437,6 +440,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'shortDramaTrends',
+        name: 'shortDramaTrends',
+        component: shortDramaTrends,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '短剧数据趋势',
+          isData: true
+        }
+      },
+      {
         path: 'thePublic',
         name: 'thePublic',
         component: thePublic,