feat: 花生平台 - 数据循环统计 - 前端页面

project/src/components/dataBoard/loseUserTrends.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="loseUserTrends-wrap" v-loading="pageLoading">
-    <div class="screenBox flex">
-      <div /><!-- 占位 -->
+    <!-- <div class="screenBox flex">
+      <div />
       <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
-    </div>
+    </div> -->
     <!-- S 筛选区 -->
     <div class="screenBox filter-wrap">
       <!-- 日期 -->
@@ -21,6 +21,7 @@
         </div>
         <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
         <el-button size="mini" plain @click="onClickReset">重置</el-button>
+        <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
       </div>
     </div>
     <!-- E 筛选区 -->

project/src/components/dataBoard/regRangeReportHS.vue

@@ -0,0 +1,348 @@
+<template>
+  <div v-loading="loading">
+    <!-- <div class="screenBox flex">
+      <div />
+      <el-button type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
+    </div> -->
+    <div class="screenBox flex">
+      <div class="flex">
+        <date-picker :reset="reset" title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false'
+          @changeTime="changeTime"></date-picker>
+        <!-- 收益截止日期 -->
+        <div style="margin-left: 30px;" class="common-screen-item">
+          <label class="common-screen-label">收益截止日期</label>
+          <el-date-picker v-model="closing_date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small" style="width:150px" @change="onChangeClosingDate" />
+        </div>
+        <!-- 花生账户 -->
+        <selfChannel :reset="reset" title="账户" type="adqAccount" labelWidth @channelDefine="onChangeAccountHS" />
+      </div>
+    </div>
+    <!-- S 新增区间筛选项 -->
+    <div class="screenBox filter-wrap">
+      <input-range v-model="firstDayRoi" label="首日ROI" />
+      <input-range v-model="firstOrderCost " label="下单成本" />
+      <input-range v-model="perFollowCost" label="企微成本" />
+      <input-range v-model="totalRoi" label="回本率" />
+      <input-range v-model="paid" label="消耗" />
+      <div>
+        <el-button size="mini" type="primary" plain @click="init(1);handleGetUpdateTime();">确定</el-button>
+        <el-button size="mini" plain @click="handleReset">重置</el-button>
+        <el-button type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
+      </div>
+    </div>
+    <!-- S 新增区间筛选项 -->
+    <!-- S 数据更新时间 -->
+    <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div>
+    <!-- E 数据更新时间 -->
+    <!-- S 汇总表 summaryTable -->
+    <ux-grid style="margin-top:10px" ref="summaryTable" :border="false" @row-click="() => { return }" :header-cell-style="() => { return { backgroundColor: '#FFFFFF !important', border: 'none!important' } }" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+      <ux-table-column v-for="item in summaryTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :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] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
+        </template>
+      </ux-table-column>
+    </ux-grid>
+    <!-- E 汇总表 summaryTable -->
+
+    <!-- S 明细表 detailsTable -->
+    <ux-grid style="margin-top:10px" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="() => { return { backgroundColor: '#FFFFFF !important', border: 'none!important' } }" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+      <ux-table-column v-for="item in detailsTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :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 v-if="item.enable_to_sort" class="sort-wrap">
+              <i class="el-icon-caret-top" :class="{ 'active': sort_field === item.column && sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
+              <i class="el-icon-caret-bottom" :class="{ 'active': sort_field === item.column && sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
+            </div>
+          </div>
+        </template>
+        <template v-slot="{ row }">
+          <span>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
+        </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>
+    <!-- E 明细表 detailsTable -->
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import inputRange from '@/components/dataBoard/inputRange.vue'
+import switchMpAdq from '@/components/assembly/screen/switchMpAdq.vue'
+import selfChannel from '@/components/assembly/screen/channel.vue'
+
+export default {
+  components: { datePicker, inputRange, switchMpAdq, selfChannel },
+  data () {
+    return {
+      height: '',
+
+      loading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
+      time: [],
+
+      summaryTableCol: [],
+      detailsTableCol: [],
+
+      firstDayRoi: ['', ''], // 首日ROI（范围）
+      firstOrderCost: ['', ''], // 下单成本（范围）
+      perFollowCost: ['', ''], // 企微成本（范围）
+      totalRoi: ['', ''], // 回本率（范围）
+      paid: ['', ''], // 消耗（范围）
+      reset: false,
+      closing_date: '', // 收益截止日期
+      account_id_hs: '', // 花生账户
+      sort_field: 'date', // 排序字段 默认 时间 & 降序
+      sort_type: 'desc', // 升序/降序
+      updateTime: '', // 数据更新时间
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    this.time = this.default_time
+    this.init(1)
+    this.handleGetUpdateTime()
+  },
+  methods: {
+    // 获取"数据更新时间"
+    async handleGetUpdateTime() {
+      console.log('handleGetUpdateTime => ')
+      try {
+        const params = { type: '' }
+
+        params.type = 'data_cycle_adq' // mock
+
+        const { data: res = {} } = await this.$axios.get(`${this.URL.BASEURL}${this.URL.dataBoard_uptime}`, { params })
+        if (res && res.errno == 0) {
+          this.updateTime = res.rst.uptime
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.updateTime = ''
+        }
+      } catch (error) {
+        this.updateTime = ''
+      }
+    },
+    handleReset() {
+      this.reset = !this.reset
+      this.closing_date = ''
+      this.account_id_hs = ''
+      this.time = this.default_time
+      this.firstDayRoi = ['', ''] // 首日ROI（范围）
+      this.firstOrderCost = ['', ''] // 下单成本（范围）
+      this.perFollowCost = ['', ''] // 企微成本（范围）
+      this.totalRoi = ['', ''] // 回本率（范围）
+      this.paid = ['', ''] // 消耗（范围）
+      this.sort_field = 'date'
+      this.sort_type = 'desc'
+      this.init(1)
+      this.handleGetUpdateTime()
+    },
+    changeTime (time) {//筛选时间变化
+      if (!time || time && time.length == 0) {
+        this.time = []
+      } else {
+        this.time = time
+      }
+      this.init(1)
+      this.handleGetUpdateTime()
+    },
+    async init(page, type) {
+      console.log('init => ')
+      try {
+        if (type != 'export') {
+          this.page = page ? page : this.page;
+        } else {
+          if (this.total == 0) return this.$message.warning('暂无数据可导出')
+        }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(`${this.URL.BASEURL}${this.URL.dataBoard_dataCycleList}`, {
+          params: {
+            page: type == 'export' ? 1 : this.page,
+            page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+            begin_date: this.time[0],
+            end_date: this.time[1],
+            first_order_cost_min: this.firstOrderCost[0],
+            first_order_cost_max: this.firstOrderCost[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],
+            first_day_roi_min: this.firstDayRoi[0],
+            first_day_roi_max: this.firstDayRoi[1],
+            closing_date: this.closing_date,
+            account_id_hs: this.account_id_hs,
+            paid_min: this.paid[0],
+            paid_max: this.paid[1],
+            sort_field: this.sort_field,
+            sort_type: this.sort_type,
+
+            order_type: 2, // mock
+          }
+        })
+
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data)
+          } else {
+            res.rst.data.list.head[0].fixed = 'left' // 第一列固定左侧
+            res.rst.data.overview.head[0].fixed = 'left' // 第一列固定左侧
+            this.summaryTableCol = Object.freeze(res.rst.data.overview.head || [])
+            this.detailsTableCol = Object.freeze(res.rst.data.list.head || [])
+            await this.$nextTick()
+            const summaryTableList = Array.isArray(res.rst.data.overview.list) ? res.rst.data.overview.list : [res.rst.data.overview.list]
+            const detailsTableList = Array.isArray(res.rst.data.list.list) ? res.rst.data.list.list : [res.rst.data.list.list]
+            this.$refs.summaryTable.reloadData(summaryTableList)
+            this.$refs.detailsTable.reloadData(detailsTableList)
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.handleSetEmptyTable()
+        }
+      } catch (error) {
+        console.log(error)
+        this.$message.warning('操作失败')
+        this.handleSetEmptyTable()
+      } finally {
+        this.loading = false
+      }
+    },
+    // 清空表数据
+    handleSetEmptyTable() {
+      this.$refs.summaryTable.reloadData([])
+      this.$refs.detailsTable.reloadData([])
+      this.total = 0;
+      this.pages = 0;
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+      this.handleGetUpdateTime()
+    },
+    // 监听“收益截止日期”筛选变化
+    onChangeClosingDate(val) {
+      this.closing_date = val || ''
+      this.init(1)
+      this.handleGetUpdateTime()
+    },
+    // 监听“花生账户”筛选变化
+    onChangeAccountHS(val) {
+      this.account_id_hs = val || ''
+      this.init(1)
+      this.handleGetUpdateTime()
+    },
+    // 监听排序变化
+    onClickSort(sort_field, sort_type) {
+      // sort_type：升序asc、降序desc
+      if (this.sort_field === sort_field) {
+        if (this.sort_type === sort_type) {
+          // 点击的是当前排序字段 && 是当前排序类型 => 重置 取消排序
+          this.sort_field = 'date'
+          this.sort_type = 'desc'
+        } else {
+          // 点击的是当前排序字段 && 非当前排序类型 => 设置排序类型
+          this.sort_type = sort_type
+        }
+      } else {
+        // 点击的不是当前排序字段 => 设置排序字段和类型
+        this.sort_field = sort_field
+        this.sort_type = sort_type
+      }
+      // 后端排序 => 获取最新数据
+      this.init(1)
+      this.handleGetUpdateTime()
+    },
+    exportEvent (data) {
+      const tHeader = data.list.head.map(v => v.name)
+      const filterVal = data.list.head.map(v => v.column)
+      const tableDatas = [data.overview.list, ...data.list.list]
+      const excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: tableDatas, // 表一的整体json数据
+          sheetName: '', // 表一的sheet名字
+        },
+      ]
+      this.$exportOrder({ excelDatas, name: `数据循环统计（导出时间：${this.$getDay(0)}）` })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  position: relative;
+  background: #fff;
+  padding: 5px 20px;
+}
+.update-time {
+  margin-top: 10px;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #999;
+  i {
+    font-size: 14px;
+    font-weight: 600;
+    margin-right: 4px;
+  }
+}
+.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;
+}
+.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

@@ -39,6 +39,7 @@ const operateDayRetrieve = () => import(/* webpackChunkName: 'operateDayRetrieve
 const populariz = () => import(/* webpackChunkName: 'populariz' */ '@/components/dataBoard/populariz/index.vue')
 const throwPerson = () => import(/* webpackChunkName: 'throwPerson' */ '@/components/dataBoard/throwPerson/index.vue')
 const regRangeReport = () => import(/* webpackChunkName: 'regRangeReport' */ '@/components/dataBoard/regRangeReport.vue')
+const regRangeReportHS = () => import(/* webpackChunkName: 'regRangeReportHS' */ '@/components/dataBoard/regRangeReportHS.vue')
 const dramaManage = () => import(/* webpackChunkName: 'dramaManage' */ '@/components/dataBoard/dramaManage.vue')
 const charge = () => import(/* webpackChunkName: 'charge' */ '@/components/orderManage/charge.vue')
 const wxAccountList = () => import(/* webpackChunkName: 'wxAccountList' */ '@/components/dataBoard/wxAccount/list.vue')
@@ -687,6 +688,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'regRangeReportHS',
+        name: 'regRangeReportHS',
+        component: regRangeReportHS,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '花生数据循环统计',
+          isData: true
+        }
+      },
+      {
         path: 'dramaManage',
         name: 'dramaManage',
         component: dramaManage,