|
@@ -237,7 +237,27 @@ const SmartReport = () => {
|
|
<div className={styles.circleContent}>
|
|
<div className={styles.circleContent}>
|
|
{data?.map((item) => (
|
|
{data?.map((item) => (
|
|
<div>
|
|
<div>
|
|
- <div className={styles.circleValue}>{item.value}</div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ className={`${styles.circleValue} ${
|
|
|
|
+ Number(item.value) > 999 ? styles.circleValueSmall : ''
|
|
|
|
+ }`}
|
|
|
|
+ >
|
|
|
|
+ {item.value}
|
|
|
|
+ </div>
|
|
|
|
+ <div style={{ textAlign: 'center' }} className={styles.unit}>
|
|
|
|
+ {item.label}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ ))}
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+ };
|
|
|
|
+ const ThreeContent = ({ data }) => {
|
|
|
|
+ return (
|
|
|
|
+ <div className={styles.circleContent}>
|
|
|
|
+ {data?.map((item) => (
|
|
|
|
+ <div>
|
|
|
|
+ <div className={styles.ValueSmall}>{item.value}</div>
|
|
<div style={{ textAlign: 'center' }} className={styles.unit}>
|
|
<div style={{ textAlign: 'center' }} className={styles.unit}>
|
|
{item.label}
|
|
{item.label}
|
|
</div>
|
|
</div>
|
|
@@ -263,7 +283,7 @@ const SmartReport = () => {
|
|
<Select
|
|
<Select
|
|
className={styles.headRightSelect}
|
|
className={styles.headRightSelect}
|
|
defaultValue="1"
|
|
defaultValue="1"
|
|
- style={{ width: 180 }}
|
|
|
|
|
|
+ style={{ width: '2rem' }}
|
|
onChange={handleChange}
|
|
onChange={handleChange}
|
|
popupClassName={styles.headRightSelect}
|
|
popupClassName={styles.headRightSelect}
|
|
options={[
|
|
options={[
|
|
@@ -371,7 +391,7 @@ const SmartReport = () => {
|
|
<div className={styles.box}>
|
|
<div className={styles.box}>
|
|
<div className={styles.main_in}>
|
|
<div className={styles.main_in}>
|
|
<div className={styles.titleContent}>系统自检</div>
|
|
<div className={styles.titleContent}>系统自检</div>
|
|
- <CircleThreeContent
|
|
|
|
|
|
+ <ThreeContent
|
|
data={[
|
|
data={[
|
|
{ label: '自检次数', value: self_inspection_task },
|
|
{ label: '自检次数', value: self_inspection_task },
|
|
{ label: '异常次数', value: self_inspection_abnormal_task },
|
|
{ label: '异常次数', value: self_inspection_abnormal_task },
|
|
@@ -404,8 +424,8 @@ const SmartReport = () => {
|
|
value: push_optimize_task,
|
|
value: push_optimize_task,
|
|
unit: '条',
|
|
unit: '条',
|
|
},
|
|
},
|
|
- { label: '超滤能耗', value: ele_65 },
|
|
|
|
- { label: '反渗透能耗', value: ele_66 },
|
|
|
|
|
|
+ { label: '超滤能耗(kwh)', value: ele_65 },
|
|
|
|
+ { label: '反渗透能耗(kwh)', value: ele_66 },
|
|
]}
|
|
]}
|
|
/>
|
|
/>
|
|
<div className={styles.paddingContent}>
|
|
<div className={styles.paddingContent}>
|
|
@@ -526,6 +546,9 @@ const getPieOption = (chartData, isLeft = false) => {
|
|
],
|
|
],
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: '0.3rem',
|
|
|
|
+ },
|
|
},
|
|
},
|
|
legend: isLeft
|
|
legend: isLeft
|
|
? {
|
|
? {
|
|
@@ -534,16 +557,16 @@ const getPieOption = (chartData, isLeft = false) => {
|
|
top: 'center',
|
|
top: 'center',
|
|
textStyle: {
|
|
textStyle: {
|
|
color: '#000000',
|
|
color: '#000000',
|
|
- fontSize: 12,
|
|
|
|
|
|
+ fontSize: '0.3rem',
|
|
},
|
|
},
|
|
}
|
|
}
|
|
: {
|
|
: {
|
|
orient: 'horizontal',
|
|
orient: 'horizontal',
|
|
- itemWidth: 10,
|
|
|
|
- itemHeight: 8,
|
|
|
|
|
|
+ // itemWidth: 10,
|
|
|
|
+ // itemHeight: 8,
|
|
textStyle: {
|
|
textStyle: {
|
|
color: '#000000',
|
|
color: '#000000',
|
|
- fontSize: 10,
|
|
|
|
|
|
+ fontSize: '0.3rem',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
@@ -552,7 +575,7 @@ const getPieOption = (chartData, isLeft = false) => {
|
|
top: isLeft ? 0 : '20%',
|
|
top: isLeft ? 0 : '20%',
|
|
radius: isLeft ? '60%' : '40%',
|
|
radius: isLeft ? '60%' : '40%',
|
|
left: isLeft ? '20%' : 0,
|
|
left: isLeft ? '20%' : 0,
|
|
- label: isLeft ? {} : { fontSize: 10 },
|
|
|
|
|
|
+ label: { fontSize: '0.3rem' },
|
|
data: chartData,
|
|
data: chartData,
|
|
emphasis: {
|
|
emphasis: {
|
|
itemStyle: {
|
|
itemStyle: {
|