提取公共常量

src/api/all/propertyMarketing.ts

@@ -274,3 +274,27 @@ export const batchMediaAccounts = (params = {}, config = {}) => {
 export const getMediaAccountsAuthorizedStatus = (id: string) => {
   return Http.get(`/v1/media-accounts/${id}/status`);
 };
+
+// 投放账号-趋势
+export const getPlacementAccountsTrend = (params = {}) => {
+  return Http.get(`/v1/placement-accounts/trend`);
+};
+
+// 投放账号数据-趋势
+export const getPlacementAccountsList = (id: string) => {
+  return Http.get(`/v1/placement-accounts/list`);
+};
+// 投放账号计划数据-趋势
+export const getPlacementAccountProjectsTrend = (id: string) => {
+  return Http.get(`/v1/placement-account-projects/trend`);
+};
+
+// 投放指南查询
+export const getPlacementGuide = (params: {}) => {
+  return Http.get(`/v1/placement-guide/getGuideList`,params);
+};
+
+// 前端定时轮询获取ai检测结果
+export const getAiResult = (params: {}) => {
+  return Http.get(`/v1/placement-guide/getAiResult`);
+};

src/views/property-marketing/put-account/account-dashboard/index.vue

@@ -1,37 +1,45 @@
 <template>
   <div class="account-dashboard-wrap">
     <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
-      <a-tabs>
+      <a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
-        <a-tab-pane :key="1" title="账户"></a-tab-pane>
+        <a-tab-pane key="1" title="账户"></a-tab-pane>
-        <a-tab-pane :key="2" title="项目"></a-tab-pane>
+        <a-tab-pane key="2" title="计划"></a-tab-pane>
       </a-tabs>
 
       <div class="container px-24px">
         <div class="filter-row flex mb-20px">
           <div class="filter-row-item flex items-center">
-            <span class="label">账号名称</span>
+            <span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
-            <a-select multiple placeholder="全部">
+            <a-space size="medium" class="w-240px">
-              <a-option>Beijing</a-option>
+              <a-input v-model="query.names" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-              <a-option>Shanghai</a-option>
+                <template #prefix>
-              <a-option>Guangzhou</a-option>
+                  <icon-search />
-            </a-select>
+                </template>
+              </a-input>
+            </a-space>
           </div>
-
           <div class="filter-row-item flex items-center">
             <span class="label">平台</span>
-            <a-select placeholder="全部">
+            <a-select
-              <a-option>Beijing</a-option>
+              v-model="query.platform"
-              <a-option>Shanghai</a-option>
+              class="w-150"
-              <a-option>Guangzhou</a-option>
+              size="medium"
+              placeholder="全部"
+              allow-clear
+              @change="handleSearch"
+            >
+              <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
+                >{{ item.label }}
+              </a-option>
             </a-select>
           </div>
 
           <div class="filter-row-item flex items-center">
             <span class="label">运营人员</span>
-            <a-select placeholder="全部">
+            <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-              <a-option>Beijing</a-option>
+              <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name"
-              <a-option>Shanghai</a-option>
+                >{{ item.name }}
-              <a-option>Guangzhou</a-option>
+              </a-option>
             </a-select>
           </div>
         </div>
@@ -61,161 +69,203 @@
       <a-row class="grid-demo" :gutter="24">
         <a-col :span="12">
           <EchartsItem
-            :xAxisData="xhlEcharts.xAxisData"
+            :xAxisData="xhlEcharts.consumption_volume.xAxisData"
-            :seriesData="xhlEcharts.seriesData"
+            :seriesData="xhlEcharts.consumption_volume.seriesData"
             :title="{ name: '消耗量', popover: '消耗量' }"
           ></EchartsItem>
         </a-col>
         <a-col :span="12">
           <EchartsItem
-            :xAxisData="xhlEcharts.xAxisData"
+            :xAxisData="xhlEcharts.click_count.xAxisData"
-            :seriesData="xhlEcharts.seriesData"
+            :seriesData="xhlEcharts.click_count.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>
-
-      <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>
   </div>
 </template>
 <script setup lang="ts">
 import EchartsItem from './components/echarts-item/index';
+import { PLATFORM_LIST } from '../common_constants';
+import {
+  fetchPlacementAccountOperators,
+  getPlacementAccountsList,
+  getPlacementAccountsTrend,
+  getPlacementAccountProjectsTrend,
+} from '@/api/all/propertyMarketing';
 
+const accountType = ref('1');
+
+const query = reactive({
+  names: '',
+  platform: '',
+  operator_id: '',
+});
+const getPlacementAccounts = async () => {
+  const { code, data } = await getPlacementAccountsTrend(query);
+  if (code === 200) {
+    accountList.value = data;
+  }
+};
+
+const handleSearch = async () => {
+  getPlacementAccounts();
+};
+const handleReset = async () => {};
+// 投放账号计划数据-趋势
+const getPlacementAccountProjects = async () => {
+  const { code, data } = await getPlacementAccountProjectsTrend(query);
+  if (code === 200) {
+    accountList.value = data;
+  }
+};
+const operators = ref([]);
+const accountList = ref([]);
+const handleTabClick = (key) => {
+  console.log(key, 'key');
+  if (key == 1) {
+    getAccountList();
+  } else if (key == 2) {
+    getPlacementAccountProjects();
+  }
+};
+
+const getOperators = async () => {
+  const { code, data } = await fetchPlacementAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+
+// 获取账户名称
+const getAccountList = async () => {
+  const { code, data } = await getPlacementAccountsList(query);
+  if (code === 200) {
+    accountList.value = data;
+  }
+};
+
+onMounted(() => {
+  getPlacementAccounts();
+  getAccountList();
+  getOperators();
+});
 const xhlEcharts = reactive({
-  xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
+  consumption_volume: {
-  seriesData: [
+    label: '消耗量',
-    {
+    key: 'consumption_volume',
-      name: '本地推-小庭院推广计划',
+    xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
-      type: 'line',
+    seriesData: [
-      data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
+      {
-      color: '#7b68ee',
+        name: '本地推-小庭院推广计划',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
-    {
+        color: '#7b68ee',
-      name: '全球旅行小助手推广',
+        emphasis: { focus: 'series' },
-      type: 'line',
+      },
-      data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
+      {
-      color: '#32c5ff',
+        name: '全球旅行小助手推广',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
-    {
+        color: '#32c5ff',
-      name: '定向旅居推广顶级套餐',
+        emphasis: { focus: 'series' },
-      type: 'line',
+      },
-      data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
+      {
-      color: '#feb62f',
+        name: '定向旅居推广顶级套餐',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
-    {
+        color: '#feb62f',
-      name: '城市探索者特惠活动',
+        emphasis: { focus: 'series' },
-      type: 'line',
+      },
-      data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
+      {
-      color: '#ff7d00',
+        name: '城市探索者特惠活动',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
-    {
+        color: '#ff7d00',
-      name: '高端民宿精选推荐',
+        emphasis: { focus: 'series' },
-      type: 'line',
+      },
-      data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
+      {
-      color: '#f5222d',
+        name: '高端民宿精选推荐',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
-    {
+        color: '#f5222d',
-      name: '美食探店达人计划',
+        emphasis: { focus: 'series' },
-      type: 'line',
+      },
-      data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
+      {
-      color: '#722ed1',
+        name: '美食探店达人计划',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
-    {
+        color: '#722ed1',
-      name: '户外探险装备推荐',
+        emphasis: { focus: 'series' },
-      type: 'line',
+      },
-      data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
+      {
-      color: '#13c2c2',
+        name: '户外探险装备推荐',
-      emphasis: { focus: 'series' },
+        type: 'line',
-    },
+        data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
-  ],
+        color: '#13c2c2',
+        emphasis: { focus: 'series' },
+      },
+    ],
+
+  },
+  click_count: {
+    label: '点击量',
+    key: 'click_count',
+    xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
+    seriesData: [
+      {
+        name: '本地推-小庭院推广计划',
+        type: 'line',
+        data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
+        color: '#7b68ee',
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '全球旅行小助手推广',
+        type: 'line',
+        data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
+        color: '#32c5ff',
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '定向旅居推广顶级套餐',
+        type: 'line',
+        data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
+        color: '#feb62f',
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '城市探索者特惠活动',
+        type: 'line',
+        data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
+        color: '#ff7d00',
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '高端民宿精选推荐',
+        type: 'line',
+        data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
+        color: '#f5222d',
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '美食探店达人计划',
+        type: 'line',
+        data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
+        color: '#722ed1',
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '户外探险装备推荐',
+        type: 'line',
+        data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
+        color: '#13c2c2',
+        emphasis: { focus: 'series' },
+      },
+    ],
+  },
 });
 </script>
 

src/views/property-marketing/put-account/common_constants.ts

@@ -0,0 +1,21 @@
+import icon1 from '@/assets/img/media-account/icon-jl.png';
+import icon2 from '@/assets/img/media-account/icon-jg.png';
+import icon3 from '@/assets/img/media-account/icon-bili.png';
+
+export const PLATFORM_LIST = [
+  {
+    label: '巨量',
+    value: 0,
+    icon: icon1,
+  },
+  {
+    label: '聚光',
+    value: 1,
+    icon: icon2,
+  },
+  {
+    label: 'B站',
+    value: 2,
+    icon: icon3,
+  },
+];

src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue

@@ -6,11 +6,18 @@
         <a-col :span="8">
           <a-space>
             <span>账户</span>
-            <a-select :style="{ width: '320px' }" placeholder="全部">
+            <a-input
-              <a-option>Beijing</a-option>
+              class="w-310px"
-              <a-option>Shanghai</a-option>
+              :style="{ width: '320px' }"
-              <a-option>Guangzhou</a-option>
+              v-model="query.names"
-            </a-select>
+              placeholder="请搜索..."
+              size="medium"
+              allow-clear
+            >
+              <template #prefix>
+                <icon-search />
+              </template>
+            </a-input>
           </a-space>
         </a-col>
         <a-col :span="8">
@@ -26,10 +33,18 @@
         <a-col :span="8">
           <a-space>
             <span>平台</span>
-            <a-select :style="{ width: '320px' }" placeholder="全部">
+
-              <a-option>Beijing</a-option>
+            <a-select
-              <a-option>Shanghai</a-option>
+              v-model="query.platform"
-              <a-option>Guangzhou</a-option>
+              class="w-320"
+              size="medium"
+              placeholder="全部"
+              allow-clear
+              @change="handleSearch"
+            >
+              <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
+                >{{ item.label }}
+              </a-option>
             </a-select>
           </a-space>
         </a-col>
@@ -44,7 +59,6 @@
               :time-picker-props="{
                 defaultValue: ['00:00:00', '00:00:00'],
               }"
-              @change="onChange"
               @select="onSelect"
               style="width: 380px"
             />
@@ -72,8 +86,20 @@
 </template>
 
 <script setup lang="ts">
+import { defineEmits, defineProps } from 'vue';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
+const emits = defineEmits('onSearch', 'onReset', 'update:query');
+
 const handleSearch = () => {
   console.log('handleSearch');
+  emits('onSearch', props.query);
 };
 </script>
 

src/views/property-marketing/put-account/investment-guidelines/index.vue

@@ -10,19 +10,21 @@
         </a-tabs>
       </div>
       <!--表单组件搜索-->
-      <listSearchForm></listSearchForm>
+      <listSearchForm v-model:query="query" @onSearch="getData"></listSearchForm>
       <!--      投放指南-->
       <PlacementGuideList v-if="tabData === 'placement_guide'"></PlacementGuideList>
       <!--      历史指南列表-->
       <GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
     </div>
 
-    <!--    本月摘要-->
+    <a-spin :loading="loading" tip="数据分析中">
-    <MonthData></MonthData>
+      <!--    本月摘要-->
+      <MonthData></MonthData>
 
-    <!--    投放建议-->
+      <!--    投放建议-->
-    <PlacementSuggestions></PlacementSuggestions>
+      <PlacementSuggestions></PlacementSuggestions>
-    <ActionGuideDistribution></ActionGuideDistribution>
+      <ActionGuideDistribution></ActionGuideDistribution>
+    </a-spin>
     <div>
       <a-space class="down-btn">
         <a-button type="outline" @click="handleSearch">
@@ -50,20 +52,48 @@ import GuideListHistory from './components/table-data/guideListHistory.vue';
 import MonthData from './components/month-data/index.vue';
 import PlacementSuggestions from './components/placement-suggestions/index.vue';
 import ActionGuideDistribution from './components/action-guide-distribution';
+import FilterBlock from '@/views/property-marketing/put-account/account-data/components/filter-block/index.vue';
+import {
+  getAiResult,
+  getPlacementAccountData,
+  getPlacementAccountDataList,
+  getPlacementGuide,
+} from '@/api/all/propertyMarketing';
 
 const tabData = ref('placement_guide');
 
-const listQuery = reactive({
+const query = reactive({
-  project_id: ref(''),
+  platform: '',
-  platform: ref(''),
-  page: ref(1),
-  name: ref(''),
-  page_size: ref('10'),
 });
+
+const loading = ref(false);
+const queryResult = reactive({
+  search_key: '',
+});
+
+const getData = async () => {
+  console.log(query, 'query');
+  const { code, data } = await getPlacementGuide(query);
+  if (code === 200) {
+  }
+};
+
+const getSyncAiResult = async () => {
+  const { code, data } = await getAiResult(query);
+  if (code === 200) {
+    //成功或者失败清除定时任务
+    if ((data.status && data.status === 3) || data.status === 2) {
+      clearInterval(timer);
+      loading.value = false;
+    }
+  }
+};
+// 定时任务请求接口
+const timer = setInterval(() => {
+  getSyncAiResult();
+}, 5000);
 </script>
 
 <style lang="scss">
 @import './style.scss';
-
-
 </style>