12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457 |
- <!-- 机器销售排行 -->
- <template>
- <view>
- <view class="head">
- </view>
- <view class="ri">
- <font class="title">{{$t('equipmentStatics.title')}}</font>
- </view>
- <view class="uni-list">
- <view class="uni-list-cell">
- <view class="uni-list-cell-left">
- {{$t('equipmentStatics.changeType')}}:
- </view>
- <view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
- <picker @change="changeType" :value="index" :range="changeTypeList">
- <view class="uni-input">{{changeTypeList[index]}}</view>
- </picker>
- </view>
- </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">{{$t('equipmentStatics.day')}}</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate1}}</span>
- <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true
- @touchstart="touchLine1" @touchmove="moveLine1" @touchend="touchEndLine1"
- 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">{{$t('equipmentStatics.week')}}</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate2}} -- {{endDate2}}</span>
- <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true
- @touchstart="touchLine2" @touchmove="moveLine2" @touchend="touchEndLine2"
- 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">{{$t('equipmentStatics.month')}}</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate3}} -- {{endDate3}}</span>
- <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true
- @touchstart="touchLine3" @touchmove="moveLine3" @touchend="touchEndLine3"
- 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">{{$t('equipmentStatics.year')}}</view>
- </view>
- <view class="shijian" style="text-align: center;position: relative;">
- <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate4}} -- {{endDate4}}</span>
- <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true
- @touchstart="touchLine4" @touchmove="moveLine4" @touchend="touchEndLine4"
- style="background-color: #FFFFFF;"></canvas>
- </view>
- </view>
- <!-- 各省份平均销售数据 -->
- <view v-if="show">
- <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="pre2('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate5}}</span>
- <image @click="next2('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn5" id="canvaColumn5" class="charts2" disable-scroll=true
- @touchstart="touchLine5" @touchmove="moveLine5" @touchend="touchEndLine5"
- 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="pre2('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate6}} 至 {{endDate6}}</span>
- <image @click="next2('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn6" id="canvaColumn6" class="charts2" disable-scroll=true
- @touchstart="touchLine6" @touchmove="moveLine6" @touchend="touchEndLine6"
- 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="pre2('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate7}} 至 {{endDate7}}</span>
- <image @click="next2('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn7" id="canvaColumn7" class="charts2" disable-scroll=true
- @touchstart="touchLine7" @touchmove="moveLine7" @touchend="touchEndLine7"
- 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="pre2('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
- <span>{{startDate8}} 至 {{endDate8}}</span>
- <image @click="next2('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
- </view>
- </view>
- <view class="qiun-charts2" style="background-color: #FFFFFF;">
- <canvas canvas-id="canvaColumn8" id="canvaColumn8" class="charts2" disable-scroll=true
- @touchstart="touchLine8" @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>
- <script>
- import {
- mapState,
- mapActions,
- mapMutations
- } from 'vuex';
- import uCharts from '@/components/u-charts/u-charts.js';
- import {
- dateUtils
- } from '@/common/util.js';
- var _self;
- var canvaColumn1 = null;
- 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: {
- adminId: '',
- pname: '',
- },
- data() {
- return {
- cWidth: '',
- cHeight: '',
- pixelRatio: 1,
- tese: 0,
- type: 0,
- index: 0,
- changeTypeList: [this.$t('equipmentStatics.sales'), this.$t('equipmentStatics.flowers')],
- startDate1: '',
- endDate1: '',
- startDate2: '',
- endDate2: '',
- startDate3: '',
- endDate3: '',
- startDate4: '',
- endDate4: '',
- startDate5: '',
- endDate5: '',
- startDate6: '',
- endDate6: '',
- startDate7: '',
- endDate7: '',
- startDate8: '',
- endDate8: '',
- startDate9: '',
- endDate9: '',
- startDate10: '',
- endDate10: '',
- startDate11: '',
- endDate11: '',
- startDate12: '',
- endDate12: '',
- show: false
- }
- },
- computed: {
- ...mapState(['loginUser']),
- },
- mounted() {
- // this.init2();
- },
- onShow() {
- uni.setNavigationBarTitle({
- title: this.$t('equipmentStatics.title')
- });
- uni.setTabBarItem({
- index: 2,
- text: this.$t('tabs.tab3')
- });
- this.tese = this.tese + 1;
- var globalUser = uni.getStorageSync("globalUser");
- if (globalUser.id == '1') {
- this.show = true
- }
- var token = uni.getStorageSync("token");
- if (token.length > 1) {
- this.init();
- } else {
- uni.reLaunch({
- url: '../Login/Login',
- });
- }
- },
- methods: {
- ...mapActions('chart', ['getEquipmentStatistics', 'getMainStatistics',
- 'getMachineNum'
- ]),
- async init() {
- if (this.pname === '') {
- this.pname = uni.getStorageSync("name");
- }
- // console.log("adminId:" + this.adminId)
- _self = this;
- //图表中图
- this.cWidth = uni.upx2px(690);
- this.cHeight = uni.upx2px(500);
- await this.initDateRang(new Date(), 'day');
- await this.initDateRang(new Date(), 'week');
- if (this.tese == 1) {
- await this.initDateRang(new Date(), 'month');
- await this.initDateRang(new Date(), 'year');
- }
- setTimeout(function() {
- _self.init2();
- }, 3000);
- // await this.init2();
- },
- async init2() {
- if (this.pname === '') {
- this.pname = uni.getStorageSync("name");
- }
- _self = this;
- //图表中图
- this.cWidth2 = uni.upx2px(690);
- this.cHeight2 = uni.upx2px(370);
- if (this.show == true) {
- await this.initDateRang2(new Date(), 'day');
- await this.initDateRang2(new Date(), 'week');
- if (this.tese == 1) {
- await this.initDateRang2(new Date(), 'month');
- await this.initDateRang2(new Date(), 'year');
- }
- }
- setTimeout(function() {
- _self.init3();
- }, 9000);
- // await this.init3();
- },
- 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');
- }
- }
- },
- changeType: function(e) {
- this.index = e.target.value;
- // this.type = e.target.value;
- this.tese = 1;
- this.init();
- },
- initDateRang(day, chartType) {
- const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
- if (chartType === 'day') {
- this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
- }
- if (chartType === 'week') {
- this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
- this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
- }
- if (chartType === 'month') {
- this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
- this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
- }
- if (chartType === 'year') {
- this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
- this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
- }
- return this.getStatisticsData(chartType);
- },
- // initDateRang2(day, chartType) {
- // const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
- // if (chartType === 'day') {
- // this.startDate5 = dateUtils.formateDate(day, 'yyyy/MM/dd');
- // }
- // if (chartType === 'week') {
- // this.startDate6 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
- // this.endDate6 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
- // }
- // if (chartType === 'month') {
- // this.startDate7 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
- // this.endDate7 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
- // }
- // if (chartType === 'year') {
- // this.startDate8 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
- // this.endDate8 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
- // }
- // 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;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate1);
- day.setDate(day.getDate() - 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate2);
- day.setDate(day.getDate() - 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate3);
- day.setMonth(day.getMonth() - 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate4);
- day.setFullYear(day.getFullYear() - 1);
- }
- this.initDateRang(day, chartType);
- },
- pre2(chartType) {
- let day;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate5);
- day.setDate(day.getDate() - 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate6);
- day.setDate(day.getDate() - 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate7);
- day.setMonth(day.getMonth() - 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate8);
- day.setFullYear(day.getFullYear() - 1);
- }
- 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;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate1);
- day.setDate(day.getDate() + 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate2);
- day.setDate(day.getDate() + 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate3);
- day.setMonth(day.getMonth() + 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate4);
- day.setFullYear(day.getFullYear() + 1);
- }
- this.initDateRang(day, chartType);
- },
- next2(chartType) {
- let day;
- if (chartType === 'day') { // 日
- day = new Date(this.startDate5);
- day.setDate(day.getDate() + 1);
- }
- if (chartType === 'week') { // 周
- day = new Date(this.startDate6);
- day.setDate(day.getDate() + 7);
- }
- if (chartType === 'month') { // 月
- day = new Date(this.startDate7);
- day.setMonth(day.getMonth() + 1);
- }
- if (chartType === 'year') { // 年
- day = new Date(this.startDate8);
- day.setFullYear(day.getFullYear() + 1);
- }
- 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
- };
- if (chartType == 'day') {
- param['startDate'] = this.startDate1;
- param['endDate'] = this.startDate1;
- }
- if (chartType == 'week') {
- param['startDate'] = this.startDate2;
- param['endDate'] = this.endDate2;
- }
- if (chartType == 'month') {
- param['startDate'] = this.startDate3;
- param['endDate'] = this.endDate3;
- }
- if (chartType == 'year') {
- param['startDate'] = this.startDate4;
- param['endDate'] = this.endDate4;
- }
- if (this.adminId) { // 子组件,则拿传过来的参
- param['adminId'] = this.adminId;
- } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
- param['adminId'] = this.loginUser['id'];
- }
- var globalUser = uni.getStorageSync("globalUser");
- if (globalUser.id != 1) {
- if (param.adminId == null || param.adminId == undefined) {
- param['adminId'] = globalUser.id;
- }
- }
- if (this.equipmentId) {
- param['equipmentId'] = this.equipmentId;
- }
- param['changeType'] = this.index;
- return this.getEquipmentStatistics(param)
- .then(data => {
- uni.stopPullDownRefresh();
- if (data.categories != null&&data.series != null) {
- if (param['chartType'] == 'day') {
- canvaColumn1 = this.initChart('canvaColumn1', data);
- }
- if (param['chartType'] == 'week') {
- canvaColumn2 = this.initChart('canvaColumn2', data);
- }
- if (param['chartType'] == 'month') {
- canvaColumn3 = this.initChart('canvaColumn3', data);
- }
- if (param['chartType'] == 'year') {
- canvaColumn4 = this.initChart('canvaColumn4', data);
- }
- }
- }, _ => {
- uni.stopPullDownRefresh();
- if (param['chartType'] == 'day') {
- canvaColumn1 = this.initChart('canvaColumn1', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'week') {
- canvaColumn2 = this.initChart('canvaColumn2', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'month') {
- canvaColumn3 = this.initChart('canvaColumn3', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- if (param['chartType'] == 'year') {
- canvaColumn4 = this.initChart('canvaColumn4', {
- categories: ['暂无数据'],
- series: [{
- name: '销售个数',
- data: [0]
- }]
- });
- }
- });
- },
- // getProvinceData(chartType) {
- // const param = {
- // 'chartType': chartType
- // };
- // if (chartType == 'day') {
- // param['startDate'] = this.startDate5;
- // param['endDate'] = this.startDate5;
- // }
- // if (chartType == 'week') {
- // param['startDate'] = this.startDate6;
- // param['endDate'] = this.endDate6;
- // }
- // if (chartType == 'month') {
- // param['startDate'] = this.startDate7;
- // param['endDate'] = this.endDate7;
- // }
- // if (chartType == 'year') {
- // param['startDate'] = this.startDate8;
- // param['endDate'] = this.endDate8;
- // }
- // 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.getProvince(param)
- // .then(data => {
- // uni.stopPullDownRefresh();
- // if (param['chartType'] == 'day') {
- // canvaColumn5 = this.initChart2('canvaColumn5', data);
- // }
- // if (param['chartType'] == 'week') {
- // canvaColumn6 = this.initChart2('canvaColumn6', data);
- // }
- // if (param['chartType'] == 'month') {
- // canvaColumn7 = this.initChart2('canvaColumn7', data);
- // }
- // if (param['chartType'] == 'year') {
- // canvaColumn8 = this.initChart2('canvaColumn8', data);
- // }
- // }, _ => {
- // uni.stopPullDownRefresh();
- // if (param['chartType'] == 'day') {
- // canvaColumn5 = this.initChart2('canvaColumn5', {
- // categories: ['暂无数据'],
- // series: [{
- // name: '平均销售额',
- // data: [0]
- // }]
- // });
- // }
- // if (param['chartType'] == 'week') {
- // canvaColumn6 = this.initChart2('canvaColumn6', {
- // categories: ['暂无数据'],
- // series: [{
- // name: '平均销售额',
- // data: [0]
- // }]
- // });
- // }
- // if (param['chartType'] == 'month') {
- // canvaColumn7 = this.initChart2('canvaColumn7', {
- // categories: ['暂无数据'],
- // series: [{
- // name: '平均销售额',
- // data: [0]
- // }]
- // });
- // }
- // if (param['chartType'] == 'year') {
- // canvaColumn8 = this.initChart2('canvaColumn8', {
- // categories: ['暂无数据'],
- // series: [{
- // name: '平均销售额',
- // data: [0]
- // }]
- // });
- // }
- // });
- // },
- // 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,
- 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.cWidth * _self.pixelRatio,
- height: _self.cHeight * _self.pixelRatio,
- extra: {
- column: {
- // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
- width: 18
- }
- }
- });
- },
- initChart2(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.cWidth2 * _self.pixelRatio,
- height: _self.cHeight2 * _self.pixelRatio,
- extra: {
- column: {
- 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
- }
- }
- });
- },
- touchLine1(e) {
- if (canvaColumn1) {
- canvaColumn1.scrollStart(e);
- }
- },
- moveLine1(e) {
- if (canvaColumn1) {
- canvaColumn1.scroll(e);
- }
- },
- touchEndLine1(e) {
- if (canvaColumn1) {
- canvaColumn1.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn1.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine2(e) {
- if (canvaColumn2) {
- canvaColumn2.scrollStart(e);
- }
- },
- moveLine2(e) {
- if (canvaColumn2) {
- canvaColumn2.scroll(e);
- }
- },
- touchEndLine2(e) {
- if (canvaColumn2) {
- canvaColumn2.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn2.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine3(e) {
- if (canvaColumn3) {
- canvaColumn3.scrollStart(e);
- }
- },
- moveLine3(e) {
- if (canvaColumn3) {
- canvaColumn3.scroll(e);
- }
- },
- touchEndLine3(e) {
- if (canvaColumn3) {
- canvaColumn3.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn3.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine4(e) {
- if (canvaColumn4) {
- canvaColumn4.scrollStart(e);
- }
- },
- moveLine4(e) {
- if (canvaColumn4) {
- canvaColumn4.scroll(e);
- }
- },
- touchEndLine4(e) {
- if (canvaColumn4) {
- canvaColumn4.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn4.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine5(e) {
- if (canvaColumn5) {
- canvaColumn5.scrollStart(e);
- }
- },
- moveLine5(e) {
- if (canvaColumn5) {
- canvaColumn5.scroll(e);
- }
- },
- touchEndLine5(e) {
- if (canvaColumn5) {
- canvaColumn5.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn5.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine6(e) {
- if (canvaColumn6) {
- canvaColumn6.scrollStart(e);
- }
- },
- moveLine6(e) {
- if (canvaColumn6) {
- canvaColumn6.scroll(e);
- }
- },
- touchEndLine6(e) {
- if (canvaColumn6) {
- canvaColumn6.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn6.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine7(e) {
- if (canvaColumn7) {
- canvaColumn7.scrollStart(e);
- }
- },
- moveLine7(e) {
- if (canvaColumn7) {
- canvaColumn7.scroll(e);
- }
- },
- touchEndLine7(e) {
- if (canvaColumn7) {
- canvaColumn7.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn7.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- touchLine8(e) {
- if (canvaColumn8) {
- canvaColumn8.scrollStart(e);
- }
- },
- moveLine8(e) {
- if (canvaColumn8) {
- canvaColumn8.scroll(e);
- }
- },
- touchEndLine8(e) {
- if (canvaColumn8) {
- canvaColumn8.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaColumn8.showToolTip(e, {
- format: function(item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- }
- },
- 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>
- <style>
- page {
- /* background: #F2F2F2; */
- background: #FFFFFF;
- width: 750upx;
- overflow-x: hidden;
- }
- .head {
- display: flex;
- flex-direction: row;
- background: #206DC3;
- width: 750upx;
- height: 120upx;
- }
- .title {
- /* border-left: 10upx solid #0ea391; */
- color: #363D44;
- font-size: 62upx;
- font-family: "PingFang-SC-Bold";
- text-align: center;
- margin: auto;
- }
- .ri {
- width: 690upx;
- height: 210upx;
- background: #FFFFFF;
- border-radius: 15upx;
- /* 上移 */
- transform: translateY(-90upx);
- text-align: center;
- margin: auto;
- display: flex;
- flex-direction: row;
- /* 阴影 */
- box-shadow: 0upx -1upx 20upx #D3D3D3;
- /* box-shadow:0px 0px 10px 5px #aaa; */
- }
- .riShell {
- display: flex;
- flex-direction: row;
- margin: auto;
- }
- .riTitle {
- display: flex;
- flex-direction: column;
- margin: auto;
- }
- .riqi {
- display: flex;
- flex-direction: column;
- margin: auto;
- }
- .fourTitle {
- width: 690upx;
- height: 294upx;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- background: #FFFFFF;
- box-shadow: 0upx 0upx 20upx #D3D3D3;
- margin: auto;
- border-radius: 15upx;
- transform: translateY(-60upx);
- }
- .four {
- display: flex;
- flex-direction: row;
- margin: auto;
- width: 48%;
- }
- .fourImg {
- width: 54upx;
- height: 54upx;
- }
- .qiun-padding {
- padding: 2%;
- width: 96%;
- }
- .qiun-wrap {
- display: flex;
- flex-wrap: wrap;
- }
- .qiun-rows {
- display: flex;
- flex-direction: row !important;
- }
- .qiun-columns {
- display: flex;
- flex-direction: column !important;
- }
- .qiun-common-mt {
- margin-top: 0upx;
- height: 160upx;
- }
- .qiun-bg-white {
- background: #FFFFFF;
- }
- .qiun-title-bar {
- width: 100%;
- /* padding: 10upx 2%; */
- flex-wrap: nowrap;
- border-radius: 15upx;
- }
- .qiun-title-dot-light {
- width: 92%;
- border-left: 20upx;
- border-left: 10upx solid #206DC3;
- padding-left: 10upx;
- height: 32upx;
- font-family: "PingFang-SC-Bold";
- font-weight: bold;
- margin: auto;
- font-size: 32upx;
- color: #363D44;
- }
- .dis {
- transform: translateY(-13upx);
- font-size: 32upx;
- font-family: "PingFang-SC-Bold";
- color: #363D44;
- }
- .shijian {
- padding-top: 30upx;
- height: 80upx;
- width: 680upx;
- margin: auto;
- box-shadow: 0upx 0upx 10upx #D3D3D3;
- }
- .line {
- background: #ECECEC;
- height: 20upx;
- }
- .qiun-charts {
- width: 690upx;
- height: 550upx;
- padding-top: 50upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .qiun-charts2 {
- width: 690upx;
- height: 370upx;
- padding-top: 50upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .charts {
- width: 690upx;
- height: 550upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .charts2 {
- width: 690upx;
- height: 370upx;
- background-color: #FFFFFF;
- margin: auto;
- }
- .preImg {
- position: absolute;
- right: 30upx;
- width: 71upx;
- height: 57upx;
- padding-right: 80%;
- }
- .nextImg {
- position: absolute;
- right: 30upx;
- width: 71upx;
- height: 57upx;
- }
- .tr {
- padding-top: 15upx;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- font-size: 26upx;
- font-family: "PingFang-SC-Bold";
- }
- .td-left {
- font-family: "PingFang-SC-Bold";
- margin: auto;
- font-size: 26upx;
- width: 30%;
- text-align: right;
- }
- .td-right {
- font-family: "PingFang-SC-Bold";
- /* font-weight: bold; */
- margin: auto;
- /* font-size: 26upx; */
- width: 70%;
- text-align: left;
- }
- </style>
|