|
@@ -190,6 +190,41 @@
|
|
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
|
|
<view class="qiun-title-dot-light">数据概况</view>
|
|
|
</view>
|
|
|
+ <!-- 产品销售数量走势 -->
|
|
|
+ <view class="echarts shopsell">
|
|
|
+ <view class="title">
|
|
|
+ <view class="left">
|
|
|
+ <text class="future">产品销售数量走势:<text class="num">0</text>
|
|
|
+ <text class="yesterday">昨日全天:<text class="daynum">0</text></text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="today-icon"></view><text class="title">今日</text>
|
|
|
+ <view class="yesterday-icon"></view><text class="title">昨日</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="qiun-charts">
|
|
|
+ <canvas canvas-id="shopsellEcharts" id="shopsellEcharts" class="shopsellEcharts" disable-scroll=true @touchend="shopSellEndTouch"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 产品销售金额走势 -->
|
|
|
+ <view class="echarts shopmoney">
|
|
|
+ <view class="title">
|
|
|
+ <view class="left">
|
|
|
+ <text class="future">产品销售金额走势:<text class="num">0</text>
|
|
|
+ <text class="yesterday">昨日全天:<text class="daynum">0</text></text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="today-icon"></view><text class="title">今日</text>
|
|
|
+ <view class="yesterday-icon"></view><text class="title">昨日</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="qiun-charts">
|
|
|
+ <canvas canvas-id="shopmoneyEcharts" id="shopmoneyEcharts" class="shopmoneyEcharts" @touchstart="shopMoneyTouch"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 未来7天预定 -->
|
|
|
<view class="echarts">
|
|
|
<view class="title">
|
|
|
<view class="left">
|
|
@@ -199,7 +234,6 @@
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="today-icon"></view><text class="title">今日</text>
|
|
|
- <view class="yesterday-icon"></view><text class="title">昨日</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="qiun-charts">
|
|
@@ -234,6 +268,8 @@ import moment from '@/common/moment';
|
|
|
let _self;
|
|
|
let canvaLineA = null;
|
|
|
let canvaPie = null;
|
|
|
+let shopSellLine = null;
|
|
|
+let shopMoneyLine = null;
|
|
|
export default {
|
|
|
name: 'Header',
|
|
|
data() {
|
|
@@ -242,8 +278,22 @@ export default {
|
|
|
shopArray: [{ name: '全部', id: 0 }],
|
|
|
shopID: 0,
|
|
|
index: 0,
|
|
|
+ // 商品销售走势
|
|
|
+ shopwidth: '',
|
|
|
+ shopheight: '',
|
|
|
+
|
|
|
+ // 销售金额走势
|
|
|
+ moneywidth: '',
|
|
|
+ moneyheight: '',
|
|
|
+
|
|
|
+ // 未来七天
|
|
|
cWidth: '',
|
|
|
cHeight: '',
|
|
|
+
|
|
|
+ // 饼图数据
|
|
|
+ bWidth: '',
|
|
|
+ bHeight: '',
|
|
|
+
|
|
|
pixelRatio: 1, // 像素比
|
|
|
ordernum: null, // 订单号
|
|
|
today: moment().format('YYYY-MM-DD'),
|
|
@@ -278,10 +328,6 @@ export default {
|
|
|
payorder: 0,
|
|
|
refund: 0,
|
|
|
},
|
|
|
-
|
|
|
- // 饼图数据
|
|
|
- bWidth: '',
|
|
|
- bHeight: '',
|
|
|
};
|
|
|
},
|
|
|
// 此处定义传入的数据
|
|
@@ -302,10 +348,12 @@ export default {
|
|
|
this.getShopList();
|
|
|
this.getExponentData();
|
|
|
this.getPendingData();
|
|
|
+ this.shopSellTrend();
|
|
|
+ this.shopSellMoneyTrend();
|
|
|
this.futureDayData();
|
|
|
this.shopSellData();
|
|
|
|
|
|
- this.loading = false
|
|
|
+ this.loading = false;
|
|
|
},
|
|
|
methods: {
|
|
|
// 选择商铺
|
|
@@ -317,13 +365,16 @@ export default {
|
|
|
this.getPendingData();
|
|
|
this.futureDayData();
|
|
|
this.shopSellData();
|
|
|
+ this.shopSellTrend();
|
|
|
+ this.shopSellMoneyTrend();
|
|
|
},
|
|
|
+
|
|
|
// 跳转设置页
|
|
|
tosetting() {
|
|
|
this.$mRouter.push({ route: '/pages/index/setting/setting' });
|
|
|
},
|
|
|
|
|
|
- // 获取店铺列表h
|
|
|
+ // 获取店铺列表
|
|
|
async getShopList() {
|
|
|
await this.$http.get('/homePage/getShopByMerId').then((res) => {
|
|
|
if (res.data && res.code === 200) {
|
|
@@ -408,6 +459,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 扫码订单
|
|
|
scanCode() {
|
|
|
// 允许从相机和相册扫码
|
|
@@ -418,6 +470,7 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 搜索订单
|
|
|
searchOrder() {
|
|
|
// 判断该订单是否兑换,存在等状态,若存在且未使用(两个状态),则跳转订单兑换页面
|
|
@@ -425,6 +478,204 @@ export default {
|
|
|
this.$mRouter.push({ route: '/pages/index/conversion' });
|
|
|
},
|
|
|
|
|
|
+ // 商品销售走势
|
|
|
+ async shopSellTrend() {
|
|
|
+ if (this.shopID === 0) {
|
|
|
+ this.shopI = '';
|
|
|
+ }
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData2', {
|
|
|
+ date: this.today,
|
|
|
+ shopId: this.shopID,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (res.data) {
|
|
|
+ let shopSellData = {
|
|
|
+ xdata: [],
|
|
|
+ jrdata: [],
|
|
|
+ zrdata: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ shopSellData.xdata.push(ele.time);
|
|
|
+ shopSellData.jrdata.push(ele.jr);
|
|
|
+ shopSellData.zrdata.push(ele.zr);
|
|
|
+ });
|
|
|
+ _self.shopSellEcharts('shopsellEcharts', shopSellData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ shopSellEcharts(id, echartsData) {
|
|
|
+ shopSellLine = new uCharts({
|
|
|
+ $this: _self,
|
|
|
+ canvasId: id,
|
|
|
+ type: 'line',
|
|
|
+ fontSize: 12,
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ dataLabel: true,
|
|
|
+ duration: 500,
|
|
|
+ dataPointShape: false, // 折点
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: _self.pixelRatio,
|
|
|
+ categories: echartsData.xdata, // x轴数据
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ textColor:'#ffcc01',
|
|
|
+ color: '#ffcc01',
|
|
|
+ data: echartsData.jrdata,
|
|
|
+ name: '今日',
|
|
|
+ pointShape: 'circle',
|
|
|
+ show: true,
|
|
|
+ type: 'line',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: '#7d66f3',
|
|
|
+ textColor:'#7d66f3',
|
|
|
+ data: echartsData.zrdata,
|
|
|
+ name: '昨日',
|
|
|
+ pointShape: 'circle',
|
|
|
+ show: true,
|
|
|
+ type: 'line',
|
|
|
+ },
|
|
|
+ ], // 值
|
|
|
+ animation: true,
|
|
|
+ // enableScroll: true,
|
|
|
+ xAxis: {
|
|
|
+ type: 'grid',
|
|
|
+ disableGrid: true,
|
|
|
+ labelCount: 7
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ gridType: 'solid',
|
|
|
+ gridColor: '#cccccc',
|
|
|
+ min: 0,
|
|
|
+ max: 180,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ axisLine: false,
|
|
|
+ format: (val) => {
|
|
|
+ return val.toFixed(0);
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ width: _self.cWidth * _self.pixelRatio,
|
|
|
+ height: _self.cHeight * _self.pixelRatio,
|
|
|
+ padding: [15,15,4,15],
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve', // 平滑曲线; straight直线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ shopSellEndTouch(e) {
|
|
|
+ shopSellLine.showToolTip(e, {
|
|
|
+ format: function (item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品销售金额走势
|
|
|
+ async shopSellMoneyTrend() {
|
|
|
+ if (this.shopID === 0) {
|
|
|
+ this.shopI = '';
|
|
|
+ }
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData3', {
|
|
|
+ date: this.today,
|
|
|
+ shopId: this.shopID,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (res.data) {
|
|
|
+ let shopMoney = {
|
|
|
+ xdata: [],
|
|
|
+ jrdata: [],
|
|
|
+ zrdata: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ shopMoney.xdata.push(ele.time);
|
|
|
+ shopMoney.jrdata.push(ele.jr);
|
|
|
+ shopMoney.zrdata.push(ele.zr);
|
|
|
+ });
|
|
|
+ _self.shopMoneyEcharts('shopmoneyEcharts', shopMoney);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ shopMoneyEcharts(id, echartsData) {
|
|
|
+ shopMoneyLine = new uCharts({
|
|
|
+ $this: _self,
|
|
|
+ canvasId: id,
|
|
|
+ type: 'line',
|
|
|
+ fontSize: 12,
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ dataLabel: true, // 图表中是否显示数据
|
|
|
+ duration: 500,
|
|
|
+ dataPointShape: false, // 折点
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: _self.pixelRatio,
|
|
|
+ categories: echartsData.xdata, // x轴数据
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ textColor: '#f79554',
|
|
|
+ color: '#f79554',
|
|
|
+ data: echartsData.jrdata,
|
|
|
+ name: '今日',
|
|
|
+ pointShape: 'circle',
|
|
|
+ show: true,
|
|
|
+ type: 'line',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: '#2ad3a1',
|
|
|
+ textColor: '#2ad3a1',
|
|
|
+ data: echartsData.zrdata,
|
|
|
+ name: '昨日',
|
|
|
+ pointShape: 'circle',
|
|
|
+ show: true,
|
|
|
+ type: 'line',
|
|
|
+ },
|
|
|
+ ], // 值
|
|
|
+ animation: true,
|
|
|
+ xAxis: {
|
|
|
+ type: 'grid',
|
|
|
+ disableGrid: true,
|
|
|
+ labelCount: 7
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ gridType: 'solid',
|
|
|
+ gridColor: '#CCCCCC',
|
|
|
+ min: 0,
|
|
|
+ max: 180,
|
|
|
+ data: [{
|
|
|
+ axisLine: false,
|
|
|
+ format: (val) => {
|
|
|
+ return val.toFixed(2);
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ width: _self.cWidth * _self.pixelRatio,
|
|
|
+ height: _self.cHeight * _self.pixelRatio,
|
|
|
+ padding: [15,15,4,15],
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve', // 平滑曲线; straight直线
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ shopMoneyTouch(e) {
|
|
|
+ shopMoneyLine.showToolTip(e, {
|
|
|
+ format: function (item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
// 未来七天
|
|
|
async futureDayData() {
|
|
|
if (this.shopID === 0) {
|
|
@@ -449,26 +700,6 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
- // 商品销售占比
|
|
|
- async shopSellData() {
|
|
|
- await this.$http.get('/homePage/getData1', {
|
|
|
- date: this.today,
|
|
|
- shopId: this.shopID,
|
|
|
- }).then(async (res) => {
|
|
|
- let pie = {
|
|
|
- series: [],
|
|
|
- };
|
|
|
- if (res.data.length > 0) {
|
|
|
- pie.series = res.data;
|
|
|
- _self.showPie('shopecharts', pie);
|
|
|
- } else {
|
|
|
- pie.series = [{ name: '无数据', data: 0 }];
|
|
|
- _self.showPie('shopecharts', pie);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
// 折线图表
|
|
|
showLineA(canvasId, chartData) {
|
|
|
canvaLineA = new uCharts({
|
|
@@ -479,7 +710,7 @@ export default {
|
|
|
legend: {
|
|
|
show: false,
|
|
|
},
|
|
|
- dataLabel: false, // 图表中是否显示数据
|
|
|
+ dataLabel: true, // 图表中是否显示数据
|
|
|
duration: 500,
|
|
|
dataPointShape: false, // 折点
|
|
|
background: '#FFFFFF',
|
|
@@ -505,13 +736,16 @@ export default {
|
|
|
gridColor: '#CCCCCC',
|
|
|
min: 0,
|
|
|
max: 180,
|
|
|
- data: [{ axisLine: false }],
|
|
|
- format: (val) => {
|
|
|
- return val.toFixed(0) + '元';
|
|
|
- },
|
|
|
+ data: [{
|
|
|
+ axisLine: false,
|
|
|
+ format: (val) => {
|
|
|
+ return val.toFixed(0);
|
|
|
+ },
|
|
|
+ }],
|
|
|
},
|
|
|
width: _self.cWidth * _self.pixelRatio,
|
|
|
height: _self.cHeight * _self.pixelRatio,
|
|
|
+ padding: [15,15,4,15],
|
|
|
extra: {
|
|
|
line: {
|
|
|
type: 'curve', // 平滑曲线; straight直线
|
|
@@ -519,7 +753,6 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
touchLineA(e) {
|
|
|
canvaLineA.showToolTip(e, {
|
|
|
format: function (item, category) {
|
|
@@ -528,6 +761,30 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ // 商品销售占比
|
|
|
+ async shopSellData() {
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData1', {
|
|
|
+ // date: this.today,
|
|
|
+ date: '2020-07-28',
|
|
|
+ shopId: this.shopID
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ let pie = {
|
|
|
+ series: [],
|
|
|
+ };
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let element = res.data[i];
|
|
|
+ pie.series.push({name: element.name, data: element.value})
|
|
|
+ }
|
|
|
+ _self.showPie('shopecharts', pie);
|
|
|
+ } else {
|
|
|
+ pie.series = [{ name: '无数据', data: 0 }];
|
|
|
+ _self.showPie('shopecharts', pie);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 饼图
|
|
|
showPie(canvasId, chartData) {
|
|
|
canvaPie = new uCharts({
|
|
@@ -550,8 +807,8 @@ export default {
|
|
|
pixelRatio: _self.pixelRatio,
|
|
|
series: chartData.series,
|
|
|
animation: true,
|
|
|
- width: _self.cWidth * _self.pixelRatio,
|
|
|
- height: _self.cHeight * _self.pixelRatio,
|
|
|
+ width: _self.bWidth * _self.pixelRatio,
|
|
|
+ height: _self.bHeight * _self.pixelRatio,
|
|
|
dataLabel: true,
|
|
|
extra: {
|
|
|
pie: {
|
|
@@ -566,7 +823,7 @@ export default {
|
|
|
return item.name + ':' + item.data;
|
|
|
},
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -874,6 +1131,7 @@ export default {
|
|
|
.echarts {
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 10rpx;
|
|
|
+ margin-bottom: 30upx;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
@@ -887,7 +1145,7 @@ export default {
|
|
|
|
|
|
.left {
|
|
|
.future {
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
.num {
|
|
|
font-size: 30rpx;
|
|
@@ -947,6 +1205,19 @@ export default {
|
|
|
width: 690rpx;
|
|
|
height: 300rpx;
|
|
|
}
|
|
|
+
|
|
|
+ .shopsell {
|
|
|
+ .shopsellEcharts {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shopmoney {
|
|
|
+ .shopmoneyEcharts {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.shop-echarts-warp {
|