diff --git a/web/client/assets/images/projectGroup/first.png b/web/client/assets/images/projectGroup/first.png new file mode 100644 index 0000000..9b8a315 Binary files /dev/null and b/web/client/assets/images/projectGroup/first.png differ diff --git a/web/client/assets/images/projectGroup/second.png b/web/client/assets/images/projectGroup/second.png new file mode 100644 index 0000000..6f8af3b Binary files /dev/null and b/web/client/assets/images/projectGroup/second.png differ diff --git a/web/client/assets/images/projectGroup/third.png b/web/client/assets/images/projectGroup/third.png new file mode 100644 index 0000000..996d8fd Binary files /dev/null and b/web/client/assets/images/projectGroup/third.png differ diff --git a/web/client/src/sections/projectGroup/containers/bigscreen.jsx b/web/client/src/sections/projectGroup/containers/bigscreen.jsx index 9eea52a..754bbb3 100644 --- a/web/client/src/sections/projectGroup/containers/bigscreen.jsx +++ b/web/client/src/sections/projectGroup/containers/bigscreen.jsx @@ -6,17 +6,84 @@ import Card from '../components/card' import '../style.less' import ReactECharts from 'echarts-for-react'; import moment from 'moment' +import { Tooltip, Tag } from '@douyinfe/semi-ui'; +import PerfectScrollbar from "perfect-scrollbar"; - +let overviewScrollbar; const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, groupStatisticOnline }) => { + const [alarmData,setAlarmData]=useState()//第三项之后的数据 + const [biggest,setBiggest]=useState()//最大的刻度值 useEffect(() => { let groupId = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId console.log(); dispatch(actions.projectGroup.groupStatisticOnline({ groupId })) }, []) + useEffect(()=>{ + const domProject1 = document.getElementById("alarmRank"); + if (domProject1) { + overviewScrollbar = new PerfectScrollbar("#alarmRank", { + suppressScrollX: true, + }); + } + if (overviewScrollbar&&domProject1) { + overviewScrollbar.update(); + + } + }) + useEffect(()=>{ + const maxCombinedValue = mockData.reduce((max, item) => { + const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount); + if (combinedMax > max) { + return combinedMax; + } + return max; + }, -Infinity) + setBiggest(maxCombinedValue) + + },[]) + const mockData=[ + {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23}, + {id: 2,name: '测试结构物2',alarmCount: 150,dealAlarmCount: 22}, + {id: 3,name: '测试结构物3',alarmCount: 140,dealAlarmCount: 21}, + {id: 4,name: '测试结构物4',alarmCount: 120,dealAlarmCount: 23}, + {id: 5,name: '测试结构物5',alarmCount: 110,dealAlarmCount: 22}, + {id: 6,name: '测试结构物6',alarmCount: 109,dealAlarmCount: 21}, + {id: 7,name: '测试结构物7',alarmCount: 100,dealAlarmCount: 23}, + {id: 8,name: '测试结构物8',alarmCount: 99,dealAlarmCount: 22}, + {id: 9,name: '测试结构物9',alarmCount: 98,dealAlarmCount: 21}, + {id: 10,name: '测试结构物10',alarmCount: 97,dealAlarmCount: 23}, + {id: 11,name: '测试结构物11',alarmCount: 96,dealAlarmCount: 22}, + {id: 12,name: '测试结构物12',alarmCount: 95,dealAlarmCount: 21}, + {id: 13,name: '测试结构物13',alarmCount: 100,dealAlarmCount: 23}, + {id: 14,name: '测试结构物14',alarmCount: 49,dealAlarmCount: 22}, + {id: 15,name: '测试结构物15',alarmCount: 48,dealAlarmCount: 21}, + {id: 16,name: '测试结构物16',alarmCount: 47,dealAlarmCount: 23}, + {id: 17,name: '测试结构物17',alarmCount: 46,dealAlarmCount: 22}, + {id: 18,name: '测试结构物18',alarmCount: 45,dealAlarmCount: 21}, + {id: 19,name: '测试结构物19',alarmCount: 30,dealAlarmCount: 22}, + {id: 20,name: '测试结构物20',alarmCount: 29,dealAlarmCount: 21}, + {id: 21,name: '测试结构物21',alarmCount: 28,dealAlarmCount: 23}, + {id: 22,name: '测试结构物22',alarmCount: 27,dealAlarmCount: 22}, + {id: 23,name: '测试结构物23',alarmCount: 26,dealAlarmCount: 21}, + ] +useEffect(()=>{ + if(mockData.length>3&&mockData.length<21){ + const newArray = mockData.slice(3) + setAlarmData(newArray) + } + if(mockData.length>21){ + //数据大于20的话，取前20 + const newArray = mockData.slice(3,20) + setAlarmData(newArray) + } + +},[]) + + + console.log(groupStatisticOnline); return ( @@ -28,7 +95,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
- +
@@ -105,10 +172,89 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
- +
+
+
+
超阈值个数
+
+
+
手动恢复个数
+
+
+
+ {mockData[0]?(
+
+ +
+
{mockData[0]?.name?.length>5?{mockData[0]?.name.substring(0,5)+'...'}:mockData[0]?.name}
+
+
+
+
+
+
+
+
+
):'' + } + {mockData[1]?(
+
+ +
+
{mockData[1]?.name?.length>5?{mockData[1]?.name.substring(0,5)+'...'}:mockData[0]?.name}
+
+
+
+
+
+
+
+
+
):'' + } + {mockData[2]?(
+
+ +
+
{mockData[2]?.name?.length>5?{mockData[2]?.name.substring(0,5)+'...'}:mockData[0]?.name}
+
+
+
+
+
+
+
+
+
):'' + } + {alarmData&&alarmData.length? + alarmData.map((item,index)=> + { + return (
+
+ {index+4} +
+
{item.name?.length>5?{item.name.substring(0,5)+'...'}:item.name}
+
+
+
+
+
+
+
+
+ +
) + } + ) + :'' + } +
+
- +
diff --git a/web/client/src/sections/projectGroup/style.less b/web/client/src/sections/projectGroup/style.less index 4e1cb69..522cf4b 100644 --- a/web/client/src/sections/projectGroup/style.less +++ b/web/client/src/sections/projectGroup/style.less @@ -1,3 +1,96 @@ .project-group { font-family: PangMenZhengDaoBiaoTiTi; -} \ No newline at end of file +} +.alarmDiv{ + width: 8px; + height: 8px; + background-image: linear-gradient(180deg, #fbac3200 1%, #FBAC32 100%); + box-shadow: inset 0 2px 0 0 #FBAC32; +} +.alarm{ + width: 73px; + height: 12px; + font-family: SourceHanSansCN-Regular; + font-weight: 400; + font-size: 12px; + color: #A0A0A0; + letter-spacing: 0; + line-height: 12px; + // margin-left: 2!important; +} +.dealAlarmCountDiv{ + width: 8px; + height: 8px; + background-image: linear-gradient(180deg, #c2d2ff00 1%, #2A62FC 100%); + box-shadow: inset 0 2px 0 0 #2C66F3; +} +.alarmCount{ + width: 73px; + height: 12px; + font-family: SourceHanSansCN-Regular; + font-weight: 400; + font-size: 12px; + color: #A0A0A0; + letter-spacing: 0; + text-align: right; + line-height: 12px; + // margin-left: 2 !important; + +} +//柱状图外层的div +.barChartDiv{ + width: 740px; + height: 12px; + background: #F0F5FF; + border-radius: 2px; + display: flex; +} +.structDiv{ + width: 100px; + height: 14px; + font-family: SourceHanSansCN-Regular; + font-weight: 400; + font-size: 14px; + color: #3E434E; + letter-spacing: 0; + line-height: 14px; + text-align: center; +} +.rankDiv{ + width: 34.48px; + height: 17.67px; + text-align: center; + span{ + + width: 13px; + height: 16px; + font-family: D-DIN-Italic; + font-weight: Italic; + font-size: 16px; + color: #7C8DB6; + letter-spacing: 0; + + } +} +.rankBackDiv{ + // width: 34.48px; + // height: 9px; + // background-image: linear-gradient(270deg, #f957571f 0%, #f32c2c57 93%); + // margin-bottom: 0; +} +.alarms{ + width: 282px; + height: 10px; + background-image: linear-gradient(116deg, #2c66f329 8%, #2C66F3 100%); + box-shadow: inset 2px 0 0 0 #2C66F3; +} +.dealAlarms{ + width: 108px; + height: 10px; + background-image: linear-gradient(270deg, #fbac3229 1%, #FBAC32 100%); + box-shadow: inset -2px 0 0 0 #FBAC32; +} + + + +