|
@@ -147,16 +147,21 @@ const SmartReport = () => {
|
|
|
}, []);
|
|
|
|
|
|
const initData = () => {
|
|
|
- const eqOption = getPieOption(data.eqData, '异常类型统计');
|
|
|
+ const legend = {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ top: 'center',
|
|
|
+ };
|
|
|
+ const eqOption = getPieOption(data.eqData, legend);
|
|
|
if (eqChartRef.current) eqChartRef.current.setOption(eqOption);
|
|
|
|
|
|
- const taskOption = getPieOption(data.taskData, '任务类型统计');
|
|
|
+ const taskOption = getPieOption(data.taskData);
|
|
|
if (taskChartRef.current) taskChartRef.current.setOption(taskOption);
|
|
|
|
|
|
- const workOption = getPieOption(data.workOrderData, '工况评估统计');
|
|
|
+ const workOption = getPieOption(data.workOrderData);
|
|
|
if (workChartRef.current) workChartRef.current.setOption(workOption);
|
|
|
|
|
|
- const workScoreOption = getPieOption(data.workScoreData, '工况评估统计');
|
|
|
+ const workScoreOption = getPieOption(data.workScoreData, legend);
|
|
|
if (workScoreChartRef.current)
|
|
|
workScoreChartRef.current.setOption(workScoreOption);
|
|
|
};
|
|
@@ -185,6 +190,68 @@ const SmartReport = () => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
+ const TwoBoxItem = ({ label, value, unit }) => {
|
|
|
+ return (
|
|
|
+ <div className={styles.longWhiteBox}>
|
|
|
+ <div className={styles.longWhiteBoxIn}>
|
|
|
+ {label}
|
|
|
+ <span className={styles.value}>
|
|
|
+ {value}
|
|
|
+ {unit && <span className={styles.unit}>{unit}</span>}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ const ThreeBoxContent = ({ data }) => {
|
|
|
+ return (
|
|
|
+ <div className={styles.threeContent}>
|
|
|
+ {data?.map((item) => (
|
|
|
+ <div className={styles.threeItem}>
|
|
|
+ <div className={styles.value}>
|
|
|
+ {item.value}
|
|
|
+ <span className={styles.unit}>{item.unit}</span>
|
|
|
+ </div>
|
|
|
+ {item.label}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const CircleContent = ({ data }) => {
|
|
|
+ return (
|
|
|
+ <div className={styles.circleContent}>
|
|
|
+ {data?.map((item) => (
|
|
|
+ <div className={styles.circle}>
|
|
|
+ <div className={styles.threeItem}>
|
|
|
+ <div className={styles.value}>
|
|
|
+ {item.value}
|
|
|
+ <span className={styles.unit}>{item.unit}</span>
|
|
|
+ </div>
|
|
|
+ {item.label}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const CircleThreeContent = ({ data }) => {
|
|
|
+ return (
|
|
|
+ <div className={styles.circleContent}>
|
|
|
+ {data?.map((item) => (
|
|
|
+ <div>
|
|
|
+ <div className={styles.circleValue}>{item.value}</div>
|
|
|
+ <div style={{ textAlign: 'center' }} className={styles.unit}>
|
|
|
+ {item.label}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<PageContent closeable={false}>
|
|
|
<ConfigProvider locale={zhCN}>
|
|
@@ -231,165 +298,208 @@ const SmartReport = () => {
|
|
|
<Spin spinning={loading}>
|
|
|
<Box title="概览">
|
|
|
<div className={styles.content}>
|
|
|
- <div className={styles.longWhiteBox}>
|
|
|
- <div className={styles.longWhiteBoxIn}>
|
|
|
- 累计进水:<span className={styles.value}>{in_water}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.longWhiteBox}>
|
|
|
- <div className={styles.longWhiteBoxIn}>
|
|
|
- 累计出水:<span className={styles.value}>{out_water}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.threeContent}>
|
|
|
- <div className={styles.threeItem}>
|
|
|
- <div className={styles.value}>
|
|
|
- {water_electricity}
|
|
|
- <span className={styles.unit}>kwh</span>
|
|
|
- </div>
|
|
|
- 吨水能耗
|
|
|
- </div>
|
|
|
- <div className={styles.threeItem}>
|
|
|
- <div className={styles.value}>
|
|
|
- {water_medicine}
|
|
|
- <span className={styles.unit}>kg/m³</span>
|
|
|
- </div>
|
|
|
- 吨水药耗
|
|
|
- </div>
|
|
|
- <div className={styles.threeItem}>
|
|
|
- <div className={styles.value}>
|
|
|
- {self_inspection_task}
|
|
|
- <span className={styles.unit}>次</span>
|
|
|
- </div>
|
|
|
- 系统自检次数
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.longWhiteBox}>
|
|
|
- <div className={styles.longWhiteBoxIn}>
|
|
|
- 优化建议:
|
|
|
- <span className={styles.value}>
|
|
|
- {push_optimize_task}
|
|
|
- <span className={styles.unit}>条</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.longWhiteBox}>
|
|
|
- <div className={styles.longWhiteBoxIn}>
|
|
|
- 任务完成:
|
|
|
- <span className={styles.value}>
|
|
|
- {push_complete_task}
|
|
|
- <span className={styles.unit}>个</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/* <div className={styles.item}>
|
|
|
- 优化建议: {push_optimize_task}条
|
|
|
- </div> */}
|
|
|
- {/* <div className={styles.item}>
|
|
|
- 任务完成:{push_complete_task}个
|
|
|
- </div> */}
|
|
|
- <div className={styles.item}>
|
|
|
- 工单完成:{work_order_complete_task}个
|
|
|
- </div>
|
|
|
- <div className={styles.item}>设备维修:{repair_record}个</div>
|
|
|
- <div className={styles.item}>设备保养:{maintain_record}个</div>
|
|
|
+ <TwoBoxItem label="累计进水:" value={in_water} />
|
|
|
+ <TwoBoxItem label="累计出水:" value={out_water} />
|
|
|
+
|
|
|
+ <ThreeBoxContent
|
|
|
+ data={[
|
|
|
+ { label: '吨水能耗', value: water_electricity, unit: 'kwh' },
|
|
|
+ { label: '吨水药耗', value: water_medicine, unit: 'kg/m³' },
|
|
|
+ {
|
|
|
+ label: '系统自检次数',
|
|
|
+ value: self_inspection_task,
|
|
|
+ unit: '次',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+
|
|
|
+ <TwoBoxItem
|
|
|
+ label="优化建议:"
|
|
|
+ value={push_optimize_task}
|
|
|
+ unit="条"
|
|
|
+ />
|
|
|
+ <TwoBoxItem
|
|
|
+ label="任务完成:"
|
|
|
+ value={push_complete_task}
|
|
|
+ unit="个"
|
|
|
+ />
|
|
|
+
|
|
|
+ <ThreeBoxContent
|
|
|
+ data={[
|
|
|
+ {
|
|
|
+ label: '工单完成',
|
|
|
+ value: work_order_complete_task,
|
|
|
+ unit: '个',
|
|
|
+ },
|
|
|
+ { label: '设备维修', value: repair_record, unit: '个' },
|
|
|
+ {
|
|
|
+ label: '设备保养',
|
|
|
+ value: maintain_record,
|
|
|
+ unit: '个',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
</div>
|
|
|
</Box>
|
|
|
<Box title="水量">
|
|
|
- <div className={styles.content}>
|
|
|
- <div className={styles.item}>累计进水:{in_water}</div>
|
|
|
- <div className={styles.item}>累计出水:{out_water}</div>
|
|
|
- </div>
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ { label: '累计进水', value: in_water },
|
|
|
+ { label: '累计出水', value: out_water },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
</Box>
|
|
|
|
|
|
<Box title="能耗">
|
|
|
- <div className={styles.content}>
|
|
|
- <div className={styles.item}>吨水能耗:{water_electricity}</div>
|
|
|
- <div className={styles.item}>累计耗电量:{electricity}kwh</div>
|
|
|
- </div>
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ { label: '吨水能耗', value: water_electricity, unit: '' },
|
|
|
+ { label: '累计耗电量', value: electricity, unit: 'kwh' },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
</Box>
|
|
|
|
|
|
<Box title="药耗">
|
|
|
- <div className={styles.content}>
|
|
|
- <div className={styles.item}>吨水药耗:{water_medicine}kg/m³</div>
|
|
|
- <div className={styles.item}>累计用药量:{medicine}</div>
|
|
|
- </div>
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ { label: '吨水药耗', value: water_medicine, unit: 'kg/m³' },
|
|
|
+ { label: '累计用药量', value: medicine },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
</Box>
|
|
|
|
|
|
<div className={styles.box}>
|
|
|
<div className={styles.main_in}>
|
|
|
<div className={styles.titleContent}>系统自检</div>
|
|
|
-
|
|
|
- <div className={styles.threeContent}>
|
|
|
- <div className={styles.numItem}>
|
|
|
- <div>{self_inspection_task}</div>
|
|
|
- <div>自检次数</div>
|
|
|
- </div>
|
|
|
- <div className={styles.numItem}>
|
|
|
- <div>{self_inspection_abnormal_task}</div>
|
|
|
- <div>异常次数</div>
|
|
|
- </div>
|
|
|
- <div className={styles.numItem}>
|
|
|
- <div>{self_inspection_normal_task}</div>
|
|
|
- <div>正常次数</div>
|
|
|
- </div>
|
|
|
+ <CircleThreeContent
|
|
|
+ data={[
|
|
|
+ { label: '自检次数', value: self_inspection_task },
|
|
|
+ { label: '异常次数', value: self_inspection_abnormal_task },
|
|
|
+ { label: '正常次数', value: self_inspection_normal_task },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <div className={styles.paddingContent}>
|
|
|
+ <div className={styles.cutLine}></div>
|
|
|
+ </div>
|
|
|
+ <div style={{ padding: '0.43rem 0.4rem 0' }}>
|
|
|
+ <div className={styles.unit}>异常类型统计:</div>
|
|
|
+ <div
|
|
|
+ ref={eqDomRef}
|
|
|
+ style={{
|
|
|
+ height: '4rem',
|
|
|
+ width: 'calc(100% - 1.2rem)',
|
|
|
+ margin: '0 0 0 0.8rem',
|
|
|
+ }}
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div
|
|
|
- ref={eqDomRef}
|
|
|
- style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
|
|
|
- ></div>
|
|
|
- {/* <div>异常类型统计(设备异常、工艺异常、安全隐患异常)</div> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.box}>
|
|
|
<div className={styles.main_in}>
|
|
|
<div className={styles.titleContent}>智慧运营</div>
|
|
|
- <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
|
|
|
+ <CircleThreeContent
|
|
|
+ data={[
|
|
|
+ { label: '优化条数', value: push_optimize_task, unit: '条' },
|
|
|
+ { label: '超滤能耗', value: ele_65 },
|
|
|
+ { label: '反渗透能耗', value: ele_66 },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <div className={styles.paddingContent}>
|
|
|
+ <div className={styles.cutLine}></div>
|
|
|
+ </div>
|
|
|
+ <div style={{ padding: '0.43rem 0.4rem 0' }}>
|
|
|
+ <div className={styles.unit}>工况评估统计:</div>
|
|
|
+ <div
|
|
|
+ ref={workScoreDomRef}
|
|
|
+ style={{
|
|
|
+ height: '4rem',
|
|
|
+ width: 'calc(100% - 1.2rem)',
|
|
|
+ margin: '0 0 0 0.8rem',
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {/* <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
|
|
|
<div className={styles.smartText}>
|
|
|
优化条数:{push_optimize_task}条
|
|
|
</div>
|
|
|
<div className={styles.smartText}>超滤能耗:{ele_65}</div>
|
|
|
<div className={styles.smartText}>反渗透能耗:{ele_66}</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
+ </div> */}
|
|
|
+ {/* <div
|
|
|
ref={workScoreDomRef}
|
|
|
style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
|
|
|
- ></div>
|
|
|
+ ></div> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.box}>
|
|
|
<div className={styles.main_in}>
|
|
|
<div className={styles.titleContent}>任务工单</div>
|
|
|
- <div className={styles.content}>
|
|
|
- <div className={styles.item}>任务数量:{push_task}</div>
|
|
|
- <div className={styles.item}>工单数量:{work_order_task}</div>
|
|
|
- <div className={styles.item}>
|
|
|
- 任务完成数量:{push_complete_task}
|
|
|
- </div>
|
|
|
- <div className={styles.item}>
|
|
|
- 工单完成数量:{work_order_complete_task}
|
|
|
- </div>
|
|
|
- <div className={styles.item}>
|
|
|
- 任务完成率:{Number(push_complete_task_per)}%
|
|
|
- </div>
|
|
|
- <div className={styles.item}>
|
|
|
- 工单完成率:{Number(work_order_complete_task_per)}%
|
|
|
- </div>
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ { label: '任务数量', value: push_task },
|
|
|
+ { label: '工单数量', value: work_order_task },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ { label: '任务完成数量', value: push_complete_task },
|
|
|
+ { label: '工单完成数量', value: work_order_complete_task },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ {
|
|
|
+ label: '任务完成率',
|
|
|
+ value: push_complete_task_per,
|
|
|
+ unit: '%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '工单完成率',
|
|
|
+ value: work_order_complete_task_per,
|
|
|
+ unit: '%',
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <div style={{ display: 'flex', padding: '0 0.4rem' }}>
|
|
|
<div className={styles.item}>
|
|
|
- <div ref={taskDomRef} style={{ height: '4rem' }}></div>
|
|
|
+ <div className={styles.unit}>任务类型统计:</div>
|
|
|
+ <div
|
|
|
+ ref={taskDomRef}
|
|
|
+ style={{
|
|
|
+ height: '4rem',
|
|
|
+ width: '100%',
|
|
|
+ marginTop: '0.2rem',
|
|
|
+ }}
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
<div className={styles.item}>
|
|
|
- <div ref={workDomRef} style={{ height: '4rem' }}></div>
|
|
|
+ <div className={styles.unit}>工单类型统计:</div>
|
|
|
+ <div
|
|
|
+ ref={workDomRef}
|
|
|
+ style={{
|
|
|
+ height: '4rem',
|
|
|
+ width: '100%',
|
|
|
+ marginTop: '0.2rem',
|
|
|
+ }}
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<Box title="设备维修保养">
|
|
|
- <div className={styles.content}>
|
|
|
- <div className={styles.item}>维修数量:{repair_record}</div>
|
|
|
- <div className={styles.item}>保养数量:{maintain_record}</div>
|
|
|
- </div>
|
|
|
+ <CircleContent
|
|
|
+ data={[
|
|
|
+ {
|
|
|
+ label: '维修数量',
|
|
|
+ value: repair_record,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '保养数量',
|
|
|
+ value: maintain_record,
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
</Box>
|
|
|
</Spin>
|
|
|
</ConfigProvider>
|
|
@@ -397,19 +507,8 @@ const SmartReport = () => {
|
|
|
);
|
|
|
};
|
|
|
export default SmartReport;
|
|
|
-const getPieOption = (chartData, name) => {
|
|
|
+const getPieOption = (chartData, legend = {}) => {
|
|
|
const option = {
|
|
|
- title: {
|
|
|
- text: name,
|
|
|
- top: '92%',
|
|
|
- left: '50%',
|
|
|
- textAlign: 'center',
|
|
|
- textStyle: {
|
|
|
- color: '#000000',
|
|
|
- fontWeight: 'normal',
|
|
|
- fontSize: 18,
|
|
|
- },
|
|
|
- },
|
|
|
color: [
|
|
|
'#5470c6',
|
|
|
'#91cc75',
|
|
@@ -431,11 +530,12 @@ const getPieOption = (chartData, name) => {
|
|
|
color: '#000000',
|
|
|
fontSize: 18,
|
|
|
},
|
|
|
+ ...legend,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
- radius: '50%',
|
|
|
+ radius: '60%',
|
|
|
data: chartData,
|
|
|
emphasis: {
|
|
|
itemStyle: {
|