|
|
@@ -1,3 +1,69 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
|
|
|
+import { FsPage, useFs } from '@fast-crud/fast-crud'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { nextTick, onMounted, ref, watch } from 'vue'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
|
|
|
+import AdStructChart from './chartComponents/adStruct.vue'
|
|
|
+import { createCrudOptions } from './crud'
|
|
|
+import DataCompare from '/@/components/dataCompare/index.vue'
|
|
|
+import { usePublicData } from '/@/stores/publicData'
|
|
|
+import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
+import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
|
|
|
+import { SbBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
|
|
|
+
|
|
|
+const tabActiveName = ref('dataTendency')
|
|
|
+const shopInfo = useShopInfo()
|
|
|
+const publicData = usePublicData()
|
|
|
+const { dateRange } = storeToRefs(publicData)
|
|
|
+const { profile } = storeToRefs(shopInfo)
|
|
|
+const queryParams = ref({
|
|
|
+ profileId: profile.value.profile_id,
|
|
|
+ dateRange,
|
|
|
+})
|
|
|
+
|
|
|
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+const adStructChartRef = ref()
|
|
|
+const dataTendencyRef = ref()
|
|
|
+const showCompare = ref(false)
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ crudExpose.doRefresh()
|
|
|
+})
|
|
|
+
|
|
|
+const jumpGroup = (row: any) => {
|
|
|
+ router.push({
|
|
|
+ name: 'CampaignDetail',
|
|
|
+ query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const resizeTabChart = () => {
|
|
|
+ if (tabActiveName.value === 'dataTendency') {
|
|
|
+ dataTendencyRef.value.resizeChart()
|
|
|
+ } else if (tabActiveName.value === 'adStruct') {
|
|
|
+ adStructChartRef.value.resizeChart()
|
|
|
+ }
|
|
|
+}
|
|
|
+const changeTab = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ resizeTabChart()
|
|
|
+ })
|
|
|
+}
|
|
|
+defineExpose({ resizeTabChart })
|
|
|
+
|
|
|
+watch(
|
|
|
+ queryParams,
|
|
|
+ async () => {
|
|
|
+ crudExpose.doRefresh()
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
+</script>
|
|
|
+
|
|
|
<template>
|
|
|
<fs-page class="fs-page-custom">
|
|
|
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
|
@@ -19,53 +85,58 @@
|
|
|
<el-tab-pane label="散点视图" name="scatterView"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</template>
|
|
|
- <template #cell_percentTimeInBudget="scope">
|
|
|
+ <!-- <template #cell_percentTimeInBudget="scope">
|
|
|
<el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #cell_resolvedExpression_value="{ row }">
|
|
|
+ </template> -->
|
|
|
+ <template #cell_expression_value="{ row }">
|
|
|
<div style="display: flex">
|
|
|
- <div style="min-width: 50px">
|
|
|
- <!-- <img src="" alt=""> -->
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-tooltip effect="dark" placement="top" :content="row.adGroupName">
|
|
|
- <div class="ellipsis">
|
|
|
- {{ row.adGroupName }}
|
|
|
+ <img class="img-part" v-if="row.expression[0].image" :src="row.expression[0].image" alt="" />
|
|
|
+ <el-image v-else class="img-part">
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <el-icon><icon-picture /></el-icon>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div class="right-part">
|
|
|
+ <el-tooltip effect="dark" placement="top-start">
|
|
|
+ <template #content>
|
|
|
+ <p>{{ row.adGroupName ? row.adGroupName : '--' }}</p>
|
|
|
+ </template>
|
|
|
+ <div class="list-item-title title-font" slot="reference">{{ row.adGroupName ? row.adGroupName : '--' }}</div>
|
|
|
</el-tooltip>
|
|
|
- <div><span>ASIN: </span>{{ row.resolvedExpression[0].value }}</div>
|
|
|
+ <div>
|
|
|
+ <span class="list-item-asin">
|
|
|
+ ASIN:
|
|
|
+ <span class="asin-font">
|
|
|
+ {{ row.expression[0].value ? row.expression[0].value : '--' }}
|
|
|
+ </span>
|
|
|
+ <el-link
|
|
|
+ :href="row.expression[0].amazon_url"
|
|
|
+ target="_blank"
|
|
|
+ :disabled="!row.expression[0].amazon_url"
|
|
|
+ :underline="false"
|
|
|
+ :icon="Connection"
|
|
|
+ :style="{ marginLeft: '8px', color: row.expression[0].amazon_url ? '#3a83f7' : '#c0c4cc' }">
|
|
|
+ </el-link>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <template #content>
|
|
|
- <p>{{ scope.row.resolvedExpression_value }}</p>
|
|
|
- {{ scope.row.ASIN }}
|
|
|
- </template>
|
|
|
- <div>
|
|
|
- <el-link :underline="false" class="ellipsis-inline" style="color: rgb(30, 33, 40); display: inline-block; max-width: 100%">
|
|
|
- {{ scope.row.resolvedExpression_value }}
|
|
|
- </el-link>
|
|
|
- <br />
|
|
|
- <span class="ellipsis">
|
|
|
- <span style="color: rgb(109, 119, 132)">ASIN: </span>
|
|
|
- <span style="color: rgb(30, 33, 40)">{{ scope.row.ASIN }}</span>
|
|
|
- </span>
|
|
|
- </div> -->
|
|
|
</template>
|
|
|
-
|
|
|
<template #cell_campaignName="scope">
|
|
|
<el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
|
|
|
- <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
|
|
|
- <div class="en-text">{{ scope.row.campaignName ? scope.row.campaignName : '--' }}</div>
|
|
|
- </el-link>
|
|
|
+ <!-- <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)"> -->
|
|
|
+ <!-- <el-link type="primary" :underline="false"> -->
|
|
|
+ <div class="en-text">{{ scope.row.campaignName ? scope.row.campaignName : '--' }}</div>
|
|
|
+ <!-- </el-link> -->
|
|
|
</el-tooltip>
|
|
|
</template>
|
|
|
<template #cell_adGroupName="scope">
|
|
|
<el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
|
|
|
- <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
|
|
|
- <div class="en-text">{{ scope.row.adGroupName }}</div>
|
|
|
- </el-link>
|
|
|
+ <!-- <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)"> -->
|
|
|
+ <div class="en-text">{{ scope.row.adGroupName }}</div>
|
|
|
+ <!-- </el-link> -->
|
|
|
</el-tooltip>
|
|
|
</template>
|
|
|
<template #cell_suggestedBid="scope">
|
|
|
@@ -97,72 +168,6 @@
|
|
|
</fs-crud>
|
|
|
</fs-page>
|
|
|
</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { nextTick, onMounted, ref, watch } from 'vue'
|
|
|
-import { FsPage, useFs } from '@fast-crud/fast-crud'
|
|
|
-import { createCrudOptions } from './crud'
|
|
|
-import { useRoute, useRouter } from 'vue-router'
|
|
|
-import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
|
|
|
-import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
-import { usePublicData } from '/@/stores/publicData'
|
|
|
-import AdStructChart from './chartComponents/adStruct.vue'
|
|
|
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import { SbBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
|
|
|
-import DataCompare from '/@/components/dataCompare/index.vue'
|
|
|
-
|
|
|
-const tabActiveName = ref('dataTendency')
|
|
|
-const shopInfo = useShopInfo()
|
|
|
-const publicData = usePublicData()
|
|
|
-const { dateRange } = storeToRefs(publicData)
|
|
|
-const { profile } = storeToRefs(shopInfo)
|
|
|
-const queryParams = ref({
|
|
|
- profileId: profile.value.profile_id,
|
|
|
- dateRange,
|
|
|
-})
|
|
|
-
|
|
|
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
|
|
|
-const route = useRoute()
|
|
|
-const router = useRouter()
|
|
|
-const adStructChartRef = ref()
|
|
|
-const dataTendencyRef = ref()
|
|
|
-const showCompare = ref(false)
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- crudExpose.doRefresh()
|
|
|
-})
|
|
|
-
|
|
|
-const jumpGroup = (row: any) => {
|
|
|
- router.push({
|
|
|
- name: 'CampaignDetail',
|
|
|
- query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const resizeTabChart = () => {
|
|
|
- if (tabActiveName.value === 'dataTendency') {
|
|
|
- dataTendencyRef.value.resizeChart()
|
|
|
- } else if (tabActiveName.value === 'adStruct') {
|
|
|
- adStructChartRef.value.resizeChart()
|
|
|
- }
|
|
|
-}
|
|
|
-const changeTab = () => {
|
|
|
- nextTick(() => {
|
|
|
- resizeTabChart()
|
|
|
- })
|
|
|
-}
|
|
|
-defineExpose({ resizeTabChart })
|
|
|
-
|
|
|
-watch(
|
|
|
- queryParams,
|
|
|
- async () => {
|
|
|
- crudExpose.doRefresh()
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-)
|
|
|
-</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.campare-switch {
|
|
|
flex: none;
|
|
|
@@ -228,4 +233,53 @@ watch(
|
|
|
text-overflow: ellipsis;
|
|
|
display: inline;
|
|
|
}
|
|
|
+
|
|
|
+.img-part {
|
|
|
+ min-width: 65px;
|
|
|
+ height: 65px;
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.right-part {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.list-item-title {
|
|
|
+ color: #6b7785;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ // white-space: pre-wrap;
|
|
|
+}
|
|
|
+.title-font {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1d2129;
|
|
|
+}
|
|
|
+.image-slot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 65px;
|
|
|
+ height: 65px;
|
|
|
+ background: var(--el-fill-color-light);
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+.image-slot .el-icon {
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+.list-item-asin {
|
|
|
+ color: #6b7785;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+}
|
|
|
+.asin-font {
|
|
|
+ color: #1d2129;
|
|
|
+}
|
|
|
</style>
|
