|
|
@ -18,7 +18,7 @@ let alarmScrollbar; |
|
|
|
|
|
|
|
|
|
|
|
const Control = (props) => { |
|
|
|
const { dispatch, actions, user, loading, socket } = props |
|
|
|
const { dispatch, actions, user, loading, socket ,pepProjectId} = props |
|
|
|
const { control } = actions |
|
|
|
const stationList = [ |
|
|
|
'url(/assets/images/console/lan_1.png)', |
|
|
@ -43,6 +43,7 @@ const Control = (props) => { |
|
|
|
const [toolShow, setToolShow] = useState([]); //工具展示 |
|
|
|
const [tableSetup, setTableSetup] = useState([]); //单一表格设置信息 |
|
|
|
const [exhibition, setExhibition] = useState({ workbench: [] }); //页面结构 |
|
|
|
const [workData, setWorkData] = useState({}); //我的工作台数据 |
|
|
|
|
|
|
|
|
|
|
|
const FormApi = useRef() |
|
|
@ -50,7 +51,6 @@ const Control = (props) => { |
|
|
|
useEffect(() => { |
|
|
|
consoleToollink() |
|
|
|
|
|
|
|
|
|
|
|
//初始化表格显示设置 |
|
|
|
let data = ['workbench'] |
|
|
|
data.map(v => { |
|
|
@ -63,55 +63,61 @@ const Control = (props) => { |
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
// newScrollbar = new PerfectScrollbar("#news", { |
|
|
|
// suppressScrollX: true, |
|
|
|
// }); |
|
|
|
// const domProject = document.getElementById("news"); |
|
|
|
// if (domProject && newScrollbar) { |
|
|
|
// newScrollbar.update(); |
|
|
|
// } |
|
|
|
// overviewScrollbar = new PerfectScrollbar("#overview", { |
|
|
|
// suppressScrollY: true, |
|
|
|
// }); |
|
|
|
// const domProject1 = document.getElementById("overview"); |
|
|
|
// if (domProject1 && overviewScrollbar) { |
|
|
|
// overviewScrollbar.update(); |
|
|
|
// } |
|
|
|
// memberScrollbar = new PerfectScrollbar("#member", { |
|
|
|
// suppressScrollX: true, |
|
|
|
// }); |
|
|
|
// const domProject2 = document.getElementById("member"); |
|
|
|
// if (domProject2 && memberScrollbar) { |
|
|
|
// memberScrollbar.update(); |
|
|
|
// } |
|
|
|
// equipmentScrollbar = new PerfectScrollbar("#equipment", { |
|
|
|
// suppressScrollX: true, |
|
|
|
// }); |
|
|
|
// const domProject3 = document.getElementById("equipment"); |
|
|
|
// if (domProject3 && equipmentScrollbar) { |
|
|
|
// equipmentScrollbar.update(); |
|
|
|
// } |
|
|
|
// webScrollbar = new PerfectScrollbar("#web", { |
|
|
|
// suppressScrollX: true, |
|
|
|
// }); |
|
|
|
// const domProject4 = document.getElementById("web"); |
|
|
|
// if (domProject4 && webScrollbar) { |
|
|
|
// webScrollbar.update(); |
|
|
|
// } |
|
|
|
// problemsScrollbar = new PerfectScrollbar("#problems", { |
|
|
|
// suppressScrollX: true, |
|
|
|
// }); |
|
|
|
// const domProject5 = document.getElementById("problems"); |
|
|
|
// if (domProject5 && problemsScrollbar) { |
|
|
|
// problemsScrollbar.update(); |
|
|
|
// } |
|
|
|
// alarmScrollbar = new PerfectScrollbar("#alarm", { |
|
|
|
// suppressScrollY: true, |
|
|
|
// }); |
|
|
|
// const domProject6 = document.getElementById("alarm"); |
|
|
|
// if (domProject6 && alarmScrollbar) { |
|
|
|
// alarmScrollbar.update(); |
|
|
|
// } |
|
|
|
dispatch(control.geteteConsoleCount({pepProjectId:pepProjectId})).then(res => { |
|
|
|
if (res.success) setWorkData(res.payload.data) |
|
|
|
}) |
|
|
|
}, [pepProjectId]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
newScrollbar = new PerfectScrollbar("#news", { |
|
|
|
suppressScrollX: true, |
|
|
|
}); |
|
|
|
const domProject = document.getElementById("news"); |
|
|
|
if (domProject && newScrollbar) { |
|
|
|
newScrollbar.update(); |
|
|
|
} |
|
|
|
overviewScrollbar = new PerfectScrollbar("#overview", { |
|
|
|
suppressScrollY: true, |
|
|
|
}); |
|
|
|
const domProject1 = document.getElementById("overview"); |
|
|
|
if (domProject1 && overviewScrollbar) { |
|
|
|
overviewScrollbar.update(); |
|
|
|
} |
|
|
|
memberScrollbar = new PerfectScrollbar("#member", { |
|
|
|
suppressScrollX: true, |
|
|
|
}); |
|
|
|
const domProject2 = document.getElementById("member"); |
|
|
|
if (domProject2 && memberScrollbar) { |
|
|
|
memberScrollbar.update(); |
|
|
|
} |
|
|
|
equipmentScrollbar = new PerfectScrollbar("#equipment", { |
|
|
|
suppressScrollX: true, |
|
|
|
}); |
|
|
|
const domProject3 = document.getElementById("equipment"); |
|
|
|
if (domProject3 && equipmentScrollbar) { |
|
|
|
equipmentScrollbar.update(); |
|
|
|
} |
|
|
|
webScrollbar = new PerfectScrollbar("#web", { |
|
|
|
suppressScrollX: true, |
|
|
|
}); |
|
|
|
const domProject4 = document.getElementById("web"); |
|
|
|
if (domProject4 && webScrollbar) { |
|
|
|
webScrollbar.update(); |
|
|
|
} |
|
|
|
problemsScrollbar = new PerfectScrollbar("#problems", { |
|
|
|
suppressScrollX: true, |
|
|
|
}); |
|
|
|
const domProject5 = document.getElementById("problems"); |
|
|
|
if (domProject5 && problemsScrollbar) { |
|
|
|
problemsScrollbar.update(); |
|
|
|
} |
|
|
|
alarmScrollbar = new PerfectScrollbar("#alarm", { |
|
|
|
suppressScrollY: true, |
|
|
|
}); |
|
|
|
const domProject6 = document.getElementById("alarm"); |
|
|
|
if (domProject6 && alarmScrollbar) { |
|
|
|
alarmScrollbar.update(); |
|
|
|
} |
|
|
|
|
|
|
|
// ACTION 示例 |
|
|
|
// dispatch(actions.example.getMembers(user.orgId)) |
|
|
@ -138,13 +144,17 @@ const Control = (props) => { |
|
|
|
} |
|
|
|
|
|
|
|
let listAll = [ |
|
|
|
{ name: '关注的项目', sort: 1, key: 'project', data: 1, img: 'url(/assets/images/console/lan_1.png)' }, |
|
|
|
{ name: '数据告警', sort: 2, key: 'data', data: 2, img: 'url(/assets/images/console/lv_1.png)' }, |
|
|
|
{ name: '应用告警', sort: 2, key: 'app', data: 3, img: 'url(/assets/images/console/hong_1.png)' }, |
|
|
|
{ name: '设备告警', sort: 2, key: 'device', data: 225, img: 'url(/assets/images/console/hong_1.png)' }, |
|
|
|
{ name: '关注的项目', sort: 1, key: 'project', data: workData?.projects, img: 'url(/assets/images/console/lan_1.png)' }, |
|
|
|
{ name: '数据告警', sort: 2, key: 'data', data: workData?.dataSurplus, img: 'url(/assets/images/console/lv_1.png)' }, |
|
|
|
{ name: '应用告警', sort: 2, key: 'app', data: workData?.appSurplus, img: 'url(/assets/images/console/hong_1.png)' }, |
|
|
|
{ name: '设备告警', sort: 2, key: 'device', data: workData?.toolSurplus, img: 'url(/assets/images/console/hong_1.png)' }, |
|
|
|
] |
|
|
|
console.log(workData); |
|
|
|
console.log(listAll); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
attribute('workbench') |
|
|
|
}, [workData]) |
|
|
|
|
|
|
|
const attribute = (title) => { |
|
|
|
let take = localStorage.getItem(title) |
|
|
@ -152,10 +162,8 @@ const Control = (props) => { |
|
|
|
: []; |
|
|
|
let data = Select[title].map(v => { |
|
|
|
let dataTitle = listAll.find(vv => v == vv.key) || {} |
|
|
|
console.log(dataTitle); |
|
|
|
return { name: dataTitle.name, value: dataTitle.key } |
|
|
|
}) |
|
|
|
console.log(data); |
|
|
|
let TableDisplay = take?.map(v => listAll?.find(vv => v == vv.key)) |
|
|
|
TableDisplay.sort((a, b) => a.sort - b.sort) |
|
|
|
setExhibition({ ...exhibition, [title]: TableDisplay }) |
|
|
@ -165,7 +173,7 @@ const Control = (props) => { |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
11 ? <img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> : |
|
|
|
// 11 ? <img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> : |
|
|
|
<> |
|
|
|
<div style={{ padding: '0px 40px', width: '100%' }} className='console'> |
|
|
|
{/* 头部 */} |
|
|
@ -209,7 +217,7 @@ const Control = (props) => { |
|
|
|
剩余问题: |
|
|
|
</div> |
|
|
|
<div style={{ fontSize: 16, color: '#4A4A4A', width: 91 }}> |
|
|
|
122 |
|
|
|
{(workData?.appSurplus + workData?.dataSurplus + workData?.toolSurplus) || 0} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', marginTop: 26 }}> |
|
|
@ -218,7 +226,7 @@ const Control = (props) => { |
|
|
|
</div> |
|
|
|
<div style={{ fontSize: 16, color: '#4A4A4A', width: 91, display: 'flex' }}> |
|
|
|
<div> |
|
|
|
12223 |
|
|
|
{(workData?.appNewAdd + workData?.dataNewAdd + workData?.toolNewAdd) || 0} |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 4 }}> |
|
|
|
<img title='设置' src="/assets/images/console/icon_up.png" style={{ width: 18, height: 18 }} /> |
|
|
@ -230,13 +238,13 @@ const Control = (props) => { |
|
|
|
今日处理: |
|
|
|
</div> |
|
|
|
<div style={{ fontSize: 16, color: '#4A4A4A', width: 91 }}> |
|
|
|
3 |
|
|
|
{(workData?.appConfirme + workData?.dataConfirme + workData?.toolConfirme) || 0} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/* 循环类型 */} |
|
|
|
<div id='alarm' style={{ width: 'calc(100% - 200px)', position: 'relative', whiteSpace: 'nowrap', }}> |
|
|
|
{exhibition['workbench'].map((item, index) => { |
|
|
|
{exhibition['workbench']?.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div key={item.name} style={{ background: item.img, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}> |
|
|
|
<div style={{ margin: '35px 0px 0px 134px' }}> |
|
|
@ -634,6 +642,7 @@ function mapStateToProps (state) { |
|
|
|
// loading: members.isRequesting, |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
pepProjectId: global.pepProjectId, |
|
|
|
// members: members.data, |
|
|
|
// socket: webSocket.socket |
|
|
|
}; |
|
|
|