|
@@ -1,14 +1,7 @@
|
|
|
<template>
|
|
|
<div class="overview-tabs">
|
|
|
<DateRangePicker v-model="dateRange"></DateRangePicker>
|
|
|
- <el-select
|
|
|
- v-model="selectedPortfolios"
|
|
|
- placeholder="SP"
|
|
|
- style="width: 200px"
|
|
|
- collapse-tags
|
|
|
- collapse-tags-tooltip
|
|
|
- :max-collapse-tags="3"
|
|
|
- >
|
|
|
+ <el-select v-model="selectedPortfolios" placeholder="SP" style="width: 200px" collapse-tags collapse-tags-tooltip :max-collapse-tags="3">
|
|
|
<el-option v-for="info of portfolios" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
@@ -17,12 +10,13 @@
|
|
|
<template #header-middle>
|
|
|
<el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
|
|
|
<DataTendencyChart
|
|
|
- v-if="tabActiveName === 'dataTendency'"
|
|
|
- :query="queryParams"
|
|
|
- :fetchCard="getCardData"
|
|
|
- :fetchLine="getLineData"
|
|
|
- :fetch-line-month="getLineMonthData"
|
|
|
- :fetch-line-week="getLineWeekData">
|
|
|
+ v-if="tabActiveName === 'dataTendency'"
|
|
|
+ :query="queryParams"
|
|
|
+ :fetchCard="getCardData"
|
|
|
+ :fetchLine="getLineData"
|
|
|
+ :fetch-line-month="getLineMonthData"
|
|
|
+ :fetch-line-week="getLineWeekData"
|
|
|
+ >
|
|
|
</DataTendencyChart>
|
|
|
</el-tabs>
|
|
|
</template>
|
|
@@ -39,28 +33,29 @@
|
|
|
<template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }} </template>
|
|
|
<template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
|
|
|
<DataCompare
|
|
|
- :field="field"
|
|
|
- :value="scope.row[field]"
|
|
|
- :prev-val="scope.row[`prev${field}`]"
|
|
|
- :gap-val="scope.row[`gap${field}`]"
|
|
|
- :date-range="dateRange"
|
|
|
- :show-compare="showCompare"/>
|
|
|
+ :field="field"
|
|
|
+ :value="scope.row[field]"
|
|
|
+ :prev-val="scope.row[`prev${field}`]"
|
|
|
+ :gap-val="scope.row[`gap${field}`]"
|
|
|
+ :date-range="dateRange"
|
|
|
+ :show-compare="showCompare"
|
|
|
+ />
|
|
|
</template>
|
|
|
</fs-crud>
|
|
|
</fs-page>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import {onMounted, Ref, ref, watch} from 'vue'
|
|
|
-import {FsPage, useFs} from '@fast-crud/fast-crud'
|
|
|
-import {createCrudOptions} from './crud'
|
|
|
-import {useShopInfo} from '/@/stores/shopInfo'
|
|
|
-import {usePublicData} from '/@/stores/publicData'
|
|
|
-import {storeToRefs} from 'pinia'
|
|
|
-import {useRouter} from 'vue-router'
|
|
|
+import { onMounted, Ref, ref, watch } from 'vue'
|
|
|
+import { FsPage, useFs } from '@fast-crud/fast-crud'
|
|
|
+import { createCrudOptions } from './crud'
|
|
|
+import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
+import { usePublicData } from '/@/stores/publicData'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
import DataTendencyChart from '/@/views/adManage/ad-overview/chartComponents/dataTendency.vue'
|
|
|
-import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
|
|
|
-import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
|
|
|
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
|
|
|
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
|
|
|
import DataCompare from '/@/components/dataCompare/index.vue'
|
|
|
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
|
|
|
|
|
@@ -68,25 +63,25 @@ const selectedPortfolios = ref('sp')
|
|
|
const portfolios = [
|
|
|
{
|
|
|
value: 'sp/sb/sd',
|
|
|
- label: 'SP/SB/SD'
|
|
|
+ label: 'SP/SB/SD',
|
|
|
},
|
|
|
{
|
|
|
value: 'sp',
|
|
|
- label: 'SP'
|
|
|
+ label: 'SP',
|
|
|
},
|
|
|
{
|
|
|
- value:'sb',
|
|
|
- label:'SB'
|
|
|
+ value: 'sb',
|
|
|
+ label: 'SB',
|
|
|
},
|
|
|
{
|
|
|
- value:'sd',
|
|
|
- label:'SD'
|
|
|
+ value: 'sd',
|
|
|
+ label: 'SD',
|
|
|
},
|
|
|
{
|
|
|
value: 'dsp',
|
|
|
label: 'DSP',
|
|
|
- disabled: true
|
|
|
- }
|
|
|
+ disabled: true,
|
|
|
+ },
|
|
|
]
|
|
|
const tabActiveName = ref('dataTendency')
|
|
|
const shopInfo = useShopInfo()
|
|
@@ -96,7 +91,7 @@ const { profile } = storeToRefs(shopInfo)
|
|
|
const queryParams = ref({
|
|
|
dateRange,
|
|
|
profileId: profile.value.profile_id,
|
|
|
- campaignType: selectedPortfolios.value
|
|
|
+ campaignType: selectedPortfolios.value,
|
|
|
})
|
|
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
|
|
|
const router = useRouter()
|
|
@@ -106,6 +101,7 @@ console.log(111, profile.value.profile_id)
|
|
|
onMounted(async () => {
|
|
|
crudExpose.doRefresh()
|
|
|
})
|
|
|
+
|
|
|
const jumpGroup = (row: any) => {
|
|
|
router.push({
|
|
|
name: 'CampaignDetail',
|
|
@@ -113,9 +109,13 @@ const jumpGroup = (row: any) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-watch(queryParams, async () => {
|
|
|
- crudExpose.doRefresh()
|
|
|
-}, { deep: true })
|
|
|
+watch(
|
|
|
+ queryParams,
|
|
|
+ async () => {
|
|
|
+ crudExpose.doRefresh()
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|