mainStatistics.vue 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310
  1. <template>
  2. <view>
  3. <view class="head">
  4. <view class="">
  5. <image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
  6. </view>
  7. <view class="pname">
  8. <font class="wenzi" style="color: #BDD6F3;font-size:28upx"> {{$t('mainStatistics.name')}}: {{pnameData}}
  9. </font>
  10. </view>
  11. <view class="company">
  12. <font style="color: #BDD6F3;font-size:28upx">{{$t('mainStatistics.company')}}</font>
  13. </view>
  14. </view>
  15. <view class="ri">
  16. <view class="riShell">
  17. <view class="riImg">
  18. <image style="width: 64upx;height: 64upx;padding-top: 20upx;" :src="$t('mainStatistics.dayImg')">
  19. </image>
  20. </view>
  21. <view class="riTitle">
  22. <view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
  23. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalMoney')}}:</font>
  24. <font style="color: #ED341F;">{{dayTotalMoney}}</font>
  25. </view>
  26. <view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
  27. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalNum')}}:</font>
  28. <font style="color: #ED341F;">{{dayTotalNum}}</font>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="riqi">
  33. <view style="text-align:right" class="tody">
  34. <font style="color: #596D83;">{{today}}</font>
  35. </view>
  36. <view style="text-align:right" class="xingqi">
  37. <font style="color: #596D83;">{{week}}</font>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="fourTitle">
  42. <view class="four">
  43. <view class="fourImg">
  44. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.weekImg')"
  45. mode=""></image>
  46. </view>
  47. <view class="fourShell">
  48. <view class="one">
  49. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalMoney')}}:</font>
  50. <font style="color: #ED341F;">{{weekTotalMoney}}</font>
  51. </view>
  52. <view class="two">
  53. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalNum')}}:</font>
  54. <font style="color: #ED341F;">{{weekTotalNum}}</font>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="four">
  59. <view class="fourImg">
  60. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.monthImg')"
  61. mode=""></image>
  62. </view>
  63. <view class="fourShell">
  64. <view class="one">
  65. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalMoney')}}:</font>
  66. <font style="color: #ED341F;">{{monthTotalMoney}}</font>
  67. </view>
  68. <view class="two">
  69. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalNum')}}:</font>
  70. <font style="color: #ED341F;">{{monthTotalNum}}</font>
  71. </view>
  72. </view>
  73. </view>
  74. <view class="four">
  75. <view class="fourImg">
  76. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.yearImg')"
  77. mode=""></image>
  78. </view>
  79. <view class="fourShell">
  80. <view class="one">
  81. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalMoney')}}:</font>
  82. <font style="color: #ED341F;">{{yearTotalMoney}}</font>
  83. </view>
  84. <view class="two">
  85. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalNum')}}:</font>
  86. <font style="color: #ED341F;">{{yearTotalNum}}</font>
  87. </view>
  88. </view>
  89. </view>
  90. <view class="four">
  91. <view class="fourImg">
  92. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.allImg')"
  93. mode=""></image>
  94. </view>
  95. <view class="fourShell">
  96. <view class="one">
  97. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineTotalNum')}}:</font>
  98. <font style="color: #ED341F;">{{machineTotalNum}}</font>
  99. </view>
  100. <view class="two">
  101. <font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineUseNum')}}:</font>
  102. <font style="color: #ED341F;">{{machineUseNum}}</font>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. <view class="riShell">
  108. <!-- 选择框 -->
  109. <view style="width: 80%;">
  110. <!-- 商家选择 -->
  111. <view v-if="id!=1&&type<4&&length>0&&ifForeign=='0'" class="td-right">
  112. <view class="uni-list">
  113. <view class="uni-list-cell">
  114. <view class="uni-list-cell-left">
  115. 当前商家:
  116. </view>
  117. <view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
  118. <picker @change="changeAdmin" :value="index" :range="adminList">
  119. <view class="uni-input">{{adminList[index]}}</view>
  120. </picker>
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. <!-- 支付方式选择 -->
  126. <view v-if="ifForeign!=''&&ifForeign=='1'" class="td-right">
  127. <view class="uni-list">
  128. <view class="uni-list-cell">
  129. <view class="uni-list-cell-left">
  130. PayType:
  131. </view>
  132. <view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
  133. <picker @change="changePayType" :value="index1" :range="payTypeList">
  134. <view class="uni-input">{{payTypeList[index1]}}</view>
  135. </picker>
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. <!-- 刷新按钮 -->
  142. <view class="search-button">
  143. <button type="primary" class="" :disabled="langAbbrs" @click="refresh()">
  144. <p class="">{{$t('mainStatistics.refresh')}}</P>
  145. </button>
  146. </view>
  147. </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">{{$t('mainStatistics.day')}}</view>
  152. </view>
  153. <view class="shijian" style="text-align: center;position: relative;">
  154. <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  155. <span>{{startDate1}}</span>
  156. <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  157. </view>
  158. </view>
  159. <view v-show="noticeTRUE" class="qiun-charts" style="background-color: #FFFFFF;">
  160. <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true
  161. @touchstart="touchLine1" @touchmove="moveLine1" @touchend="touchEndLine1"
  162. style="background-color: #FFFFFF;"></canvas>
  163. </view>
  164. </view>
  165. <view class="line"></view>
  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">{{$t('mainStatistics.week')}}</view>
  170. </view>
  171. <view class="shijian" style="text-align: center;position: relative;">
  172. <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  173. <span>{{startDate2}} -- {{endDate2}}</span>
  174. <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  175. </view>
  176. </view>
  177. <view v-show="noticeTRUE" class="qiun-charts" style="background-color: #FFFFFF;">
  178. <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true
  179. @touchstart="touchLine2" @touchmove="moveLine2" @touchend="touchEndLine2"
  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">{{$t('mainStatistics.month')}}</view>
  188. </view>
  189. <view class="shijian" style="text-align: center;position: relative;">
  190. <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  191. <span>{{startDate3}} -- {{endDate3}}</span>
  192. <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  193. </view>
  194. </view>
  195. <view v-show="noticeTRUE" class="qiun-charts" style="background-color: #FFFFFF;">
  196. <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true
  197. @touchstart="touchLine3" @touchmove="moveLine3" @touchend="touchEndLine3"
  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">{{$t('mainStatistics.year')}}</view>
  206. </view>
  207. <view class="shijian" style="text-align: center;position: relative;">
  208. <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  209. <span>{{startDate4}} -- {{endDate4}}</span>
  210. <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  211. </view>
  212. </view>
  213. <view v-show="noticeTRUE" class="qiun-charts" style="background-color: #FFFFFF;">
  214. <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true
  215. @touchstart="touchLine4" @touchmove="moveLine4" @touchend="touchEndLine4"
  216. style="background-color: #FFFFFF;"></canvas>
  217. </view>
  218. </view>
  219. <view v-show="noticeShow">
  220. <uni-popup id="popupDialog" ref="popupDialog" type="dialog">
  221. <uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 unisdfdd-popup!" :before-close="true"
  222. @confirm="dialogConfirm(noticeId)" @close="dialogClose">
  223. <scroll-view scroll-y="true" class="scroll-Y" :style="{height:scrollHeight*0.8+'px'}">
  224. <view class="scroll-view-item ">
  225. {{noticeTitle}}<br />
  226. <p v-html="noticeNote">{{noticeNote}}</p>
  227. </view>
  228. </scroll-view>
  229. </uni-popup-dialog>
  230. </uni-popup>
  231. </view>
  232. </view>
  233. </template>
  234. <script>
  235. import {
  236. mapState,
  237. mapActions,
  238. mapMutations
  239. } from 'vuex';
  240. import uCharts from '@/components/u-charts/u-charts.js';
  241. import {
  242. dateUtils
  243. } from '@/common/util.js';
  244. var _self;
  245. var canvaColumn1 = null;
  246. var canvaColumn2 = null;
  247. var canvaColumn3 = null;
  248. var canvaColumn4 = null;
  249. export default {
  250. name: 'mainStatistics',
  251. props: {
  252. equipmentId: '',
  253. adminId: '',
  254. pname: '',
  255. isForeign: 0,
  256. },
  257. data() {
  258. return {
  259. machineTotalNum: 0,
  260. machineUseNum: 0,
  261. dayTotalMoney: 0,
  262. dayTotalNum: 0,
  263. weekTotalMoney: 0,
  264. weekTotalNum: 0,
  265. monthTotalMoney: 0,
  266. monthTotalNum: 0,
  267. yearTotalMoney: 0,
  268. yearTotalNum: 0,
  269. cWidth: '',
  270. cHeight: '',
  271. pixelRatio: 1,
  272. startDate1: '',
  273. startDate2: '',
  274. endDate2: '',
  275. startDate3: '',
  276. endDate3: '',
  277. startDate4: '',
  278. endDate4: '',
  279. today: '',
  280. week: '',
  281. adminList: [],
  282. payTypeList: ["All","non-pay","coin","notes","coin+notes","credit-card","E-PAYMENT"],
  283. payType:'All',
  284. admins: [],
  285. index: 0,
  286. index1: 0,
  287. id: 0,
  288. length: 0,
  289. type: null,
  290. noticeShow: false,
  291. noticeTRUE: true,
  292. noticeTitle: '',
  293. noticeNote: '',
  294. noticeId: '',
  295. msgType: 'success',
  296. scrollHeight: uni.getSystemInfoSync().windowHeight - 130,
  297. ifForeign: this.isForeign,
  298. langAbbrs:false,
  299. localPname: this.pname,
  300. }
  301. },
  302. computed: {
  303. ...mapState(['loginUser']),
  304. pnameData: {
  305. get() {
  306. return this.localPname;
  307. }
  308. },
  309. },
  310. onShow() {
  311. uni.setNavigationBarTitle({
  312. title: this.$t('mainStatistics.title')
  313. });
  314. uni.setTabBarItem({ index: 0,text: this.$t('tabs.tab1')});
  315. uni.setTabBarItem({ index: 1,text: this.$t('tabs.tab2')});
  316. uni.setTabBarItem({ index: 2,text: this.$t('tabs.tab3')});
  317. uni.setTabBarItem({ index: 3,text: this.$t('tabs.tab4')});
  318. uni.setTabBarItem({ index: 4,text: this.$t('tabs.tab5')});
  319. // uni.setStorageSync('test',1);
  320. this.id = 0;
  321. this.index = 0;
  322. var test = uni.getStorageSync('test');
  323. var globalUser = uni.getStorageSync("globalUser");
  324. this.ifForeign = globalUser.ifForeign;
  325. //test 判断是不是初次登陆
  326. if (globalUser.id != 1 && test == 1) {
  327. setTimeout(() => {
  328. this.getNOtice();
  329. }, 5000);
  330. }
  331. var token = uni.getStorageSync("token");
  332. if (token.toString().length > 1) {
  333. this.init();
  334. } else {
  335. uni.reLaunch({
  336. url: '../Login/Login',
  337. });
  338. }
  339. if (globalUser.toString().length > 1) {
  340. if (globalUser.type > 0 && globalUser.type < 4) {
  341. this.getAdmin();
  342. }
  343. this.id = globalUser.id;
  344. this.type = globalUser.type;
  345. }
  346. this.day();
  347. },
  348. mounted() {
  349. var token = uni.getStorageSync("token");
  350. if (token.toString().length > 1) {
  351. var test = uni.getStorageSync('test');
  352. if (test > 1||test==0) {
  353. this.init();
  354. }
  355. } else {
  356. uni.reLaunch({
  357. url: '../Login/Login',
  358. });
  359. }
  360. // this.day();
  361. this.equipmentStatus();
  362. },
  363. methods: {
  364. // open() {
  365. // this.show = true;
  366. // },
  367. ...mapActions('chart', ['getStatistics', 'getMachineNum']),
  368. async init() {
  369. if (!this.localPname) {
  370. this.localPname = this.loginUser.name;
  371. }
  372. _self = this;
  373. //图表中图
  374. this.cWidth = uni.upx2px(690);
  375. this.cHeight = uni.upx2px(370);
  376. this.getMainStatisticsData();
  377. var test = uni.getStorageSync('test');
  378. await this.initDateRang(new Date(), 'day', 0);
  379. if (test == null || test < 2) {
  380. await this.initDateRang(new Date(), 'week', 0);
  381. await this.initDateRang(new Date(), 'month', 0);
  382. await this.initDateRang(new Date(), 'year', 0);
  383. }
  384. var test = uni.getStorageSync('test');
  385. var globalUser = uni.getStorageSync("globalUser");
  386. //初次登陆跳转后,把test变成2
  387. uni.setStorageSync('test', '2');
  388. },
  389. getNOtice() {
  390. // console.log("notice")
  391. var globalUser = uni.getStorageSync("globalUser");
  392. var token = uni.getStorageSync("token");
  393. uni.request({
  394. url: this.serverurl + '/TNotice/getNotice?id=' + globalUser.id,
  395. // data: {
  396. // "id": globalUser.id
  397. // },
  398. header: {
  399. 'token': token
  400. },
  401. method: "POST",
  402. success: (res) => {
  403. if (res.data.code) {
  404. if (res.data.message == '1') {
  405. var notice = res.data.data;
  406. this.noticeTitle = notice.title,
  407. this.noticeNote = notice.note,
  408. this.noticeId = notice.id,
  409. this.noticeTRUE = false,
  410. this.noticeShow = true,
  411. this.$refs.popupDialog.open()
  412. }
  413. }
  414. },
  415. });
  416. },
  417. day() {
  418. var date = new Date();
  419. // var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
  420. var daystr = dateUtils.formateDate(date, 'yyyy-MM-dd');
  421. this.today = daystr;
  422. // var str= '星期'+'日一二三四五六'.charAt(date.getDay());
  423. this.week = this.$t('mainStatistics.week' + date.getDay());
  424. },
  425. //查询下级用户
  426. getAdmin() {
  427. var param = {};
  428. var token = uni.getStorageSync("token");
  429. var globalUser = uni.getStorageSync("globalUser");
  430. param['id'] = globalUser.id;
  431. uni.request({
  432. url: this.serverurl + '/TAdmin/selectLowAdmin',
  433. data: param,
  434. header: {
  435. 'token': token
  436. },
  437. method: "POST",
  438. success: (res) => {
  439. if (res.data.code) {
  440. var admins = res.data.data;
  441. // this.admins = admins;
  442. var adminss = [];
  443. var adminList = [];
  444. adminList.push('本商户');
  445. if (admins.length > 0) {
  446. this.length = admins.length;
  447. adminList.push('所有下级');
  448. for (var i = 0; i < admins.length; i++) {
  449. // console.log(admins[i].name)
  450. if (i == 0) {
  451. var globalUser = uni.getStorageSync("globalUser");
  452. var id = admins[i].id;
  453. if (id == globalUser.id) {
  454. continue;
  455. }
  456. }
  457. if (admins[i].name != null || admins[i].name != '') {
  458. adminss.push(admins[i]);
  459. adminList.push(admins[i].name);
  460. } else {
  461. adminList.push(admins[i].username);
  462. adminss.push(admins[i]);
  463. }
  464. }
  465. }
  466. this.adminList = adminList;
  467. this.admins = adminss;
  468. } else {
  469. uni.showToast({
  470. title: `获取信息失败:` + res.data.message,
  471. icon: 'none'
  472. })
  473. }
  474. },
  475. });
  476. },
  477. // 改变商家
  478. changeAdmin: function(e) {
  479. this.index = e.target.value;
  480. var id = '';
  481. if (e.target.value > 1) {
  482. id = this.admins[e.target.value - 2].id;
  483. }
  484. if (e.target.value == 1) {
  485. id = 'all';
  486. }
  487. if (e.target.value == 0) {
  488. id = 0;
  489. }
  490. // console.log("adminID="+id);
  491. this.id = id;
  492. uni.setStorageSync('test', 1);
  493. this.init();
  494. },
  495. // 改变支付方式
  496. changePayType: function(e) {
  497. this.index1 = e.target.value;
  498. if(this.index1!=0){
  499. this.payType = this.index1-1;
  500. }else{
  501. this.payType = 'All'
  502. }
  503. uni.setStorageSync('test', 1);
  504. this.init();
  505. },
  506. // 刷新
  507. refresh(){
  508. uni.setStorageSync('test', 1);
  509. this.init();
  510. this.langAbbrs = true;
  511. setTimeout(() => {
  512. // 方法区
  513. this.langAbbrs = false;
  514. }, 5000);
  515. },
  516. equipmentStatus() {
  517. var that = this;
  518. var id = uni.getStorageSync("globalUser").id;
  519. var token = uni.getStorageSync("token");
  520. uni.request({
  521. url: this.serverurl + '/TEquipment/equipmentStatus',
  522. data: {
  523. "adminId": id
  524. },
  525. header: {
  526. 'token': token
  527. },
  528. method: "POST",
  529. success: (res) => {
  530. setTimeout(function() {
  531. that.checkEquipmentStatus(id);
  532. }, 5000);
  533. },
  534. });
  535. },
  536. checkEquipmentStatus(id) {
  537. var token = uni.getStorageSync("token");
  538. uni.request({
  539. url: this.serverurl + '/TEquipment/checkEquipmentStatus',
  540. data: {
  541. "adminId": id
  542. },
  543. header: {
  544. 'token': token
  545. },
  546. method: "POST",
  547. success: (res) => {
  548. },
  549. });
  550. },
  551. initDateRang(day, chartType, type) {
  552. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  553. if (chartType === 'day') {
  554. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  555. }
  556. if (chartType === 'week') {
  557. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  558. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  559. }
  560. if (chartType === 'month') {
  561. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  562. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  563. }
  564. if (chartType === 'year') {
  565. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  566. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  567. }
  568. return this.getStatisticsData(chartType, type);
  569. },
  570. /**上一个 */
  571. pre(chartType) {
  572. let day;
  573. if (chartType === 'day') { // 日
  574. day = new Date(this.startDate1);
  575. day.setDate(day.getDate() - 1);
  576. }
  577. if (chartType === 'week') { // 周
  578. day = new Date(this.startDate2);
  579. day.setDate(day.getDate() - 7);
  580. }
  581. if (chartType === 'month') { // 月
  582. day = new Date(this.startDate3);
  583. day.setMonth(day.getMonth() - 1);
  584. }
  585. if (chartType === 'year') { // 年
  586. day = new Date(this.startDate4);
  587. day.setFullYear(day.getFullYear() - 1);
  588. }
  589. this.initDateRang(day, chartType, 1);
  590. },
  591. /**下一个 */
  592. next(chartType) {
  593. let day;
  594. if (chartType === 'day') { // 日
  595. day = new Date(this.startDate1);
  596. day.setDate(day.getDate() + 1);
  597. }
  598. if (chartType === 'week') { // 周
  599. day = new Date(this.startDate2);
  600. day.setDate(day.getDate() + 7);
  601. }
  602. if (chartType === 'month') { // 月
  603. day = new Date(this.startDate3);
  604. day.setMonth(day.getMonth() + 1);
  605. }
  606. if (chartType === 'year') { // 年
  607. day = new Date(this.startDate4);
  608. day.setFullYear(day.getFullYear() + 1);
  609. }
  610. this.initDateRang(day, chartType, 1);
  611. },
  612. getStatisticsData(chartType, type) {
  613. //type=0 头顶统计数字变,type=1 头顶统计数字不变
  614. const param = {
  615. 'chartType': chartType
  616. };
  617. if (chartType == 'day') {
  618. param['startDate'] = this.startDate1;
  619. param['endDate'] = this.startDate1;
  620. }
  621. if (chartType == 'week') {
  622. param['startDate'] = this.startDate2;
  623. param['endDate'] = this.endDate2;
  624. }
  625. if (chartType == 'month') {
  626. param['startDate'] = this.startDate3;
  627. param['endDate'] = this.endDate3;
  628. }
  629. if (chartType == 'year') {
  630. param['startDate'] = this.startDate4;
  631. param['endDate'] = this.endDate4;
  632. }
  633. if (this.adminId) { // 子组件,则拿传过来的参
  634. param['adminId'] = this.adminId;
  635. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  636. param['adminId'] = this.loginUser['id'];
  637. }
  638. var globalUser = uni.getStorageSync("globalUser");
  639. if (globalUser.id != 1) {
  640. if (param.adminId == null || param.adminId == undefined) {
  641. param['adminId'] = globalUser.id;
  642. }
  643. }
  644. if (this.equipmentId) {
  645. param['equipmentId'] = this.equipmentId;
  646. }
  647. if (this.id != 1) {
  648. var id = this.id;
  649. } else {
  650. var id = 0;
  651. }
  652. if (id == 'all') {
  653. param['adminId'] = null;
  654. if (this.type == 1) {
  655. param['agencyId'] = globalUser.id;
  656. }
  657. if (this.type == 2) {
  658. param['merchantId'] = globalUser.id;
  659. }
  660. } else if (id == 0) {
  661. } else {
  662. param['adminId'] = id;
  663. }
  664. if(this.ifForeign == '1'){
  665. param['payType'] = this.payType;
  666. }
  667. var type = type;
  668. return this.getStatistics(param)
  669. .then(data => {
  670. uni.stopPullDownRefresh();
  671. var date = new Date();
  672. var num = date.getDay(); //'日一二三四五六'0123456
  673. var categories = data.categories;
  674. var series = data.series;
  675. if (param['chartType'] == 'day') {
  676. canvaColumn1 = this.initChart('canvaColumn1', data);
  677. if (type == 0) {
  678. var dayTotalMoney = 0;
  679. var dayTotalNum = 0;
  680. for (var i = 0; i < series[0].data.length; i++) {
  681. dayTotalMoney = dayTotalMoney + series[1].data[i];
  682. dayTotalNum = dayTotalNum + series[0].data[i]
  683. }
  684. this.dayTotalNum = dayTotalNum.toFixed(0);
  685. this.dayTotalMoney = dayTotalMoney.toFixed(2);
  686. }
  687. }
  688. if (param['chartType'] == 'week') {
  689. canvaColumn2 = this.initChart('canvaColumn2', data);
  690. if (type == 0) {
  691. var weekTotalMoney = 0;
  692. var weekTotalNum = 0;
  693. for (var i = 0; i < series[0].data.length; i++) {
  694. weekTotalMoney = weekTotalMoney + series[1].data[i];
  695. weekTotalNum = weekTotalNum + series[0].data[i]
  696. }
  697. this.weekTotalMoney = weekTotalMoney.toFixed(2);
  698. this.weekTotalNum = weekTotalNum.toFixed(0);
  699. }
  700. }
  701. if (param['chartType'] == 'month') {
  702. canvaColumn3 = this.initChart('canvaColumn3', data);
  703. if (type == 0) {
  704. var monthTotalMoney = 0;
  705. var monthTotalNum = 0;
  706. for (var i = 0; i < series[0].data.length; i++) {
  707. monthTotalMoney = monthTotalMoney + series[1].data[i];
  708. monthTotalNum = monthTotalNum + series[0].data[i]
  709. }
  710. this.monthTotalMoney = monthTotalMoney.toFixed(2);
  711. this.monthTotalNum = monthTotalNum.toFixed(0);
  712. }
  713. }
  714. if (param['chartType'] == 'year') {
  715. canvaColumn4 = this.initChart('canvaColumn4', data);
  716. if (type == 0) {
  717. var yearTotalMoney = 0;
  718. var yearTotalNum = 0;
  719. for (var i = 0; i < series[0].data.length; i++) {
  720. yearTotalMoney = yearTotalMoney + series[1].data[i];
  721. yearTotalNum = yearTotalNum + series[0].data[i]
  722. }
  723. this.yearTotalMoney = yearTotalMoney.toFixed(2);
  724. this.yearTotalNum = yearTotalNum.toFixed(0);
  725. }
  726. }
  727. }, _ => {
  728. uni.stopPullDownRefresh();
  729. if (param['chartType'] == 'day') {
  730. canvaColumn1 = this.initChart('canvaColumn1', {
  731. categories: ['暂无数据'],
  732. series: [{
  733. name: '销售个数',
  734. data: [0]
  735. }]
  736. });
  737. }
  738. if (param['chartType'] == 'week') {
  739. canvaColumn2 = this.initChart('canvaColumn2', {
  740. categories: ['暂无数据'],
  741. series: [{
  742. name: '销售个数',
  743. data: [0]
  744. }]
  745. });
  746. }
  747. if (param['chartType'] == 'month') {
  748. canvaColumn3 = this.initChart('canvaColumn3', {
  749. categories: ['暂无数据'],
  750. series: [{
  751. name: '销售个数',
  752. data: [0]
  753. }]
  754. });
  755. }
  756. if (param['chartType'] == 'year') {
  757. canvaColumn4 = this.initChart('canvaColumn4', {
  758. categories: ['暂无数据'],
  759. series: [{
  760. name: '销售个数',
  761. data: [0]
  762. }]
  763. });
  764. }
  765. });
  766. },
  767. initChart(canvasId, chartData) {
  768. if (this.$t('lang') != null && this.$t('lang') != '') {
  769. if (this.$t('lang') != 'zh') {
  770. chartData.categories = chartData.categories.map(e => {
  771. if (e.indexOf('点') >= 0) {
  772. return e.replace('点', this.$t('mainStatistics.oclock'));
  773. }
  774. if (e.indexOf('周') >= 0) {
  775. const weekNum = e.substring(e.length - 1) == '日' ? '0' : e.substring(e.length - 1);
  776. return this.$t('mainStatistics.week' + weekNum);
  777. }
  778. if (e.indexOf('月') >= 0) {
  779. var res = e.toString();
  780. if (res.length > 3) {
  781. return e.replace('月', this.$t('mainStatistics.mon'));
  782. } else {
  783. return e.replace('月', this.$t('mainStatistics.y'));
  784. }
  785. }
  786. return e;
  787. });
  788. chartData.series = chartData.series.map(e => {
  789. if (e['name'] == '销售个数') {
  790. e['name'] = this.$t('mainStatistics.saleNum');
  791. }
  792. if (e['name'] == '销售额') {
  793. e['name'] = this.$t('mainStatistics.saleroom');
  794. }
  795. return e;
  796. });
  797. }
  798. }
  799. return new uCharts({
  800. $this: _self,
  801. canvasId: canvasId,
  802. enableScroll: true,
  803. type: 'column',
  804. legend: true,
  805. fontSize: 10,
  806. background: '#FFFFFF', //y轴颜色
  807. pixelRatio: 1,
  808. animation: true,
  809. categories: chartData.categories,
  810. series: chartData.series,
  811. xAxis: {
  812. type: 'grid',
  813. gridType: 'dash',
  814. itemCount: 5, //x轴单屏显示数据的数量,默认为5个
  815. scrollShow: true, //新增是否显示滚动条,默认false
  816. scrollAlign: 'left', //滚动条初始位置
  817. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  818. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  819. disableGrid: true,
  820. },
  821. yAxis: {
  822. type: 'grid',
  823. gridType: 'soild',
  824. // disabled:true
  825. // disableGrid:true,
  826. },
  827. dataLabel: true,
  828. width: _self.cWidth * _self.pixelRatio,
  829. height: _self.cHeight * _self.pixelRatio,
  830. extra: {
  831. column: {
  832. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  833. width: 18
  834. }
  835. }
  836. });
  837. },
  838. getMainStatisticsData() {
  839. const param = {};
  840. if (this.adminId) { // 子组件,则拿传过来的参
  841. param['adminId'] = this.adminId;
  842. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  843. param['adminId'] = this.loginUser['id'];
  844. }
  845. var globalUser = uni.getStorageSync("globalUser");
  846. if (globalUser.id != 1) {
  847. if (param.adminId == null || param.adminId == undefined) {
  848. param['adminId'] = globalUser.id;
  849. }
  850. }
  851. if (this.equipmentId) {
  852. param['equipmentId'] = this.equipmentId;
  853. }
  854. if (this.id != 1) {
  855. var id = this.id;
  856. } else {
  857. var id = 0;
  858. }
  859. var aid = param.adminId;
  860. if (id == 'all') {
  861. param['adminId'] = null;
  862. if (this.type == 1) {
  863. param['agencyId'] = globalUser.id;
  864. }
  865. if (this.type == 2) {
  866. param['merchantId'] = globalUser.id;
  867. }
  868. } else if (id == 0) {
  869. } else {
  870. param['adminId'] = id;
  871. aid = id;
  872. }
  873. // console.log('getMainStatisticsData:{}', param);
  874. var adminId = param.adminId;
  875. var equipmentId = this.equipmentId;
  876. var serverurl = this.serverurl;
  877. var token = uni.getStorageSync("token");
  878. var test = uni.getStorageSync("test");
  879. param['test'] = test;
  880. uni.request({
  881. url: serverurl + '/TEquipment/getMachineNum',
  882. data: {
  883. "adminId": aid,
  884. "equipmentId": equipmentId
  885. },
  886. method: "POST",
  887. header: {
  888. 'token': token
  889. },
  890. success: (res) => {
  891. var list = res.data.data;
  892. this.machineTotalNum = list[0];
  893. this.machineUseNum = list[1];
  894. }
  895. });
  896. // uni.request({
  897. // url: serverurl + '/TOrder/getMainStatistics',
  898. // data: param,
  899. // method: "POST",
  900. // header: {
  901. // 'token': token
  902. // },
  903. // success: (res) => {
  904. // var list = res.data.data;
  905. // for (let bean of list) {
  906. // if (bean['categorie'] === 'day') {
  907. // this.dayTotalMoney = bean['salePrice'];
  908. // this.dayTotalNum = bean['saleNum'];
  909. // }
  910. // if (bean['categorie'] === 'week') {
  911. // this.weekTotalMoney = bean['salePrice'];
  912. // this.weekTotalNum = bean['saleNum'];
  913. // }
  914. // if (bean['categorie'] === 'month') {
  915. // this.monthTotalMoney = bean['salePrice'];
  916. // this.monthTotalNum = bean['saleNum'];
  917. // }
  918. // if (bean['categorie'] === 'year') {
  919. // this.yearTotalMoney = bean['salePrice'];
  920. // this.yearTotalNum = bean['saleNum'];
  921. // }
  922. // }
  923. // }
  924. // });
  925. },
  926. touchLine1(e) {
  927. if (canvaColumn1) {
  928. canvaColumn1.scrollStart(e);
  929. }
  930. },
  931. moveLine1(e) {
  932. if (canvaColumn1) {
  933. canvaColumn1.scroll(e);
  934. }
  935. },
  936. touchEndLine1(e) {
  937. if (canvaColumn1) {
  938. canvaColumn1.scrollEnd(e);
  939. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  940. canvaColumn1.showToolTip(e, {
  941. format: function(item, category) {
  942. return category + ' ' + item.name + ':' + item.data
  943. }
  944. });
  945. }
  946. },
  947. touchLine2(e) {
  948. if (canvaColumn2) {
  949. canvaColumn2.scrollStart(e);
  950. }
  951. },
  952. moveLine2(e) {
  953. if (canvaColumn2) {
  954. canvaColumn2.scroll(e);
  955. }
  956. },
  957. touchEndLine2(e) {
  958. if (canvaColumn2) {
  959. canvaColumn2.scrollEnd(e);
  960. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  961. canvaColumn2.showToolTip(e, {
  962. format: function(item, category) {
  963. return category + ' ' + item.name + ':' + item.data
  964. }
  965. });
  966. }
  967. },
  968. touchLine3(e) {
  969. if (canvaColumn3) {
  970. canvaColumn3.scrollStart(e);
  971. }
  972. },
  973. moveLine3(e) {
  974. if (canvaColumn3) {
  975. canvaColumn3.scroll(e);
  976. }
  977. },
  978. touchEndLine3(e) {
  979. if (canvaColumn3) {
  980. canvaColumn3.scrollEnd(e);
  981. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  982. canvaColumn3.showToolTip(e, {
  983. format: function(item, category) {
  984. return category + ' ' + item.name + ':' + item.data
  985. }
  986. });
  987. }
  988. },
  989. touchLine4(e) {
  990. if (canvaColumn4) {
  991. canvaColumn4.scrollStart(e);
  992. }
  993. },
  994. moveLine4(e) {
  995. if (canvaColumn4) {
  996. canvaColumn4.scroll(e);
  997. }
  998. },
  999. touchEndLine4(e) {
  1000. if (canvaColumn4) {
  1001. canvaColumn4.scrollEnd(e);
  1002. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  1003. canvaColumn4.showToolTip(e, {
  1004. format: function(item, category) {
  1005. return category + ' ' + item.name + ':' + item.data
  1006. }
  1007. });
  1008. }
  1009. },
  1010. // 点击确定
  1011. dialogConfirm(id) {
  1012. this.noticeTRUE = true;
  1013. var adminId = uni.getStorageSync("globalUser").id;
  1014. var token = uni.getStorageSync("token");
  1015. uni.request({
  1016. url: this.serverurl + '/TNotice/updateNotice?adminId=' + adminId + '&noticeId=' + id,
  1017. header: {
  1018. 'token': token
  1019. },
  1020. method: "POST",
  1021. success: (res) => {
  1022. uni.showModal({
  1023. title: this.$t('common.tip'),
  1024. content: res.data.message,
  1025. success: (res) => {
  1026. }
  1027. })
  1028. },
  1029. });
  1030. this.$refs.popupDialog.close()
  1031. },
  1032. //点击取消
  1033. dialogClose(done) {
  1034. this.noticeTRUE = true,
  1035. // this.msgType = 'success'
  1036. // 需要执行 done 才能关闭对话框
  1037. this.$refs.popupDialog.close()
  1038. }
  1039. }
  1040. }
  1041. </script>
  1042. <style>
  1043. page {
  1044. /* background: #F2F2F2; */
  1045. background: #FFFFFF;
  1046. width: 750upx;
  1047. overflow-x: hidden;
  1048. }
  1049. .head {
  1050. display: flex;
  1051. flex-direction: row;
  1052. background: #206DC3;
  1053. width: 750upx;
  1054. height: 180upx;
  1055. }
  1056. .company {
  1057. width: 48%;
  1058. text-align: right;
  1059. }
  1060. .pname {
  1061. display: flex;
  1062. flex-direction: row;
  1063. width: 40%;
  1064. }
  1065. .userFlagimg {
  1066. padding-left: 30upx;
  1067. padding-top: 10upx;
  1068. width: 26upx;
  1069. height: 28upx;
  1070. }
  1071. .wenzi {
  1072. padding-left: 5upx;
  1073. /* text-align:right; */
  1074. white-space: nowrap;
  1075. overflow: hidden;
  1076. /* text-overflow: ellipsis; */
  1077. }
  1078. .ri {
  1079. width: 690upx;
  1080. height: 180upx;
  1081. background: #FFFFFF;
  1082. border-radius: 15upx;
  1083. /* 上移 */
  1084. transform: translateY(-90upx);
  1085. text-align: center;
  1086. margin: auto;
  1087. display: flex;
  1088. flex-direction: row;
  1089. /* 阴影 */
  1090. box-shadow: 0upx -1upx 20upx #D3D3D3;
  1091. /* box-shadow:0px 0px 10px 5px #aaa; */
  1092. }
  1093. .riShell {
  1094. display: flex;
  1095. flex-direction: row;
  1096. margin: auto;
  1097. }
  1098. .riTitle {
  1099. display: flex;
  1100. flex-direction: column;
  1101. margin: auto;
  1102. }
  1103. .riqi {
  1104. display: flex;
  1105. flex-direction: column;
  1106. margin: auto;
  1107. }
  1108. .fourTitle {
  1109. width: 690upx;
  1110. height: 294upx;
  1111. display: flex;
  1112. flex-direction: row;
  1113. flex-wrap: wrap;
  1114. background: #FFFFFF;
  1115. box-shadow: 0upx 0upx 20upx #D3D3D3;
  1116. margin: auto;
  1117. border-radius: 15upx;
  1118. transform: translateY(-60upx);
  1119. }
  1120. .four {
  1121. display: flex;
  1122. flex-direction: row;
  1123. margin: auto;
  1124. width: 48%;
  1125. }
  1126. .fourImg {
  1127. width: 54upx;
  1128. height: 54upx;
  1129. }
  1130. .qiun-padding {
  1131. padding: 2%;
  1132. width: 96%;
  1133. }
  1134. .qiun-wrap {
  1135. display: flex;
  1136. flex-wrap: wrap;
  1137. }
  1138. .qiun-rows {
  1139. display: flex;
  1140. flex-direction: row !important;
  1141. }
  1142. .qiun-columns {
  1143. display: flex;
  1144. flex-direction: column !important;
  1145. }
  1146. .qiun-common-mt {
  1147. margin-top: 0upx;
  1148. height: 160upx;
  1149. }
  1150. .qiun-bg-white {
  1151. background: #FFFFFF;
  1152. }
  1153. .qiun-title-bar {
  1154. width: 100%;
  1155. /* padding: 10upx 2%; */
  1156. flex-wrap: nowrap;
  1157. border-radius: 15upx;
  1158. }
  1159. .qiun-title-dot-light {
  1160. width: 92%;
  1161. border-left: 20upx;
  1162. border-left: 10upx solid #206DC3;
  1163. padding-left: 10upx;
  1164. height: 32upx;
  1165. /* padding-bottom: 40upx; */
  1166. font-family: "PingFang-SC-Bold";
  1167. font-weight: bold;
  1168. margin: auto;
  1169. font-size: 32upx;
  1170. color: #363D44;
  1171. transform: translateY(20upx);
  1172. }
  1173. .dis {
  1174. transform: translateY(-13upx);
  1175. font-size: 32upx;
  1176. font-family: "PingFang-SC-Bold";
  1177. color: #363D44;
  1178. }
  1179. .shijian {
  1180. transform: translateY(40upx);
  1181. padding-top: 30upx;
  1182. height: 80upx;
  1183. width: 690upx;
  1184. margin: auto;
  1185. box-shadow: 0upx 0upx 10upx #D3D3D3;
  1186. }
  1187. .line {
  1188. background: #ECECEC;
  1189. height: 20upx;
  1190. }
  1191. .qiun-charts {
  1192. width: 690upx;
  1193. height: 370upx;
  1194. padding-top: 50upx;
  1195. background-color: #FFFFFF;
  1196. margin: auto;
  1197. }
  1198. .charts {
  1199. width: 690upx;
  1200. height: 370upx;
  1201. background-color: #FFFFFF;
  1202. margin: auto;
  1203. }
  1204. .preImg {
  1205. position: absolute;
  1206. left: 30upx;
  1207. width: 71upx;
  1208. height: 57upx;
  1209. }
  1210. .nextImg {
  1211. position: absolute;
  1212. right: 30upx;
  1213. width: 71upx;
  1214. height: 57upx;
  1215. }
  1216. .fontLeft {
  1217. margin-right: 6upx;
  1218. }
  1219. .tr {
  1220. padding-top: 15upx;
  1221. display: flex;
  1222. flex-direction: row;
  1223. justify-content: flex-start;
  1224. font-size: 26upx;
  1225. font-family: "PingFang-SC-Bold";
  1226. }
  1227. .td-left {
  1228. font-family: "PingFang-SC-Bold";
  1229. margin: auto;
  1230. font-size: 26upx;
  1231. width: 30%;
  1232. text-align: right;
  1233. }
  1234. .td-right {
  1235. font-family: "PingFang-SC-Bold";
  1236. /* font-weight: bold; */
  1237. margin: auto;
  1238. /* font-size: 26upx; */
  1239. width: 70%;
  1240. text-align: left;
  1241. }
  1242. .search-button{
  1243. width: 20%;
  1244. padding-left: 7upx;
  1245. text-align: center;
  1246. }
  1247. </style>