|
@@ -16,10 +16,12 @@
|
|
<li>上次登录地址:<span>日本-我孙子市</span></li>
|
|
<li>上次登录地址:<span>日本-我孙子市</span></li>
|
|
</ul>
|
|
</ul>
|
|
</el-card>
|
|
</el-card>
|
|
|
|
+
|
|
|
|
+
|
|
<el-card class="table" shadow="always">
|
|
<el-card class="table" shadow="always">
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
|
|
|
+ <el-table :data="todayData" style="width: 100%">
|
|
<el-table-column
|
|
<el-table-column
|
|
- v-for="(val, key) in label"
|
|
|
|
|
|
+ v-for="(val, key) in labelToday"
|
|
:key="key"
|
|
:key="key"
|
|
:prop="key"
|
|
:prop="key"
|
|
:label="val"
|
|
:label="val"
|
|
@@ -27,6 +29,8 @@
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</el-card>
|
|
</el-card>
|
|
|
|
+
|
|
|
|
+
|
|
</el-col>
|
|
</el-col>
|
|
<!-- -->
|
|
<!-- -->
|
|
<el-col :span="16">
|
|
<el-col :span="16">
|
|
@@ -71,68 +75,13 @@ import * as echarts from "echarts";
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- label: {
|
|
|
|
- name: "品牌",
|
|
|
|
- todayBuy: "今日购买",
|
|
|
|
- monthBuy: "本月购买",
|
|
|
|
- totalBuy: "总购买",
|
|
|
|
|
|
+ labelToday:{
|
|
|
|
+ productName:"商品名称",
|
|
|
|
+ productTypeName:"商品类型",
|
|
|
|
+ count: "销量",
|
|
|
|
+ amount: "今日金额",
|
|
},
|
|
},
|
|
- tableData: [
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "巴黎世家",
|
|
|
|
- todayBuy: 1450,
|
|
|
|
- monthBuy: 7500,
|
|
|
|
- totalBuy: 85000,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
|
|
+ todayData:[], // 当天的订单列表
|
|
countData: [
|
|
countData: [
|
|
{
|
|
{
|
|
name: "今日支付订单",
|
|
name: "今日支付订单",
|
|
@@ -174,6 +123,7 @@ export default {
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ this.loadData()
|
|
// 基于准备好的dom,初始化echarts实例
|
|
// 基于准备好的dom,初始化echarts实例
|
|
var bar = echarts.init(document.getElementById("bar"));
|
|
var bar = echarts.init(document.getElementById("bar"));
|
|
var pie = echarts.init(document.getElementById("pie"));
|
|
var pie = echarts.init(document.getElementById("pie"));
|
|
@@ -181,7 +131,7 @@ export default {
|
|
// 绘制图表
|
|
// 绘制图表
|
|
line.setOption({
|
|
line.setOption({
|
|
title: {
|
|
title: {
|
|
- text: "一些数据",
|
|
|
|
|
|
+ text: "店铺营销额",
|
|
// subtext: 'Demo 虚构数据',
|
|
// subtext: 'Demo 虚构数据',
|
|
x: "center",
|
|
x: "center",
|
|
},
|
|
},
|
|
@@ -216,7 +166,12 @@ export default {
|
|
// 右上角的工具框
|
|
// 右上角的工具框
|
|
feature: {
|
|
feature: {
|
|
saveAsImage: {}, //下载按钮
|
|
saveAsImage: {}, //下载按钮
|
|
- },
|
|
|
|
|
|
+ dataView:{},//数据视图
|
|
|
|
+ dataZoom:{},//区域缩放
|
|
|
|
+ magicType:{
|
|
|
|
+ type:['bar','line']
|
|
|
|
+ }//动态图标切换
|
|
|
|
+ }
|
|
},
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
xAxis: {
|
|
@@ -266,7 +221,7 @@ export default {
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: "猜想",
|
|
name: "猜想",
|
|
- data: [454, 226, 891, 978, 901, 581, 400, 543, 272, 955, 1294, 1581],
|
|
|
|
|
|
+ data: this.randomList(120,1200,12),
|
|
type: "line",
|
|
type: "line",
|
|
symbolSize: function (value) {
|
|
symbolSize: function (value) {
|
|
// 点的大小跟随数值增加而变大
|
|
// 点的大小跟随数值增加而变大
|
|
@@ -287,10 +242,7 @@ export default {
|
|
|
|
|
|
{
|
|
{
|
|
name: "预期",
|
|
name: "预期",
|
|
- data: [
|
|
|
|
- 2455, 2534, 2360, 2301, 2861, 2181, 1944, 2197, 1745, 1810, 2283,
|
|
|
|
- 2298,
|
|
|
|
- ],
|
|
|
|
|
|
+ data: this.randomList(120,1200,12),
|
|
type: "line",
|
|
type: "line",
|
|
symbolSize: 8, //设置折线上圆点大小
|
|
symbolSize: 8, //设置折线上圆点大小
|
|
itemStyle: {
|
|
itemStyle: {
|
|
@@ -308,10 +260,7 @@ export default {
|
|
|
|
|
|
{
|
|
{
|
|
name: "实际",
|
|
name: "实际",
|
|
- data: [
|
|
|
|
- 1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 3170,
|
|
|
|
- 3665,
|
|
|
|
- ],
|
|
|
|
|
|
+ data: this.randomList(120,1200,12),
|
|
type: "line",
|
|
type: "line",
|
|
symbol: "circle", // 实心圆点
|
|
symbol: "circle", // 实心圆点
|
|
smooth: 0.5, // 设置折线弧度
|
|
smooth: 0.5, // 设置折线弧度
|
|
@@ -319,6 +268,7 @@ export default {
|
|
],
|
|
],
|
|
color: ["#3366CC", "#FFCC99", "#99CC33"], // 三个折线的颜色
|
|
color: ["#3366CC", "#FFCC99", "#99CC33"], // 三个折线的颜色
|
|
});
|
|
});
|
|
|
|
+ // 饼图配置
|
|
pie.setOption({
|
|
pie.setOption({
|
|
title: {
|
|
title: {
|
|
left: "center",
|
|
left: "center",
|
|
@@ -330,6 +280,8 @@ export default {
|
|
toolbox: {
|
|
toolbox: {
|
|
feature: {
|
|
feature: {
|
|
saveAsImage: {},
|
|
saveAsImage: {},
|
|
|
|
+ dataView:{},//数据视图
|
|
|
|
+
|
|
},
|
|
},
|
|
},
|
|
},
|
|
tooltip: {},
|
|
tooltip: {},
|
|
@@ -361,6 +313,7 @@ export default {
|
|
},
|
|
},
|
|
],
|
|
],
|
|
});
|
|
});
|
|
|
|
+ // 条形统计图
|
|
bar.setOption({
|
|
bar.setOption({
|
|
title: {
|
|
title: {
|
|
text: "本月售卖情况",
|
|
text: "本月售卖情况",
|
|
@@ -381,6 +334,10 @@ export default {
|
|
toolbox: {
|
|
toolbox: {
|
|
feature: {
|
|
feature: {
|
|
saveAsImage: {},
|
|
saveAsImage: {},
|
|
|
|
+ dataView:{},//数据视图
|
|
|
|
+ magicType:{
|
|
|
|
+ type:['bar','line']
|
|
|
|
+ }//动态图标切换
|
|
},
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
@@ -403,6 +360,51 @@ export default {
|
|
pie.resize();
|
|
pie.resize();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ methods:{
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 数据加载
|
|
|
|
+ */
|
|
|
|
+ loadData(){
|
|
|
|
+ const that = this
|
|
|
|
+
|
|
|
|
+ async function f1(){
|
|
|
|
+ that.todayData = await that.loadAccountByBatch([1,2],"2024-01-01","2024-05-03")
|
|
|
|
+ }
|
|
|
|
+ f1();
|
|
|
|
+ },
|
|
|
|
+ async loadAccountByPId(productId){
|
|
|
|
+ const res = await this.$request.get("/saleStatement/getByPId",{
|
|
|
|
+ params:{
|
|
|
|
+ productIds:1,
|
|
|
|
+ timeStart: "2024-04-28",
|
|
|
|
+ timeOver: "2024-05-03"
|
|
|
|
+ }})
|
|
|
|
+ // this.$message(res.data[0].count + "")
|
|
|
|
+ },
|
|
|
|
+ async loadAccountByBatch( list,from,end){
|
|
|
|
+ console.log("1")
|
|
|
|
+ const res = await this.$request.post("/saleStatement/getByPIdBatch",{
|
|
|
|
+ productIds:list,
|
|
|
|
+ timeStart: from,
|
|
|
|
+ timeOver: end
|
|
|
|
+ })
|
|
|
|
+ return res.data;
|
|
|
|
+ },
|
|
|
|
+ /** 随机left ~ right 范围内的数字 @param left @param right @returns {*} */
|
|
|
|
+ randomRange(left,right){
|
|
|
|
+ const floor = Math.floor(right-left);
|
|
|
|
+ const rand = Math.random()*(floor)
|
|
|
|
+ return left + Math.floor(rand)
|
|
|
|
+ },
|
|
|
|
+ randomList(left,right,nums){
|
|
|
|
+ const res =[];
|
|
|
|
+ for(let i = 0;i<nums;i++)
|
|
|
|
+ res.push(this.randomRange(left,right))
|
|
|
|
+ return res;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|