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

- 重新设计了业务分析报告和竞品分析报告的页面布局 - 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式 - 更新了图表组件，支持更多图表类型 - 调整了路由模块中的报表名称
2025-06-30 11:36:11 +08:00
parent ad465e6d93
commit 0a3c80a852
17 changed files with 404 additions and 270 deletions
--- 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
@ -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>

--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
@ -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;
+  }
 }
+
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -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,71 +10,60 @@
        </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>
-              <span>项目名称</span>
-              <a-select :style="{ width: '320px' }" 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-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-option>Beijing</a-option>
-                <a-option>Shanghai</a-option>
-                <a-option>Guangzhou</a-option>
-              </a-select>
-            </a-space>
-          </a-col>
-        </a-row>
+        <a-space size="large">
+          <a-space>
+            <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-space>
+            <span>平台</span>
+            <a-select placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </a-space>
+          <a-space>
+            <span>运营人员</span>
+            <a-select placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </a-space>
+        </a-space>

-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
-          <a-col :span="6">
-            <a-space>
-              <span>时间筛选</span>
-              <a-range-picker
-                showTime
-                :time-picker-props="{
-                  defaultValue: ['00:00:00', '00:00:00'],
-                }"
-                @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>
-                  <icon-search />
-                </template>
-                <template #default>搜索</template>
-              </a-button>
-              <a-button type="outline" class="reset-btn" @click="handleSearch">
-                <template #icon>
-                  <icon-refresh />
-                </template>
-                <template #default>重置</template>
-              </a-button>
-            </a-space>
-          </a-col>
-        </a-row>
+        <a-space size="large">
+          <a-space>
+            <span>时间筛选</span>
+            <a-range-picker
+              showTime
+              :time-picker-props="{
+                defaultValue: ['00:00:00', '00:00:00'],
+              }"
+              @change="onChange"
+              @select="onSelect"
+            />
+          </a-space>
+          <a-space>
+            <a-button type="outline" class="search-btn" @click="handleSearch">
+              <template #icon>
+                <icon-search />
+              </template>
+              <template #default>搜索</template>
+            </a-button>
+            <a-button type="outline" class="reset-btn" @click="handleSearch">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              <template #default>重置</template>
+            </a-button>
+          </a-space>
+        </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">
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.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;

 }