Skip to content

M
mengchangaigc
Commit fd59473d authored by 黄同智's avatar 黄同智
Browse files
Options

视频数据分析页面的布局

parent 6f5ecf40
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 5 deletions
apps/web-vue/src/views/analysis/components/AdPlatformTags.vue 0 → 100644
View file @ fd59473d
This diff is collapsed.
apps/web-vue/src/views/analysis/components/DeliveryReport.vue 0 → 100644
View file @ fd59473d
<template>
<div class="p-6">
<el-card class="round-12 mt-10 filter-card" shadow="hover">
<div class="flex-items-center gap-34 header-tabs">
<div v-for="item in platforms" :key="item" class="pb-16 font-bold pointer"
:class="{ active: platform === item }" @click="platform = item">{{ item }}</div>
</div>
<div class="py-14 sub-tabs">
<div class="flex-items-center gap-24">
<span v-for="item in scopes" :key="item" class="font-bold pointer"
:class="{ 'color-main': scope === item }" @click="scope = item">{{ item }}</span>
<div class="flex-items-center gap-10">
<div class="w-300 flex-items-center mr-10">
<div class="w-90">上传时间:</div>
<el-date-picker v-model="uploadRange" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
</div>
<div class="w-300 flex-items-center mr-10">
<div class="w-90">投放时间:</div>
<el-date-picker v-model="deliveryRange" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
</div>
</div>
</div>
<div class="mt-16">
<el-button type="primary" class="round-6">视频作者</el-button>
<el-button class="round-6 mr-10">下单运营</el-button>
<el-select v-model="department" class="w-180 mr-10" placeholder="请选择部门" />
<el-select v-model="category" class="w-180 mr-10" placeholder="请选择分类" />
<el-button type="primary" class="w-66 round-6">查询</el-button>
<el-button class="round-6">导出数据</el-button>
<el-button class="w-34 h-34 round-6">☷</el-button>
</div>
</div>
</el-card>
<el-card class="round-12 mt-16" shadow="hover">
<el-table :data="pagedTableData" class="analysis-table">
<el-table-column prop="department" label="部门" min-width="160" />
<el-table-column prop="cost" label="消耗" width="120" align="center" />
<el-table-column prop="roi" label="roi" width="90" align="center" />
<el-table-column prop="totalAmount" label="总成交金额" width="130" align="center" />
<el-table-column prop="amount" label="成交金额" width="130" align="center" />
<el-table-column prop="coupon" label="智能优惠券" width="130" align="center" />
<el-table-column prop="conversions" label="转化数" width="110" align="center" />
<el-table-column prop="rate" label="转化率" width="110" align="center" />
<el-table-column prop="costRate" label="转化成本" width="110" align="center" />
<el-table-column prop="show" label="展示数" width="130" align="center" />
<el-table-column prop="avgCost" label="平均千次展现费用" width="160" align="center" />
<el-table-column prop="click" label="点击数" width="120" align="center" />
<el-table-column prop="clickRate" label="点击率" width="110" align="center" />
<el-table-column prop="avgPrice" label="平均点击单价" width="140" align="center" />
<el-table-column prop="play" label="播放量" width="130" align="center" />
</el-table>
<div class="py-12 flex justify-end table-footer">
<el-pagination
v-model:current-page="pageData.currentPage"
v-model:page-size="pageData.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
:page-sizes="pageData.pageSizes"
@size-change="handleSizeChange"
/>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
const platform = ref('巨量广告');
const scope = ref('部门');
const department = ref('');
const category = ref('');
const uploadRange = ref('');
const deliveryRange = ref('');
const pageData = reactive({
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100],
});
const platforms = ['巨量广告', '巨量千川', '磁力智投', '磁力金牛', '百度营销', '小红书'];
const scopes = ['部门', '分组', '个人', '明细', '分日', '分月'];
const tableData = [
{ department: '总计', cost: '1375201.50', roi: '3.69', totalAmount: '¥5,074,860', amount: '¥4,740,000', coupon: '¥334,860', conversions: '44,240', rate: '4.54%', costRate: '¥31.09', show: '26,040,000', avgCost: '¥52.81', click: '974,510', clickRate: '3.74%', avgPrice: '¥1.41', play: '22,300,000' },
{ department: '项目1-爆款电商', cost: '342100.80', roi: '4.12', totalAmount: '¥1,409,450', amount: '¥1,320,000', coupon: '¥89,450', conversions: '11,400', rate: '5.10%', costRate: '¥30.01', show: '6,450,000', avgCost: '¥53.03', click: '223,500', clickRate: '3.46%', avgPrice: '¥1.53', play: '5,600,000' },
{ department: '达人测试部门', cost: '285400.00', roi: '3.85', totalAmount: '¥1,098,790', amount: '¥1,020,000', coupon: '¥78,790', conversions: '9,240', rate: '4.82%', costRate: '¥30.88', show: '5,120,000', avgCost: '¥55.74', click: '191,980', clickRate: '3.75%', avgPrice: '¥1.48', play: '4,320,000' },
{ department: 'xx素颜霜项目', cost: '220500.00', roi: '3.68', totalAmount: '¥811,440', amount: '¥760,000', coupon: '¥51,440', conversions: '7,350', rate: '4.50%', costRate: '¥30.00', show: '4,100,000', avgCost: '¥53.78', click: '163,330', clickRate: '3.98%', avgPrice: '¥1.35', play: '3,680,000' },
{ department: '小真测试部门', cost: '196200.50', roi: '3.42', totalAmount: '¥671,000', amount: '¥630,000', coupon: '¥41,000', conversions: '6,150', rate: '4.25%', costRate: '¥31.90', show: '3,820,000', avgCost: '¥51.36', click: '144,700', clickRate: '3.78%', avgPrice: '¥1.35', play: '3,100,000' },
{ department: '抖音投放一组', cost: '189000.20', roi: '3.52', totalAmount: '¥665,280', amount: '¥620,000', coupon: '¥45,280', conversions: '5,980', rate: '4.15%', costRate: '¥31.60', show: '3,600,000', avgCost: '¥52.50', click: '144,000', clickRate: '4.00%', avgPrice: '¥1.31', play: '3,150,000' },
];
const pagedTableData = computed(() => {
const start = (pageData.currentPage - 1) * pageData.pageSize;
return tableData.slice(start, start + pageData.pageSize);
});
const handleSizeChange = () => {
pageData.currentPage = 1;
};
</script>
<style scoped lang="scss">
.filter-card,
.table-card {
border: 1px solid #dfe7f2;
}
.header-tabs,
.sub-tabs,
.table-footer {
border-bottom: 1px solid #edf0f5;
}
.table-footer {
border-top: 1px solid #edf0f5;
border-bottom: none;
}
.header-tabs .active {
color: rgba(var(--main-color), 1);
border-bottom: 2px solid rgba(var(--main-color), 1);
}
.analysis-table {
:deep(.el-table__header th) {
background: #f8fbff;
color: #48607f;
font-weight: bold;
}
}
</style>
apps/web-vue/src/views/analysis/components/TagAnalysis.vue 0 → 100644
View file @ fd59473d
This diff is collapsed.
apps/web-vue/src/views/analysis/components/TencentDeliveryReport.vue 0 → 100644
View file @ fd59473d
<template>
<div class="p-6">
<el-card class="bg-fff round-12 mt-10" shadow="hover">
<div class="flex-items-center gap-30 header-tabs">
<div v-for="item in dataTabs" :key="item" class="pb-16 font-bold pointer" :class="{ active: dataTab === item }" @click="dataTab = item">{{ item }}</div>
</div>
<div class="pt-16 flex-between">
<div class="flex-items-center">
<el-button type="primary" class="round-6">汇总</el-button>
<el-button class="round-6 mr-10">明细</el-button>
<el-select v-model="department" class="w-180 mr-10" placeholder="请选择部门"><el-option label="默认部门" value="默认部门" /></el-select>
<el-select v-model="group" class="w-180 mr-10" placeholder="请选择"><el-option label="华南电商一队" value="华南电商一队" /></el-select>
<div class="w-240 mr-10">
<el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="2022/04/27" end-placeholder="2025/05/12" style="width: 100% !important;" />
</div>
<el-button type="primary" class="w-66 round-6 mr-10">查询</el-button>
</div>
</div>
</el-card>
<el-card class="bg-fff round-12 mt-16" shadow="hover">
<div class="pb-12 flex-between table-title">
<span class="fs-16 font-bold">汇总数据</span>
<el-button type="default" plain class="round-6">导出数据</el-button>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<el-table-column prop="department" label="部门" min-width="180" />
<el-table-column prop="cost" label="消耗" align="center" />
<el-table-column prop="conversions" label="转化数" align="center" />
<el-table-column prop="rate" label="转化率" align="center" />
<el-table-column prop="costRate" label="转化成本" align="center" />
<el-table-column prop="show" label="展示数" align="center" />
<el-table-column prop="click" label="点击数" align="center" />
<el-table-column prop="clickRate" label="点击率" align="center" />
<el-table-column prop="avgPrice" label="平均点击单价" align="center" />
<el-table-column prop="play" label="播放量" align="center" />
<el-table-column prop="complete" label="3S完播率" align="center" />
</el-table>
<div class="px-20 py-12 flex justify-end table-footer">
<el-pagination
v-model:current-page="pageData.currentPage"
v-model:page-size="pageData.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
:page-sizes="pageData.pageSizes"
@size-change="handleSizeChange"
/>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
const dataTab = ref('部门数据');
const department = ref('');
const group = ref('');
const range = ref('');
const pageData = reactive({
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100],
});
const dataTabs = ['部门数据', '分组数据', '个人数据'];
const tableData = [
{ department: '总计', cost: '361051.50', conversions: '11,550', rate: '4.27%', costRate: '¥31.26', show: '6,880,000', click: '270,530', clickRate: '3.93%', avgPrice: '1.33', play: '5,860,000', complete: '20.6%' },
{ department: '默认部门', cost: '128450.50', conversions: '4,210', rate: '4.12%', costRate: '¥30.50', show: '2,450,000', click: '98,200', clickRate: '4.01%', avgPrice: '1.31', play: '2,100,000', complete: '22.5%' },
{ department: '华南电商一队', cost: '96200.80', conversions: '3,120', rate: '3.95%', costRate: '¥30.83', show: '1,820,000', click: '74,620', clickRate: '4.10%', avgPrice: '1.29', play: '1,560,000', complete: '21.2%' },
{ department: '华东投放二队', cost: '84300.00', conversions: '2,680', rate: '3.78%', costRate: '¥31.45', show: '1,590,000', click: '62,010', clickRate: '3.90%', avgPrice: '1.36', play: '1,320,000', complete: '20.4%' },
{ department: '海外品牌推广组', cost: '52100.20', conversions: '1,540', rate: '3.45%', costRate: '¥33.83', show: '1,020,000', click: '35,700', clickRate: '3.50%', avgPrice: '1.46', play: '880,000', complete: '18.5%' },
];
const pagedTableData = computed(() => {
const start = (pageData.currentPage - 1) * pageData.pageSize;
return tableData.slice(start, start + pageData.pageSize);
});
const handleSizeChange = () => {
pageData.currentPage = 1;
};
</script>
<style scoped lang="scss">
.header-tabs,.table-title,.table-footer { border-bottom: 1px solid #edf0f5; }
.table-footer { border-top: 1px solid #edf0f5; border-bottom: none; }
.header-tabs .active { color: rgba(var(--main-color), 1); border-bottom: 2px solid rgba(var(--main-color), 1); }
.analysis-table { :deep(.el-table__header th) { background: #f8fbff; color: #48607f; font-weight: bold; } }
</style>
apps/web-vue/src/views/analysis/video.vue
View file @ fd59473d
<template>
<div>
<div class="bgmr vh100 over-y-auto">
<section class="bg-fff px-20 py-10 analysis-tabs">
<div class="flex-items-center gap-16">
<div
v-for="item in tabs"
:key="item.value"
class="px-12 py-8 round-6 font-bold pointer"
:class="activeTab === item.value ? 'bg-main color-fff' : 'color-000'"
@click="activeTab = item.value"
>
{{ item.label }}
</div>
</div>
</section>
<div class="p-16">
<component :is="currentComponent" />
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import AdPlatformTags from './components/AdPlatformTags.vue';
import TagAnalysis from './components/TagAnalysis.vue';
import TencentDeliveryReport from './components/TencentDeliveryReport.vue';
import DeliveryReport from './components/DeliveryReport.vue';
const activeTab = ref('platform');
const tabs = [
{ label: '广告平台标签', value: 'platform', component: AdPlatformTags },
{ label: '标签分析', value: 'tag', component: TagAnalysis },
{ label: '腾讯投放报表', value: 'tencent', component: TencentDeliveryReport },
{ label: '投放报表', value: 'delivery', component: DeliveryReport },
];
const currentComponent = computed(() => tabs.find((item) => item.value === activeTab.value)?.component);
</script>
<style scoped lang="scss">
</style>
\ No newline at end of file
.analysis-tabs {
border-bottom: 1px solid #dfe7f2;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment