equipmentStatistics.vue 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457
  1. <!-- 机器销售排行 -->
  2. <template>
  3. <view>
  4. <view class="head">
  5. </view>
  6. <view class="ri">
  7. <font class="title">{{$t('equipmentStatics.title')}}</font>
  8. </view>
  9. <view class="uni-list">
  10. <view class="uni-list-cell">
  11. <view class="uni-list-cell-left">
  12. {{$t('equipmentStatics.changeType')}}:
  13. </view>
  14. <view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
  15. <picker @change="changeType" :value="index" :range="changeTypeList">
  16. <view class="uni-input">{{changeTypeList[index]}}</view>
  17. </picker>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="qiun-columns">
  22. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  23. <view class="qiun-title-dot-light">
  24. <view class="dis">{{$t('equipmentStatics.day')}}</view>
  25. </view>
  26. <view class="shijian" style="text-align: center;position: relative;">
  27. <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  28. <span>{{startDate1}}</span>
  29. <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  30. </view>
  31. </view>
  32. <view class="qiun-charts" style="background-color: #FFFFFF;">
  33. <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true
  34. @touchstart="touchLine1" @touchmove="moveLine1" @touchend="touchEndLine1"
  35. style="background-color: #FFFFFF;"></canvas>
  36. </view>
  37. </view>
  38. <view class="line"></view>
  39. <view class="qiun-columns">
  40. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  41. <view class="qiun-title-dot-light">
  42. <view class="dis">{{$t('equipmentStatics.week')}}</view>
  43. </view>
  44. <view class="shijian" style="text-align: center;position: relative;">
  45. <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  46. <span>{{startDate2}} -- {{endDate2}}</span>
  47. <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  48. </view>
  49. </view>
  50. <view class="qiun-charts" style="background-color: #FFFFFF;">
  51. <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true
  52. @touchstart="touchLine2" @touchmove="moveLine2" @touchend="touchEndLine2"
  53. style="background-color: #FFFFFF;"></canvas>
  54. </view>
  55. </view>
  56. <view class="line"></view>
  57. <view class="qiun-columns">
  58. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  59. <view class="qiun-title-dot-light">
  60. <view class="dis">{{$t('equipmentStatics.month')}}</view>
  61. </view>
  62. <view class="shijian" style="text-align: center;position: relative;">
  63. <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  64. <span>{{startDate3}} -- {{endDate3}}</span>
  65. <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  66. </view>
  67. </view>
  68. <view class="qiun-charts" style="background-color: #FFFFFF;">
  69. <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true
  70. @touchstart="touchLine3" @touchmove="moveLine3" @touchend="touchEndLine3"
  71. style="background-color: #FFFFFF;"></canvas>
  72. </view>
  73. </view>
  74. <view class="line"></view>
  75. <view class="qiun-columns">
  76. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  77. <view class="qiun-title-dot-light">
  78. <view class="dis">{{$t('equipmentStatics.year')}}</view>
  79. </view>
  80. <view class="shijian" style="text-align: center;position: relative;">
  81. <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  82. <span>{{startDate4}} -- {{endDate4}}</span>
  83. <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  84. </view>
  85. </view>
  86. <view class="qiun-charts" style="background-color: #FFFFFF;">
  87. <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true
  88. @touchstart="touchLine4" @touchmove="moveLine4" @touchend="touchEndLine4"
  89. style="background-color: #FFFFFF;"></canvas>
  90. </view>
  91. </view>
  92. <!-- 各省份平均销售数据 -->
  93. <view v-if="show">
  94. <view class="qiun-columns">
  95. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  96. <view class="qiun-title-dot-light">
  97. <view class="dis">全国平均日销售排行(某省日销售总额/省机器数量)</view>
  98. </view>
  99. <view class="shijian" style="text-align: center;position: relative;">
  100. <image @click="pre2('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  101. <span>{{startDate5}}</span>
  102. <image @click="next2('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  103. </view>
  104. </view>
  105. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  106. <canvas canvas-id="canvaColumn5" id="canvaColumn5" class="charts2" disable-scroll=true
  107. @touchstart="touchLine5" @touchmove="moveLine5" @touchend="touchEndLine5"
  108. style="background-color: #FFFFFF;"></canvas>
  109. </view>
  110. </view>
  111. <view class="line"></view>
  112. <view class="qiun-columns">
  113. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  114. <view class="qiun-title-dot-light">
  115. <view class="dis">全国平均周销售排行</view>
  116. </view>
  117. <view class="shijian" style="text-align: center;position: relative;">
  118. <image @click="pre2('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  119. <span>{{startDate6}} 至 {{endDate6}}</span>
  120. <image @click="next2('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  121. </view>
  122. </view>
  123. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  124. <canvas canvas-id="canvaColumn6" id="canvaColumn6" class="charts2" disable-scroll=true
  125. @touchstart="touchLine6" @touchmove="moveLine6" @touchend="touchEndLine6"
  126. style="background-color: #FFFFFF;"></canvas>
  127. </view>
  128. </view>
  129. <view class="line"></view>
  130. <view class="qiun-columns">
  131. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  132. <view class="qiun-title-dot-light">
  133. <view class="dis">全国平均月销售排行</view>
  134. </view>
  135. <view class="shijian" style="text-align: center;position: relative;">
  136. <image @click="pre2('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  137. <span>{{startDate7}} 至 {{endDate7}}</span>
  138. <image @click="next2('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  139. </view>
  140. </view>
  141. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  142. <canvas canvas-id="canvaColumn7" id="canvaColumn7" class="charts2" disable-scroll=true
  143. @touchstart="touchLine7" @touchmove="moveLine7" @touchend="touchEndLine7"
  144. style="background-color: #FFFFFF;"></canvas>
  145. </view>
  146. </view>
  147. <view class="line"></view>
  148. <view class="qiun-columns">
  149. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  150. <view class="qiun-title-dot-light">
  151. <view class="dis">全国平均年销售排行</view>
  152. </view>
  153. <view class="shijian" style="text-align: center;position: relative;">
  154. <image @click="pre2('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  155. <span>{{startDate8}} 至 {{endDate8}}</span>
  156. <image @click="next2('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  157. </view>
  158. </view>
  159. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  160. <canvas canvas-id="canvaColumn8" id="canvaColumn8" class="charts2" disable-scroll=true
  161. @touchstart="touchLine8" @touchmove="moveLine8" @touchend="touchEndLine8"
  162. style="background-color: #FFFFFF;"></canvas>
  163. </view>
  164. </view>
  165. <!-- 各省销售额 -->
  166. <view class="qiun-columns">
  167. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  168. <view class="qiun-title-dot-light">
  169. <view class="dis">全国日销售排行(全省当日销售总额)</view>
  170. </view>
  171. <view class="shijian" style="text-align: center;position: relative;">
  172. <image @click="pre3('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  173. <span>{{startDate9}}</span>
  174. <image @click="next3('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  175. </view>
  176. </view>
  177. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  178. <canvas canvas-id="canvaColumn9" id="canvaColumn9" class="charts2" disable-scroll=true
  179. @touchstart="touchLine9" @touchmove="moveLine9" @touchend="touchEndLine9"
  180. style="background-color: #FFFFFF;"></canvas>
  181. </view>
  182. </view>
  183. <view class="line"></view>
  184. <view class="qiun-columns">
  185. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  186. <view class="qiun-title-dot-light">
  187. <view class="dis">全国周销售排行</view>
  188. </view>
  189. <view class="shijian" style="text-align: center;position: relative;">
  190. <image @click="pre3('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  191. <span>{{startDate10}} 至 {{endDate10}}</span>
  192. <image @click="next3('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  193. </view>
  194. </view>
  195. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  196. <canvas canvas-id="canvaColumn10" id="canvaColumn10" class="charts2" disable-scroll=true
  197. @touchstart="touchLine10" @touchmove="moveLine10" @touchend="touchEndLine10"
  198. style="background-color: #FFFFFF;"></canvas>
  199. </view>
  200. </view>
  201. <view class="line"></view>
  202. <view class="qiun-columns">
  203. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  204. <view class="qiun-title-dot-light">
  205. <view class="dis">全国月销售排行</view>
  206. </view>
  207. <view class="shijian" style="text-align: center;position: relative;">
  208. <image @click="pre3('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  209. <span>{{startDate11}} 至 {{endDate11}}</span>
  210. <image @click="next3('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  211. </view>
  212. </view>
  213. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  214. <canvas canvas-id="canvaColumn11" id="canvaColumn11" class="charts2" disable-scroll=true
  215. @touchstart="touchLine11" @touchmove="moveLine11" @touchend="touchEndLine11"
  216. style="background-color: #FFFFFF;"></canvas>
  217. </view>
  218. </view>
  219. <view class="line"></view>
  220. <view class="qiun-columns">
  221. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  222. <view class="qiun-title-dot-light">
  223. <view class="dis">全国年销售排行</view>
  224. </view>
  225. <view class="shijian" style="text-align: center;position: relative;">
  226. <image @click="pre3('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  227. <span>{{startDate12}} 至 {{endDate12}}</span>
  228. <image @click="next3('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  229. </view>
  230. </view>
  231. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  232. <canvas canvas-id="canvaColumn12" id="canvaColumn12" class="charts2" disable-scroll=true
  233. @touchstart="touchLine12" @touchmove="moveLine12" @touchend="touchEndLine12"
  234. style="background-color: #FFFFFF;"></canvas>
  235. </view>
  236. </view>
  237. </view>
  238. </view>
  239. </template>
  240. <script>
  241. import {
  242. mapState,
  243. mapActions,
  244. mapMutations
  245. } from 'vuex';
  246. import uCharts from '@/components/u-charts/u-charts.js';
  247. import {
  248. dateUtils
  249. } from '@/common/util.js';
  250. var _self;
  251. var canvaColumn1 = null;
  252. var canvaColumn2 = null;
  253. var canvaColumn3 = null;
  254. var canvaColumn4 = null;
  255. var canvaColumn5 = null;
  256. var canvaColumn6 = null;
  257. var canvaColumn7 = null;
  258. var canvaColumn8 = null;
  259. var canvaColumn9 = null;
  260. var canvaColumn10 = null;
  261. var canvaColumn11 = null;
  262. var canvaColumn12 = null;
  263. export default {
  264. name: 'equipmentStatistics',
  265. props: {
  266. adminId: '',
  267. pname: '',
  268. },
  269. data() {
  270. return {
  271. cWidth: '',
  272. cHeight: '',
  273. pixelRatio: 1,
  274. tese: 0,
  275. type: 0,
  276. index: 0,
  277. changeTypeList: [this.$t('equipmentStatics.sales'), this.$t('equipmentStatics.flowers')],
  278. startDate1: '',
  279. endDate1: '',
  280. startDate2: '',
  281. endDate2: '',
  282. startDate3: '',
  283. endDate3: '',
  284. startDate4: '',
  285. endDate4: '',
  286. startDate5: '',
  287. endDate5: '',
  288. startDate6: '',
  289. endDate6: '',
  290. startDate7: '',
  291. endDate7: '',
  292. startDate8: '',
  293. endDate8: '',
  294. startDate9: '',
  295. endDate9: '',
  296. startDate10: '',
  297. endDate10: '',
  298. startDate11: '',
  299. endDate11: '',
  300. startDate12: '',
  301. endDate12: '',
  302. show: false
  303. }
  304. },
  305. computed: {
  306. ...mapState(['loginUser']),
  307. },
  308. mounted() {
  309. // this.init2();
  310. },
  311. onShow() {
  312. uni.setNavigationBarTitle({
  313. title: this.$t('equipmentStatics.title')
  314. });
  315. uni.setTabBarItem({
  316. index: 2,
  317. text: this.$t('tabs.tab3')
  318. });
  319. this.tese = this.tese + 1;
  320. var globalUser = uni.getStorageSync("globalUser");
  321. if (globalUser.id == '1') {
  322. this.show = true
  323. }
  324. var token = uni.getStorageSync("token");
  325. if (token.length > 1) {
  326. this.init();
  327. } else {
  328. uni.reLaunch({
  329. url: '../Login/Login',
  330. });
  331. }
  332. },
  333. methods: {
  334. ...mapActions('chart', ['getEquipmentStatistics', 'getMainStatistics',
  335. 'getMachineNum'
  336. ]),
  337. async init() {
  338. if (this.pname === '') {
  339. this.pname = uni.getStorageSync("name");
  340. }
  341. // console.log("adminId:" + this.adminId)
  342. _self = this;
  343. //图表中图
  344. this.cWidth = uni.upx2px(690);
  345. this.cHeight = uni.upx2px(500);
  346. await this.initDateRang(new Date(), 'day');
  347. await this.initDateRang(new Date(), 'week');
  348. if (this.tese == 1) {
  349. await this.initDateRang(new Date(), 'month');
  350. await this.initDateRang(new Date(), 'year');
  351. }
  352. setTimeout(function() {
  353. _self.init2();
  354. }, 3000);
  355. // await this.init2();
  356. },
  357. async init2() {
  358. if (this.pname === '') {
  359. this.pname = uni.getStorageSync("name");
  360. }
  361. _self = this;
  362. //图表中图
  363. this.cWidth2 = uni.upx2px(690);
  364. this.cHeight2 = uni.upx2px(370);
  365. if (this.show == true) {
  366. await this.initDateRang2(new Date(), 'day');
  367. await this.initDateRang2(new Date(), 'week');
  368. if (this.tese == 1) {
  369. await this.initDateRang2(new Date(), 'month');
  370. await this.initDateRang2(new Date(), 'year');
  371. }
  372. }
  373. setTimeout(function() {
  374. _self.init3();
  375. }, 9000);
  376. // await this.init3();
  377. },
  378. async init3() {
  379. if (this.pname === '') {
  380. this.pname = uni.getStorageSync("name");
  381. }
  382. _self = this;
  383. //图表中图
  384. this.cWidth3 = uni.upx2px(690);
  385. this.cHeight3 = uni.upx2px(370);
  386. if (this.show == true) {
  387. await this.initDateRang3(new Date(), 'day');
  388. await this.initDateRang3(new Date(), 'week');
  389. if (this.tese == 1) {
  390. await this.initDateRang3(new Date(), 'month');
  391. await this.initDateRang3(new Date(), 'year');
  392. }
  393. }
  394. },
  395. changeType: function(e) {
  396. this.index = e.target.value;
  397. // this.type = e.target.value;
  398. this.tese = 1;
  399. this.init();
  400. },
  401. initDateRang(day, chartType) {
  402. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  403. if (chartType === 'day') {
  404. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  405. }
  406. if (chartType === 'week') {
  407. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  408. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  409. }
  410. if (chartType === 'month') {
  411. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  412. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  413. }
  414. if (chartType === 'year') {
  415. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  416. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  417. }
  418. return this.getStatisticsData(chartType);
  419. },
  420. // initDateRang2(day, chartType) {
  421. // const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  422. // if (chartType === 'day') {
  423. // this.startDate5 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  424. // }
  425. // if (chartType === 'week') {
  426. // this.startDate6 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  427. // this.endDate6 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  428. // }
  429. // if (chartType === 'month') {
  430. // this.startDate7 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  431. // this.endDate7 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  432. // }
  433. // if (chartType === 'year') {
  434. // this.startDate8 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  435. // this.endDate8 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  436. // }
  437. // return this.getProvinceData(chartType);
  438. // },
  439. // initDateRang3(day, chartType) {
  440. // const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  441. // if (chartType === 'day') {
  442. // this.startDate9 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  443. // }
  444. // if (chartType === 'week') {
  445. // this.startDate10 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  446. // this.endDate10 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  447. // }
  448. // if (chartType === 'month') {
  449. // this.startDate11 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  450. // this.endDate11 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  451. // }
  452. // if (chartType === 'year') {
  453. // this.startDate12 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  454. // this.endDate12 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  455. // }
  456. // return this.getProvinceAllData(chartType);
  457. // },
  458. /**上一个 */
  459. pre(chartType) {
  460. let day;
  461. if (chartType === 'day') { // 日
  462. day = new Date(this.startDate1);
  463. day.setDate(day.getDate() - 1);
  464. }
  465. if (chartType === 'week') { // 周
  466. day = new Date(this.startDate2);
  467. day.setDate(day.getDate() - 7);
  468. }
  469. if (chartType === 'month') { // 月
  470. day = new Date(this.startDate3);
  471. day.setMonth(day.getMonth() - 1);
  472. }
  473. if (chartType === 'year') { // 年
  474. day = new Date(this.startDate4);
  475. day.setFullYear(day.getFullYear() - 1);
  476. }
  477. this.initDateRang(day, chartType);
  478. },
  479. pre2(chartType) {
  480. let day;
  481. if (chartType === 'day') { // 日
  482. day = new Date(this.startDate5);
  483. day.setDate(day.getDate() - 1);
  484. }
  485. if (chartType === 'week') { // 周
  486. day = new Date(this.startDate6);
  487. day.setDate(day.getDate() - 7);
  488. }
  489. if (chartType === 'month') { // 月
  490. day = new Date(this.startDate7);
  491. day.setMonth(day.getMonth() - 1);
  492. }
  493. if (chartType === 'year') { // 年
  494. day = new Date(this.startDate8);
  495. day.setFullYear(day.getFullYear() - 1);
  496. }
  497. this.initDateRang2(day, chartType);
  498. },
  499. pre3(chartType) {
  500. let day;
  501. if (chartType === 'day') { // 日
  502. day = new Date(this.startDate9);
  503. day.setDate(day.getDate() - 1);
  504. }
  505. if (chartType === 'week') { // 周
  506. day = new Date(this.startDate10);
  507. day.setDate(day.getDate() - 7);
  508. }
  509. if (chartType === 'month') { // 月
  510. day = new Date(this.startDate11);
  511. day.setMonth(day.getMonth() - 1);
  512. }
  513. if (chartType === 'year') { // 年
  514. day = new Date(this.startDate12);
  515. day.setFullYear(day.getFullYear() - 1);
  516. }
  517. this.initDateRang3(day, chartType);
  518. },
  519. /**下一个 */
  520. next(chartType) {
  521. let day;
  522. if (chartType === 'day') { // 日
  523. day = new Date(this.startDate1);
  524. day.setDate(day.getDate() + 1);
  525. }
  526. if (chartType === 'week') { // 周
  527. day = new Date(this.startDate2);
  528. day.setDate(day.getDate() + 7);
  529. }
  530. if (chartType === 'month') { // 月
  531. day = new Date(this.startDate3);
  532. day.setMonth(day.getMonth() + 1);
  533. }
  534. if (chartType === 'year') { // 年
  535. day = new Date(this.startDate4);
  536. day.setFullYear(day.getFullYear() + 1);
  537. }
  538. this.initDateRang(day, chartType);
  539. },
  540. next2(chartType) {
  541. let day;
  542. if (chartType === 'day') { // 日
  543. day = new Date(this.startDate5);
  544. day.setDate(day.getDate() + 1);
  545. }
  546. if (chartType === 'week') { // 周
  547. day = new Date(this.startDate6);
  548. day.setDate(day.getDate() + 7);
  549. }
  550. if (chartType === 'month') { // 月
  551. day = new Date(this.startDate7);
  552. day.setMonth(day.getMonth() + 1);
  553. }
  554. if (chartType === 'year') { // 年
  555. day = new Date(this.startDate8);
  556. day.setFullYear(day.getFullYear() + 1);
  557. }
  558. this.initDateRang2(day, chartType);
  559. },
  560. next3(chartType) {
  561. let day;
  562. if (chartType === 'day') { // 日
  563. day = new Date(this.startDate9);
  564. day.setDate(day.getDate() + 1);
  565. }
  566. if (chartType === 'week') { // 周
  567. day = new Date(this.startDate10);
  568. day.setDate(day.getDate() + 7);
  569. }
  570. if (chartType === 'month') { // 月
  571. day = new Date(this.startDate11);
  572. day.setMonth(day.getMonth() + 1);
  573. }
  574. if (chartType === 'year') { // 年
  575. day = new Date(this.startDate12);
  576. day.setFullYear(day.getFullYear() + 1);
  577. }
  578. this.initDateRang3(day, chartType);
  579. },
  580. getStatisticsData(chartType) {
  581. const param = {
  582. 'chartType': chartType
  583. };
  584. if (chartType == 'day') {
  585. param['startDate'] = this.startDate1;
  586. param['endDate'] = this.startDate1;
  587. }
  588. if (chartType == 'week') {
  589. param['startDate'] = this.startDate2;
  590. param['endDate'] = this.endDate2;
  591. }
  592. if (chartType == 'month') {
  593. param['startDate'] = this.startDate3;
  594. param['endDate'] = this.endDate3;
  595. }
  596. if (chartType == 'year') {
  597. param['startDate'] = this.startDate4;
  598. param['endDate'] = this.endDate4;
  599. }
  600. if (this.adminId) { // 子组件,则拿传过来的参
  601. param['adminId'] = this.adminId;
  602. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  603. param['adminId'] = this.loginUser['id'];
  604. }
  605. var globalUser = uni.getStorageSync("globalUser");
  606. if (globalUser.id != 1) {
  607. if (param.adminId == null || param.adminId == undefined) {
  608. param['adminId'] = globalUser.id;
  609. }
  610. }
  611. if (this.equipmentId) {
  612. param['equipmentId'] = this.equipmentId;
  613. }
  614. param['changeType'] = this.index;
  615. return this.getEquipmentStatistics(param)
  616. .then(data => {
  617. uni.stopPullDownRefresh();
  618. if (data.categories != null&&data.series != null) {
  619. if (param['chartType'] == 'day') {
  620. canvaColumn1 = this.initChart('canvaColumn1', data);
  621. }
  622. if (param['chartType'] == 'week') {
  623. canvaColumn2 = this.initChart('canvaColumn2', data);
  624. }
  625. if (param['chartType'] == 'month') {
  626. canvaColumn3 = this.initChart('canvaColumn3', data);
  627. }
  628. if (param['chartType'] == 'year') {
  629. canvaColumn4 = this.initChart('canvaColumn4', data);
  630. }
  631. }
  632. }, _ => {
  633. uni.stopPullDownRefresh();
  634. if (param['chartType'] == 'day') {
  635. canvaColumn1 = this.initChart('canvaColumn1', {
  636. categories: ['暂无数据'],
  637. series: [{
  638. name: '销售个数',
  639. data: [0]
  640. }]
  641. });
  642. }
  643. if (param['chartType'] == 'week') {
  644. canvaColumn2 = this.initChart('canvaColumn2', {
  645. categories: ['暂无数据'],
  646. series: [{
  647. name: '销售个数',
  648. data: [0]
  649. }]
  650. });
  651. }
  652. if (param['chartType'] == 'month') {
  653. canvaColumn3 = this.initChart('canvaColumn3', {
  654. categories: ['暂无数据'],
  655. series: [{
  656. name: '销售个数',
  657. data: [0]
  658. }]
  659. });
  660. }
  661. if (param['chartType'] == 'year') {
  662. canvaColumn4 = this.initChart('canvaColumn4', {
  663. categories: ['暂无数据'],
  664. series: [{
  665. name: '销售个数',
  666. data: [0]
  667. }]
  668. });
  669. }
  670. });
  671. },
  672. // getProvinceData(chartType) {
  673. // const param = {
  674. // 'chartType': chartType
  675. // };
  676. // if (chartType == 'day') {
  677. // param['startDate'] = this.startDate5;
  678. // param['endDate'] = this.startDate5;
  679. // }
  680. // if (chartType == 'week') {
  681. // param['startDate'] = this.startDate6;
  682. // param['endDate'] = this.endDate6;
  683. // }
  684. // if (chartType == 'month') {
  685. // param['startDate'] = this.startDate7;
  686. // param['endDate'] = this.endDate7;
  687. // }
  688. // if (chartType == 'year') {
  689. // param['startDate'] = this.startDate8;
  690. // param['endDate'] = this.endDate8;
  691. // }
  692. // if (this.adminId) { // 子组件,则拿传过来的参
  693. // param['adminId'] = this.adminId;
  694. // } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  695. // param['adminId'] = this.loginUser['id'];
  696. // }
  697. // if (this.equipmentId) {
  698. // param['equipmentId'] = this.equipmentId;
  699. // }
  700. // return this.getProvince(param)
  701. // .then(data => {
  702. // uni.stopPullDownRefresh();
  703. // if (param['chartType'] == 'day') {
  704. // canvaColumn5 = this.initChart2('canvaColumn5', data);
  705. // }
  706. // if (param['chartType'] == 'week') {
  707. // canvaColumn6 = this.initChart2('canvaColumn6', data);
  708. // }
  709. // if (param['chartType'] == 'month') {
  710. // canvaColumn7 = this.initChart2('canvaColumn7', data);
  711. // }
  712. // if (param['chartType'] == 'year') {
  713. // canvaColumn8 = this.initChart2('canvaColumn8', data);
  714. // }
  715. // }, _ => {
  716. // uni.stopPullDownRefresh();
  717. // if (param['chartType'] == 'day') {
  718. // canvaColumn5 = this.initChart2('canvaColumn5', {
  719. // categories: ['暂无数据'],
  720. // series: [{
  721. // name: '平均销售额',
  722. // data: [0]
  723. // }]
  724. // });
  725. // }
  726. // if (param['chartType'] == 'week') {
  727. // canvaColumn6 = this.initChart2('canvaColumn6', {
  728. // categories: ['暂无数据'],
  729. // series: [{
  730. // name: '平均销售额',
  731. // data: [0]
  732. // }]
  733. // });
  734. // }
  735. // if (param['chartType'] == 'month') {
  736. // canvaColumn7 = this.initChart2('canvaColumn7', {
  737. // categories: ['暂无数据'],
  738. // series: [{
  739. // name: '平均销售额',
  740. // data: [0]
  741. // }]
  742. // });
  743. // }
  744. // if (param['chartType'] == 'year') {
  745. // canvaColumn8 = this.initChart2('canvaColumn8', {
  746. // categories: ['暂无数据'],
  747. // series: [{
  748. // name: '平均销售额',
  749. // data: [0]
  750. // }]
  751. // });
  752. // }
  753. // });
  754. // },
  755. // getProvinceAllData(chartType) {
  756. // const param = {
  757. // 'chartType': chartType
  758. // };
  759. // if (chartType == 'day') {
  760. // param['startDate'] = this.startDate9;
  761. // param['endDate'] = this.startDate9;
  762. // }
  763. // if (chartType == 'week') {
  764. // param['startDate'] = this.startDate10;
  765. // param['endDate'] = this.endDate10;
  766. // }
  767. // if (chartType == 'month') {
  768. // param['startDate'] = this.startDate11;
  769. // param['endDate'] = this.endDate11;
  770. // }
  771. // if (chartType == 'year') {
  772. // param['startDate'] = this.startDate12;
  773. // param['endDate'] = this.endDate12;
  774. // }
  775. // if (this.adminId) { // 子组件,则拿传过来的参
  776. // param['adminId'] = this.adminId;
  777. // } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  778. // param['adminId'] = this.loginUser['id'];
  779. // }
  780. // if (this.equipmentId) {
  781. // param['equipmentId'] = this.equipmentId;
  782. // }
  783. // return this.getProvinceAll(param)
  784. // .then(data => {
  785. // uni.stopPullDownRefresh();
  786. // if (param['chartType'] == 'day') {
  787. // canvaColumn9 = this.initChart3('canvaColumn9', data);
  788. // }
  789. // if (param['chartType'] == 'week') {
  790. // canvaColumn10 = this.initChart3('canvaColumn10', data);
  791. // }
  792. // if (param['chartType'] == 'month') {
  793. // canvaColumn11 = this.initChart3('canvaColumn11', data);
  794. // }
  795. // if (param['chartType'] == 'year') {
  796. // canvaColumn12 = this.initChart3('canvaColumn12', data);
  797. // }
  798. // }, _ => {
  799. // uni.stopPullDownRefresh();
  800. // if (param['chartType'] == 'day') {
  801. // canvaColumn9 = this.initChart3('canvaColumn9', {
  802. // categories: ['暂无数据'],
  803. // series: [{
  804. // name: '销售额',
  805. // data: [0]
  806. // }]
  807. // });
  808. // }
  809. // if (param['chartType'] == 'week') {
  810. // canvaColumn10 = this.initChart3('canvaColumn10', {
  811. // categories: ['暂无数据'],
  812. // series: [{
  813. // name: '销售额',
  814. // data: [0]
  815. // }]
  816. // });
  817. // }
  818. // if (param['chartType'] == 'month') {
  819. // canvaColumn11 = this.initChart3('canvaColumn11', {
  820. // categories: ['暂无数据'],
  821. // series: [{
  822. // name: '销售额',
  823. // data: [0]
  824. // }]
  825. // });
  826. // }
  827. // if (param['chartType'] == 'year') {
  828. // canvaColumn12 = this.initChart3('canvaColumn12', {
  829. // categories: ['暂无数据'],
  830. // series: [{
  831. // name: '销售额',
  832. // data: [0]
  833. // }]
  834. // });
  835. // }
  836. // });
  837. // },
  838. initChart(canvasId, chartData) {
  839. return new uCharts({
  840. $this: _self,
  841. canvasId: canvasId,
  842. enableScroll: true,
  843. type: 'column',
  844. legend: true,
  845. fontSize: 11,
  846. background: '#FFFFFF', //y轴颜色
  847. pixelRatio: 1,
  848. animation: true,
  849. categories: chartData.categories,
  850. series: chartData.series,
  851. xAxis: {
  852. type: 'grid',
  853. gridType: 'dash',
  854. rotateLabel: true,
  855. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  856. scrollShow: true, //新增是否显示滚动条,默认false
  857. scrollAlign: 'left', //滚动条初始位置
  858. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  859. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  860. // disableGrid:true,
  861. },
  862. yAxis: {
  863. //disabled:true
  864. },
  865. dataLabel: true,
  866. width: _self.cWidth * _self.pixelRatio,
  867. height: _self.cHeight * _self.pixelRatio,
  868. extra: {
  869. column: {
  870. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  871. width: 18
  872. }
  873. }
  874. });
  875. },
  876. initChart2(canvasId, chartData) {
  877. return new uCharts({
  878. $this: _self,
  879. canvasId: canvasId,
  880. enableScroll: true,
  881. type: 'column',
  882. legend: true,
  883. fontSize: 11,
  884. background: '#FFFFFF', //y轴颜色
  885. pixelRatio: 1,
  886. animation: true,
  887. categories: chartData.categories,
  888. series: chartData.series,
  889. xAxis: {
  890. type: 'grid',
  891. gridType: 'dash',
  892. rotateLabel: true,
  893. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  894. scrollShow: true, //新增是否显示滚动条,默认false
  895. scrollAlign: 'left', //滚动条初始位置
  896. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  897. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  898. // disableGrid:true,
  899. },
  900. yAxis: {
  901. //disabled:true
  902. },
  903. dataLabel: true,
  904. width: _self.cWidth2 * _self.pixelRatio,
  905. height: _self.cHeight2 * _self.pixelRatio,
  906. extra: {
  907. column: {
  908. width: 18
  909. }
  910. }
  911. });
  912. },
  913. initChart3(canvasId, chartData) {
  914. return new uCharts({
  915. $this: _self,
  916. canvasId: canvasId,
  917. enableScroll: true,
  918. type: 'column',
  919. legend: true,
  920. fontSize: 11,
  921. background: '#FFFFFF', //y轴颜色
  922. pixelRatio: 1,
  923. animation: true,
  924. categories: chartData.categories,
  925. series: chartData.series,
  926. xAxis: {
  927. type: 'grid',
  928. gridType: 'dash',
  929. rotateLabel: true,
  930. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  931. scrollShow: true, //新增是否显示滚动条,默认false
  932. scrollAlign: 'left', //滚动条初始位置
  933. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  934. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  935. // disableGrid:true,
  936. },
  937. yAxis: {
  938. //disabled:true
  939. },
  940. dataLabel: true,
  941. width: _self.cWidth3 * _self.pixelRatio,
  942. height: _self.cHeight3 * _self.pixelRatio,
  943. extra: {
  944. column: {
  945. width: 18
  946. }
  947. }
  948. });
  949. },
  950. touchLine1(e) {
  951. if (canvaColumn1) {
  952. canvaColumn1.scrollStart(e);
  953. }
  954. },
  955. moveLine1(e) {
  956. if (canvaColumn1) {
  957. canvaColumn1.scroll(e);
  958. }
  959. },
  960. touchEndLine1(e) {
  961. if (canvaColumn1) {
  962. canvaColumn1.scrollEnd(e);
  963. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  964. canvaColumn1.showToolTip(e, {
  965. format: function(item, category) {
  966. return category + ' ' + item.name + ':' + item.data
  967. }
  968. });
  969. }
  970. },
  971. touchLine2(e) {
  972. if (canvaColumn2) {
  973. canvaColumn2.scrollStart(e);
  974. }
  975. },
  976. moveLine2(e) {
  977. if (canvaColumn2) {
  978. canvaColumn2.scroll(e);
  979. }
  980. },
  981. touchEndLine2(e) {
  982. if (canvaColumn2) {
  983. canvaColumn2.scrollEnd(e);
  984. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  985. canvaColumn2.showToolTip(e, {
  986. format: function(item, category) {
  987. return category + ' ' + item.name + ':' + item.data
  988. }
  989. });
  990. }
  991. },
  992. touchLine3(e) {
  993. if (canvaColumn3) {
  994. canvaColumn3.scrollStart(e);
  995. }
  996. },
  997. moveLine3(e) {
  998. if (canvaColumn3) {
  999. canvaColumn3.scroll(e);
  1000. }
  1001. },
  1002. touchEndLine3(e) {
  1003. if (canvaColumn3) {
  1004. canvaColumn3.scrollEnd(e);
  1005. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1006. canvaColumn3.showToolTip(e, {
  1007. format: function(item, category) {
  1008. return category + ' ' + item.name + ':' + item.data
  1009. }
  1010. });
  1011. }
  1012. },
  1013. touchLine4(e) {
  1014. if (canvaColumn4) {
  1015. canvaColumn4.scrollStart(e);
  1016. }
  1017. },
  1018. moveLine4(e) {
  1019. if (canvaColumn4) {
  1020. canvaColumn4.scroll(e);
  1021. }
  1022. },
  1023. touchEndLine4(e) {
  1024. if (canvaColumn4) {
  1025. canvaColumn4.scrollEnd(e);
  1026. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1027. canvaColumn4.showToolTip(e, {
  1028. format: function(item, category) {
  1029. return category + ' ' + item.name + ':' + item.data
  1030. }
  1031. });
  1032. }
  1033. },
  1034. touchLine5(e) {
  1035. if (canvaColumn5) {
  1036. canvaColumn5.scrollStart(e);
  1037. }
  1038. },
  1039. moveLine5(e) {
  1040. if (canvaColumn5) {
  1041. canvaColumn5.scroll(e);
  1042. }
  1043. },
  1044. touchEndLine5(e) {
  1045. if (canvaColumn5) {
  1046. canvaColumn5.scrollEnd(e);
  1047. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1048. canvaColumn5.showToolTip(e, {
  1049. format: function(item, category) {
  1050. return category + ' ' + item.name + ':' + item.data
  1051. }
  1052. });
  1053. }
  1054. },
  1055. touchLine6(e) {
  1056. if (canvaColumn6) {
  1057. canvaColumn6.scrollStart(e);
  1058. }
  1059. },
  1060. moveLine6(e) {
  1061. if (canvaColumn6) {
  1062. canvaColumn6.scroll(e);
  1063. }
  1064. },
  1065. touchEndLine6(e) {
  1066. if (canvaColumn6) {
  1067. canvaColumn6.scrollEnd(e);
  1068. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1069. canvaColumn6.showToolTip(e, {
  1070. format: function(item, category) {
  1071. return category + ' ' + item.name + ':' + item.data
  1072. }
  1073. });
  1074. }
  1075. },
  1076. touchLine7(e) {
  1077. if (canvaColumn7) {
  1078. canvaColumn7.scrollStart(e);
  1079. }
  1080. },
  1081. moveLine7(e) {
  1082. if (canvaColumn7) {
  1083. canvaColumn7.scroll(e);
  1084. }
  1085. },
  1086. touchEndLine7(e) {
  1087. if (canvaColumn7) {
  1088. canvaColumn7.scrollEnd(e);
  1089. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1090. canvaColumn7.showToolTip(e, {
  1091. format: function(item, category) {
  1092. return category + ' ' + item.name + ':' + item.data
  1093. }
  1094. });
  1095. }
  1096. },
  1097. touchLine8(e) {
  1098. if (canvaColumn8) {
  1099. canvaColumn8.scrollStart(e);
  1100. }
  1101. },
  1102. moveLine8(e) {
  1103. if (canvaColumn8) {
  1104. canvaColumn8.scroll(e);
  1105. }
  1106. },
  1107. touchEndLine8(e) {
  1108. if (canvaColumn8) {
  1109. canvaColumn8.scrollEnd(e);
  1110. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1111. canvaColumn8.showToolTip(e, {
  1112. format: function(item, category) {
  1113. return category + ' ' + item.name + ':' + item.data
  1114. }
  1115. });
  1116. }
  1117. },
  1118. touchLine9(e) {
  1119. if (canvaColumn9) {
  1120. canvaColumn9.scrollStart(e);
  1121. }
  1122. },
  1123. moveLine9(e) {
  1124. if (canvaColumn9) {
  1125. canvaColumn9.scroll(e);
  1126. }
  1127. },
  1128. touchEndLine9(e) {
  1129. if (canvaColumn9) {
  1130. canvaColumn9.scrollEnd(e);
  1131. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1132. canvaColumn9.showToolTip(e, {
  1133. format: function(item, category) {
  1134. return category + ' ' + item.name + ':' + item.data
  1135. }
  1136. });
  1137. }
  1138. },
  1139. touchLine10(e) {
  1140. if (canvaColumn10) {
  1141. canvaColumn10.scrollStart(e);
  1142. }
  1143. },
  1144. moveLine10(e) {
  1145. if (canvaColumn10) {
  1146. canvaColumn10.scroll(e);
  1147. }
  1148. },
  1149. touchEndLine10(e) {
  1150. if (canvaColumn10) {
  1151. canvaColumn10.scrollEnd(e);
  1152. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1153. canvaColumn10.showToolTip(e, {
  1154. format: function(item, category) {
  1155. return category + ' ' + item.name + ':' + item.data
  1156. }
  1157. });
  1158. }
  1159. },
  1160. touchLine11(e) {
  1161. if (canvaColumn11) {
  1162. canvaColumn11.scrollStart(e);
  1163. }
  1164. },
  1165. moveLine11(e) {
  1166. if (canvaColumn11) {
  1167. canvaColumn11.scroll(e);
  1168. }
  1169. },
  1170. touchEndLine11(e) {
  1171. if (canvaColumn11) {
  1172. canvaColumn11.scrollEnd(e);
  1173. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1174. canvaColumn11.showToolTip(e, {
  1175. format: function(item, category) {
  1176. return category + ' ' + item.name + ':' + item.data
  1177. }
  1178. });
  1179. }
  1180. },
  1181. touchLine12(e) {
  1182. if (canvaColumn12) {
  1183. canvaColumn12.scrollStart(e);
  1184. }
  1185. },
  1186. moveLine12(e) {
  1187. if (canvaColumn12) {
  1188. canvaColumn12.scroll(e);
  1189. }
  1190. },
  1191. touchEndLine12(e) {
  1192. if (canvaColumn12) {
  1193. canvaColumn12.scrollEnd(e);
  1194. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1195. canvaColumn12.showToolTip(e, {
  1196. format: function(item, category) {
  1197. return category + ' ' + item.name + ':' + item.data
  1198. }
  1199. });
  1200. }
  1201. },
  1202. }
  1203. }
  1204. </script>
  1205. <style>
  1206. page {
  1207. /* background: #F2F2F2; */
  1208. background: #FFFFFF;
  1209. width: 750upx;
  1210. overflow-x: hidden;
  1211. }
  1212. .head {
  1213. display: flex;
  1214. flex-direction: row;
  1215. background: #206DC3;
  1216. width: 750upx;
  1217. height: 120upx;
  1218. }
  1219. .title {
  1220. /* border-left: 10upx solid #0ea391; */
  1221. color: #363D44;
  1222. font-size: 62upx;
  1223. font-family: "PingFang-SC-Bold";
  1224. text-align: center;
  1225. margin: auto;
  1226. }
  1227. .ri {
  1228. width: 690upx;
  1229. height: 210upx;
  1230. background: #FFFFFF;
  1231. border-radius: 15upx;
  1232. /* 上移 */
  1233. transform: translateY(-90upx);
  1234. text-align: center;
  1235. margin: auto;
  1236. display: flex;
  1237. flex-direction: row;
  1238. /* 阴影 */
  1239. box-shadow: 0upx -1upx 20upx #D3D3D3;
  1240. /* box-shadow:0px 0px 10px 5px #aaa; */
  1241. }
  1242. .riShell {
  1243. display: flex;
  1244. flex-direction: row;
  1245. margin: auto;
  1246. }
  1247. .riTitle {
  1248. display: flex;
  1249. flex-direction: column;
  1250. margin: auto;
  1251. }
  1252. .riqi {
  1253. display: flex;
  1254. flex-direction: column;
  1255. margin: auto;
  1256. }
  1257. .fourTitle {
  1258. width: 690upx;
  1259. height: 294upx;
  1260. display: flex;
  1261. flex-direction: row;
  1262. flex-wrap: wrap;
  1263. background: #FFFFFF;
  1264. box-shadow: 0upx 0upx 20upx #D3D3D3;
  1265. margin: auto;
  1266. border-radius: 15upx;
  1267. transform: translateY(-60upx);
  1268. }
  1269. .four {
  1270. display: flex;
  1271. flex-direction: row;
  1272. margin: auto;
  1273. width: 48%;
  1274. }
  1275. .fourImg {
  1276. width: 54upx;
  1277. height: 54upx;
  1278. }
  1279. .qiun-padding {
  1280. padding: 2%;
  1281. width: 96%;
  1282. }
  1283. .qiun-wrap {
  1284. display: flex;
  1285. flex-wrap: wrap;
  1286. }
  1287. .qiun-rows {
  1288. display: flex;
  1289. flex-direction: row !important;
  1290. }
  1291. .qiun-columns {
  1292. display: flex;
  1293. flex-direction: column !important;
  1294. }
  1295. .qiun-common-mt {
  1296. margin-top: 0upx;
  1297. height: 160upx;
  1298. }
  1299. .qiun-bg-white {
  1300. background: #FFFFFF;
  1301. }
  1302. .qiun-title-bar {
  1303. width: 100%;
  1304. /* padding: 10upx 2%; */
  1305. flex-wrap: nowrap;
  1306. border-radius: 15upx;
  1307. }
  1308. .qiun-title-dot-light {
  1309. width: 92%;
  1310. border-left: 20upx;
  1311. border-left: 10upx solid #206DC3;
  1312. padding-left: 10upx;
  1313. height: 32upx;
  1314. font-family: "PingFang-SC-Bold";
  1315. font-weight: bold;
  1316. margin: auto;
  1317. font-size: 32upx;
  1318. color: #363D44;
  1319. }
  1320. .dis {
  1321. transform: translateY(-13upx);
  1322. font-size: 32upx;
  1323. font-family: "PingFang-SC-Bold";
  1324. color: #363D44;
  1325. }
  1326. .shijian {
  1327. padding-top: 30upx;
  1328. height: 80upx;
  1329. width: 680upx;
  1330. margin: auto;
  1331. box-shadow: 0upx 0upx 10upx #D3D3D3;
  1332. }
  1333. .line {
  1334. background: #ECECEC;
  1335. height: 20upx;
  1336. }
  1337. .qiun-charts {
  1338. width: 690upx;
  1339. height: 550upx;
  1340. padding-top: 50upx;
  1341. background-color: #FFFFFF;
  1342. margin: auto;
  1343. }
  1344. .qiun-charts2 {
  1345. width: 690upx;
  1346. height: 370upx;
  1347. padding-top: 50upx;
  1348. background-color: #FFFFFF;
  1349. margin: auto;
  1350. }
  1351. .charts {
  1352. width: 690upx;
  1353. height: 550upx;
  1354. background-color: #FFFFFF;
  1355. margin: auto;
  1356. }
  1357. .charts2 {
  1358. width: 690upx;
  1359. height: 370upx;
  1360. background-color: #FFFFFF;
  1361. margin: auto;
  1362. }
  1363. .preImg {
  1364. position: absolute;
  1365. right: 30upx;
  1366. width: 71upx;
  1367. height: 57upx;
  1368. padding-right: 80%;
  1369. }
  1370. .nextImg {
  1371. position: absolute;
  1372. right: 30upx;
  1373. width: 71upx;
  1374. height: 57upx;
  1375. }
  1376. .tr {
  1377. padding-top: 15upx;
  1378. display: flex;
  1379. flex-direction: row;
  1380. justify-content: flex-start;
  1381. font-size: 26upx;
  1382. font-family: "PingFang-SC-Bold";
  1383. }
  1384. .td-left {
  1385. font-family: "PingFang-SC-Bold";
  1386. margin: auto;
  1387. font-size: 26upx;
  1388. width: 30%;
  1389. text-align: right;
  1390. }
  1391. .td-right {
  1392. font-family: "PingFang-SC-Bold";
  1393. /* font-weight: bold; */
  1394. margin: auto;
  1395. /* font-size: 26upx; */
  1396. width: 70%;
  1397. text-align: left;
  1398. }
  1399. </style>