equipmentStatistics.vue 39 KB

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