Browse Source

(*) 网关界面配置

master
yinweiwen 2 years ago
parent
commit
b3f2d67e0a
  1. 28
      code/web/client/assets/color.less
  2. 17
      code/web/client/src/sections/gateway/actions/gateway.js
  3. 123
      code/web/client/src/sections/gateway/containers/ConfigModal.js
  4. 20
      code/web/client/src/sections/gateway/containers/Gateway.js
  5. 4
      code/web/client/src/sections/gateway/containers/models.js
  6. 7
      code/web/client/src/utils/webapi.js
  7. 2
      code/web/package.json

28
code/web/client/assets/color.less

@ -174,7 +174,7 @@ button::-moz-focus-inner,
[type='submit']::-moz-focus-inner {border-style: none;}
fieldset {border: 0;}
legend {color: inherit;}
mark {background-color: #feffe6;}
mark {background-color: color(~`colorPalette("@{table-header-sort-active-bg}", 2)`);}
::selection {color: #fff;background: @primary-color;}
.anticon {color: inherit;}
.ant-fade-enter, .ant-fade-appear {animation-fill-mode: both;}
@ -1147,10 +1147,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.ant-mentions-dropdown-menu-item-active {background-color: @item-hover-bg;}
.ant-menu-item-danger.ant-menu-item {color: #ff4d4f;}
.ant-menu-item-danger.ant-menu-item:hover, .ant-menu-item-danger.ant-menu-item-active {color: #ff4d4f;}
.ant-menu-item-danger.ant-menu-item:active {background: #fff1f0;}
.ant-menu-item-danger.ant-menu-item:active {background: color(~`colorPalette("@{alert-info-border-color}", 4)`);}
.ant-menu-item-danger.ant-menu-item-selected {color: #ff4d4f;}
.ant-menu-item-danger.ant-menu-item-selected > a, .ant-menu-item-danger.ant-menu-item-selected > a:hover {color: #ff4d4f;}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: #fff1f0;}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: color(~`colorPalette("@{alert-info-border-color}", 4)`);}
.ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {border-right-color: #ff4d4f;}
.ant-menu-dark .ant-menu-item-danger.ant-menu-item, .ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {color: #ff4d4f;}
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {color: #fff;background-color: #ff4d4f;}
@ -1727,31 +1727,31 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
.ant-tag-checkable:active, .ant-tag-checkable-checked {color: #fff;}
.ant-tag-checkable-checked {background-color: @primary-color;}
.ant-tag-checkable:active {background-color: color(~`colorPalette("@{primary-color}", 7)`);}
.ant-tag-pink {color: #c41d7f;background: color(~`colorPalette("@{alert-warning-border-color}", 1)`);border-color: #ffadd2;}
.ant-tag-pink {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;}
.ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-magenta {color: #c41d7f;background: color(~`colorPalette("@{alert-warning-border-color}", 1)`);border-color: #ffadd2;}
.ant-tag-magenta {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;}
.ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-red {color: #cf1322;background: #fff1f0;border-color: #ffa39e;}
.ant-tag-red {color: #cf1322;background: color(~`colorPalette("@{alert-info-border-color}", 4)`);border-color: #ffa39e;}
.ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
.ant-tag-volcano {color: #d4380d;background: #fff2e8;border-color: #ffbb96;}
.ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
.ant-tag-orange {color: #d46b08;background: color(~`colorPalette("@{shadow-color}", 1)`);border-color: #ffd591;}
.ant-tag-orange {color: #d46b08;background: #fff7e6;border-color: #ffd591;}
.ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;}
.ant-tag-yellow {color: #d4b106;background: #feffe6;border-color: #fffb8f;}
.ant-tag-yellow {color: #d4b106;background: color(~`colorPalette("@{table-header-sort-active-bg}", 2)`);border-color: #fffb8f;}
.ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;}
.ant-tag-gold {color: #d48806;background: color(~`colorPalette("@{btn-shadow}", 1)`);border-color: #ffe58f;}
.ant-tag-gold {color: #d48806;background: #fffbe6;border-color: #ffe58f;}
.ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}
.ant-tag-cyan {color: #08979c;background: #e6fffb;border-color: #87e8de;}
.ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;}
.ant-tag-lime {color: #7cb305;background: color(~`colorPalette("@{dropdown-menu-submenu-disabled-bg}", 1)`);border-color: #eaff8f;}
.ant-tag-lime {color: #7cb305;background: #fcffe6;border-color: #eaff8f;}
.ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;}
.ant-tag-green {color: #389e0d;background: #f6ffed;border-color: #b7eb8f;}
.ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
.ant-tag-blue {color: #096dd9;background: color(~`colorPalette("@{transfer-item-hover-bg}", 1)`);border-color: #91d5ff;}
.ant-tag-blue {color: #096dd9;background: #e6f7ff;border-color: #91d5ff;}
.ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{badge-text-color}", 1)`);border-color: #adc6ff;}
.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{slider-rail-background-color-hover}", 1)`);border-color: #adc6ff;}
.ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{table-header-sort-bg}", 2)`);border-color: #d3adf7;}
.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{shadow-color-inverse}", 1)`);border-color: #d3adf7;}
.ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}
.ant-tag-success {color: #52c41a;background: @success-color-deprecated-bg;border-color: @success-color-deprecated-border;}
.ant-tag-processing {color: @primary-color;background: @info-color-deprecated-bg;border-color: @info-color-deprecated-border;}
@ -1988,7 +1988,7 @@ a.ant-typography.ant-typography-disabled:hover, .ant-typography a.ant-typography
.ant-upload-list-picture .ant-upload-list-item-error, .ant-upload-list-picture-card .ant-upload-list-item-error {border-color: #ff4d4f;}
.ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info, .ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info {background: transparent;}
.ant-upload-list-picture .ant-upload-list-item-uploading, .ant-upload-list-picture-card .ant-upload-list-item-uploading {border-style: dashed;}
.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='color(~`colorPalette("@{transfer-item-hover-bg}", 1)`)'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='color(~`colorPalette("@{transfer-item-hover-bg}", 1)`)'] {fill: @error-color-deprecated-bg;}
.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#e6f7ff'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#e6f7ff'] {fill: @error-color-deprecated-bg;}
.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'] {fill: #ff4d4f;}
.ant-upload-list-picture-card .ant-upload-list-item-info::before {background-color: rgba(0, 0, 0, 0.5);}
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {color: rgba(255, 255, 255, 0.85);}

17
code/web/client/src/sections/gateway/actions/gateway.js

@ -15,6 +15,17 @@ export function list(query) {
})
}
export function getProtocols() {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_GATEWAY_PROTOCOLS',
url: ApiTable.getGatewayProtocols,
msg: { error: '获取网关协议类型失败' },
reducer: { name: 'gatewayProtocols' }
})
}
export function add(data) {
return dispatch => basicAction({
type: 'post',
@ -26,13 +37,13 @@ export function add(data) {
})
}
export function edit(data, gatewayId) {
export function edit(data) {
return dispatch => basicAction({
type: 'put',
type: 'post',
dispatch: dispatch,
data: data,
actionType: 'EDIT_GATEWAY_CONFIG',
url: `${ApiTable.editGatewayConfig.replace('{gatewayId}', gatewayId)}`,
url: `${ApiTable.editGatewayConfig}`,
msg: { option: '编辑网关配置' }
})
}

123
code/web/client/src/sections/gateway/containers/ConfigModal.js

@ -1,13 +1,45 @@
import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Modal, Form, Switch } from 'antd';
import ProForm, { ProFormText, ProFormSelect, ProFormDateTimePicker } from '@ant-design/pro-form';
import { Spin, Select, Divider, Space, Button, Modal, Input, Form, Switch, AutoComplete } from 'antd';
import ProForm, { ProFormText, ProFormSelect, ProFormTextArea } from '@ant-design/pro-form';
import { useState } from 'react';
import { InMode, OutMode, ProtocolTypes } from './models';
import { PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
const ConfigModal = (props) => {
const { dispatch, actions, visible, close, editData, types, catalogs } = props
const { dispatch, actions, visible, close, editData } = props
const formRef = useRef()
const inputRef = useRef()
const { gateway } = actions
const [protocols, setProtocols] = useState([])
const [newProtocol, setNewProtocol] = useState('')
useEffect(() => {
setProtocols([]);
dispatch(gateway.getProtocols()).then(res => {
if (res.success) {
setProtocols(res.payload.data.sort())
}
})
}, [])
const onNewProtocolChange = (e) => {
setNewProtocol(e.target.value)
}
const addNewProtocol = (e) => {
e.preventDefault();
setProtocols([...protocols, newProtocol])
setNewProtocol('');
setTimeout(()=>{
inputRef.current?.focus();
})
}
const batchAdd=(v)=>{
}
return <Modal
title={`${editData ? '编辑' : '新增'}配置`}
@ -15,7 +47,14 @@ const ConfigModal = (props) => {
onOk={() => {
formRef.current.validateFields()
.then(v => {
dispatch(editData ? gateway.edit(v, editData.id) : gateway.add(v))
v.id = editData?.id;
if (!v.in_config) {
v.in_config = '{}'
}
if (!v.out_config) {
v.out_config = '{}'
}
dispatch(editData ? gateway.edit([v]) : gateway.add([v]))
.then(res => {
if (res.success) {
dispatch(gateway.list())
@ -31,55 +70,75 @@ const ConfigModal = (props) => {
<ProForm
formRef={formRef}
autoFocusFirstInput
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
Layout={'vertical'}
initialValues={
editData ?
editData :
{
excuteTime: '00:00',
isEnable: true
in_mode: InMode[0],
out_mode: OutMode[0],
protocol: ProtocolTypes[0],
}
}
submitter={false}
formKey='config-form'
grid={true}
>
<ProFormText
label="任务名称"
name={'name'}
placeholder="请输入名称"
required
rules={[{ required: true, message: '请输入名称' }]}
/>
<ProFormText name="name" label="名称" tooltip="最长为 24 位" placeholder="请输入名称" rules={[{ required: true, message: '请输入名称' }]} />
<ProFormSelect
options={catalogs}
cacheForSwr
name="catalog"
label="分类"
required
rules={[{ required: true, message: '请选择任务分类' }]}
colProps={{ span: 12 }}
label="输入模式"
name="in_mode"
valueEnum={InMode}
/>
<ProFormSelect
options={types}
cacheForSwr
name="type"
label="类型"
required
rules={[{ required: true, message: '请选择任务类型' }]}
colProps={{ span: 12 }}
label="输出模式"
name="out_mode"
valueEnum={OutMode}
/>
<ProFormTextArea colProps={{ span: 24 }} name="in_config" label="输入配置" />
<ProFormTextArea colProps={{ span: 24 }} name="out_config" label="输出配置" />
<Form.Item name="protocol" label="协议" rules={[{ required: true }]}>
<Select
style={{ width: 300 }}
placeholder="选择协议"
dropdownRender={menu => (
<>
{menu}
<Divider style={{ margin: '8px 0' }} />
<Space style={{ padding: '0 8px 4px' }}>
<Input
placeholder="输入新增协议名"
ref={inputRef}
value={newProtocol}
onChange={onNewProtocolChange}
/>
<ProFormDateTimePicker
label="截止日期"
name="deadlineAt"
<Button type="text" icon={<PlusOutlined />} onClick={addNewProtocol}>
添加项
</Button>
</Space>
</>
)}
>
{protocols.map(item => (
<Option key={item}>{item}</Option>
))}
</Select>
</Form.Item>
<ProFormTextArea colProps={{ span: 24 }}
name="protocol_info" label="协议信息"
/>
</ProForm>
</Modal>
}
function mapStateToProps(state) {
const { auth, global, } = state;
const { auth, global } = state;
return {
user: auth.user,
actions: global.actions
actions: global.actions,
};
}

20
code/web/client/src/sections/gateway/containers/Gateway.js

@ -4,22 +4,16 @@ import { Spin,Button, Card, Input } from 'antd';
import '../style.less';
import { push } from 'react-router-redux'
import ProTable, { TableDropdown } from '@ant-design/pro-table';
const GatewayMode = ["tcp", "udp", "mqtt", "http", "dtu"]
const InMode = GatewayMode
const OutMode = GatewayMode
const ProtocolTypes = ["DeviceA", "DeviceB", "DeviceC", "DeviceD"]
import { InMode, OutMode, ProtocolTypes } from './models';
import ConfigModal from './ConfigModal';
const Gateway = (props) => {
const { dispatch, actions, user, loading, gateways } = props
const { dispatch, actions, user, loading, gateways, total } = props
const { gateway } = actions;
const [configModalVis, setConfigModalVis] = useState(false)
const [editData, setEditData] = useState(null)
useEffect(() => {
// dispatch(task.getTaskList())
}, [])
@ -97,7 +91,7 @@ const Gateway = (props) => {
const res = await dispatch(gateway.list(query));
return {
...res,
total: res.payload.data ? res.payload.data.count : 0
total: res.payload.data ? res.payload.data.total : 0
}
}}
options={false}
@ -125,10 +119,12 @@ const Gateway = (props) => {
}
function mapStateToProps(state) {
const { auth, global } = state;
const { auth, global, gateways } = state;
return {
user: auth.user,
actions: global.actions
actions: global.actions,
loading: gateways.isRequesting,
gateways: gateways.data?.data ?? [],
};
}

4
code/web/client/src/sections/gateway/containers/models.js

@ -0,0 +1,4 @@
const GatewayMode = ["tcp", "udp", "mqtt", "http", "dtu"]
export const InMode = GatewayMode
export const OutMode = GatewayMode
export const ProtocolTypes = ["DeviceA", "DeviceB", "DeviceC", "DeviceD"]

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

@ -10,11 +10,12 @@ export const ApiTable = {
search: 'v1/search/{wd}',
//网关配置
getGateways: 'gateway/list',
addGatewayConfig: 'gateway',
getGateways: 'v1/deviceProxy/query',
addGatewayConfig: 'v1/deviceProxy/add',
editGatewayConfig: 'v1/deviceProxy/update',
getGatewayConfig: 'gateway/{gatewayId}',
editGatewayConfig: 'gateway/{gatewayId}',
delGatewayConfig: 'gateway/{gatewayId}',
getGatewayProtocols: 'v1/deviceProxy/protocols',
getEnterprisesMembers: 'enterprises/{enterpriseId}/members',
};

2
code/web/package.json

@ -6,7 +6,7 @@
"scripts": {
"test": "mocha",
"start": "cross-env NODE_ENV=development npm run start-params",
"start-params": "npm run color && node server -p 5000 -u http://127.0.0.1:4100",
"start-params": "npm run color && node server -p 5000 -u http://127.0.0.1:4101",
"deploy": "export NODE_ENV=production&&npm run color && npm run build && node server",
"build-dev": "export NODE_ENV=development&&webpack --config webpack.config.js",
"build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js",

Loading…
Cancel
Save