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

fix 控制台滚动

dev
巴林闲侠 2 years ago
parent
bd491cf9c3
commit
c1e9803961
2 changed files with 476 additions and 473 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. 550
      web/client/src/layout/containers/layout/index.jsx
  2. 399
      web/client/src/sections/control/containers/control.jsx

550
web/client/src/layout/containers/layout/index.jsx
View File

@ -12,7 +12,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
import { useLocation } from "react-router"; import { useLocation } from "react-router";
NProgress.configure({ NProgress.configure({
template: ` template: `
<div class="bar" style="height:2px" role="bar"> <div class="bar" style="height:2px" role="bar">
<div class="peg"></div> <div class="peg"></div>
</div> </div>
@ -25,302 +25,304 @@ NProgress.configure({
let scrollbar let scrollbar
// const location111 = useLocation(); // const location111 = useLocation();
const LayoutContainer = props => { const LayoutContainer = props => {
const { const {
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight, dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
location, match, routes, history, socket, location, match, routes, history, socket,
} = props } = props
const [collapsed, setCollapsed] = useState(false) const [collapsed, setCollapsed] = useState(false)
NProgress.start(); NProgress.start();
const resize_ = () => { const resize_ = () => {
dispatch(resize( dispatch(resize(
document.getElementById('PomsApp').clientHeight, document.getElementById('PomsApp').clientHeight,
document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240) document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240)
)); ));
} }
function deepCopy (data) {//深拷贝 function deepCopy (data) {//深拷贝
//string,number,bool,null,undefined,symbol //string,number,bool,null,undefined,symbol
//object,array,date //object,array,date
if (data && typeof data === "object") { if (data && typeof data === "object") {
//针对函数的拷贝 //针对函数的拷贝
if (typeof data === "function") { if (typeof data === "function") {
let tempFunc = data.bind(null); let tempFunc = data.bind(null);
tempFunc.prototype = deepCopy(data.prototype); tempFunc.prototype = deepCopy(data.prototype);
return tempFunc; return tempFunc;
} }
switch (Object.prototype.toString.call(data)) { switch (Object.prototype.toString.call(data)) {
case "[object String]": case "[object String]":
return data.toString(); return data.toString();
case "[object Number]": case "[object Number]":
return Number(data.toString()); return Number(data.toString());
case "[object Boolean]": case "[object Boolean]":
return new Boolean(data.toString()); return new Boolean(data.toString());
case "[object Date]": case "[object Date]":
return new Date(data.getTime()); return new Date(data.getTime());
case "[object Array]": case "[object Array]":
var arr = []; var arr = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
arr[i] = deepCopy(data[i]); arr[i] = deepCopy(data[i]);
} }
return arr; return arr;
//js自带对象或用户自定义类实例 //js自带对象或用户自定义类实例
case "[object Object]": case "[object Object]":
var obj = {}; var obj = {};
for (let key in data) { for (let key in data) {
//会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop) //会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
obj[key] = deepCopy(data[key]); obj[key] = deepCopy(data[key]);
} }
return obj; return obj;
} }
} else { } else {
//string,number,bool,null,undefined,symbol //string,number,bool,null,undefined,symbol
return data; return data;
} }
} }
const [allItems, setAllItems] = useState([]) const [allItems, setAllItems] = useState([])
const [headerItems, setHeaderItems] = useState([]) const [headerItems, setHeaderItems] = useState([])
const [leftItems, setLeftItems] = useState([]) const [leftItems, setLeftItems] = useState([])
const [leftChange, setLeftChange] = useState(true) const [leftChange, setLeftChange] = useState(true)
const [leftShow, setLeftShow] = useState(false) const [leftShow, setLeftShow] = useState(false)
useEffect(() => { useEffect(() => {
let topItems = []//头部导航 let topItems = []//头部导航
const lastSelectedKeys = localStorage.getItem('poms_selected_sider') const lastSelectedKeys = localStorage.getItem('poms_selected_sider')
let nextItems = []//所有导航 let nextItems = []//所有导航
for (let c of sections) { for (let c of sections) {
if (typeof c.getNavItem == 'function') { if (typeof c.getNavItem == 'function') {
let item = c.getNavItem(user, dispatch); let item = c.getNavItem(user, dispatch);
if (item) { if (item) {
nextItems.push.apply(nextItems, item) nextItems.push.apply(nextItems, item)
if (item.length > 0) { if (item.length > 0) {
for (let j = 0; j < item.length; j++) { for (let j = 0; j < item.length; j++) {
let itm = deepCopy(item[j]); let itm = deepCopy(item[j]);
if (itm.hasOwnProperty('items')) { if (itm.hasOwnProperty('items')) {
for (let i = 0; i < itm.items.length; i++) { for (let i = 0; i < itm.items.length; i++) {
itm.items[i].fatherKey = itm.itemKey itm.items[i].fatherKey = itm.itemKey
delete itm.items[i].items delete itm.items[i].items
}
topItems.push(itm)
}
else {
topItems.push.apply(topItems, item)
}
} }
} topItems.push(itm)
} }
else {
topItems.push.apply(topItems, item)
}
}
}
} }
} }
setAllItems(nextItems) }
setHeaderItems(topItems) setAllItems(nextItems)
if (lastSelectedKeys) {//如果有缓存 setHeaderItems(topItems)
for (let i = 0; i < nextItems.length; i++) { if (lastSelectedKeys) {//如果有缓存
if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) { for (let i = 0; i < nextItems.length; i++) {
if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) {
let openArr = [] let openArr = []
for (let j = 0; j < nextItems[i].items.length; j++) { for (let j = 0; j < nextItems[i].items.length; j++) {
openArr.push(nextItems[i].items[j].itemKey) openArr.push(nextItems[i].items[j].itemKey)
} }
localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(nextItems[i].items) setLeftItems(nextItems[i].items)
}
} }
setLeftShow(true) }
} setLeftShow(true)
else { }
setLeftShow(false) else {
} setLeftShow(false)
}
window.addEventListener('resize', resize_); window.addEventListener('resize', resize_);
return () => { return () => {
window.removeEventListener('resize', resize_); window.removeEventListener('resize', resize_);
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
let pathnameArr = location.pathname.split('/') let pathnameArr = location.pathname.split('/')
if (location.pathname == '/userCenter') { if (location.pathname == '/userCenter') {
localStorage.setItem('poms_open_sider', JSON.stringify([])) localStorage.setItem('poms_open_sider', JSON.stringify([]))
localStorage.removeItem('poms_selected_sider') localStorage.removeItem('poms_selected_sider')
setLeftShow(false) setLeftShow(false)
} }
let openArr = [] let openArr = []
for (let i = 0; i < allItems.length; i++) { for (let i = 0; i < allItems.length; i++) {
if (allItems[i].items) { if (allItems[i].items) {
for (let j = 0; j < allItems[i].items.length; j++) { for (let j = 0; j < allItems[i].items.length; j++) {
if (allItems[i].items[j].items) { if (allItems[i].items[j].items) {
for (let k = 0; k < allItems[i].items[j].items.length; k++) { for (let k = 0; k < allItems[i].items[j].items.length; k++) {
if (allItems[i].items[j].items[k].to == location.pathname) { if (allItems[i].items[j].items[k].to == location.pathname) {
for (let o = 0; o < allItems[i].items.length; o++) { for (let o = 0; o < allItems[i].items.length; o++) {
openArr.push(allItems[i].items[o].itemKey) openArr.push(allItems[i].items[o].itemKey)
}
localStorage.setItem('poms_selected_sider', JSON.stringify([pathnameArr[1]]))
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(allItems[i].items)
setLeftShow(true)
}
} }
} localStorage.setItem('poms_selected_sider', JSON.stringify([pathnameArr[1]]))
} localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(allItems[i].items)
setLeftShow(true)
}
}
}
} }
} }
}, [location]) }
}, [location])
useEffect(() => { useEffect(() => {
NProgress.done(); NProgress.done();
if ((!user || !user.authorized)) { if ((!user || !user.authorized)) {
history.push('/signin'); history.push('/signin');
} }
if (msg) { if (msg) {
if (msg.done) { if (msg.done) {
Notification.success({ Notification.success({
// title: msg.done, // title: msg.done,
content: msg.done, content: msg.done,
duration: 2, duration: 2,
}) })
} }
if (msg.error) { if (msg.error) {
Notification.error({ Notification.error({
// title: msg.error, // title: msg.error,
content: msg.error, content: msg.error,
duration: 2, duration: 2,
}) })
} }
} }
const dom = document.getElementById('page-content'); const dom = document.getElementById('page-content');
if (dom) { setTimeout(() => {
if (dom) {
if (!scrollbar) { if (!scrollbar) {
scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true }); scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
scrollbar.update(); // scrollbar.update();
} else { } else {
scrollbar.update(); scrollbar.update();
dom.scrollTop = 0; dom.scrollTop = 0;
} }
} }
}) }, 300)
})
// websocket 使用测试 // websocket 使用测试
useEffect(() => { useEffect(() => {
// console.log(socket) // console.log(socket)
if (socket) { if (socket) {
socket.on('CAMERA_ONLINE', function (msg) { socket.on('CAMERA_ONLINE', function (msg) {
console.info(msg); console.info(msg);
if (msg.online == 'ON') { if (msg.online == 'ON') {
Notification.success({ Notification.success({
title: 'Hi', title: 'Hi',
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>), content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>),
duration: 2, duration: 2,
}) })
}
if (msg.online == 'OFF') {
Notification.error({
title: 'Hi',
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>),
duration: 2,
})
}
});
return () => {
socket.off("CAMERA_ONLINE");
} }
} if (msg.online == 'OFF') {
}, [socket]) Notification.error({
title: 'Hi',
return ( content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>),
<Layout id="layout" style={{ height: '100%' }}> duration: 2,
{ })
<>
<Layout.Header>
<Header
headerItems={headerItems}
user={user}
pathname={location.pathname}
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
collapsed={collapsed}
history={history}
tochange={(val) => {
setLeftChange(!leftChange)
if (val.fatherKey) {
for (let i = 0; i < allItems.length; i++) {
if (val.fatherKey == allItems[i].itemKey) {
let openArr = []
for (let j = 0; j < allItems[i].items.length; j++) {
openArr.push(allItems[i].items[j].itemKey)
}
localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey]))
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(allItems[i].items)
}
}
setLeftShow(true)
}
else {
localStorage.setItem('poms_open_sider', JSON.stringify([]))
localStorage.removeItem('poms_selected_sider')
setLeftShow(false)
}
history.push(val.to);
}}
/>
</Layout.Header>
<Layout style={{ height: 'calc(100% - 50px)' }}>
{leftShow ? (<Layout.Sider>
<Sider
sections={sections}
leftItems={leftItems}
dispatch={dispatch}
user={user}
leftChange={leftChange}
pathname={location.pathname}
collapsed={collapsed}
/>
</Layout.Sider>) : ('')}
<Layout.Content>
<div style={{
background: "#F2F3F5",
}}>
<div id="page-content" style={{
height: clientHeight - 12,
minWidth: 520,
position: 'relative',
}}>
<div style={{
minHeight: clientHeight - 32 - 12,
position: 'relative',
padding: '12px 8px',
}}>
{children}
</div>
<Layout.Footer>
<Footer />
</Layout.Footer>
</div>
</div>
</Layout.Content>
</Layout>
</>
} }
</Layout > });
) return () => {
socket.off("CAMERA_ONLINE");
}
}
}, [socket])
return (
<Layout id="layout" style={{ height: '100%' }}>
{
<>
<Layout.Header>
<Header
headerItems={headerItems}
user={user}
pathname={location.pathname}
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}
collapsed={collapsed}
history={history}
tochange={(val) => {
setLeftChange(!leftChange)
if (val.fatherKey) {
for (let i = 0; i < allItems.length; i++) {
if (val.fatherKey == allItems[i].itemKey) {
let openArr = []
for (let j = 0; j < allItems[i].items.length; j++) {
openArr.push(allItems[i].items[j].itemKey)
}
localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey]))
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(allItems[i].items)
}
}
setLeftShow(true)
}
else {
localStorage.setItem('poms_open_sider', JSON.stringify([]))
localStorage.removeItem('poms_selected_sider')
setLeftShow(false)
}
history.push(val.to);
}}
/>
</Layout.Header>
<Layout style={{ height: 'calc(100% - 50px)' }}>
{leftShow ? (<Layout.Sider>
<Sider
sections={sections}
leftItems={leftItems}
dispatch={dispatch}
user={user}
leftChange={leftChange}
pathname={location.pathname}
collapsed={collapsed}
/>
</Layout.Sider>) : ('')}
<Layout.Content>
<div style={{
background: "#F2F3F5",
}}>
<div id="page-content" style={{
height: clientHeight - 12,
minWidth: 520,
position: 'relative',
}}>
<div style={{
minHeight: clientHeight - 32 - 12,
position: 'relative',
padding: '12px 8px',
}}>
{children}
</div>
<Layout.Footer>
<Footer />
</Layout.Footer>
</div>
</div>
</Layout.Content>
</Layout>
</>
}
</Layout >
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { global, auth, ajaxResponse, webSocket } = state; const { global, auth, ajaxResponse, webSocket } = state;
return { return {
title: global.title, title: global.title,
copyright: global.copyright, copyright: global.copyright,
sections: global.sections, sections: global.sections,
actions: global.actions, actions: global.actions,
clientWidth: global.clientWidth, clientWidth: global.clientWidth,
clientHeight: global.clientHeight, clientHeight: global.clientHeight,
msg: ajaxResponse.msg, msg: ajaxResponse.msg,
user: auth.user, user: auth.user,
socket: webSocket.socket socket: webSocket.socket
}; };
} }
export default connect(mapStateToProps)(LayoutContainer); export default connect(mapStateToProps)(LayoutContainer);

399
web/client/src/sections/control/containers/control.jsx
View File

@ -232,6 +232,7 @@ const Control = (props) => {
let webtop = 0 let webtop = 0
let webId = document.getElementById('web'); let webId = document.getElementById('web');
if (web) clearInterval(web) if (web) clearInterval(web)
let memberId = document.getElementById('member');
if (memberId) { if (memberId) {
function webstart () { function webstart () {
member = setInterval(() => { member = setInterval(() => {
@ -698,236 +699,236 @@ const Control = (props) => {
{/* 统计概览 */} {/* 统计概览 */}
{ {
exhibition.current?.overall?.find(v => v.key == 'statistical') ? <> exhibition.current?.overall?.find(v => v.key == 'statistical') ? <>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 25 }}> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 25 }}>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>统计概览</div> <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>统计概览</div>
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>STATISTICAL OVERVIEW</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>STATISTICAL OVERVIEW</div>
</div> </div>
<div style={{ marginRight: 25 }}> <div style={{ marginRight: 25 }}>
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => { <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => {
setSetup(true) setSetup(true)
setTableType('statistical') setTableType('statistical')
attribute('statistical') attribute('statistical')
setSetData(5) setSetData(5)
}} /> }} />
</div>
</div> </div>
</div> {/* 统计概览 */}
{/* 统计概览 */} <div id='overviewCalc' style={{ width: 'calc(100%)', position: 'relative' }}>
<div id='overviewCalc' style={{ width: 'calc(100%)', position: 'relative' }}> <div style={{ display: 'inline-flex', marginTop: 16 }}>
<div style={{ display: 'inline-flex', marginTop: 16 }}> {/* 项目 */}
{/* 项目 */} {
{ pepProjectId ?
pepProjectId ? '' :
'' : <div id='pomsList' style={{
<div id='pomsList' style={{ marginRight: 20, paddingRight: 24, position: 'relative', marginBottom: 30, width: 410, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2
marginRight: 20, paddingRight: 24, position: 'relative', marginBottom: 30, width: 410, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
}}> {pomsList?.map((v, index) => {
{pomsList?.map((v, index) => { return <div key={'pomsList' + index} title={v.pepProjectName}
return <div key={'pomsList' + index} title={v.pepProjectName} style={{
style={{ width: 400, cursor: 'pointer', lineHeight: '30px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 14, color: '#969799',
width: 400, cursor: 'pointer', lineHeight: '30px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 14, color: '#969799', background: projectId == v.pepProjectId ? 'linear-gradient(252deg, #F9FBFF 0%, rgb(185 202 236) 100%)' : "",
background: projectId == v.pepProjectId ? 'linear-gradient(252deg, #F9FBFF 0%, rgb(185 202 236) 100%)' : "", }}
}} onClick={() => setProjectId(v.pepProjectId)}>{v.pepProjectName}</div>
onClick={() => setProjectId(v.pepProjectId)}>{v.pepProjectName}</div> })}
})} </div>}
</div>}
{/* 项目里程碑 */}
{/* 项目里程碑 */} {
{ exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId &&
exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId && projectData?.find(u => u.id == projectId)?.pepProjectName ?
projectData?.find(u => u.id == projectId)?.pepProjectName ? <div style={{
<div style={{ marginBottom: 30, width: 466, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2
marginBottom: 30, width: 466, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
}}> <div style={{ margin: '20px 0px 20px 24px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
<div style={{ margin: '20px 0px 20px 24px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}> 项目里程碑
项目里程碑
</div>
<div style={{ display: 'flex', marginBottom: 20, marginLeft: 24 }}>
<div style={{ display: 'flex' }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
立项时间：
</div>
<div style={{ fontSize: 14, color: '#4A4A4A', width: 104 }} title='项企项目数据为空或未开发'>
暂无
</div>
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex', marginBottom: 20, marginLeft: 24 }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}> <div style={{ display: 'flex' }}>
施工时间： <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
立项时间：
</div>
<div style={{ fontSize: 14, color: '#4A4A4A', width: 104 }} title='项企项目数据为空或未开发'>
暂无
</div>
</div> </div>
<div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'> <div style={{ display: 'flex' }}>
暂无 <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
施工时间：
</div>
<div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无
</div>
</div> </div>
</div> </div>
</div> <div style={{ display: 'flex', marginBottom: 24, marginLeft: 24 }}>
<div style={{ display: 'flex', marginBottom: 24, marginLeft: 24 }}> <div style={{ display: 'flex' }}>
<div style={{ display: 'flex' }}> <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}> 内验时间：
内验时间： </div>
<div style={{ fontSize: 14, color: '#4A4A4A', width: 104 }} title='项企项目数据为空或未开发'>
暂无
</div>
</div> </div>
<div style={{ fontSize: 14, color: '#4A4A4A', width: 104 }} title='项企项目数据为空或未开发'> <div style={{ display: 'flex' }}>
暂无 <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
外验时间：
</div>
<div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无
</div>
</div> </div>
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex', marginBottom: 17, marginLeft: 24 }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}> <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
外验时间： 工程维保时间：
</div>
<div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无
</div>
</div>
</div>
<div style={{ display: 'flex', marginBottom: 17, marginLeft: 24 }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
工程维保时间：
</div>
<div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无
</div>
</div>
<div style={{ display: 'flex', background: 'linear-gradient(252deg, #F9FBFF 0%, #DBE7FF 100%)', height: 38, justifyContent: 'space-between' }}>
<div style={{ display: 'flex', marginLeft: 24, alignItems: 'center' }}>
<div style={{ fontSize: 14, color: '#646566', marginRight: 4 }}>
售后维修时间：
</div> </div>
<div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'> <div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无 暂无
</div> </div>
</div> </div>
{/* <img src="/assets/images/console/onGoing.png" alt="进行中" /> */} <div style={{ display: 'flex', background: 'linear-gradient(252deg, #F9FBFF 0%, #DBE7FF 100%)', height: 38, justifyContent: 'space-between' }}>
</div> <div style={{ display: 'flex', marginLeft: 24, alignItems: 'center' }}>
</div> <div style={{ fontSize: 14, color: '#646566', marginRight: 4 }}>
: ""} 售后维修时间：
{/* 相关成员 */}
{exhibition.current?.statistical?.find(v => v.key == 'personnel') ?
<div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
相关成员
</div>
<div id='member' style={{ position: 'relative', height: 161 }}>
{memberList?.map((item, index) => {
return (
<div key={index + 'member'} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 15 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: 18, height: 18 }}>
<img src="/assets/images/console/member.png" alt="成员" style={{ width: '100%', height: '100%' }} />
</div>
<div style={{ marginLeft: 8, fontSize: 14, color: '#4A4A4A' }}>
{item.name}
</div>
<div style={{ fontSize: 12, color: '#969799' }}>
（负责人）
</div>
</div> </div>
<div style={{ color: '#969799', fontSize: 14, marginRight: 22 }}> <div style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
<Tooltip content={item.department?.map((v, index) => index > 0 ? '，' + v : v)}> 暂无
<div className='Tooltip' style={{}}>
{item.department[0]}
</div>
</Tooltip>
</div> </div>
</div> </div>
) {/* <img src="/assets/images/console/onGoing.png" alt="进行中" /> */}
})} </div>
</div> </div>
</div> : ""}
: ""} {/* 相关成员 */}
{/* 平台设备接入 */} {exhibition.current?.statistical?.find(v => v.key == 'personnel') ?
{exhibition.current?.statistical?.find(v => v.key == 'DeviceAccess') ? <div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}> <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 16 }}> 相关成员
平台设备接入 </div>
</div> <div id='member' style={{ position: 'relative', height: 161 }}>
<div id='equipment' style={{ position: 'relative', height: 161 }}> {memberList?.map((item, index) => {
{
equipmentList.map((item, index) => {
return ( return (
<div key={index + 'equipment'} style={{ marginBottom: 15, display: 'flex' }}> <div key={index + 'member'} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 15 }}>
<div style={{ color: '#969799', fontSize: 14, width: 167 }}> <div style={{ display: 'flex', alignItems: 'center' }}>
5阶ZK1高清摄球机 <div style={{ width: 18, height: 18 }}>
</div> <img src="/assets/images/console/member.png" alt="成员" style={{ width: '100%', height: '100%' }} />
<div style={{ color: '#4A4A4A', fontSize: 14, width: 81 }}> </div>
视频 <div style={{ marginLeft: 8, fontSize: 14, color: '#4A4A4A' }}>
</div> {item.name}
<div style={{ width: 18, height: 18, marginRight: 8 }}> </div>
<img src="/assets/images/console/icon_online.png" alt="网络" style={{ width: '100%', height: '100%' }} /> <div style={{ fontSize: 12, color: '#969799' }}>
{/* <img src="/assets/images/console/icon_offline.png" alt="网络" style={{ width: '100%', height: '100%' }} /> */} （负责人）
</div>
</div> </div>
<div style={{ color: '#0F7EFB', fontSize: 14 }}> <div style={{ color: '#969799', fontSize: 14, marginRight: 22 }}>
在线 <Tooltip content={item.department?.map((v, index) => index > 0 ? '，' + v : v)}>
<div className='Tooltip' style={{}}>
{item.department[0]}
</div>
</Tooltip>
</div> </div>
{/* <div style={{color:'#969799',fontSize:14}}>
掉线
</div> */}
</div> </div>
) )
}) })}
} </div>
</div>
</div>
: ""}
{/* 关联web应用 */}
{exhibition.current?.statistical?.find(v => v.key == 'web') ?
<div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 15 }}>
关联web应用
</div> </div>
<div id='web' style={{ position: 'relative', height: 161 }}> : ""}
{ {/* 平台设备接入 */}
webList.map((item, index) => { {exhibition.current?.statistical?.find(v => v.key == 'DeviceAccess') ?
return ( <div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div key={index + 'webb'} style={{ marginBottom: 15, }}> <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 16 }}>
<div style={{ display: 'flex' }}> 平台设备接入
</div>
<div id='equipment' style={{ position: 'relative', height: 161 }}>
{
equipmentList.map((item, index) => {
return (
<div key={index + 'equipment'} style={{ marginBottom: 15, display: 'flex' }}>
<div style={{ color: '#969799', fontSize: 14, width: 167 }}>
5阶ZK1高清摄球机
</div>
<div style={{ color: '#4A4A4A', fontSize: 14, width: 81 }}>
视频
</div>
<div style={{ width: 18, height: 18, marginRight: 8 }}> <div style={{ width: 18, height: 18, marginRight: 8 }}>
<img src="/assets/images/console/icon_webpage.png" alt="web应用" style={{ width: '100%', height: '100%' }} /> <img src="/assets/images/console/icon_online.png" alt="网络" style={{ width: '100%', height: '100%' }} />
{/* <img src="/assets/images/console/icon_offline.png" alt="网络" style={{ width: '100%', height: '100%' }} /> */}
</div> </div>
<div style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}> <div style={{ color: '#0F7EFB', fontSize: 14 }}>
<a href={item.url} target="_blank"> 在线
{item.url}
</a>
</div> </div>
{/* <div style={{color:'#969799',fontSize:14}}>
掉线
</div> */}
</div> </div>
<div style={{ color: '#4A4A4A', fontSize: 14, marginLeft: 26 }}> )
{item.name} })
</div> }
</div> </div>
)
})
}
</div>
</div>
: ""}
{/* 异常&问题 */}
{exhibition.current?.statistical?.find(v => v.key == 'problem') ?
<div style={{ width: 399, height: 221, marginLeft: 20, marginRight: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
异常&问题
</div> </div>
<div id='problems' style={{ position: 'relative', height: 161 }}> : ""}
{ {/* 关联web应用 */}
problemsList?.map((v, index) => { {exhibition.current?.statistical?.find(v => v.key == 'web') ?
return ( <div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div style={{ marginBottom: 15, paddingRight: 30, }} key={'problems' + index} onClick={() => { <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 15 }}>
dispatch(push(v.url)) 关联web应用
}}> </div>
<div style={{ fontSize: 14, color: '#646566' }} > <div id='web' style={{ position: 'relative', height: 161 }}>
【{v.SourceName}】{v.groupName}{v.groupName == '视频异常' ? "" : '，诊断为 '} <span style={{ color: '#0F7EFB', borderBottom: '1px dotted #0F7EFB', cursor: "pointer" }} >{v.typeName}，请前往确认</span> {
webList.map((item, index) => {
return (
<div key={index + 'webb'} style={{ marginBottom: 15, }}>
<div style={{ display: 'flex' }}>
<div style={{ width: 18, height: 18, marginRight: 8 }}>
<img src="/assets/images/console/icon_webpage.png" alt="web应用" style={{ width: '100%', height: '100%' }} />
</div>
<div style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}>
<a href={item.url} target="_blank">
{item.url}
</a>
</div>
</div>
<div style={{ color: '#4A4A4A', fontSize: 14, marginLeft: 26 }}>
{item.name}
</div>
</div> </div>
<div style={{ color: '#969799', fontSize: 12, marginRight: 40, marginTop: 4 }}> )
{moment(v.StartTime).format("YYYY-MM-DD HH:mm:ss")} })
}
</div>
</div>
: ""}
{/* 异常&问题 */}
{exhibition.current?.statistical?.find(v => v.key == 'problem') ?
<div style={{ width: 399, height: 221, marginLeft: 20, marginRight: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
异常&问题
</div>
<div id='problems' style={{ position: 'relative', height: 161 }}>
{
problemsList?.map((v, index) => {
return (
<div style={{ marginBottom: 15, paddingRight: 30, }} key={'problems' + index} onClick={() => {
dispatch(push(v.url))
}}>
<div style={{ fontSize: 14, color: '#646566' }} >
【{v.SourceName}】{v.groupName}{v.groupName == '视频异常' ? "" : '，诊断为 '} <span style={{ color: '#0F7EFB', borderBottom: '1px dotted #0F7EFB', cursor: "pointer" }} >{v.typeName}，请前往确认</span>
</div>
<div style={{ color: '#969799', fontSize: 12, marginRight: 40, marginTop: 4 }}>
{moment(v.StartTime).format("YYYY-MM-DD HH:mm:ss")}
</div>
</div> </div>
</div> )
) })
}) }
} </div>
</div> </div>
</div> : ""}
: ""} </div>
</div> </div></> : ""}
</div></> : ""}
</div> </div>
{exhibition.current?.overall?.find(v => v.key == 'analyse') ? {exhibition.current?.overall?.find(v => v.key == 'analyse') ?

Write Preview
Loading…
Cancel
Save