statics.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <app-layout>
  3. <app-tab-nav :shadow="noBorder" :tabList="tabList" background="#f7f7f7" padding="0" :border="noBorder" :activeItem="activeTab" @click="tabStatus" :theme="theme"></app-tab-nav>
  4. <view class="total-item">
  5. <view class='total-num' style='color: #417afd'>{{total_order_num}}</view>
  6. <view class="total-title">核销订单数</view>
  7. <!--#ifdef MP-ALIPAY -->
  8. <canvas @touchstart="touchIt($event,'canvasFirst')" canvas-id="canvasFirst" id="canvasFirst" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
  9. <!--#endif-->
  10. <!--#ifndef MP-ALIPAY -->
  11. <canvas @touchstart="touchIt($event,'canvasFirst')" canvas-id="canvasFirst" id="canvasFirst" class="charts"></canvas>
  12. <!--#endif-->
  13. </view>
  14. <view class="total-item">
  15. <view class='total-num' style='color: #ff9000'>{{total_order_price}}</view>
  16. <view class="total-title">核销订单金额</view>
  17. <!--#ifdef MP-ALIPAY -->
  18. <canvas @touchstart="touchIt($event,'canvasSec')" canvas-id="canvasSec" id="canvasSec" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
  19. <!--#endif-->
  20. <!--#ifndef MP-ALIPAY -->
  21. <canvas @touchstart="touchIt($event,'canvasSec')" canvas-id="canvasSec" id="canvasSec" class="charts"></canvas>
  22. <!--#endif-->
  23. </view>
  24. <view class="total-item">
  25. <view class='total-num' style='color: #41c6fe'>{{total_card}}</view>
  26. <view class="total-title">核销卡券数</view>
  27. <!--#ifdef MP-ALIPAY -->
  28. <canvas @touchstart="touchIt($event,'canvasThird')" canvas-id="canvasThird" id="canvasThird" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
  29. <!--#endif-->
  30. <!--#ifndef MP-ALIPAY -->
  31. <canvas @touchstart="touchIt($event,'canvasThird')" canvas-id="canvasThird" id="canvasThird" class="charts"></canvas>
  32. <!--#endif-->
  33. </view>
  34. </app-layout>
  35. </template>
  36. <script>
  37. import appLayout from "../../../components/basic-component/app-layout/app-layout.vue";
  38. import appFormId from "../../../components/basic-component/app-form-id/app-form-id.vue";
  39. import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";
  40. import uCharts from '../../../components/u-charts/u-charts.min.js';
  41. import { mapState } from "vuex";
  42. var _self;
  43. var canvasObj = {};
  44. export default {
  45. name: "about",
  46. components: {
  47. "app-layout": appLayout,
  48. "app-tab-nav": appTabNav,
  49. "app-form-id": appFormId
  50. },
  51. data() {
  52. return {
  53. tabList: [
  54. {id:0, name: '累计'},
  55. {id:1, name: '今日'},
  56. {id:-1, name: '昨日'},
  57. {id:7, name: '7日'},
  58. {id:30, name: '30日'},
  59. ],
  60. cWidth:'',
  61. cHeight:'',
  62. pixelRatio:1,
  63. card_list: [],
  64. order_num_list: [],
  65. order_price_list: [],
  66. activeTab: 0,
  67. total_card: 0,
  68. total_order_num: 0,
  69. total_order_price: 0,
  70. };
  71. },
  72. computed: {
  73. ...mapState({
  74. theme: state => state.mallConfig.theme,
  75. mall: state => state.mallConfig.mall
  76. }),
  77. },
  78. onLoad() {
  79. _self = this;
  80. //#ifdef MP-ALIPAY
  81. uni.getSystemInfo({
  82. success: function (res) {
  83. if(res.pixelRatio>1){
  84. //正常这里给2就行,如果pixelRatio=3性能会降低一点
  85. //_self.pixelRatio =res.pixelRatio;
  86. _self.pixelRatio =2;
  87. }
  88. }
  89. });
  90. //#endif
  91. this.cWidth=uni.upx2px(702);
  92. this.cHeight=uni.upx2px(340);
  93. this.activeTab = 0;
  94. this.getList();
  95. },
  96. methods: {
  97. showColumn(canvasId, chartData,color,padding) {
  98. canvasObj[canvasId] = new uCharts({
  99. $this: _self,
  100. canvasId: canvasId,
  101. type: 'area',
  102. legend:{
  103. show: false
  104. },
  105. fontSize:9,
  106. background:'#FFFFFF',
  107. colors: color,
  108. padding: padding?padding:[15,15,4,0],
  109. pixelRatio: _self.pixelRatio,
  110. animation: false,
  111. categories: chartData.categories,
  112. series: chartData.series,
  113. xAxis: {
  114. disableGrid:true,
  115. },
  116. yAxis: {
  117. gridType: 'dash',
  118. data: {
  119. disabled: true
  120. }
  121. },
  122. dataLabel: false,
  123. dataPointShape: false,
  124. width: _self.cWidth*_self.pixelRatio,
  125. height: _self.cHeight*_self.pixelRatio,
  126. extra: {
  127. area: {
  128. type: 'curve',
  129. addLine: true
  130. },
  131. tooltip:{
  132. bgColor:'#000000',
  133. bgOpacity:0.7,
  134. }
  135. }
  136. });
  137. },
  138. tabStatus(e) {
  139. this.activeTab = e.currentTarget.dataset.id;
  140. this.getList();
  141. },
  142. touchIt(e,id) {
  143. canvasObj[id].showToolTip(e, {
  144. format: function (item, category) {
  145. item.color = 'rgba(0,0,0,0)';
  146. if(typeof item.data === 'object'){
  147. return category + ' ' + item.name + ':' + item.data.value
  148. }else{
  149. return category + ' ' + item.name + ':' + item.data
  150. }
  151. }
  152. });
  153. },
  154. getList() {
  155. let that = this;
  156. that.$request({
  157. url: that.$api.clerk.statistics,
  158. data: {
  159. key: that.activeTab
  160. }
  161. }).then(response=>{
  162. that.$hideLoading();
  163. if(response.code == 0) {
  164. that.card_list = response.data.card_list;
  165. that.order_num_list = response.data.order_num_list;
  166. that.order_price_list = response.data.order_price_list;
  167. that.total_card = 0;
  168. that.total_order_num = 0;
  169. that.total_order_price = 0;
  170. that.card_list.forEach(function(row){
  171. that.total_card = (+that.total_card + +row.num).toFixed(2);
  172. })
  173. console.log(that.order_num_list)
  174. that.order_num_list.forEach(function (row) {
  175. that.total_order_num = (+that.total_order_num + +row.num).toFixed(2);
  176. })
  177. that.order_price_list.forEach(function (row) {
  178. that.total_order_price = (+that.total_order_price + +row.num).toFixed(2);
  179. })
  180. let Column_1 = {categories:[],series:[{name: '核销订单数',data: []}]};
  181. let Column_2 = {categories:[],series:[{name: '核销订单金额',data: []}]};
  182. let Column_3 = {categories:[],series:[{name: '核销卡券数',data: []}]};
  183. let padding = [15,15,4,-20];
  184. if(that.activeTab == 1 || that.activeTab == -1 || that.activeTab == 7) {
  185. padding = [15,15,4,0];
  186. }
  187. // 图表一
  188. Column_1 = that.create(response.data.order_num_list,Column_1);
  189. _self.showColumn("canvasFirst",Column_1,["#417afd"],padding);
  190. // 图表二
  191. Column_2 = that.create(response.data.order_price_list,Column_2);
  192. _self.showColumn("canvasSec",Column_2,["#ff9000"]);
  193. // 图表三
  194. Column_3 = that.create(response.data.card_list,Column_3);
  195. _self.showColumn("canvasThird",Column_3,["#41c6fe"]);
  196. }else {
  197. uni.showToast({
  198. title: response.msg,
  199. icon: 'none',
  200. duration: 1000
  201. });
  202. }
  203. }).catch(response => {
  204. that.$hideLoading();
  205. });
  206. },
  207. create(list,Column) {
  208. let date;
  209. let that = this;
  210. list.forEach(function(row,index){
  211. date = list[index].time;
  212. if(that.activeTab == 1 || that.activeTab == -1) {
  213. if(index % 6 == 0) {
  214. if(date < 10) {
  215. date = '0' + date + ':00'
  216. }else {
  217. date = date + ':00'
  218. }
  219. Column.categories.push(date);
  220. }else {
  221. Column.categories.push('')
  222. }
  223. }else if(that.activeTab == 30) {
  224. if(index % 5 == 0 || index == list.length - 1) {
  225. Column.categories.push(date);
  226. }else {
  227. Column.categories.push('')
  228. }
  229. }else {
  230. Column.categories.push(date);
  231. }
  232. Column.series[0].data.push(row.num);
  233. })
  234. if(that.activeTab == 1 || that.activeTab == -1) {
  235. Column.categories.push('24:00')
  236. }
  237. return Column
  238. }
  239. }
  240. }
  241. </script>
  242. <style scoped lang="scss">
  243. .total-item {
  244. width: #{702rpx};
  245. margin: #{24rpx} #{24rpx} 0;
  246. border-radius: #{16rpx};
  247. background-color: #fff;
  248. padding-top: #{54rpx};
  249. text-align: center;
  250. }
  251. .total-title {
  252. color: #999999;
  253. font-size: #{24rpx};
  254. }
  255. .total-num {
  256. font-size: #{46rpx};
  257. }
  258. .charts{
  259. width: 100%;
  260. height:#{340rpx};
  261. margin: #{85rpx} auto 0;
  262. }
  263. </style>