SP补全日周月曲线图

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

@@ -50,6 +50,25 @@ export function getCardData(query: UserPageQuery) {
 }
 
 export function getLineData(query: UserPageQuery) {
+    query["dateRangeType"] = "D"
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getLineWeekData(query: UserPageQuery) {
+    query["dateRangeType"] = "W"
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getLineMonthData(query: UserPageQuery) {
+    query["dateRangeType"] = "M"
     return request({
         url: apiPrefix + "daily/",
         method: 'GET',

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

@@ -8,6 +8,8 @@
                 v-if="tabActiveName === 'dataTendency'"
                 :query="queryParams"
                 :fetchCard="getCardData"
+                :fetch-line-month="getLineMonthData"
+							  :fetch-line-week="getLineWeekData"
                 :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
@@ -25,7 +27,7 @@ import {createCrudOptions} from './crud'
 import {useRoute, useRouter} from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
-import {getCardData, getLineData} from '/@/views/adManage/sp/campaigns/api'
+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '/@/views/adManage/sp/campaigns/api'
 import {usePublicData} from '/@/stores/publicData'
 import {storeToRefs} from 'pinia'
 

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

@@ -1,6 +1,5 @@
 import { request } from '/@/utils/service';
 import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
-import XEUtils from 'xe-utils';
 
 export const apiPrefix = '/api/ad_manage/spcampaigns/';
 export function GetList(query: UserPageQuery) {

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

@@ -50,6 +50,25 @@ export function getCardData(query: UserPageQuery) {
 }
 
 export function getLineData(query: UserPageQuery) {
+    query["dateRangeType"] = "D"
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getLineWeekData(query: UserPageQuery) {
+    query["dateRangeType"] = "W"
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getLineMonthData(query: UserPageQuery) {
+    query["dateRangeType"] = "M"
     return request({
         url: apiPrefix + "daily/",
         method: 'GET',

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

@@ -7,6 +7,8 @@
             <DataTendencyChart
                 v-if="tabActiveName === 'dataTendency'"
                 :query="queryParams"
+                :fetch-line-month="getLineMonthData"
+							  :fetch-line-week="getLineWeekData"
                 :fetchCard="getCardData"
                 :fetchLine="getLineData">
             </DataTendencyChart>
@@ -28,7 +30,7 @@ import {createCrudOptions} from './crud'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData} from './api'
+import {getCardData, getLineData,getLineMonthData, getLineWeekData} from './api'
 import {usePublicData} from '/@/stores/publicData'
 import {storeToRefs} from 'pinia'
 

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

@@ -40,23 +40,7 @@ export function DelObj(id: DelReq) {
     });
 }
 
-export function getCardData(query: UserPageQuery) {
-    return request({
-        url: "/api/ad_manage/spcampaigns/total/",
-        method: 'GET',
-        params: query
-    })
-}
-
-export function getLineData(query: UserPageQuery) {
-    return request({
-        url: "/api/ad_manage/spcampaigns/daily/",
-        method: 'GET',
-        params: query
-    })
-}
-
-export function getAdStructureData(query) {
+export function getAdStructureData(query: UserPageQuery) {
     return request({
         url: apiPrefix + "structure/",
         method: 'GET',

src/views/adManage/sp/placement/chartComponents/adStruct.vue

@@ -392,7 +392,6 @@ function resizeChart() {
   barChart.resize()
 }
 
-defineExpose({ resizeChart })
 </script>
 
 <style scoped>

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

@@ -1,261 +0,0 @@
-<template>
-    <div v-loading="loading">
-        <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
-        <div style="height: 350px;" ref="chartRef"></div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-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'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
-
-defineOptions({
-    name: 'DataTendencyChart'
-})
-
-onMounted(() => {
-    getMetricsItems()
-    addResize()
-    // initLine()
-    setTimeout(() => {
-        initLine()
-    }, 0)
-})
-onBeforeUnmount(() => {
-    if (chartObj) {
-        chartObj.dispose()
-        chartObj = null
-    }
-    removeResize()
-})
-
-const publicData = usePublicData()
-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([])
-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
-        },
-        {
-            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: [6, 6, 6, 6],
-            }
-        },
-        {
-            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'
-            }
-        }
-    ]
-}
-const {dateRange} = storeToRefs(publicData)
-const loading = ref(true)
-
-const getDataset = async () => {
-    const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange.value[0], end: dateRange.value[1]})
-    return resp.data
-}
-const initLine = async () => {
-    chartObj = echarts.init(chartRef.value)
-    const items = await getDataset()
-    option.dataset.source = items
-    XEUtils.arrayEach(metricsItems.value, info => {
-        option.legend.selected[info.label] = false
-    })
-    for (const info of metrics.value) {
-        option.legend.selected[info.label] = true
-    }
-    chartObj.setOption(option)
-    loading.value = false
-}
-
-const getMetricsItems = async () => {
-    const resp = await getCardData({start: dateRange.value[0], end: dateRange.value[1], profile: shopInfo.profile.profile_id})
-    const data = resp.data
-    metricsItems.value.length = 0
-    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}`],
-        }
-        metricsItems.value.push(tmp)
-    })
-}
-
-const changeMetric = () => {
-    const opt = buildChartOpt(option, metrics.value)
-    chartObj.setOption(opt)
-}
-
-watch(
-        dateRange,
-        async () => {
-            loading.value = true
-            await getMetricsItems()
-            const items = await getDataset()
-            const opt = {dataset: {source: items}}
-            chartObj.setOption(opt)
-            loading.value = false
-        }
-)
-
-const resizeChart = () => {
-    chartObj.resize()
-}
-const addResize = () => {
-    window.addEventListener('resize', resizeChart)
-}
-const removeResize = () => {
-    window.removeEventListener('resize', resizeChart)
-}
-
-
-</script>
-
-<style scoped>
-.metrics-cards {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 12px;
-    width: 100%;
-}
-</style>

src/views/adManage/sp/placement/crud.tsx

@@ -34,19 +34,11 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         fixedHeight: false
       },
       actionbar: {
-        show: true,
+        show: false,
         buttons: {
           add: {
             show: false
           },
-          create: {
-            text: '新建广告活动',
-            type: 'primary',
-            show: true,
-            click() {
-
-            }
-          }
         }
       },
       search: {

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

@@ -2,12 +2,14 @@
   <fs-page class="fs-page-custom">
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #header-middle>
-        <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
+        <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
           <el-tab-pane label="数据趋势" name="dataTendency">
             <DataTendencyChart
                 v-if="tabActiveName === 'dataTendency'"
                 :query="queryParams"
                 :fetchCard="getCardData"
+                :fetch-line-month="getLineMonthData"
+							  :fetch-line-week="getLineWeekData"
                 :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
@@ -41,7 +43,7 @@ import {useRoute, useRouter} from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData} from '/@/views/adManage/sp/campaigns/api'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../campaigns/api'
 import {usePublicData} from '/@/stores/publicData'
 import {storeToRefs} from 'pinia'
 
@@ -57,29 +59,12 @@ const queryParams = ref({
 })
 const {crudBinding, crudRef, crudExpose} =  useFs({createCrudOptions, context: queryParams})
 
-const route = useRoute()
 const router = useRouter()
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
-
 
 onMounted(() => {
   crudExpose.doRefresh()
 })
 
-const resizeTabChart = () => {
-  if (tabActiveName.value === 'dataTendency') {
-    dataTendencyRef.value.resizeChart()
-  } else if (tabActiveName.value === 'adStruct') {
-    adStructChartRef.value.resizeChart()
-  }
-}
-const changeTab = () => {
-  nextTick(() => {
-    resizeTabChart()
-  })
-}
-defineExpose({resizeTabChart})
 
 const jumpGroup = (row: any) => {
   router.push({

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

@@ -50,6 +50,7 @@ export function getCardData(query: UserPageQuery) {
 }
 
 export function getLineData(query: UserPageQuery) {
+    query["dateRangeType"] = "D"
     return request({
         url: apiPrefix + "daily/",
         method: 'GET',
@@ -57,7 +58,25 @@ export function getLineData(query: UserPageQuery) {
     })
 }
 
-export function getAdStructureData(query) {
+export function getLineWeekData(query: UserPageQuery) {
+    query["dateRangeType"] = "W"
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getLineMonthData(query: UserPageQuery) {
+    query["dateRangeType"] = "M"
+    return request({
+        url: apiPrefix + "daily/",
+        method: 'GET',
+        params: query
+    })
+}
+
+export function getAdStructureData(query: UserPageQuery) {
     return request({
         url: apiPrefix + "structure/",
         method: 'GET',

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

@@ -8,6 +8,8 @@
                 :query="queryParams"
                 v-if="tabActiveName === 'dataTendency'"
                 :fetchCard="getCardData"
+                :fetch-line-month="getLineMonthData"
+							  :fetch-line-week="getLineWeekData"
                 :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
@@ -30,7 +32,7 @@ import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency
 import {useShopInfo} from '/@/stores/shopInfo'
 import {usePublicData} from '/@/stores/publicData'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData} from '/@/views/adManage/sp/campaigns/api'
+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '/@/views/adManage/sp/campaigns/api'
 import {storeToRefs} from 'pinia'