|
|
@@ -0,0 +1,228 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import {ref, reactive, computed, inject, watch, Ref, onMounted} from 'vue'
|
|
|
+import {useRouter} from "vue-router";
|
|
|
+import { getDayData, getMonthData, getWeekData } from '/@/views/reportManage/dataCenter/api';
|
|
|
+import {VxeGridListeners} from "vxe-table";
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const dateType = inject<Ref>('dateDimension')
|
|
|
+
|
|
|
+//表格
|
|
|
+const dayColumns = [
|
|
|
+ {field: 'platformNumber', title: '平台编号', slots: {default: 'platformNumber_default'}},
|
|
|
+ {field: 'platformName', title: '平台名称', slots: {default: 'platformName_default'}},
|
|
|
+ {field: 'user_name', title: '运营', slots: {default: 'user_name_default'}},
|
|
|
+ {field: 'country', title: '国家' , slots: {default: 'country_default'}},
|
|
|
+ {field: 'brandName', title: '品牌' ,slots: {default: 'brandName_default'}},
|
|
|
+
|
|
|
+ {field: 'sales', title: '销售额'},
|
|
|
+ {field: 'sales_year_on_year', title: '期末同比变化'},
|
|
|
+ {field: 'sales_monthly_year_on_year', title: '期末环比变化'},
|
|
|
+ {field: 'ad_cost', title: '广告花费'},
|
|
|
+ {field: 'ad_sales', title: '广告销售额'},
|
|
|
+ {field: 'roi', title: '广告ROI'},
|
|
|
+ {field: 'acos', title: '广告ACOS'},
|
|
|
+ {field: 'roas', title: '广告ROAS'},
|
|
|
+]
|
|
|
+const weekColumns = [
|
|
|
+ {field: 'platformNumber', title: '平台编号', slots: {default: 'platformNumber_default'}},
|
|
|
+ {field: 'platformName', title: '平台名称', slots: {default: 'platformName_default'}},
|
|
|
+ {field: 'user_name', title: '运营', slots: {default: 'user_name_default'}},
|
|
|
+ {field: 'country', title: '国家' , slots: {default: 'country_default'}},
|
|
|
+ {field: 'brandName', title: '品牌' ,slots: {default: 'brandName_default'}},
|
|
|
+
|
|
|
+ {field: 'sales', title: '销售额'},
|
|
|
+ {field: 'ad_cost', title: '广告花费'},
|
|
|
+ {field: 'ad_sales', title: '广告销售额'},
|
|
|
+ {field: 'roi', title: '广告ROI'},
|
|
|
+ {field: 'acos', title: '广告ACOS'},
|
|
|
+ {field: 'roas', title: '广告ROAS'},
|
|
|
+ {field: 'impression', title: '广告曝光',},
|
|
|
+ {field: 'ad_click', title: '广告点击',},
|
|
|
+ {field: 'ad_order', title: '广告订单',},
|
|
|
+ {field: 'ad_conversion_rate', title: '广告转化率',},
|
|
|
+ {field: 'money_by_amazon', title: 'Amazon回款金额',},
|
|
|
+ {field: 'money_by_other', title: 'Ebay及其他平台可用余额',},
|
|
|
+ {field: 'currencyCode', title: '回款/余额币种',},
|
|
|
+ {field: 'total_sales_current_monthly', title: '销售额完成情况',},
|
|
|
+ {field: 'sales_year_on_year', title: '环比上周增长率',},
|
|
|
+ {field: 'sales_monthly_year_on_year', title: '环比上月周增长率',},
|
|
|
+ {field: 'sales_weekly_year_on_year', title: '环比上年周增长率',},
|
|
|
+ {field: 'session', title: '流量',},
|
|
|
+ {field: 'ad_order', title: '订单',},
|
|
|
+ {field: 'order', title: '转化',},
|
|
|
+ {field: "availableSalesDay", title: "当前存货可售天",},
|
|
|
+ {field: "intransitInventory", title: "当前在途库存",},
|
|
|
+ {field: "overseasStorage", title: "当前海外仓库存",},
|
|
|
+ {field: "refundRate", title: "最近90天平台退货率",},
|
|
|
+]
|
|
|
+const monthColumns = [
|
|
|
+ {field: 'platformNumber', title: '平台编号', slots: {default: 'platformNumber_default'}},
|
|
|
+ {field: 'platformName', title: '平台名称', slots: {default: 'platformName_default'}},
|
|
|
+ {field: 'user_name', title: '运营', slots: {default: 'user_name_default'}},
|
|
|
+ {field: 'country', title: '国家' , slots: {default: 'country_default'}},
|
|
|
+ {field: 'brandName', title: '品牌' ,slots: {default: 'brandName_default'}},
|
|
|
+
|
|
|
+ {field: 'sales', title: '销售额'},
|
|
|
+ {field: 'ad_cost', title: '广告花费'},
|
|
|
+ {field: 'ad_sales', title: '广告销售额'},
|
|
|
+ {field: 'roi', title: '广告ROI'},
|
|
|
+ {field: 'acos', title: '广告ACOS'},
|
|
|
+ {field: 'roas', title: '广告ROAS'},
|
|
|
+ {field: 'impression', title: '广告曝光',},
|
|
|
+ {field: 'ad_click', title: '广告点击',},
|
|
|
+ {field: 'ad_order', title: '广告订单',},
|
|
|
+ {field: 'ad_conversion_rate', title: '广告转化率',},
|
|
|
+ {field: 'total_sales_current_monthly', title: '销售额完成情况',},
|
|
|
+]
|
|
|
+
|
|
|
+const dayData = []
|
|
|
+const weekData = []
|
|
|
+const monthData = []
|
|
|
+
|
|
|
+const gridOptions = reactive({
|
|
|
+ border: false,
|
|
|
+ height: 600,
|
|
|
+ align: null,
|
|
|
+ round: true,
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true,
|
|
|
+ },
|
|
|
+ pagerConfig: {
|
|
|
+ enabled: true,
|
|
|
+ total: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizes: [10, 20, 30],
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ slots: {
|
|
|
+ buttons: 'toolbar_buttons',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ day: {
|
|
|
+ columns: dayColumns,
|
|
|
+ data: dayData
|
|
|
+ },
|
|
|
+ week: {
|
|
|
+ columns: weekColumns,
|
|
|
+ data: weekData
|
|
|
+ },
|
|
|
+ month: {
|
|
|
+ columns: monthColumns,
|
|
|
+ data: monthData
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const currentGridOptions = computed(() => {
|
|
|
+ const selectedGridOptions = gridOptions[dateType.value];
|
|
|
+ return {
|
|
|
+ ...gridOptions,
|
|
|
+ ...selectedGridOptions
|
|
|
+ };
|
|
|
+})
|
|
|
+// 分页
|
|
|
+const gridEvents = {
|
|
|
+ pageChange({currentPage, pageSize}) {
|
|
|
+ if (gridOptions.pagerConfig) {
|
|
|
+ gridOptions.pagerConfig.currentPage = currentPage
|
|
|
+ gridOptions.pagerConfig.pageSize = pageSize
|
|
|
+ if (dateType.value === 'day') {
|
|
|
+ fetchDayData();
|
|
|
+ } else if (dateType.value === 'week') {
|
|
|
+ fetchWeekData();
|
|
|
+ } else if (dateType.value === 'month') {
|
|
|
+ fetchMonthData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchData(apiFunction) {
|
|
|
+ const resp = await apiFunction({
|
|
|
+ page: gridOptions.pagerConfig.currentPage,
|
|
|
+ limit: gridOptions.pagerConfig.pageSize
|
|
|
+ });
|
|
|
+ gridOptions[dateType.value].data = resp.data;
|
|
|
+ gridOptions.pagerConfig.total = resp.total;
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchDayData() {
|
|
|
+ await fetchData(getDayData);
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchWeekData() {
|
|
|
+ await fetchData(getWeekData);
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchMonthData() {
|
|
|
+ await fetchData(getMonthData);
|
|
|
+}
|
|
|
+
|
|
|
+function fetchCurrentData() {
|
|
|
+ if (dateType.value === 'day') {
|
|
|
+ fetchDayData();
|
|
|
+ } else if (dateType.value === 'week') {
|
|
|
+ fetchWeekData();
|
|
|
+ } else if (dateType.value === 'month') {
|
|
|
+ fetchMonthData();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleImport = () => {
|
|
|
+ router.push({
|
|
|
+ name: 'TableDataEntry',
|
|
|
+ query: {
|
|
|
+ dateType: dateType.value,
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// const QueryTask = (row: any) => {
|
|
|
+// router.push({
|
|
|
+// name: 'TaskManage',
|
|
|
+// })
|
|
|
+// }
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ fetchCurrentData();
|
|
|
+
|
|
|
+ // 监听 dateType 的变化
|
|
|
+ watch(dateType, () => {
|
|
|
+ fetchCurrentData();
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <vxe-grid v-bind="currentGridOptions" v-on="gridEvents">
|
|
|
+ <template #toolbar_buttons>
|
|
|
+ <vxe-button @click="handleImport">数据录入</vxe-button>
|
|
|
+ <!--<vxe-button @click="QueryTask">任务列表</vxe-button>-->
|
|
|
+ </template>
|
|
|
+ <template #platformNumber_default ="{ row }">
|
|
|
+ <div>{{ row.task_info.platformNumber }}</div>
|
|
|
+ </template>
|
|
|
+ <template #platformName_default ="{ row }">
|
|
|
+ <div>{{ row.task_info.platformName }}</div>
|
|
|
+ </template>
|
|
|
+ <template #user_name_default ="{ row }">
|
|
|
+ <div>{{ row.task_info.user_name}}</div>
|
|
|
+ </template>
|
|
|
+ <template #country_default ="{ row }">
|
|
|
+ <div>{{ row.task_info.country }}</div>
|
|
|
+ </template>
|
|
|
+ <template #brandName_default ="{ row }">
|
|
|
+ <div>{{ row.task_info.brandName }}</div>
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.vxe-grid {
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+</style>
|
xinyan