equipmentStatistics.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  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">今日销售排行</view>
  12. <view class="shijian" style="text-align: center;position: relative;">
  13. <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  14. <span>{{startDate1}}</span>
  15. <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  16. </view>
  17. </view>
  18. <view class="qiun-charts" style="background-color: #FFFFFF;">
  19. <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true @touchstart="touchLine1" @touchmove="moveLine1"
  20. @touchend="touchEndLine1" style="background-color: #FFFFFF;"></canvas>
  21. </view>
  22. </view>
  23. <view class="line"></view>
  24. <view class="qiun-columns">
  25. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  26. <view class="qiun-title-dot-light">本周销售排行</view>
  27. <view class="shijian" style="text-align: center;position: relative;">
  28. <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  29. <span>{{startDate2}} 至 {{endDate2}}</span>
  30. <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  31. </view>
  32. </view>
  33. <view class="qiun-charts" style="background-color: #FFFFFF;">
  34. <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true @touchstart="touchLine2" @touchmove="moveLine2"
  35. @touchend="touchEndLine2" style="background-color: #FFFFFF;"></canvas>
  36. </view>
  37. </view>
  38. <view class="line"></view>
  39. <view class="qiun-columns">
  40. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  41. <view class="qiun-title-dot-light">本月销售排行</view>
  42. <view class="shijian" style="text-align: center;position: relative;">
  43. <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  44. <span>{{startDate3}} 至 {{endDate3}}</span>
  45. <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  46. </view>
  47. </view>
  48. <view class="qiun-charts" style="background-color: #FFFFFF;">
  49. <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true @touchstart="touchLine3" @touchmove="moveLine3"
  50. @touchend="touchEndLine3" style="background-color: #FFFFFF;"></canvas>
  51. </view>
  52. </view>
  53. <view class="line"></view>
  54. <view class="qiun-columns">
  55. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  56. <view class="qiun-title-dot-light">本年销售排行</view>
  57. <view class="shijian" style="text-align: center;position: relative;">
  58. <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  59. <span>{{startDate4}} 至 {{endDate4}}</span>
  60. <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  61. </view>
  62. </view>
  63. <view class="qiun-charts" style="background-color: #FFFFFF;">
  64. <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true @touchstart="touchLine4" @touchmove="moveLine4"
  65. @touchend="touchEndLine4" style="background-color: #FFFFFF;"></canvas>
  66. </view>
  67. </view>
  68. </view>
  69. </template>
  70. <script>
  71. import { mapState, mapActions, mapMutations } from 'vuex';
  72. import uCharts from '@/components/u-charts/u-charts.js';
  73. import {dateUtils} from '@/common/util.js';
  74. var _self;
  75. var canvaColumn1=null;
  76. var canvaColumn2=null;
  77. var canvaColumn3=null;
  78. var canvaColumn4=null;
  79. export default {
  80. name: 'equipmentStatistics',
  81. props: {
  82. adminId: '',
  83. },
  84. data() {
  85. return {
  86. pname:'',
  87. cWidth: '',
  88. cHeight: '',
  89. pixelRatio: 1,
  90. startDate1: '',
  91. endDate1: '',
  92. startDate2: '',
  93. endDate2: '',
  94. startDate3: '',
  95. endDate3: '',
  96. startDate4: '',
  97. endDate4: '',
  98. }
  99. },
  100. computed: {
  101. ...mapState(['loginUser']),
  102. },
  103. // onLoad(option){
  104. // console.log("onLoad");
  105. // this.adminId = option['adminId'];
  106. // this.pname = option['pname'];
  107. // this.init();
  108. // },
  109. mounted() {
  110. console.log("mounted");
  111. this.init();
  112. },
  113. methods: {
  114. ...mapActions('chart', ['getEquipmentStatistics','getMainStatistics','getMachineNum']),
  115. async init(){
  116. if(this.pname===''){
  117. this.pname = uni.getStorageSync("name");
  118. }
  119. console.log("adminId:" + this.adminId)
  120. _self = this;
  121. //图表中图
  122. this.cWidth = uni.upx2px(690);
  123. this.cHeight = uni.upx2px(430);
  124. await this.initDateRang(new Date(),'day');
  125. await this.initDateRang(new Date(),'week');
  126. await this.initDateRang(new Date(),'month');
  127. await this.initDateRang(new Date(),'year');
  128. },
  129. initDateRang(day,chartType) {
  130. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  131. if(chartType === 'day'){
  132. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  133. }
  134. if (chartType === 'week') {
  135. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  136. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  137. }
  138. if (chartType === 'month') {
  139. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  140. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  141. }
  142. if (chartType === 'year') {
  143. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  144. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  145. }
  146. return this.getStatisticsData(chartType);
  147. },
  148. /**上一个 */
  149. pre(chartType) {
  150. let day;
  151. if (chartType === 'day') { // 日
  152. day = new Date(this.startDate1);
  153. day.setDate(day.getDate() - 1);
  154. }
  155. if(chartType === 'week'){ // 周
  156. day = new Date(this.startDate2);
  157. day.setDate(day.getDate() - 7);
  158. }
  159. if (chartType === 'month') { // 月
  160. day = new Date(this.startDate3);
  161. day.setMonth(day.getMonth() - 1);
  162. }
  163. if (chartType === 'year') { // 年
  164. day = new Date(this.startDate4);
  165. day.setFullYear(day.getFullYear() - 1);
  166. }
  167. this.initDateRang(day,chartType);
  168. },
  169. /**下一个 */
  170. next(chartType) {
  171. let day;
  172. if (chartType === 'day') { // 日
  173. day = new Date(this.startDate1);
  174. day.setDate(day.getDate() + 1);
  175. }
  176. if(chartType === 'week'){ // 周
  177. day = new Date(this.startDate2);
  178. day.setDate(day.getDate() + 7);
  179. }
  180. if (chartType === 'month') { // 月
  181. day = new Date(this.startDate3);
  182. day.setMonth(day.getMonth() + 1);
  183. }
  184. if (chartType === 'year') { // 年
  185. day = new Date(this.startDate4);
  186. day.setFullYear(day.getFullYear() + 1);
  187. }
  188. this.initDateRang(day,chartType);
  189. },
  190. getStatisticsData(chartType) {
  191. const param = {
  192. 'chartType': chartType
  193. };
  194. if(chartType=='day'){
  195. param['startDate'] = this.startDate1;
  196. param['endDate'] = this.startDate1;
  197. }
  198. if(chartType=='week'){
  199. param['startDate'] = this.startDate2;
  200. param['endDate'] = this.endDate2;
  201. }
  202. if(chartType=='month'){
  203. param['startDate'] = this.startDate3;
  204. param['endDate'] = this.endDate3;
  205. }
  206. if(chartType=='year'){
  207. param['startDate'] = this.startDate4;
  208. param['endDate'] = this.endDate4;
  209. }
  210. if(this.adminId){ // 子组件,则拿传过来的参
  211. param['adminId'] = this.adminId;
  212. }else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  213. param['adminId'] = this.loginUser['id'];
  214. }
  215. if (this.equipmentId) {
  216. param['equipmentId'] = this.equipmentId;
  217. }
  218. return this.getEquipmentStatistics(param)
  219. .then(data => {
  220. uni.stopPullDownRefresh();
  221. if(param['chartType']=='day'){
  222. canvaColumn1 = this.initChart('canvaColumn1',data);
  223. }
  224. if(param['chartType']=='week'){
  225. canvaColumn2 = this.initChart('canvaColumn2',data);
  226. }
  227. if(param['chartType']=='month'){
  228. canvaColumn3 = this.initChart('canvaColumn3',data);
  229. }
  230. if(param['chartType']=='year'){
  231. canvaColumn4 = this.initChart('canvaColumn4',data);
  232. }
  233. }
  234. , _ => {
  235. uni.stopPullDownRefresh();
  236. if(param['chartType']=='day'){
  237. canvaColumn1 = this.initChart('canvaColumn1',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  238. }
  239. if(param['chartType']=='week'){
  240. canvaColumn2 = this.initChart('canvaColumn2',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  241. }
  242. if(param['chartType']=='month'){
  243. canvaColumn3 = this.initChart('canvaColumn3',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  244. }
  245. if(param['chartType']=='year'){
  246. canvaColumn4 = this.initChart('canvaColumn4',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  247. }
  248. }
  249. );
  250. },
  251. initChart(canvasId, chartData){
  252. return new uCharts({
  253. $this: _self,
  254. canvasId: canvasId,
  255. enableScroll: true,
  256. type: 'column',
  257. legend: true,
  258. fontSize: 11,
  259. background: '#FFFFFF',//y轴颜色
  260. pixelRatio: 1,
  261. animation: true,
  262. categories: chartData.categories,
  263. series: chartData.series,
  264. xAxis: {
  265. type: 'grid',
  266. gridType: 'dash',
  267. rotateLabel: true,
  268. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  269. scrollShow: true, //新增是否显示滚动条,默认false
  270. scrollAlign: 'left', //滚动条初始位置
  271. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  272. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  273. // disableGrid:true,
  274. },
  275. yAxis: {
  276. //disabled:true
  277. },
  278. dataLabel: true,
  279. width: _self.cWidth * _self.pixelRatio,
  280. height: _self.cHeight * _self.pixelRatio,
  281. extra: {
  282. column: {
  283. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  284. width: 30
  285. }
  286. }
  287. });
  288. },
  289. touchLine1(e) {
  290. if(canvaColumn1){
  291. canvaColumn1.scrollStart(e);
  292. }
  293. },
  294. moveLine1(e) {
  295. if(canvaColumn1){
  296. canvaColumn1.scroll(e);
  297. }
  298. },
  299. touchEndLine1(e) {
  300. if(canvaColumn1){
  301. canvaColumn1.scrollEnd(e);
  302. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  303. canvaColumn1.showToolTip(e, {
  304. format: function(item, category) {
  305. return category + ' ' + item.name + ':' + item.data
  306. }
  307. });
  308. }
  309. },
  310. touchLine2(e) {
  311. if(canvaColumn2){
  312. canvaColumn2.scrollStart(e);
  313. }
  314. },
  315. moveLine2(e) {
  316. if(canvaColumn2){
  317. canvaColumn2.scroll(e);
  318. }
  319. },
  320. touchEndLine2(e) {
  321. if(canvaColumn2){
  322. canvaColumn2.scrollEnd(e);
  323. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  324. canvaColumn2.showToolTip(e, {
  325. format: function(item, category) {
  326. return category + ' ' + item.name + ':' + item.data
  327. }
  328. });
  329. }
  330. },
  331. touchLine3(e) {
  332. if(canvaColumn3){
  333. canvaColumn3.scrollStart(e);
  334. }
  335. },
  336. moveLine3(e) {
  337. if(canvaColumn3){
  338. canvaColumn3.scroll(e);
  339. }
  340. },
  341. touchEndLine3(e) {
  342. if(canvaColumn3){
  343. canvaColumn3.scrollEnd(e);
  344. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  345. canvaColumn3.showToolTip(e, {
  346. format: function(item, category) {
  347. return category + ' ' + item.name + ':' + item.data
  348. }
  349. });
  350. }
  351. },
  352. touchLine4(e) {
  353. if(canvaColumn4){
  354. canvaColumn4.scrollStart(e);
  355. }
  356. },
  357. moveLine4(e) {
  358. if(canvaColumn4){
  359. canvaColumn4.scroll(e);
  360. }
  361. },
  362. touchEndLine4(e) {
  363. if(canvaColumn4){
  364. canvaColumn4.scrollEnd(e);
  365. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  366. canvaColumn4.showToolTip(e, {
  367. format: function(item, category) {
  368. return category + ' ' + item.name + ':' + item.data
  369. }
  370. });
  371. }
  372. },
  373. }
  374. }
  375. </script>
  376. <style>
  377. page {
  378. /* background: #F2F2F2; */
  379. background: #FFFFFF;
  380. width: 750upx;
  381. overflow-x: hidden;
  382. }
  383. .head {
  384. display: flex;
  385. flex-direction: row;
  386. background: #206DC3;
  387. width: 750upx;
  388. height: 180upx;
  389. }
  390. .title{
  391. /* border-left: 10upx solid #0ea391; */
  392. color: #363D44;
  393. font-size: 62upx;
  394. font-family: "PingFang-SC-Bold";
  395. text-align: center;
  396. margin: auto;
  397. }
  398. .ri {
  399. width: 690upx;
  400. height: 180upx;
  401. background: #FFFFFF;
  402. border-radius: 15upx;
  403. /* 上移 */
  404. transform: translateY(-90upx);
  405. text-align: center;
  406. margin: auto;
  407. display: flex;
  408. flex-direction: row;
  409. /* 阴影 */
  410. box-shadow: 0upx -1upx 20upx #D3D3D3;
  411. /* box-shadow:0px 0px 10px 5px #aaa; */
  412. }
  413. .riShell {
  414. display: flex;
  415. flex-direction: row;
  416. margin: auto;
  417. }
  418. .riTitle {
  419. display: flex;
  420. flex-direction: column;
  421. margin: auto;
  422. }
  423. .riqi {
  424. display: flex;
  425. flex-direction: column;
  426. margin: auto;
  427. }
  428. .fourTitle {
  429. width: 690upx;
  430. height: 294upx;
  431. display: flex;
  432. flex-direction: row;
  433. flex-wrap: wrap;
  434. background: #FFFFFF;
  435. box-shadow: 0upx 0upx 20upx #D3D3D3;
  436. margin: auto;
  437. border-radius: 15upx;
  438. transform: translateY(-60upx);
  439. }
  440. .four {
  441. display: flex;
  442. flex-direction: row;
  443. margin: auto;
  444. width: 48%;
  445. }
  446. .fourImg {
  447. width: 54upx;
  448. height: 54upx;
  449. }
  450. .qiun-padding {
  451. padding: 2%;
  452. width: 96%;
  453. }
  454. .qiun-wrap {
  455. display: flex;
  456. flex-wrap: wrap;
  457. }
  458. .qiun-rows {
  459. display: flex;
  460. flex-direction: row !important;
  461. }
  462. .qiun-columns {
  463. display: flex;
  464. flex-direction: column !important;
  465. }
  466. .qiun-common-mt {
  467. margin-top: 0upx;
  468. height: 160upx;
  469. }
  470. .qiun-bg-white {
  471. background: #FFFFFF;
  472. }
  473. .qiun-title-bar {
  474. width: 100%;
  475. /* padding: 10upx 2%; */
  476. flex-wrap: nowrap;
  477. border-radius: 15upx;
  478. }
  479. .qiun-title-dot-light {
  480. width: 92%;
  481. border-left: 20upx;
  482. border-left: 10upx solid #0ea391;
  483. padding-left: 10upx;
  484. height: 32upx;
  485. padding-bottom: 40upx;
  486. font-family: "PingFang-SC-Bold";
  487. font-weight: bold;
  488. margin: auto;
  489. font-size: 32upx;
  490. color: #363D44;
  491. }
  492. .shijian {
  493. padding-top: 30upx;
  494. height: 80upx;
  495. width: 690upx;
  496. margin: auto;
  497. box-shadow: 0upx 0upx 10upx #D3D3D3;
  498. }
  499. .line{
  500. background:#ECECEC ;
  501. height: 20upx;
  502. }
  503. .qiun-charts {
  504. width: 690upx;
  505. height: 370upx;
  506. padding-top: 50upx;
  507. background-color: #FFFFFF;
  508. margin: auto;
  509. }
  510. .charts {
  511. width: 690upx;
  512. height: 370upx;
  513. background-color: #FFFFFF;
  514. margin: auto;
  515. }
  516. .preImg {
  517. position: absolute;
  518. left: 40upx;
  519. width: 27upx;
  520. height: 45upx;
  521. }
  522. .nextImg {
  523. position: absolute;
  524. right: 40upx;
  525. width: 27upx;
  526. height: 45upx;
  527. }
  528. </style>