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

Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/OperationalService into dev

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

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

@ -235,6 +235,7 @@ const Control = (props) => {
let webtop = 0
let webId = document.getElementById('web');
if (web) clearInterval(web)
let memberId = document.getElementById('member');
if (memberId) {
function webstart () {
member = setInterval(() => {
@ -701,236 +702,236 @@ const Control = (props) => {
{/* 统计概览 */}
{
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' }}>
<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={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>STATISTICAL OVERVIEW</div>
</div>
<div style={{ marginRight: 25 }}>
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => {
setSetup(true)
setTableType('statistical')
attribute('statistical')
setSetData(5)
}} />
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' }}>
<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={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>STATISTICAL OVERVIEW</div>
</div>
<div style={{ marginRight: 25 }}>
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => {
setSetup(true)
setTableType('statistical')
attribute('statistical')
setSetData(5)
}} />
</div>
</div>
</div>
{/* 统计概览 */}
<div id='overviewCalc' style={{ width: 'calc(100%)', position: 'relative' }}>
<div style={{ display: 'inline-flex', marginTop: 16 }}>
{/* 项目 */}
{
pepProjectId ?
'' :
<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
}}>
{pomsList?.map((v, index) => {
return <div key={'pomsList' + index} title={v.pepProjectName}
style={{
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%)' : "",
}}
onClick={() => setProjectId(v.pepProjectId)}>{v.pepProjectName}</div>
})}
</div>}
{/* 项目里程碑 */}
{
exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId &&
projectData?.find(u => u.id == projectId)?.pepProjectName ?
<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
}}>
<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 id='overviewCalc' style={{ width: 'calc(100%)', position: 'relative' }}>
<div style={{ display: 'inline-flex', marginTop: 16 }}>
{/* 项目 */}
{
pepProjectId ?
'' :
<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
}}>
{pomsList?.map((v, index) => {
return <div key={'pomsList' + index} title={v.pepProjectName}
style={{
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%)' : "",
}}
onClick={() => setProjectId(v.pepProjectId)}>{v.pepProjectName}</div>
})}
</div>}
{/* 项目里程碑 */}
{
exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId &&
projectData?.find(u => u.id == projectId)?.pepProjectName ?
<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
}}>
<div style={{ margin: '20px 0px 20px 24px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
项目里程碑
</div>
<div style={{ display: 'flex' }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
施工时间：
<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 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 style={{ display: 'flex', marginBottom: 24, marginLeft: 24 }}>
<div style={{ display: 'flex' }}>
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
内验时间：
<div style={{ display: 'flex', marginBottom: 24, 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 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 style={{ display: 'flex' }}>
<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>
<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 style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无
</div>
</div>
{/* <img src="/assets/images/console/onGoing.png" alt="进行中" /> */}
</div>
</div>
: ""}
{/* 相关成员 */}
{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 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 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 style={{ fontSize: 14, color: '#4A4A4A' }} title='项企项目数据为空或未开发'>
暂无
</div>
</div>
)
})}
</div>
</div>
: ""}
{/* 平台设备接入 */}
{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={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 16 }}>
平台设备接入
</div>
<div id='equipment' style={{ position: 'relative', height: 161 }}>
{
equipmentList.map((item, index) => {
{/* <img src="/assets/images/console/onGoing.png" alt="进行中" /> */}
</div>
</div>
: ""}
{/* 相关成员 */}
{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 + '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 }}>
<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 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 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 style={{color:'#969799',fontSize:14}}>
掉线
</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) => {
return (
<div key={index + 'webb'} style={{ marginBottom: 15, }}>
<div style={{ display: 'flex' }}>
: ""}
{/* 平台设备接入 */}
{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={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 16 }}>
平台设备接入
</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 }}>
<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 style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}>
<a href={item.url} target="_blank">
{item.url}
</a>
<div style={{ color: '#0F7EFB', fontSize: 14 }}>
在线
</div>
{/* <div style={{color:'#969799',fontSize:14}}>
掉线
</div> */}
</div>
<div style={{ color: '#4A4A4A', fontSize: 14, marginLeft: 26 }}>
{item.name}
</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 }}>
{
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>
: ""}
{/* 关联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 id='web' style={{ position: 'relative', height: 161 }}>
{
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 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>
{exhibition.current?.overall?.find(v => v.key == 'analyse') ?

Write Preview
Loading…
Cancel
Save