mainStatistics.vue 35 KB

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