free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:gaojing

dev
zhaobing’ 1 year ago
parent
7549bb1a41
commit
407e8de9cb
1 changed files with 88 additions and 190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 278
      web/client/src/sections/projectGroup/containers/bigscreen.jsx

278
web/client/src/sections/projectGroup/containers/bigscreen.jsx
View File

@ -63,188 +63,86 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
} }
}, []) }, [])
// const mockData=[ // const mockData=[
// { // {
// "name": "西腰墩水库", // "name": "西腰墩水库",
// "id": 2957, // "id": 2957,
// "alarmCount": 0, // "alarmCount": 6,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "智慧排涝-雄溪河绿新桥南侧智能分流井排口", // "name": "智慧排涝-雄溪河绿新桥南侧智能分流井排口",
// "id": 2966, // "id": 2966,
// "alarmCount": 0, // "alarmCount": 1,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "智慧排涝-雄溪河东侧绿地山庄红色廊厅排口", // "name": "智慧排涝-雄溪河东侧绿地山庄红色廊厅排口",
// "id": 2967, // "id": 2967,
// "alarmCount": 0, // "alarmCount": 3,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "鲍家湖水库", // "name": "鲍家湖水库",
// "id": 2973, // "id": 2973,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "长春市九台区水旱灾害防御中心小型水库", // "name": "长春市九台区水旱灾害防御中心小型水库",
// "id": 2975, // "id": 2975,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "重庆观音峡项目", // "name": "重庆观音峡项目",
// "id": 2977, // "id": 2977,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "杭州宝坞口隧道监测", // "name": "杭州宝坞口隧道监测",
// "id": 2988, // "id": 2988,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "大湖湾水库", // "name": "大湖湾水库",
// "id": 3004, // "id": 3004,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "上高高情远韵驿站智慧公厕", // "name": "上高高情远韵驿站智慧公厕",
// "id": 3007, // "id": 3007,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "后头湖水库", // "name": "大湖湾水库",
// "id": 3008, // "id": 3004,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "灵宝边坡项目", // "name": "上高高情远韵驿站智慧公厕",
// "id": 3010, // "id": 3007,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "大河峡水库", // "name": "大湖湾水库",
// "id": 3023, // "id": 3004,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 0 // "dealAlarmCount": 0
// }, // },
// { // {
// "name": "公家墩水库", // "name": "上高高情远韵驿站智慧公厕",
// "id": 3024, // "id": 3007,
// "alarmCount": 0, // "alarmCount": 0,
// "dealAlarmCount": 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(() => { useEffect(() => {
const overview = document.getElementById("alarmRank"); const overview = document.getElementById("alarmRank");
if (overview) { if (overview) {
@ -620,10 +518,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{mockData[0]?.name?.length > 5 ? <Tooltip content={mockData[0]?.name}>{mockData[0]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> <div class='structDiv'>{mockData[0]?.name?.length > 5 ? <Tooltip content={mockData[0]?.name}>{mockData[0]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width:(biggest>0? ((mockData[0].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width:(biggest>0? ((mockData[0].alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width: (biggest>0? ((mockData[0].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width: (biggest>0? ((mockData[0].dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
</div> </div>
</div>) : '' </div>) : ''
@ -635,10 +533,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{mockData[1]?.name?.length > 5 ? <Tooltip content={mockData[1]?.name}>{mockData[1]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> <div class='structDiv'>{mockData[1]?.name?.length > 5 ? <Tooltip content={mockData[1]?.name}>{mockData[1]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width: (biggest>0? ((mockData[1].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width: (biggest>0? ((mockData[1].alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width: (biggest>0? ((mockData[1].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width: (biggest>0? ((mockData[1].dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
</div> </div>
</div>) : '' </div>) : ''
@ -650,10 +548,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{mockData[2]?.name?.length > 5 ? <Tooltip content={mockData[2]?.name}>{mockData[2]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> <div class='structDiv'>{mockData[2]?.name?.length > 5 ? <Tooltip content={mockData[2]?.name}>{mockData[2]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width: (biggest>0? ((mockData[2].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width: (biggest>0? ((mockData[2].alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width:(biggest>0? ((mockData[2].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width:(biggest>0? ((mockData[2].dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
</div> </div>
</div>) : '' </div>) : ''
@ -667,10 +565,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div> <div class='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width:(biggest>0?((item.alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width:(biggest>0?((item.alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width:(biggest>0? ((item.dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width:(biggest>0? ((item.dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save