|
|
@@ -13,180 +13,175 @@ var dashboard = new Vue({
|
|
|
titleSshow:false,
|
|
|
msgFlag:false,
|
|
|
isShow:false,
|
|
|
+ orderNumData:[],//统计订单金额
|
|
|
+ paytotalfeeData:[]//统计订单数量
|
|
|
},
|
|
|
methods: {
|
|
|
- uploadGoodsImagesFn:function (event) {//更换头像
|
|
|
- var _this = this;
|
|
|
- var inputDOM = _this.$refs.goodImage;
|
|
|
- var file = inputDOM.files;
|
|
|
- _this.formData.append('file', file[0]);
|
|
|
- SupplierApi.uploadimg(_this.formData,function(response){
|
|
|
- _this.goodImage=response.data;
|
|
|
- event.target.value = '';
|
|
|
- SupplierApi.uploadAvatar({userId:_this.userId, image:_this.goodImage},function (res) {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- toggleThisLadder: function(event){
|
|
|
- var el = event.currentTarget;
|
|
|
- if($(el).hasClass("on")){
|
|
|
- $(el).removeClass("on").siblings('.mFixed').hide();
|
|
|
- if(!isPC){looseBody();}
|
|
|
- }else{
|
|
|
- $(el).addClass("on").siblings('.mFixed').show();
|
|
|
- if(!isPC){fixedBody();}
|
|
|
- }
|
|
|
- },
|
|
|
+ dashboardDataInfo:function(){
|
|
|
+ var _this = this;
|
|
|
+ SupplierApi.homePageData({userId:_this.userId},function (res) {
|
|
|
+ if(res.code==0){
|
|
|
+ _this.homeData = res.data;
|
|
|
+ _this.goodImage = _this.homeData.user.image;
|
|
|
+ _this.shopinfo = res.data.shop;
|
|
|
+ _this.promotions = res.data.promotions;
|
|
|
+ _this.rankingList = res.data.salesRankingList;
|
|
|
+ if (res.data.unReadMessageCount>99){
|
|
|
+ res.data.unReadMessageCount = '99+';
|
|
|
+ _this.msgFlag = true
|
|
|
+ }else if(res.data.unReadMessageCount == 0){
|
|
|
+ _this.msgFlag = false
|
|
|
+ }else {
|
|
|
+ _this.msgFlag = true
|
|
|
+ }
|
|
|
+ _this.homeData.salesStatisticsList.map(function (item) {
|
|
|
+ if(item.orderQuantity == 0){
|
|
|
+ item.orderQuantity = 0.1;
|
|
|
+ }
|
|
|
+ if(item.orderAmount == 0){
|
|
|
+ item.orderAmount = 0.1;
|
|
|
+ }
|
|
|
+ _this.orderNumData.push(item.orderQuantity);
|
|
|
+ _this.paytotalfeeData.push(item.orderAmount);
|
|
|
+ });
|
|
|
+ _this.EchartsCreated2d();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadGoodsImagesFn:function (event) {//更换头像
|
|
|
+ var _this = this;
|
|
|
+ var inputDOM = _this.$refs.goodImage;
|
|
|
+ var file = inputDOM.files;
|
|
|
+ _this.formData.append('file', file[0]);
|
|
|
+ SupplierApi.uploadimg(_this.formData,function(response){
|
|
|
+ _this.goodImage=response.data;
|
|
|
+ event.target.value = '';
|
|
|
+ SupplierApi.uploadAvatar({userId:_this.userId, image:_this.goodImage},function (res) {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toggleThisLadder: function(event){
|
|
|
+ var el = event.currentTarget;
|
|
|
+ if($(el).hasClass("on")){
|
|
|
+ $(el).removeClass("on").siblings('.mFixed').hide();
|
|
|
+ if(!isPC){looseBody();}
|
|
|
+ }else{
|
|
|
+ $(el).addClass("on").siblings('.mFixed').show();
|
|
|
+ if(!isPC){fixedBody();}
|
|
|
+ }
|
|
|
+ },
|
|
|
hideThisLadder: function(event){
|
|
|
- var el = event.currentTarget;
|
|
|
- $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
|
|
|
- if(!isPC){looseBody();}
|
|
|
- },
|
|
|
- opentitle:function () {
|
|
|
- var _this = this;
|
|
|
- _this.titleSshow =!this.titleSshow;
|
|
|
- },
|
|
|
- perfect:function () {
|
|
|
- window.location.href='/supplier/setting/information.html';
|
|
|
- },
|
|
|
+ var el = event.currentTarget;
|
|
|
+ $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
|
|
|
+ if(!isPC){looseBody();}
|
|
|
+ },
|
|
|
+ opentitle:function () {
|
|
|
+ var _this = this;
|
|
|
+ _this.titleSshow =!this.titleSshow;
|
|
|
+ },
|
|
|
+ perfect:function () {
|
|
|
+ window.location.href='/supplier/setting/information.html';
|
|
|
+ },
|
|
|
+ EchartsCreated2d:function(){
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var _this = this;
|
|
|
+ var myChart = echarts.init(document.getElementById('StatisticsEacths'));
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ top: 0,
|
|
|
+ right: '5%'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['近一个月','近三个月','近半年','近一年']
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'log',
|
|
|
+ axisTick: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '订单金额(元)',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 3,
|
|
|
+ showSymbol: false,
|
|
|
+ symbol: 'emptyCircle',
|
|
|
+ lineStyle: { color: '#1667e1' },
|
|
|
+ itemStyle: { color: '#1667e1', borderWidth: 3 },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {offset: 0, color: 'rgba(65, 125, 230, 0.2)'},// 0% 处的颜色
|
|
|
+ {offset: 1, color: 'rgba(65, 125, 230, 0)' }// 100% 处的颜色
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: _this.paytotalfeeData,
|
|
|
+ animationDuration: 2000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '订单量(笔)',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 3,
|
|
|
+ showSymbol: false,
|
|
|
+ symbol: 'emptyCircle',
|
|
|
+ lineStyle: { color: '#16e175' },
|
|
|
+ itemStyle: { color: '#16e175', borderWidth: 3 },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: 'rgba(131, 242, 183, 0.2)' },// 0% 处的颜色
|
|
|
+ { offset: 1, color: 'rgba(131, 242, 183, 0)'}// 100% 处的颜色
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: _this.orderNumData,
|
|
|
+ animationDuration: 2000
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 使用刚指定的配置项和数据显示图表。
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
},
|
|
|
mounted:function () {
|
|
|
var _this = this;
|
|
|
if(globalUserData) {
|
|
|
_this.userId = globalUserData.userId;
|
|
|
+ this.dashboardDataInfo();
|
|
|
};
|
|
|
- console.log( _this.userId)
|
|
|
- SupplierApi.homePageData({userId:_this.userId},function (res) {
|
|
|
- if(res.code==0){
|
|
|
- _this.homeData = res.data;
|
|
|
- _this.goodImage = _this.homeData.user.image;
|
|
|
- _this.shopinfo = res.data.shop;
|
|
|
- _this.promotions = res.data.promotions;
|
|
|
- _this.rankingList = res.data.salesRankingList;
|
|
|
- if (res.data.unReadMessageCount>99){
|
|
|
- res.data.unReadMessageCount = '99+';
|
|
|
- _this.msgFlag = true
|
|
|
- }else if(res.data.unReadMessageCount == 0){
|
|
|
- _this.msgFlag = false
|
|
|
- }else {
|
|
|
- _this.msgFlag = true
|
|
|
- }
|
|
|
- var paytotalfeeData=[];//订单金额
|
|
|
- var orderNumData=[];//订单数
|
|
|
- _this.homeData.salesStatisticsList.map(function (item) {
|
|
|
- orderNumData.push(item.orderQuantity);
|
|
|
- paytotalfeeData.push(item.orderAmount)
|
|
|
- })
|
|
|
- console.log(res)
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- var myChart = echarts.init(document.getElementById('StatisticsEacths'));
|
|
|
- var monthData =['近一个月','近三个月','近半年','近一年'];
|
|
|
- // var paytotalfeeData =['200.00','2000.00','20000.00','200000.00'];
|
|
|
- // var orderNumData = ['100','1000','10000','100000'];
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'cross',
|
|
|
- label: {
|
|
|
- backgroundColor: '#6a7985'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- show: true,
|
|
|
- top: 0,
|
|
|
- right: '5%'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: monthData
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
- type: 'log',
|
|
|
- axisTick: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '订单金额',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbolSize: 3,
|
|
|
- showSymbol: false,
|
|
|
- symbol: 'emptyCircle',
|
|
|
- lineStyle: {
|
|
|
- color: '#1667e1'
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#1667e1',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
- areaStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(65, 125, 230, 0.2)' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(65, 125, 230, 0)'// 100% 处的颜色
|
|
|
- }]
|
|
|
- }
|
|
|
- },
|
|
|
- data: paytotalfeeData,
|
|
|
- animationDuration: 2000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '订单量(笔)',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbolSize: 3,
|
|
|
- showSymbol: false,
|
|
|
- symbol: 'emptyCircle',
|
|
|
- lineStyle: {
|
|
|
- color: '#16e175'
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#16e175',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
- areaStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(131, 242, 183, 0.2)' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(131, 242, 183, 0)'// 100% 处的颜色
|
|
|
- }]
|
|
|
- }
|
|
|
- },
|
|
|
- data: orderNumData,
|
|
|
- animationDuration: 2000
|
|
|
- }
|
|
|
-
|
|
|
- ]
|
|
|
- };
|
|
|
- // 使用刚指定的配置项和数据显示图表。
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
}
|
|
|
})
|
