Browse Source

控制台页面与数据

dev
wenlele 2 years ago
parent
commit
789862853f
  1. 4
      web/client/src/layout/components/header/index.jsx
  2. 42
      web/client/src/sections/console/actions/console.js
  3. 179
      web/client/src/sections/console/containers/console.jsx
  4. 2
      web/client/src/sections/problem/containers/dataAlarm.jsx
  5. 4
      web/client/src/utils/webapi.js

4
web/client/src/layout/components/header/index.jsx

@ -101,9 +101,9 @@ const Header = (props) => {
<Dropdown.Menu style={{ minWidth: 270, maxWidth: 714, padding: 20, fontSize: 12 }}> <Dropdown.Menu style={{ minWidth: 270, maxWidth: 714, padding: 20, fontSize: 12 }}>
<Tabs type="button"> <Tabs type="button">
<TabPane tab="项目" itemKey="项目"> <TabPane tab="项目" itemKey="项目">
<div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "8px 0" }}></div> <div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "10px 0" }}></div>
<Input suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear></Input> <Input suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear></Input>
<div id='overall' style={{ width: '100%', height: 480, position: "relative", }}> <div id='overall' style={{ width: '100%', height: 260, position: "relative", marginTop: 10 }}>
{pomsList?.length > 0 ? {pomsList?.length > 0 ?
pomsList.filter(u => u.pepProjectName?.includes(keyword))?.map(v => { pomsList.filter(u => u.pepProjectName?.includes(keyword))?.map(v => {
return <Dropdown.Item return <Dropdown.Item

42
web/client/src/sections/console/actions/console.js

@ -2,13 +2,35 @@
import { ApiTable ,basicAction} from '$utils' import { ApiTable ,basicAction} from '$utils'
// export function getMembers (orgId) { export function ConsoleToollink () { //获取常用工具
// return dispatch => basicAction({ return dispatch => basicAction({
// type: 'get', type: 'get',
// dispatch: dispatch, dispatch: dispatch,
// actionType: 'GET_MEMBERS', actionType: 'GET_CONSLE_TOOLLINK',
// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, url: `${ApiTable.consoleToollink}`,
// msg: { error: '获取用户列表失败' }, msg: { option: '获取常用工具' },
// reducer: { name: 'members' } reducer: { name: '' }
// }); });
// } }
export function putConsoleToollink (data) { //编辑常用工具
return dispatch => basicAction({
type: 'put',
dispatch: dispatch,
data,
actionType: 'PUT_CONSLE_TOOLLINK',
url: `${ApiTable.consoleToollink}`,
msg: { option: '编辑常用工具' },
reducer: { name: '' }
});
}
export function deleteConsoleToollink (orgId) { //删除常用工具
return dispatch => basicAction({
type: 'delete',
dispatch: dispatch,
actionType: 'DELETE_CONSLE_TOOLLINK',
url: `${ApiTable.consoleToollink.replace('{linkId}', orgId)}`,
msg: { option: '删除常用工具' },
reducer: { name: '' }
});
}

179
web/client/src/sections/console/containers/console.jsx

@ -4,6 +4,8 @@ import { Timeline, Card, Button } from '@douyinfe/semi-ui';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import '../style.less' import '../style.less'
import PerfectScrollbar from "perfect-scrollbar"; import PerfectScrollbar from "perfect-scrollbar";
import repairFQA from '../../means/containers/repairFQA';
import { Setup, OutHidden } from "$components";
const { Meta } = Card; const { Meta } = Card;
let newScrollbar; let newScrollbar;
@ -21,7 +23,7 @@ const Console = (props) => {
'url(/assets/images/console/lan_1.png)', 'url(/assets/images/console/lan_1.png)',
'url(/assets/images/console/lv_1.png)', 'url(/assets/images/console/lv_1.png)',
'url(/assets/images/console/huang_1.png)', 'url(/assets/images/console/huang_1.png)',
'url(/assets/images/console/hong_1.png)' 'url(/assets/images/console/hong_1.png)',
] ]
const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])// const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//
@ -32,9 +34,14 @@ const Console = (props) => {
const [webList, setWebList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//web const [webList, setWebList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//web
const [problemsList, setProblemsList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//& const [problemsList, setProblemsList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//&
const [setup, setSetup] = useState(false); //
const [tableType, setTableType] = useState(''); //localStorage
useEffect(() => { useEffect(() => {
}, []) }, [])
useEffect(() => { useEffect(() => {
newScrollbar = new PerfectScrollbar("#news", { newScrollbar = new PerfectScrollbar("#news", {
suppressScrollX: true, suppressScrollX: true,
@ -90,6 +97,51 @@ const Console = (props) => {
// dispatch(actions.example.getMembers(user.orgId)) // dispatch(actions.example.getMembers(user.orgId))
}) })
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: [], img: 'url(/assets/images/console/lan_1.png)' },
{ name: '数据告警', sort: 2, key: 'data', data: [], img: 'url(/assets/images/console/lv_1.png)' },
{ name: '应用告警', sort: 2, key: 'app', data: [], img: 'url(/assets/images/console/hong_1.png)' },
{ name: '设备告警', sort: 2, key: 'device', data: [], img: 'url(/assets/images/console/hong_1.png)' },
]
// const attribute = (name, route) => {
// let arr = localStorage.getItem(name)
// ? JSON.parse(localStorage.getItem(name))
// : [];
// // console.log(arr);
// if (route) {
// let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value))
// let data = []
// data.splice(1, 0, ...arr, 'text')
// let TableDisplay = data?.map(v => {
// let datas = columnAll?.find(vv => v == vv.value)
// if (datas) {
// return { title: datas.name, sort: datas.sort, dataIndex: datas.value, rowKey: datas.value, render: datas.render }
// }
// })
// TableDisplay.sort((a, b) => a.sort - b.sort)
// setExhibition(TableDisplay)
// setTableSetup([{ list: setup }])
// }
// }
return ( return (
@ -123,7 +175,10 @@ const Console = (props) => {
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MY WORK STATION</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MY WORK STATION</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={() => setSetup(true)} /> <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => {
setSetup(true)
setTableType('workbench')
}} />
</div> </div>
</div> </div>
<div style={{ marginTop: 30, display: 'flex' }}> <div style={{ marginTop: 30, display: 'flex' }}>
@ -414,100 +469,66 @@ const Console = (props) => {
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MY USUAL TOOLS</div> <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MY USUAL TOOLS</div>
</div> </div>
</div> </div>
<div style={{ marginTop: 24 }}> <div
<Button onMouseLeave={() => {
theme="solid" console.log(111111);
type="primary" document.getElementById('aa').style.display = 'none'
style={{
width: 94,
height: 29,
borderRadius: 2,
marginRight: 10,
marginBottom: 15,
background: '#0F7EFB',
color: '#FFFFFF',
border: '1px solid #0F7EFB'
}}
onClick={() => {
dispatch(push('/install/authentication/roles'));
}} }}
> style={{ marginTop: 24, position: 'relative', display: "inline-block" }}>
工单管理
</Button>
<Button <Button
theme="solid" theme="solid"
type="primary" type="primary"
style={{ style={{
width: 94, width: 94, height: 29, borderRadius: 2, marginRight: 10, marginBottom: 15,
height: 29, background: '#0F7EFB', color: '#FFFFFF', border: '1px solid #0F7EFB',
borderRadius: 2,
marginRight: 10,
marginBottom: 15,
background: '#0F7EFB',
color: '#FFFFFF',
border: '1px solid #0F7EFB'
}} }}
// onClick={() => { }} onContextMenu={(e) => {
> e.preventDefault();
信鸽服务 document.getElementById('aa').style.display = 'block'
</Button>
<Button
theme="solid"
type="primary"
style={{
width: 94,
height: 29,
borderRadius: 2,
marginRight: 10,
marginBottom: 15,
background: '#0F7EFB',
color: '#FFFFFF',
border: '1px solid #0F7EFB'
}} }}
// onClick={() => { }} onClick={(e) => {
> // console.log(e);
数据告警
</Button>
<Button
theme="solid"
type="primary"
style={{
width: 94,
height: 29,
borderRadius: 2,
marginRight: 10,
marginBottom: 15,
background: '#0F7EFB',
color: '#FFFFFF',
border: '1px solid #0F7EFB'
}} }}
// onClick={() => { }}
> >
项目资料 工单管理
</Button> </Button>
</div> <div id='aa'
<div style={{ marginTop: 4 }}>
<Button
theme="solid"
type="primary"
style={{ style={{
width: 302, position: 'absolute', top: 12, right: -10, background: 'rgb(208 208 223 / 100%)', fontSize: 13,
height: 40, width: 50, textAlign: "center", borderRadius: 4, padding: '0 10px', display: "none"
borderRadius: 2, }}>
marginRight: 32, <div style={{ lineHeight: '30px' }}
background: '#F2F3F5', onClick={() => {
color: '#0F7EFB',
border: '1px solid #F2F3F5'
}} }}
// onClick={() => { }} >编辑</div>
> <div style={{ lineHeight: '30px' }}
添加 onClick={() => {
</Button>
}}
>删除</div>
</div> </div>
</div> </div>
</div> </div>
</div>75
</div> </div>
</div> </div>
{setup ? (
<Setup
tableType={tableType}
tableList={tableSetup}
close={() => {
setSetup(false);
attribute(tableType[route], route);
setTableType('')
}}
/>
) : (
""
)}
</> </>
) )
} }

2
web/client/src/sections/problem/containers/dataAlarm.jsx

@ -414,7 +414,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket, iotVcmpWeb
/> />
{setup ? ( {setup ? (
<Setup <Setup
tableType={tableType[route] || []} tableType={tableType[route]}
tableList={tableSetup} tableList={tableSetup}
close={() => { close={() => {
setSetup(false); setSetup(false);

4
web/client/src/utils/webapi.js

@ -51,6 +51,10 @@ export const ApiTable = {
//服务-信鸽服务 //服务-信鸽服务
getPush: "push", //获取推送配置列表 getPush: "push", //获取推送配置列表
//控制台
consoleToollink: 'console/toollink', //常用工具
}; };
export const RouteTable = { export const RouteTable = {
apiRoot: "/api/root", apiRoot: "/api/root",

Loading…
Cancel
Save