|
|
@@ -5,70 +5,101 @@
|
|
|
<DateRangePicker v-model="dateRange"></DateRangePicker>
|
|
|
</template>
|
|
|
|
|
|
+ <template #header-middle>
|
|
|
+ <DataTendencyChart
|
|
|
+ :query="queryParams"
|
|
|
+ :fetchCard="getCardData"
|
|
|
+ :fetchLine="getLineData">
|
|
|
+ </DataTendencyChart>
|
|
|
+ </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>
|
|
|
<template #toolbar-left>
|
|
|
<div class="campare-switch">
|
|
|
<span>数据对比 </span>
|
|
|
- <el-switch v-model="showCompare" size="small" />
|
|
|
+ <el-switch v-model="showCompare" size="small"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
- <template #cell_resolvedExpression="scope">
|
|
|
- <p v-for="[key, val] of Object.entries(scope.row.resolvedExpression)">
|
|
|
- {{ TargetExpressionEnum.find((item) => item.value === key)?.label }}：{{ val }}
|
|
|
- </p>
|
|
|
+ <template #cell_resolvedExpression_value="scope">
|
|
|
+ <el-tooltip effect="dark" :content="scope.row.resolvedExpression_value" placement="top">
|
|
|
+ <div>
|
|
|
+ <el-link :underline="false" style="color: rgb(30, 33, 40)">
|
|
|
+ {{ scope.row.resolvedExpression_value }}
|
|
|
+ </el-link>
|
|
|
+ <br>
|
|
|
+ <span style="color: rgb(109, 119, 132)">ASIN: </span> <span style="color: rgb(30, 33, 40)">{{ scope.row.ASIN }}</span>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
</template>
|
|
|
+
|
|
|
+
|
|
|
</fs-crud>
|
|
|
</fs-page>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, onMounted, computed, watch, onBeforeMount } from 'vue'
|
|
|
-import { useFs, FsPage } from '@fast-crud/fast-crud'
|
|
|
-import { createCrudOptions } from './crud'
|
|
|
-// import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
-import { usePublicData } from '/@/stores/publicData'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import { LocationQueryValue } from 'vue-router'
|
|
|
-import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
|
|
|
-import DataCompare from '/@/components/dataCompare/index.vue'
|
|
|
+import {onMounted, ref, watch} from 'vue'
|
|
|
+import {FsPage, useFs} from '@fast-crud/fast-crud'
|
|
|
+import {createCrudOptions} from './crud'
|
|
|
+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn'
|
|
|
+import {LocationQueryValue} from 'vue-router'
|
|
|
+import {usePublicData} from '/@/stores/publicData'
|
|
|
+import {storeToRefs} from 'pinia'
|
|
|
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
|
|
|
-import { TargetExpressionEnum } from '/@/views/adManage/utils/enum'
|
|
|
+import {getCardData, getLineData} from '/@/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/api'
|
|
|
+import DataCompare from '/@/components/dataCompare/index.vue'
|
|
|
+import DataTendencyChart from '/@/views/adManage/sb/chartComponents/dataTendency.vue'
|
|
|
+// import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
+
|
|
|
|
|
|
interface Props {
|
|
|
adGroupId: LocationQueryValue | LocationQueryValue[]
|
|
|
}
|
|
|
+
|
|
|
const props = defineProps<Props>()
|
|
|
// const shopInfo = useShopInfo()
|
|
|
const publicData = usePublicData()
|
|
|
-const { dateRange } = storeToRefs(publicData)
|
|
|
+const {dateRange} = storeToRefs(publicData)
|
|
|
// const { profile } = storeToRefs(shopInfo)
|
|
|
const queryParams = ref({
|
|
|
adGroupId: props.adGroupId,
|
|
|
dateRange,
|
|
|
})
|
|
|
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
|
|
|
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
|
|
|
const showCompare = ref(false)
|
|
|
|
|
|
onMounted(async () => {
|
|
|
crudExpose.doRefresh()
|
|
|
})
|
|
|
watch(
|
|
|
- queryParams,
|
|
|
- async () => {
|
|
|
- crudExpose.doRefresh()
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
+ queryParams,
|
|
|
+ async () => {
|
|
|
+ crudExpose.doRefresh()
|
|
|
+ },
|
|
|
+ {deep: true}
|
|
|
)
|
|
|
</script>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<style scoped>
|
|
|
+/* .en-text {
|
|
|
+ max-width: 100%;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 420;
|
|
|
+ word-break: break-word;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: normal;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+} */
|
|
|
+</style>
|
