123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- 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 <div className={styles.noNum}>该空间数据未配置</div>;
- } else if (data[0] == 'noNum') {
- return <div className={styles.noNum}>暂无数据</div>;
- } else if (data.length > 3) {
- if (paramObj.id == 'Tdb,RH') {
- return (
- <>
- <TdbRHchart data={data} />
- <div className={styles.chartText}>
- <span>温湿度逐时分布</span>
- </div>
- </>
- );
- } else {
- return (
- <>
- <Line {...config} />
- <div className={styles.chartText}>
- <span>浓度逐时分布</span>
- </div>
- </>
- );
- }
- } else {
- return (
- <div className={styles.noNum}>
- <Spin />
- </div>
- );
- }
- };
|