板块修改

code/web/client/src/sections/edition/actions/index.js

@@ -41,16 +41,41 @@ export function getVersions () {
       basicAction({
          type: "get",
          dispatch: dispatch,
-         actionType: "GET_CAMREA",
+         actionType: "GET_VERSIONS",
          url: `${ApiTable.getVersions}`,
          msg: { option: "查询网关版本信息" },
          reducer: { name: "", params: { noClear: true } },
       });
 }
 
+export function deleteVersion (id) {
+   return dispatch => basicAction({
+      type: 'delete',
+      dispatch: dispatch,
+      actionType: 'DELETE_VERSION',
+      url: ApiTable.deleteVersion.replace('{versionId}', id),
+      msg: { option: '删除网关版本' },
+      reducer: { name: '' }
+   });
+}
+
+export function postVersion (data) {
+   return (dispatch) =>
+      basicAction({
+         type: "post",
+         dispatch: dispatch,
+         data,
+         actionType: "POST_VERSION",
+         url: `${ApiTable.postVersion}`,
+         msg: { option: "新增网关版本" },
+      });
+}
+
 export default {
    getVersions,
    getGateways,
    getGatewayStatus,
-   ableGateway
+   ableGateway,
+   deleteVersion,
+   postVersion,
 };

code/web/client/src/sections/edition/containers/administer.jsx

@@ -2,21 +2,29 @@
 import React, { useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
-import { Form, Button, Table, Pagination } from '@douyinfe/semi-ui';
+import { Form, Button, Table, Pagination, Modal } from '@douyinfe/semi-ui';
 import { IconLock, IconUser } from '@douyinfe/semi-icons';
+import { useState } from 'react';
 
 const EditionManage = props => {
    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
    const { edition } = actions
+   const [versionList, setVersionList] = useState([])
+   const [addVersion, setaddVersion] = useState(false)
+   const api = useRef()
 
    useEffect(() => {
+      requestData()
+   }, [])
 
+   const requestData = () => {
       dispatch(edition.getVersions()).then(res => {
          console.log(res);
+         if (res.success) {
+            setVersionList(res.payload.data)
+         }
       })
-
-
-   }, [])
+   }
 
    const columns = [
       {
@@ -25,64 +33,58 @@ const EditionManage = props => {
             return index + 1;
          },
       }, {
-         title: "Major",
-         dataIndex: "Major",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "主版本号",
+         dataIndex: "major",
+         key: "major",
       }, {
-         title: "Minor",
-         dataIndex: "Minor",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "次版本号",
+         dataIndex: "minor",
+         key: "minor",
       }, {
-         title: "Patch",
-         dataIndex: "naPatchme",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "补丁版本号",
+         dataIndex: "patch",
+         key: "patch",
       }, {
-         title: "Build",
-         dataIndex: "Build",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "构建号",
+         dataIndex: "build",
+         key: "build",
       }, {
-         title: "Type",
-         dataIndex: "Type",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "类型",
+         dataIndex: "type",
+         key: "type",
       }, {
-         title: "Desc",
-         dataIndex: "Desc",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "描述",
+         dataIndex: "desc",
+         key: "desc",
       }, {
-         title: "ImageBase",
-         dataIndex: "ImageBase",
-         render: (_, record, index) => {
-            return index + 1;
-         },
+         title: "基础镜像地址",
+         dataIndex: "imageBase",
+         key: "imageBase",
       }, {
-         title: "ImageVersion",
-         dataIndex: "ImageVersion",
-         render: (_, record, index) => {
-            return index + 1;
+         title: "镜像版本",
+         dataIndex: "imageVersion",
+         key: "imageVersion",
+         render: (_, r, index) => {
+            return <div style={{ width: 80 }}>{r.imageVersion}</div>
          },
       }, {
-         title: "CreatedAt",
-         dataIndex: "CreatedAt",
-         render: (_, record, index) => {
-            return index + 1;
+         title: "创建时间",
+         dataIndex: "createdAt",
+         key: "createdAt",
+         render: (_, r, index) => {
+            return <div style={{ width: 130 }}>{r.createdAt}</div>
          },
       }, {
          title: "操作",
          dataIndex: "operation",
-         render: (_, record, index) => {
-            return <Button>删除</Button>
+         render: (_, r, index) => {
+            return <Button onClick={() => {
+               dispatch(edition.deleteVersion(r.id)).then(res => {
+                  if (res.success) {
+                     requestData()
+                  }
+               })
+            }}>删除</Button>
          },
       },
    ]
@@ -132,17 +134,21 @@ const EditionManage = props => {
                      cursor: "pointer",
                   }}
                   onClick={() => {
-
+                     setaddVersion(true)
                   }}
                >
                   添加版本
                </div>
             </div>
          </div>
-         <div style={{ background: "#FFFFFF", marginTop: 5 }}>
+         <div style={{ width: "100%",
+               background: "#FFFFFF",
+               borderRadius: 3,
+               padding: "8px 20px",
+               marginTop: 20, }}>
             <Table
                columns={columns}
-               dataSource={[]}
+               dataSource={versionList}
                bordered={false}
                empty="暂无数据"
                style={{
@@ -150,7 +156,7 @@ const EditionManage = props => {
                }}
                pagination={false}
             />
-            <div
+            {versionList.length > 0 ? <div
                style={{
                   display: "flex",
                   justifyContent: "flex-end",
@@ -158,10 +164,10 @@ const EditionManage = props => {
                }}
             >
                <span style={{ lineHeight: "30px" }}>
-                  共{100}个设备
+                  共{versionList.length}个设备
                </span>
                <Pagination
-                  total={100}
+                  total={versionList.length}
                   showSizeChanger
                   currentPage={1}
                   pageSizeOpts={[10, 20, 30, 40]}
@@ -170,9 +176,58 @@ const EditionManage = props => {
                      // page.current = currentPage - 1
                   }}
                />
+            </div> : ""}
          </div>
-         </div>
+         <Modal
+            title='新增网关版本'
+            // okText={okText}
+            visible={addVersion}
+            onOk={() => {
+               api.current.validate().then(r => {
+                  console.log(r);
+                  dispatch(edition.postVersion({ build: 0,
+                  createdAt: "2022-12-12 10:00:00",
+                  desc: "fix温度修正",
+                  // id: 1,
+                  imageBase: "registry.cn-hangzhou.aliyuncs.com/fs-cloud/fs-edge",
+                  imageVersion: "3.22-12-30",
+                  major: 0,
+                  minor: 2,
+                  patch: 1,
+                  type: "beta"})).then(res => {
+                     if (res.success) {
+                  //       requestData()
+                  //       setaddVersion(false)
+                     }
+                  })
+               })
+            }}
+            width={610}
+            onCancel={() => setaddVersion(false)}
+         >
+            <Form
+               getFormApi={(formApi) => (api.current = formApi)}
+               layout="horizontal"
+               labelAlign="right"
+               labelWidth="90px"
+               style={{ display: 'flex', flexDirection: 'column' }}
+            >
+               <Form.Input field='major' label='主版本号:' labelPosition="left" placeholder='请输入主版本号' style={{ width: 200, marginBottom: 10 }} />
+               <Form.Input field='minor' label='次版本号:' labelPosition="left" placeholder='请输入次版本号' style={{ width: 200, marginBottom: 10 }} />
+               <Form.Input field='patch' label='补丁版本号:' labelPosition="left" placeholder='请输入补丁版本号' style={{ width: 200, marginBottom: 10 }} />
+               <Form.Input field='build' label='构建号:' labelPosition="left" placeholder='请输入构建号' style={{ width: 200, marginBottom: 10 }} />
+               <Form.Select field="type" label='Type:' labelPosition="left" placeholder='请选择类型' style={{ width: 200, marginBottom: 10 }}>
+                  <Form.Select.Option value="beta">beta</Form.Select.Option>
+                  <Form.Select.Option value="alpha">alpha</Form.Select.Option>
+                  <Form.Select.Option value="release">release</Form.Select.Option>
+                  <Form.Select.Option value="LTS">LTS</Form.Select.Option>
+               </Form.Select>
+               <Form.Input field='imageBase' label='基础镜像地址:' labelPosition="left" placeholder='请输入基础镜像地址' style={{ width: 460, marginBottom: 10 }} />
+               <Form.Input field='tmageVersion' label='镜像版本:' labelPosition="left" placeholder='请输入镜像版本' style={{ width: 200, marginBottom: 10 }} />
+               <Form.TextArea field='desc' label='描述:' labelPosition="left" placeholder='请输入描述' style={{ width: 460 }} />
 
+            </Form>
+         </Modal>
       </>
    );
 }

code/web/client/src/sections/edition/containers/gateway.jsx

@@ -115,7 +115,62 @@ const GatewayManage = props => {
         }
     ];
     return (
-        <div style={{}}>
+      <>
+       <div>
+            <video
+               id="gatewayBanner"
+               autoPlay
+               loop
+               muted
+               style={{ width: "100%", objectFit: "cover", height: 171 }}
+               src="/assets/videos/gateway_banner.mp4"
+               type="video/mp4"
+            />
+            <div style={{ position: "absolute", top: 12 }}>
+               <div
+                  style={{
+                     fontSize: 22,
+                     paddingTop: 15,
+                     marginLeft: 21,
+                  }}
+               >
+                  设备管理
+               </div>
+               <div
+                  style={{
+                     fontSize: 14,
+                     paddingTop: 18,
+                     marginLeft: 20,
+                  }}
+               >
+                  对NVR（网络硬盘录像机）设备节点的管理
+               </div>
+               <div
+                  style={{
+                     fontSize: 14,
+                     marginTop: 28,
+                     marginLeft: 21,
+                     width: 89,
+                     height: 32,
+                     lineHeight: "32px",
+                     textAlign: "center",
+                     backgroundColor: "#D9EAFF",
+                     color: "#1859C1",
+                     cursor: "pointer",
+                  }}
+                  onClick={() => {
+                     
+                  }}
+               >
+                新增设备
+               </div>
+            </div>
+         </div>
+       <div style={{ width: "100%",
+               background: "#FFFFFF",
+               borderRadius: 3,
+               padding: "8px 20px",
+               marginTop: 20,}}>
             <Skeleton
                 loading={false}
                 active={true}
@@ -155,6 +210,8 @@ const GatewayManage = props => {
                     dataToModal={dataToModal} /> : ''
             }
         </div>
+      </>
+        
     );
 }
 

code/web/client/src/utils/webapi.js

@@ -10,6 +10,8 @@ export const ApiTable = {
    getGatewayStatus: 'v1/edge/{id}/metrics',
 
    getVersions: 'v1/versions',    //查询网关版本信息
+   deleteVersion: 'v1/version/{versionId}',  //删除网关版本
+   postVersion: 'v1/version',   //新增网关版本
 };
 
 export const RouteTable = {