lineChart.jsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import React, { useState, useEffect, useRef } from 'react';
  2. import { Line } from '@ant-design/plots';
  3. import { Spin } from 'antd';
  4. import styles from './index.less';
  5. import TdbRHchart from './TdbRHchart.jsx';
  6. import { queryPropertyData } from '@/services/sagacare_service/environment';
  7. export default ({ paramObj, spaceId }) => {
  8. let [data, setData] = useState([]);
  9. let [levelMax, setLevelMax] = useState(0);
  10. const dealTime = (date) => {
  11. const str = date.substr(8, 4);
  12. const time = str.slice(0, 2) + ':' + str.slice(2);
  13. return time;
  14. };
  15. useEffect(() => {
  16. if (paramObj.id && spaceId) {
  17. fn();
  18. }
  19. }, [paramObj, spaceId]);
  20. const fn = async () => {
  21. setData([]);
  22. let dataArr = [];
  23. if (paramObj.id == 'Tdb,RH') {
  24. const arrId = paramObj.id.split(',');
  25. let resArr = [];
  26. arrId.forEach((item, idx) => {
  27. const type = item == 'Tdb' ? '温度' : '湿度';
  28. const resData = getChartData(item, type);
  29. resArr.push(resData);
  30. });
  31. Promise.all(resArr).then((res) => {
  32. let resData = [];
  33. if (res[0].length === 1 && res[1] === 1) {
  34. // 都没有数据
  35. resData = res[0];
  36. } else {
  37. res[0] = res[0].length !== 1 ? res[0] : [];
  38. res[1] = res[1].length !== 1 ? res[1] : [];
  39. for (let i = 0; i < res[0].length; i++) {
  40. let tempObj = { ...res[0][i], ...res[1][i] };
  41. resData.push(tempObj);
  42. }
  43. }
  44. setData(resData);
  45. });
  46. } else {
  47. const resData = await getChartData(paramObj.id, paramObj.name);
  48. setData(resData);
  49. }
  50. };
  51. const getChartData = (objId, type) => {
  52. const params = {
  53. spaceId: spaceId,
  54. funcid: objId,
  55. };
  56. return queryPropertyData(params).then((res) => {
  57. let chartArr = [];
  58. if (res.dayTarget) {
  59. let scalesCheckArr = [];
  60. let arr = [];
  61. const max = res.dayTarget[0] && res.dayTarget[0][paramObj.maxType];
  62. setLevelMax(max); // 最大值
  63. res.propertyData.shift();
  64. arr = res.propertyData;
  65. let key = 'scales';
  66. if (objId === 'RH' || objId === 'Tdb') {
  67. key = objId;
  68. }
  69. arr.forEach((itemArr) => {
  70. let scales = '--';
  71. if (itemArr[1] == '-9999') {
  72. scalesCheckArr.push(itemArr[1]);
  73. scales = '--';
  74. } else {
  75. scales = Number(itemArr[1].toFixed(paramObj.pointNum));
  76. }
  77. chartArr.push({ Date: dealTime(itemArr[0]), [key]: scales, type: type });
  78. });
  79. if (scalesCheckArr.length == arr.length) {
  80. // 有返回时间且数据都是-9999 显示暂无数据
  81. return ['noNum'];
  82. }
  83. } else {
  84. // 无返回数据 显示 该空间数据未配置
  85. return ['notDeploy'];
  86. }
  87. return chartArr;
  88. });
  89. };
  90. const config = {
  91. data,
  92. xField: 'Date',
  93. yField: 'scales',
  94. seriesField: 'type',
  95. xAxis: {
  96. range: [0, 1],
  97. },
  98. yAxis: {
  99. tickCount: 6,
  100. },
  101. legend: {
  102. layout: 'horizontal',
  103. position: 'top-right',
  104. },
  105. annotations: [
  106. // 辅助线
  107. {
  108. type: 'line',
  109. start: [0, levelMax],
  110. end: [data.length - 1, levelMax],
  111. top: true,
  112. style: {
  113. stroke: paramObj.id == 'Tdb,RH' ? 'white' : 'red',
  114. lineWidth: 1,
  115. },
  116. },
  117. ],
  118. };
  119. if (data[0] == 'notDeploy') {
  120. return <div className={styles.noNum}>该空间数据未配置</div>;
  121. } else if (data[0] == 'noNum') {
  122. return <div className={styles.noNum}>暂无数据</div>;
  123. } else if (data.length > 3) {
  124. if (paramObj.id == 'Tdb,RH') {
  125. return (
  126. <>
  127. <TdbRHchart data={data} />
  128. <div className={styles.chartText}>
  129. <span>温湿度逐时分布</span>
  130. </div>
  131. </>
  132. );
  133. } else {
  134. return (
  135. <>
  136. <Line {...config} />
  137. <div className={styles.chartText}>
  138. <span>浓度逐时分布</span>
  139. </div>
  140. </>
  141. );
  142. }
  143. } else {
  144. return (
  145. <div className={styles.noNum}>
  146. <Spin />
  147. </div>
  148. );
  149. }
  150. };