health-index-bloodpressure-chart.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. var curDays = 7;
  2. $('input[data-time=date]').val('7天内');
  3. $(function() {
  4. queryChat(getDateBefore(6), getNowDate());
  5. /* 选择日期 */
  6. var opt1 = {
  7. preset: 'date',
  8. theme: 'ios',
  9. lang: 'zh',
  10. minDate: new Date(1900, 01, 01),
  11. onSelect: function(valueText, inst) {
  12. var date_begin = $("#date_begin").val();
  13. var date_end = $("#date_end").val();
  14. if (date_begin == null || date_begin.length == 0) {
  15. return;
  16. }
  17. if (date_end == null || date_end.length == 0) {
  18. return;
  19. }
  20. queryChat(date_begin, date_end);
  21. }
  22. };
  23. $('input[data-time=date1]').mobiscroll(opt1);
  24. $('input[data-time=date2]').mobiscroll(opt1);
  25. var swiper = new Swiper('.swiper-container', {
  26. pagination: '.swiper-pagination',
  27. paginationClickable: false
  28. });
  29. //咨询药店
  30. $('input[data-time=date]').mobiscroll({
  31. theme: 'ios',
  32. lang: 'zh',
  33. formatValue: function(d) {
  34. return d.join('-');
  35. },
  36. customWheels: true,
  37. wheels: [
  38. [{
  39. keys: ['1', '2', '3'],
  40. values: ['7天内', '30天内', '自定义时间']
  41. }]
  42. ],
  43. onSelect: function(valueText, inst) {
  44. var dd = eval("[" + valueText + "]");
  45. $('input[data-time=date]').val(dd[0].values);
  46. if (dd[0].keys == "3") {
  47. $(".time-began").show();
  48. } else {
  49. $(".time-began").hide();
  50. }
  51. if (dd[0].keys == 1) {
  52. //7天内
  53. if (curDays == 7) {
  54. return;
  55. }
  56. curDays = 7;
  57. queryChat(getDateBefore(6), getNowDate());
  58. } else if (dd[0].keys == 2) {
  59. //30天内
  60. if (curDays == 30) {
  61. return;
  62. }
  63. curDays = 30;
  64. queryChat(getDateBefore(29), getNowDate());
  65. } else {
  66. curDays = 99;
  67. }
  68. }
  69. });
  70. });
  71. function queryChat(date_begin, date_end) {
  72. if (parseFloat(date_begin.replace(/-/g, "")) > parseFloat(date_end.replace(/-/g, ""))) {
  73. dialog({contentType:'tipsbox', skin:'bk-popup' , content:'开始时间不能晚于结束时间'}).show();
  74. return;
  75. }
  76. //发送请求
  77. queryChatByType(2, date_begin, date_end, queryChartSuccesss);
  78. }
  79. /**
  80. * 健康指标图表查询成功处理方法
  81. */
  82. function queryChartSuccesss(res) {
  83. if (res.status == 200) {
  84. d.close();
  85. showChart(res.list);
  86. } else {
  87. queryChartFailed(res);
  88. }
  89. }
  90. function buildData(value, max, min) {
  91. if ((value > 0 && value < min) || value > max) {
  92. return {
  93. value: value,
  94. itemStyle: {
  95. normal: {
  96. color: '#f00'
  97. }
  98. }
  99. }
  100. } else {
  101. return value;
  102. }
  103. }
  104. function showChart(list) {
  105. var legendArray = ['收缩压,舒张压'];
  106. var xAxisArray = new Array();
  107. var seriesArray = new Array();
  108. var allDatas = new Array();
  109. var data1 = new Array();
  110. var data2 = new Array();
  111. for (var i = 0; i < list.length; i++) {
  112. var data = list[i];
  113. if (!data) {
  114. continue;
  115. }
  116. xAxisArray.push(data.date.substr(5, 5));
  117. data1.push(buildData(data.value1, 139, 90));
  118. data2.push(buildData(data.value2, 89, 60));
  119. }
  120. allDatas.push(data1);
  121. allDatas.push(data2);
  122. var series1 = {
  123. name: legendArray[0].split(',')[0],
  124. type: 'line',
  125. symbol: 'emptyCircle',
  126. layerPadding: 0,
  127. nodePadding: 0,
  128. itemStyle: {
  129. normal: {
  130. borderWidth: 8,
  131. color: '#0ad800',
  132. lineStyle: { // 系列级个性化折线样式,横向渐变描边
  133. borderWidth: 2,
  134. color: '#5dd1d2',
  135. width: 4
  136. },
  137. nodeStyle: {
  138. borderWidth: 2,
  139. color: '#93DB70',
  140. borderColor: '#93DB70'
  141. }
  142. },
  143. emphasis: {
  144. label: {
  145. show: true
  146. }
  147. }
  148. },
  149. data: allDatas[0]
  150. };
  151. var series2 = {
  152. name: legendArray[0].split(',')[1],
  153. type: 'line',
  154. symbol: 'emptyCircle',
  155. layerPadding: 0,
  156. nodePadding: 0,
  157. itemStyle: {
  158. normal: {
  159. borderWidth: 8,
  160. color: '#0ad800',
  161. lineStyle: { // 系列级个性化折线样式,横向渐变描边
  162. borderWidth: 2,
  163. color: '#CC66FF',
  164. width: 4
  165. },
  166. nodeStyle: {
  167. borderWidth: 2,
  168. color: '#93DB70',
  169. borderColor: '#93DB70'
  170. }
  171. },
  172. emphasis: {
  173. label: {
  174. show: true
  175. }
  176. }
  177. },
  178. data: allDatas[1]
  179. };
  180. seriesArray.push(series1);
  181. seriesArray.push(series2);
  182. // 路径配置
  183. require.config({
  184. paths: {
  185. echarts: 'http://echarts.baidu.com/build/dist'
  186. }
  187. });
  188. // 使用
  189. require(['echarts',
  190. 'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载
  191. ],
  192. DrawCharts);
  193. function DrawCharts() {
  194. var myChart = require('echarts').init(document.getElementById('chart1'));
  195. var option = {
  196. tooltip: {
  197. trigger: 'axis'
  198. },
  199. grid: {
  200. x: 30,
  201. y: 20,
  202. x2: 25,
  203. y2: 20
  204. },
  205. legend: {
  206. show: false,
  207. data: legendArray
  208. },
  209. toolbox: {
  210. show: false
  211. },
  212. calculable: false,
  213. xAxis: [{
  214. type: 'category',
  215. boundaryGap: false,
  216. data: xAxisArray,
  217. axisLabel: {
  218. margin: 6
  219. }
  220. }],
  221. yAxis: [{
  222. type: 'value'
  223. }],
  224. series: seriesArray
  225. };
  226. // 为echarts对象加载数据
  227. myChart.setOption(option);
  228. }
  229. }
  230. //添加数据添加监听
  231. window.addEventListener("refleshList", function(e) {
  232. //刷新列表
  233. if (curDays == 7) {
  234. //7天内
  235. queryChat(getDateBefore(6), getNowDate());
  236. } else if (curDays == 30) {
  237. //30天内
  238. queryChat(getDateBefore(29), getNowDate());
  239. } else {
  240. var date_begin = $("#date_begin").val();
  241. var date_end = $("#date_end").val();
  242. if (date_begin == null || date_begin.length == 0) {
  243. return;
  244. }
  245. if (date_end == null || date_end.length == 0) {
  246. return;
  247. }
  248. queryChat(date_begin, date_end);
  249. }
  250. });