feat: 企微数据 - 账号数据趋势 - adq & mp汇总接口联调

project/src/assets/config/interface_api.js

@@ -256,8 +256,10 @@ var api = {
   adqAccount_setAdqAccountReportRule: "/api/pitcher/setAdqAccountReportRule",
 
   dataBoard_dataCycleList: "/api/statistics/dataCycleList", // 数据循环统计
-  dataBoard_adqAccount: "/api/accountDataTrend/adqAccount", // 账号数据趋势 - adq
-  dataBoard_mpAccount: "/api/accountDataTrend/mpAccount", // 账号数据趋势 - mp
+  dataBoard_adqAccount: "/api/accountDataTrend/adqAccount", // 账号数据趋势 - adq列表
+  dataBoard_mpAccount: "/api/accountDataTrend/mpAccount", // 账号数据趋势 - mp列表
+  dataBoard_adqAccountSummary: "/api/accountDataTrend/adqAccountSummary", // 账号数据趋势 - adq汇总
+  dataBoard_mpAccountSummary: "/api/accountDataTrend/mpAccountSummary", // 账号数据趋势 - mp汇总
 };
 
 export { api };

project/src/components/dataBoard/accountTrends.vue

@@ -40,101 +40,108 @@
     <!-- 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>
+      <div v-loading="summaryLoading">
+        <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 + 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 }">
+              <!-- 时间 -->
+              <div v-if="item.name === '时间' || item.name === '账户'">
+                <span>汇总</span>
+              </div>
+              <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+            </template>
+          </ux-table-column>
+        </ux-grid>
+      </div>
       <!-- 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 : 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': 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 v-loading="detailLoading">
+        <ux-grid class="detailsTable" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini" :height="height">
+          <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 : 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': 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>
+              </div>
+            </template>
+            <template v-slot="{ row }">
+              <!-- 时间 -->
+              <div v-if="item.column === 'ref_date'">
+                <span>{{ row['expense_date'] }}</span><span v-if="row['expense_date_end']"> - {{ row['expense_date_end'] }}</span>
+              </div>
+              <!-- adq账号 -->
+              <span v-else-if="item.column === 'account_id'">
+                {{ row['account_id'] || '-' }}
+              </span>
+              <!-- 其他 -->
+              <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
+            </template>
+          </ux-table-column>
+          <!-- DAY1、DAY2... -->
+          <ux-table-column width="120" v-for="(dayItem, dayIdx) in detailsTableColDays" :key="dayIdx + 'extra'">
+            <template #header>
+              <div class="flex-align-jus-center">{{ dayItem.name }}
+                <el-tooltip placement="top" v-if="dayIdx === 0">
+                  <div slot="content">充：这天的充值金额<br />回：截止这天的累计金额/当天消耗<br />增：这天回收金额/当天消耗<br />倍：累计金额/第一天累计金额<br />充值人数：这天充值的人数</div>
+                  <div><i class="el-icon-question" /></div>
+                </el-tooltip>
+              </div>
+            </template>
+            <template v-slot="{ row }">
+              <div>
+                <span class="font" style="color:#2C9841">充:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].pay_money ?
+                    row.day_info[dayIdx].pay_money : '-'
+                }}</span>
+              </div>
+              <div>
+                <span class="font" style="color:#EB4315">回:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].total_roi ?
+                    row.day_info[dayIdx].total_roi : '-'
+                }}</span>
+              </div>
+              <div>
+                <span class="font" style="color:#F28544">增:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].new_roi ?
+                    row.day_info[dayIdx].new_roi : '-'
+                }}</span>
+              </div>
+              <div>
+                <span class="font" style="color:#2983DF">倍:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].income_times ?
+                    row.day_info[dayIdx].income_times : '-'
+                }}</span>
+              </div>
+              <div>
+                <span class="font" style="color:#7366FF">充值人数:</span>
+                <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].charge_user ?
+                    row.day_info[dayIdx].charge_user : '-'
+                }}</span>
               </div>
-            </div>
-          </template>
-          <template v-slot="{ row }">
-            <!-- 时间 -->
-            <div v-if="item.column === 'ref_date'">
-              <span>{{ row['expense_date'] }}</span><span v-if="row['expense_date_end']"> - {{ row['expense_date_end'] }}</span>
-            </div>
-            <!-- adq账号 -->
-            <span v-else-if="item.column === 'account_id'">
-              {{ row['account_id'] || '-' }}
-            </span>
-            <!-- 其他 -->
-            <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
-          </template>
-        </ux-table-column>
-        <!-- DAY1、DAY2... -->
-        <ux-table-column width="120" v-for="(dayItem, dayIdx) in detailsTableColDays" :key="dayIdx + 'extra'">
-          <template #header>
-            <div class="flex-align-jus-center">{{ dayItem.name }}
-              <el-tooltip placement="top" v-if="dayIdx === 0">
-                <div slot="content">充：这天的充值金额<br />回：截止这天的累计金额/当天消耗<br />增：这天回收金额/当天消耗<br />倍：累计金额/第一天累计金额<br />充值人数：这天充值的人数</div>
-                <div><i class="el-icon-question" /></div>
-              </el-tooltip>
-            </div>
-          </template>
-          <template v-slot="{ row }">
-            <div>
-              <span class="font" style="color:#2C9841">充:</span>
-              <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].pay_money ?
-                  row.day_info[dayIdx].pay_money : '-'
-              }}</span>
-            </div>
-            <div>
-              <span class="font" style="color:#EB4315">回:</span>
-              <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].total_roi ?
-                  row.day_info[dayIdx].total_roi : '-'
-              }}</span>
-            </div>
-            <div>
-              <span class="font" style="color:#F28544">增:</span>
-              <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].new_roi ?
-                  row.day_info[dayIdx].new_roi : '-'
-              }}</span>
-            </div>
-            <div>
-              <span class="font" style="color:#2983DF">倍:</span>
-              <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].income_times ?
-                  row.day_info[dayIdx].income_times : '-'
-              }}</span>
-            </div>
-            <div>
-              <span class="font" style="color:#7366FF">充值人数:</span>
-              <span>{{ row && row.day_info && row.day_info[dayIdx] && row.day_info[dayIdx].charge_user ?
-                  row.day_info[dayIdx].charge_user : '-'
-              }}</span>
-            </div>
-          </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)' />
+            </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>
       </div>
       <!-- E 明细表 detailsTable -->
-    </div>
     <!-- E 表 -->
   </div>
 </template>
@@ -158,6 +165,7 @@ export default {
     return {
       default_time: DEFAULT_TIME,
       reset: false,
+      height: '',
 
       chartLoading: false,
       myChart: null,
@@ -173,8 +181,9 @@ export default {
         { name: '30天倍率', key: 'charge_user_cost', color: '#E360C8', selectFlag: true },
       ],
 
-      loading: false,
+      summaryLoading: false,
       summaryTableCol: [],
+      detailLoading: false,
       detailsTableCol: [],
       detailsTableColDays: [],
       pagination: {
@@ -207,6 +216,8 @@ export default {
     },
   },
   created () {
+    this.initTableHeight()
+    this.handleGetSummaryList()
     this.handleGetList()
     this.handleGetChart()
   },
@@ -214,11 +225,63 @@ export default {
     this.myChart && this.myChart.clear()
   },
   methods: {
+    initTableHeight() {
+      this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    },
+    // 获取汇总表数据
+    async handleGetSummaryList() {
+      console.log('handleGetSummaryList => ',)
+      try {
+        this.summaryLoading = true
+        const params = {
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          closing_date: this.filter.closing_date,
+          plat_order_type: this.filter.plat_order_type,
+          cost_cover_min: this.filter.costCover[0],
+          cost_cover_max: this.filter.costCover[1],
+        }
+        let url = ''
+
+        if (this.isADQ) { // adq 参数 & api
+          params.account_id = this.filter.account_id_adq
+          url = `${this.URL.BASEURL}${this.URL.dataBoard_adqAccountSummary}`
+        } else if (this.isMP) { // mp 参数 & api
+          params.app_id = this.filter.account_id
+          url = `${this.URL.BASEURL}${this.URL.dataBoard_mpAccountSummary}`
+        }
+
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          // res.rst.header[0].fixed = 'left' // 前2列固定左侧
+          // res.rst.header[1].fixed = 'left' // 前2列固定左侧
+          const summaryTableCol = []
+          res.rst.header.forEach(item => {
+            if (item.name && item.name.length > 6) { // 长字符宽度
+              item['min_width'] = item.name.length * 20
+            }
+            summaryTableCol.push(item) // 收集普通表头
+          })
+          this.summaryTableCol = Object.freeze(summaryTableCol)
+          await this.$nextTick()
+          const summaryTableList = Array.isArray(res.rst.data) ? res.rst.data : [res.rst.data]
+          this.$refs.summaryTable.reloadData(summaryTableList)
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.$refs.summaryTable.reloadData([])
+        }
+      } catch (error) {
+        console.log(error)
+        this.$refs.summaryTable.reloadData([])
+      } finally {
+        this.summaryLoading = false
+      }
+    },
     // 获取列表数据
     async handleGetList() {
       console.log('handleGetList => ',)
       try {
-        this.loading = true
+        this.detailLoading = true
         const params = {
           page: this.pagination.page,
           page_size: this.pagination.page_size,
@@ -242,7 +305,6 @@ export default {
         }
 
         const { data: res = {} } = await this.$axios.post(url, params)
-        this.loading = false
         if (res && res.errno == 0) {
           res.rst.extra[0].fixed = 'left' // 前2列固定左侧
           res.rst.extra[1].fixed = 'left' // 前2列固定左侧
@@ -276,8 +338,11 @@ export default {
         }
       } catch (error) {
         console.log(error)
+        this.$refs.detailsTable.reloadData([])
+        this.pagination.total = 0
+        this.pagination.pages = 0
       } finally {
-        this.loading = false
+        this.detailLoading = false
       }
     },
     // 获取折线图数据
@@ -450,36 +515,42 @@ export default {
     },
     // 监听数据类型切换
     onChangeOrderType() {
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
     // 监听时间筛选变化
     onChangeTime(time) {
       this.filter.time = Array.isArray(time) ? time : []
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
     // 监听“MP账号”筛选变化
     onChangeAccountId(val) {
       this.filter.account_id = val
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
     // 监听“MP账号”筛选变化
     onChangeAccountIdAdq(val) {
       this.filter.account_id_adq = val
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
     // 监听“收益截止日期”筛选变化
     onChangeClosingDate(val) {
       this.filter.closing_date = val || ''
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
     // 监听“推广类型”筛选变化
     onChangePromotionType(val) {
       this.filter.plat_order_type = val
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
@@ -490,6 +561,7 @@ export default {
     },
     // 监听点击"确定(搜索)"按钮
     onClickSearch() {
+      this.handleGetSummaryList()
       this.pagination.page = 1
       this.handleGetList()
     },
@@ -527,13 +599,14 @@ export default {
       this.filter.sort_field = 'expense_date'
       this.filter.sort_type = 'desc'
       this.pagination.page = 1
+      this.handleGetSummaryList()
       this.handleGetList()
     },
     // 监听点击"导出"按钮
     onClickExport() {
       console.log('onClickExport => ')
       if (!this.pagination.total) return this.$message.warning('暂无数据可导出')
-      this.loading = true
+      this.detailLoading = true
       this.$axios.get(`${this.URL.BASEURL}${this.URL.statistics_reg_range_report_new}`, {
         params: {
           begin_date: this.filter.time[0],
@@ -545,7 +618,7 @@ export default {
         }
       }).then((res) => {
         var res = res.data
-        this.loading = false
+        this.detailLoading = false
         if (res && res.errno == 0) {
           this.handleExport(res.rst.data.list)
         } else if (res.errno != 4002) {
@@ -555,7 +628,7 @@ export default {
           })
         }
       }).catch((err) => {
-        this.loading = false
+        this.detailLoading = false
       });
     },
     // 执行导出逻辑