🐛 fix: 广告管理<广告总览>: 修复ACOS折线图数据显示错误

.env.development

@@ -3,8 +3,8 @@ ENV = 'development'
 
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
-# VITE_API_URL = 'http://192.168.1.225/'
-VITE_API_URL = 'https://ads.vzzon.com'
+VITE_API_URL = 'http://192.168.1.225/'
+# VITE_API_URL = 'https://ads.vzzon.com'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

src/main.ts

@@ -68,6 +68,7 @@ other.elSvg(app)
 
 app.use(VXETable)
 app.use(permission)
+// @ts-ignore
 app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app')
 
 app.config.globalProperties.mittBus = mitt()

src/views/adManage/ad-overview/total/index.vue

@@ -1,58 +1,62 @@
 <script lang="ts" setup>
-import {nextTick, onBeforeUnmount, onMounted, reactive, Ref, ref, watch} from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, reactive, Ref, ref, watch } from 'vue'
 import * as echarts from 'echarts'
-import {useShopInfo} from '/@/stores/shopInfo'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
-import {createCrudOptions} from '/@/views/adManage/sp/targets/crud'
-import {useFs} from '@fast-crud/fast-crud'
-import {getCardTotalData, getChartTotalData} from '/@/views/adManage/ad-overview/total/api'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { createCrudOptions } from '/@/views/adManage/sp/targets/crud'
+import { useFs } from '@fast-crud/fast-crud'
+import { getCardTotalData, getChartTotalData } from '/@/views/adManage/ad-overview/total/api'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 
 const loading = ref(true)
 const cardLoading = ref(true)
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
+const { dateRange } = storeToRefs(publicData)
 const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)
 const tabActiveName = ref('Campaigns')
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
 })
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 
 // 广告类型下拉框
 const selectedPortfolios = ref('SP')
 const portfolios = [
   {
     value: 'SP/SB/SD',
-    label: 'SP/SB/SD'
+    label: 'SP/SB/SD',
   },
   {
     value: 'SP',
-    label: 'SP'
+    label: 'SP',
   },
   {
-    value:'SB',
-    label:'SB'
+    value: 'SB',
+    label: 'SB',
   },
   {
-    value:'SD',
-    label:'SD'
+    value: 'SD',
+    label: 'SD',
   },
   {
     value: 'DSP',
     label: 'DSP',
-    disabled: true
-  }
+    disabled: true,
+  },
 ]
 
 // 发送请求获取数据
 async function setTotalData() {
   try {
     cardLoading.value = true
-    const resp = await getCardTotalData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: queryParams.value.profileId })
+    const resp = await getCardTotalData({
+      startDate: dateRange.value[0],
+      endDate: dateRange.value[1],
+      profileId: queryParams.value.profileId,
+    })
     state.homeOne[0].num1 = resp.data.Spend
     state.homeOne[0].compareNum = resp.data.prevSpend
     state.homeOne[0].num2 = resp.data.gapSpend
@@ -76,7 +80,11 @@ let optionSource
 async function setChartTotalData() {
   try {
     loading.value = true
-    const resp = await getChartTotalData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: queryParams.value.profileId })
+    const resp = await getChartTotalData({
+      startDate: dateRange.value[0],
+      endDate: dateRange.value[1],
+      profileId: queryParams.value.profileId,
+    })
     optionSource = resp.data
     await setChartOptions()
     return resp.data
@@ -87,27 +95,27 @@ async function setChartTotalData() {
   }
 }
 
-
-onMounted( () => {
+onMounted(() => {
   // crudExpose.doRefresh()
   setTotalData()
   setChartTotalData()
 })
 
-watch(queryParams, async() => {
-  try {
-    loading.value = true
-    console.log('queryParams.value', queryParams.value)
-    await initLine()
-    await setTotalData()
-    await setChartTotalData()
-    loading.value = false
-  } catch (error) {
-    console.log(error)
-  }
-
-}, {deep: true})
-
+watch(
+  queryParams,
+  async () => {
+    try {
+      loading.value = true
+      await initLine()
+      await setTotalData()
+      await setChartTotalData()
+      loading.value = false
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  { deep: true }
+)
 
 // 卡片相关功能
 const state = reactive({
@@ -159,30 +167,32 @@ const state = reactive({
   },
 })
 
-
 // 折线图相关功能
 const chartRefOne = ref()
 let chartObjOne
 const option = {
-  title: {text: '花费 & 销售额'},
+  title: { text: '花费 & 销售额' },
   dataset: {
-    source: []
+    source: [],
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+        backgroundColor: '#6a7985',
+      },
+    },
   },
   legend: {
-    selected: {},  // 控制显隐
+    selected: {}, // 控制显隐
     data: ['花费', '销售额'],
-    show: true
+    show: true,
   },
   grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
+    top: 50,
+    right: 65,
+    bottom: 30,
+    left: 65,
   },
   xAxis: {
     type: 'category',
@@ -194,22 +204,22 @@ const option = {
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3a83f7' // 第一个 Y 轴的颜色
-        }
-      }
+          color: '#3a83f7', // 第一个 Y 轴的颜色
+        },
+      },
     },
     {
       type: 'value',
       splitLine: {
-        show: false
+        show: false,
       },
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#f19a37' // 第二个 Y 轴的颜色
-        }
-      }
-    }
+          color: '#f19a37', // 第二个 Y 轴的颜色
+        },
+      },
+    },
   ],
   series: [
     {
@@ -231,16 +241,23 @@ const option = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
-          }, {
-            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
     {
       name: '销售额',
@@ -252,7 +269,7 @@ const option = {
       type: 'line',
       smooth: true,
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
       },
       itemStyle: {
         color: '#f19a37',
@@ -264,42 +281,52 @@ const option = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
-          }, {
-            offset: 0.2, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(241, 154, 55, 0.5)', // 顶部半透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(241, 154, 55, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(241, 154, 55, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
-  ]
+  ],
 }
 
 const chartRefAcos = ref()
 let chartObjAcos
 const option2 = {
-  title: {text: 'Acos'},
+  title: { text: 'ACOS' },
   dataset: {
-    source: []
+    source: [],
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+        backgroundColor: '#6a7985',
+      },
+    },
   },
   legend: {
-    selected: {},  // 控制显隐
-    data: ['Acos'],
-    show: true
+    selected: {}, // 控制显隐
+    data: ['ACOS'],
+    show: true,
   },
   grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
+    top: 50,
+    right: 65,
+    bottom: 30,
+    left: 65,
   },
   xAxis: {
     type: 'category',
@@ -311,23 +338,23 @@ const option2 = {
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3a83f7'
-        }
-      }
-    }
+          color: '#3a83f7',
+        },
+      },
+    },
   ],
   series: [
     {
-      name: 'Acos',
+      name: 'ACOS',
       yAxisIndex: 0,
-      encode: {
+      encode: {   // 根据dataset.source的名称映射到相应的维度
         x: 'Name',
-        y: 'Acos',
+        y: 'ACOS',
       },
       type: 'line',
       smooth: true,
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
       },
       legendHoverLink: false,
       itemStyle: {
@@ -340,42 +367,52 @@ const option2 = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
-          }, {
-            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
-  ]
+  ],
 }
 
 const chartRefCPCandCTR = ref()
 let chartObjCPCandCTR
 const option3 = {
-  title: {text: '点击成本 & 点击率'},
+  title: { text: '点击成本 & 点击率' },
   dataset: {
-    source: []
+    source: [],
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+        backgroundColor: '#6a7985',
+      },
+    },
   },
   legend: {
-    selected: {},  // 控制显隐
+    selected: {}, // 控制显隐
     data: ['点击成本', '点击率'],
-    show: true
+    show: true,
   },
   grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
+    top: 50,
+    right: 65,
+    bottom: 30,
+    left: 65,
   },
   xAxis: {
     type: 'category',
@@ -387,22 +424,22 @@ const option3 = {
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3a83f7' // 第一个 Y 轴的颜色
-        }
-      }
+          color: '#3a83f7', // 第一个 Y 轴的颜色
+        },
+      },
     },
     {
       type: 'value',
       splitLine: {
-        show: false
+        show: false,
       },
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#f19a37' // 第二个 Y 轴的颜色
-        }
-      }
-    }
+          color: '#f19a37', // 第二个 Y 轴的颜色
+        },
+      },
+    },
   ],
   series: [
     {
@@ -424,16 +461,23 @@ const option3 = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
-          }, {
-            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
     {
       name: '点击率',
@@ -454,42 +498,52 @@ const option3 = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
-          }, {
-            offset: 0.2, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(241, 154, 55, 0.5)', // 顶部半透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(241, 154, 55, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(241, 154, 55, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
-  ]
+  ],
 }
 
 const chartRefTotalPurchases = ref()
 let chartObjTotalPurchases
 const option4 = {
-  title: {text: '订单数'},
+  title: { text: '订单数' },
   dataset: {
-    source: []
+    source: [],
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+        backgroundColor: '#6a7985',
+      },
+    },
   },
   legend: {
-    selected: {},  // 控制显隐
+    selected: {}, // 控制显隐
     data: ['订单数'],
-    show: true
+    show: true,
   },
   grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
+    top: 50,
+    right: 65,
+    bottom: 30,
+    left: 65,
   },
   xAxis: {
     type: 'category',
@@ -501,10 +555,10 @@ const option4 = {
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3a83f7'
-        }
-      }
-    }
+          color: '#3a83f7',
+        },
+      },
+    },
   ],
   series: [
     {
@@ -517,7 +571,7 @@ const option4 = {
       type: 'line',
       smooth: true,
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
       },
       legendHoverLink: false,
       itemStyle: {
@@ -530,42 +584,52 @@ const option4 = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
-          }, {
-            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
-  ]
+  ],
 }
 
 const chartRefImpandCli = ref()
 let chartObjImpandCli
 const option5 = {
-  title: {text: '曝光量 & 点击量'},
+  title: { text: '曝光量 & 点击量' },
   dataset: {
-    source: []
+    source: [],
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+        backgroundColor: '#6a7985',
+      },
+    },
   },
   legend: {
-    selected: {},  // 控制显隐
+    selected: {}, // 控制显隐
     data: ['曝光量', '点击量'],
-    show: true
+    show: true,
   },
   grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
+    top: 50,
+    right: 65,
+    bottom: 30,
+    left: 65,
   },
   xAxis: {
     type: 'category',
@@ -577,22 +641,22 @@ const option5 = {
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3a83f7' // 第一个 Y 轴的颜色
-        }
-      }
+          color: '#3a83f7', // 第一个 Y 轴的颜色
+        },
+      },
     },
     {
       type: 'value',
       splitLine: {
-        show: false
+        show: false,
       },
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#f19a37' // 第二个 Y 轴的颜色
-        }
-      }
-    }
+          color: '#f19a37', // 第二个 Y 轴的颜色
+        },
+      },
+    },
   ],
   series: [
     {
@@ -614,16 +678,23 @@ const option5 = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
-          }, {
-            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
     {
       name: '点击量',
@@ -644,18 +715,25 @@ const option5 = {
           y: 0,
           x2: 0,
           y2: 1,
-          colorStops: [{
-            offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
-          }, {
-            offset: 0.2, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
-          }, {
-            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
-          }],
-          global: false // 缺省为 false
-        }
-      }
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(241, 154, 55, 0.5)', // 顶部半透明
+            },
+            {
+              offset: 0.2,
+              color: 'rgba(241, 154, 55, 0.2)', // 中间更透明
+            },
+            {
+              offset: 1,
+              color: 'rgba(241, 154, 55, 0)', // 底部完全透明
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
     },
-  ]
+  ],
 }
 
 function initLine() {
@@ -671,16 +749,16 @@ function initLine() {
 function setChartOptions() {
   nextTick(() => {
     const chartOptions = [
-      {chart: chartObjOne, option: option},
-      {chart: chartObjAcos, option: option2},
-      {chart: chartObjCPCandCTR, option: option3},
-      {chart: chartObjTotalPurchases, option: option4},
-      {chart: chartObjImpandCli, option: option5}
+      { chart: chartObjOne, option: option },
+      { chart: chartObjAcos, option: option2 },
+      { chart: chartObjCPCandCTR, option: option3 },
+      { chart: chartObjTotalPurchases, option: option4 },
+      { chart: chartObjImpandCli, option: option5 },
     ]
-
-    chartOptions.forEach(chartOption => {
+    // 通过循环设置图表选项
+    chartOptions.forEach((chartOption) => {
       try {
-        chartOption.option.dataset.source = optionSource
+        chartOption.option.dataset.source = optionSource  // optionSource 是一个数组，里面包含了所有的数据
         chartOption.chart.setOption(chartOption.option)
       } catch (error) {
         console.error('设置图表选项失败:', error)
@@ -691,7 +769,7 @@ function setChartOptions() {
 
 function resizeChart() {
   if (chartObjOne) {
-    chartObjOne.resize();
+    chartObjOne.resize()
     chartObjAcos.resize()
     chartObjCPCandCTR.resize()
     chartObjTotalPurchases.resize()
@@ -701,7 +779,7 @@ function resizeChart() {
 
 onMounted(async () => {
   initLine()
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
   setTimeout(() => {
     resizeChart()
   }, 10)
@@ -709,8 +787,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', resizeChart)
-});
-
+})
 </script>
 
 <template>
@@ -719,46 +796,55 @@ onBeforeUnmount(() => {
       <div class="overview-tabs">
         <DateRangePicker v-model="dateRange"></DateRangePicker>
         <el-select
-            v-model="selectedPortfolios"
-            placeholder="SP"
-            style="width: 200px"
-            collapse-tags
-            collapse-tags-tooltip
-            :max-collapse-tags="3"
-        >
-          <el-option v-for="info of portfolios" :key="info.value" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
+          v-model="selectedPortfolios"
+          placeholder="SP"
+          style="width: 200px"
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="3">
+          <el-option
+            v-for="info of portfolios"
+            :key="info.value"
+            :label="info.label"
+            :value="info.value"
+            :disabled="info.disabled"></el-option>
         </el-select>
       </div>
       <!-- 卡片内容 不要删除这个类 -->
       <div class="home-container" style="margin-top: 0" v-loading="cardLoading">
         <el-row :gutter="15" class="home-card-one mb15">
           <el-col
-              :xs="24"
-              :sm="12"
-              :md="12"
-              :lg="6"
-              :xl="6"
-              v-for="(v, k) in state.homeOne"
-              :key="k"
-              :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
-          >
+            :xs="24"
+            :sm="12"
+            :md="12"
+            :lg="6"
+            :xl="6"
+            v-for="(v, k) in state.homeOne"
+            :key="k"
+            :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
             <div class="home-card-item flex">
               <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
                 <div class="flex-auto" style="margin-top: -10px">
                   <div class="mt10">{{ v.cardTitle }}</div>
                   <div class="font30">{{ v.num1 }}</div>
-                  <div style="display: inline-block; margin-right: 10px; margin-left: 3px;">
+                  <div style="display: inline-block; margin-right: 10px; margin-left: 3px">
                     {{ v.compareNum }}
                   </div>
-                  <el-icon :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }" style="display: inline-block; padding-top: 2px">
+                  <el-icon
+                    :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }"
+                    style="display: inline-block; padding-top: 2px">
                     <template v-if="String(v.num2).includes('-')">
-                      <Bottom/> <!-- num2 是负数时显示向下箭头 -->
+                      <Bottom />
+                      <!-- num2 是负数时显示向下箭头 -->
                     </template>
                     <template v-else>
-                      <Top/> <!-- num2 不是负数时显示向上箭头 -->
+                      <Top />
+                      <!-- num2 不是负数时显示向上箭头 -->
                     </template>
                   </el-icon>
-                  <span class="l-indent" :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }">{{ v.num2 }}%</span>
+                  <span class="l-indent" :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }"
+                    >{{ v.num2 }}%</span
+                  >
                 </div>
                 <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
                   <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
@@ -769,30 +855,30 @@ onBeforeUnmount(() => {
         </el-row>
       </div>
       <!-- 折线图 -->
-      <el-card v-loading="loading" style="margin-top: -5px;">
-        <div style="height: 350px;" ref="chartRefOne"></div>
+      <el-card v-loading="loading" style="margin-top: -5px">
+        <div style="height: 350px" ref="chartRefOne"></div>
       </el-card>
       <el-row :gutter="5" style="margin-top: 10px">
         <el-col :span="12">
           <el-card v-loading="loading">
-            <div style="height: 350px;" ref="chartRefAcos"></div>
+            <div style="height: 350px" ref="chartRefAcos"></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card v-loading="loading">
-            <div style="height: 350px;" ref="chartRefCPCandCTR"></div>
+            <div style="height: 350px" ref="chartRefCPCandCTR"></div>
           </el-card>
         </el-col>
       </el-row>
       <el-row :gutter="5" style="margin-top: 10px">
         <el-col :span="12">
           <el-card v-loading="loading">
-            <div style="height: 350px;" ref="chartRefTotalPurchases"></div>
+            <div style="height: 350px" ref="chartRefTotalPurchases"></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card v-loading="loading">
-            <div style="height: 350px;" ref="chartRefImpandCli"></div>
+            <div style="height: 350px" ref="chartRefImpandCli"></div>
           </el-card>
         </el-col>
       </el-row>
@@ -907,6 +993,7 @@ $homeNavLengh: 8;
 .down {
   margin-top: 10px;
 }
+
 .l-indent {
   margin-left: 1px;
 }

src/views/adManage/sp/index.vue

@@ -24,8 +24,14 @@ const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)
 provide('profile', profile)
 const searchItem = ref('')
+const filterItem = ref('')
 provide('searchItem', searchItem)
 
+// 防止搜索框内容变化时，搜索框内容不更新
+function handleSearchChange() {
+  searchItem.value = filterItem.value
+}
+
 const tabActiveName = ref('Campaigns')
 const tabs = [
   { label: '广告活动', name: 'Campaigns' },
@@ -55,7 +61,7 @@ onBeforeMount(async () => {
 <template>
   <div class="asj-container">
     <div class="public-search">
-      <el-input v-model="searchItem" @blur="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
+      <el-input v-model="filterItem" @blur="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
       <TopFilter></TopFilter>
       <el-select
         v-model="selectedPortfolios"

src/views/system/login/index.vue

@@ -43,33 +43,9 @@ async function fetchWorkWeChatCode() {
   }
 }
 
-function getQueryVariable(variable) {
-  const query = window.location.search.substring(1)
-  const vars = query.split('&')
-  for (let i = 0; i < vars.length; i++) {
-    const pair = vars[i].split('=')
-    if (decodeURIComponent(pair[0]) === variable) {
-      return decodeURIComponent(pair[1])
-    }
-  }
-  console.log('Query variable %s not found', variable)
-}
-
-// 页面加载完毕后调用这些函数来获取code和state
-window.onload = function () {
-  const code = getQueryVariable('code')
-  const state = getQueryVariable('state')
-  console.log('Code:', code)
-  console.log('State:', state)
-}
-
 // 页面加载时
 onMounted(() => {
   NextLoading.done()
-  const code = getQueryVariable('code')
-  const state = getQueryVariable('state')
-  console.log('Code:', code)
-  console.log('State:', state)
 })
 </script>