Web/operation-system
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Web:b06e15f4902251dd7c1927ba661b14bf33b3cccb
Branches Tags
Web:main
..
compare: Web:4520ea7bda4e1ca110decef3b7a3240bd3290c6e
Branches Tags
Web:main

No commits in common. "b06e15f4902251dd7c1927ba661b14bf33b3cccb" and "4520ea7bda4e1ca110decef3b7a3240bd3290c6e" have entirely different histories.
b06e15f490 ... 4520ea7bda

7 changed files with 69 additions and 260 deletions
Show Stats Expand all files Collapse all files

1
src/assets/styles/custom.scss
View File

@ -237,7 +237,6 @@
.table-cell-img-box {
width: 60px;
height: 60px;
text-align: center;
overflow: hidden; /* 隐藏超出部分 */
display: flex; /* 使用 Flex 布局居中 */
justify-content: center;

2
src/components/tableComponent.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="custom-table-container">
<div class="custom-table-tool" v-if="showPagination">
<div class="custom-table-tool">
<el-form :inline="true" class="demo-form-inline" :label-width="'auto'">
<el-form-item label="每页显示" style="margin-bottom: 10px">
<el-select

2
src/router/index.js
View File

@ -317,7 +317,7 @@ export const constantRoutes = [
name: 'dataBoard',
hidden: false,
meta: {
title: "交易分析",
title: "电商数据看板",
icon: "",
noCache: false,
link: null,

6
src/views/goods/goodsManage/addGoods.vue
View File

@ -149,7 +149,7 @@
</div>
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
<div class="attr-input">{{ item.name }}</div>
<el-input v-model="item.value" class="attr-input" placeholder="请输入属性内容"/>
<el-input v-model="item.value" class="attr-input" />
</div>
</div>
</el-form-item>
@ -197,9 +197,6 @@
<myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
</div>
</el-form-item>
<el-form-item label="商品描述" prop="describeContent">
<el-input v-model="formInline.describeContent" style="width: 400px;" :rows="2" type="textarea" clearable placeholder="请输入商品描述" />
</el-form-item>
<!-- 商品视频 -->
<el-form-item label="商品视频" prop="videoUrl">
<div>
@ -283,7 +280,6 @@ const formInline = reactive({
]
}, //优惠折扣
detailUrl: "",
describeContent: "",
brandId: "",
traceCode: "",
videoUrl: "",

6
src/views/goods/goodsManage/editGoods.vue
View File

@ -145,7 +145,7 @@
</div>
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
<div class="attr-input">{{ item.name }}</div>
<el-input v-model="item.value" class="attr-input" placeholder="请输入属性内容" />
<el-input v-model="item.value" class="attr-input" />
</div>
</div>
</el-form-item>
@ -194,9 +194,6 @@
<myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
</div>
</el-form-item>
<el-form-item label="商品描述" prop="describeContent">
<el-input v-model="formInline.describeContent" style="width: 400px;" :rows="2" type="textarea" clearable placeholder="请输入商品描述" />
</el-form-item>
<!-- 商品视频 -->
<el-form-item label="商品视频" prop="videoUrl">
<div>
@ -283,7 +280,6 @@ const formInline = reactive({
]
}, //优惠折扣
detailUrl: "",
describeContent: "",
brandId: "",
traceCode: "",
videoUrl: "",

6
src/views/goods/goodsManage/seeDetails.vue
View File

@ -150,7 +150,7 @@
</div>
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
<div class="attr-input">{{ item.name }}</div>
<el-input v-model="item.value" class="attr-input" placeholder="请输入属性内容" />
<el-input v-model="item.value" class="attr-input" />
</div>
</div>
</el-form-item>
@ -200,9 +200,6 @@
<img v-for="(item, index) in formInline.detailUrl.split(',')" :key="index" style="width: 100px;margin-right: 5px;" :src="item" alt="">
</div>
</el-form-item>
<el-form-item label="商品描述" prop="describeContent">
<el-input v-model="formInline.describeContent" style="width: 400px;" :rows="2" type="textarea" clearable placeholder="请输入商品描述" />
</el-form-item>
<!-- 商品视频 -->
<el-form-item label="商品视频" prop="videoUrl" v-if="formInline.videoUrl">
<div>
@ -291,7 +288,6 @@ const formInline = reactive({
]
}, //优惠折扣
detailUrl: "",
describeContent: "",
brandId: "",
traceCode: "",
videoUrl: "",

306
src/views/trade/dataBoard.vue
View File

@ -58,135 +58,79 @@
</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">
<div class="app-container-block-title">销售总额</div>
<div class="app-container-block-price">
{{ item.value }}
<text style="font-size: 12px; color: #999999; margin-left: 5px">
{{ item.unit }}
</text>
15698<text style="font-size: 10px; color: #999999; margin-left: 10px"
>元</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>
环比：<text style="color: red; font-size: 12px">↓2.6%</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"
<div class="app-container-block">
<div class="app-container-block-title">订单总数</div>
<div class="app-container-block-price">
52<text style="font-size: 10px; color: #999999; margin-left: 10px"
>单</text
>
<!-- 自定义-排名图片 -->
<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>
</div>
<div class="app-container-block-proportion">
环比：<text style="color: red; font-size: 12px">↓2.6%</text>
</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>
<div class="bottom-box-summary-item">
<div class="bottom-box-summary-title">仅退款订单数量(单)</div>
<div class="bottom-box-summary-value">{{ afterSalesData.totalRefundOrders }}</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 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>
</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 class="app-container-block">
<div class="app-container-block-title">支付转化率</div>
<div class="app-container-block-price">
16.56<text style="font-size: 10px; color: #999999; margin-left: 10px"
>%</text
>
</div>
<div class="app-container-block-proportion">
环比：<text style="color: red; font-size: 12px">↓2.6%</text>
</div>
</div>
<div class="app-container-block">
<div class="app-container-block-title">客单价</div>
<div class="app-container-block-price">
12.33<text style="font-size: 10px; color: #999999; margin-left: 10px"
>元</text
>
</div>
<div class="app-container-block-proportion">
环比：<text style="color: red; font-size: 12px">↓2.6%</text>
</div>
</div>
<div class="app-container-block">
<div class="app-container-block-title">成功退款金额</div>
<div class="app-container-block-price">
152.5<text style="font-size: 10px; color: #999999; margin-left: 10px"
>元</text
>
</div>
<div class="app-container-block-proportion">
环比：<text style="color: red; font-size: 12px">↓2.6%</text>
</div>
</div>
<div class="app-container-block">
<div class="app-container-block-title">浏览量</div>
<div class="app-container-block-price">
156988<text style="font-size: 10px; color: #999999; margin-left: 10px"
>次</text
>
</div>
<div class="app-container-block-proportion">
环比：<text style="color: red; font-size: 12px">↓2.6%</text>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import Mock from "mockjs";
import tableComponent from "@/components/tableComponent.vue";
import * as echarts from "echarts";
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");
// 图表 DOM 引用
const chartRef = ref(null);
// ECharts 实例
@ -194,7 +138,7 @@ let chartInstance = null;
// 颜色列表
const colorList = ['#3685FE', '#FFD500', '#25BF82'];
// x轴数据
const xData = ['1日', '2月', '3月', '4月', '5月', '6月', '7月'];
const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];
// 图表配置
const option = {
@ -206,12 +150,12 @@ const option = {
fontWeight: 400,
},
left: 'center',
top: '0%',
top: '5%',
},
legend: {
icon: 'circle',
top: '0',
right: '30%',
right: '5%',
itemWidth: 6,
itemGap: 20,
textStyle: {
@ -258,9 +202,6 @@ const option = {
},
grid: {
top: '20%',
left: 20,
right: 20,
bottom: 30, // 底部留白给图例
},
xAxis: [
{
@ -515,72 +456,8 @@ const resizeChart = () => {
chartInstance.resize();
}
};
// 中间模块
const middleData = ref([]);
const generateMockData = () => {
return Mock.mock({
"list|5": [
{ // 中间模块数据
"id|+1": 10000,
title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])',
value: "@float(10, 200, 2, 2)",
unit: '@pick(["人", "%", "元", "%", "次"])',
tooltip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])',
ratioMethod: '@pick(["环比", "同比"])', //比率方式
ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字
ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值
// 底部左侧数据
"ranking|+1": 1, //排名
goodUrl: tomato.value,
goodName: "@cname",
stockToUseRatio: "@float(10, 200, 2, 2)" + "%", //存销比
salesAmount: "@integer(1000, 20000)" + "元", //销售金额
},
],
}).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({
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: '1128元' },
],
});
// 加载数据
const loadMiddleData = async () => {
middleData.value = generateMockData();
tableData.value = generateMockData();
console.log(tableData.value);
// try {
// let response = await getGoodManageInfo(prams);
// if (response.code == 200) {
// middleData.value = response.data.records;
// middleData.value = response.data.total;
// }
// } catch (error) { }
};
onMounted(() => {
initChart();
loadMiddleData();
});
</script>
<style lang="scss" scoped>
@ -608,8 +485,7 @@ onMounted(() => {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
justify-content: flex-start;
}
.app-container-title {
margin-bottom: 20px;
@ -618,7 +494,7 @@ onMounted(() => {
}
.app-container-data {
border-radius: 10px;
padding: 20px 10px 20px 20px;
padding: 20px;
width: 100%;
background-color: #fff;
.app-container-data-left {
@ -636,10 +512,11 @@ onMounted(() => {
}
}
.app-container-block {
flex: 1;
width: 250px;
background-color: #fff;
border-radius: 10px;
padding: 10px 10px 10px 14px;
padding: 10px;
margin-left: 26px;
.app-container-block-title {
font-size: 18px;
font-weight: bold;
@ -652,61 +529,6 @@ onMounted(() => {
}
.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 */
}
.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%;
background-color: #fff;
border-radius: 10px;
padding: 20px 20px 20px 20px;
}
.bottom-box-item-title {
font-size: 18px;
font-weight: bold;
}
.bottom-box-item-content {
height: 350px;
.bottom-box-summary {
display: flex;
margin: 10px 0;
gap: 20px;
.bottom-box-summary-item {
flex: 1;
.bottom-box-summary-title {
font-size: 16px;
color: #999;
margin-bottom: 16px;
}
.bottom-box-summary-value {
font-size: 20px;
color: #000;
font-weight: bold;
}
}
}
}
}
.text-ellipsis {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
width: 100%; /* 必须设置宽度 */
}
</style>