feat(property-marketing): 优化报表页面布局和功能

- 重新设计了业务分析报告和竞品分析报告的页面布局
- 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式
- 更新了图表组件,支持更多图表类型
- 调整了路由模块中的报表名称
This commit is contained in:
林志军
2025-06-30 11:36:11 +08:00
parent ad465e6d93
commit 697c23ecf0
5 changed files with 211 additions and 57 deletions

View File

@ -13,7 +13,7 @@
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
<a-col :span="5">
<a-space>
<span>项目名称</span>
<span>账户名称</span>
<a-select :style="{ width: '320px' }" placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
@ -95,6 +95,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 +238,6 @@ const xhlEcharts = reactive({
},
],
});
</script>
<style scoped lang="scss">