n-safety-monitoring-canva-2.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <view>
  3. <view class="title">
  4. <view class="icon">
  5. <image src="./icon/icon_o.png" mode=""></image>
  6. </view>
  7. <view class="text">报警数量趋势</view>
  8. </view>
  9. <canvas canvas-id="canvasLineA" id="canvasLineA" @touchstart="touchLineA" style="width: 700rpx; height:500rpx;"></canvas>
  10. </view>
  11. </template>
  12. <script>
  13. import uCharts from '@/components/u-charts/u-charts.js';
  14. var _self;
  15. var canvaLineA = null;
  16. export default {
  17. data() {
  18. return {
  19. cWidth: '',
  20. cHeight: '',
  21. pixelRatio: 1,
  22. }
  23. },
  24. mounted() {
  25. _self = this;
  26. this.cWidth = uni.upx2px(700);
  27. this.cHeight = uni.upx2px(500);
  28. this.getServerData();
  29. },
  30. methods: {
  31. getServerData() {
  32. // let LineA = {
  33. // "categories": ['02-24', '02-25', '02-26', '02-27', '02-28', '03-01','03-02'],
  34. // "series": [{
  35. // name: '',
  36. // data: [0,0,0,0,0,7000,3027],
  37. // color: '#000000'
  38. // }]
  39. // };
  40. this.$api.jt_safety_alarm_total({
  41. }).then((res) => {
  42. // console.log(res.data.content)
  43. let LineA = {
  44. categories: [],
  45. data:[]
  46. }
  47. const categories = res.data.content.data
  48. categories.map(function(item,index){
  49. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  50. var sevm = {};
  51. //给每一项中的参数初始化并赋值
  52. sevm = item.every_date.slice(5);
  53. //将项放进新的数组
  54. LineA.categories[index] = sevm
  55. })
  56. const data = res.data.content.data
  57. data.map(function(item, index) {
  58. //新数组的项,用来盛放每一项中的各个参数,每次清空,这样避免改变sevm的值
  59. var sevm = {};
  60. //给每一项中的参数初始化并赋值
  61. sevm = item.every_count;
  62. //将项放进新的数组
  63. LineA.data[index] = sevm
  64. })
  65. // console.log(LineA)
  66. _self.showLineA("canvasLineA",LineA);
  67. })
  68. },
  69. showLineA(canvasId, chartData) {
  70. canvaLineA = new uCharts({
  71. $this: _self,
  72. canvasId: canvasId,
  73. type: 'line',
  74. fontSize: 11,
  75. legend: {
  76. show: false
  77. },
  78. dataLabel: false,
  79. dataPointShape: true,
  80. background: '#FFFFFF',
  81. pixelRatio: _self.pixelRatio,
  82. categories: chartData.categories,
  83. series: [{
  84. name: '',
  85. data: chartData.data,
  86. color: '#000000'
  87. }],
  88. animation: true,
  89. xAxis: {
  90. disableGrid: true,
  91. type: 'grid',
  92. gridColor: '#CCCCCC',
  93. gridType: 'dash',
  94. dashLength: 8
  95. },
  96. yAxis: {
  97. gridType: 'dash',
  98. gridColor: '#CCCCCC',
  99. dashLength: 8,
  100. splitNumber: 5,
  101. min: 10,
  102. max: 180,
  103. format: (val) => {
  104. return val.toFixed(0)
  105. }
  106. },
  107. width: _self.cWidth * _self.pixelRatio,
  108. height: _self.cHeight * _self.pixelRatio,
  109. extra: {
  110. line: {
  111. type: 'straight'
  112. }
  113. }
  114. });
  115. },
  116. touchLineA(e) {
  117. canvaLineA.showToolTip(e, {
  118. format: function(item, category) {
  119. return category + ' ' + item.name + ':' + item.data
  120. }
  121. });
  122. }
  123. }
  124. }
  125. </script>
  126. <style lang="scss">
  127. .title {
  128. margin-bottom: 60rpx;
  129. display: flex;
  130. align-items: center;
  131. .icon {
  132. margin-right: 10rpx;
  133. image{
  134. width: 30rpx;
  135. height: 30rpx;
  136. }
  137. }
  138. .text {}
  139. }
  140. </style>