pu428f3pz
/
datacenter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

开通主页面

Browse Source
dev
陈博文 4 years ago
parent 0912e03f6d
commit ce1b50bb36
2 changed files with 275 additions and 91 deletions
Show Stats Download Patch File Download Diff File

4
src/pages/Equipment/List/Index/index.less
Unescape View File

@ -123,7 +123,6 @@
padding: 0 20px;
> aside {
height: 124px;
background: #ffffff;
> div:first-child {
@ -144,7 +143,8 @@
.li {
display: flex;
border: 1px solid #ebf3ff;
border-top: 0;
i {
font-size: 34px;
color: #a0a4f7;

362
src/pages/Equipment/List/Index/index.tsx
Unescape View File

@ -1,7 +1,17 @@
import styles from './index.less';
import { Select, Input, Button, Row, Modal, Form, message, Empty } from 'antd';
import {
Select,
Input,
Button,
Row,
Modal,
Form,
message,
Empty,
Spin,
} from 'antd';
import Fetch from '@/utils/fetch';
import { useEffect, useState, FC } from 'react';
import { useEffect, useState, FC, useRef } from 'react';
import {
connect,
@ -20,58 +30,89 @@ interface PageProps extends ConnectProps {
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const [facilityList, setFacilityList] = useState<any[]>([{}]);
const [visible, setVisible] = useState<boolean>(false);
const [facilityList, setFacilityList] = useState<any[]>([]);
const [localList, setLocalList] = useState<any[]>([]);
const [firmList, setFirmList] = useState<any[]>([]);
const [visible, setVisible] = useState<any>(false);
const [loading, setLoading] = useState<boolean>(true);
const [form] = Form.useForm();
const editId = useRef(null);
useEffect(() => {
getData();
getData('1');
getData('2');
getFirmList();
}, []);
const getData = async () => {
const res = await Fetch('/openi/resource/getResourceStatus');
const getData = async (type: string) => {
setLoading(true);
const res = await Fetch('/openi/dataCenter/page', {
method: 'get',
params: {
type,
pageSize: 1000000,
pageNumber: 1,
},
});
if (res.result === 'success') {
dispatch({
type: 'basic/setActionData',
payload: {
resource: res?.data?.[0]?.resource ? '已开通' : '未开通',
cert: res?.data?.[0]?.cert ? '已开通' : '未开通',
},
});
const data = res?.data?.[0];
if (type === '1') {
setFacilityList(data.list || []);
} else {
setLocalList(data.list || []);
}
}
setLoading(false);
};
const open = async () => {
const res = await Fetch.post('/openi/resource/clickOpenResource');
const getFirmList = async () => {
const res = await Fetch('/openi/producer/list');
if (res.result === 'success') {
form.setFieldsValue({ dbUser, dbPasswd, dbServerIp });
setVisible(true);
const data = res?.data?.[0];
setFirmList(data);
}
};
const certificateOpen = async () => {
if (!company) {
message.warn('选择单位不能为空');
return;
}
if (!certSign) {
message.warn('请先下载证书');
return;
}
const res = await Fetch.post('/openi/resource/openCertSystem');
const handleFinish = async (v: any) => {
const res = await Fetch('/openi/dataCenter/editOrAdd', {
method: 'post',
data: {
...v,
type: visible,
id: editId.current,
},
});
if (res.result === 'success') {
history.replace('/basic/certificate');
getData(visible);
setVisible(false);
}
};
const handleFinish = (v: any) => {
const { dbUser, dbPasswd, dbServerIp } = v;
dispatch({
type: 'basic/setActionData',
payload: { dbUser, dbPasswd, dbServerIp },
const addList = (type: string) => {
setVisible(type);
};
const deleteList = (type: string, id: any) => {
Modal.confirm({
title: '提示',
okText: '确认',
cancelText: '取消',
content: '确认删除吗？',
onOk: async () => {
const res = await Fetch(`/openi/dataCenter/delete/${id}`, {
method: 'post',
});
if (res.result === 'success') {
getData(type);
}
},
});
setVisible(false);
history.replace('/basic/device');
};
const editList = (type: string, param: any) => {
form.setFieldsValue({ ...param });
editId.current = param.id;
setVisible(type);
};
return (
@ -117,60 +158,172 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
</aside>
</div>
</div>
<div className={styles.list}>
<div className={styles.head}>
<div>数据中心设备列表</div>
<Button type="primary" ghost>
新增数据中心服务器
</Button>
</div>
<div className={styles.content}>
{!facilityList.length && <Empty style={{ margin: '20px 0' }} />}
{!!facilityList.length &&
facilityList.map((e: any, i: number) => {
return (
<aside key={i}>
<div>
<span>XXXX数据中心服务器</span>
<Spin spinning={loading}>
<div className={styles.list}>
<div className={styles.head}>
<div>数据中心设备列表</div>
<Button onClick={() => addList('1')} type="primary" ghost>
新增数据中心设备
</Button>
</div>
<div className={styles.content}>
{!facilityList.length && <Empty style={{ margin: '20px 0' }} />}
{!!facilityList.length &&
facilityList.map((e: any, i: number) => {
return (
<aside key={i}>
<div>
<i className="iconfont icon-mimaruanjianjiami mr5" />
<span>收起</span>
<span>{e.name}</span>
<div>
<i className="iconfont icon-mimaruanjianjiami mr5" />
<span>收起</span>
</div>
</div>
</div>
<div className={styles.li}>
<i className="iconfont icon-zhucedengji"></i>
<div>
<p>
<span>数据中心编号</span>
<span>22</span>
</p>
<p>
<span>数据中心名称</span>
<span>未定义数据中心名称</span>
</p>
<div className={styles.li}>
<i className="iconfont icon-zhucedengji"></i>
<div>
<p>
<span>数据中心编号</span>
<span>{e.physicsNum}</span>
</p>
<p>
<span>数据中心名称</span>
<span>{e.number}</span>
</p>
</div>
<div>
<p>
<span>所属单位</span>
<span>{e.managerNum}</span>
</p>
<p>
<span>管理设备编号</span>
<span>{e.producerId}</span>
</p>
</div>
</div>
<Row justify="end" className="mt10 mb20">
<Button
onClick={() => editList('1', e)}
type="primary"
ghost
>
修改设备
</Button>
<Button
onClick={() =>
downLoadLink(
url + `/openi/dataCenter/resourceExport/${e.id}`,
)
}
className="ml10"
type="primary"
ghost
>
导出初装资源
</Button>
<Button
onClick={() => deleteList('1', e.id)}
className="ml10"
type="primary"
danger
>
删除
</Button>
</Row>
</aside>
);
})}
</div>
</div>
<div className={styles.list}>
<div className={styles.head}>
<div>数据管理终端列表</div>
<Button onClick={() => addList('2')} type="primary" ghost>
新增数据管理终端
</Button>
</div>
<div className={styles.content}>
{!localList.length && <Empty style={{ margin: '20px 0' }} />}
{!!localList.length &&
localList.map((e: any, i: number) => {
return (
<aside key={i}>
<div>
<p>
<span>所属单位</span>
<span>未定义所属单位</span>
</p>
<p>
<span>管理设备编号</span>
<span>NO.88888888888</span>
</p>
<span>{e.name}</span>
<div>
<i className="iconfont icon-mimaruanjianjiami mr5" />
<span>收起</span>
</div>
</div>
<div className={styles.li}>
<i className="iconfont icon-zhucedengji"></i>
<div>
<p>
<span>数据中心编号</span>
<span>{e.physicsNum}</span>
</p>
<p>
<span>数据中心名称</span>
<span>{e.number}</span>
</p>
</div>
<div>
<p>
<span>所属单位</span>
<span>{e.managerNum}</span>
</p>
<p>
<span>管理设备编号</span>
<span>{e.producerId}</span>
</p>
</div>
</div>
</div>
</aside>
);
})}
<Row justify="end" className="mt10 mb20">
<Button
onClick={() => editList('2', e)}
type="primary"
ghost
>
修改设备
</Button>
<Button
onClick={() =>
downLoadLink(
url + `/openi/dataCenter/resourceExport/${e.id}`,
)
}
className="ml10"
type="primary"
ghost
>
导出初装资源
</Button>
<Button
onClick={() => deleteList('2', e.id)}
className="ml10"
type="primary"
danger
>
删除
</Button>
</Row>
</aside>
);
})}
</div>
</div>
</div>
</Spin>
</div>
<Modal
centered
title="填写用户信息"
title="新增设备"
visible={visible}
afterClose={() => {
form.resetFields();
editId.current = null;
}}
okText="保存"
cancelText="取消"
onOk={() => {
@ -183,46 +336,77 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
<Form
form={form}
layout="horizontal"
colon={false}
onFinish={handleFinish}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
<Form.Item
label="数据库用户名"
name="dbUser"
label="名称"
name="name"
rules={[
{
required: true,
message: `请输入数据库用户名`,
message: `请输入名称`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="数据库密码"
name="dbPasswd"
label="物理标识"
name="physicsNum"
rules={[
{
required: true,
message: `请输入数据库密码`,
message: `请输入物理标识`,
},
]}
>
<Input.Password autoComplete="new-password" />
<Input />
</Form.Item>
<Form.Item
label="数据库服务器IP地址"
name="dbServerIp"
label="铭牌编码"
name="number"
rules={[
{
required: true,
message: `请输入数据库服务器IP地址`,
message: `请输入铭牌编码`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="管理标识"
name="managerNum"
rules={[
{
required: true,
message: `请输入管理标识`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="生产厂商"
name="producerId"
rules={[
{
required: true,
message: `请输入生产厂商`,
},
]}
>
<Select>
{firmList?.map((e) => (
<Select.Option value={e.id} key={e.id}>
{e.name}
</Select.Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</div>

Write Preview
Loading…
Cancel
Save