feat: 投手adq数据看板

project/src/assets/config/interface_api.js

@@ -308,6 +308,7 @@ var api = {
   dataBoard_officialAccount_summary: "/api/statistics/publicAccountDataSummary", // 公众号数据 - 汇总
   dataBoard_officialAccount_list: "/api/statistics/publicAccountDataList", // 公众号数据 - 列表
   dataBoard_recharge_list: "/api/statistics/cumulativeRecoveryData", // 充值数据 - 列表
+  dataBoard_pitcherAdqAccountData: "/api/statistics/pitcherAdqAccountData", // 投手ADQ数据统计 - 列表
   dataBoard_customerStaff_list: "/api/statistics/customerServiceData", // 客服数据统计 - 列表
   dataBoard_customerStaff_setStatus: "/api/user/updateUserStatus", // 客服数据统计 - 更新客服状态
   dataBoard_chatGroupData_list: "/api/chatGroup/chatGroupStatistic", // 客户群数据 - 列表

project/src/components/dataBoard/pitcherAdq.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="recharge-wrap" v-loading="pageLoading">
+      <!-- S 筛选区 -->
+      <div class="screenBox">
+        <div class="flex-align-center" style="flex-wrap:wrap;margin-right:60px;">
+          <!-- 日期 -->
+          <datePicker style="margin-right:30px;" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" :reset="reset" @changeTime="onChangeTime" />
+        </div>
+        <el-button v-if="isCanExport" class="export-btn" type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
+      </div>
+      <!-- E 筛选区 -->
+      <!-- S 数据更新时间 -->
+      <!-- <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div> -->
+      <!-- E 数据更新时间 -->
+      <!-- S 明细表 detailsTable -->
+      <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, idx) in detailsTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 160" :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" /></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 }">
+              <span v-if="item.column == 'pitcher_name'">{{row[item.column] || '-' }}</span>
+              <span v-else>{{ (row[item.column] || row[item.column] == 0) ? $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, sizes" :page-sizes="[20, 50, 100]" @size-change="handleSizeChange" :page-count='Number(pagination.pages)' />
+        </div> -->
+      </div>
+      <!-- E 明细表 detailsTable -->
+  </div>
+</template>
+
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+
+export default {
+  components: {
+    datePicker,
+  },
+  data() {
+    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
+    return{
+      default_time: DEFAULT_TIME,
+      reset: false,
+      pageLoading: false,
+      height: '',
+
+      detailLoading: false,
+      detailsTableCol: [],
+
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        time: DEFAULT_TIME, // 自定义日期
+        sort_field: '', // 排序字段 - 默认值
+        sort_type: '', // 升序/降序
+      },
+      updateTime: '', // 数据更新时间
+      isHasData: false,
+    }
+  },
+  computed: {
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export
+    },
+  },
+  created() {
+    this.initTableHeight()
+    this.handleGetData()
+  },
+  methods:{
+    handleGetData() {
+      this.handleGetList()
+      // this.handleGetUpdateTime()
+    },
+    // 获取"数据更新时间"
+    // async handleGetUpdateTime() {
+    //   try {
+    //     const params = { type: 'cumulative_recovery_data' }
+    //     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 = ''
+    //   }
+    // },
+    // 获取列表数据
+    async handleGetList() {
+      try {
+        this.detailLoading = true
+        const params = {
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+          sort_field: this.filter.sort_field,
+          sort_type: this.filter.sort_type,
+          // page: this.pagination.page,
+          // page_size: this.pagination.page_size,
+        }
+        const url = `${this.URL.BASEURL}${this.URL.dataBoard_pitcherAdqAccountData}`
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          res.rst.extra[0].fixed = 'left' // 前1列固定左侧
+          const detailsTableCol = []
+          res.rst.extra.forEach(item => {
+            if (item.name && item.name.length > 6) { // 长字符宽度
+              item['min_width'] = item.name.length * 15
+            }
+            detailsTableCol.push(item) // 收集普通表头
+          })
+          this.detailsTableCol = Object.freeze(detailsTableCol)
+          await this.$nextTick()
+          const detailsTableList = Array.isArray(res.rst.data) ? res.rst.data : []
+          this.$refs.detailsTable.reloadData(detailsTableList)
+          // this.pagination.total = res.rst.pageInfo.total
+          // this.pagination.pages = res.rst.pageInfo.pages
+          this.isHasData = !!detailsTableList.length
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.$refs.detailsTable.reloadData([])
+          // this.pagination.total = 0
+          // this.pagination.pages = 0
+          this.isHasData = false
+        }
+      } catch (error) {
+        console.log(error)
+        this.$refs.detailsTable.reloadData([])
+        // this.pagination.total = 0
+        // this.pagination.pages = 0
+        this.isHasData = false
+      } finally {
+        this.detailLoading = false
+      }
+    },
+    // 监听"时间"筛选变化
+    onChangeTime(time) {
+      this.filter.time = Array.isArray(time) ? time : []
+      // this.pagination.page = 1
+      this.handleGetData()
+    },
+    // 监听排序变化
+    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.handleGetData()
+    },
+    // 监听当前页变化
+    // handleCurrentChange(currentPage) {
+    //   this.pagination.page = currentPage
+    //   this.handleGetData()
+    // },
+    // handleSizeChange(page_size) {
+    //   this.pagination.page_size = page_size
+    //   this.pagination.page = 1
+    //   this.handleGetData()
+    // },
+    // 监听点击"重置"按钮
+    onClickReset() {
+      this.reset = !this.reset
+      this.filter.time = this.default_time
+      this.filter.sort_field = ''
+      this.filter.sort_type = ''
+      // this.pagination.page = 1
+      this.handleGetData()
+    },
+    // 监听点击"导出"按钮
+    async onClickExport() {
+      // if (!this.pagination.total) return this.$message.warning('暂无数据可导出')
+      if (!this.isHasData) return this.$message.warning('暂无数据可导出')
+      try {
+        this.pageLoading = true
+        const url = {
+          detail: `${this.URL.BASEURL}${this.URL.dataBoard_pitcherAdqAccountData}`,
+        }
+        const params = {
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
+        }
+        const [{ data: detailRes = {} }] = await Promise.all([
+          this.$axios.get(url.detail, {
+            params: {
+              ...params,
+              sort_field: this.filter.sort_field,
+              sort_type: this.filter.sort_type,
+              // page: 1,
+              // page_size: this.$store.state.exportNumber,
+            }
+          })
+        ])
+        if (detailRes && detailRes.errno == 0) {
+          this.handleExport({
+            detailData: detailRes.rst,
+          })
+        } else if (detailRes.errno != 4002) {
+          this.$message.warning(detailRes.err)
+        }
+      } catch (error) {
+        console.log(error)
+        this.$message.warning('导出失败，请重试')
+      } finally {
+        this.pageLoading = false
+      }
+    },
+    // 执行导出逻辑
+    handleExport({ detailData = {} }) {
+      let tHeader = []
+      let filterVal = []
+      let tableDatas = []
+
+      tHeader = [
+        ...detailData.extra.map(d => `${d.name}`),
+      ]
+
+      filterVal = [
+        ...detailData.extra.map(d => d.column),
+      ]
+
+      tableDatas = [
+        ...detailData.data,
+      ]
+
+      const excelDatas = [
+        {
+          tHeader, // sheet表一头部
+          filterVal, // 表一的数据字段
+          tableDatas, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `投手ADQ数据统计（导出时间：${this.$getDay(0)}）` })
+    },
+    getHeaderCellStyle() {
+      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
+    },
+    initTableHeight() {
+      this.height = document.documentElement.clientHeight - 180 > 400 ? document.documentElement.clientHeight - 180 : 400
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.recharge-wrap {
+  position: relative;
+  min-height: calc(100vh - 70px);
+  .empty-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .screenBox {
+    background: #fff;
+    // padding: 5px 20px 26px;
+    padding: 5px 20px 10px;
+    position: relative;
+    .export-btn {
+      position: absolute;
+      top: 17px;
+      right: 4px;
+    }
+    .reset {
+      width: 80px;
+      height: 30px;
+      background: #00b38a;
+      border-radius: 100px 3px 3px 3px;
+      border: 1px solid #d2d2d2;
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 30px;
+      text-align: center;
+      letter-spacing: 2px;
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+  .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;
+    }
+  }
+  .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

@@ -86,6 +86,8 @@ const operator = () => import(/* webpackChunkName: 'operator' */ '@/components/d
 const officialAccount = () => import(/* webpackChunkName: 'officialAccount' */ '@/components/dataBoard/officialAccount.vue')
 // 数据看板 - 充值数据
 const recharge = () => import(/* webpackChunkName: 'recharge' */ '@/components/dataBoard/recharge.vue')
+// 数据看板 - 充值数据
+const pitcherAdq = () => import(/* webpackChunkName: 'pitcherAdq' */ '@/components/dataBoard/pitcherAdq.vue')
 // 数据看板 - 客服数据统计
 const customerStaff = () => import(/* webpackChunkName: 'customerStaff' */ '@/components/dataBoard/customerStaff/index.vue')
 // 数据看板 - 导出列表(离线导出任务列表)
@@ -766,6 +768,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'pitcherAdq',
+        name: 'pitcherAdq',
+        component: pitcherAdq,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '投手ADQ数据统计',
+          isData: true
+        }
+      },
+      {
         path: 'customerStaff',
         name: 'customerStaff',
         component: customerStaff,