电商交易-交易分析看板页面开发对接接口
This commit is contained in:
parent
5c89ab4ea6
commit
f941a7ec30
43
src/api/trade/dataBoard.js
Normal file
43
src/api/trade/dataBoard.js
Normal file
@ -0,0 +1,43 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 获取顶部左侧数据（运营看板）
|
||||
export function getAstsTransTotals(data) {
|
||||
return request({
|
||||
url: "/tairui-transettle/astsInfo/getAstsTransTotals",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
//获取顶部右侧数据（线形图）
|
||||
export function getEchartsData(data) {
|
||||
return request({
|
||||
url: "/brand/brandbase/save",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
//获取中间数据（统计数据）
|
||||
export function getMidleInfo(data) {
|
||||
return request({
|
||||
url: "/tairui-transettle/astsInfo/getLeftMidQueryInfo",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 获取厎部左侧数据（产品销量）
|
||||
export function getGoodsSalesInfo(data) {
|
||||
return request({
|
||||
url: "/tairui-transettle/astsInfo/getGoodsSalesInfo",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取厎部右侧数据(售后概况)
|
||||
export function getAfterSalesData(data) {
|
||||
return request({
|
||||
url: "/tairui-transettle/astsInfo/getAfterSalesData",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
@ -305,3 +305,11 @@
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// 溢出隐藏
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -1,186 +1,188 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container-data">
|
||||
<div class="app-container-title">运营看板
|
||||
<el-radio-group v-model="dateRadio" @change="changeDateRadio" size="small" style="float: right;">
|
||||
<el-radio-button label="周" :value="1" />
|
||||
<el-radio-button label="月" :value="2" />
|
||||
<el-radio-button label="年" :value="3" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="app-container-data-left">
|
||||
<div class="app-container-data-left-top">
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/money.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>销售总额(元)</div>
|
||||
<div class="app-container customer-control">
|
||||
<div style="overflow-y: auto;overflow-x: hidden; height: 100%;">
|
||||
<div class="app-container-data" ref="chartContainer">
|
||||
<div class="app-container-title">运营看板
|
||||
<el-radio-group v-model="dateRadio" @change="changeDateRadio" size="small" style="float: right;">
|
||||
<el-radio-button label="周" :value="1" />
|
||||
<el-radio-button label="月" :value="2" />
|
||||
<el-radio-button label="年" :value="3" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="app-container-data-left">
|
||||
<div class="app-container-data-left-top">
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/money.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>销售总额(元)</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.salesTotalAmount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/order.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>订单总数(单)</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.orderTotalNum }}</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.salesTotalAmount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/order.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>订单总数(单)</div>
|
||||
<div class="app-container-data-left-bottom">
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/views.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>浏览量(次)</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.viewCount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/money1.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>成功退款金额(元)</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.refundSuccessAmout }}</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.orderTotalNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-container-data-left-bottom">
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/views.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>浏览量(次)</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.viewCount }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
<img
|
||||
class="title-image"
|
||||
src="../../assets/images/money1.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>成功退款金额(元)</div>
|
||||
</div>
|
||||
<div class="number">{{ topLeftData.refundSuccessAmout }}</div>
|
||||
</div>
|
||||
<div class="app-container-data-right">
|
||||
<div ref="chartRef" style="width: 100%; height: 200px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-container-data-right">
|
||||
<div ref="chartRef" style="width: 100%; height: 200px"></div>
|
||||
</div>
|
||||
<!-- 中间模块 -->
|
||||
<div class="app-container-list" ref="middleRef">
|
||||
<div class="app-container-block" v-for="(item,index) in middleData" :key="index">
|
||||
<div class="app-container-block-title">{{ item.title }}
|
||||
<el-popover
|
||||
title=""
|
||||
:content="item.toolTip"
|
||||
placement="left-start"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon color="#c5c5c5" style="float: right;"><QuestionFilled /></el-icon>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="app-container-block-price">
|
||||
{{ item.valueStr??'--' }}
|
||||
<text style="font-size: 12px; color: #999999; margin-left: 5px">
|
||||
{{ item.unit??'' }}
|
||||
</text>
|
||||
</div>
|
||||
<div class="app-container-block-proportion">
|
||||
{{ item.ratioMethod }}：
|
||||
<text :style="{'font-size': '12px',color: item.ratioStatus == '下降'?'red' : 'green'}">
|
||||
<el-icon v-if="item.ratioStatus == '下降'"><CaretBottom /></el-icon>
|
||||
<el-icon v-else><CaretTop /></el-icon>
|
||||
{{ item.ratioValue??'' }}%
|
||||
</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间模块 -->
|
||||
<div class="app-container-list">
|
||||
<div class="app-container-block" v-for="(item,index) in middleData" :key="index">
|
||||
<div class="app-container-block-title">{{ item.title }}
|
||||
<el-popover
|
||||
title=""
|
||||
:content="item.tooltip"
|
||||
placement="left-start"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon color="#c5c5c5" style="float: right;"><QuestionFilled /></el-icon>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="app-container-block-price">
|
||||
{{ item.value }}
|
||||
<text style="font-size: 12px; color: #999999; margin-left: 5px">
|
||||
{{ item.unit }}
|
||||
</text>
|
||||
</div>
|
||||
<div class="app-container-block-proportion">
|
||||
{{ item.ratioMethod }}
|
||||
<text :style="{'font-size': '12px',color: item.ratioStatus == '下降'?'red' : 'green'}">
|
||||
<el-icon v-if="item.ratioStatus == '下降'"><CaretBottom /></el-icon>
|
||||
<el-icon v-else><CaretTop /></el-icon>
|
||||
{{ item.ratioValue }}
|
||||
</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部模块 -->
|
||||
<div class="bottom-flex-box">
|
||||
<div class="bottom-box-item">
|
||||
<div class="bottom-box-item-title">商品销量</div>
|
||||
<div class="bottom-box-item-content">
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-pagination="false"
|
||||
>
|
||||
<!-- 自定义-排名图片 -->
|
||||
<template #ranking="slotProps">
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-if="slotProps.row.ranking == 1">
|
||||
<img :src="img1" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-else-if="slotProps.row.ranking == 2">
|
||||
<img :src="img2" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-else-if="slotProps.row.ranking == 3">
|
||||
<img :src="img3" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
<div v-else>{{ slotProps.row.ranking }}</div>
|
||||
</template>
|
||||
<!-- 底部模块 -->
|
||||
<div class="bottom-flex-box">
|
||||
<div class="bottom-box-item">
|
||||
<div class="bottom-box-item-title">商品销量</div>
|
||||
<div class="bottom-box-item-content" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-pagination="false"
|
||||
:loading="tableLoading"
|
||||
>
|
||||
<!-- 自定义-排名图片 -->
|
||||
<template #ranking="slotProps">
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-if="slotProps.row.ranking == 1">
|
||||
<img :src="img1" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-else-if="slotProps.row.ranking == 2">
|
||||
<img :src="img2" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-else-if="slotProps.row.ranking == 3">
|
||||
<img :src="img3" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
<div v-else>{{ slotProps.row.ranking }}</div>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-商品图片 -->
|
||||
<template #goodUrl="slotProps">
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;">
|
||||
<img :src="slotProps.row.goodUrl" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
</tableComponent>
|
||||
<!-- 自定义-商品图片 -->
|
||||
<template #goodUrl="slotProps">
|
||||
<div class="table-cell-img-box" style="width: 40px;height: 40px;">
|
||||
<img :src="slotProps.row.goodUrl" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-item">
|
||||
<div class="bottom-box-item-title">售后概况</div>
|
||||
<div class="bottom-box-item-content">
|
||||
<!-- 上 -->
|
||||
<div class="bottom-box-summary" style="margin: 20px 0;">
|
||||
<div class="bottom-box-summary-item">
|
||||
<div class="bottom-box-summary-title">售后订单数量(单)</div>
|
||||
<div class="bottom-box-summary-value">{{ afterSalesData.totalAfterSalesOrders }}</div>
|
||||
<div class="bottom-box-item">
|
||||
<div class="bottom-box-item-title">售后概况</div>
|
||||
<div class="bottom-box-item-content">
|
||||
<!-- 上 -->
|
||||
<div class="bottom-box-summary" style="margin: 20px 0;">
|
||||
<div class="bottom-box-summary-item">
|
||||
<div class="bottom-box-summary-title">售后订单数量(单)</div>
|
||||
<div class="bottom-box-summary-value">{{ afterSalesData.totalAfterSalesOrders }}</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item">
|
||||
<div class="bottom-box-summary-title">退货退款金额(元)</div>
|
||||
<div class="bottom-box-summary-value">{{ afterSalesData.totalRefundAmount }}</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item">
|
||||
<div class="bottom-box-summary-title">退货退款订单数量(单)</div>
|
||||
<div class="bottom-box-summary-value">{{ afterSalesData.totalRefundOrders }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item">
|
||||
<div class="bottom-box-summary-title">仅退款订单数量(单)</div>
|
||||
<div class="bottom-box-summary-value">{{ afterSalesData.totalRefundOrders }}</div>
|
||||
<!-- 下 -->
|
||||
<div class="bottom-box-summary" style="line-height: 30px;margin: 0;">
|
||||
<div class="bottom-box-summary-item">
|
||||
<img :src="alert" style="width: 30px;height: 30px;" alt="" />
|
||||
<div class="bottom-box-summary-title" style="display: inline-block;vertical-align: middle;margin-left: 8px;">预警商品</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 120px;flex: none;">
|
||||
<div class="bottom-box-summary-title">退款订单量</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 130px;flex: none;">
|
||||
<div class="bottom-box-summary-title">退款金额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item">
|
||||
<div class="bottom-box-summary-title">退货退款订单数量(单)</div>
|
||||
<div class="bottom-box-summary-value">{{ afterSalesData.totalReturnOrders }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下 -->
|
||||
<div class="bottom-box-summary" style="line-height: 30px;margin: 0;">
|
||||
<div class="bottom-box-summary-item" style="width: 45%; ">
|
||||
<img :src="alert" style="width: 30px;height: 30px;" alt="" />
|
||||
<div class="bottom-box-summary-title" style="display: inline-block;vertical-align: middle;margin-left: 8px;">预警商品</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;">
|
||||
<div class="bottom-box-summary-title">退款订单量</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;">
|
||||
<div class="bottom-box-summary-title">退款金额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow-y: auto; height: 200px;">
|
||||
<div class="bottom-box-summary" style="line-height: 40px;margin: 0;"
|
||||
v-for="(item, index) in afterSalesData.data" :key="index">
|
||||
<div class="bottom-box-summary-item" style="width: 30%; display: flex;">
|
||||
<img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" />
|
||||
<div class="bottom-box-summary-title text-ellipsis" style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" title="耿马西红柿耿马西红柿耿马西红柿耿马西红柿">
|
||||
{{ item.goodInfo }}
|
||||
<div ref="warningGoodsRef" style="overflow-y: auto; height: 150px;" :style="{ height: tableViewportHeight -150 + 'px' }">
|
||||
<div class="bottom-box-summary" style="line-height: 40px;margin: 0;"
|
||||
v-for="(item, index) in afterSalesData.warningProductInfos" :key="index">
|
||||
<div class="bottom-box-summary-item" style="display: flex;">
|
||||
<img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" />
|
||||
<div class="bottom-box-summary-title text-ellipsis" style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" :title="item.goodName">
|
||||
{{ item.goodName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 120px;flex: none;">
|
||||
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}单</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 120px;flex: none;">
|
||||
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;">
|
||||
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}</div>
|
||||
</div>
|
||||
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;">
|
||||
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -188,13 +190,14 @@ import { onMounted, ref, onBeforeUnmount } from "vue";
|
||||
import Mock from "mockjs";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { getAstsTransTotals, getEchartsData, getMidleInfo, getGoodsSalesInfo, getAfterSalesData } from "@/api/trade/dataBoard";
|
||||
|
||||
import img1 from "@/assets/images/first.png";
|
||||
import img2 from "@/assets/images/second.png";
|
||||
import img3 from "@/assets/images/third.png";
|
||||
import alert from "@/assets/images/alert.png";
|
||||
let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png");
|
||||
|
||||
import bottomLefttableData from "./bottomLeft.json"
|
||||
|
||||
// 图表 DOM 引用
|
||||
const chartRef = ref(null);
|
||||
@ -524,14 +527,7 @@ const initChart = () => {
|
||||
window.addEventListener('resize', resizeChart);
|
||||
}
|
||||
};
|
||||
// 组件卸载前销毁图表
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 调整图表大小
|
||||
const resizeChart = () => {
|
||||
if (chartInstance) {
|
||||
@ -541,17 +537,18 @@ const resizeChart = () => {
|
||||
// 加载数据-图表模块
|
||||
const loadEchartsData = async () => {
|
||||
try {
|
||||
let response = await getGoodManageInfo({
|
||||
let response = await getEchartsData({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value
|
||||
queryEndTime: endDate.value,
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
option.xAxis[0].data = response.data.xData;
|
||||
option.series[0].data = response.data.totalSalesData;
|
||||
option.series[1].data = response.data.totalOrdersData;
|
||||
option.series[2].data = response.data.pageViewData;
|
||||
option.series[3].data = response.data.refundAmountData;
|
||||
option.xAxis[0].data = response.data?.xData ?? generateDateArray(7);
|
||||
option.series[0].data = response.data?.totalSalesData;
|
||||
option.series[1].data = response.data?.totalOrdersData;
|
||||
option.series[2].data = response.data?.pageViewData;
|
||||
option.series[3].data = response.data?.refundAmountData;
|
||||
chartInstance.setOption(option);
|
||||
} else {
|
||||
echartsMockData(7);
|
||||
@ -560,7 +557,7 @@ const loadEchartsData = async () => {
|
||||
};
|
||||
const echartsMockData = (count = 7) => {
|
||||
console.log("右上角图表数据更新");
|
||||
const xzData = generateDateArray(count)
|
||||
const xzData = generateDateArray(count);
|
||||
let obj = Mock.mock({
|
||||
// x轴数据 (日期/月份)
|
||||
xData: xzData,
|
||||
@ -616,7 +613,6 @@ const changeDateRadio = (val) => {
|
||||
|
||||
// 调用各个模块的方法更新数据
|
||||
loadTopLeftData();
|
||||
echartsMockData(7); //模拟图表数据
|
||||
// loadEchartsData(); //真实图表数据
|
||||
loadMiddleData();
|
||||
loadbottomLeftData();
|
||||
@ -631,7 +627,7 @@ const changeDateRadio = (val) => {
|
||||
} else if (val == 3) {
|
||||
day = 365;
|
||||
}
|
||||
echartsMockData(day);
|
||||
echartsMockData(day); //模拟图表数据
|
||||
};
|
||||
|
||||
/**
|
||||
@ -679,24 +675,33 @@ function generateDateRange(type) {
|
||||
}
|
||||
|
||||
let topLeftData = ref({});
|
||||
// 加载数据-左上角模块
|
||||
// 加载数据-顶部左侧模块
|
||||
const loadTopLeftData = async () => {
|
||||
console.log('左上角数据更新');
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: '4,541.00', //销售总额
|
||||
orderTotalNum: '45', //订单总数
|
||||
viewCount: '61,151', //浏览量
|
||||
refundSuccessAmout: '541.00', //成功退款金额
|
||||
});
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// if (response.code == 200) {
|
||||
// topLeftData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
try {
|
||||
let response = await getAstsTransTotals({
|
||||
queryStartTime: startDate.value + " 00:00:00",
|
||||
queryEndTime: endDate.value + " 23:59:59",
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
if (response.code == 200) {
|
||||
topLeftData.value = response.data;
|
||||
} else {
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: 0, //销售总额
|
||||
orderTotalNum: 0, //订单总数
|
||||
viewCount: 0, //浏览量
|
||||
refundSuccessAmout: 0, //成功退款金额
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: 0, //销售总额
|
||||
orderTotalNum: 0, //订单总数
|
||||
viewCount: 0, //浏览量
|
||||
refundSuccessAmout: 0, //成功退款金额
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 中间模块
|
||||
@ -709,7 +714,7 @@ const generateMockData = () => {
|
||||
title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])', //标题
|
||||
value: "@float(10, 200, 2, 2)", //数值
|
||||
unit: '@pick(["人", "%", "元", "%", "次"])', //单位
|
||||
tooltip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示
|
||||
toolTip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示
|
||||
ratioMethod: '@pick(["环比", "同比"])', //比率方式
|
||||
ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字
|
||||
ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值
|
||||
@ -724,82 +729,132 @@ const generateMockData = () => {
|
||||
],
|
||||
}).list;
|
||||
};
|
||||
|
||||
// 底部左侧模块
|
||||
const tableData = ref([]);
|
||||
const columns = ref([
|
||||
{ prop: "ranking", label: "排名", slotName: "ranking", width: 66 },
|
||||
{ prop: "goodUrl", label: "商品", slotName: "goodUrl", width: 66 },
|
||||
{ prop: "goodName", label: "商品名称", width: "auto" },
|
||||
{ prop: "stockToUseRatio", label: "存销比" },
|
||||
{ prop: "salesAmount", label: "销售金额" },
|
||||
]);
|
||||
// 底部右侧模块
|
||||
const afterSalesData = ref({});
|
||||
|
||||
|
||||
// 加载数据-中间模块
|
||||
const loadMiddleData = async () => {
|
||||
console.log('中间数据更新');
|
||||
middleData.value = generateMockData();
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// middleData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
// middleData.value = generateMockData();
|
||||
|
||||
try {
|
||||
let response = await getMidleInfo({
|
||||
queryStartTime: startDate.value + " 00:00:00",
|
||||
queryEndTime: endDate.value + " 23:59:59",
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
middleData.value = response.data;
|
||||
} else {
|
||||
middleData.value = [];
|
||||
}
|
||||
} catch (error) { }
|
||||
};
|
||||
|
||||
// 底部左侧模块
|
||||
const tableData = ref([]);
|
||||
let tableLoading = ref(false);
|
||||
const columns = ref([
|
||||
{ prop: "ranking", label: "排名", slotName: "ranking", width: 66 },
|
||||
{ prop: "goodUrl", label: "商品图片", slotName: "goodUrl", width: 80, align: "left" },
|
||||
{ prop: "goodName", label: "商品名称", width: "auto", align: "left" },
|
||||
{ prop: "stockToUseRatio", label: "存销比", width: 70, align: "left" },
|
||||
{ prop: "salesAmount", label: "销售金额", width: 100, align: "left" },
|
||||
]);
|
||||
// 加载数据-底部左侧模块
|
||||
const loadbottomLeftData = async () => {
|
||||
console.log('左下角数据更新');
|
||||
tableData.value = generateMockData();
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
// tableLoading.value = true;
|
||||
// tableData.value = generateMockData();
|
||||
// tableData.value = bottomLefttableData.data;
|
||||
// tableLoading.value = false;
|
||||
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let response = await getGoodsSalesInfo({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value,
|
||||
queryType: dateRadio.value,
|
||||
orderByType: 0 // 0: 按照销售金额排序 2: 按照销售数量排序
|
||||
});
|
||||
tableLoading.value = false;
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data;
|
||||
} else {
|
||||
tableData.value = [];
|
||||
}
|
||||
} catch (error) { }
|
||||
};
|
||||
|
||||
// 底部右侧模块
|
||||
const afterSalesData = ref({});
|
||||
// 加载数据-底部右侧模块
|
||||
const loadbottomRightData = async () => {
|
||||
console.log('右下角数据更新');
|
||||
afterSalesData.value = {
|
||||
totalAfterSalesOrders: 1128,
|
||||
totalRefundOrders: 265,
|
||||
totalReturnOrders: 129,
|
||||
data: [
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "25单", refundAmount: '239元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' },
|
||||
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' },
|
||||
],
|
||||
};
|
||||
// try {
|
||||
// let response = await getGoodManageInfo({
|
||||
// queryStartTime: startDate.value,
|
||||
// queryEndTime: endDate.value
|
||||
// });
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
// afterSalesData.value = {
|
||||
// totalAfterSalesOrders: 1128,
|
||||
// totalRefundAmount: 265,
|
||||
// totalRefundOrders: 129,
|
||||
// warningProductInfos: [
|
||||
// { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
|
||||
// { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' },
|
||||
// { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' },
|
||||
// { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '239元' },
|
||||
// { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' },
|
||||
// { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' },
|
||||
// ],
|
||||
// };
|
||||
|
||||
try {
|
||||
let response = await getAfterSalesData({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value,
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
afterSalesData.value = response.data;
|
||||
}
|
||||
} catch (error) { }
|
||||
};
|
||||
|
||||
|
||||
const chartContainer = ref(null);
|
||||
const middleRef = ref(null);
|
||||
const warningGoodsRef = ref(null);
|
||||
const tableViewportHeight = ref(0);
|
||||
// 精确计算可用高度
|
||||
const calculateTableHeight = () => {
|
||||
// 获取窗口总高度
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// 获取各组件高度
|
||||
const chartContainerHeight = chartContainer.value?.offsetHeight || 0;
|
||||
const middleRefHeight = middleRef.value?.offsetHeight || 0;
|
||||
|
||||
// 计算容器内边距补偿（根据实际样式调整）
|
||||
const paddingCompensation = 306;
|
||||
|
||||
// 最终计算
|
||||
const height = windowHeight - chartContainerHeight - middleRefHeight - paddingCompensation;
|
||||
tableViewportHeight.value = height < 300 ? 300 : height;
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
await initChart();
|
||||
changeDateRadio(1);
|
||||
await nextTick();
|
||||
calculateTableHeight();
|
||||
console.log(tableViewportHeight.value);
|
||||
window.addEventListener("resize", calculateTableHeight);
|
||||
});
|
||||
// 组件卸载前销毁图表
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', calculateTableHeight);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -902,13 +957,17 @@ onMounted(async() => {
|
||||
font-weight: bold;
|
||||
}
|
||||
.bottom-box-item-content {
|
||||
height: 350px;
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
.bottom-box-summary {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
.bottom-box-summary-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
.bottom-box-summary-title {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
@ -921,15 +980,6 @@ onMounted(async() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-table-container {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-ellipsis {
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
width: 100%; /* 必须设置宽度 */
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user