form.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <template>
  2. <view class="content">
  3. <view class="flex-y-center header-title">
  4. <image class="title-icon" src="../../static/images/total.png" mode=""></image>
  5. <view class="">
  6. {{$test.$test}}总次数
  7. </view>
  8. </view>
  9. <view class="table">
  10. <view class="table-tr">
  11. <navigator v-for="(item,index) of type_data" :key='index' class="table-td" url="agent-list">
  12. <view class="table-td-num">
  13. {{item.count}}
  14. </view>
  15. <view class="">{{item.type==1?'收款码'+$test.$test:item.type==2?'公众号'+$test.$test:item.type==3?'文章'+$test.$test:item.type==4?'普通二维码'+$test.$test:
  16. item.type==6?'视频'+$test.$test:''}}</view>
  17. </navigator>
  18. </view>
  19. </view>
  20. <view class="flex-y-center header-title">
  21. <image class="title-icon" src="../../static/images/total1.png" mode=""></image>
  22. <view class="">
  23. 成功{{$test.$test}}次数统计
  24. </view>
  25. </view>
  26. <view class="header-pof">
  27. <liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
  28. </view>
  29. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  30. <view class="qiun-title-dot-light">基本区域图</view>
  31. </view>
  32. <view class="qiun-charts">
  33. <!--#ifdef MP-ALIPAY -->
  34. <canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
  35. :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" ></canvas>
  36. <!--#endif-->
  37. <!--#ifndef MP-ALIPAY -->
  38. <canvas canvas-id="canvasArea" id="canvasArea" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
  39. <!--#endif-->
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
  45. import uCharts from '@/components/u-charts/u-charts.min.js';
  46. import {
  47. isJSON
  48. } from '@/static/js/checker.js';
  49. var _self;
  50. var canvaArea = null;
  51. export default {
  52. components: {
  53. liuyunoTabs
  54. },
  55. data() {
  56. return {
  57. tabs: [
  58. "近7日统计",
  59. "近30日统计",
  60. ],
  61. defaultIndex: 0,
  62. cWidth: '',
  63. cHeight: '',
  64. pixelRatio: 1,
  65. textarea: '',
  66. type_data: [],
  67. $test:this.$test.$test,
  68. }
  69. },
  70. onLoad() {
  71. _self = this;
  72. uni.setNavigationBarTitle({
  73. title:`${this.$test.$test}统计`
  74. })
  75. //#ifdef MP-ALIPAY
  76. uni.getSystemInfo({
  77. success: function(res) {
  78. if (res.pixelRatio > 1) {
  79. //正常这里给2就行,如果pixelRatio=3性能会降低一点
  80. //_self.pixelRatio =res.pixelRatio;
  81. _self.pixelRatio = 2;
  82. }
  83. }
  84. });
  85. //#endif
  86. this.cWidth = uni.upx2px(750);
  87. this.cHeight = uni.upx2px(500);
  88. this.getServerData();
  89. },
  90. methods: {
  91. tabClick(e) {
  92. // console.log(e)
  93. this.defaultIndex = e;
  94. let Area = {
  95. categories: [],
  96. series: []
  97. };
  98. let categories = [],
  99. series = [],
  100. data = [];
  101. if (this.defaultIndex == 1) {
  102. for (var i of this.figure_data2) {
  103. categories.push(i.date)
  104. data.push(i.count)
  105. }
  106. } else {
  107. for (var i of this.figure_data) {
  108. categories.push(i.date)
  109. data.push(i.count)
  110. }
  111. }
  112. series.push({
  113. color: "#facc14",
  114. data: data,
  115. name: "当日时段分布",
  116. breadcrumb: { show: false}
  117. })
  118. // console.log(categories, series, "data")
  119. Area.categories = categories;
  120. Area.series = series;
  121. _self.showArea("canvasArea", Area);
  122. },
  123. getServerData() {
  124. this.request({
  125. url: "exchange/userStatistics",
  126. data: {
  127. token: uni.getStorageSync("token"),
  128. },
  129. showLoading: true,
  130. }).then(res => {
  131. if (res.code === '200') {
  132. this.type_data = res.data.type_data;
  133. this.figure_data = res.data.figure_data;
  134. this.figure_data2 = res.data.figure_data2;
  135. let Area = {
  136. categories: [],
  137. series: []
  138. };
  139. let categories = [],
  140. series = [],
  141. data = [];
  142. for (var i of this.figure_data) {
  143. categories.push(i.date)
  144. data.push(i.count)
  145. }
  146. series.push({
  147. color: "#facc14",
  148. data: data,
  149. name: "当日时段分布",
  150. })
  151. Area.categories = categories;
  152. Area.series = series;
  153. _self.showArea("canvasArea", Area);
  154. }
  155. }).catch((res) => {});
  156. },
  157. showArea(canvasId, chartData) {
  158. canvaArea = new uCharts({
  159. // #ifdef H5
  160. $this: _self,
  161. // #endif
  162. canvasId: canvasId,
  163. type: 'area',
  164. fontSize: 11,
  165. padding: [10, 15, 10, 15],
  166. legend: {
  167. show: false,
  168. position: 'top',
  169. float: 'center',
  170. itemGap: 30,
  171. padding: 5,
  172. lineHeight: 18,
  173. margin: 0,
  174. },
  175. dataLabel: false,
  176. dataPointShape: true,
  177. background: '#FFFFFF',
  178. pixelRatio: _self.pixelRatio,
  179. categories: chartData.categories,
  180. series: chartData.series,
  181. animation: true,
  182. enableScroll: true,//开启图表拖拽功能
  183. xAxis: {
  184. type: 'grid',
  185. gridColor: '#CCCCCC',
  186. gridType: 'dash',
  187. dashLength: 8,
  188. itemCount:5,
  189. scrollShow:true,
  190. // 新增是否显示滚动条,默认false
  191. scrollAlign:'left',
  192. scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
  193. scrollColor:'#DEE7F7',//默认为 #A6A6A6}
  194. //滚动条初始位置
  195. },
  196. yAxis: {
  197. gridType: 'dash',
  198. gridColor: '#CCCCCC',
  199. dashLength: 8,
  200. splitNumber: 5,
  201. format:(val)=>{return val.toFixed(0)}
  202. },
  203. width: _self.cWidth * _self.pixelRatio,
  204. height: _self.cHeight * _self.pixelRatio,
  205. extra: {
  206. area: {
  207. type: 'curve',
  208. opacity: 0.2,
  209. addLine: true,
  210. width: 2,
  211. gradient: false
  212. }
  213. }
  214. });
  215. },
  216. touchLineA(e){
  217. canvaArea.scrollStart(e);
  218. },
  219. moveLineA(e) {
  220. canvaArea.scroll(e);
  221. },
  222. touchEndLineA(e) {
  223. canvaArea.scrollEnd(e);
  224. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  225. canvaArea.showToolTip(e, {
  226. format: function (item, category) {
  227. return category + ' ' + item.name + ':' + item.data
  228. }
  229. });
  230. },
  231. }
  232. }
  233. </script>
  234. <style>
  235. page {
  236. background: #F5F7FA;
  237. }
  238. .header-title {
  239. height: 101rpx;
  240. padding: 0 40rpx;
  241. border-bottom: 1rpx solid #F1F1F1;
  242. background: #FFFFFF;
  243. }
  244. .title-icon {
  245. width: 40rpx;
  246. height: 40rpx;
  247. margin-right: 20rpx;
  248. }
  249. .table {
  250. display: table;
  251. width: 100%;
  252. border-collapse: collapse;
  253. box-sizing: border-box;
  254. background: #FFFFFF;
  255. }
  256. .table-tr {
  257. /* display: ; */
  258. /* height: 92rpx; */
  259. }
  260. .table-th {
  261. width: 33%;
  262. font-weight: bold;
  263. border: 1rpx solid #FAFAFA;
  264. text-align: center;
  265. vertical-align: middle;
  266. }
  267. .table-td {
  268. width: 33%;
  269. border: 1rpx solid #FAFAFA;
  270. text-align: center;
  271. vertical-align: middle;
  272. background: #fff;
  273. font-size: 27rpx;
  274. color: #666666;
  275. padding: 62rpx 0;
  276. width: 33%;
  277. display: inline-block;
  278. }
  279. .table-td .table-td-num {
  280. font-size: 40rpx;
  281. font-weight: 500;
  282. color: #ffa024;
  283. }
  284. .qiun-title-dot-light {
  285. padding: 20rpx 40rpx;
  286. background: #FFFFFF;
  287. }
  288. /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  289. .qiun-charts {
  290. width: 750upx;
  291. height: 500upx;
  292. background-color: #FFFFFF;
  293. }
  294. .charts {
  295. width: 750upx;
  296. height: 500upx;
  297. background-color: #FFFFFF;
  298. }
  299. </style>