historyChart.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <!-- 历史数据 -->
  3. <div id="historyChart">
  4. <!-- 精度选择 -->
  5. <div class="query-area">
  6. <span>当下分精度下采集数量:{{ chartData.length }}</span>
  7. <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
  8. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  9. </el-select>
  10. </div>
  11. <!-- 图表 -->
  12. <div class="chart-area" ref="chart">
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import { mapGetters } from 'vuex'
  18. import {
  19. getHistoryData
  20. } from '@/api/scan/request'
  21. import echarts from 'echarts'
  22. export default {
  23. data() {
  24. return {
  25. lineChart: null,//折线表
  26. selectValue: '5min',//下拉框默认值
  27. options: [//精度
  28. { value: '1min', label: '1分钟' },
  29. { value: '5min', label: '5分钟' },
  30. { value: '15min', label: '15分钟' },
  31. { value: '30min', label: '30分钟' },
  32. { value: '1hour', label: '1小时' },
  33. { value: '1day', label: '1天' },
  34. ],
  35. //数据表
  36. chartData: []
  37. }
  38. },
  39. props: {
  40. tabFunNum: String//表号功能号
  41. },
  42. methods: {
  43. //加载表格
  44. loadTable() {
  45. let query = {
  46. secret: this.secret,
  47. projectId: this.projectId,
  48. userInfo: this.userInfo
  49. };
  50. //时间处理
  51. let nowDate = new Date().getTime();
  52. let gteDate = 0;
  53. if (this.selectValue == '1min' || this.selectValue == '5min') {
  54. gteDate = nowDate - 3600 * 1000;
  55. }
  56. else if (this.selectValue == '15min' || this.selectValue == '30min') {
  57. gteDate = nowDate - 24 * 3600 * 1000;
  58. }
  59. else {
  60. gteDate = nowDate - 30 * 24 * 3600 * 1000;
  61. }
  62. let pa = {
  63. criterias: [
  64. {
  65. "met_fun": this.tabFunNum, //表号功能号
  66. "period": this.selectValue,
  67. "receivetime": {
  68. "$gte": this.date2String(gteDate),
  69. "$lt": this.date2String(nowDate)
  70. }
  71. }
  72. ]
  73. };
  74. //获取历史数据
  75. getHistoryData(query, pa, res => {
  76. this.chartData = res[`${this.tabFunNum}`].Content;
  77. //折线图参数
  78. let lineChartOption = {
  79. tooltip: {
  80. trigger: 'axis',
  81. position: function (pt) {
  82. return [pt[0], '10%'];
  83. }
  84. },
  85. xAxis: {
  86. type: 'category',
  87. boundaryGap: false,
  88. data: this.chartData.map(item => item.data_time)
  89. },
  90. yAxis: {
  91. type: 'value',
  92. boundaryGap: [0, '100%']
  93. },
  94. dataZoom: [{
  95. type: 'inside',
  96. start: 80,
  97. end: 100
  98. }, {
  99. start: 0,
  100. end: 10,
  101. handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
  102. handleSize: '80%',
  103. handleStyle: {
  104. color: '#fff',
  105. shadowBlur: 3,
  106. shadowColor: 'rgb(144, 147, 153)',
  107. shadowOffsetX: 2,
  108. shadowOffsetY: 2
  109. }
  110. }],
  111. series: [
  112. {
  113. name: '数值',
  114. type: 'line',
  115. smooth: true,
  116. symbol: 'none',
  117. sampling: 'average',
  118. itemStyle: {
  119. color: 'rgb(103, 194, 58)'
  120. },
  121. areaStyle: {
  122. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  123. offset: 0,
  124. color: 'rgb(225, 243, 216)'
  125. }, {
  126. offset: 1,
  127. color: 'rgb(225, 243, 216)'
  128. }])
  129. },
  130. data: this.chartData.map(item => item.data_value)
  131. }
  132. ]
  133. };
  134. this.lineChart.setOption(lineChartOption);
  135. });
  136. },
  137. //时间戳转string 例:标准时间 => 20190929120000
  138. date2String(d) {
  139. let localeString = new Date(d).toLocaleString();
  140. let timeString = new Date(d).toTimeString();
  141. let localArr = localeString.match(/(\d\d|\/\d+)/g).slice(0, 4);
  142. let timeArr = timeString.match(/(\d\d)/g).slice(0, 3);
  143. localArr[2] = localArr[2].length == 2 ? `0${localArr[2].substring(1, 2)}` : localArr[2].substring(1, 3);
  144. localArr[3] = localArr[3].length == 2 ? `0${localArr[3].substring(1, 2)}` : localArr[3].substring(1, 3);
  145. return localArr.concat(timeArr).join('');
  146. },
  147. init() {
  148. this.lineChart = echarts.init(this.$refs.chart);
  149. this.loadTable();
  150. },
  151. },
  152. computed: {
  153. ...mapGetters('layout', ['projectId', 'secret', 'userInfo'])
  154. },
  155. mounted() {
  156. //实例化
  157. this.init();
  158. let that = this;
  159. //图表大小随窗口变化
  160. window.onresize = () => {
  161. that.lineChart.resize();
  162. }
  163. },
  164. watch: {
  165. //切换时更新数据
  166. tabFunNum() {
  167. this.loadTable();
  168. }
  169. }
  170. }
  171. </script>
  172. <style lang="less" scoped>
  173. #historyChart {
  174. height: 100%;
  175. width: 100%;
  176. padding: 10px 5px;
  177. }
  178. .query-area {
  179. height: 40px;
  180. line-height: 40px;
  181. }
  182. .chart-area {
  183. height: 450px;
  184. }
  185. </style>