+
{{ slotProps.row.ranking }}
@@ -151,8 +134,10 @@
-
![]()
-
预警商品
+
![]()
+
+ 预警商品
退款订单量
@@ -161,24 +146,30 @@
退款金额
-
-
-
-
![]()
-
- {{ item.goodName }}
+
+
+ 暂无数据
+
+
+
+
+
![]()
+
+ {{ item.goodName }}
+
+
+
+
{{ item.refundedOrders }}单
+
+
+
{{ item.refundAmount }}元
-
-
{{ item.refundedOrders }}单
-
-
-
{{ item.refundAmount }}元
-
-
+
-
@@ -256,7 +247,7 @@ const option = {
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;',
formatter: function (params) {
let result = params[0].name + '
'; // x轴值(如"1月")
- params.forEach((param,index) => {
+ params.forEach((param, index) => {
// 获取系列颜色(param.color)
const colorDot = `
`;
let unit = "";
- if(param.seriesName == '销售总额') {
+ if (param.seriesName == '销售总额') {
unit = "元";
- } else if(param.seriesName == '订单总数') {
+ } else if (param.seriesName == '订单总数') {
unit = "个";
- } else if(param.seriesName == '浏览量') {
+ } else if (param.seriesName == '浏览量') {
unit = "人次";
- } else if(param.seriesName == '成功退款金额') {
+ } else if (param.seriesName == '成功退款金额') {
unit = "元";
}
result += `${colorDot} ${param.seriesName}: ${param.value} ${unit}
`;
@@ -559,16 +550,16 @@ const echartsMockData = (count = 7) => {
let obj = Mock.mock({
// x轴数据 (日期/月份)
xData: xzData,
-
+
// 总销售额 (500-5000之间的浮点数,保留2位小数)
[`totalSalesData|${count}`]: ['@float(100, 500, 2, 2)'],
-
+
// 总订单数 (1-100之间的整数)
[`totalOrdersData|${count}`]: ['@integer(10, 100)'],
-
+
// 页面浏览量 (1000-10000之间的整数)
[`pageViewData|${count}`]: ['@integer(1000, 10000)'],
-
+
// 退款金额 (1-100之间的浮点数,保留2位小数)
[`refundAmountData|${count}`]: ['@float(10, 100, 2, 2)']
})
@@ -582,14 +573,14 @@ const echartsMockData = (count = 7) => {
const generateDateArray = (count) => {
const result = []
const today = new Date()
-
+
for (let i = count - 1; i >= 0; i--) {
const date = new Date(today)
date.setDate(date.getDate() - i)
-
+
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
-
+
result.push(`${month}-${day}`)
}
return result
@@ -600,26 +591,26 @@ const generateDateArray = (count) => {
let dateRadio = ref(1);
let startDate = ref('');
let endDate = ref('');
-const changeDateRadio = (val) => {
+const changeDateRadio = (val) => {
// val 1 按周 2 按月 3 按年
let date = generateDateRange(val);
startDate.value = date.startDate;
endDate.value = date.endDate;
-
+
// 调用各个模块的方法更新数据
loadTopLeftData();
loadEchartsData(); //真实图表数据
loadMiddleData();
loadbottomLeftData();
loadbottomRightData();
-
+
// 测试图表数据-----------
let day = 7;
- if (val == 1) {
+ if (val == 1) {
day = 7;
- } else if (val == 2) {
+ } else if (val == 2) {
day = 30;
- } else if (val == 3) {
+ } else if (val == 3) {
day = 365;
}
// echartsMockData(day); //模拟图表数据
@@ -637,9 +628,9 @@ function generateDateRange(type) {
const endDate = new Date(today);
// 初始化开始日期为今天的日期
let startDate = new Date(today);
-
+
// 根据不同类型计算开始日期
- switch(type) {
+ switch (type) {
case 1: // 周
startDate.setDate(today.getDate() - 6); // 7天包括今天
break;
@@ -653,7 +644,7 @@ function generateDateRange(type) {
// 抛出异常,提示参数类型无效
throw new Error('无效的参数类型,请输入1(周)、2(月)或3(年)');
}
-
+
// 格式化日期为YYYY-MM-DD
const formatDate = (date) => {
const year = date.getFullYear();
@@ -661,7 +652,7 @@ function generateDateRange(type) {
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
-
+
// 返回计算出的日期范围
return {
startDate: formatDate(startDate),
@@ -670,7 +661,7 @@ function generateDateRange(type) {
}
let topLeftData = ref({});
-const initTopLeftData = () => {
+const initTopLeftData = () => {
topLeftData.value = Object.assign({}, {
salesTotalAmount: 0, //销售总额
orderTotalNum: 0, //订单总数
@@ -772,12 +763,20 @@ const loadbottomLeftData = async () => {
} else {
tableData.value = [];
}
- } catch (error) {
+ } catch (error) {
tableLoading.value = false;
}
};
-const afterSalesData = ref({});
+const afterSalesData = ref({
+ totalAfterSalesOrders: 0, //售后订单总数
+ totalRefundAmount: 0, //售后退款金额
+ totalRefundOrders: 0, //售后订单总数
+ warningProductInfos: [
+ // 售后商品信息
+ // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
+ ],
+});
// 加载数据-底部右侧模块
const loadbottomRightData = async () => {
// console.log('右下角数据更新');
@@ -829,7 +828,7 @@ const calculateTableHeight = () => {
tableViewportHeight.value = height < 300 ? 300 : height;
};
-onMounted(async() => {
+onMounted(async () => {
initTopLeftData
await initChart();
changeDateRadio(1);
@@ -856,11 +855,13 @@ onBeforeUnmount(() => {
font-size: 18px;
color: #999999;
}
+
.title-image {
margin-right: 10px;
width: 38px;
height: 38px;
}
+
.number {
margin-right: 100px;
margin-top: 16px;
@@ -868,6 +869,7 @@ onBeforeUnmount(() => {
font-weight: bold;
color: #000000;
}
+
.app-container-list {
margin-top: 20px;
display: flex;
@@ -875,66 +877,84 @@ onBeforeUnmount(() => {
justify-content: space-between;
gap: 20px;
}
+
.app-container-title {
margin-bottom: 20px;
padding-right: 10px;
font-size: 20px;
font-weight: bold;
}
+
.app-container-data {
border-radius: 10px;
padding: 20px 10px 20px 20px;
width: 100%;
background-color: #fff;
+
.app-container-data-left {
width: 500px;
+
.app-container-data-left-top {
display: flex;
}
+
.app-container-data-left-bottom {
margin-top: 40px;
display: flex;
}
}
+
.app-container-data-right {
flex: 1;
}
}
+
.app-container-block {
flex: 1;
background-color: #fff;
border-radius: 10px;
padding: 10px 10px 10px 14px;
+
.app-container-block-title {
font-size: 18px;
font-weight: bold;
}
+
.app-container-block-price {
font-size: 18px;
color: #42b983;
font-weight: bold;
margin: 10px 0;
}
+
.app-container-block-proportion {
font-size: 12px;
+
.el-icon {
vertical-align: text-top;
}
}
+
:deep(.el-popper.tooltip-box-item) {
- max-width: 200px; /* 限制最大宽度 */
- word-break: break-word; /* 长单词或URL换行 */
- white-space: normal !important; /* 覆盖默认的 nowrap */
+ max-width: 200px;
+ /* 限制最大宽度 */
+ word-break: break-word;
+ /* 长单词或URL换行 */
+ white-space: normal !important;
+ /* 覆盖默认的 nowrap */
}
+
.tooltip-box-item {
width: 200px !important;
}
}
+
.bottom-flex-box {
margin-top: 20px;
display: flex;
justify-content: space-between;
gap: 20px;
+
.bottom-box-item {
flex: 1;
width: 50%;
@@ -942,27 +962,33 @@ onBeforeUnmount(() => {
border-radius: 10px;
padding: 20px 20px 0px 20px;
}
+
.bottom-box-item-title {
font-size: 18px;
font-weight: bold;
}
+
.bottom-box-item-content {
height: 300px;
min-height: 300px;
+
.bottom-box-summary {
display: flex;
margin: 10px 0;
gap: 20px;
- width: 100%;
+ width: 100%;
+
.bottom-box-summary-item {
flex: 1;
min-width: 0;
overflow: hidden;
+
.bottom-box-summary-title {
font-size: 16px;
color: #999;
margin-bottom: 16px;
}
+
.bottom-box-summary-value {
font-size: 20px;
color: #000;