renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提取公共常量

Browse Source
This commit is contained in:
林志军
2025-07-04 10:35:16 +08:00
parent f3f0397eae
commit 514081aea8
5 changed files with 331 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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-tab-pane :key="1" title="账户"></a-tab-pane>
<a-tab-pane :key="2" title="项目"></a-tab-pane>
<a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
<a-tab-pane key="1" 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>
<a-select multiple placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
</a-select>
<span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.names" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">平台</span>
<a-select placeholder="全部">
<a-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
<a-select
v-model="query.platform"
class="w-150"
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-option>Beijing</a-option>
<a-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name"
>{{ item.name }}
</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"
:seriesData="xhlEcharts.seriesData"
:xAxisData="xhlEcharts.consumption_volume.xAxisData"
:seriesData="xhlEcharts.consumption_volume.seriesData"
:title="{ name: '消耗量', popover: '消耗量' }"
></EchartsItem>
</a-col>
<a-col :span="12">
<EchartsItem
:xAxisData="xhlEcharts.xAxisData"
:seriesData="xhlEcharts.seriesData"
:xAxisData="xhlEcharts.click_count.xAxisData"
: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'],
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' },
},
],
consumption_volume: {
label: '消耗量',
key: 'consumption_volume',
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' },
},
],
},
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>

21
src/views/property-marketing/put-account/common_constants.ts Normal file
View File

@ -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,
},
];

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

@ -6,11 +6,18 @@
<a-col :span="8">
<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-input
class="w-310px"
:style="{ width: '320px' }"
v-model="query.names"
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-option>Shanghai</a-option>
<a-option>Guangzhou</a-option>
<a-select
v-model="query.platform"
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>

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

@ -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>
<!-- 本月摘要-->
<MonthData></MonthData>
<a-spin :loading="loading" tip="数据分析中">
<!-- 本月摘要-->
<MonthData></MonthData>
<!-- 投放建议-->
<PlacementSuggestions></PlacementSuggestions>
<ActionGuideDistribution></ActionGuideDistribution>
<!-- 投放建议-->
<PlacementSuggestions></PlacementSuggestions>
<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({
project_id: ref(''),
platform: ref(''),
page: ref(1),
name: ref(''),
page_size: ref('10'),
const query = reactive({
platform: '',
});
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>