|
|
@ -28,7 +28,6 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
const [biggest, setBiggest] = useState()//最大的刻度值 |
|
|
|
const [mockData, setMockData] = useState()//所有的告警数据 |
|
|
|
const [xData, setXData] = useState([])//横坐标 |
|
|
|
|
|
|
|
const self = useRef({ myChart: null }); |
|
|
|
|
|
|
|
|
|
|
@ -64,7 +63,188 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
} |
|
|
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
// const mockData=[ |
|
|
|
// { |
|
|
|
// "name": "西腰墩水库", |
|
|
|
// "id": 2957, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "智慧排涝-雄溪河绿新桥南侧智能分流井排口", |
|
|
|
// "id": 2966, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "智慧排涝-雄溪河东侧绿地山庄红色廊厅排口", |
|
|
|
// "id": 2967, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "鲍家湖水库", |
|
|
|
// "id": 2973, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "长春市九台区水旱灾害防御中心小型水库", |
|
|
|
// "id": 2975, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "重庆观音峡项目", |
|
|
|
// "id": 2977, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "杭州宝坞口隧道监测", |
|
|
|
// "id": 2988, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "大湖湾水库", |
|
|
|
// "id": 3004, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "上高高情远韵驿站智慧公厕", |
|
|
|
// "id": 3007, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "后头湖水库", |
|
|
|
// "id": 3008, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "灵宝边坡项目", |
|
|
|
// "id": 3010, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "大河峡水库", |
|
|
|
// "id": 3023, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "公家墩水库", |
|
|
|
// "id": 3024, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "黑达坂水库", |
|
|
|
// "id": 3025, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "白家明塘湖水库", |
|
|
|
// "id": 3033, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "天城湖水库", |
|
|
|
// "id": 3034, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "马尾湖水库", |
|
|
|
// "id": 3035, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "芦湾墩上库", |
|
|
|
// "id": 3036, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "寺沟水库", |
|
|
|
// "id": 3037, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "北台子水库", |
|
|
|
// "id": 3038, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "流水口水库", |
|
|
|
// "id": 3039, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "三十六道沟水库", |
|
|
|
// "id": 3040, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "三坝水库", |
|
|
|
// "id": 3041, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "瓷窑口水库", |
|
|
|
// "id": 3042, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "大香沟水库", |
|
|
|
// "id": 3043, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "小香沟水库", |
|
|
|
// "id": 3044, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "芦湾墩下库", |
|
|
|
// "id": 3045, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "刘家深湖水库", |
|
|
|
// "id": 3047, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "古城水库", |
|
|
|
// "id": 3048, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// "name": "水关河水库", |
|
|
|
// "id": 3049, |
|
|
|
// "alarmCount": 0, |
|
|
|
// "dealAlarmCount": 0 |
|
|
|
// }, |
|
|
|
// ] |
|
|
|
useEffect(() => { |
|
|
|
const overview = document.getElementById("alarmRank"); |
|
|
|
if (overview) { |
|
|
@ -87,6 +267,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
interrupt.update(); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const maxCombinedValue = mockData?.reduce((max, item) => { |
|
|
|
const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount); |
|
|
@ -95,7 +276,6 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
} |
|
|
|
return max; |
|
|
|
}, -Infinity) |
|
|
|
console.log('setAlarmData4',maxCombinedValue) |
|
|
|
const bigD= Math.ceil(maxCombinedValue/50)*50 |
|
|
|
if(bigD==0){ |
|
|
|
setXData([5,4,3,2,1,0,1,2,3,4,5])//最大值为0,默认横坐标 |
|
|
@ -103,7 +283,16 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
setXData([bigD,(bigD-bigD/5),(bigD-bigD*2/5),(bigD-bigD*3/5),(bigD-bigD*4/5),0,(bigD-bigD*4/5),(bigD-bigD*3/5),(bigD-bigD*2/5),(bigD-bigD/5),bigD]) |
|
|
|
} |
|
|
|
setBiggest(bigD) |
|
|
|
},[]) |
|
|
|
if (mockData && mockData.length > 3 && mockData.length < 21) { |
|
|
|
const newArray = mockData.slice(3) |
|
|
|
setAlarmData(newArray) |
|
|
|
} |
|
|
|
if (mockData && mockData.length > 21) { |
|
|
|
//数据大于20的话,取前20 |
|
|
|
const newArray = mockData.slice(3, 20) |
|
|
|
setAlarmData(newArray) |
|
|
|
} |
|
|
|
},[mockData]) |
|
|
|
|
|
|
|
// const mockData=[ |
|
|
|
// {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23}, |
|
|
@ -130,21 +319,6 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
// {id: 22,name: '测试结构物22',alarmCount: 27,dealAlarmCount: 22}, |
|
|
|
// {id: 23,name: '测试结构物23',alarmCount: 26,dealAlarmCount: 21}, |
|
|
|
// ] |
|
|
|
useEffect(() => { |
|
|
|
if (mockData && mockData.length > 3 && mockData.length < 21) { |
|
|
|
const newArray = mockData.slice(3) |
|
|
|
setAlarmData(newArray) |
|
|
|
} |
|
|
|
if (mockData && mockData.length > 21) { |
|
|
|
//数据大于20的话,取前20 |
|
|
|
const newArray = mockData.slice(3, 20) |
|
|
|
setAlarmData(newArray) |
|
|
|
} |
|
|
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let statisticOnline = (groupId) => { |
|
|
|
dispatch(actions.projectGroup.groupStatisticOnline({ groupId })).then(res => { |
|
|
|
if (res.success) { |
|
|
@ -179,13 +353,11 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function formatDate (date) { |
|
|
|
var year = date.getFullYear(); |
|
|
|
var month = String(date.getMonth() + 1).padStart(2, '0'); |
|
|
@ -246,10 +418,6 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
}; |
|
|
|
}, [proportion]); |
|
|
|
|
|
|
|
|
|
|
|
// console.log('setAlarmData3',alarmData) |
|
|
|
// console.log(groupStatisticOnline); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className='project-group'> |
|
|
|
<Header match={match} history={history} /> |
|
|
@ -444,6 +612,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id='alarmRank' style={{ height: clientHeight * 0.55 - 150, position: 'relative' }}> |
|
|
|
|
|
|
|
{mockData && mockData[0] ? (<div style={{ display: 'flex', marginTop: 15, alignItems: 'center' }}> |
|
|
|
<div class='rankDiv'> |
|
|
|
<img src='/assets/images/projectGroup/first.png'></img> |
|
|
|