feat(property-marketing): 优化报表页面布局和功能
- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件，支持更多图表类型 - 调整了路由模块中的报表名称
This commit is contained in:
林志军
@ -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-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>
|
||||
|
||||
Reference in New Issue
Block a user