gt_client_pad/src/pages/Smart/Params/components/WorkConditionAssessment.js

import Panel from '@/pages/Smart/components/Panel';
import { useMemo } from 'react';
import BarChart from './BarChart';
import RadarChartModule from './RadarChartModule';

const WorkConditionAssessment = (props) => {
  const { process, projectId } = props;

  const radarData = useMemo(() => {
    let data = { value: [] };
    let indicator = [];
    [...process.base, ...process.control].forEach((item) => {
      data.value.push(item.value);
      indicator.push({
        name: item.name,
        max: item.max,
      });
    });
    return { indicator, data: [data] };
  }, [process]);

  const barData = useMemo(() => {
    let chartData = [];

    process.out.forEach((item, index) => {
      let data = {
        name: item.name,
        value: [
          {
            // 实际
            name: '实际',
            value: item.realValue,
          },
          {
            // 预测
            name: '预测',
            value: getRandomInRange(item.realValue),
          },
        ],
      };

      chartData.push(data);
    });
    return chartData;
  }, [process]);

  return (
    <Panel title="工况评估">
      <div style={{ position: 'relative', margin: '20px 0' }}>
        <div
          style={{
            fontSize: 20,
            padding: '0px 8px',
            color: '#FFF',
            background: '#fac858',
            borderRadius: 4,
            position: 'absolute',
            top: 0,
            left: 10,
          }}
        >
          参数
        </div>
        <div style={{ height: 280 }}>
          <RadarChartModule color={'#fac858'} name={'参数'} {...radarData} />
        </div>
      </div>
      <div style={{ position: 'relative' }}>
        <div
          style={{
            fontSize: 20,
            padding: '0px 8px',
            color: '#FFF',
            background: '#ee6666',
            borderRadius: 4,
            position: 'absolute',
            top: 0,
            left: 10,
          }}
        >
          输出
        </div>
        <div style={{ height: 320 }}>
          <BarChart data={barData} />
        </div>
      </div>
    </Panel>
  );
};
function getRandomInRange(num) {
  // 计算正负10%的范围
  var range = num * 0.1;

  // 生成随机值
  var randomValue = Math.random() * (2 * range) - range;

  // 计算结果并保留两位小数
  var result = (num + randomValue).toFixed(2);

  // 将结果转换为数值类型并返回
  return Number(result);
}
export default WorkConditionAssessment;