|
@@ -143,6 +143,75 @@
|
|
|
@touchmove="moveLine8" @touchend="touchEndLine8" style="background-color: #FFFFFF;"></canvas>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 各省销售额 -->
|
|
|
+ <view class="qiun-columns">
|
|
|
+ <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
|
|
+ <view class="qiun-title-dot-light">
|
|
|
+ <view class="dis">全国日销售排行</view>
|
|
|
+ </view>
|
|
|
+ <view class="shijian" style="text-align: center;position: relative;">
|
|
|
+ <image @click="pre3('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
|
|
|
+ <span>{{startDate9}}</span>
|
|
|
+ <image @click="next3('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="qiun-charts2" style="background-color: #FFFFFF;">
|
|
|
+ <canvas canvas-id="canvaColumn9" id="canvaColumn9" class="charts2" disable-scroll=true @touchstart="touchLine9"
|
|
|
+ @touchmove="moveLine9" @touchend="touchEndLine9" style="background-color: #FFFFFF;"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="qiun-columns">
|
|
|
+ <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
|
|
+ <view class="qiun-title-dot-light">
|
|
|
+ <view class="dis">全国周销售排行</view>
|
|
|
+ </view>
|
|
|
+ <view class="shijian" style="text-align: center;position: relative;">
|
|
|
+ <image @click="pre3('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
|
|
|
+ <span>{{startDate10}} 至 {{endDate10}}</span>
|
|
|
+ <image @click="next3('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="qiun-charts2" style="background-color: #FFFFFF;">
|
|
|
+ <canvas canvas-id="canvaColumn10" id="canvaColumn10" class="charts2" disable-scroll=true @touchstart="touchLine10"
|
|
|
+ @touchmove="moveLine10" @touchend="touchEndLine10" style="background-color: #FFFFFF;"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="qiun-columns">
|
|
|
+ <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
|
|
+ <view class="qiun-title-dot-light">
|
|
|
+ <view class="dis">全国月销售排行</view>
|
|
|
+ </view>
|
|
|
+ <view class="shijian" style="text-align: center;position: relative;">
|
|
|
+ <image @click="pre3('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
|
|
|
+ <span>{{startDate11}} 至 {{endDate11}}</span>
|
|
|
+ <image @click="next3('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="qiun-charts2" style="background-color: #FFFFFF;">
|
|
|
+ <canvas canvas-id="canvaColumn11" id="canvaColumn11" class="charts2" disable-scroll=true @touchstart="touchLine11"
|
|
|
+ @touchmove="moveLine11" @touchend="touchEndLine11" style="background-color: #FFFFFF;"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="qiun-columns">
|
|
|
+ <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
|
|
|
+ <view class="qiun-title-dot-light">
|
|
|
+ <view class="dis">全国年销售排行</view>
|
|
|
+ </view>
|
|
|
+ <view class="shijian" style="text-align: center;position: relative;">
|
|
|
+ <image @click="pre3('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
|
|
|
+ <span>{{startDate12}} 至 {{endDate12}}</span>
|
|
|
+ <image @click="next3('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="qiun-charts2" style="background-color: #FFFFFF;">
|
|
|
+ <canvas canvas-id="canvaColumn12" id="canvaColumn12" class="charts2" disable-scroll=true @touchstart="touchLine12"
|
|
|
+ @touchmove="moveLine12" @touchend="touchEndLine12" style="background-color: #FFFFFF;"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -163,10 +232,16 @@
|
|
|
var canvaColumn2 = null;
|
|
|
var canvaColumn3 = null;
|
|
|
var canvaColumn4 = null;
|
|
|
+
|
|
|
var canvaColumn5 = null;
|
|
|
var canvaColumn6 = null;
|
|
|
var canvaColumn7 = null;
|
|
|
var canvaColumn8 = null;
|
|
|
+
|
|
|
+ var canvaColumn9 = null;
|
|
|
+ var canvaColumn10 = null;
|
|
|
+ var canvaColumn11 = null;
|
|
|
+ var canvaColumn12 = null;
|
|
|
export default {
|
|
|
name: 'equipmentStatistics',
|
|
|
props: {
|
|
@@ -178,6 +253,8 @@
|
|
|
cWidth: '',
|
|
|
cHeight: '',
|
|
|
pixelRatio: 1,
|
|
|
+ tese:0,
|
|
|
+
|
|
|
startDate1: '',
|
|
|
endDate1: '',
|
|
|
startDate2: '',
|
|
@@ -186,6 +263,7 @@
|
|
|
endDate3: '',
|
|
|
startDate4: '',
|
|
|
endDate4: '',
|
|
|
+
|
|
|
startDate5: '',
|
|
|
endDate5: '',
|
|
|
startDate6: '',
|
|
@@ -194,6 +272,15 @@
|
|
|
endDate7: '',
|
|
|
startDate8: '',
|
|
|
endDate8: '',
|
|
|
+
|
|
|
+ startDate9: '',
|
|
|
+ endDate9: '',
|
|
|
+ startDate10: '',
|
|
|
+ endDate10: '',
|
|
|
+ startDate11: '',
|
|
|
+ endDate11: '',
|
|
|
+ startDate12: '',
|
|
|
+ endDate12: '',
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
@@ -205,14 +292,16 @@
|
|
|
// this.init2();
|
|
|
},
|
|
|
onShow() {
|
|
|
+ this.tese = this.tese + 1;
|
|
|
var globalUser = uni.getStorageSync("globalUser");
|
|
|
if (globalUser.id == '1') {
|
|
|
this.show = true
|
|
|
}
|
|
|
this.init();
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
- ...mapActions('chart', ['getProvince', 'getEquipmentStatistics', 'getMainStatistics', 'getMachineNum']),
|
|
|
+ ...mapActions('chart', ['getProvince','getProvinceAll', 'getEquipmentStatistics', 'getMainStatistics', 'getMachineNum']),
|
|
|
async init() {
|
|
|
if (this.pname === '') {
|
|
|
this.pname = uni.getStorageSync("name");
|
|
@@ -225,15 +314,18 @@
|
|
|
|
|
|
await this.initDateRang(new Date(), 'day');
|
|
|
await this.initDateRang(new Date(), 'week');
|
|
|
- await this.initDateRang(new Date(), 'month');
|
|
|
- await this.initDateRang(new Date(), 'year');
|
|
|
+ if(this.tese == 1){
|
|
|
+ await this.initDateRang(new Date(), 'month');
|
|
|
+ await this.initDateRang(new Date(), 'year');
|
|
|
+ }
|
|
|
+
|
|
|
await this.init2();
|
|
|
+ await this.init3();
|
|
|
},
|
|
|
async init2() {
|
|
|
if (this.pname === '') {
|
|
|
this.pname = uni.getStorageSync("name");
|
|
|
}
|
|
|
- // console.log("adminId:" + this.adminId)
|
|
|
_self = this;
|
|
|
//图表中图
|
|
|
this.cWidth2 = uni.upx2px(690);
|
|
@@ -241,10 +333,30 @@
|
|
|
if (this.show == true) {
|
|
|
await this.initDateRang2(new Date(), 'day');
|
|
|
await this.initDateRang2(new Date(), 'week');
|
|
|
- await this.initDateRang2(new Date(), 'month');
|
|
|
- await this.initDateRang2(new Date(), 'year');
|
|
|
+ if(this.tese == 1){
|
|
|
+ await this.initDateRang2(new Date(), 'month');
|
|
|
+ await this.initDateRang2(new Date(), 'year');
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async init3() {
|
|
|
+ if (this.pname === '') {
|
|
|
+ this.pname = uni.getStorageSync("name");
|
|
|
+ }
|
|
|
+ _self = this;
|
|
|
+ //图表中图
|
|
|
+ this.cWidth3 = uni.upx2px(690);
|
|
|
+ this.cHeight3 = uni.upx2px(370);
|
|
|
+ if (this.show == true) {
|
|
|
+ await this.initDateRang3(new Date(), 'day');
|
|
|
+ await this.initDateRang3(new Date(), 'week');
|
|
|
+ if(this.tese == 1){
|
|
|
+ await this.initDateRang3(new Date(), 'month');
|
|
|
+ await this.initDateRang3(new Date(), 'year');
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
initDateRang(day, chartType) {
|
|
|
const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
|
|
@@ -286,6 +398,26 @@
|
|
|
|
|
|
return this.getProvinceData(chartType);
|
|
|
},
|
|
|
+ initDateRang3(day, chartType) {
|
|
|
+ const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
|
|
|
+ if (chartType === 'day') {
|
|
|
+ this.startDate9 = dateUtils.formateDate(day, 'yyyy/MM/dd');
|
|
|
+ }
|
|
|
+ if (chartType === 'week') {
|
|
|
+ this.startDate10 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
|
|
|
+ this.endDate10 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
|
|
|
+ }
|
|
|
+ if (chartType === 'month') {
|
|
|
+ this.startDate11 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
|
|
|
+ this.endDate11 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
|
|
|
+ }
|
|
|
+ if (chartType === 'year') {
|
|
|
+ this.startDate12 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
|
|
|
+ this.endDate12 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
|
|
|
+ }
|
|
|
+
|
|
|
+ return this.getProvinceAllData(chartType);
|
|
|
+ },
|
|
|
/**上一个 */
|
|
|
pre(chartType) {
|
|
|
let day;
|
|
@@ -327,6 +459,26 @@
|
|
|
}
|
|
|
this.initDateRang2(day, chartType);
|
|
|
},
|
|
|
+ pre3(chartType) {
|
|
|
+ let day;
|
|
|
+ if (chartType === 'day') { // 日
|
|
|
+ day = new Date(this.startDate9);
|
|
|
+ day.setDate(day.getDate() - 1);
|
|
|
+ }
|
|
|
+ if (chartType === 'week') { // 周
|
|
|
+ day = new Date(this.startDate10);
|
|
|
+ day.setDate(day.getDate() - 7);
|
|
|
+ }
|
|
|
+ if (chartType === 'month') { // 月
|
|
|
+ day = new Date(this.startDate11);
|
|
|
+ day.setMonth(day.getMonth() - 1);
|
|
|
+ }
|
|
|
+ if (chartType === 'year') { // 年
|
|
|
+ day = new Date(this.startDate12);
|
|
|
+ day.setFullYear(day.getFullYear() - 1);
|
|
|
+ }
|
|
|
+ this.initDateRang3(day, chartType);
|
|
|
+ },
|
|
|
/**下一个 */
|
|
|
next(chartType) {
|
|
|
let day;
|
|
@@ -370,6 +522,27 @@
|
|
|
|
|
|
this.initDateRang2(day, chartType);
|
|
|
},
|
|
|
+ next3(chartType) {
|
|
|
+ let day;
|
|
|
+ if (chartType === 'day') { // 日
|
|
|
+ day = new Date(this.startDate9);
|
|
|
+ day.setDate(day.getDate() + 1);
|
|
|
+ }
|
|
|
+ if (chartType === 'week') { // 周
|
|
|
+ day = new Date(this.startDate10);
|
|
|
+ day.setDate(day.getDate() + 7);
|
|
|
+ }
|
|
|
+ if (chartType === 'month') { // 月
|
|
|
+ day = new Date(this.startDate11);
|
|
|
+ day.setMonth(day.getMonth() + 1);
|
|
|
+ }
|
|
|
+ if (chartType === 'year') { // 年
|
|
|
+ day = new Date(this.startDate12);
|
|
|
+ day.setFullYear(day.getFullYear() + 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.initDateRang3(day, chartType);
|
|
|
+ },
|
|
|
getStatisticsData(chartType) {
|
|
|
const param = {
|
|
|
'chartType': chartType
|
|
@@ -540,6 +713,92 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ getProvinceAllData(chartType) {
|
|
|
+ const param = {
|
|
|
+ 'chartType': chartType
|
|
|
+ };
|
|
|
+ if (chartType == 'day') {
|
|
|
+ param['startDate'] = this.startDate9;
|
|
|
+ param['endDate'] = this.startDate9;
|
|
|
+ }
|
|
|
+ if (chartType == 'week') {
|
|
|
+ param['startDate'] = this.startDate10;
|
|
|
+ param['endDate'] = this.endDate10;
|
|
|
+ }
|
|
|
+ if (chartType == 'month') {
|
|
|
+ param['startDate'] = this.startDate11;
|
|
|
+ param['endDate'] = this.endDate11;
|
|
|
+ }
|
|
|
+ if (chartType == 'year') {
|
|
|
+ param['startDate'] = this.startDate12;
|
|
|
+ param['endDate'] = this.endDate12;
|
|
|
+ }
|
|
|
+ if (this.adminId) { // 子组件,则拿传过来的参
|
|
|
+ param['adminId'] = this.adminId;
|
|
|
+ } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
|
|
|
+ param['adminId'] = this.loginUser['id'];
|
|
|
+ }
|
|
|
+ if (this.equipmentId) {
|
|
|
+ param['equipmentId'] = this.equipmentId;
|
|
|
+ }
|
|
|
+
|
|
|
+ return this.getProvinceAll(param)
|
|
|
+ .then(data => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ if (param['chartType'] == 'day') {
|
|
|
+ canvaColumn9 = this.initChart3('canvaColumn9', data);
|
|
|
+ }
|
|
|
+ if (param['chartType'] == 'week') {
|
|
|
+ canvaColumn10 = this.initChart3('canvaColumn10', data);
|
|
|
+ }
|
|
|
+ if (param['chartType'] == 'month') {
|
|
|
+ canvaColumn11 = this.initChart3('canvaColumn11', data);
|
|
|
+ }
|
|
|
+ if (param['chartType'] == 'year') {
|
|
|
+ canvaColumn12 = this.initChart3('canvaColumn12', data);
|
|
|
+ }
|
|
|
+
|
|
|
+ }, _ => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ if (param['chartType'] == 'day') {
|
|
|
+ canvaColumn9 = this.initChart3('canvaColumn9', {
|
|
|
+ categories: ['暂无数据'],
|
|
|
+ series: [{
|
|
|
+ name: '销售额',
|
|
|
+ data: [0]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (param['chartType'] == 'week') {
|
|
|
+ canvaColumn10 = this.initChart3('canvaColumn10', {
|
|
|
+ categories: ['暂无数据'],
|
|
|
+ series: [{
|
|
|
+ name: '销售额',
|
|
|
+ data: [0]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (param['chartType'] == 'month') {
|
|
|
+ canvaColumn11 = this.initChart3('canvaColumn11', {
|
|
|
+ categories: ['暂无数据'],
|
|
|
+ series: [{
|
|
|
+ name: '销售额',
|
|
|
+ data: [0]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (param['chartType'] == 'year') {
|
|
|
+ canvaColumn12 = this.initChart3('canvaColumn12', {
|
|
|
+ categories: ['暂无数据'],
|
|
|
+ series: [{
|
|
|
+ name: '销售额',
|
|
|
+ data: [0]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
initChart(canvasId, chartData) {
|
|
|
return new uCharts({
|
|
|
$this: _self,
|
|
@@ -610,7 +869,43 @@
|
|
|
height: _self.cHeight2 * _self.pixelRatio,
|
|
|
extra: {
|
|
|
column: {
|
|
|
- // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
|
|
|
+ width: 18
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initChart3(canvasId, chartData) {
|
|
|
+ return new uCharts({
|
|
|
+ $this: _self,
|
|
|
+ canvasId: canvasId,
|
|
|
+ enableScroll: true,
|
|
|
+ type: 'column',
|
|
|
+ legend: true,
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF', //y轴颜色
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ categories: chartData.categories,
|
|
|
+ series: chartData.series,
|
|
|
+ xAxis: {
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ rotateLabel: true,
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
+ scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
|
|
|
+ // disableGrid:true,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ //disabled:true
|
|
|
+ },
|
|
|
+ dataLabel: true,
|
|
|
+ width: _self.cWidth3 * _self.pixelRatio,
|
|
|
+ height: _self.cHeight3 * _self.pixelRatio,
|
|
|
+ extra: {
|
|
|
+ column: {
|
|
|
width: 18
|
|
|
}
|
|
|
}
|
|
@@ -784,6 +1079,91 @@
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ touchLine9(e) {
|
|
|
+ if (canvaColumn9) {
|
|
|
+ canvaColumn9.scrollStart(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveLine9(e) {
|
|
|
+ if (canvaColumn9) {
|
|
|
+ canvaColumn9.scroll(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchEndLine9(e) {
|
|
|
+ if (canvaColumn9) {
|
|
|
+ canvaColumn9.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumn9.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchLine10(e) {
|
|
|
+ if (canvaColumn10) {
|
|
|
+ canvaColumn10.scrollStart(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveLine10(e) {
|
|
|
+ if (canvaColumn10) {
|
|
|
+ canvaColumn10.scroll(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchEndLine10(e) {
|
|
|
+ if (canvaColumn10) {
|
|
|
+ canvaColumn10.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumn10.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchLine11(e) {
|
|
|
+ if (canvaColumn11) {
|
|
|
+ canvaColumn11.scrollStart(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveLine11(e) {
|
|
|
+ if (canvaColumn11) {
|
|
|
+ canvaColumn11.scroll(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchEndLine11(e) {
|
|
|
+ if (canvaColumn11) {
|
|
|
+ canvaColumn11.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumn11.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchLine12(e) {
|
|
|
+ if (canvaColumn12) {
|
|
|
+ canvaColumn12.scrollStart(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveLine12(e) {
|
|
|
+ if (canvaColumn12) {
|
|
|
+ canvaColumn12.scroll(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchEndLine12(e) {
|
|
|
+ if (canvaColumn12) {
|
|
|
+ canvaColumn12.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumn12.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|