新增广告总览:总览页面

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

@@ -2,819 +2,60 @@
   <div class="asj-container">
     <div class="public-search">
       <DateRangePicker v-model="dateRange"></DateRangePicker>
+      <el-select
+          v-model="selectedPortfolios"
+          placeholder="广告组合"
+          clearable
+          multiple
+          style="width: 400px"
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="3"
+      >
+        <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
+      </el-select>
     </div>
-    <div class="container-main">
-      <!-- 卡片内容 不要删除这个类 -->
-      <div class="home-container" style="margin-top: 2px">
-        <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 }"
-          >
-            <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">
-                    {{ v.compareNum }}
-                  </div>
-                  <el-icon :style="{ color: v.num2.includes('-') ? '#59b939' : '#e36f53' }" style="display: inline-block; padding-top: 2px">
-                    <template v-if="v.num2.includes('-')" style="line-height: 25px;">
-                      <Top/>
-                    </template>
-                    <template v-else>
-                      <Bottom/>
-                    </template>
-                  </el-icon>
-                  <span class="ml5 font16" :style="{ color: 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>
-                </div>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
+
+    <div class="asj-tabs">
+      <div v-for="tab of tabs" :key="tab.name" :class="['asj-tab', { active: tabActiveName === tab.name }]" @click="tabActiveName = tab.name">
+        {{ tab.label }}
       </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>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card v-loading="loading">
-            <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>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card v-loading="loading">
-            <div style="height: 350px;" ref="chartRefImpandCli"></div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
-    <!--<el-button @click="changeCardData">按钮</el-button>-->
+    <component :is="tabsComponents[tabActiveName]"></component>
   </div>
-
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, onMounted, provide, reactive, ref, watch} from 'vue'
-import * as echarts from 'echarts'
-import {useShopInfo} from '/@/stores/shopInfo'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
+import { ref, onBeforeMount, Ref, watch, provide } from 'vue'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import {createCrudOptions} from '/@/views/adManage/sp/targets/crud'
-import {useFs} from '@fast-crud/fast-crud'
-import {getTotalData} from '/@/views/adManage/ad-overview/api'
+import Total from'./total/index.vue'
 
+// const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const shopInfo = useShopInfo()
-const { profile } = storeToRefs(shopInfo)
-const tabActiveName = ref('Campaigns')
-const queryParams = ref({
-  profileId: profile.value.profile_id,
-  dateRange
-})
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
-
-
-// 发送请求获取数据
-let totalData = ref()
-async function setTotalData() {
-  try {
-    const data = await getTotalData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: queryParams.value.profileId })
-    totalData.value = data
-    console.log('totalData', data)
-  } catch (error) {
-    console.log('获取数据失败', error)
-  }
-}
-
-onMounted(async () => {
-  // crudExpose.doRefresh()
-  await setTotalData()
-})
-
-watch(queryParams, async() => {
-  try {
-    loading.value = true
-    await setChartOptions()
-    console.log('queryParams.value', queryParams.value)
-  } catch (error) {
-    console.log(error)
-  }
-
-}, {deep: true})
-
-
-// 卡片相关功能
-const state = reactive({
-  homeOne: [
-    {
-      num1: '125,12',
-      compareNum: '140,23',
-      num2: '-12.32',
-      cardTitle: '订单统计信息',
-      num4: 'fa fa-meetup',
-      // color1: '#FF6462',
-      color2: '--next-color-primary-lighter',
-      color3: '--el-color-primary',
-    },
-    {
-      num1: '653,33',
-      compareNum: '1000,23',
-      num2: '-42.32',
-      cardTitle: '月度计划信息',
-      num4: 'iconfont icon-ditu',
-      color2: '--next-color-success-lighter',
-      color3: '--el-color-success',
-    },
-    {
-      num1: '125,65',
-      compareNum: '140,23',
-      num2: '17.32',
-      cardTitle: '年度计划信息',
-      num4: 'iconfont icon-zaosheng',
-      color2: '--next-color-warning-lighter',
-      color3: '--el-color-warning',
-    },
-    {
-      num1: '520,43',
-      compareNum: '590,23',
-      num2: '10.23',
-      cardTitle: '访问统计信息',
-      num4: 'fa fa-github-alt',
-      color2: '--next-color-danger-lighter',
-      color3: '--el-color-danger',
-    },
-  ],
-
-  myCharts: [],
-  charts: {
-    theme: '',
-    bgColor: '',
-    color: '#303133',
-  },
-})
-
-let cardData = reactive({
-  cardTitle: '花费',
-  cardMiddle: 123,
-  cardBottom: 1123,
-  cardBottomRight: 12
-})
-
-// 接收一个newData对象，更新cardData
-function updateCardData(newData) {
-  for (const key in newData) {
-    if (cardData.hasOwnProperty(key)) {
-      cardData[key] = newData[key]
-    }
-  }
-}
-
-function changeCardData() {
-  updateCardData({
-    cardTitle: '新销量',
-    cardMiddle: 50,
-    cardBottom: 60,
-    cardBottomRight: 70
-  })
-}
-
-
-// 折线图相关功能
-const loading = ref(true)
-
-const chartRefOne = ref()
-let chartObjOne
-const option = {
-  title: {text: '花费 & 销售额'},
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    selected: {},  // 控制显隐
-    data: ['花费', '销售额'],
-    show: true
-  },
-  grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
-  },
-  xAxis: {
-    type: 'category',
-    // boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: [
-    {
-      type: 'value',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#3a83f7' // 第一个 Y 轴的颜色
-        }
-      }
-    },
-    {
-      type: 'value',
-      splitLine: {
-        show: false
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#f19a37' // 第二个 Y 轴的颜色
-        }
-      }
-    }
-  ],
-  series: [
-    {
-      name: '花费',
-      yAxisIndex: 0,
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: '#3a83f7',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-    {
-      name: '销售额',
-      yAxisIndex: 1,
-      data: [220, 182, 191, 234, 290, 330, 310],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        type: 'dashed'
-      },
-      itemStyle: {
-        color: '#f19a37',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-  ]
-}
-
-const chartRefAcos = ref()
-let chartObjAcos
-const option2 = {
-  title: {text: 'Acos'},
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    selected: {},  // 控制显隐
-    data: ['Acos'],
-    show: true
-  },
-  grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
-  },
-  xAxis: {
-    type: 'category',
-    // boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: [
-    {
-      type: 'value',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#3a83f7'
-        }
-      }
-    }
-  ],
-  series: [
-    {
-      name: 'Acos',
-      yAxisIndex: 0,
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        type: 'dashed'
-      },
-      legendHoverLink: false,
-      itemStyle: {
-        color: '#3a83f7',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-  ]
-}
-
-const chartRefCPCandCTR = ref()
-let chartObjCPCandCTR
-const option3 = {
-  title: {text: '点击成本 & 点击率'},
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    selected: {},  // 控制显隐
-    data: ['点击成本', '点击率'],
-    show: true
-  },
-  grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
-  },
-  xAxis: {
-    type: 'category',
-    // boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: [
-    {
-      type: 'value',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#3a83f7' // 第一个 Y 轴的颜色
-        }
-      }
-    },
-    {
-      type: 'value',
-      splitLine: {
-        show: false
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#f19a37' // 第二个 Y 轴的颜色
-        }
-      }
-    }
-  ],
-  series: [
-    {
-      name: '点击成本',
-      yAxisIndex: 0,
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: '#3a83f7',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-    {
-      name: '点击率',
-      yAxisIndex: 1,
-      data: [220, 182, 191, 234, 290, 330, 310],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: '#f19a37',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-  ]
+const selectedPortfolios: Ref<string[]> = ref([])
+const portfolios: Ref<Portfolio[]> = ref([])
+const { dateRange } = storeToRefs(publicData)
+const tabActiveName = ref('Total')
+const tabs = [
+  { label: '总览', name: 'Total' },
+  { label: '按小时', name: 'Keywords' },
+  { label: '按月', name: 'Targets' },
+]
+const tabsComponents: any = {
+  Total,
 }
 
-const chartRefTotalPurchases = ref()
-let chartObjTotalPurchases
-const option4 = {
-  title: {text: '订单数'},
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    selected: {},  // 控制显隐
-    data: ['订单数'],
-    show: true
-  },
-  grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
-  },
-  xAxis: {
-    type: 'category',
-    // boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: [
-    {
-      type: 'value',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#3a83f7'
-        }
-      }
-    }
-  ],
-  series: [
-    {
-      name: '订单数',
-      yAxisIndex: 0,
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        type: 'dashed'
-      },
-      legendHoverLink: false,
-      itemStyle: {
-        color: '#3a83f7',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-  ]
-}
-
-const chartRefImpandCli = ref()
-let chartObjImpandCli
-const option5 = {
-  title: {text: '曝光量 & 点击量'},
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    selected: {},  // 控制显隐
-    data: ['曝光量', '点击量'],
-    show: true
-  },
-  grid: {
-    top: 50, right: 65, bottom: 30, left: 65,
-  },
-  xAxis: {
-    type: 'category',
-    // boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: [
-    {
-      type: 'value',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#3a83f7' // 第一个 Y 轴的颜色
-        }
-      }
-    },
-    {
-      type: 'value',
-      splitLine: {
-        show: false
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#f19a37' // 第二个 Y 轴的颜色
-        }
-      }
-    }
-  ],
-  series: [
-    {
-      name: '曝光量',
-      yAxisIndex: 0,
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: '#3a83f7',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-    {
-      name: '点击量',
-      yAxisIndex: 1,
-      data: [220, 182, 191, 234, 290, 330, 310],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: '#f19a37',
-      },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          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
-        }
-      }
-    },
-  ]
-}
-
-function initLine() {
-  chartObjOne = echarts.init(chartRefOne.value)
-  chartObjAcos = echarts.init(chartRefAcos.value)
-  chartObjCPCandCTR = echarts.init(chartRefCPCandCTR.value)
-  chartObjTotalPurchases = echarts.init(chartRefTotalPurchases.value)
-  chartObjImpandCli = echarts.init(chartRefImpandCli.value)
-}
-
-function setChartOptions() {
-  chartObjOne.setOption(option)
-  chartObjAcos.setOption(option2)
-  chartObjCPCandCTR.setOption(option3)
-  chartObjTotalPurchases.setOption(option4)
-  chartObjImpandCli.setOption(option5)
-  loading.value = false
-}
-
-function resizeChart() {
-  chartObjOne.resize()
-  chartObjAcos.resize()
-  chartObjCPCandCTR.resize()
-  chartObjTotalPurchases.resize()
-  chartObjImpandCli.resize()
-}
-
-onMounted(async () => {
-  await initLine()
-  await setChartOptions()
-  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-  setTimeout(() => {
-    resizeChart()
-  }, 0)
-})
+provide('dateRange', dateRange)
 
 onBeforeMount(async () => {
-
+  const resp: APIResponseData = await GetAllPortfolios()
+  portfolios.value = resp.data
 })
 
 </script>
 
-<style scoped lang="scss">
-$homeNavLengh: 8;
-.home-container {
-  overflow: hidden;
-  margin-top: 10px;
-
-  .home-card-one,
-  .home-card-two,
-  .home-card-three {
-    .home-card-item {
-      width: 100%;
-      height: 130px;
-      border-radius: 4px;
-      transition: all ease 0.3s;
-      padding: 20px;
-      overflow: hidden;
-      background: #ffffff;
-      box-shadow: var(--el-box-shadow-light);
-      color: var(--el-text-color-primary);
-      border: 1px solid var(--next-border-color-light);
-
-      &:hover {
-        box-shadow: 0 2px 12px var(--next-color-dark-hover);
-        transition: all ease 0.3s;
-      }
-
-      &-icon {
-        width: 70px;
-        height: 70px;
-        border-radius: 100%;
-        flex-shrink: 1;
-
-        i {
-          color: var(--el-text-color-placeholder);
-        }
-      }
-
-      &-title {
-        font-size: 15px;
-        font-weight: bold;
-        height: 30px;
-      }
-    }
-  }
-
-  .home-card-one {
-    @for $i from 0 through 3 {
-      .home-one-animation#{$i} {
-        opacity: 0;
-        animation-name: error-num;
-        animation-duration: 0.5s;
-        animation-fill-mode: forwards;
-        animation-delay: calc($i/10) + s;
-      }
-    }
-  }
-
-  .home-card-two,
-  .home-card-three {
-    .home-card-item {
-      height: 400px;
-      width: 100%;
-      overflow: hidden;
-
-      .home-monitor {
-        height: 100%;
-
-        .flex-warp-item {
-          width: 25%;
-          height: 111px;
-          display: flex;
-
-          .flex-warp-item-box {
-            margin: auto;
-            text-align: center;
-            color: var(--el-text-color-primary);
-            display: flex;
-            border-radius: 5px;
-            background: var(--next-bg-color);
-            cursor: pointer;
-            transition: all 0.3s ease;
-
-            &:hover {
-              background: var(--el-color-primary-light-9);
-              transition: all 0.3s ease;
-            }
-          }
-
-          @for $i from 0 through $homeNavLengh {
-            .home-animation#{$i} {
-              opacity: 0;
-              animation-name: error-num;
-              animation-duration: 0.5s;
-              animation-fill-mode: forwards;
-              animation-delay: calc($i/10) + s;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.down {
-  margin-top: 10px;
-}
-</style>
+<style scoped></style>

src/views/adManage/ad-overview/api.ts → src/views/adManage/ad-overview/total/api.ts

@@ -1,4 +1,4 @@
-import { request } from '/@/utils/service';
+import { request } from '/src/utils/service';
 import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 import XEUtils from 'xe-utils';
 
@@ -57,10 +57,18 @@ export function getLineData(query: UserPageQuery) {
   })
 }
 
-export function getTotalData(query) {
+export function getCardTotalData(query) {
   return request({
     url: apiPrefix + "total",
     method: 'GET',
     params: query
   })
 }
+
+export function getChartTotalData(query) {
+  return request({
+    url: apiPrefix + "trend/daily",
+    method: 'GET',
+    params: query
+  })
+}

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

@@ -0,0 +1,863 @@
+<template>
+  <div class="asj-container">
+    <div class="container-main">
+      <!-- 卡片内容 不要删除这个类 -->
+      <div class="home-container" style="margin-top: 8px" 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 }"
+          >
+            <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;">
+                    {{ v.compareNum }}
+                  </div>
+                  <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 是负数时显示向下箭头 -->
+                    </template>
+                    <template v-else>
+                      <Top/> <!-- num2 不是负数时显示向上箭头 -->
+                    </template>
+                  </el-icon>
+                  <span class="ml5 font16" :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>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </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>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card v-loading="loading">
+            <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>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card v-loading="loading">
+            <div style="height: 350px;" ref="chartRefImpandCli"></div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <!--<el-button @click="changeCardData">按钮</el-button>-->
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, 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 '/src/views/adManage/ad-overview/total/api'
+
+const loading = ref(true)
+const cardLoading = ref(true)
+const publicData = usePublicData()
+const {dateRange} = storeToRefs(publicData)
+const shopInfo = useShopInfo()
+const { profile } = storeToRefs(shopInfo)
+const tabActiveName = ref('Campaigns')
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange
+})
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+
+// 发送请求获取数据
+async function setTotalData() {
+  try {
+    cardLoading.value = true
+    const resp = await getCardTotalData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: queryParams.value.profileId })
+    console.log('resp.data', resp.data)
+    state.homeOne[0].num1 = resp.data.Spend
+    state.homeOne[0].compareNum = resp.data.prevSpend
+    state.homeOne[0].num2 = resp.data.gapSpend
+    state.homeOne[1].num1 = resp.data.TotalSales
+    state.homeOne[1].compareNum = resp.data.prevTotalSales
+    state.homeOne[1].num2 = resp.data.gapTotalSales
+    state.homeOne[2].num1 = resp.data.TotalPurchases
+    state.homeOne[2].compareNum = resp.data.prevTotalPurchases
+    state.homeOne[2].num2 = resp.data.gapTotalPurchases
+    state.homeOne[3].num1 = resp.data.ACOS
+    state.homeOne[3].compareNum = resp.data.prevACOS
+    state.homeOne[3].num2 = resp.data.gapACOS
+  } catch (error) {
+    console.log('获取数据失败:', error)
+  } finally {
+    cardLoading.value = false
+  }
+}
+
+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 })
+    optionSource = resp.data
+    await setChartOptions()
+    return resp.data
+  } catch (error) {
+    console.log('获取数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+
+onMounted(async () => {
+  // crudExpose.doRefresh()
+  await setTotalData()
+  await setChartTotalData()
+})
+
+watch(queryParams, async() => {
+  try {
+    loading.value = true
+    console.log('queryParams.value', queryParams.value)
+    await setTotalData()
+    await setChartTotalData()
+    loading.value = false
+  } catch (error) {
+    console.log(error)
+  }
+
+}, {deep: true})
+
+
+// 卡片相关功能
+const state = reactive({
+  homeOne: [
+    {
+      num1: '',
+      compareNum: '',
+      num2: '',
+      cardTitle: '花费',
+      num4: 'fa fa-meetup',
+      // color1: '#FF6462',
+      color2: '--next-color-primary-lighter',
+      color3: '--el-color-primary',
+    },
+    {
+      num1: '',
+      compareNum: '',
+      num2: '',
+      cardTitle: '销售额',
+      num4: 'iconfont icon-ditu',
+      color2: '--next-color-success-lighter',
+      color3: '--el-color-success',
+    },
+    {
+      num1: '',
+      compareNum: '',
+      num2: '',
+      cardTitle: '订单数',
+      num4: 'iconfont icon-zaosheng',
+      color2: '--next-color-warning-lighter',
+      color3: '--el-color-warning',
+    },
+    {
+      num1: '',
+      compareNum: '',
+      num2: '',
+      cardTitle: 'ACOS',
+      num4: 'fa fa-github-alt',
+      color2: '--next-color-danger-lighter',
+      color3: '--el-color-danger',
+    },
+  ],
+
+  myCharts: [],
+  charts: {
+    theme: '',
+    bgColor: '',
+    color: '#303133',
+  },
+})
+
+
+// 折线图相关功能
+const chartRefOne = ref()
+let chartObjOne
+const option = {
+  title: {text: '花费 & 销售额'},
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    data: ['花费', '销售额'],
+    show: true
+  },
+  grid: {
+    top: 50, right: 65, bottom: 30, left: 65,
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7' // 第一个 Y 轴的颜色
+        }
+      }
+    },
+    {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#f19a37' // 第二个 Y 轴的颜色
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: '花费',
+      yAxisIndex: 0,
+      encode: {
+        x: 'Name',
+        y: 'Spend',
+      },
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#3a83f7',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+    {
+      name: '销售额',
+      yAxisIndex: 1,
+      encode: {
+        x: 'Name',
+        y: 'TotalSales',
+      },
+      type: 'line',
+      smooth: true,
+      lineStyle: {
+        type: 'dashed'
+      },
+      itemStyle: {
+        color: '#f19a37',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+  ]
+}
+
+const chartRefAcos = ref()
+let chartObjAcos
+const option2 = {
+  title: {text: 'Acos'},
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    data: ['Acos'],
+    show: true
+  },
+  grid: {
+    top: 50, right: 65, bottom: 30, left: 65,
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7'
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: 'Acos',
+      yAxisIndex: 0,
+      encode: {
+        x: 'Name',
+        y: 'Acos',
+      },
+      type: 'line',
+      smooth: true,
+      lineStyle: {
+        type: 'dashed'
+      },
+      legendHoverLink: false,
+      itemStyle: {
+        color: '#3a83f7',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+  ]
+}
+
+const chartRefCPCandCTR = ref()
+let chartObjCPCandCTR
+const option3 = {
+  title: {text: '点击成本 & 点击率'},
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    data: ['点击成本', '点击率'],
+    show: true
+  },
+  grid: {
+    top: 50, right: 65, bottom: 30, left: 65,
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7' // 第一个 Y 轴的颜色
+        }
+      }
+    },
+    {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#f19a37' // 第二个 Y 轴的颜色
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: '点击成本',
+      yAxisIndex: 0,
+      encode: {
+        x: 'Name',
+        y: 'CPC',
+      },
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#3a83f7',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+    {
+      name: '点击率',
+      yAxisIndex: 1,
+      encode: {
+        x: 'Name',
+        y: 'CTR',
+      },
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#f19a37',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+  ]
+}
+
+const chartRefTotalPurchases = ref()
+let chartObjTotalPurchases
+const option4 = {
+  title: {text: '订单数'},
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    data: ['订单数'],
+    show: true
+  },
+  grid: {
+    top: 50, right: 65, bottom: 30, left: 65,
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7'
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: '订单数',
+      yAxisIndex: 0,
+      encode: {
+        x: 'Name',
+        y: 'TotalPurchases',
+      },
+      type: 'line',
+      smooth: true,
+      lineStyle: {
+        type: 'dashed'
+      },
+      legendHoverLink: false,
+      itemStyle: {
+        color: '#3a83f7',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+  ]
+}
+
+const chartRefImpandCli = ref()
+let chartObjImpandCli
+const option5 = {
+  title: {text: '曝光量 & 点击量'},
+  dataset: {
+    source: []
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    selected: {},  // 控制显隐
+    data: ['曝光量', '点击量'],
+    show: true
+  },
+  grid: {
+    top: 50, right: 65, bottom: 30, left: 65,
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7' // 第一个 Y 轴的颜色
+        }
+      }
+    },
+    {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#f19a37' // 第二个 Y 轴的颜色
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: '曝光量',
+      yAxisIndex: 0,
+      encode: {
+        x: 'Name',
+        y: 'Impression',
+      },
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#3a83f7',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+    {
+      name: '点击量',
+      yAxisIndex: 1,
+      encode: {
+        x: 'Name',
+        y: 'Click',
+      },
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#f19a37',
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          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
+        }
+      }
+    },
+  ]
+}
+
+function initLine() {
+  chartObjOne = echarts.init(chartRefOne.value)
+  chartObjAcos = echarts.init(chartRefAcos.value)
+  chartObjCPCandCTR = echarts.init(chartRefCPCandCTR.value)
+  chartObjTotalPurchases = echarts.init(chartRefTotalPurchases.value)
+  chartObjImpandCli = echarts.init(chartRefImpandCli.value)
+}
+
+function setChartOptions() {
+  const chartOptions = [
+    { chart: chartObjOne, option: option },
+    { chart: chartObjAcos, option: option2 },
+    { chart: chartObjCPCandCTR, option: option3 },
+    { chart: chartObjTotalPurchases, option: option4 },
+    { chart: chartObjImpandCli, option: option5 }
+  ];
+
+  chartOptions.forEach(chartOption => {
+    try {
+      chartOption.option.dataset.source = optionSource
+      chartOption.chart.setOption(chartOption.option)
+    } catch (error) {
+      console.error('设置图表选项失败:', error)
+    }
+  })
+}
+
+function resizeChart() {
+  chartObjOne.resize()
+  chartObjAcos.resize()
+  chartObjCPCandCTR.resize()
+  chartObjTotalPurchases.resize()
+  chartObjImpandCli.resize()
+}
+
+onMounted(async () => {
+  initLine()
+  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 10)
+})
+
+
+
+</script>
+
+<style scoped lang="scss">
+$homeNavLengh: 8;
+.home-container {
+  overflow: hidden;
+  margin-top: 10px;
+
+  .home-card-one,
+  .home-card-two,
+  .home-card-three {
+    .home-card-item {
+      width: 100%;
+      height: 130px;
+      border-radius: 4px;
+      transition: all ease 0.3s;
+      padding: 20px;
+      overflow: hidden;
+      background: #ffffff;
+      box-shadow: var(--el-box-shadow-light);
+      color: var(--el-text-color-primary);
+      border: 1px solid var(--next-border-color-light);
+
+      &:hover {
+        box-shadow: 0 2px 12px var(--next-color-dark-hover);
+        transition: all ease 0.3s;
+      }
+
+      &-icon {
+        width: 70px;
+        height: 70px;
+        border-radius: 100%;
+        flex-shrink: 1;
+
+        i {
+          color: var(--el-text-color-placeholder);
+        }
+      }
+
+      &-title {
+        font-size: 15px;
+        font-weight: bold;
+        height: 30px;
+      }
+    }
+  }
+
+  .home-card-one {
+    @for $i from 0 through 3 {
+      .home-one-animation#{$i} {
+        opacity: 0;
+        animation-name: error-num;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+        animation-delay: calc($i/10) + s;
+      }
+    }
+  }
+
+  .home-card-two,
+  .home-card-three {
+    .home-card-item {
+      height: 400px;
+      width: 100%;
+      overflow: hidden;
+
+      .home-monitor {
+        height: 100%;
+
+        .flex-warp-item {
+          width: 25%;
+          height: 111px;
+          display: flex;
+
+          .flex-warp-item-box {
+            margin: auto;
+            text-align: center;
+            color: var(--el-text-color-primary);
+            display: flex;
+            border-radius: 5px;
+            background: var(--next-bg-color);
+            cursor: pointer;
+            transition: all 0.3s ease;
+
+            &:hover {
+              background: var(--el-color-primary-light-9);
+              transition: all 0.3s ease;
+            }
+          }
+
+          @for $i from 0 through $homeNavLengh {
+            .home-animation#{$i} {
+              opacity: 0;
+              animation-name: error-num;
+              animation-duration: 0.5s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i/10) + s;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.down {
+  margin-top: 10px;
+}
+</style>

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

@@ -205,6 +205,7 @@ onBeforeUnmount(() => {
 const initLine = async () => {
 	chartObj = echarts.init(chartRef.value)
 	const items = await getDataset()
+  console.log(111,items)
 	option.dataset.source = items
 
   XEUtils.arrayEach(option.series, (info:any, index) => {