feat(property-marketing): 优化报表页面布局和功能
- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件，支持更多图表类型 - 调整了路由模块中的报表名称
This commit is contained in:
林志军
@ -151,7 +151,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
path: 'businessAnalysisReport',
|
||||
name: 'IntelligentSolutionBusinessAnalysisReport',
|
||||
meta: {
|
||||
locale: '业务分析报告',
|
||||
locale: '业务洞察报告',
|
||||
requiresAuth: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
@ -161,7 +161,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
path: 'competitiveProductAnalysisReport',
|
||||
name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
|
||||
meta: {
|
||||
locale: '竟品分析报告',
|
||||
locale: '竟品对比报告',
|
||||
requiresAuth: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
|
||||
@ -3,18 +3,14 @@
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">品牌物料</span>
|
||||
<div v-if="listResult.total > 0" style="position: absolute; right: 35px;margin-top: 10px">
|
||||
<a-button style="float: right; width: 100px; height: 35px" type="primary" @click="handleAdd"
|
||||
>+ 添加品牌
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
|
||||
</div>
|
||||
|
||||
<a-space direction="vertical">
|
||||
<a-space size="medium" direction="content" style="margin-left: 24px; margin-bottom: 20px">
|
||||
<a-space>
|
||||
<span>品牌名称</span>
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
@ -28,7 +24,7 @@
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" size="medium" class="reset-btn" @click="handleSearch">
|
||||
<a-button type="outline" size="medium" class="reset-btn" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
@ -83,7 +79,7 @@
|
||||
@cancel="handleModalCancel"
|
||||
>
|
||||
<template #title>
|
||||
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '新增品牌' }}</span>
|
||||
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
|
||||
</template>
|
||||
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
|
||||
<a-form-item field="name" label="品牌名称">
|
||||
@ -117,8 +113,6 @@
|
||||
import { ref, computed, reactive, onMounted } from 'vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import noDataImage from '@/assets/img/guide/no_data.png';
|
||||
import '@/views/property-marketing/brands/brand-materials/style.scss';
|
||||
|
||||
import {
|
||||
addMaterials,
|
||||
@ -128,7 +122,6 @@ import {
|
||||
updateMaterials,
|
||||
} from '@/api/all/enterpriseKnowledge';
|
||||
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
||||
import { valid } from 'mockjs';
|
||||
|
||||
const searchName = ref('');
|
||||
const current = ref(1);
|
||||
@ -145,7 +138,6 @@ const listQuery = reactive({
|
||||
});
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const modalTitle = ref('编辑品牌');
|
||||
const formRef = ref();
|
||||
const formRule = {
|
||||
name: [{ required: true, message: '请输入品牌名称', trigger: ['blur', 'change'] }],
|
||||
@ -181,8 +173,8 @@ const deleteBrand = (id) => {
|
||||
};
|
||||
|
||||
function handleReset() {
|
||||
searchName.value = '';
|
||||
current.value = 1;
|
||||
listQuery.name = '';
|
||||
listQuery.page = 1;
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
@ -211,7 +203,6 @@ function handleModalOk() {
|
||||
});
|
||||
} else {
|
||||
addMaterials(form).then((response) => {
|
||||
console.log(response, 'response');
|
||||
Message.success('新增成功');
|
||||
handleSearch();
|
||||
});
|
||||
@ -233,3 +224,7 @@ function handleEdit(id) {
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
|
||||
.view-body {
|
||||
//每块div布局
|
||||
.part-div {
|
||||
@ -58,9 +60,16 @@
|
||||
|
||||
//添加按钮
|
||||
.add-btn {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
padding: 0 24px;
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
line-height: 110px;
|
||||
right: 35px;
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
//分页
|
||||
@ -192,23 +201,6 @@
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arco-textarea-wrapper,
|
||||
.arco-input-wrapper {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
|
||||
&.arco-input-wrapper {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
color: #999;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.arco-input-wrapper,
|
||||
.arco-select-view-single,
|
||||
.arco-textarea-wrapper,
|
||||
.arco-select-view-multiple {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
|
||||
@ -2,19 +2,17 @@
|
||||
<view>
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="end">
|
||||
<span class="part-div-header-title">业务分析报告 </span>
|
||||
</a-space>
|
||||
<a-space wrap :size="30">
|
||||
|
||||
<span class="part-div-header-title">业务洞察报告 </span>
|
||||
</a-space>
|
||||
<a-space align="center" class="search-form-div" size="medium">
|
||||
<a-form-item field="name" class="search-form" label="服务/产品">
|
||||
<a-input
|
||||
v-model="listQuery.name"
|
||||
placeholder="请搜索..."
|
||||
/>
|
||||
<a-form-item field="name" class="" label="服务/产品">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索...">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="生成日期">
|
||||
<a-form-item field="name" label="时间筛选">
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
@ -49,7 +47,14 @@
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<a-pagination style="float: right" :total="50" :size="size" show-total show-jumper show-page-size />
|
||||
<a-pagination
|
||||
style="float: right"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.size"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
/>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
@ -57,6 +62,7 @@
|
||||
<script setup lang="ts">
|
||||
const listQuery = reactive({
|
||||
name: '',
|
||||
size: 0,
|
||||
});
|
||||
|
||||
const listResult = reactive({
|
||||
@ -67,14 +73,14 @@ const listResult = reactive({
|
||||
const columns = [
|
||||
{
|
||||
title: '服务/产品',
|
||||
dataIndex: 'rank',
|
||||
dataIndex: 'service_name',
|
||||
slotName: 'rank',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '生成日期',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'create_time',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
sortable: {
|
||||
@ -86,17 +92,17 @@ const columns = [
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '目标客群',
|
||||
dataIndex: 'hot',
|
||||
dataIndex: 'customer',
|
||||
slotName: 'hot',
|
||||
},
|
||||
{
|
||||
title: '价格区间',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'price',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'volume_rateTitle',
|
||||
titleSlotName: 'lasterUpdateTime',
|
||||
title: '最后更新日期',
|
||||
dataIndex: 'volumeRate',
|
||||
width: 180,
|
||||
@ -104,11 +110,11 @@ const columns = [
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'volumeRate',
|
||||
slotName: 'lasterUpdateTime',
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'operator',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
@ -132,6 +138,23 @@ const columns = [
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.arco-picker),
|
||||
:deep(.arco-input-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 32px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
min-width: 72px;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,17 @@
|
||||
<view>
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="end">
|
||||
<span>业务分析报告 </span>
|
||||
<span class="part-div-header-title">竞品对比报告 </span>
|
||||
</a-space>
|
||||
<a-space align="center" size="medium">
|
||||
<a-form-item field="name" label="服务/产品">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索" />
|
||||
<a-space align="center" class="search-form-div" size="medium">
|
||||
<a-form-item field="name" class="" label="服务/产品">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索...">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="生成日期">
|
||||
<a-form-item field="name" label="时间筛选">
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
@ -17,7 +21,7 @@
|
||||
style="width: 380px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" >
|
||||
<a-form-item field="name">
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
@ -33,7 +37,6 @@
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
|
||||
</a-space>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
@ -44,8 +47,14 @@
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<a-pagination style="float: right" :total="50" :size="size" show-total show-jumper show-page-size />
|
||||
|
||||
<a-pagination
|
||||
style="float: right"
|
||||
:total="listResult.total"
|
||||
:size="listQuery.size"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
/>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
@ -53,6 +62,7 @@
|
||||
<script setup lang="ts">
|
||||
const listQuery = reactive({
|
||||
name: '',
|
||||
size: 0,
|
||||
});
|
||||
|
||||
const listResult = reactive({
|
||||
@ -63,36 +73,28 @@ const listResult = reactive({
|
||||
const columns = [
|
||||
{
|
||||
title: '服务/产品',
|
||||
dataIndex: 'rank',
|
||||
dataIndex: 'service_name',
|
||||
slotName: 'rank',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '生成日期',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'create_time',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
titleSlotName: 'hotTitle',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '目标客群',
|
||||
dataIndex: 'hot',
|
||||
title: '竞争对手',
|
||||
dataIndex: 'customer',
|
||||
slotName: 'hot',
|
||||
},
|
||||
{
|
||||
title: '价格区间',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'volume_rateTitle',
|
||||
titleSlotName: 'lasterUpdateTime',
|
||||
title: '最后更新日期',
|
||||
dataIndex: 'volumeRate',
|
||||
width: 180,
|
||||
@ -100,15 +102,57 @@ const columns = [
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'volumeRate',
|
||||
slotName: 'lasterUpdateTime',
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'operator',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'handle',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="less">
|
||||
.part-div-header-title {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.search-form-div {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.arco-picker),
|
||||
:deep(.arco-input-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 32px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
min-width: 72px;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="chart-container">
|
||||
<a-card :bordered="false" class="echart-item-card">
|
||||
<template #title>
|
||||
<span>{{ title.name }}</span>
|
||||
<span class="a-card-title" >{{ title.name }}</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
@ -10,12 +10,12 @@
|
||||
</template>
|
||||
</a-popover>
|
||||
</template>
|
||||
<div id="echarts-line" style="width: 100%; height: 450px"></div>
|
||||
<div id="echarts-line" ref="chart" style="width: 100%; height: 450px"></div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { defineProps, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { Card } from '@arco-design/web-vue';
|
||||
@ -38,10 +38,16 @@ const props = defineProps({
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref<HTMLElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
const xAxisData = props.xAxisData;
|
||||
const seriesData = props.seriesData;
|
||||
onMounted(() => {
|
||||
const myChart = echarts.init(document.getElementById('echarts-line'));
|
||||
|
||||
const initChart = () => {
|
||||
if (!chart.value) return;
|
||||
chartInstance = echarts.init(chart.value);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
@ -96,11 +102,11 @@ onMounted(() => {
|
||||
series: seriesData,
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,21 @@
|
||||
.echart-item-card {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
margin:13px;
|
||||
margin: 13px;
|
||||
border-radius: 10px;
|
||||
|
||||
:deep(.arco-card-header) {
|
||||
border-bottom: none !important;
|
||||
|
||||
}
|
||||
|
||||
.a-card-title {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<view>
|
||||
<div class="part-div">
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
|
||||
<a-tabs v-model:activeKey="tabData" default-active-key="acctoun">
|
||||
<a-tab-pane key="acctoun" title="账户"></a-tab-pane>
|
||||
<a-tab-pane key="project">
|
||||
<template #title>项目</template>
|
||||
@ -10,41 +10,34 @@
|
||||
</a-tabs>
|
||||
</div>
|
||||
<a-space size="large" direction="vertical" class="search-form">
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="5">
|
||||
<a-space size="large">
|
||||
<a-space>
|
||||
<span>项目名称</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<span>账户名称</span>
|
||||
<a-select multiple placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<span>平台</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-select placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<span>运营人员</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-select placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="6">
|
||||
<a-space size="large">
|
||||
<a-space>
|
||||
<span>时间筛选</span>
|
||||
<a-range-picker
|
||||
@ -54,11 +47,8 @@
|
||||
}"
|
||||
@change="onChange"
|
||||
@select="onSelect"
|
||||
style="width: 380px"
|
||||
/>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
@ -73,8 +63,7 @@
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
@ -95,6 +84,89 @@
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '点击量', popover: '点击量' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '点击率', popover: 点击率 }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '平均点击成本', popover: '平均点击成本' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '千次展现费用', popover: '千次展现费用' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '转化数', popover: '转化数' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '转化率', popover: '转化率' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '平均转化成本', popover: '平均转化成本' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '深度转化数', popover: '深度转化数' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '深度转化率', popover: '深度转化率' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<EchartsItem
|
||||
:xAxisData="xhlEcharts.xAxisData"
|
||||
:seriesData="xhlEcharts.seriesData"
|
||||
:title="{ name: '投资回报率', popover: '投资回报率' }"
|
||||
></EchartsItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
@ -155,8 +227,6 @@ const xhlEcharts = reactive({
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
|
||||
.part-div {
|
||||
width: 100%;
|
||||
background: var(--BG-white, white);
|
||||
@ -9,35 +11,16 @@
|
||||
justify-content: flex-start;
|
||||
display: inline-flex;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.part-div-header {
|
||||
align-self: stretch;
|
||||
height: 64px;
|
||||
padding: 10px 24px 10px 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-select-view-multiple),
|
||||
:deep(.arco-picker),
|
||||
:deep(.arco-input-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
width: 224px;
|
||||
height: 32px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-tab {
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-btn {
|
||||
// 搜索
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
@ -63,6 +46,6 @@
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 20px;
|
||||
margin: 5px 10px 24px 24px;
|
||||
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">投放建议优化。</p>
|
||||
<p>投放建议优化。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
@ -15,31 +15,31 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">表现分析。</p>
|
||||
<p>表现分析。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<div>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<div style="margin-right: 24px">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群分析</span>
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
18-24岁女性，兴趣为“美妆/穿搭”，一线城市，抖音平台 ROI 3.2</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
25-34岁男性，兴趣为“数码产品”，二线城市，巨量引擎 ROI 2.8</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
18-24岁男性，兴趣为“运动/健身”，三线城市，抖音 ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
@ -52,19 +52,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
图文风格 + 明确福利点，CTR 3.2%、CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
场景短视频 + 明确人设定位，CTR 2.7%、CVR 7.1%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
口播讲解类 + 产品对比，CTR 2.1%、CVR 6.0%</span
|
||||
>
|
||||
</a-space>
|
||||
@ -79,19 +79,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
晚高峰时段（19:00–21:00），ROI 3.1</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
中午时段（11:30–13:00），ROI 2.5</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
下午茶时段（15:00–17:00），ROI 2.3</span
|
||||
>
|
||||
</a-space>
|
||||
@ -105,19 +105,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
抖音 - ROI 3.2，CVR 8.5%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
聚光平台 - ROI 2.7，CVR 7.3%</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
B站 - ROI 2.4，CVR 6.8%</span
|
||||
>
|
||||
</a-space>
|
||||
@ -142,19 +142,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
集中在 18–24 岁女性 + 精准兴趣标签（如“护肤”、“口红”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
24–30 岁男性 + 实用类内容受众（如“工具控”、“搞机党”）</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
泛娱乐向受众 + 较大地域分布（兴趣“短剧”、“直播带货”）</span
|
||||
>
|
||||
</a-space>
|
||||
@ -169,19 +169,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
福利明确+钩子强的图文短视频，建议加限时优惠提示</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
场景代入型视频，突出客户痛点与产品关联</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
达人口播/测评，搭配标题党封面吸引点击</span
|
||||
>
|
||||
</a-space>
|
||||
@ -197,19 +197,19 @@
|
||||
<a-space direction="vertical">
|
||||
<a-space class="placement-optimization-str">
|
||||
<span>
|
||||
<img :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(1)" style="width: 25px; height: 17px" />
|
||||
预算前置在 ROI 最佳时段和平台，优先抢头部流量</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(2)" style="width: 25px; height: 17px" />
|
||||
中等预算组合投放 + 高点击素材A/B测试</span
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>
|
||||
<img :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<img :src="getStarIcon(3)" style="width: 25px; height: 17px" />
|
||||
低预算长周期测试，重点看 CVR，优胜劣汰</span
|
||||
>
|
||||
</a-space>
|
||||
@ -223,11 +223,10 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
import { getStarIcon } from '../../constants';
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import './style.scss';
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">预算分配</span>
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群包优化</span>
|
||||
@ -67,7 +67,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="table-data">
|
||||
<a-table
|
||||
class="account-table"
|
||||
:columns="columns"
|
||||
@ -54,12 +54,10 @@
|
||||
|
||||
<template #weekConsumptionRate="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 14px !important"
|
||||
:value="record.week_consumption_rate * 100"
|
||||
:value-style="{
|
||||
color: record.week_consumption_rate > 0 ? '#F64B31' : '#25C883',
|
||||
fontStyle: 'normal',
|
||||
fontSize: '14px !important',
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
@ -83,10 +81,6 @@
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
|
||||
const listQuery = reactive({
|
||||
project_id: ref(''),
|
||||
platform: ref(''),
|
||||
@ -177,41 +171,20 @@ const listResult = reactive({
|
||||
],
|
||||
total: ref(0),
|
||||
});
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.arco-textarea-wrapper,
|
||||
.arco-input-wrapper {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
|
||||
&.arco-input-wrapper {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
//账户列表-分页
|
||||
.account-page {
|
||||
<style lang="scss" scoped>
|
||||
.table-data {
|
||||
//账户列表-分页
|
||||
.account-page {
|
||||
padding: 10px 24px 20px 24px;
|
||||
background-color: #fff;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页器 - 页码下拉菜单样式穿透
|
||||
:deep(.arco-select-item),
|
||||
:deep(.arco-select-item) {
|
||||
background-color: #fff !important;
|
||||
height: 30px;
|
||||
color: white !important;
|
||||
:deep(.custom-statistic .arco-statistic-value) {
|
||||
font-size: 14px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
|
||||
/**
|
||||
* 根据评分获取对应的星星图标路径
|
||||
* @param score 评分，范围 1 ~ 3
|
||||
* @returns 对应的 SVG 图标路径
|
||||
*/
|
||||
export function getStarIcon(score: number): string {
|
||||
switch (score) {
|
||||
case 1:
|
||||
return top1;
|
||||
case 2:
|
||||
return top2;
|
||||
case 3:
|
||||
return top3;
|
||||
default:
|
||||
return top1; // 默认返回最高分图标
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="placement-guide-style">
|
||||
<view>
|
||||
<div class="part-div">
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="placement_guide">
|
||||
@ -12,9 +12,9 @@
|
||||
<!--表单组件搜索-->
|
||||
<listSearchForm></listSearchForm>
|
||||
<!-- 投放指南-->
|
||||
<PlacementGuideList v-if="tabData == 'placement_guide'"></PlacementGuideList>
|
||||
<PlacementGuideList v-if="tabData === 'placement_guide'"></PlacementGuideList>
|
||||
<!-- 历史指南列表-->
|
||||
<GuideListHistory v-if="tabData == 'guide_history'"></GuideListHistory>
|
||||
<GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
|
||||
</div>
|
||||
|
||||
<!-- 本月摘要-->
|
||||
@ -44,10 +44,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
import '@/views/property-marketing/put-account/investment-guidelines/style.scss';
|
||||
import PlacementGuideList from './components/table-data/placementGuideList.vue';
|
||||
import listSearchForm from './components/table-data/listSearchForm.vue';
|
||||
import GuideListHistory from './components/table-data/guideListHistory.vue';
|
||||
@ -64,8 +60,8 @@ const listQuery = reactive({
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
});
|
||||
|
||||
const topImages = [top1, top2, top3];
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@ -9,6 +9,12 @@
|
||||
justify-content: flex-start;
|
||||
display: inline-flex;
|
||||
margin: 10px;
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-tab {
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.part-div-header {
|
||||
@ -27,7 +33,8 @@
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
word-wrap: break-word;
|
||||
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
//每块div 标题
|
||||
@ -100,7 +107,7 @@
|
||||
|
||||
//投放建议-总体策略
|
||||
.overall-strategy {
|
||||
width: 100%;
|
||||
width: 98%;
|
||||
padding: 20px 10px 20px 16px;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
@ -110,7 +117,7 @@
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: inline-flex;
|
||||
margin: 10px 24px 15px 20px;
|
||||
margin: 20px;
|
||||
|
||||
}
|
||||
|
||||
@ -146,3 +153,11 @@
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-tab {
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user