feat: 企微数据 - 账号数据趋势 - 前端页面

project/src/components/assembly/screen/channel.vue

@@ -152,6 +152,12 @@ export default {
         { key: 4, val: '待分配' },
       ]
       this.placeholderVal = '添加状态'
+    } else if (this.type == 'promotionType') { // 推广类型
+      this.options = [
+        { key: 1, val: 'H5' },
+        { key: 2, val: '小程序' },
+      ]
+      this.placeholderVal = '推广类型'
     } else {
       this.init()
     }

project/src/components/dataBoard/accountTrends.vue

@@ -0,0 +1,420 @@
+<template>
+  <div v-loading="loading">
+    <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" />
+      <!-- MP账号(公众号) -->
+      <selfChannel style="margin-left: -30px;" v-show="isMP" :reset="reset" title="账号" type="thePublic" labelWidth @channelDefine="onChangeAccountId" />
+      <!-- ADQ账号(ADQ) -->
+      <selfChannel style="margin-left: -30px;" v-show="isADQ" :reset="reset" title="账号" type="thePublic" labelWidth @channelDefine="onChangeAccountIdAdq" />
+      <!-- 收益截止日期 -->
+      <div class="common-screen-item" style="margin-left: 10px;">
+        <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-left: -30px;" :reset="reset" title="推广类型" type="promotionType" labelWidth @channelDefine="onChangePromotionType" />
+      <!-- 回本率(范围) -->
+      <inputRange style="margin-left: 20px;" v-model="filter.totalRoi" label="回本率" />
+      <div>
+        <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
+        <el-button size="mini" plain @click="onClickReset">重置</el-button>
+      </div>
+    </div>
+    <!-- E 筛选区 -->
+
+    <!-- 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>
+</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'
+export default {
+  components: {
+    datePicker,
+    inputRange,
+    selfChannel,
+    switchMpAdq,
+  },
+  data () {
+    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
+    return {
+      loading: false,
+      default_time: DEFAULT_TIME,
+      reset: 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, // 自定义日期
+        account_id: '', // 账号MP
+        account_id_adq: '', // 账号ADQ
+        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()
+  },
+  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
+      });
+    },
+    onChangeOrderType() {
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听时间筛选变化
+    onChangeTime(time) {
+      this.filter.time = Array.isArray(time) ? time : []
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听“MP账号”筛选变化
+    onChangeAccountId(val) {
+      this.filter.account_id = val
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+    // 监听“MP账号”筛选变化
+    onChangeAccountIdAdq(val) {
+      this.filter.account_id_adq = 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.account_id = ''
+      this.filter.account_id_adq = ''
+      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],
+          first_day_roi_min: this.firstDayRoi[0],
+          first_day_roi_max: this.firstDayRoi[1],
+          first_order_cost_min: this.firstOrderCost[0],
+          first_order_cost_max: this.firstOrderCost[1],
+          first_order_cost_unique_min: this.firstOrderCostUnique[0],
+          first_order_cost_unique_max: this.firstOrderCostUnique[1],
+          per_follow_cost_min: this.perFollowCost[0],
+          per_follow_cost_max: this.perFollowCost[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;
+}
+.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: 5px;
+  }
+}
+.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,6 +53,7 @@ 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')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -425,6 +426,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'accountTrends',
+        name: 'accountTrends',
+        component: accountTrends,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '账号数据趋势',
+          isData: true
+        }
+      },
+      {
         path: 'thePublic',
         name: 'thePublic',
         component: thePublic,