Merge remote-tracking branch 'origin/test' into test

# Conflicts:
#	src/views/adManage/sp/index.vue

src/components/MetricsCards/mCard.vue

@@ -5,7 +5,7 @@
     <div class="metric-value">{{ selectedData?.metricVal }}</div>
     <div class="metric-pre">
       <span>{{ selectedData?.preVal }}&nbsp;&nbsp;</span>
-      <el-icon>
+      <el-icon v-show="selectedData?.gapVal">
         <Top :class="colorClass" v-if="isBoost"/>
         <Bottom :class="colorClass" v-else/>
       </el-icon>

src/utils/service.ts

@@ -16,7 +16,7 @@ import { getBaseURL } from './baseUrl';
 function createService() {
 	// 创建一个 axios 实例
 	const service = axios.create({
-		timeout: 20000,
+		timeout: 30000,
 		headers: {
 			'Content-Type': 'application/json;charset=utf-8',
 		},
@@ -172,7 +172,7 @@ function createRequestFunction(service: any) {
 			headers: {
 				'Content-Type': get(config, 'headers.Content-Type', 'application/json'),
 			},
-			timeout: 10000,
+			timeout: 30000,
 			baseURL: getBaseURL(),
 			data: {},
 		};

src/views/adManage/sp/adGroups/chartComponents/adGroup.vue

@@ -1,111 +0,0 @@
-<template>
-  <MetricsCards v-model="metrics" :metric-items="metricItems" @change="changeMetric"></MetricsCards>
-  <div style="height: 500px;" ref="chartRef"></div>
-</template>
-
-<script lang="ts" setup>
-import { ref,onBeforeMount,onMounted,onBeforeUnmount,inject, Ref } from 'vue'
-import MetricsCards from '/@/components/MetricsCards/index.vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import * as echarts from 'echarts'
-import XEUtils from 'xe-utils'
-import { getLineData, getCardData } from '../api'
-import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
-
-defineOptions({name: 'AdGroupChart'})
-
-const shopInfo = useShopInfo()
-const metrics = ref([
-  {metric: 'Impression', color: 'aqua', 'label': '曝光量'},
-  {metric: 'Click', color: 'blue', 'label': '点击量'},
-  {metric: 'Spend', color: 'orange', 'label': '花费'},
-])
-const metricItems: Ref<MetricData[]> = ref([])
-let chartObj:any
-const chartRef = ref()
-const dateRange: string[] = inject('dateRange', [])
-
-onBeforeMount(async () => {
-	await getMetricItems()
-})
-onMounted(() => {
-	initLine()
-	addResize()
-})
-onBeforeUnmount(() => {
-	if(chartObj) {
-		chartObj.dispose()
-    chartObj = null
-	}
-  removeResize()
-})
-
-const getMetricItems = async () => {
-	const resp = await getCardData({start: dateRange[0], end: dateRange[1], profile: shopInfo.profile.profile_id})
-	const data = resp.data
-	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
-		const tmp: MetricData = { 
-			label: info.label, 
-			value: info.value,
-			metricVal: data[info.value],
-			gapVal: data[`gap${info.value}`],
-			preVal: data[`prev${info.value}`],
-			disabled: info.initShow ? true : false
-		}
-		metricItems.value.push(tmp)
-	})
-}
-const getDataset = async () => {
-	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange[0], end: dateRange[1]})
-	return resp.data
-}
-const initLine = async () => {
-	chartObj = echarts.init(chartRef.value)
-	
-  const option: any = {
-    dataset: {
-      source: []
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        // type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
-    },
-    legend: {
-      selected: {},  // 控制显隐
-      show: false
-    },
-    grid: {
-      top: 50, right: 150, bottom: 30, left: 55,
-    },
-    xAxis: {
-      type: 'time'
-    },
-    yAxis: [],
-    series: []
-  }
-
-	const items = await getDataset()
-	option.dataset.source = items
-
-	
-	// chartObj.setOption(option)
-}
-const changeMetric = () => {
-
-}
-
-const resizeChart = () => { chartObj.resize() }
-const addResize = () => { window.addEventListener('resize', resizeChart) }
-const removeResize = () => { window.removeEventListener('resize', resizeChart) }
-
-// defineExpose({resizeChart})
-</script>
-
-<style scoped>
-
-</style>

src/views/adManage/sp/adGroups/chartComponents/adGroupChart.vue

@@ -0,0 +1,224 @@
+<template>
+  <MetricsCards v-model="metrics" :metric-items="metricItems" @change="changeMetric"></MetricsCards>
+  <div style="height: 350px;" ref="chartRef"></div>
+</template>
+
+<script lang="ts" setup>
+import { ref,onBeforeMount,onMounted,onBeforeUnmount,inject, Ref } from 'vue'
+import MetricsCards from '/@/components/MetricsCards/index.vue'
+import { useShopInfo } from '/@/stores/shopInfo'
+import * as echarts from 'echarts'
+import XEUtils from 'xe-utils'
+import { getLineData, getCardData } from '../api'
+import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
+import { buildChartOpt } from '/@/views/adManage/utils/tools.js'
+
+defineOptions({name: 'AdGroupChart'})
+
+const shopInfo = useShopInfo()
+const metrics = ref([
+  {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
+  {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
+  {metric: 'Spend', color: '#ff9500', 'label': '花费'},
+])
+const metricItems: Ref<MetricData[]> = ref([])
+let chartObj: any
+const chartRef = ref()
+const dateRange: string[] = inject('dateRange', [])
+const option: any = {
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    show: false
+  },
+  grid: {
+    top: 50, right: 150, bottom: 30, left: 55,
+  },
+  xAxis: {
+    type: 'category'
+  },
+  yAxis: [
+    {
+      id: 0,
+      type: 'value',
+      name: '曝光量',
+      splitLine: {
+        show: true // 设置显示分割线
+      },
+      axisLine: {
+        show: true,
+				lineStyle: {
+					color: '#0085ff'
+				}
+      },
+      show: true
+    },
+    {
+      id: 1,
+      type: 'value',
+      name: '点击量',
+      position: 'right',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+				lineStyle: {
+					color: '#3fd4cf'
+				}
+      },
+      show: true
+    },
+    {
+      id: 2,
+      type: 'value',
+      position: 'right',
+      offset: 90,
+      name: '花费',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+				lineStyle: {
+					color: '#ff9500'
+				}
+      },
+      show: true
+    }
+  ],
+  series: [
+    {
+      id: 0,
+      name: '曝光量',
+      type: 'bar',
+      encode: {
+        x: 'date',
+        y: 'Impression'
+      },
+      barWidth: '20px',
+      yAxisIndex: 0,
+      itemStyle: {
+        color: '#0085ff',
+        borderRadius: [10, 10, 0, 0],
+      }
+    },
+    {
+      id: 1,
+      name: '点击量',
+      type: 'line',
+      encode: {
+        x: 'date',
+        y: 'Click'
+      },
+      symbolSize: 6,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 1,
+      itemStyle: { color: '#3fd4cf', borderColor: '#3fd4cf' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#3fd4cf53' },
+          { offset: 1, color: '#3fd4cf03' },
+        ]),
+      },
+      emphasis: {
+        focus:'series'
+      }
+    },
+    {
+      id: 2,
+      name: '花费',
+      type: 'line',
+      encode: {
+        x: 'date',
+        y: 'Spend'
+      },
+      symbolSize: 6,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 2,
+      itemStyle: { color: '#ff9500', borderColor: '#ff9500' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#ff950053' },
+          { offset: 1, color: '#ff950003' },
+        ]),
+      },
+      emphasis: {
+        focus:'series'
+      }
+    }
+  ]
+}
+onBeforeMount(async () => {
+	await getMetricItems()
+})
+onMounted(() => {
+	// initLine()
+  setTimeout(() => initLine(), 0)
+	addResize()
+})
+onBeforeUnmount(() => {
+	if(chartObj) {
+		chartObj.dispose()
+    chartObj = null
+	}
+  removeResize()
+})
+
+const getMetricItems = async () => {
+	const resp = await getCardData({start: dateRange[0], end: dateRange[1], profile: shopInfo.profile.profile_id})
+	const data = resp.data
+	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
+		const tmp: MetricData = { 
+			label: info.label, 
+			value: info.value,
+			metricVal: data[info.value],
+			gapVal: data[`gap${info.value}`],
+			preVal: data[`prev${info.value}`],
+			disabled: info.initShow ? true : false
+		}
+		metricItems.value.push(tmp)
+    option.legend.selected[info.label] = false
+	})
+}
+const getDataset = async () => {
+	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange[0], end: dateRange[1]})
+	return resp.data
+}
+const initLine = async () => {
+	chartObj = echarts.init(chartRef.value)
+
+	const items = await getDataset()
+	option.dataset.source = items
+  for(const info of metrics.value) {
+    option.legend.selected[info.label] = true
+  }
+	chartObj.setOption(option)
+}
+const changeMetric = () => {
+  const opt = buildChartOpt(option, metrics.value)
+  chartObj.setOption(opt)
+}
+
+const resizeChart = () => { chartObj.resize() }
+const addResize = () => { window.addEventListener('resize', resizeChart) }
+const removeResize = () => { window.removeEventListener('resize', resizeChart) }
+
+defineExpose({ resizeChart })
+</script>
+
+<style scoped>
+
+</style>

src/views/adManage/sp/adGroups/index.vue

@@ -5,7 +5,7 @@
         <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-bottom: 5px;"></DateRangePicker>
       </template>
       <template #header-middle>
-        <AdGroupChart/>
+        <AdGroupChart />
       </template>
       <template #cell_adGroupName="scope">
         <el-link type="primary" :underline="false" @click="jumpAds(scope.row)">{{ scope.row.adGroupName }}</el-link>
@@ -18,37 +18,20 @@
 import { Ref, ref, onMounted } from 'vue'
 import { useFs, FsPage } from '@fast-crud/fast-crud';
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import { createCrudOptions } from './crud';
+import { createCrudOptions } from './crud'
 import { useRoute, useRouter } from 'vue-router'
-import AdGroupChart from './chartComponents/adGroup.vue'
+import AdGroupChart from './chartComponents/adGroupChart.vue'
 import { usePublicData } from '/@/stores/publicData'
 
 const publicData = usePublicData()
 const router = useRouter()
-const props = defineProps({
-  campaignId: { type: String, required: true }
-})
+const props = defineProps({ campaignId: { type: String, required: true } })
 const dateRange: Ref<string[]> = ref(publicData.data.dateRange)
-const metrics = ref([{metric: 'ACOS', color: 'blue'}])
-const options = ref([
-  {label: 'ACOS', value: 'ACOS', metricVal: "18.00%", preVal: '20.15%', gapVal: '-2.00%', disabled:true},
-  {label: '点击量', value: 'clicks', metricVal: "19.00%", preVal: '20.15%', gapVal: '-1.00%', disabled:true},
-  {label: '曝光量', value: 'impression', metricVal: "20.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率1', value: 'rate1', metricVal: "1.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率2', value: 'rate2', metricVal: "2.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率3', value: 'rate3', metricVal: "3.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率4', value: 'rate4', metricVal: "4.00%", preVal: '15.00%', gapVal: '5.00%'},
-  {label: '转化率5', value: 'rate5', metricVal: "5.00%", preVal: '15.00%', gapVal: '5.00%'},
-  {label: '转化率6', value: 'rate6', metricVal: "6.00%", preVal: '15.00%', gapVal: '5.00%'},
-])
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { campaignId: props.campaignId } });
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { campaignId: props.campaignId } })
 
 onMounted(() => {
 	crudExpose.doRefresh();
 })
-const changeMetric = () => {
-	console.log(metrics.value)
-}
 const jumpAds = (row: any) => {
   router.push({
     name: 'AdGroupDetail',

src/views/adManage/sp/campaigns/campaignDetail/index.vue

@@ -17,11 +17,11 @@
       <el-tab-pane label="广告组">
         <AdGroups :campaignId="route.query.campaignId"></AdGroups>
       </el-tab-pane>
-      <el-tab-pane label="预算"></el-tab-pane>
-      <el-tab-pane label="自动化"></el-tab-pane>
-      <el-tab-pane label="广告位"></el-tab-pane>
-      <el-tab-pane label="否定投放"></el-tab-pane>
-      <el-tab-pane label="操作日志"></el-tab-pane>
+      <el-tab-pane label="预算" :lazy="true"></el-tab-pane>
+      <el-tab-pane label="自动化" :lazy="true"></el-tab-pane>
+      <el-tab-pane label="广告位" :lazy="true"></el-tab-pane>
+      <el-tab-pane label="否定投放" :lazy="true"></el-tab-pane>
+      <el-tab-pane label="操作日志" :lazy="true"></el-tab-pane>
     </el-tabs>
   </div>
 </template>

src/views/adManage/sp/campaigns/chartComponents/dataTendency.vue

@@ -1,16 +1,17 @@
 <template>
 	<MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
-  <div style="height: 500px;" ref="chartRef"></div>
+  <div style="height: 350px;" ref="chartRef"></div>
 </template>
 
 <script lang="ts" setup>
-import { ref,onMounted, onBeforeUnmount, Ref, onBeforeMount, watch, computed, inject } from 'vue'
+import { ref,onMounted, onBeforeUnmount, Ref, onBeforeMount, watch, computed } from 'vue'
 import * as echarts from 'echarts'
 import { useShopInfo } from '/@/stores/shopInfo'
 import { getLineData, getCardData } from '../api'
 import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
 import MetricsCards from '/@/components/MetricsCards/index.vue'
 import XEUtils from 'xe-utils'
+import { buildChartOpt } from '/@/views/adManage/utils/tools.js'
 
 defineOptions({
   name: "DataTendencyChart"
@@ -31,62 +32,167 @@ onBeforeUnmount(() => {
   removeResize()
 })
 
-let chartObj:any
-const chartRef = ref()
-const dateRange: string[] = inject('dateRange', [])
-const shopInfo = useShopInfo()
-// 初始显示指标，长度必须为3
-const metrics = ref([  
-  {metric: 'Impression', color: '#3fd4cf', 'label': '曝光量'},
-  {metric: 'Click', color: '#0085ff', 'label': '点击量'},
+const metrics = ref([
+  {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
+  {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
   {metric: 'Spend', color: '#ff9500', 'label': '花费'},
 ])
+const shopInfo = useShopInfo()
 const metricsItems: Ref<MetricData[]> = ref([])
-
-const getDataset = async () => {
-	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange[0], end: dateRange[1]})
-	return resp.data
-}
-const initLine = async () => {
-	chartObj = echarts.init(chartRef.value)
-	
-  const option: any = {
-    dataset: {
-      source: []
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        // type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
+let chartObj:any
+const chartRef = ref()
+const option: any = {
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
       }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    show: false
+  },
+  grid: {
+    top: 50, right: 150, bottom: 30, left: 55,
+  },
+  xAxis: {
+    type: 'category'
+  },
+  yAxis: [
+    {
+      id: 0,
+      type: 'value',
+      name: '曝光量',
+      splitLine: {
+        show: true // 设置显示分割线
+      },
+      axisLine: {
+        show: true,
+				lineStyle: {
+					color: '#0085ff'
+				}
+      },
+      show: true
     },
-    legend: {
-      selected: {},  // 控制显隐
-      show: false
+    {
+      id: 1,
+      type: 'value',
+      name: '点击量',
+      position: 'right',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+				lineStyle: {
+					color: '#3fd4cf'
+				}
+      },
+      show: true
     },
-    grid: {
-      top: 50, right: 150, bottom: 30, left: 55,
+    {
+      id: 2,
+      type: 'value',
+      position: 'right',
+      offset: 90,
+      name: '花费',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+				lineStyle: {
+					color: '#ff9500'
+				}
+      },
+      show: true
+    }
+  ],
+  series: [
+    {
+      id: 0,
+      name: '曝光量',
+      type: 'bar',
+      encode: {
+        x: 'date',
+        y: 'Impression'
+      },
+      barWidth: '20px',
+      yAxisIndex: 0,
+      itemStyle: {
+        color: '#0085ff',
+        borderRadius: [10, 10, 0, 0],
+      }
     },
-    xAxis: {
-      type: 'time'
+    {
+      id: 1,
+      name: '点击量',
+      type: 'line',
+      encode: {
+        x: 'date',
+        y: 'Click'
+      },
+      symbolSize: 6,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 1,
+      itemStyle: { color: '#3fd4cf', borderColor: '#3fd4cf' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#3fd4cf53' },
+          { offset: 1, color: '#3fd4cf03' },
+        ]),
+      },
+      emphasis: {
+        focus:'series'
+      }
     },
-    yAxis: [],
-    series: []
-  }
+    {
+      id: 2,
+      name: '花费',
+      type: 'line',
+      encode: {
+        x: 'date',
+        y: 'Spend'
+      },
+      symbolSize: 6,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 2,
+      itemStyle: { color: '#ff9500', borderColor: '#ff9500' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#ff950053' },
+          { offset: 1, color: '#ff950003' },
+        ]),
+      },
+      emphasis: {
+        focus:'series'
+      }
+    }
+  ]
+}
+const getDataset = async () => {
+	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: '2023-11-01', end: '2023-11-04'})
+	return resp.data
+}
+const initLine = async () => {
+	chartObj = echarts.init(chartRef.value)
 	const items = await getDataset()
 	option.dataset.source = items
-
-  const opt = buildOption()
-  option.series = opt.series
-  option.yAxis = opt.yAxis
-	
+  for(const info of metrics.value) {
+    option.legend.selected[info.label] = true
+  }
 	chartObj.setOption(option)
 }
+
 const getMetricsItems = async () => {
-	const resp = await getCardData({start: dateRange[0], end: dateRange[1], profile: shopInfo.profile.profile_id})
+	const resp = await getCardData({start: '2023-11-01', end: '2023-11-04', profile: shopInfo.profile.profile_id})
 	const data = resp.data
 	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
 		const tmp:MetricData = { 
@@ -98,58 +204,20 @@ const getMetricsItems = async () => {
 			disabled: info.initShow ? true : false
 		}
 		metricsItems.value.push(tmp)
+    option.legend.selected[info.label] = false
 	})
 }
-const buildOption = () => {
-  const opt:any = {
-    yAxis: [],
-    series: []
-  }
-  XEUtils.arrayEach(metrics.value, (info, index) => {
-    const tmp:any = {
-      type: 'value',
-      name: info.label,
-      position: 'left',
-      splitLine: {
-        show: false // 设置显示分割线
-      },
-      axisLine: {
-        show: true,
-				lineStyle: {
-					color: info.color
-				}
-      },
-      show: true
-    }
-    if (index > 0) {
-      tmp["position"] = "right"
-      if (index === 2) { tmp["offset"] = 80 }
-    }
-    opt.yAxis.push(tmp)
-    opt.series.push({
-      name: info.label,
-      type: 'line',
-      encode: {
-        x: 'date',
-        y: info.metric
-      },
-      symbolSize: 6,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: index,
-      itemStyle: { color: info.color, borderColor: info.color },
-    })
-  })
-  return opt
-}
+
 const changeMetric = () => {
-  const opt = buildOption()
-  chartObj.setOption(opt, { replaceMerge: ['yAxis', 'series'] })
+  const opt = buildChartOpt(option, metrics.value)
+  chartObj.setOption(opt)
 }
+
 const resizeChart = () => { chartObj.resize() }
 const addResize = () => { window.addEventListener('resize', resizeChart) }
 const removeResize = () => { window.removeEventListener('resize', resizeChart) }
 
+
 defineExpose({resizeChart})
 
 </script>

src/views/adManage/sp/campaigns/index.vue

@@ -39,8 +39,7 @@ import { createCrudOptions } from './crud';
 import { useShopInfo } from '/@/stores/shopInfo'
 import { useRoute, useRouter } from 'vue-router'
 import AdStructChart from './chartComponents/adStruct.vue'
-import DataTendencyChart from './chartComponents/dataTendency2.vue'
-
+import DataTendencyChart from './chartComponents/dataTendency.vue'
 
 const tabActiveName = ref("dataTendency")
 const shopInfo = useShopInfo()

src/views/adManage/sp/keywords/api.ts

@@ -40,3 +40,19 @@ export function DelObj(id: DelReq) {
         data: { id },
     });
 }
+
+export function getCardData(query: UserPageQuery) {
+    return request({
+        url: apiPrefix + "total/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getLineData(query: UserPageQuery) {
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}

src/views/adManage/sp/campaigns/chartComponents/dataTendency2.vue → src/views/adManage/sp/keywords/chartComponents/dataTendency.vue

@@ -1,6 +1,6 @@
 <template>
 	<MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
-  <div style="height: 500px;" ref="chartRef"></div>
+  <div style="height: 350px;" ref="chartRef"></div>
 </template>
 
 <script lang="ts" setup>
@@ -11,6 +11,7 @@ import { getLineData, getCardData } from '../api'
 import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
 import MetricsCards from '/@/components/MetricsCards/index.vue'
 import XEUtils from 'xe-utils'
+import { buildChartOpt } from '/@/views/adManage/utils/tools.js'
 
 defineOptions({
   name: "DataTendencyChart"
@@ -38,7 +39,6 @@ const metrics = ref([
 ])
 const shopInfo = useShopInfo()
 const metricsItems: Ref<MetricData[]> = ref([])
-const metricLabelMap: any = {}
 let chartObj:any
 const chartRef = ref()
 const option: any = {
@@ -183,24 +183,18 @@ const getDataset = async () => {
 }
 const initLine = async () => {
 	chartObj = echarts.init(chartRef.value)
-	
 	const items = await getDataset()
 	option.dataset.source = items
-	
   for(const info of metrics.value) {
     option.legend.selected[info.label] = true
   }
-
-	console.log(option)
 	chartObj.setOption(option)
 }
 
-
 const getMetricsItems = async () => {
 	const resp = await getCardData({start: '2023-11-01', end: '2023-11-04', profile: shopInfo.profile.profile_id})
 	const data = resp.data
 	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
-		metricLabelMap[info.value] = info.label
 		const tmp:MetricData = { 
 			label: info.label, 
 			value: info.value,
@@ -215,34 +209,7 @@ const getMetricsItems = async () => {
 }
 
 const changeMetric = () => {
-  const tmp: any = {}
-  const opt:any = {
-    legend: {selected: {}},
-    yAxis: [],
-    series: []
-  }
-  for (const info of metrics.value) { tmp[info.color] = info }
-  for (const info of option.series) {
-    const color = info.itemStyle.color
-    const metricInfo = tmp[color]
-    if (metricInfo) {
-      opt.series.push({
-        id: info.id,
-        name: metricInfo.label, 
-        encode: {y: metricInfo.metric},
-      })
-      opt.yAxis.push({id: info.id, name: metricInfo.label, show: true})
-    } else {
-      opt.yAxis.push({id: info.id, show: false})
-    }
-  }
-  for (const label of Object.keys(option.legend.selected)) {
-    if (XEUtils.findIndexOf(metrics.value, info => info.label === label) === -1) {
-      opt.legend.selected[label] = false
-    } else {
-      opt.legend.selected[label] = true
-    }
-  }
+  const opt = buildChartOpt(option, metrics.value)
   chartObj.setOption(opt)
 }
 

src/views/adManage/sp/keywords/index.vue

@@ -7,7 +7,7 @@
 						<DataTendencyChart ref="dataTendencyRef"/>
 					</el-tab-pane>
 					<el-tab-pane label="广告结构" name="adStruct" :lazy="true">
-						<AdStructChart ref="adStructChartRef" />
+						<!-- <AdStructChart ref="adStructChartRef" /> -->
 					</el-tab-pane>
 					<el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
 				</el-tabs>
@@ -21,25 +21,12 @@ import { ref, onMounted, onBeforeUnmount, watch,nextTick, onActivated } from 'vu
 import { useFs, FsPage } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import { useRoute, useRouter } from 'vue-router'
-import MetricsCards from '/@/components/MetricsCards/index.vue'
-import AdStructChart from '/@/views/adManage/sp/campaigns/chartComponents/adStruct.vue'
-import DataTendencyChart from '/@/views/adManage/sp/campaigns/chartComponents/dataTendency.vue'
+import DataTendencyChart from './chartComponents/dataTendency.vue'
+// import AdStructChart from './chartComponents/adStruct.vue'
 
 const tabActiveName = ref("dataTendency")
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
 
-const metrics = ref([{metric: 'ACOS', color: 'blue'}])
-const options = ref([
-  {label: 'ACOS', value: 'ACOS', metricVal: "18.00%", preVal: '20.15%', gapVal: '-2.00%', disabled:true},
-  {label: '点击量', value: 'clicks', metricVal: "19.00%", preVal: '20.15%', gapVal: '-1.00%', disabled:true},
-  {label: '曝光量', value: 'impression', metricVal: "20.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率1', value: 'rate1', metricVal: "1.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率2', value: 'rate2', metricVal: "2.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率3', value: 'rate3', metricVal: "3.00%", preVal: '15.00%', gapVal: '5.00%', disabled:true},
-  {label: '转化率4', value: 'rate4', metricVal: "4.00%", preVal: '15.00%', gapVal: '5.00%'},
-  {label: '转化率5', value: 'rate5', metricVal: "5.00%", preVal: '15.00%', gapVal: '5.00%'},
-  {label: '转化率6', value: 'rate6', metricVal: "6.00%", preVal: '15.00%', gapVal: '5.00%'},
-])
 const route = useRoute()
 const router = useRouter()
 const adStructChartRef = ref()
@@ -63,9 +50,7 @@ const changeTab = () => {
 		resizeTabChart()
 	})
 }
-const changeMetric = () => {
-	console.log(metrics.value)
-}
+
 // const jumpGroup = (row: any) => {
 // 	router.push({
 // 		name: 'CampaignDetail',

src/views/adManage/utils/tools.ts

@@ -1,8 +1,41 @@
 import dayjs, { Dayjs } from 'dayjs'
+import XEUtils from 'xe-utils'
 
 export function recentDaysRange(timezone: string, days: number):string[] {
     const now_tz = dayjs(new Date()).tz(timezone)
     const start = now_tz.subtract(days, 'day')
     const end = now_tz.subtract(1, 'day')
     return [start.format("YYYY-MM-DD"), end.format("YYYY-MM-DD")]
-}
+}
+
+export function buildChartOpt(option:any, metrics: any[]) {
+    const tmp: any = {}
+    const opt:any = {
+        legend: {selected: {}},
+        yAxis: [],
+        series: []
+    }
+    for (const info of metrics) { tmp[info.color] = info }
+    for (const info of option.series) {
+        const color = info.itemStyle.color
+        const metricInfo = tmp[color]
+        if (metricInfo) {
+        opt.series.push({
+            id: info.id,
+            name: metricInfo.label, 
+            encode: {y: metricInfo.metric},
+        })
+        opt.yAxis.push({id: info.id, name: metricInfo.label, show: true})
+        } else {
+        opt.yAxis.push({id: info.id, show: false})
+        }
+    }
+    for (const label of Object.keys(option.legend.selected)) {
+        if (XEUtils.findIndexOf(metrics, info => info.label === label) === -1) {
+        opt.legend.selected[label] = false
+        } else {
+        opt.legend.selected[label] = true
+        }
+    }
+    return opt
+}