管理设备2

dev
陈博文 3 years ago
parent 10de1e2718
commit c2ea6a3811

@ -8,6 +8,10 @@ export default defineConfig({
theme: {
'@primary-color': '#165DFF',
},
dva: {
hmr: true,
// immer: true,
},
routes: [
{
path: '/',
@ -21,6 +25,10 @@ export default defineConfig({
path: '/basic/login',
component: '@/pages/Basic/List/Login',
},
{
path: '/basic/device',
component: '@/pages/Basic/List/Device',
},
],
},
],

@ -0,0 +1,65 @@
import { Effect, Reducer } from 'umi';
export interface BasicInfo {
text: string;
dataName: string;
dbPasswd: string;
dbServerIp: string;
dbUser: string;
deviceNo: string;
managerNode: string;
nodeName: string;
supportUnit: string;
type: string;
}
export interface BasicInfoModelState {
basicInfo: BasicInfo;
}
export interface BasicModelType {
namespace: 'basic';
state: BasicInfoModelState;
effects: {
setActionData: Effect;
};
reducers: {
save: Reducer<any>;
};
}
const BasicModel: BasicModelType = {
namespace: 'basic',
state: {
basicInfo: {
text: '',
dbUser: '',
dbPasswd: '',
dbServerIp: '',
type: '1',
dataName: '数据中心名称',
nodeName: '管理节点名称',
deviceNo: '设备出厂编号',
supportUnit: '选择保障单位',
managerNode: '选择管理节点',
},
},
effects: {
*setActionData({ payload }, { call, put }) {
yield put({
type: 'save',
payload: { basicInfo: { ...payload } },
});
},
},
reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
},
};
export default BasicModel;

@ -0,0 +1,40 @@
.page {
background-color: #fff;
padding: 40px 118px;
.name {
display: flex;
align-items: center;
margin-bottom: 32px;
b {
width: 6px;
height: 20px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 24px;
font-weight: 500;
color: #232b40;
}
}
.status {
font-size: 14px;
font-weight: 500;
color: #464f66;
margin-bottom: 30px;
span {
color: #e30000;
}
}
.box3 {
border-top: 1px solid #e3e4e6;
margin-top: 20px;
padding-top: 20px;
}
}

@ -0,0 +1,130 @@
import styles from './index.less';
import { Select, Input, Button, Row, Modal, Form, Tabs } from 'antd';
import Fetch from '@/utils/fetch';
import { useEffect, useState, FC } from 'react';
import { connect, ConnectProps, Dispatch, BasicInfoModelState } from 'umi';
interface PageProps extends ConnectProps {
basic: BasicInfoModelState;
dispatch: Dispatch;
match: any;
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const [form] = Form.useForm();
const { basicInfo } = basic;
const { dbUser, dbPasswd, dbServerIp, text, type } = basicInfo;
console.log(basicInfo, 'basicInfo');
useEffect(() => {}, []);
const clickFile = () => {
// var inputObj = document.createElement('input')
// inputObj.setAttribute('id', '_ef');
// inputObj.setAttribute('type', 'file');
// inputObj.setAttribute("style", 'visibility:hidden');
// document.body.appendChild(inputObj);
// var $inputObj = $(inputObj);
// inputObj.click();
// $inputObj.change(function (e) {
// var filec = e.target.files[0];//获取改变后的文件
// if (filec) {
// //文件已经选择好 下面可以写自己的上传代码了
// }
// });
};
return (
<div className={styles.page}>
<div className={styles.name}>
{' '}
<b /> <span></span>
</div>
<div className={styles.status}>
<span>{text || '未开通'}</span>
</div>
<Tabs
activeKey={type}
onChange={(k: string) => {
dispatch({
type: 'basic/setActionData',
payload: { type: k },
});
}}
>
<Tabs.TabPane key={'1'} tab="总部级" />
<Tabs.TabPane key={'2'} tab="大单位级别" />
</Tabs>
<div style={{ margin: '20px 0', fontWeight: 'bold', color: '#464F66' }}>
</div>
<Row align="middle">
<Row align="middle" className="mr40">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
</Row>
<Row align="middle">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
</Row>
</Row>
<Row align="middle">
<Row align="middle" className="mr40">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
</Row>
<Row align="middle">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
</Row>
</Row>
<Row align="middle">
<Row align="middle" className="mr40">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
</Row>
</Row>
<div className={styles.box3}>
<Row align="middle">
<Row align="middle" className="mr40">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
<Button type="primary" ghost size="large">
</Button>
</Row>
<Row align="middle">
<span>32</span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
<Button type="primary" ghost size="large">
</Button>
</Row>
</Row>
<Row align="middle">
<Row align="middle" className="mr40">
<span className="pl12">20</span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
<Button type="primary" ghost size="large">
</Button>
</Row>
<Row align="middle">
<span>16</span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
<Button type="primary" ghost size="large">
</Button>
</Row>
</Row>
</div>
<Button className="mt20" type="primary">
</Button>
</div>
);
};
export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
basic,
}))(Page);

@ -50,14 +50,11 @@
.btn {
width: 240px;
height: 40px;
background: #165dff;
border-radius: 4px;
cursor: pointer;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
margin-top: 52px;
}
@ -125,14 +122,11 @@
.btn {
width: 240px;
height: 40px;
background: #165dff;
border-radius: 4px;
cursor: pointer;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
margin-top: 22px;
margin-bottom: 20px;
}

@ -1,12 +1,22 @@
import styles from './index.less';
import { Select, Input, Button, Row, Modal, Form } from 'antd';
import Fetch from '@/utils/fetch';
import { useEffect, useState } from 'react';
import { useEffect, useState, FC } from 'react';
import { connect, ConnectProps, Dispatch, BasicInfoModelState } from 'umi';
const Page = () => {
const [text, setText] = useState<string>('');
const [visible, setVisible] = useState<boolean>(true);
interface PageProps extends ConnectProps {
basic: BasicInfoModelState;
dispatch: Dispatch;
match: any;
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const [visible, setVisible] = useState<boolean>(false);
const [form] = Form.useForm();
const { basicInfo } = basic;
const { dbUser, dbPasswd, dbServerIp, text } = basicInfo;
console.log(basicInfo, 'basicInfo');
useEffect(() => {
getData();
@ -14,13 +24,34 @@ const Page = () => {
const getData = async () => {
const res = await Fetch('/openi/resource/getResourceStatus');
console.log(res, 'res');
if (res.result === 'success') {
setText(res.result?.data?.[0]?.resource ? '已开通' : '未开通');
dispatch({
type: 'basic/setActionData',
payload: {
text: res.result?.data?.[0]?.resource ? '已开通' : '未开通',
},
});
}
};
const open = async () => {
const res = await Fetch.post('/openi/resource/clickOpenResource');
if (res.result === 'success') {
form.setFieldsValue({ dbUser, dbPasswd, dbServerIp });
setVisible(true);
}
};
const handleFinish = (v: any) => {};
const handleFinish = (v: any) => {
const { dbUser, dbPasswd, dbServerIp } = v;
dispatch({
type: 'basic/setActionData',
payload: { dbUser, dbPasswd, dbServerIp },
});
setVisible(false);
};
const disabled = text === '已开通';
return (
<div className={styles.login}>
@ -32,7 +63,9 @@ const Page = () => {
<div className={styles.status}>
<span>{text}</span>
</div>
<div className={styles.btn}></div>
<Button type="primary" onClick={open} className={styles.btn}>
</Button>
<div className={styles.tip}>
</div>
@ -46,10 +79,21 @@ const Page = () => {
<div className={styles.status}>
<span></span>
</div>
<div className={styles.btn}></div>
<Button
type="primary"
disabled={!disabled}
onClick={open}
className={styles.btn}
>
</Button>
<div style={{ marginLeft: 23 }}>
<span></span>
<Select size="large" style={{ width: 330, marginLeft: 10 }}>
<Select
disabled={!disabled}
size="large"
style={{ width: 330, marginLeft: 10 }}
>
<Select.Option>2020</Select.Option>
<Select.Option>2021</Select.Option>
<Select.Option>2022</Select.Option>
@ -57,8 +101,14 @@ const Page = () => {
</div>
<Row align="middle">
<span></span>
<Input size="large" style={{ width: 255, margin: '20px 10px' }} />
<Button size="large"></Button>
<Input
disabled={!disabled}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
<Button type="primary" ghost disabled={!disabled} size="large">
</Button>
</Row>
</div>
<Modal
@ -83,7 +133,7 @@ const Page = () => {
>
<Form.Item
label="数据库用户名"
name="name"
name="dbUser"
rules={[
{
required: true,
@ -95,7 +145,7 @@ const Page = () => {
</Form.Item>
<Form.Item
label="数据库密码"
name="name"
name="dbPasswd"
rules={[
{
required: true,
@ -103,11 +153,11 @@ const Page = () => {
},
]}
>
<Input.Password />
<Input.Password autoComplete="new-password" />
</Form.Item>
<Form.Item
label="数据库服务器IP地址"
name="name"
name="dbServerIp"
rules={[
{
required: true,
@ -122,4 +172,6 @@ const Page = () => {
</div>
);
};
export default Page;
export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
basic,
}))(Page);

@ -8,7 +8,9 @@ import '@/styles/iconfont/iconfont.css';
const IndexPage = ({ ...props }) => {
//重定向页面
useEffect(() => {
history.replace('/basic/login');
if (props.location.pathname === '/') {
history.replace('/basic/login');
}
}, []);
return <ConfigProvider locale={zhCN}>{props.children}</ConfigProvider>;

@ -379,6 +379,10 @@
padding-left: 10px;
}
.pl12 {
padding-left: 12px;
}
.pl15 {
padding-left: 15px;
}

Loading…
Cancel
Save