From 8f71dd2f761205d87bbed5f0399185291b718952 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8D=9A=E6=96=87?= <1179111926@qq.com> Date: Mon, 15 Aug 2022 14:26:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .umirc.ts | 18 +- src/pages/Basic/Header/index.tsx | 2 +- src/pages/Encrypt/Header/index.less | 57 ++++ src/pages/Encrypt/Header/index.tsx | 36 +++ src/pages/Encrypt/List/Index/index.less | 167 ++++++++++ src/pages/Encrypt/List/Index/index.tsx | 414 ++++++++++++++++++++++++ src/pages/Equipment/Header/index.tsx | 2 +- src/styles/base.less | 2 +- 8 files changed, 687 insertions(+), 11 deletions(-) create mode 100644 src/pages/Encrypt/Header/index.less create mode 100644 src/pages/Encrypt/Header/index.tsx create mode 100644 src/pages/Encrypt/List/Index/index.less create mode 100644 src/pages/Encrypt/List/Index/index.tsx diff --git a/.umirc.ts b/.umirc.ts index 6b8a3d7..10043ff 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -53,14 +53,16 @@ export default defineConfig({ path: '/equipment/index', component: '@/pages/Equipment/List/Index', }, - // { - // path: '/basic/device', - // component: '@/pages/Basic/List/Device', - // }, - // { - // path: '/basic/certificate', - // component: '@/pages/Basic/List/Certificate', - // }, + ], + }, + { + path: '/encrypt', + component: '@/pages/Encrypt/Header', + routes: [ + { + path: '/encrypt/index', + component: '@/pages/Encrypt/List/Index', + }, ], }, ], diff --git a/src/pages/Basic/Header/index.tsx b/src/pages/Basic/Header/index.tsx index 980b609..2d37301 100644 --- a/src/pages/Basic/Header/index.tsx +++ b/src/pages/Basic/Header/index.tsx @@ -5,7 +5,7 @@ const Header = ({ ...props }) => { return (
- + 设施管理设备
{props.children}
diff --git a/src/pages/Encrypt/Header/index.less b/src/pages/Encrypt/Header/index.less new file mode 100644 index 0000000..cc03ae1 --- /dev/null +++ b/src/pages/Encrypt/Header/index.less @@ -0,0 +1,57 @@ +.head { + height: 60px; + background: #001628; + + > section { + margin: 0 auto; + height: 100%; + font-size: 18px; + display: flex; + align-items: center; + color: #fff; + width: 1200px; + + > span { + font-size: 18px; + font-weight: 500; + color: #ffffff; + line-height: 18px; + letter-spacing: 2px; + } + + > ul { + margin: 0; + padding: 0; + flex: 1; + display: flex; + align-items: center; + + li { + list-style: none; + margin-left: 100px; + font-size: 14px; + font-weight: 600; + color: #28b1ff; + position: relative; + cursor: default; + } + + b { + position: absolute; + z-index: 1; + left: 50%; + transform: translateX(-50%); + bottom: -9px; + width: 40px; + height: 2px; + background: #28b1ff; + } + } + } +} + +.content { + height: calc(100vh - 60px); + background-color: #fafafa; + overflow: auto; +} diff --git a/src/pages/Encrypt/Header/index.tsx b/src/pages/Encrypt/Header/index.tsx new file mode 100644 index 0000000..09260f5 --- /dev/null +++ b/src/pages/Encrypt/Header/index.tsx @@ -0,0 +1,36 @@ +import styles from './index.less'; +import { Fragment } from 'react'; + +const Header = ({ ...props }) => { + const menu = [ + { + id: 1, + name: '基础设施开通', + }, + // { + // id: 2, + // name: '基础设施开通2', + // } + ]; + return ( + +
+
+ + 设施管理设备 +
    + {menu.map((e: any) => ( +
  • + {e.name} + +
    • + ))} +
+
版本号：V0.4.0.0
+
+
+
{props.children}
+ + ); +}; +export default Header; diff --git a/src/pages/Encrypt/List/Index/index.less b/src/pages/Encrypt/List/Index/index.less new file mode 100644 index 0000000..a18a666 --- /dev/null +++ b/src/pages/Encrypt/List/Index/index.less @@ -0,0 +1,167 @@ +.page { + width: 1200px; + margin: 22px auto; + display: flex; + justify-content: space-between; + + .left { + width: 146px; + height: 334px; + background: #ffffff; + border-radius: 4px; + padding-top: 18px; + + > a { + height: 44px; + display: flex; + align-items: center; + font-size: 14px; + font-weight: 400; + color: #464f66; + padding: 20px; + cursor: pointer; + + &:hover { + color: @primary-color; + } + + i { + padding-right: 10px; + font-size: 14px; + } + } + } + + .right { + width: 1034px; + border-radius: 4px; + + .info { + background: #ffffff; + border-radius: 4px; + + .name { + width: 250px; + height: 36px; + border-radius: 4px 4px 0 0; + background: #eef2f8; + line-height: 48px; + font-size: 14px; + font-weight: 500; + color: #165dff; + text-align: center; + } + + .wrap { + background: #eef2f8; + height: 154px; + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + + > aside { + width: 994px; + height: 124px; + background: #ffffff; + + > div:first-child { + height: 36px; + background: #98bdf7; + line-height: 36px; + text-align: center; + font-size: 14px; + font-weight: 400; + color: #232b40; + } + } + + .li { + display: flex; + + > div { + width: 50%; + padding: 16px; + color: #464f66; + + span:first-child { + color: #9096a3; + margin-right: 10px; + } + } + + > div:first-child { + border-right: 1px solid #e3effc; + } + } + } + } + + .list { + margin-top: 10px; + + .head { + height: 72px; + background: #ffffff; + border-radius: 4px 4px 0 0; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + + div { + font-size: 14px; + font-weight: 500; + color: #464f66; + } + } + + .content { + overflow: hidden; + background: #ffffff; + border-radius: 0 0 4px 4px; + padding: 0 20px; + + > aside { + background: #ffffff; + + > div:first-child { + height: 36px; + background: #e3effc; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + color: #232b40; + padding: 0 20px; + + div { + color: @primary-color; + } + } + } + + .li { + display: flex; + border: 1px solid #ebf3ff; + border-top: 0; + i { + font-size: 34px; + color: #a0a4f7; + padding: 16px 50px 16px 16px; + } + + > div { + padding: 16px 80px 16px 16px; + color: #464f66; + + span:first-child { + color: #9096a3; + margin-right: 10px; + } + } + } + } + } + } +} diff --git a/src/pages/Encrypt/List/Index/index.tsx b/src/pages/Encrypt/List/Index/index.tsx new file mode 100644 index 0000000..2804ccd --- /dev/null +++ b/src/pages/Encrypt/List/Index/index.tsx @@ -0,0 +1,414 @@ +import styles from './index.less'; +import { + Select, + Input, + Button, + Row, + Modal, + Form, + message, + Empty, + Spin, +} from 'antd'; +import Fetch from '@/utils/fetch'; +import { useEffect, useState, FC, useRef } from 'react'; +import { Link } from 'umi'; +import { downLoadLink } from '@/utils/download'; +import url from '@/utils/url'; + +interface PageProps {} + +const Page: FC = () => { + const [facilityList, setFacilityList] = useState([]); + const [localList, setLocalList] = useState([]); + const [firmList, setFirmList] = useState([]); + const [visible, setVisible] = useState(false); + const [loading, setLoading] = useState(true); + const [form] = Form.useForm(); + const editId = useRef(null); + + useEffect(() => { + getData('1'); + getData('2'); + getFirmList(); + }, []); + + const getData = async (type: string) => { + setLoading(true); + const res = await Fetch( + `/openi/${type === '1' ? 'dataCenter' : 'localManager'}/page`, + { + method: 'get', + params: { + type, + pageSize: 1000000, + pageNumber: 1, + }, + }, + ); + if (res.result === 'success') { + const data = res?.data?.[0]; + if (type === '1') { + setFacilityList(data.list || []); + } else { + setLocalList(data.list || []); + } + } + setLoading(false); + }; + + const getFirmList = async () => { + const res = await Fetch('/openi/producer/list'); + if (res.result === 'success') { + const data = res?.data?.[0]; + setFirmList(data); + } + }; + + const handleFinish = async (v: any) => { + const res = await Fetch( + `/openi/${visible === '1' ? 'dataCenter' : 'localManager'}/editOrAdd`, + { + method: 'post', + data: { + ...v, + type: visible, + id: editId.current, + }, + }, + ); + if (res.result === 'success') { + getData(visible); + setVisible(false); + } + }; + + 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/${type === '1' ? 'dataCenter' : 'localManager'}/delete/${id}`, + { + method: 'post', + }, + ); + if (res.result === 'success') { + getData(type); + } + }, + }); + }; + + const editList = (type: string, param: any) => { + form.setFieldsValue({ ...param }); + editId.current = param.id; + setVisible(type); + }; + + return ( +
+
+ + + 数据中心 + + + + 管理节点 + +
+
+
+
设备管理
+
+ +
+
+ +
+
+
数据中心设备列表
+ +
+
+ {!facilityList.length && } + {!!facilityList.length && + facilityList.map((e: any, i: number) => { + return ( + + ); + })} +
+
+
+
+
数据管理终端列表
+ +
+
+ {!localList.length && } + {!!localList.length && + localList.map((e: any, i: number) => { + return ( + + ); + })} +
+
+ +
+ + { + form.resetFields(); + editId.current = null; + }} + okText="保存" + cancelText="取消" + onOk={() => { + form.submit(); + }} + onCancel={() => { + setVisible(false); + }} + > +
+ + + + + + + + + + + + + + + +
+ +
+ ); +}; +export default Page; diff --git a/src/pages/Equipment/Header/index.tsx b/src/pages/Equipment/Header/index.tsx index 5019181..09260f5 100644 --- a/src/pages/Equipment/Header/index.tsx +++ b/src/pages/Equipment/Header/index.tsx @@ -16,7 +16,7 @@ const Header = ({ ...props }) => {
- + 设施管理设备
    {menu.map((e: any) => ( diff --git a/src/styles/base.less b/src/styles/base.less index b30ee39..8138298 100755 --- a/src/styles/base.less +++ b/src/styles/base.less @@ -532,7 +532,7 @@ } .font26 { - font-size: 26px; + font-size: 26px !important; } .font28 {