feat(sycm_store/tablelist): 生意参谋-竞店-尝试增加表格功能

.env.development

@@ -4,8 +4,8 @@ VITE_APP_TITLE = 王小卤-链路中心
 # 基地址
 # VITE_APP_BASE_API = '/dev-api'
 # VITE_APP_BASE_API = '/qllan'
-# VITE_APP_BASE_API = '/bclan'
-VITE_APP_BASE_API = '/home'
+VITE_APP_BASE_API = '/bclan'
+# VITE_APP_BASE_API = '/home'
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

package.json

 {
   "name": "wangxiaolu",
-  "version": "1.0.0",
+  "version": "0.0.0",
   "description": "王小卤",
   "author": "王小卤",
   "license": "MIT",

src/api/bi/competitor.js

@@ -8,7 +8,15 @@ export function getCmmListAPI(params) {
   })
 }
 
-// 生意参谋-各大竞品直播间数据集合
+// 生意参谋-各大竞店
+export function getSycmStoreListAPI(params) {
+  return request({
+    url: '/bi/oppo/sycm/store/list',
+    params
+  })
+}
+
+// 生意参谋-各大竞品
 export function getSycmListAPI(params) {
   return request({
     url: '/bi/oppo/sycm/list',

src/views/bi/competitor/sycm_store/TableList.vue

+<template>
+  <el-table :data="data"
+    style="width: 100%">
+    <el-table-column prop="platformStore"
+      label="店铺" />
+    <el-table-column prop="date"
+      label="日期" />
+    <el-table-column prop="zfmjPeakTotal"
+      label="支付买家数" />
+    <el-table-column prop="jyzsPeakTotal"
+      label="交易增速" />
+    <el-table-column prop="uvPeakTotal"
+      label="独立访客范围" />
+    <el-table-column prop="llzsPeakTotal"
+      label="流量增速" />
+  </el-table>
+</template>
+
+<script lang="ts"
+  setup>
+  const props = defineProps({
+    column: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    }
+  })
+  console.log(props)
+  
+</script>
\ No newline at end of file

src/views/bi/competitor/sycm_store/index.vue

@@ -41,14 +41,18 @@
       </el-form-item>
     </el-form>
     <div class="chart_wrap"
-      v-if="!loading"
       v-loading="loading">
       <template v-if="queryParams.brandList.length > 0 && queryParams.typeList.length > 0">
-        <group-legend :legendData="chartData.legend"
-          @click-item="legendChangeFn"></group-legend>
-        <gradient-area :chartData="chartData"></gradient-area>
+        <template v-if="showType === 'charts'">
+          <group-legend :legendData="chartData.legend"
+            @click-item="legendChangeFn"></group-legend>
+          <gradient-area :chartData="chartData"></gradient-area>
+        </template>
+        <template v-else-if="showType === 'table'">
+          <table-list :column="queryParams" :data="useTableList"></table-list>
+        </template>
       </template>
-      <no-data v-else-if="!loading"></no-data>
+      <no-data v-else></no-data>
     </div>
     <levitated-sphere>
       <el-button type="danger"
@@ -59,7 +63,8 @@
 
 <script setup>
 import GradientArea from './GradientArea.vue';
-import { getSycmListAPI } from '@/api'
+import TableList from './TableList.vue';
+import { getSycmStoreListAPI } from '@/api'
 import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
 import { useDatePickerOptions } from '@/hooks/date'
 
@@ -72,11 +77,13 @@ const typeList = ref(dataTypeList)
 const { pickerOptions } = useDatePickerOptions()
 const brandList = ref([]) // 店铺列表
 const loading = ref(true)
+// const showType = ref('charts') // 展示类型（'charts' / 'table')
+const showType = ref('table') // 展示类型（'charts' / 'table')
 
 const queryParams = reactive({ // 查询表单
   brandList: [],
   typeList: [typeList.value[0]],
-  date: dateList,
+  date: dateList
 })
 
 const allChartData = reactive({ // 图表所有数据
@@ -90,17 +97,23 @@ const chartData = reactive({ // 图表内要用的数据
   series: [],
 })
 
+const allTableList = ref([])
+const useTableList = ref([])
+
 // 获取数据
 const getList = async () => {
   loading.value = true
   resetObjValue(allChartData)
   // 获取 x 轴时间
   allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
-  const { data } = await getSycmListAPI({
+  const { data } = await getSycmStoreListAPI({
     startDate: parseTime(queryParams.date[0], '{y}-{m}-{d}'),
     endDate: parseTime(queryParams.date[1], '{y}-{m}-{d}'),
+    platformStore: '沃隆旗舰店,三只松鼠旗舰店'
   })
-  // 保存到数据源
+  // 表格数据
+  allTableList.value = data.flat()
+  // 图表数据
   data.forEach(list => {
     // list: 每个店铺数据集合
     // 公共的配置
@@ -231,6 +244,17 @@ const filterData = () => {
     legend = legend.filter(obj => {
       return queryParams.brandList.find(nameStr => obj.data.find(o => o.name.split('-')[0] === nameStr))
     })
+    // 表格数据筛选
+    useTableList.value = allTableList.value.filter(item => {
+      return queryParams.brandList.find(o => o === item.platformStore)
+    })
+  } else {
+    // 店铺都没选
+    legend.forEach(obj => {
+      obj.data.forEach(o => {
+        o.show = true
+      })
+    })
   }
 
   // 选择了数据类型，筛选
@@ -285,7 +309,8 @@ async function init() {
   // 筛选图表数据
   filterData()
 };
-nextTick(() => {
+
+onMounted(() => {
   init()
 })