fix(utils/request.js): 修复 token 过期飞书客户端默认获取新 token 时，静默获取

src/components/LevitatedSphere/index.vue

@@ -65,8 +65,7 @@ resize()
 
 onMounted(() => {
   window.addEventListener('resize', resize)
-})
-nextTick(() => {
+  nextTick(() => {
     let isDown = false
     levitatedSphere.value.addEventListener('mousedown', (e) => {
       e.preventDefault();
@@ -97,7 +96,9 @@ nextTick(() => {
       upPoint.x = e.clientX
       upPoint.y = e.clientY
     })
-});
+  });
+})
+
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', resize)

src/utils/request.js

 import axios from 'axios'
-import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
+import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from '@/utils/ruoyi'
@@ -72,7 +72,7 @@ service.interceptors.request.use(config => {
 })
 
 // 响应拦截器
-service.interceptors.response.use(res => {
+service.interceptors.response.use(async res => {
   // 未设置状态码则默认成功状态
   const code = res.data.code || 200;
   // 获取错误信息
@@ -82,6 +82,16 @@ service.interceptors.response.use(res => {
     return res.data
   }
   if (code === 401) {
+    if (window.h5sdk) {
+      // 如果在飞书客户端，则无感知重新获取token
+      const code = await fsClientAuth()
+      await useUserStore().login({
+        type: 'fs',
+        code
+      })
+      // 重新发送本次失败的请求
+      return service(res.config)
+    }
     if (!isRelogin.show) {
       isRelogin.show = true;
       ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
@@ -106,7 +116,7 @@ service.interceptors.response.use(res => {
   } else {
     return Promise.resolve(res.data)
   }
-  },
+},
   error => {
     console.log('err' + error)
     let { message } = error;

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

@@ -85,7 +85,6 @@ const setOptions = () => {
       else yObj.name = target.name.split('-')[1]
     })
   })
-
   chart.value.setOption({
     xAxis: {
       type: 'category',
@@ -161,7 +160,7 @@ const setOptions = () => {
 }
 
 watchEffect(() => {
-  if (!chart.value || props.chartData.series.length === 0) return
+  if (!chart.value) return
   myThousand = props.chartData.series?.some(o => {
     return o.data.some(num => num >= 10000)
   })

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

@@ -55,24 +55,26 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
 import LineCharts from './LineAndBar.vue'
 import { getCmmListAPI } from '@/api'
 import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
 import { useDatePickerOptions } from '@/hooks/date'
 
-// 最近 30 日日期数组
-const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))]
-// 数据类型
-const dataTypeList = ['销售额', '观看人次']
+// 静态数据
+const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] // 最近 30 日日期数组
+const dataTypeList = ['销售额', '观看人次'] // 数据类型
+
+// 页面使用数据
+const brandList = ref([])// 直播间列表
+const typeList = ref(dataTypeList) // 数据类型列表
+const { pickerOptions } = useDatePickerOptions()
+
 const queryParams = reactive({ // 查询表单
   brandList: [],
   date: dateList,
   typeList: dataTypeList
 })
-const { pickerOptions } = useDatePickerOptions()
-const brandList = ref([])// 直播间列表
-const typeList = ref(dataTypeList)
+
 const allChartData = reactive({ // 图表所有数据
   xAxis: [],
   legend: [],
@@ -214,6 +216,7 @@ const filterData = () => {
   // 最后赋予给要展示的部分
   chartData.legend = legend
   chartData.series = series
+  console.log(series)
   chartData.xAxis = allChartData.xAxis
 }
 

src/views/bi/competitor/index.vue

@@ -24,7 +24,7 @@ const list = ref([
   { name: '生意参谋-竞店', component: shallowRef(sycmStore) },
   { name: '生意参谋-竞品', component: shallowRef(sycmPrd) }
 ])
-const activeName = ref(list.value[0].name)
+const activeName = ref(list.value[1].name)
 </script>
 
 <style scoped

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

 <template>
-  <div :class="className"
+  <div ref="echartsRef"
+    :class="className"
     :style="{ height: height, width: width }" />
 </template>
 
-<script>
-// 渐变堆叠面积图
+<script setup>
 import * as echarts from 'echarts'
-import resize from '@/views/dashboard/mixins/resize'
-import { roundUpToNextHighestPowerOfTen } from '@/utils'
-
-export default {
-  mixins: [resize],
-  props: {
+const props = defineProps({
   className: {
     type: String,
     default: 'chart'
@@ -32,46 +27,13 @@ export default {
     type: Object,
     required: true
   }
-  },
-  data() {
-    return {
-      chart: null,
-      myThousand: false
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        // this.chart.clear(); // 清除图表（重新设置）
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
+})
+const echartsRef = ref(null)
+const chart = shallowRef(null)
+let myThousand = false // 是否显示万单位
 
-      setTimeout(() => {
-        this.setOptions(this.chartData)
-      }, 10000)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
+const setOptions = () => {
+  chart.value.setOption({
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -82,7 +44,7 @@ export default {
       }
     },
     legend: {
-          data: this.chartData.legend
+      data: props.chartData.legend
     },
     toolbox: {
       feature: {
@@ -101,8 +63,8 @@ export default {
     xAxis: [
       {
         // type: 'category',
-            boundaryGap: false,
-            data: this.chartData.xAxis
+        // boundaryGap: false,
+        data: props.chartData.xAxis
       }
     ],
     yAxis: [
@@ -110,150 +72,38 @@ export default {
         type: 'value'
       }
     ],
-        series: this.chartData.series
-        // series: [
-        //   {
-        //     name: 'Line 1',
-        //     type: 'line',
-        //     stack: 'Total',
-        //     smooth: true,
-        //     lineStyle: {
-        //       width: 0
-        //     },
-        //     showSymbol: false,
-        //     areaStyle: {
-        //       opacity: 0.8,
-        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //         {
-        //           offset: 0,
-        //           color: 'rgb(128, 255, 165)'
-        //         },
-        //         {
-        //           offset: 1,
-        //           color: 'rgb(1, 191, 236)'
-        //         }
-        //       ])
-        //     },
-        //     emphasis: { // 高亮图形时，淡化其他
-        //       focus: 'series'
-        //     },
-        //     data: [140, 232, 101, 264, 90, 340, 250]
-        //   },
-        //   {
-        //     name: 'Line 2',
-        //     type: 'line',
-        //     stack: 'Total',
-        //     smooth: true,
-        //     lineStyle: {
-        //       width: 0
-        //     },
-        //     showSymbol: false,
-        //     areaStyle: {
-        //       opacity: 0.8,
-        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //         {
-        //           offset: 0,
-        //           color: 'rgb(0, 221, 255)'
-        //         },
-        //         {
-        //           offset: 1,
-        //           color: 'rgb(77, 119, 255)'
-        //         }
-        //       ])
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [120, 282, 111, 234, 220, 340, 310]
-        //   },
-        //   {
-        //     name: 'Line 3',
-        //     type: 'line',
-        //     stack: 'Total',
-        //     smooth: true,
-        //     lineStyle: {
-        //       width: 0
-        //     },
-        //     showSymbol: false,
-        //     areaStyle: {
-        //       opacity: 0.8,
-        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //         {
-        //           offset: 0,
-        //           color: 'rgb(55, 162, 255)'
-        //         },
-        //         {
-        //           offset: 1,
-        //           color: 'rgb(116, 21, 219)'
-        //         }
-        //       ])
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [320, 132, 201, 334, 190, 130, 220]
-        //   },
-        //   {
-        //     name: 'Line 4',
-        //     type: 'line',
-        //     stack: 'Total',
-        //     smooth: true,
-        //     lineStyle: {
-        //       width: 0
-        //     },
-        //     showSymbol: false,
-        //     areaStyle: {
-        //       opacity: 0.8,
-        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //         {
-        //           offset: 0,
-        //           color: 'rgb(255, 0, 135)'
-        //         },
-        //         {
-        //           offset: 1,
-        //           color: 'rgb(135, 0, 157)'
-        //         }
-        //       ])
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [220, 402, 231, 134, 190, 230, 120]
-        //   },
-        //   {
-        //     name: 'Line 5',
-        //     type: 'line',
-        //     stack: 'Total',
-        //     smooth: true,
-        //     lineStyle: {
-        //       width: 0
-        //     },
-        //     showSymbol: false,
-        //     label: {
-        //       show: true,
-        //       position: 'top'
-        //     },
-        //     areaStyle: {
-        //       opacity: 0.8,
-        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //         {
-        //           offset: 0,
-        //           color: 'rgb(255, 191, 0)'
-        //         },
-        //         {
-        //           offset: 1,
-        //           color: 'rgb(224, 62, 76)'
-        //         }
-        //       ])
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [220, 302, 181, 234, 210, 290, 150]
-        //   }
-        // ]
+    series: props.chartData.series
+  }, true)
+}
+
+watchEffect(() => {
+  if (!chart.value) return
+  myThousand = props.chartData.series?.some(o => {
+    return o.data.some(num => num >= 10000)
   })
-    }
-  }
+  setOptions()
+})
+
+const initChart = () => {
+  chart.value = echarts.init(echartsRef.value)
 }
+
+const resize = () => {
+  chart.value.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
+onBeforeUnmount(() => {
+  if (!chart.value) {
+    return
+  }
+  window.removeEventListener('resize', resize)
+  chart.value.dispose()
+  chart.value = null
+})
 </script>
\ No newline at end of file

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

 <template>
   <div>
     <el-form :model="queryParams"
-      inline
-      size="small">
+      inline>
       <el-form-item label="店铺">
         <el-select v-model="queryParams.brandList"
           @change="queryChangeFn"
@@ -16,7 +15,7 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <!-- <el-form-item label="数据查看">
+      <el-form-item label="数据类型">
         <el-select v-model="queryParams.typeList"
           @change="queryChangeFn"
           multiple
@@ -31,14 +30,14 @@
       <el-form-item label="日期选择">
         <el-date-picker v-model="queryParams.date"
           type="daterange"
-          align="right"
           unlink-panels
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          :shortcuts="pickerOptions"
           @change="queryChangeFn('date')">
         </el-date-picker>
-      </el-form-item> -->
+      </el-form-item>
     </el-form>
     <div class="chart_wrap">
       <gradient-area :chartData="chartData"></gradient-area>
@@ -47,34 +46,42 @@
 </template>
 
 <script setup>
-import * as echarts from 'echarts'
-import { ref, reactive, nextTick } from 'vue'
 import GradientArea from './GradientArea.vue';
 import { getSycmListAPI } from '@/api'
-import { generatorDayList, parseTime, getBrandColor } from '@/utils'
+import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
+import { useDatePickerOptions } from '@/hooks/date'
+
+// 静态数据
+const dateList = [new Date().setDate((new Date().getDate() - 30)), new Date().setDate((new Date().getDate() - 1))] // 最近 30 日日期数组
+const dataTypeList = ['支付买家数', '交易增速', '独立访客范围', '流量增速'] // 数据类型
+
+// 本页数据
+const typeList = ref(dataTypeList)
+const { pickerOptions } = useDatePickerOptions()
+const brandList = ref([]) // 店铺列表
 
 const queryParams = reactive({ // 查询表单
   brandList: [],
-  date: [new Date().setDate(new Date().getDate() - 30), new Date().setDate(new Date().getDate() - 1)],
-  // typeList: []
+  typeList: [typeList.value[0]],
+  date: dateList,
 })
-const brandList = ref([]) // 直播间列表
-const typeList = ref(['支付买家数', '交易增速', '独立访客范围', '流量增速'])
+
 const allChartData = reactive({ // 图表所有数据
-  series: [],
   xAxis: [],
-  legend: []
+  legend: [],
+  series: []
 })
 const chartData = reactive({ // 图表内要用的数据
-  series: [],
   xAxis: [],
-  legend: []
+  legend: [],
+  series: [],
 })
 
 // 获取数据
 const getList = async () => {
-  allChartData.series = []
-  allChartData.legend = []
+  resetObjValue(allChartData)
+  // 获取 x 轴时间
+  allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
   const { data } = await getSycmListAPI({
     startDate: parseTime(queryParams.date[0], '{y}-{m}-{d}'),
     endDate: parseTime(queryParams.date[1], '{y}-{m}-{d}'),
@@ -94,7 +101,7 @@ const getList = async () => {
       showSymbol: false,
       emphasis: {
         focus: 'series'
-      },
+      }
     }
     let jyzsObj = {
       ...commonObj,
@@ -168,8 +175,9 @@ const getList = async () => {
 
 // 筛选数据
 const filterData = () => {
-  let series = allChartData.series
   let legend = allChartData.legend
+  let series = allChartData.series
+  
   if (queryParams.brandList.length > 0) {
     // 选择了店铺，筛选
     series = series.filter(item => {
@@ -179,8 +187,9 @@ const filterData = () => {
       return queryParams.brandList.find(o => o === name.split('-')[0])
     })
   }
-  if (queryParams.typeList.length > 0) {
+  
   // 选择了数据类型，筛选
+  if (queryParams.typeList.length > 0) {
     series = series.filter(item => {
       return queryParams.typeList.find(o => o === item.name.split('-')[1])
     })
@@ -188,27 +197,23 @@ const filterData = () => {
       return queryParams.typeList.find(o => o === name.split('-')[1])
     })
   }
-  // 展示所有
+
   chartData.legend = legend
   chartData.series = series
   chartData.xAxis = allChartData.xAxis
 }
 
 // 默认打开页面请求一次所有数据，并保存在数据源
-(function init() {
-  nextTick(async () => {
-    // // 初始化时间
-    // allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
+async function init() {
   const data = await getList()
   // 直播间列表
   brandList.value = data.map(list => list[0].platformStore)
   // 初始化筛选条件（默认请求第一个店铺的第一类型数据）
   queryParams.brandList = [data[0][0].platformStore]
-    queryParams.typeList = [typeList.value[0]]
   // 筛选图表数据
   filterData()
-  })
-})();
+};
+init()
 
 // 查询条件改变
 const queryChangeFn = async (arg) => {