dataItem-wv.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="main" style="width:100%;height:400px;margin:auto"></div>
  10. <script src="./echarts.min.js"></script>
  11. <script type="text/javascript" src="../luckysheet/dist/plugins/js/uni-webview-js0.0.3_index.js"></script>
  12. <script src="../jquery.min.js"></script>
  13. <script>
  14. function GetQueryString(name) {
  15. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  16. var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  17. var context = "";
  18. if (r != null)
  19. context = decodeURIComponent(r[2]);
  20. reg = null;
  21. r = null;
  22. return context == null || context == "" || context == "undefined" ? "" : context;
  23. }
  24. </script>
  25. <script>
  26. var option = {
  27. xAxis: {
  28. type: 'category',
  29. data: [],
  30. axisLabel: {
  31. formatter: function(value) {
  32. return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join('')
  33. }
  34. }
  35. },
  36. yAxis: {
  37. type: 'value'
  38. },
  39. legend: {
  40. type: 'scroll',
  41. top: 0
  42. },
  43. tooltip: {
  44. trigger: 'axis',
  45. axisPointer: {
  46. type: 'cross',
  47. lineStyle: {
  48. type: 'dashed'
  49. },
  50. label: {
  51. show: false
  52. }
  53. },
  54. textStyle:{
  55. color:'#ffffff'
  56. },
  57. confine: true,
  58. extraCssText: 'white-space: normal; word-break: break-all;',
  59. backgroundColor: 'rgba(108,106,120,0.9)',
  60. position: 'inside',
  61. formatter: function(params) {
  62. let result = ''
  63. for (let i in params) {
  64. let value = '--'
  65. if (params[i].data !== null) {
  66. value = params[i].data
  67. }
  68. result += '<br>' + params[i].seriesName + ':' +
  69. value
  70. }
  71. return result
  72. }
  73. },
  74. dataZoom: [{
  75. type: 'inside',
  76. start: 90,
  77. end: 100
  78. },
  79. {
  80. type: 'slider',
  81. show: true,
  82. start: 90,
  83. end: 100,
  84. bottom: 10
  85. }
  86. ],
  87. series: []
  88. };
  89. </script>
  90. <script>
  91. document.addEventListener('UniAppJSBridgeReady', function() {
  92. uni.getEnv(function(res) {
  93. const id = GetQueryString('id')
  94. const startTime = GetQueryString('startTime')
  95. const endTime = GetQueryString('endTime')
  96. const valueType = GetQueryString('valueType')
  97. const itemReadName = GetQueryString('itemReadName')
  98. const token = window.localStorage.getItem('C_TOKEN')
  99. var service, serviceTime
  100. $.ajax({
  101. url: '',
  102. type: 'GET',
  103. beforeSend: function(xhr) {
  104. // this.url =
  105. // `http://192.168.0.41:8081/itemGroup/itemDataQuery?id=${id}&startTime=${startTime}&endTime=${endTime}&valueType=${valueType}`
  106. this.url = window.location.origin +
  107. `/itemGroup/itemDataQuery?id=${id}&startTime=${startTime}&endTime=${endTime}&valueType=${valueType}`
  108. xhr.setRequestHeader("Authorization", "Bearer " +
  109. token);
  110. xhr.setRequestHeader("token", token);
  111. },
  112. success: (res) => {
  113. if (res.code === 200) {
  114. const {
  115. valueList,
  116. valueTimeList
  117. } = res.data
  118. const service = [{
  119. name: itemReadName,
  120. data: valueList,
  121. type: 'line'
  122. }]
  123. option.xAxis.data = valueTimeList
  124. option.series = service
  125. var chart = echarts.init(document.getElementById('main'));
  126. var lastOption = chart.getOption();
  127. if (lastOption != undefined) {
  128. option.dataZoom[0].start = lastOption.dataZoom[0].start
  129. option.dataZoom[0].end = lastOption.dataZoom[0].end
  130. option.dataZoom[1].start = lastOption.dataZoom[1].start
  131. option.dataZoom[1].end = lastOption.dataZoom[1].end
  132. }
  133. chart.setOption(option)
  134. }
  135. }
  136. })
  137. })
  138. })
  139. </script>
  140. </body>
  141. </html>