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

<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>