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

feat: 新增账户仪表盘组件和优化投放指南操作功能

Browse Source
This commit is contained in:
林志军
2025-06-27 18:31:53 +08:00
parent 7b4d2e6034
commit aeb7ab15a3
14 changed files with 465 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/property-marketing/put-account/account-dashboard/index.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<view>
<div class="part-div">
<div>
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
<a-tab-pane key="acctoun" title="账户"></a-tab-pane>
<a-tab-pane key="project">
<template #title>项目</template>
</a-tab-pane>
</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-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>
</div>
<div>
<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>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index.vue';
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' },
},
],
});
</script>
<style scoped lang="scss">
@import './style.scss';
</style>