巴林闲侠 2 years ago
parent
commit
499bea194f
  1. BIN
      web/client/assets/images/background/user_login.png
  2. BIN
      web/client/assets/images/background/xiangqi.png
  3. BIN
      web/client/assets/images/problem/await.png
  4. BIN
      web/client/assets/video/login_bg.mp4
  5. 28
      web/client/src/layout/components/header/index.jsx
  6. 57
      web/client/src/sections/auth/containers/login.jsx
  7. 11
      web/client/src/sections/problem/components/statistics.jsx
  8. 52
      web/client/src/sections/problem/components/tableData.jsx
  9. 68
      web/client/src/sections/problem/containers/dataAlarm.jsx

BIN
web/client/assets/images/background/user_login.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
web/client/assets/images/background/xiangqi.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
web/client/assets/images/problem/await.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
web/client/assets/video/login_bg.mp4

Binary file not shown.

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

@ -67,25 +67,43 @@ const Header = (props) => {
text={
<div
style={{
marginLeft: 20,
marginLeft: -8,
display: "inline-block",
color: "white",
}}
>
<Avatar size="extra-small" color="light-blue" style={{marginRight:4}}>
U
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
{user?.name?.substr(0, 1)}
</Avatar>
<div style={{
display: "inline-block", position: "relative",
top: 10,
left: 4,
marginRight: 4,
}}>
}}
>
</div>
</div>
}
>
<Nav.Item itemKey={"logout"} text={"退出"} />
<div style={{ width: 200, padding: 16, background: '#c7bebeeb' }}>
<div style={{ display: "flex" }}>
<Avatar size="default" color="light-blue" style={{ marginRight: 4 }}>
{user?.name?.substr(0, 1)}
</Avatar>
<div style={{ fontSize: 12 }}>
{user.name}
<div title={user?.department?.map(v => v.name + '、')} style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{user?.department?.map(v => v.name + '、')}</div>
</div>
</div>
<div>用户中心</div>
<div>安全认证</div>
</div>
<Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} />
{/* collapseButton collapseText */}
</Nav.Sub>
</>
}

57
web/client/src/sections/auth/containers/login.jsx

@ -42,7 +42,7 @@ const Login = props => {
src="/assets/video/login_bg.mp4"
type="video/mp4"
/>
<img src='/assets/images/background/loginBackground.gif' style={{
{/* <img src='/assets/images/background/loginBackground.gif' style={{
width: "100%",
height: 'calc(100vh - 4px)',
objectFit: "cover",
@ -51,26 +51,48 @@ const Login = props => {
top: 0,
left: 0,
zIndex: "5"
}} />
}} /> */}
<div style={{
width: 446,
height: 348,
width: 600,
height: 90,
objectFit: "cover",
objectPosition: 'left top',
position: 'absolute',
top: 139,
left: 41,
zIndex: 5,
fontSize: 14,
color: ' #005ABD',
display:'flex',
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>POMS运维中台管理系统</span> 为企业数字化转型提供安全稳定高效的数字化运维底座</div>
<div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>高效</span> 为运维智能化升级提供领先的创新技术和平台管理</div>
<div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>智能</span>助力数字化转型和智能化升级一步到位</div>
</div>
<div style={{
width: 512,
height: '100%',
padding: '45px 60px',
background: 'linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,.3))',
background: 'rgb(255 255 255 / 50%)',
backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
position: 'absolute',
top: '33.89%',
right: '16.43%',
zIndex: "6"
top: 0,
right: 0,
zIndex: "6",
textAlign: 'center',
}}>
<div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
<img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
</div>
<div style={{
width: 388,
marginTop: "40%"
}}>
<img src="/assets/images/background/user_login.png" alt="" style={{ width: 324, height: 24, marginBottom: 71 }} />
<Form
onSubmit={values => {
dispatch(login(values.username, values.password)).then(res => {
const data = res.payload.user
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token ,pomsUserId:data.pomsUserInfo.id}))
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, pomsUserId: data.pomsUserInfo.id }))
})
}}
getFormApi={formApi => form.current = formApi}
@ -82,7 +104,7 @@ const Login = props => {
label='用户名'
placeholder='请输入账号'
prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
style={{ background: '#FFFFFF', height: 46, marginBottom: 33, border: '1px solid #E0EFFF', borderRadius: '4px' }}
/>
<Form.Input
field='password'
@ -92,10 +114,15 @@ const Login = props => {
placeholder='请输入密码'
label='密码'
prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
style={{ background: '#FFFFFF', height: 46, border: '1px solid #E0EFFF', borderRadius: '4px' }}
/>
<Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
<img src="/assets/images/background/xiangqi.png" style={{ width: 112, height: 14, margin: "4px 0 0 278px" }} />
<Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 56, height: 46, backgroundColor: '#005ABD', borderRadius: '3px' }}>立即登录</Button>
</Form>
</div>
</div>
</div>
);

11
web/client/src/sections/problem/components/statistics.jsx

@ -6,24 +6,27 @@ const Statistics = ({ dispatch, actions, close, modalName, visible, appData }) =
return (
<div style={{ width: '100%', height: 180, border: '1px solid #00000012', backgroundColor: 'white', marginBottom: 20 }}>
<div style={{ width: '100%', height: 180, backgroundColor: 'white', marginBottom: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>数据异常统计</div>
<DatePicker
{/* <DatePicker
type="dateTimeRange"
style={{ width: 405 }}
// defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
value={[new Date('2022-08-08 00:00'), new Date('2022-08-09 00:00')]}
prefix='统计时段:'
onChange={console.log}
/>
/> */}
</div>
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}>
{/* <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
<div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
</div> */}
<div style={{ fontSize: 32, fontFamily: 'YouSheBiaoTiHei', fontWeight: 500, color: '#005ABD', textIndent:60, lineHeight: '156px', background: 'url(/assets/images/problem/await.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 'calc(100% - 40px)', height: '156', margin: '0 0 0 10px' }}>
暂未开放 敬请期待
</div>
</div>
)

52
web/client/src/sections/problem/components/tableData.jsx

@ -4,8 +4,9 @@ import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi
import { SkeletonScreen, } from "$components";
const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }) => {
const [selected, setSelected] = useState([]) //
const api = useRef();
useEffect(() => {
@ -67,7 +68,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
field={collectData.common.field}
key={collectData.common.field}
// defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
values={[new Date('2022-08-08 00:00'), new Date()]}
// initValue={[new Date('2022-08-08 00:00'), new Date()]}
onChange={(v) => console.log(v)}
/>)
return frame
@ -82,17 +83,11 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
marginRight: 10
}}
>
<img src="/assets/images/problem/setup.png"
style={{ width: 24, height: 24 }}
onClick={() => setSetup(true)} />
<img src="/assets/images/problem/setup.png" style={{ width: 24, height: 24 }} onClick={() => setSetup(true)} />
<Button
theme="solid"
type="primary"
style={{
width: 65,
height: 30,
borderRadius: 3,
}}
style={{ width: 65, height: 30, borderRadius: 3, }}
onClick={() => {
api.current.validate().then((v) => {
console.log(v);
@ -112,30 +107,46 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
placeholder={SkeletonScreen()}
>
<Table
columns={[{ title: '叫', dataIndex: 'name', }]}
dataSource={[{ name: '1', }]}
columns={exhibition}
dataSource={[{ key: "156468", 1: '1', }, { key: "257425", 2: '555', }]}
bordered={false}
empty="暂无数据"
style={{
padding: "0px 20px",
}}
style={{ padding: "0px 20px", }}
pagination={false}
onRow={(record, index) => {
if (index % 1 === 0) {
return { style: { background: '' } }
return { style: { background: '#FAFCFF' } }
}
}}
rowSelection={{
selectedRowKeys: selected,
onSelect: (record, selected) => {
console.log(`select row: ${selected}`, record);
},
onSelectAll: (selected, selectedRows) => {
console.log(`select all rows: ${selected}`, selectedRows);
},
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
}}
/>
</Skeleton>
<div
style={{
display: "flex",
justifyContent: "flex-end",
justifyContent: "space-between",
padding: "20px 20px",
}}
>
<div>
<div style={{ display: 'inline-block', lineHeight: '30px' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}>0</span>问题</div>
<Button style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}>全选</Button>
<Button type='primary' theme='solid' style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量确认</Button>
</div>
<div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px" }}>
{100}个设备
{100}问题
</span>
<Pagination
className="22"
@ -149,6 +160,8 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
}}
/>
</div>
</div>
</div >
</>
)
@ -157,8 +170,9 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
function mapStateToProps (state) {
const { auth, global, members } = state;
// console.log(auth.user);
return {
// user: auth.user,
user: auth.user,
// actions: global.actions,
// global: global,
// members: members.data,

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

@ -14,6 +14,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
const [collect, setCollect] = useState([]) //
const [setup, setSetup] = useState(false); //
const [tableSetup, setTableSetup] = useState([]); //
const [exhibition, setExhibition] = useState([]); //
const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' }
@ -22,10 +23,25 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
setRoute(match.url.substring(match.url.lastIndexOf("/") + 1, match.url.length))
console.log(match.url)
console.log(tableType);
}, [])
useEffect(() => {
if (route) {
//
let data = columns[route]
data.splice(0, 1)
if (tableType[route] == 'dataAbnormal') data.splice(6, 0, '6')
localStorage.getItem(tableType[route]) == null
? localStorage.setItem(
tableType[route],
JSON.stringify(data)
)
: "";
}
attribute(tableType[route], route);
}, [route])
@ -146,7 +162,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
const columns = {
dataLnterrupt: ['0', '1', '2', '3', '4', '5', '6', '7', '8',],
dataAbnormal: ['0', '1', '2', '3', '15', '5', '6', '7', '8'],
strategyHit: ['0', '1', '2', '3', '17', '5', '10', '11', '7', '8'],
strategyHit: ['0', '1', '2', '3', '17', '5', '10', '11', '8'],
videoAbnormal: ['0', '1', '2', '3', '21', '20', '5', '7', '8'],
useAbnormal: ['0', '1', '23', '24', '15', '25', '7', '8'],
deviceAbnormal: ['0', '1', '2', '3', '15', '19', '5', '7', '8'],
@ -183,17 +199,38 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
const attribute = (tableType, route) => {
let arr = localStorage.getItem(tableType)
? JSON.parse(localStorage.getItem(tableType))
const attribute = (name, route) => {
let arr = localStorage.getItem(name)
? JSON.parse(localStorage.getItem(name))
: [];
// if (route) {
// console.log(tableList[route]);
// console.log([...[1,2,3],...[2,3]]);
// let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value))
// console.log(setup);
// setTableSetup([{ list: setup }])
// }
console.log(arr);
if (route) {
let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value))
let data = ['0']
if (tableType[route] == 'dataAbnormal') {
data = ['0', '6']
data.splice(1, 0, ...arr)
} else {
data.splice(1, 0, ...arr)
}
console.log(data)
let TableDisplay = data.map(v => {
let datas = columnAll.find(vv => v == vv.value)
if (datas) {
return { title: datas.name, dataIndex: datas.value, rowKey: datas.value }
}
})
console.log(TableDisplay);
console.log(setup);
setExhibition(TableDisplay)
setTableSetup([{ list: setup }])
}
// for (let i = 0; i < arr.length; i++) {
// let colum = column.filter((item) => {
@ -219,24 +256,25 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
}
}
return (
<div>
<div style={{minWidth:1000}}>
{/* 滞留提醒 */}
<div>
{abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时请尽快处理</div></div> : ""}
</div>
<Statistics />
{/* <Statistics />
<TableData
route={route}
collectData={collectData}
setSetup={setSetup}
/>
exhibition={exhibition}
/> */}
{setup ? (
<Setup
tableType={tableType[route] || []}
tableList={tableSetup}
close={() => {
setSetup(false);
attribute(tableType[route]);
attribute(tableType[route], route);
// setcameraSetup(false);
}}
/>

Loading…
Cancel
Save