You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
647 lines
36 KiB
647 lines
36 KiB
import React, { useEffect, useState, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Timeline, Card, Button, Modal, Form } from '@douyinfe/semi-ui';
|
|
import { push } from 'react-router-redux';
|
|
import '../style.less'
|
|
import PerfectScrollbar from "perfect-scrollbar";
|
|
import repairFQA from '../../means/containers/repairFQA';
|
|
import { Setup, OutHidden } from "$components";
|
|
const { Meta } = Card;
|
|
|
|
let newScrollbar;
|
|
let overviewScrollbar;
|
|
let memberScrollbar;
|
|
let equipmentScrollbar;
|
|
let webScrollbar;
|
|
let problemsScrollbar;
|
|
let alarmScrollbar;
|
|
|
|
|
|
const Control = (props) => {
|
|
const { dispatch, actions, user, loading, socket } = props
|
|
const { control } = actions
|
|
const stationList = [
|
|
'url(/assets/images/console/lan_1.png)',
|
|
'url(/assets/images/console/lv_1.png)',
|
|
'url(/assets/images/console/huang_1.png)',
|
|
'url(/assets/images/console/hong_1.png)',
|
|
]
|
|
const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//最新动态列表
|
|
|
|
const [memberList, setMemberList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//相关成员列表
|
|
|
|
const [equipmentList, setEquipmentList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//平台设备接入列表
|
|
|
|
const [webList, setWebList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//关联web应用列表
|
|
|
|
const [problemsList, setProblemsList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//异常&问题列表
|
|
const [setup, setSetup] = useState(false); //设置是否显现
|
|
const [tableType, setTableType] = useState(''); //localStorage存储名
|
|
const [tool, setTool] = useState(false); //工具添加修改弹窗
|
|
const [alter, setAlter] = useState(false); //工具添加或编辑
|
|
const [compile, setCompile] = useState({}); //工具编辑的内容
|
|
const [toolShow, setToolShow] = useState([]); //工具展示
|
|
const [tableSetup, setTableSetup] = useState([]); //单一表格设置信息
|
|
const [exhibition, setExhibition] = useState({ workbench: [] }); //页面结构
|
|
const [workData, setWorkData] = useState({}); //我的工作台数据
|
|
|
|
|
|
const FormApi = useRef()
|
|
|
|
useEffect(() => {
|
|
consoleToollink()
|
|
|
|
//初始化表格显示设置
|
|
let data = ['workbench']
|
|
data.map(v => {
|
|
localStorage.getItem(v) == null
|
|
? localStorage.setItem(v, JSON.stringify(show[v]))
|
|
: "";
|
|
attribute(v)
|
|
})
|
|
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
dispatch(control.geteteConsoleCount({})).then(res => {
|
|
console.log(res);
|
|
if (res.success) setWorkData(res.payload.data)
|
|
})
|
|
}, [])
|
|
|
|
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))
|
|
})
|
|
|
|
|
|
const consoleToollink = () => {
|
|
dispatch(control.getConsoleToollink()).then(res => {
|
|
if (res.success) setToolShow(res.payload.data)
|
|
})
|
|
}
|
|
|
|
let Select = {
|
|
workbench: ['project', 'data', 'app', 'device'],
|
|
statistical: [],
|
|
analyse: [],
|
|
dynamic: [],
|
|
}
|
|
let show = {
|
|
workbench: ['project', 'data', 'app', 'device'],
|
|
statistical: [],
|
|
analyse: [],
|
|
dynamic: [],
|
|
}
|
|
|
|
let listAll = [
|
|
{ name: '关注的项目', sort: 1, key: 'project', data: 1, img: 'url(/assets/images/console/lan_1.png)' },
|
|
{ name: '数据告警', sort: 2, key: 'data', data: workData?.dataAlarm?.alarm || 0, img: 'url(/assets/images/console/lv_1.png)' },
|
|
{ name: '应用告警', sort: 2, key: 'app', data: workData?.appAlarm?.alarm || 0, img: 'url(/assets/images/console/hong_1.png)' },
|
|
{ name: '设备告警', sort: 2, key: 'device', data: workData?.dataAlarm?.alarm || 0, img: 'url(/assets/images/console/hong_1.png)' },
|
|
]
|
|
|
|
|
|
|
|
const attribute = (title) => {
|
|
let take = localStorage.getItem(title)
|
|
? JSON.parse(localStorage.getItem(title))
|
|
: [];
|
|
let data = Select[title].map(v => {
|
|
let dataTitle = listAll.find(vv => v == vv.key) || {}
|
|
return { name: dataTitle.name, value: dataTitle.key }
|
|
})
|
|
let TableDisplay = take?.map(v => listAll?.find(vv => v == vv.key))
|
|
TableDisplay.sort((a, b) => a.sort - b.sort)
|
|
setExhibition({ ...exhibition, [title]: TableDisplay })
|
|
setTableSetup([{ list: data }])
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
// 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'>
|
|
{/* 头部 */}
|
|
<div style={{ margin: '4px 0px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14 }}>
|
|
HI，欢迎回来，
|
|
</div>
|
|
<div style={{ fontFamily: 'YouSheBiaoTiHei', fontSize: 20, color: '#005ABD', marginLeft: 4 }}>
|
|
{user?.name}
|
|
</div>
|
|
</div>
|
|
<div style={{ width: 25, height: 25, cursor: "pointer" }}>
|
|
<img src="/assets/images/console/icon_all.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
</div>
|
|
{/* 主体 */}
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
{/* 左边 */}
|
|
<div style={{ width: 'calc(100% - 434px)' }}>
|
|
{/* 工作台和统计概览 */}
|
|
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 24px' }}>
|
|
{/* 我的工作台 */}
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<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", }}>MY WORK STATION</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('workbench')
|
|
}} />
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 30, display: 'flex' }}>
|
|
<div style={{ marginTop: 20, marginLeft: 36 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', }}>
|
|
<div style={{ width: 120, fontSize: 14, color: '#969799' }}>
|
|
剩余问题:
|
|
</div>
|
|
<div style={{ fontSize: 16, color: '#4A4A4A', width: 91 }}>
|
|
{(workData?.appAlarm?.appSurplus + workData?.dataAlarm?.alarmSurplus + workData?.videoAlarm?.videoSurplus) || 0}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginTop: 26 }}>
|
|
<div style={{ width: 120, fontSize: 14, color: '#969799' }}>
|
|
今日新增问题:
|
|
</div>
|
|
<div style={{ fontSize: 16, color: '#4A4A4A', width: 91, display: 'flex' }}>
|
|
<div>
|
|
{(workData?.appAlarm?.appNewAdd + workData?.dataAlarm?.alarmNewAdd + workData?.videoAlarm?.videoNewAdd) || 0}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 4 }}>
|
|
<img title='设置' src="/assets/images/console/icon_up.png" style={{ width: 18, height: 18 }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginTop: 26 }}>
|
|
<div style={{ width: 120, fontSize: 14, color: '#969799' }}>
|
|
今日处理:
|
|
</div>
|
|
<div style={{ fontSize: 16, color: '#4A4A4A', width: 91 }}>
|
|
{(workData?.appAlarm?.appConfirme + workData?.dataAlarm?.alarmConfirme + workData?.videoAlarm?.videoConfirme) || 0}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 循环类型 */}
|
|
<div id='alarm' style={{ width: 'calc(100% - 200px)', position: 'relative', whiteSpace: 'nowrap', }}>
|
|
{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' }}>
|
|
<div>
|
|
<span style={{ fontSize: 14, color: '#4A4A4A', fontWeight: 500, fontFamily: 'PingFangSC-Medium, PingFang SC' }}>{item.name}</span>
|
|
<span style={{ fontSize: 12, color: '#4A4A4A' }}>{item.name == '关注的项目' ? ' ( 个 )' : ' ( 条 )'}</span>
|
|
</div>
|
|
<div style={{ marginTop: 15, display: 'flex', alignItems: 'center' }}>
|
|
<div style={{ fontSize: 32, color: index == 0 ? '#0F7EFB' : index == 1 ? '#0091A1' : index == 2 ? '#FE9812' : '#FF7575', fontFamily: 'YouSheBiaoTiHei' }}>{item.data}</div>
|
|
{item.name == '关注的项目' ? '' : <div style={{ fontSize: 12, color: '#969799', marginLeft: 4 }}>待处理</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
{/* 统计概览 */}
|
|
<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)} />
|
|
</div>
|
|
</div>
|
|
<div id='overview' style={{ position: 'relative' }}>
|
|
<div style={{ display: 'inline-flex', marginTop: 16 }}>
|
|
{/* 项目里程碑 */}
|
|
<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 }}>
|
|
2022-5-12
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
|
|
施工时间：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#4A4A4A' }}>
|
|
2022-5-12至2022-12-12
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 }}>
|
|
2023-1-18
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
|
|
外验时间：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#4A4A4A' }}>
|
|
2023-3-18
|
|
</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' }}>
|
|
2022-11-11
|
|
</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' }}>
|
|
2022-11-11至2023-12-14
|
|
</div>
|
|
</div>
|
|
<img src="/assets/images/console/onGoing.png" alt="进行中" />
|
|
</div>
|
|
</div>
|
|
{/* 相关成员 */}
|
|
<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' }}>
|
|
刘昊然
|
|
</div>
|
|
<div style={{ fontSize: 12, color: '#969799' }}>
|
|
（负责人）
|
|
</div>
|
|
</div>
|
|
<div style={{ color: '#969799', fontSize: 14, marginRight: 22 }}>
|
|
行业服务部
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
{/* 平台设备接入 */}
|
|
<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_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: '#0F7EFB', fontSize: 14 }}>
|
|
在线
|
|
</div>
|
|
{/* <div style={{color:'#969799',fontSize:14}}>
|
|
掉线
|
|
</div> */}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
{/* 关联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 + 'web'} style={{ marginBottom: 15, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<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' }}>
|
|
superchangnan.anxiny
|
|
</div>
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, marginRight: 40 }}>
|
|
第三方
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
{/* 异常&问题 */}
|
|
<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((item, index) => {
|
|
return (
|
|
<div style={{ marginBottom: 15, paddingRight: 30, }}>
|
|
<div style={{ fontSize: 14, color: '#646566' }}>
|
|
【告警源A】数据信息中断，诊断为 <span style={{ color: '#0F7EFB', borderBottom: '1px dotted #0F7EFB', cursor: "pointer" }}>服务异常，请前往确认</span>
|
|
</div>
|
|
<div style={{ color: '#969799', fontSize: 12, marginRight: 40, marginTop: 4 }}>
|
|
2022-05-21 15:23:41
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 24, marginTop: 22 }}>
|
|
{/* BI分析模块 */}
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<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 }}>BI分析模块</div>
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>BI ANAL YSIS MODEL</div>
|
|
</div>
|
|
<div style={{ marginRight: 25 }}>
|
|
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => setSetup(true)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 右边 */}
|
|
<div style={{ width: 415, marginLeft: 20 }}>
|
|
{/* 最新动态 */}
|
|
<div style={{ width: 415, background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 21, height: 639, }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<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", }}>RECENT NEWS</div>
|
|
</div>
|
|
<div style={{ marginRight: 25 }}>
|
|
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => setSetup(true)} />
|
|
</div>
|
|
</div>
|
|
<div id='news' style={{ height: 578, position: 'relative', marginTop: 10, }}>
|
|
<Timeline mode="center" style={{ marginLeft: '-56px', width: 400 }}>
|
|
{timelineList.map((item, index) => {
|
|
return (
|
|
<Timeline.Item key={index + 'time'} position='left' time="2019-07-14 10:35" className={index % 2 == 0 ? 'even' : 'odd'} >
|
|
A项目DTU设备状态异常，诊断为离线
|
|
</Timeline.Item>
|
|
)
|
|
})}
|
|
</Timeline>
|
|
</div>
|
|
</div>
|
|
{/* 我常用的工具 */}
|
|
<div style={{ marginTop: 20, background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: 20 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<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", }}>MY USUAL TOOLS</div>
|
|
</div>
|
|
</div>
|
|
{toolShow.length > 0 ?
|
|
toolShow?.map(v =>
|
|
<div
|
|
onMouseLeave={() => {
|
|
document.getElementById(v.id + 'name').style.display = 'none'
|
|
}}
|
|
id={v.id + v.name}
|
|
style={{ marginTop: 24, position: 'relative', display: "inline-block", cursor: 'pointer' }}>
|
|
<a href={v.link} target="_blank">
|
|
<Button
|
|
theme="solid"
|
|
type="primary"
|
|
style={{
|
|
height: 29, borderRadius: 2, marginRight: 10, marginBottom: 15,
|
|
background: '#0F7EFB', color: '#FFFFFF', border: '1px solid #0F7EFB',
|
|
}}
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
document.getElementById(v.id + 'name').style.display = 'block'
|
|
}}
|
|
>
|
|
{v.name}
|
|
</Button>
|
|
</a>
|
|
<div id={v.id + 'name'}
|
|
style={{
|
|
position: 'absolute', top: 12, right: -10, background: 'rgb(208 208 223 / 100%)', fontSize: 13,
|
|
width: 50, textAlign: "center", borderRadius: 4, padding: '0 10px', display: "none"
|
|
}}>
|
|
<div style={{ lineHeight: '30px' }}
|
|
onClick={() => {
|
|
setTool(true)
|
|
setAlter(true)
|
|
setCompile({ id: v.id, name: v.name, link: v.link, })
|
|
}}
|
|
>编辑</div>
|
|
<div style={{ lineHeight: '30px' }}
|
|
onClick={() => {
|
|
dispatch(control.deleteConsoleToollink(v.id)).then(res => {
|
|
if (res.success) consoleToollink()
|
|
})
|
|
}}
|
|
>删除</div>
|
|
</div>
|
|
</div>) : ""}
|
|
|
|
<Button
|
|
theme="solid"
|
|
type="primary"
|
|
style={{
|
|
width: '100%',
|
|
height: 40,
|
|
borderRadius: 2,
|
|
marginTop: 20,
|
|
background: '#F2F3F5',
|
|
color: '#0F7EFB',
|
|
border: '1px solid #F2F3F5'
|
|
}}
|
|
onClick={() => {
|
|
setTool(true)
|
|
}}
|
|
>
|
|
添加
|
|
</Button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 页面各个设置弹窗 */}
|
|
{
|
|
setup ? (
|
|
<Setup
|
|
tableType={tableType}
|
|
tableList={tableSetup}
|
|
close={() => {
|
|
setSetup(false);
|
|
attribute(tableType);
|
|
setTableType('')
|
|
}}
|
|
/>
|
|
) : (
|
|
""
|
|
)
|
|
}
|
|
{/* 工具添加修改弹窗 */}
|
|
{tool ? <Modal
|
|
title={alter ? '编辑' : "添加"}
|
|
visible={true}
|
|
width={600}
|
|
onCancel={() => {
|
|
setTool(false)
|
|
setAlter(false)
|
|
setCompile({})
|
|
}}
|
|
onOk={() => {
|
|
FormApi.current.validate().then((v) => {
|
|
console.log(v);
|
|
dispatch(control.putConsoleToollink({ id: compile?.id, name: v.name, link: v.link })).then(res => {
|
|
if (res.success) {
|
|
setTool(false)
|
|
setAlter(false)
|
|
setCompile({})
|
|
consoleToollink()
|
|
}
|
|
})
|
|
})
|
|
}}
|
|
>
|
|
<div style={{ paddingLeft: 20 }}>
|
|
<Form
|
|
onSubmit={(values) => console.log(values)}
|
|
getFormApi={(formApi) => (FormApi.current = formApi)}
|
|
>
|
|
<Form.Input
|
|
label='工具名称'
|
|
labelPosition="left"
|
|
rules={[{ required: true, message: "请输入工具名称，1～10个字符，支持中英文，数字及常见符号-_ /." }]}
|
|
field='name'
|
|
initValue={compile?.name || ''}
|
|
placeholder='请输入工具名称'
|
|
/>
|
|
<Form.TextArea maxCount={50} showClear
|
|
label='地址链接'
|
|
labelPosition="left"
|
|
placeholder='请输入URL'
|
|
initValue={compile?.link || ''}
|
|
rules={[{ required: true, message: "请输入地址链接" }]}
|
|
field='link'
|
|
/>
|
|
</Form>
|
|
</div>
|
|
</Modal> : ""
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, members, webSocket } = state;
|
|
return {
|
|
// loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
// members: members.data,
|
|
// socket: webSocket.socket
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Control);
|
|
|