refactor(tablelist): 修复了颜色，和表格里合并日期给个平均日的提示

src/main.js

@@ -15,41 +15,41 @@ import '@/assets/styles/index.scss'
 
 /****************** 插件 ******************/
 import Cookies from 'js-cookie'
+import 'virtual:svg-icons-register'  // svg 图标
 import { download } from '@/utils/request'
-import 'virtual:svg-icons-register'  // svg图标
 import SvgIcon from '@/components/SvgIcon'
 import elementIcons from '@/components/SvgIcon/svgicon'
 import { useDict } from '@/utils/dict'
 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils'
 
-// 分页组件
+// 分页
 import Pagination from '@/components/Pagination'
-// 自定义表格工具组件
+// 表格工具
 import RightToolbar from '@/components/RightToolbar'
-// 富文本组件
+// 富文本
 import Editor from "@/components/Editor"
-// 文件上传组件
+// 文件上传
 import FileUpload from "@/components/FileUpload"
-// 图片上传组件
+// 图片上传
 import ImageUpload from "@/components/ImageUpload"
-// 图片预览组件
+// 图片预览
 import ImagePreview from "@/components/ImagePreview"
-// 字典标签组件
+// 字典标签
 import DictTag from '@/components/DictTag'
 // 常用菜单
 import CommonMenu from '@/components/CommonMenu'
-// 页面工具球
+// 悬浮工具球
 import LevitatedSphere from '@/components/LevitatedSphere'
-// 自定义图例组件
+// 自定义图例
 import GroupLegend from '@/components/ECharts/GroupLegend'
-// 无数据
+// 无数据占位
 import NoData from '@/components/NoData'
-// 左侧树形类目组件
+// 树形类目
 import CategoryTree from '@/components/CategoryTree'
 
 const app = createApp(App)
 
-// 全局方法挂载
+// 全局方法
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download
 app.config.globalProperties.parseTime = parseTime
@@ -59,7 +59,8 @@ app.config.globalProperties.addDateRange = addDateRange
 app.config.globalProperties.selectDictLabel = selectDictLabel
 app.config.globalProperties.selectDictLabels = selectDictLabels
 
-// 全局组件挂载
+// 全局组件
+app.component('svg-icon', SvgIcon)
 app.component('DictTag', DictTag)
 app.component('Pagination', Pagination)
 app.component('FileUpload', FileUpload)
@@ -73,19 +74,19 @@ app.component('GroupLegend', GroupLegend)
 app.component('NoData', NoData)
 app.component('CategoryTree', CategoryTree)
 
-app.use(router)
-app.use(store)
+// 全局插件
 app.use(plugins)
 app.use(elementIcons)
-app.component('svg-icon', SvgIcon)
-
-directive(app)
-
-// 使用element-plus 并且设置全局的大小
 app.use(ElementPlus, {
   locale: locale,
-  // 支持 large、default、small
   size: Cookies.get('size') || 'default'
 })
 
+// 全局指令
+directive(app)
+
+// 路由和状态
+app.use(router)
+app.use(store)
+
 app.mount('#app')

src/permission.js

-import router from './router'
 import { ElMessage } from 'element-plus'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
+
+import router from './router'
 import { getToken } from '@/utils/auth'
 import { isHttp, isPathMatch } from '@/utils/validate'
 import { isRelogin } from '@/utils/request'
@@ -21,7 +22,6 @@ router.beforeEach((to, from, next) => {
   NProgress.start()
   if (getToken()) {
     to.meta.title && useSettingsStore().setTitle(to.meta.title)
-    /* has token*/
     if (to.path === '/login') {
       next({ path: '/' })
       NProgress.done()
@@ -30,17 +30,17 @@ router.beforeEach((to, from, next) => {
     } else {
       if (useUserStore().roles.length === 0) {
         isRelogin.show = true
-        // 判断当前用户是否已拉取完user_info信息
+        // 获取用户信息
         useUserStore().getInfo().then(() => {
           isRelogin.show = false
           usePermissionStore().generateRoutes().then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
+            // 生成可访问路由表
             accessRoutes.forEach(route => {
               if (!isHttp(route.path)) {
-                router.addRoute(route) // 动态添加可访问路由表
+                router.addRoute(route) 
               }
             })
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            next({ ...to, replace: true }) 
           })
         }).catch(err => {
           useUserStore().logOut().then(() => {
@@ -53,12 +53,10 @@ router.beforeEach((to, from, next) => {
       }
     }
   } else {
-    // 没有token
     if (isWhiteList(to.path)) {
-      // 在免登录白名单，直接进入
       next()
     } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      next(`/login?redirect=${to.fullPath}`)
       NProgress.done()
     }
   }

src/settings.js

@@ -5,7 +5,7 @@ export default {
    */
   title: import.meta.env.VITE_APP_TITLE,
   /**
-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   * 侧边栏主题 深主题 theme-dark，浅主题 theme-light
    */
   sideTheme: 'theme-dark',
   /**

src/utils/color.js

-// 竞品店铺对应颜色
-const BRAND_COLOR = {
-  // #5470c6 #0099cc #0720F0 #0062EB
-  // #00EFDC #66ccff #00EF5A #00DDEB
-  // #91cc75 #3ba272 #00cc99 #A1EB00
-  // #fac858 #EBE098 #F0EA07 #EF8912
-  // #c23531 #fc8452 #ff6699 #cc0066 #ee6666
-  // #CE09EB #E7A2EB #8409EB #EB00B4
-
-  '三只松鼠': ['#5470c6', '#00EFDC', '#91cc75', '#fac858'],
-  '三只松鼠官方旗舰店直播间': ['#91cc75', '#c23531', '#CE09EB', '#0099cc'],
-  '百草味坚果旗舰店': ['#ee6666', '#66ccff', '#3ba272', '#EBE098'],
-  '百草味官方旗舰店': ['#00EFDC', '#E7A2EB', '#fc8452', '#0720F0'],
-
-  '三只松鼠旗舰店': ['#00EF5A', '#00cc99', '#F0EA07', '#ff6699'],
-  '沃隆旗舰店': ['#8409EB', '#0062EB', '#00DDEB', '#A1EB00'],
-  '盐津铺子食品旗舰店': ['#EF8912', '#cc0066', '#EB00B4', '#ee6666'],
-  '藤桥官方旗舰店': ['#CE09EB', '#5470c6', '#0099cc', '#66ccff'],
-
-  '好利来官方旗舰店': ['#E7A2EB', '#0720F0', '#00EF5A', '#F0EA07'],
-  '炭食光食品旗舰店': ['#ff6699', '#8409EB', '#0062EB', '#00DDEB'],
-  '周黑鸭食品旗舰店': ['#8409EB', '#A1EB00', '#EF8912', '#cc0066'],
-  '良品铺子旗舰店': ['#A1EB00', '#EB00B4', '#ee6666', '#5470c6'],
-  '德芙官方旗舰店': ['#00cc99', '#00EFDC', '#91cc75', '#c23531'],
-  '洽洽食品官方旗舰店': ['#cc0066', '#CE09EB', '#0099cc', '#3ba272'],
-  '蒙都旗舰店': ['#66ccff', '#EBE098', '#fc8452', '#5470c6'],
-  '脱骨侠旗舰店': ['#EBE098', '#91cc75', '#5470c6', '#E7A2EB'],
-  '比比赞旗舰店': ['#0099cc', '#ff6699', '#00EF5A', '#cc0066'],
-}
-/**
- * 通过直播间/店铺名字取出它的颜色数据
- * @param {*} brand 直播间店铺名字
- * @param {*} index 是取第几个颜色
- * @returns 16进制颜色
- */
-export const getBrandColor = (brand, index = 0) => {
-  if (BRAND_COLOR[brand]) {
-    return BRAND_COLOR[brand][index]
-  } else {
-    return getRandomColor()
-  }
-}
-
 // 按顺序循环取颜色
 export const getAdditionalColor = (index = 0) => {
   const ADDITIONAL_COLORS = [
-    '#5470c6', '#00EFDC', '#91cc75', '#fac858', '#0062EB', '#c23531',
-    '#66ccff', '#CE09EB', '#00EF5A', '#EBE098', '#00DDEB', '#F0EA07',
-    '#3ba272', '#EF8912', '#fc8452', '#00cc99', '#ff6699', '#A1EB00',
-    '#cc0066', '#8409EB', '#0720F0', '#ee6666', '#E7A2EB', '#0099cc',
-    '#EB00B4'
+    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#00EFDC', '#0062EB', '#c23531', '#66ccff', '#CE09EB', '#00EF5A', '#EBE098', '#00DDEB', '#F0EA07', '#EF8912', '#ff6699', '#A1EB00', '#cc0066', '#8409EB', '#0720F0', '#E7A2EB', '#0099cc', '#EB00B4'
   ];
   return ADDITIONAL_COLORS[index % ADDITIONAL_COLORS.length];
 }
-
-
-// 生成 16 进制随机颜色
-const getRandomColor = () => {
-  let color = Math.floor(Math.random() * 16777215).toString(16);
-  // 检查颜色字符串的长度，如果不足6位，则在前面补0
-  while (color.length < 6) {
-    color = '0' + color;
-  }
-  return '#' + color;
-}
-

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

@@ -61,7 +61,7 @@
 <script setup>
 import LineCharts from './LineAndBar.vue'
 import { getCmmListAPI } from '@/api'
-import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
+import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils'
 import { useDatePickerOptions } from '@/hooks'
 
 // 静态数据
@@ -105,7 +105,7 @@ const getList = async () => {
   })
   data.map((list, index) => {
     // list：每个直播间
-    let color = getBrandColor(list[0]?.name)
+    let color = getAdditionalColor(index)
     // 每个系列对象
     const saleObj = {
       name: list[0]?.name + '-销售额',

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

@@ -43,7 +43,7 @@
     '独立访客范围': 'uv',
     '流量增速': 'llzs'
   }
-  defineProps({
+  const props = defineProps({
     column: {
       type: Object,
       default: () => {
@@ -57,19 +57,23 @@
       },
     },
     dateMerge: { // 是否把日期数据合并
-      type: Boolean
+      type: Boolean,
+      default: false,
     }
   })
 
   const formatterFn = (row, column, cellValue) => {
+    let result = cellValue
     if (column.property === 'jyzs' || column.property === 'llzs') {
-      return cellValue + '%'
-    } else {
-      return cellValue
+      result += '%'
     }
+    if (props.dateMerge) {
+      result += ' / 平均每日'
+    }
+    return result
   }
 
-  const emits = defineEmits(['changeType', 'queryTable', 'dateMergeFn'])
+  const emits = defineEmits(['changeType', 'queryTable', 'dateMerge'])
 
   const queryTable = () => {
     emits('queryTable')
@@ -80,7 +84,7 @@
   }
 
   const dateMergeFn = () => {
-    emits('dateMergeFn')
+    emits('dateMerge')
   }
 
 </script>

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

@@ -52,9 +52,10 @@
         <template v-else-if="showType === 'table'">
           <table-list :column="queryParams.typeList"
             :data="tableList"
+            :dateMerge="dateMerge"
             @changeType="changeType"
             @queryTable="getList"
-            @dateMergeFn="dateMergeFn"></table-list>
+            @dateMerge="dateMergeFn"></table-list>
         </template>
       </template>
       <no-data v-else-if="!loading"></no-data>
@@ -70,7 +71,7 @@
 import GradientArea from './GradientArea.vue';
 import TableList from './TableList.vue';
 import { getStoreListAPI, getSycmStoreListAPI } from '@/api'
-import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
+import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils'
 import { useDatePickerOptions } from '@/hooks'
 
 // 静态数据
@@ -120,7 +121,8 @@ const initChartsData = (data) => {
   resetObjValue(allChartData)
   allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
   // 图表数据
-  data.forEach(list => {
+  data.forEach((list, index) => {
+    index *= 4
     // list: 每个店铺数据集合
     // 公共的配置
     let commonObj = {
@@ -139,11 +141,11 @@ const initChartsData = (data) => {
     let jyzsObj = {
       ...commonObj,
       itemStyle: {
-        color: getBrandColor(list[0]?.platformStore, 0)
+        color: getAdditionalColor(index)
       },
       areaStyle: {
         opacity: 0.8,
-        color: getBrandColor(list[0]?.platformStore, 0)
+        color: getAdditionalColor(index)
       },
       name: list[0]?.platformStore + '-交易增速',
       data: []
@@ -151,11 +153,11 @@ const initChartsData = (data) => {
     let llzsObj = {
       ...commonObj,
       itemStyle: {
-        color: getBrandColor(list[0]?.platformStore, 1)
+        color: getAdditionalColor(index + 1)
       },
       areaStyle: {
         opacity: 0.8,
-        color: getBrandColor(list[0]?.platformStore, 1)
+        color: getAdditionalColor(index + 1)
       },
       name: list[0]?.platformStore + '-流量增速',
       data: [],
@@ -163,11 +165,11 @@ const initChartsData = (data) => {
     let uvObj = {
       ...commonObj,
       itemStyle: {
-        color: getBrandColor(list[0]?.platformStore, 2)
+        color: getAdditionalColor(index + 2)
       },
       areaStyle: {
         opacity: 0.8,
-        color: getBrandColor(list[0]?.platformStore, 2)
+        color: getAdditionalColor(index + 2)
       },
       name: list[0]?.platformStore + '-独立访客范围',
       data: []
@@ -175,11 +177,11 @@ const initChartsData = (data) => {
     let zfmjObj = {
       ...commonObj,
       itemStyle: {
-        color: getBrandColor(list[0]?.platformStore, 3)
+        color: getAdditionalColor(index + 3)
       },
       areaStyle: {
         opacity: 0.8,
-        color: getBrandColor(list[0]?.platformStore, 3)
+        color: getAdditionalColor(index + 3)
       },
       name: list[0]?.platformStore + '-支付买家数',
       data: []
@@ -205,25 +207,25 @@ const initChartsData = (data) => {
       data: [{
         name: jyzsObj.name,
         type: 'circle',
-        color: getBrandColor(list[0]?.platformStore, 0),
+        color: getAdditionalColor(index),
         effective: true,
         show: true,
       }, {
         name: llzsObj.name,
         type: 'circle',
-        color: getBrandColor(list[0]?.platformStore, 1),
+        color: getAdditionalColor(index + 1),
         effective: true,
         show: true
       }, {
         name: uvObj.name,
         type: 'circle',
-        color: getBrandColor(list[0]?.platformStore, 2),
+        color: getAdditionalColor(index + 2),
         effective: true,
         show: true
       }, {
         name: zfmjObj.name,
         type: 'circle',
-        color: getBrandColor(list[0]?.platformStore, 3),
+        color: getAdditionalColor(index + 3),
         effective: true,
         show: true
       }],
@@ -288,7 +290,7 @@ const filterChartsData = () => {
 
 // 筛选表格数据
 const filterTableData = () => {
-  // 没有日期合并
+  // 日期合并
   if (dateMerge.value) {
     tableList.value = allTableList.value.map(o => {
       const platformStore = o[0].platformStore