From 5c8cd47fc6fa61f1b915f65debd75c236859dc09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Thu, 26 Jun 2025 16:28:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E6=96=B9=E6=A1=88=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account-placement/placementGuide.vue      | 201 -----------
 .../investmentGuidelines.less}                |  15 +-
 .../put-account/investmentGuidelines.vue      | 341 ++++++++++++++++++
 3 files changed, 351 insertions(+), 206 deletions(-)
 delete mode 100644 src/views/property-marketing/account-placement/placementGuide.vue
 rename src/views/property-marketing/{account-placement/placementGuide.less => put-account/investmentGuidelines.less} (94%)
 create mode 100644 src/views/property-marketing/put-account/investmentGuidelines.vue

diff --git a/src/views/property-marketing/account-placement/placementGuide.vue b/src/views/property-marketing/account-placement/placementGuide.vue
deleted file mode 100644
index 1629a6e..0000000
--- a/src/views/property-marketing/account-placement/placementGuide.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-  <view class="placement-guide-style">
-    <div class="part-div">
-      <div class="part-div-header">
-        <span class="part-div-header-title">投放指南</span>
-      </div>
-      <div>
-        <a-space>
-          <a-space style="padding: 25px">
-            <span>账户</span>
-            <a-select :style="{width:'320px'}" placeholder="Please select ...">
-              <a-option>Beijing</a-option>
-              <a-option>Shanghai</a-option>
-              <a-option>Guangzhou</a-option>
-              <a-option disabled>Disabled</a-option>
-            </a-select>
-          </a-space>
-          <a-space style="">
-            <span>项目</span>
-            <a-select :style="{width:'320px'}" placeholder="Please select ...">
-              <a-option>Beijing</a-option>
-              <a-option>Shanghai</a-option>
-              <a-option>Guangzhou</a-option>
-              <a-option disabled>Disabled</a-option>
-            </a-select>
-          </a-space>
-          <a-space style="padding: 15px">
-            <span>平台</span>
-            <a-select :style="{width:'320px'}" placeholder="Please select ...">
-              <a-option>Beijing</a-option>
-              <a-option>Shanghai</a-option>
-              <a-option>Guangzhou</a-option>
-              <a-option disabled>Disabled</a-option>
-            </a-select>
-          </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>
-      </div>
-    </div>
-
-    <div class="part-div">
-      <div class="part-div-header">
-        <span class="part-div-header-title">账户列表</span>
-      </div>
-
-      <!--          table-->
-      <a-table class="account-table" :data="listResult.list" :pagination="false">
-        <template #columns>
-          <a-table-column title="账号名称" data-index="name" />
-          <a-table-column title="平台" data-index="name" />
-          <a-table-column title="项目名称" data-index="name" />
-          <a-table-column title="本周总消耗" data-index="name" />
-          <a-table-column title="本周总消耗环比" data-index="name" />
-          <a-table-column title="ROI" data-index="name" />
-          <a-table-column title="CTR" data-index="name" />
-        </template>
-      </a-table>
-
-      <!-- 分页 -->
-      <a-pagination class="account-page" :total="listResult.total" :size="listQuery.page_size" show-total show-jumper
-                    show-page-size />
-
-    </div>
-    <div class="part-div">
-      <div class="part-div-header">
-        <span class="part-div-header-title">本月摘要</span>
-        <a-popover position="tl">
-          <icon-question-circle />
-          <template #content>
-            <p style="margin: 0">本月摘要。</p>
-          </template>
-        </a-popover>
-      </div>
-      <div class="month-data-div">
-        <div style="align-self: stretch">
-          <span class="month-text-black">总消耗：</span>
-          <span class="month-text-blue">￥52,382.16</span>
-          <span class="month-normal-span">，较上周期</span><span class="month-text-red">↑12.6%</span>
-          <span class="month-normal-span">；<br />整体ROI：</span><span class="month-text-blue">2.84</span>
-          <span class="month-normal-span">，属于</span><span class="month-text-red">中等偏高水平</span>
-          <span class="month-text-black">，较上周期 </span><span class="month-text-red">+0.45</span>
-          <span class="month-normal-span">；<br />主要转化来源：</span><span class="month-text-blue">抖音 46.3%</span>
-          <span class="month-normal-span">，CTR 2.91%；<br />优质素材表现：</span>
-          <span class="month-text-blue">美团酒店爆款横版1号</span>
-          <span class="month-normal-spanw">。CTR 3.47%，CVR 5.92%。</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="part-div">
-      <div class="part-div-header">
-        <span class="part-div-header-title">投放建议优化</span>
-        <a-popover position="tl">
-          <icon-question-circle />
-          <template #content>
-            <p style="margin: 0">投放建议优化。</p>
-          </template>
-        </a-popover>
-      </div>
-
-      <div>
-        <a-row>
-          <a-col :span="24">
-            <div class="overall-strategy">
-              <span class="placement-optimization-title">总体策略</span>
-              <span class="placement-optimization-str">本周建议</span>
-
-            </div>
-          </a-col>
-        </a-row>
-        <a-row class="grid-demo" :gutter="24">
-          <a-col :span="12">
-            <div class="overall-strategy">
-              <span class="placement-optimization-title">预算分配</span>
-              <span class="placement-optimization-str">巨量ROI高，建议将预算提升至 ￥5,000元/日 <br>
-              聚光 ROAS明显下降，建议减少预算 30%</span>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="overall-strategy">
-              <span class="placement-optimization-title">时段优化</span>
-              <span class="placement-optimization-str">过去7日 19:00-21:00 转化率最高，提升了12.6% <br>
-              建议设置定时投放，仅在高效时段曝光</span>
-            </div>
-          </a-col>
-        </a-row>
-        <a-row class="grid-demo" :gutter="24">
-          <a-col :span="12">
-            <div class="overall-strategy">
-              <span class="placement-optimization-title">人群包优化</span>
-              <span class="placement-optimization-str">18-24岁女性转化率最高，建议加预算 <br>
-              25-34岁男香表现较差，建议停投节省成本</span>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="overall-strategy">
-              <span class="placement-optimization-title">素材优化</span>
-              <span class="placement-optimization-str">替换当前点击率下降的xxxxx素材<br>
-              增加同类风格素材：xxxxx素材点击率更高 <br>
-              建议优化元素：视频封面/文案/开头引导，可提升CTR</span>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </div>
-
-
-  </view>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from "vue";
-import { IconDelete } from "@arco-design/web-vue/es/icon";
-import top1 from "@/assets/img/captcha/top1.svg";
-import top2 from "@/assets/img/captcha/top2.svg";
-import top3 from "@/assets/img/captcha/top3.svg";
-import "@/views/property-marketing/account-placement/placementGuide.less";
-
-const listQuery = reactive({
-  project_id: ref(""),
-  platform: ref(""),
-  page: ref(1),
-  name: ref(""),
-  page_size: ref("10")
-});
-
-const listResult = reactive({
-  list: ref([
-    {
-      account_name: "全球旅行小助手",
-      platform: "巨量",
-      project: "巨量",
-      ctr: "巨量",
-      huanbi: "巨量",
-      total_xiaohao: "巨量",
-      roi: "巨量"
-    }
-  ]),
-  total: ref(0)
-});
-
-const topImages = [top1, top2, top3];
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/views/property-marketing/account-placement/placementGuide.less b/src/views/property-marketing/put-account/investmentGuidelines.less
similarity index 94%
rename from src/views/property-marketing/account-placement/placementGuide.less
rename to src/views/property-marketing/put-account/investmentGuidelines.less
index 58e2f49..bb64596 100644
--- a/src/views/property-marketing/account-placement/placementGuide.less
+++ b/src/views/property-marketing/put-account/investmentGuidelines.less
@@ -17,10 +17,7 @@
   .part-div-header {
     align-self: stretch;
     height: 64px;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding: 10px 24px 10px 24px;
     justify-content: flex-start;
     align-items: center;
     display: inline-flex
@@ -39,6 +36,11 @@
     word-wrap: break-word;
   }
 
+  //账户指南-搜索div
+  .search-form {
+    padding: 10px 24px 20px 24px;
+
+  }
 
   //账户列表-表格
   .account-table {
@@ -48,7 +50,10 @@
 
   //账户列表-分页
   .account-page {
-    margin-left: 300px;
+    padding: 10px 24px 20px 24px;
+    border: 1px;
+    border-color: red;
+    float: right;
 
   }
 
diff --git a/src/views/property-marketing/put-account/investmentGuidelines.vue b/src/views/property-marketing/put-account/investmentGuidelines.vue
new file mode 100644
index 0000000..73750e2
--- /dev/null
+++ b/src/views/property-marketing/put-account/investmentGuidelines.vue
@@ -0,0 +1,341 @@
+<template>
+  <view class="placement-guide-style">
+    <div class="part-div">
+      <div class="part-div-header">
+        <span class="part-div-header-title">投放指南</span>
+      </div>
+
+      <a-space size="large" class="search-form">
+        <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-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-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-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>
+    </div>
+
+    <div class="part-div">
+      <div class="part-div-header">
+        <span class="part-div-header-title">账户列表</span>
+      </div>
+
+      <a-table
+        class="account-table"
+        :columns="columns"
+        :data="listResult.data"
+        :filter-icon-align-left="alignLeft"
+        @change="handleChange"
+        :pagination="false"
+      >
+        <template #week_consumption>
+          <a-space>
+            <span>本周总消耗</span>
+            <a-popover position="tl">
+              <icon-question-circle />
+              <template #content>
+                <p>本周总消耗</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #weekConsumptionRateTitle>
+          <a-space>
+            <span>本周总消耗环比</span>
+            <a-popover position="tl">
+              <icon-question-circle />
+              <template #content>
+                <p>本周总消耗环比</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #roi>
+          <a-space>
+            <span>roi</span>
+            <a-popover position="tl">
+              <icon-question-circle />
+              <template #content>
+                <p>roi</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+        <template #ctr>
+          <a-space>
+            <span>ctr</span>
+            <a-popover position="tl">
+              <icon-question-circle />
+              <template #content>
+                <p>ctr</p>
+              </template>
+            </a-popover>
+          </a-space>
+        </template>
+
+        <template #weekConsumptionRate="{ record }">
+          <a-statistic
+            style="font-size: 15px"
+            v-if="record.week_consumption_rate > 0"
+            :value="record.week_consumption_rate * 100"
+            :value-style="{ color: '#F64B31' }"
+          >
+            <template #prefix>
+              <icon-arrow-rise />
+            </template>
+            <template #suffix>%</template>
+          </a-statistic>
+          <a-statistic
+            v-else
+            style="font-size: 14px"
+            :value="record.week_consumption_rate * 100"
+            :value-style="{ color: '#25C883' }"
+          >
+            <template #prefix>
+              <icon-arrow-down />
+            </template>
+            <template #suffix>%</template>
+          </a-statistic>
+        </template>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="account-page"
+        :total="listResult.total"
+        :size="listQuery.page_size"
+        show-total
+        show-jumper
+        show-page-size
+      />
+    </div>
+    <div class="part-div">
+      <div class="part-div-header">
+        <span class="part-div-header-title">本月摘要</span>
+        <a-popover position="tl">
+          <icon-question-circle />
+          <template #content>
+
+
+            <p style="margin: 0">本月摘要。</p>
+          </template>
+        </a-popover>
+      </div>
+      <div class="month-data-div">
+        <div style="align-self: stretch">
+          <span class="month-text-black">总消耗：</span>
+          <span class="month-text-blue">￥52,382.16</span>
+          <span class="month-normal-span">，较上周期</span><span class="month-text-red">↑12.6%</span>
+          <span class="month-normal-span">；<br />整体ROI：</span><span class="month-text-blue">2.84</span>
+          <span class="month-normal-span">，属于</span><span class="month-text-red">中等偏高水平</span>
+          <span class="month-text-black">，较上周期 </span><span class="month-text-red">+0.45</span>
+          <span class="month-normal-span">；<br />主要转化来源：</span><span class="month-text-blue">抖音 46.3%</span>
+          <span class="month-normal-span">，CTR 2.91%；<br />优质素材表现：</span>
+          <span class="month-text-blue">美团酒店爆款横版1号</span>
+          <span class="month-normal-spanw">。CTR 3.47%，CVR 5.92%。</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="part-div">
+      <div class="part-div-header">
+        <span class="part-div-header-title">投放建议优化</span>
+        <a-popover position="tl">
+          <icon-question-circle />
+          <template #content>
+            <p style="margin: 0">投放建议优化。</p>
+          </template>
+        </a-popover>
+      </div>
+
+      <div>
+        <a-row>
+          <a-col :span="24">
+            <div class="overall-strategy">
+              <span class="placement-optimization-title">总体策略</span>
+              <span class="placement-optimization-str">本周建议</span>
+            </div>
+          </a-col>
+        </a-row>
+        <a-row class="grid-demo" :gutter="24">
+          <a-col :span="12">
+            <div class="overall-strategy">
+              <span class="placement-optimization-title">预算分配</span>
+              <span class="placement-optimization-str"
+                >巨量ROI高，建议将预算提升至 ￥5,000元/日 <br />
+                聚光 ROAS明显下降，建议减少预算 30%</span
+              >
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="overall-strategy">
+              <span class="placement-optimization-title">时段优化</span>
+              <span class="placement-optimization-str"
+                >过去7日 19:00-21:00 转化率最高，提升了12.6% <br />
+                建议设置定时投放，仅在高效时段曝光</span
+              >
+            </div>
+          </a-col>
+        </a-row>
+        <a-row class="grid-demo" :gutter="24">
+          <a-col :span="12">
+            <div class="overall-strategy">
+              <span class="placement-optimization-title">人群包优化</span>
+              <span class="placement-optimization-str"
+                >18-24岁女性转化率最高，建议加预算 <br />
+                25-34岁男香表现较差，建议停投节省成本</span
+              >
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="overall-strategy">
+              <span class="placement-optimization-title">素材优化</span>
+              <span class="placement-optimization-str"
+                >替换当前点击率下降的xxxxx素材<br />
+                增加同类风格素材：xxxxx素材点击率更高 <br />
+                建议优化元素：视频封面/文案/开头引导，可提升CTR</span
+              >
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { IconDelete, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+import top1 from '@/assets/img/captcha/top1.svg';
+import top2 from '@/assets/img/captcha/top2.svg';
+import top3 from '@/assets/img/captcha/top3.svg';
+import '@/views/property-marketing/put-account/investmentGuidelines.less';
+
+const columns = [
+  {
+    title: '账户名称',
+    dataIndex: 'account_name',
+    slotName: 'account_name',
+    width: 60,
+    minWidth: 60,
+  },
+  {
+    title: '平台',
+    dataIndex: 'platform_name',
+    width: 120,
+    minWidth: 120,
+  },
+  {
+    titleSlotName: 'project_name',
+    width: 180,
+    minWidth: 180,
+    title: '项目名称',
+    dataIndex: 'project_name',
+  },
+  {
+    title: '本周总消耗',
+    titleSlotName: 'week_consumption',
+    dataIndex: 'week_consumption',
+    width: 120,
+    minWidth: 120,
+  },
+  {
+    title: '本周总消耗环比',
+    titleSlotName: 'weekConsumptionRateTitle',
+    dataIndex: 'week_consumption_rate',
+    width: 120,
+    minWidth: 120,
+    slotName: 'weekConsumptionRate',
+  },
+  {
+    title: 'ROI',
+    titleSlotName: 'roi',
+    dataIndex: 'roi',
+    width: 120,
+    minWidth: 120,
+  },
+  {
+    title: 'CTR',
+    titleSlotName: 'ctr',
+    dataIndex: 'ctr',
+    width: 120,
+    minWidth: 120,
+  },
+];
+
+const listQuery = reactive({
+  project_id: ref(''),
+  platform: ref(''),
+  page: ref(1),
+  name: ref(''),
+  page_size: ref('10'),
+});
+
+const listResult = reactive({
+  data: [
+    {
+      account_name: '全球旅行',
+      platform_name: '平台',
+      project_name: '项目名称',
+      week_consumption: '本周总消耗',
+      week_consumption_rate: 0.1,
+      roi: '2.6',
+      ctr: '3.1%',
+    },
+    {
+      account_name: '全球旅行',
+      platform_name: '平台',
+      project_name: '项目名称',
+      week_consumption: '本周总消耗',
+      week_consumption_rate: -0.1,
+      roi: '2.6',
+      ctr: '3.1%',
+    },
+    {
+      account_name: '全球旅行',
+      platform_name: '平台',
+      project_name: '项目名称',
+      week_consumption: '本周总消耗',
+      week_consumption_rate: -0.1,
+      roi: '2.6',
+      ctr: '3.1%',
+    },
+  ],
+  total: ref(0),
+});
+
+const topImages = [top1, top2, top3];
+</script>
+
+<style lang="less" scoped></style>