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

- 重新设计了业务分析报告和竞品分析报告的页面布局
- 添加了更多筛选条件和排序功能- 优化了表格列的展示内容和样式
- 更新了图表组件，支持更多图表类型
- 调整了路由模块中的报表名称

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>
 

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">