MyChartsColumn.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <view class="qiun-columns">
  3. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  4. <view class="qiun-title-dot-light">{{chartTitle}}</view>
  5. <view style="text-align: center;position: relative;">
  6. <image @click="pre()" style="position: absolute;left: 40upx; width: 40upx;height: 40upx;" src="/static/img/leftTriangle.png"></image>
  7. <span v-if="this.chartType==='day'">{{startDate}}</span>
  8. <span v-if="this.chartType!=='day'">{{startDate}} 至 {{endDate}}</span>
  9. <image @click="next()" style="position: absolute;right: 40upx; width: 40upx;height: 40upx;" src="/static/img/rightTriangle.png"></image>
  10. </view>
  11. </view>
  12. <view class="qiun-charts" style="background-color: #E5FDC3;">
  13. <canvas :canvas-id="canvasId" :id="canvasId" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA"
  14. @touchend="touchEndLineA" style="background-color: #E5FDC3;"></canvas>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. import {
  20. mapState,
  21. mapActions,
  22. mapMutations
  23. } from 'vuex';
  24. import {
  25. dateUtils
  26. } from '@/common/util.js';
  27. import uCharts from '@/components/u-charts/u-charts.js';
  28. var _self;
  29. var canvaColumn = null;
  30. export default {
  31. name: 'MyChartsColumn',
  32. props: {
  33. canvasId: String,
  34. chartTitle: String,
  35. chartType: String,
  36. equipmentId: '',
  37. adminId: '',
  38. },
  39. data() {
  40. return {
  41. cWidth: '',
  42. cHeight: '',
  43. pixelRatio: 1,
  44. serverData: '',
  45. canvaColumn: Object,
  46. startDate: String,
  47. endDate: String,
  48. }
  49. },
  50. computed: {
  51. ...mapState(['loginUser']),
  52. },
  53. mounted() {
  54. _self = this;
  55. this.$data.type = this.chartType;
  56. this.cWidth = uni.upx2px(750);
  57. this.cHeight = uni.upx2px(500);
  58. this.init();
  59. },
  60. methods: {
  61. ...mapActions('chart', ['getStatistics','getMainStatistics']),
  62. init() {
  63. this.initDateRang(new Date());
  64. this.getStatisticsData();
  65. },
  66. initDateRang(day) {
  67. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  68. let startDate = daystr;
  69. let endDate = daystr;
  70. if (this.chartType === 'week') {
  71. startDate = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  72. endDate = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  73. }
  74. if (this.chartType === 'month') {
  75. startDate = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  76. endDate = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  77. }
  78. if (this.chartType === 'year') {
  79. startDate = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  80. endDate = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  81. }
  82. this.$data.startDate = startDate;
  83. this.$data.endDate = endDate;
  84. },
  85. /**上一个 */
  86. pre() {
  87. const day = new Date(this.$data.startDate);
  88. if (this.chartType === 'day') { // 日
  89. day.setDate(day.getDate() - 1);
  90. }
  91. if(this.chartType === 'week'){ // 周
  92. day.setDate(day.getDate() - 7);
  93. }
  94. if (this.chartType === 'month') { // 月
  95. day.setMonth(day.getMonth() - 1);
  96. }
  97. if (this.chartType === 'year') { // 年
  98. day.setFullYear(day.getFullYear() - 1);
  99. }
  100. this.initDateRang(day);
  101. this.getStatisticsData();
  102. },
  103. /**下一个 */
  104. next() {
  105. const day = new Date(this.$data.startDate);
  106. if (this.chartType === 'day') { // 日
  107. day.setDate(day.getDate() + 1);
  108. }
  109. if(this.chartType === 'week'){ // 周
  110. day.setDate(day.getDate() + 7);
  111. }
  112. if (this.chartType === 'month') { // 月
  113. day.setMonth(day.getMonth() + 1);
  114. }
  115. if (this.chartType === 'year') { // 年
  116. day.setFullYear(day.getFullYear() + 1);
  117. }
  118. this.initDateRang(day);
  119. this.getStatisticsData();
  120. },
  121. getStatisticsData() {
  122. const param = {
  123. 'startDate': this.$data.startDate,
  124. 'endDate': this.$data.endDate,
  125. 'chartType': this.chartType
  126. };
  127. // console.log('chartType:' + param.chartType)
  128. if(this.adminId){ // 子组件,则拿传过来的参
  129. param['adminId'] = this.adminId;
  130. }else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  131. param['adminId'] = this.loginUser['id'];
  132. }
  133. if (this.equipmentId) {
  134. param['equipmentId'] = this.equipmentId;
  135. }
  136. setTimeout(() => {
  137. this.getStatistics(param)
  138. .then(data => [uni.stopPullDownRefresh(), this.showColumn(this.canvasId, data)]
  139. , _ => void [uni.stopPullDownRefresh(),this.showColumn(this.canvasId, {categories:[],series:[]})]);
  140. }, 0);
  141. },
  142. showColumn(canvasId, chartData) {
  143. this.canvaColumn = new uCharts({
  144. $this: _self,
  145. canvasId: canvasId,
  146. enableScroll: true,
  147. type: 'column',
  148. legend: true,
  149. fontSize: 11,
  150. background: '#E5FDC3',
  151. pixelRatio: _self.pixelRatio,
  152. animation: true,
  153. categories: chartData.categories,
  154. series: chartData.series,
  155. xAxis: {
  156. type: 'grid',
  157. gridType: 'dash',
  158. itemCount: 5, //x轴单屏显示数据的数量,默认为5个
  159. scrollShow: true, //新增是否显示滚动条,默认false
  160. scrollAlign: 'left', //滚动条初始位置
  161. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
  162. scrollColor: '#DEE7F7', //默认为 #A6A6A6
  163. // disableGrid:true,
  164. },
  165. yAxis: {
  166. //disabled:true
  167. },
  168. dataLabel: true,
  169. width: _self.cWidth * _self.pixelRatio,
  170. height: _self.cHeight * _self.pixelRatio,
  171. extra: {
  172. column: {
  173. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  174. width: 30
  175. }
  176. }
  177. });
  178. },
  179. touchColumn(e) {
  180. this.canvaColumn.showToolTip(e, {
  181. format: function(item, category) {
  182. if (typeof item.data === 'object') {
  183. return category + ' ' + item.name + ':' + item.data.value
  184. } else {
  185. return category + ' ' + item.name + ':' + item.data
  186. }
  187. }
  188. });
  189. },
  190. touchLineA(e) {
  191. this.canvaColumn.scrollStart(e);
  192. },
  193. moveLineA(e) {
  194. this.canvaColumn.scroll(e);
  195. },
  196. touchEndLineA(e) {
  197. this.canvaColumn.scrollEnd(e);
  198. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  199. this.canvaColumn.showToolTip(e, {
  200. format: function(item, category) {
  201. return category + ' ' + item.name + ':' + item.data
  202. }
  203. });
  204. },
  205. }
  206. }
  207. </script>
  208. <style>
  209. page {
  210. background: #F2F2F2;
  211. width: 750upx;
  212. overflow-x: hidden;
  213. }
  214. .qiun-padding {
  215. padding: 2%;
  216. width: 96%;
  217. }
  218. .qiun-wrap {
  219. display: flex;
  220. flex-wrap: wrap;
  221. }
  222. .qiun-rows {
  223. display: flex;
  224. flex-direction: row !important;
  225. }
  226. .qiun-columns {
  227. display: flex;
  228. flex-direction: column !important;
  229. }
  230. .qiun-common-mt {
  231. margin-top: 10upx;
  232. }
  233. .qiun-bg-white {
  234. background: #FFFFFF;
  235. }
  236. .qiun-title-bar {
  237. width: 96%;
  238. padding: 10upx 2%;
  239. flex-wrap: nowrap;
  240. }
  241. .qiun-title-dot-light {
  242. border-left: 10upx solid #0ea391;
  243. padding-left: 10upx;
  244. font-size: 32upx;
  245. color: #000000
  246. }
  247. .qiun-charts {
  248. width: 750upx;
  249. height: 500upx;
  250. background-color: #FFFFFF;
  251. }
  252. .charts {
  253. width: 750upx;
  254. height: 500upx;
  255. background-color: #FFFFFF;
  256. }
  257. </style>