equipmentStatistics.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467
  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(700);
  345. this.cHeight = uni.upx2px(550);
  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. chartData.series = chartData.series.map(e => {
  840. if (e['name'] == '销售个数') {
  841. e['name'] = this.$t('mainStatistics.saleNum');
  842. }
  843. if (e['name'] == '销售额') {
  844. e['name'] = this.$t('mainStatistics.saleroom');
  845. }
  846. return e;
  847. });
  848. return new uCharts({
  849. $this: _self,
  850. canvasId: canvasId,
  851. enableScroll: true,
  852. type: 'column',
  853. legend: true,
  854. fontSize: 11,
  855. background: '#FFFFFF', //y轴颜色
  856. pixelRatio: 1,
  857. animation: true,
  858. categories: chartData.categories,
  859. series: chartData.series,
  860. xAxis: {
  861. type: 'grid',
  862. gridType: 'dash',
  863. rotateLabel: true,
  864. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  865. scrollShow: true, //新增是否显示滚动条,默认false
  866. scrollAlign: 'left', //滚动条初始位置
  867. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  868. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  869. // disableGrid:true,
  870. },
  871. yAxis: {
  872. //disabled:true
  873. },
  874. dataLabel: true,
  875. width: _self.cWidth * _self.pixelRatio,
  876. height: _self.cHeight * _self.pixelRatio,
  877. extra: {
  878. column: {
  879. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  880. width: 18
  881. }
  882. }
  883. });
  884. },
  885. initChart2(canvasId, chartData) {
  886. return new uCharts({
  887. $this: _self,
  888. canvasId: canvasId,
  889. enableScroll: true,
  890. type: 'column',
  891. legend: true,
  892. fontSize: 11,
  893. background: '#FFFFFF', //y轴颜色
  894. pixelRatio: 1,
  895. animation: true,
  896. categories: chartData.categories,
  897. series: chartData.series,
  898. xAxis: {
  899. type: 'grid',
  900. gridType: 'dash',
  901. rotateLabel: true,
  902. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  903. scrollShow: true, //新增是否显示滚动条,默认false
  904. scrollAlign: 'left', //滚动条初始位置
  905. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  906. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  907. // disableGrid:true,
  908. },
  909. yAxis: {
  910. //disabled:true
  911. },
  912. dataLabel: true,
  913. width: _self.cWidth2 * _self.pixelRatio,
  914. height: _self.cHeight2 * _self.pixelRatio,
  915. extra: {
  916. column: {
  917. width: 18
  918. }
  919. }
  920. });
  921. },
  922. initChart3(canvasId, chartData) {
  923. return new uCharts({
  924. $this: _self,
  925. canvasId: canvasId,
  926. enableScroll: true,
  927. type: 'column',
  928. legend: true,
  929. fontSize: 11,
  930. background: '#FFFFFF', //y轴颜色
  931. pixelRatio: 1,
  932. animation: true,
  933. categories: chartData.categories,
  934. series: chartData.series,
  935. xAxis: {
  936. type: 'grid',
  937. gridType: 'dash',
  938. rotateLabel: true,
  939. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  940. scrollShow: true, //新增是否显示滚动条,默认false
  941. scrollAlign: 'left', //滚动条初始位置
  942. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  943. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  944. // disableGrid:true,
  945. },
  946. yAxis: {
  947. //disabled:true
  948. },
  949. dataLabel: true,
  950. width: _self.cWidth3 * _self.pixelRatio,
  951. height: _self.cHeight3 * _self.pixelRatio,
  952. extra: {
  953. column: {
  954. width: 18
  955. }
  956. }
  957. });
  958. },
  959. touchLine1(e) {
  960. if (canvaColumn1) {
  961. canvaColumn1.scrollStart(e);
  962. }
  963. },
  964. moveLine1(e) {
  965. if (canvaColumn1) {
  966. canvaColumn1.scroll(e);
  967. }
  968. },
  969. touchEndLine1(e) {
  970. if (canvaColumn1) {
  971. canvaColumn1.scrollEnd(e);
  972. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  973. canvaColumn1.showToolTip(e, {
  974. format: function(item, category) {
  975. return category + ' ' + item.name + ':' + item.data
  976. }
  977. });
  978. }
  979. },
  980. touchLine2(e) {
  981. if (canvaColumn2) {
  982. canvaColumn2.scrollStart(e);
  983. }
  984. },
  985. moveLine2(e) {
  986. if (canvaColumn2) {
  987. canvaColumn2.scroll(e);
  988. }
  989. },
  990. touchEndLine2(e) {
  991. if (canvaColumn2) {
  992. canvaColumn2.scrollEnd(e);
  993. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  994. canvaColumn2.showToolTip(e, {
  995. format: function(item, category) {
  996. return category + ' ' + item.name + ':' + item.data
  997. }
  998. });
  999. }
  1000. },
  1001. touchLine3(e) {
  1002. if (canvaColumn3) {
  1003. canvaColumn3.scrollStart(e);
  1004. }
  1005. },
  1006. moveLine3(e) {
  1007. if (canvaColumn3) {
  1008. canvaColumn3.scroll(e);
  1009. }
  1010. },
  1011. touchEndLine3(e) {
  1012. if (canvaColumn3) {
  1013. canvaColumn3.scrollEnd(e);
  1014. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1015. canvaColumn3.showToolTip(e, {
  1016. format: function(item, category) {
  1017. return category + ' ' + item.name + ':' + item.data
  1018. }
  1019. });
  1020. }
  1021. },
  1022. touchLine4(e) {
  1023. if (canvaColumn4) {
  1024. canvaColumn4.scrollStart(e);
  1025. }
  1026. },
  1027. moveLine4(e) {
  1028. if (canvaColumn4) {
  1029. canvaColumn4.scroll(e);
  1030. }
  1031. },
  1032. touchEndLine4(e) {
  1033. if (canvaColumn4) {
  1034. canvaColumn4.scrollEnd(e);
  1035. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1036. canvaColumn4.showToolTip(e, {
  1037. format: function(item, category) {
  1038. return category + ' ' + item.name + ':' + item.data
  1039. }
  1040. });
  1041. }
  1042. },
  1043. touchLine5(e) {
  1044. if (canvaColumn5) {
  1045. canvaColumn5.scrollStart(e);
  1046. }
  1047. },
  1048. moveLine5(e) {
  1049. if (canvaColumn5) {
  1050. canvaColumn5.scroll(e);
  1051. }
  1052. },
  1053. touchEndLine5(e) {
  1054. if (canvaColumn5) {
  1055. canvaColumn5.scrollEnd(e);
  1056. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1057. canvaColumn5.showToolTip(e, {
  1058. format: function(item, category) {
  1059. return category + ' ' + item.name + ':' + item.data
  1060. }
  1061. });
  1062. }
  1063. },
  1064. touchLine6(e) {
  1065. if (canvaColumn6) {
  1066. canvaColumn6.scrollStart(e);
  1067. }
  1068. },
  1069. moveLine6(e) {
  1070. if (canvaColumn6) {
  1071. canvaColumn6.scroll(e);
  1072. }
  1073. },
  1074. touchEndLine6(e) {
  1075. if (canvaColumn6) {
  1076. canvaColumn6.scrollEnd(e);
  1077. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1078. canvaColumn6.showToolTip(e, {
  1079. format: function(item, category) {
  1080. return category + ' ' + item.name + ':' + item.data
  1081. }
  1082. });
  1083. }
  1084. },
  1085. touchLine7(e) {
  1086. if (canvaColumn7) {
  1087. canvaColumn7.scrollStart(e);
  1088. }
  1089. },
  1090. moveLine7(e) {
  1091. if (canvaColumn7) {
  1092. canvaColumn7.scroll(e);
  1093. }
  1094. },
  1095. touchEndLine7(e) {
  1096. if (canvaColumn7) {
  1097. canvaColumn7.scrollEnd(e);
  1098. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1099. canvaColumn7.showToolTip(e, {
  1100. format: function(item, category) {
  1101. return category + ' ' + item.name + ':' + item.data
  1102. }
  1103. });
  1104. }
  1105. },
  1106. touchLine8(e) {
  1107. if (canvaColumn8) {
  1108. canvaColumn8.scrollStart(e);
  1109. }
  1110. },
  1111. moveLine8(e) {
  1112. if (canvaColumn8) {
  1113. canvaColumn8.scroll(e);
  1114. }
  1115. },
  1116. touchEndLine8(e) {
  1117. if (canvaColumn8) {
  1118. canvaColumn8.scrollEnd(e);
  1119. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1120. canvaColumn8.showToolTip(e, {
  1121. format: function(item, category) {
  1122. return category + ' ' + item.name + ':' + item.data
  1123. }
  1124. });
  1125. }
  1126. },
  1127. touchLine9(e) {
  1128. if (canvaColumn9) {
  1129. canvaColumn9.scrollStart(e);
  1130. }
  1131. },
  1132. moveLine9(e) {
  1133. if (canvaColumn9) {
  1134. canvaColumn9.scroll(e);
  1135. }
  1136. },
  1137. touchEndLine9(e) {
  1138. if (canvaColumn9) {
  1139. canvaColumn9.scrollEnd(e);
  1140. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1141. canvaColumn9.showToolTip(e, {
  1142. format: function(item, category) {
  1143. return category + ' ' + item.name + ':' + item.data
  1144. }
  1145. });
  1146. }
  1147. },
  1148. touchLine10(e) {
  1149. if (canvaColumn10) {
  1150. canvaColumn10.scrollStart(e);
  1151. }
  1152. },
  1153. moveLine10(e) {
  1154. if (canvaColumn10) {
  1155. canvaColumn10.scroll(e);
  1156. }
  1157. },
  1158. touchEndLine10(e) {
  1159. if (canvaColumn10) {
  1160. canvaColumn10.scrollEnd(e);
  1161. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1162. canvaColumn10.showToolTip(e, {
  1163. format: function(item, category) {
  1164. return category + ' ' + item.name + ':' + item.data
  1165. }
  1166. });
  1167. }
  1168. },
  1169. touchLine11(e) {
  1170. if (canvaColumn11) {
  1171. canvaColumn11.scrollStart(e);
  1172. }
  1173. },
  1174. moveLine11(e) {
  1175. if (canvaColumn11) {
  1176. canvaColumn11.scroll(e);
  1177. }
  1178. },
  1179. touchEndLine11(e) {
  1180. if (canvaColumn11) {
  1181. canvaColumn11.scrollEnd(e);
  1182. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1183. canvaColumn11.showToolTip(e, {
  1184. format: function(item, category) {
  1185. return category + ' ' + item.name + ':' + item.data
  1186. }
  1187. });
  1188. }
  1189. },
  1190. touchLine12(e) {
  1191. if (canvaColumn12) {
  1192. canvaColumn12.scrollStart(e);
  1193. }
  1194. },
  1195. moveLine12(e) {
  1196. if (canvaColumn12) {
  1197. canvaColumn12.scroll(e);
  1198. }
  1199. },
  1200. touchEndLine12(e) {
  1201. if (canvaColumn12) {
  1202. canvaColumn12.scrollEnd(e);
  1203. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1204. canvaColumn12.showToolTip(e, {
  1205. format: function(item, category) {
  1206. return category + ' ' + item.name + ':' + item.data
  1207. }
  1208. });
  1209. }
  1210. },
  1211. }
  1212. }
  1213. </script>
  1214. <style>
  1215. page {
  1216. /* background: #F2F2F2; */
  1217. background: #FFFFFF;
  1218. width: 750upx;
  1219. overflow-x: hidden;
  1220. }
  1221. .head {
  1222. display: flex;
  1223. flex-direction: row;
  1224. background: #206DC3;
  1225. width: 750upx;
  1226. height: 120upx;
  1227. }
  1228. .title {
  1229. /* border-left: 10upx solid #0ea391; */
  1230. color: #363D44;
  1231. font-size: 62upx;
  1232. font-family: "PingFang-SC-Bold";
  1233. text-align: center;
  1234. margin: auto;
  1235. }
  1236. .ri {
  1237. width: 690upx;
  1238. height: 210upx;
  1239. background: #FFFFFF;
  1240. border-radius: 15upx;
  1241. /* 上移 */
  1242. transform: translateY(-90upx);
  1243. text-align: center;
  1244. margin: auto;
  1245. display: flex;
  1246. flex-direction: row;
  1247. /* 阴影 */
  1248. box-shadow: 0upx -1upx 20upx #D3D3D3;
  1249. /* box-shadow:0px 0px 10px 5px #aaa; */
  1250. }
  1251. .riShell {
  1252. display: flex;
  1253. flex-direction: row;
  1254. margin: auto;
  1255. }
  1256. .riTitle {
  1257. display: flex;
  1258. flex-direction: column;
  1259. margin: auto;
  1260. }
  1261. .riqi {
  1262. display: flex;
  1263. flex-direction: column;
  1264. margin: auto;
  1265. }
  1266. .fourTitle {
  1267. width: 690upx;
  1268. height: 294upx;
  1269. display: flex;
  1270. flex-direction: row;
  1271. flex-wrap: wrap;
  1272. background: #FFFFFF;
  1273. box-shadow: 0upx 0upx 20upx #D3D3D3;
  1274. margin: auto;
  1275. border-radius: 15upx;
  1276. transform: translateY(-60upx);
  1277. }
  1278. .four {
  1279. display: flex;
  1280. flex-direction: row;
  1281. margin: auto;
  1282. width: 48%;
  1283. }
  1284. .fourImg {
  1285. width: 54upx;
  1286. height: 54upx;
  1287. }
  1288. .qiun-padding {
  1289. padding: 2%;
  1290. width: 96%;
  1291. }
  1292. .qiun-wrap {
  1293. display: flex;
  1294. flex-wrap: wrap;
  1295. }
  1296. .qiun-rows {
  1297. display: flex;
  1298. flex-direction: row !important;
  1299. }
  1300. .qiun-columns {
  1301. display: flex;
  1302. flex-direction: column !important;
  1303. }
  1304. .qiun-common-mt {
  1305. margin-top: 0upx;
  1306. height: 160upx;
  1307. }
  1308. .qiun-bg-white {
  1309. background: #FFFFFF;
  1310. }
  1311. .qiun-title-bar {
  1312. width: 100%;
  1313. /* padding: 10upx 2%; */
  1314. flex-wrap: nowrap;
  1315. border-radius: 15upx;
  1316. }
  1317. .qiun-title-dot-light {
  1318. width: 92%;
  1319. border-left: 20upx;
  1320. border-left: 10upx solid #206DC3;
  1321. padding-left: 10upx;
  1322. height: 32upx;
  1323. font-family: "PingFang-SC-Bold";
  1324. font-weight: bold;
  1325. margin: auto;
  1326. font-size: 32upx;
  1327. color: #363D44;
  1328. }
  1329. .dis {
  1330. transform: translateY(-13upx);
  1331. font-size: 32upx;
  1332. font-family: "PingFang-SC-Bold";
  1333. color: #363D44;
  1334. }
  1335. .shijian {
  1336. padding-top: 30upx;
  1337. height: 80upx;
  1338. width: 680upx;
  1339. margin: auto;
  1340. margin-top: 15px;
  1341. box-shadow: 0upx 0upx 10upx #D3D3D3;
  1342. }
  1343. .line {
  1344. background: #ECECEC;
  1345. height: 20upx;
  1346. }
  1347. .qiun-charts {
  1348. width: 750upx;
  1349. height: 600upx;
  1350. padding-top: 50upx;
  1351. background-color: #FFFFFF;
  1352. /* margin: auto; */
  1353. }
  1354. .qiun-charts2 {
  1355. width: 690upx;
  1356. height: 370upx;
  1357. padding-top: 50upx;
  1358. background-color: #FFFFFF;
  1359. margin: auto;
  1360. }
  1361. .charts {
  1362. width: 700upx;
  1363. height: 600upx;
  1364. background-color: #FFFFFF;
  1365. margin: auto;
  1366. }
  1367. .charts2 {
  1368. width: 690upx;
  1369. height: 370upx;
  1370. background-color: #FFFFFF;
  1371. margin: auto;
  1372. }
  1373. .preImg {
  1374. position: absolute;
  1375. right: 30upx;
  1376. width: 71upx;
  1377. height: 57upx;
  1378. padding-right: 80%;
  1379. }
  1380. .nextImg {
  1381. position: absolute;
  1382. right: 30upx;
  1383. width: 71upx;
  1384. height: 57upx;
  1385. }
  1386. .tr {
  1387. padding-top: 15upx;
  1388. display: flex;
  1389. flex-direction: row;
  1390. justify-content: flex-start;
  1391. font-size: 26upx;
  1392. font-family: "PingFang-SC-Bold";
  1393. }
  1394. .td-left {
  1395. font-family: "PingFang-SC-Bold";
  1396. margin: auto;
  1397. font-size: 26upx;
  1398. width: 30%;
  1399. text-align: right;
  1400. }
  1401. .td-right {
  1402. font-family: "PingFang-SC-Bold";
  1403. /* font-weight: bold; */
  1404. margin: auto;
  1405. /* font-size: 26upx; */
  1406. width: 70%;
  1407. text-align: left;
  1408. }
  1409. </style>