更新

config/routes/index.ts

@@ -9,6 +9,7 @@ const routes = [
   { path: '/initialSystem', name: '初装系统', component: '@/pages/InitialSystem', layout: false },
   { path: '/coreSystemEntrance', name: '核心管理系统', component: '@/pages/CoreSystemEntrance', layout: false },
 
+
   // ------------------------------GLQ远程维护----------------------------------
   // 建立远程链接
   { path: '/teamViewer/paramsSetting', name: '参数设置', component: '@/pages/GLQ/TeamViewer/ParamsSetting' },

src/pages/CoreSystemEntrance/index.less

@@ -1,7 +1,8 @@
 .entrance {
   width: 100vw;
   min-height: 100vh;
-  background: #E8F7FF;
+  background: url('../../assets/images/bk_img.png') no-repeat center;
+  background-size: 100% 100%;
 
   .text_warp {
     width: 80vw;
@@ -43,8 +44,8 @@
   align-items: center;
 
   .imges {
-    width: 100px;
+    width: 81px;
-    height: 120px;
+    height: 81px;
     margin-right: 20px;
     background-color: saddlebrown;
   }

src/pages/CoreSystemEntrance/index.tsx

@@ -33,6 +33,17 @@ const CoreSystemEntrance: FC<PageProps> = ({ }) => {
     setPin('')
   }
 
+  const submit = () => {
+    if (key == '一') {
+      setKey('二');
+      setPin('')
+    } else {
+      initData()
+      // 登录成功进入系统
+      history.push('/teamViewer/paramsSetting')
+    }
+  }
+
   return (
     <div className={styles.entrance}>
       <div className={styles.text_warp}>
@@ -59,23 +70,14 @@ const CoreSystemEntrance: FC<PageProps> = ({ }) => {
           <div>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <div style={{ width: 120, marginRight: 16 }}>请输入PIN码</div>
-              <Input value={pin} onChange={(e) => setPin(e.target.value)}/>
+              <Input value={pin} onChange={(e) => setPin(e.target.value)} onPressEnter={() => submit()} />
             </div>
             <div className='mt20'>提示信息：请插入第{key}个钥匙并输入PIN码</div>
           </div>
         </div>
 
         <div className='flex_jE mt20'>
-          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { 
+          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => submit()} />
-            if( key == '一') {
-              setKey('二');
-              setPin('')
-            }else {
-              initData()
-              // 登录成功进入系统
-              history.push('/teamViewer/paramsSetting')
-            }
-          }} />
           <ButtonComp type="cancel" text={'退出'} onClick={() => initData()} />
         </div>
       </Modal>

src/pages/InitialSystem/DeviceInstall/index.less

@@ -0,0 +1,32 @@
+.con_warp {
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  background-color: #fff;
+  font-size: 14px;
+  margin: 20px;
+
+  .title1 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #191919;
+  }
+
+  .title2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    margin: 20px 0 30px 0;
+  }
+
+  .flex {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    
+    div:nth-child(1) {
+      width: 80px;
+      text-align: right;
+      margin-right: 16px;
+    }
+  }
+}

src/pages/InitialSystem/DeviceInstall/index.tsx

@@ -0,0 +1,45 @@
+import { FC, useEffect, useState } from 'react';
+import styles from './index.less';
+import { Input } from 'antd';
+import ButtonComp from '@/components/ButtonComp';
+
+interface PageProps {
+}
+
+const DeviceInstall: FC<PageProps> = ({ }) => {
+
+  return (
+    <div className={styles.con_warp}>
+      <div style={{ padding: 30 }}>
+        <div className={styles.title1}>操作说明</div>
+        <div className={styles.title2}>请选取初装数据文件夹下的任一文件进行数据加载。点击“数据安装”对密码机进行初装。</div>
+        <div className={styles.flex}>
+          <div>初装密钥</div>
+          <Input/>
+        </div>
+        <div className={styles.flex}>
+          <div>算法参数</div>
+          <Input/>
+        </div>
+        <div className={styles.flex}>
+          <div>参数自检码</div>
+          <Input/>
+        </div>
+
+        <div className='flex_jE' style={{ margin: '30px 0' }}>
+          <ButtonComp style={{ marginRight: 20 }} text={'数据加载'} onClick={() => {}} />
+          <ButtonComp text={'数据安装'} onClick={() =>{}} />
+        </div>
+
+        <div className={styles.title1}>出装盘信息</div>
+        <div className='mt30 mb30'>设备名称：{'--'}</div>
+        <div style={{display: 'flex'}}>
+          <div style={{marginRight: 50}}>初装盘号：{'--'}</div>
+          <div>版本号：{'--'}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DeviceInstall

src/pages/InitialSystem/PowerOnAuth/index.less

@@ -0,0 +1,32 @@
+.con_warp {
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  background-color: #fff;
+  font-size: 14px;
+  margin: 20px;
+
+  .title1 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #191919;
+  }
+
+  .title2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    margin: 20px 0 30px 0;
+  }
+
+  .flex {
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+    
+    div:nth-child(1) {
+      width: 80px;
+      text-align: left;
+      margin-right: 50px;
+    }
+  }
+}

src/pages/InitialSystem/PowerOnAuth/index.tsx

@@ -0,0 +1,57 @@
+import { FC, useEffect, useState } from 'react';
+import styles from './index.less';
+
+interface PageProps {
+}
+
+const PowerOnAuth: FC<PageProps> = ({ }) => {
+
+  return (
+    <div className={styles.con_warp}>
+      <div style={{ padding: 30 }}>
+        <div className={styles.title1}>设备状态</div>
+        <div className='mt30 mb30'>本机编号：{'--'}</div>
+        <div className='mt30 mb30' style={{ display: 'flex' }}>
+          <div style={{ marginRight: 150 }}>开机状态：{'--'}</div>
+          <div>初装盘号：{'--'}</div>
+        </div>
+        <div style={{ display: 'flex', marginBottom: 40 }}>
+          <div style={{ marginRight: 150 }}>固件版本：{'--'}</div>
+          <div>初装时间：{'--'}</div>
+        </div>
+
+        <div className={styles.title1}>密钥状态</div>
+        <div className={styles.flex}>
+          <div>系统间通信</div>
+          <div>
+            <div className='mb30'>第一区{'--'}</div>
+            <div>第二区{'--'}</div>
+          </div>
+        </div>
+        <div className={styles.flex}>
+          <div>VPN间通信</div>
+          <div>
+            <div className='mb30'>第一区{'--'}</div>
+            <div>第二区{'--'}</div>
+          </div>
+        </div>
+        <div className={styles.flex}>
+          <div>与专核设备</div>
+          <div>
+            <div className='mb30'>第一区{'--'}</div>
+            <div>第二区{'--'}</div>
+          </div>
+        </div>
+        <div className={styles.flex}>
+          <div>与普密设备</div>
+          <div>
+            <div className='mb30'>第一区{'--'}</div>
+            <div>第二区{'--'}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PowerOnAuth

src/pages/InitialSystem/index.less

@@ -0,0 +1,119 @@
+.initial_warp {
+  width: 100vw;
+  min-height: 100vh;
+
+  .header_warp {
+    height: 56px;
+    background: linear-gradient(180deg, #6DCFEA 0%, #3BA1CF 100%);
+    box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, 0.5);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    font-size: 16px;
+    font-weight: 600;
+    color: #FFFFFF;
+
+    letter-spacing: 1px;
+  }
+
+  .main_warp {
+    width: 100%;
+    height: calc(100vh - 58px);
+    min-height: 600px;
+    display: flex;
+  }
+
+  .nav_title {
+    height: 32px;
+    background: #3EA4D1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  .left_menu {
+    width: 260px;
+    height: 100%;
+    min-height: calc(100vh - 58px);
+    background: #fff;
+    border-right: 1px solid #D8D8D8;
+    overflow: hidden;
+    overflow-y: auto;
+    user-select: none;
+  }
+
+  .right_warp {
+    height: calc(100vh - 58px);
+    min-height: 600px;
+    min-width: calc(1440px - 261px);
+    width: calc(100vw - 261px);
+    background: #F1F1F1;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 0;
+  }
+
+}
+
+.start_warp {
+  position: relative;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  background-color: #fff;
+  margin: 20px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .start_title {
+    font-size: 48px;
+    font-weight: 600;
+    color: #191919;
+    margin-bottom: 60px;
+    letter-spacing: 1px;
+  }
+
+  .introduce {
+    position: absolute;
+    right: 40px;
+    bottom: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 26px;
+
+    div:nth-child(2) {
+      margin: 10px 0;
+    }
+  }
+}
+
+
+.item1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 20px 0;
+  cursor: pointer;
+}
+
+.item1_img {
+  width: 60px;
+  height: 60px;
+  background-color: saddlebrown;
+}
+
+.item1_name {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #1A374A;
+  margin-top: 6px;
+}

src/pages/InitialSystem/index.tsx

@@ -1,14 +1,89 @@
 import { FC, useEffect, useState } from 'react';
-import { history, useLocation } from "umi";
+import { history, useLocation } from 'umi';
 import styles from './index.less';
+import DeviceInstall from './DeviceInstall';
+import PowerOnAuth from './PowerOnAuth';
 
 interface PageProps { }
 
 const InitialSystem: FC<PageProps> = ({ }) => {
+  const [activeItem, setActiveItem] = useState<any>(null)
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const type = queryParams.get('type');
+  const count = queryParams.get('count');
+
+  const MenuList: any = {
+    'admin': [
+      { name: '算法加载', dom: <div>暂无内容</div>, img: '' },
+      { name: '设备初装', dom: <DeviceInstall/>, img: '' },
+      { name: '开机认证', dom: <PowerOnAuth/>, img: '' },
+      { name: '状态查询', dom: <div>暂无内容</div>, img: '' },
+      { name: '安全销毁', dom: <div>暂无内容</div>, img: '' },
+    ],
+    'test': [
+      { name: '硬件检测', dom: <div>暂无内容</div>, img: '' },
+      { name: '传输加解密', dom: <div>暂无内容</div>, img: '' },
+      { name: '存储加解密', dom: <div>暂无内容</div>, img: '' },
+      { name: '认证/验证', dom: <div>暂无内容</div>, img: '' },
+      { name: '非对称算法', dom: <div>暂无内容</div>, img: '' },
+    ]
+  }
+
+  useEffect(() => {
+    if (type && count) {
+      setActiveItem(MenuList[type][count])  
+    }
+  }, [])
+
+  const itemDom = (type: string, item: any, index: number) => {
+    return (
+      <div className={styles.item1} key={item.name} onClick={() => {
+        setActiveItem(item) 
+        history.push(`/initialSystem?type=${type}&count=${index}`)
+      }}>
+        <div className={styles.item1_img}></div>
+        <div className={styles.item1_name} style={{ color: activeItem?.name == item.name ? 'red' : '' }}>
+          {item.name}
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <div>
+    <div className={styles.initial_warp}>
-      初装系统
+      {/* 头部 */}
+      <div className={styles.header_warp}>
+        <div className='ml20'>专用核心密码机管理软件</div>
+        <div className='mr20'></div>
+      </div>
+      {/* 底部 */}
+      <div className={styles.main_warp}>
+        {/* 左侧菜单 */}
+        <div className={styles.left_menu}>
+
+          <div className={styles.nav_title}>密码机管理</div>
+          {MenuList['admin'].map((item: any, index: number) => itemDom('admin', item, index))}
+
+          <div className={styles.nav_title}>密码机测试</div>
+          {MenuList['test'].map((item: any, index: number) => itemDom('test', item, index))}
+
+        </div>
+        {/* 右侧内容 */}
+        <div className={styles.right_warp}>
+          {
+            activeItem ? activeItem.dom : 
+            <div className={styles.start_warp}>
+              <div  className={styles.start_title}>全军一体化对称密码管理系统</div>
+              <div className={styles.introduce}>
+                <div>专用核心密码机管理系统</div>
+                <div>软件当前版本：2.0.3</div>
+                <div>总参谋第XXX研究所研制</div>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
     </div>
   )
 }

src/pages/index.less

@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: #E8F7FF;
 }
 
 .item_warp {