import React, { useState, useEffect, useRef } from 'react'; import { Line } from '@ant-design/plots'; import { Spin } from 'antd'; import styles from './index.less'; import TdbRHchart from './TdbRHchart.jsx'; import { queryPropertyData } from '@/services/sagacare_service/environment'; export default ({ paramObj, spaceId }) => { let [data, setData] = useState([]); let [levelMax, setLevelMax] = useState(0); const dealTime = (date) => { const str = date.substr(8, 4); const time = str.slice(0, 2) + ':' + str.slice(2); return time; }; useEffect(() => { if (paramObj.id && spaceId) { fn(); } }, [paramObj, spaceId]); const fn = async () => { setData([]); let dataArr = []; if (paramObj.id == 'Tdb,RH') { const arrId = paramObj.id.split(','); let resArr = []; arrId.forEach((item, idx) => { const type = item == 'Tdb' ? '温度' : '湿度'; const resData = getChartData(item, type); resArr.push(resData); }); Promise.all(resArr).then((res) => { let resData = []; if (res[0].length === 1 && res[1] === 1) { // 都没有数据 resData = res[0]; } else { res[0] = res[0].length !== 1 ? res[0] : []; res[1] = res[1].length !== 1 ? res[1] : []; for (let i = 0; i < res[0].length; i++) { let tempObj = { ...res[0][i], ...res[1][i] }; resData.push(tempObj); } } setData(resData); }); } else { const resData = await getChartData(paramObj.id, paramObj.name); setData(resData); } }; const getChartData = (objId, type) => { const params = { spaceId: spaceId, funcid: objId, }; return queryPropertyData(params).then((res) => { let chartArr = []; if (res.dayTarget) { let scalesCheckArr = []; let arr = []; const max = res.dayTarget[0] && res.dayTarget[0][paramObj.maxType]; setLevelMax(max); // 最大值 res.propertyData.shift(); arr = res.propertyData; let key = 'scales'; if (objId === 'RH' || objId === 'Tdb') { key = objId; } arr.forEach((itemArr) => { let scales = '--'; if (itemArr[1] == '-9999') { scalesCheckArr.push(itemArr[1]); scales = '--'; } else { scales = Number(itemArr[1].toFixed(paramObj.pointNum)); } chartArr.push({ Date: dealTime(itemArr[0]), [key]: scales, type: type }); }); if (scalesCheckArr.length == arr.length) { // 有返回时间且数据都是-9999 显示暂无数据 return ['noNum']; } } else { // 无返回数据 显示 该空间数据未配置 return ['notDeploy']; } return chartArr; }); }; const config = { data, xField: 'Date', yField: 'scales', seriesField: 'type', xAxis: { range: [0, 1], }, yAxis: { tickCount: 6, }, legend: { layout: 'horizontal', position: 'top-right', }, annotations: [ // 辅助线 { type: 'line', start: [0, levelMax], end: [data.length - 1, levelMax], top: true, style: { stroke: paramObj.id == 'Tdb,RH' ? 'white' : 'red', lineWidth: 1, }, }, ], }; if (data[0] == 'notDeploy') { return