Browse Source

板块修改

master
wenlele 2 years ago
parent
commit
e127b2f8e8
  1. BIN
      code/web/client/assets/videos/gateway_banner.mp4
  2. 29
      code/web/client/src/sections/edition/actions/index.js
  3. 167
      code/web/client/src/sections/edition/containers/administer.jsx
  4. 59
      code/web/client/src/sections/edition/containers/gateway.jsx
  5. 2
      code/web/client/src/utils/webapi.js

BIN
code/web/client/assets/videos/gateway_banner.mp4

Binary file not shown.

29
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,
};

167
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>
</>
);
}

59
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>
</>
);
}

2
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 = {

Loading…
Cancel
Save