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

- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件，支持更多图表类型 - 调整了路由模块中的报表名称
2025-06-30 11:36:11 +08:00
parent ad465e6d93
commit 697c23ecf0
5 changed files with 211 additions and 57 deletions
--- a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
@ -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>
--- a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
@ -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>
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
@ -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>

--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -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">