搜索

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

@@ -116,6 +116,31 @@ export function restartGateway(id) {
         msg: { option: '重启网关服务' },
     });
 }
+
+
+export function postedge(data) {
+   return (dispatch) =>
+       basicAction({
+           type: "post",
+           dispatch: dispatch,
+           data,
+           actionType: "POST_EDGE",
+           url: `${ApiTable.postedge}`,
+           msg: { option: "新增网关" },
+       });
+}
+
+export function putedge(id, data) {
+   return dispatch => basicAction({
+       type: 'put',
+       data: data,
+       dispatch: dispatch,
+       actionType: 'PUT_EDGE',
+       url: ApiTable.putedge.replace('{edgeId}', id),
+       msg: { option: '修改网关' },
+   });
+}
+
 export default {
     getGateways,
     getGatewayStatus,
@@ -127,4 +152,6 @@ export default {
     getVersions,
     deleteVersion,
     postVersion,
+    postedge,
+    putedge,
 };

code/web/client/src/sections/edition/components/addModel.jsx

@@ -0,0 +1,187 @@
+'use strict';
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
+import { Popconfirm, Button, Popover, Skeleton, Form, Tag, Modal, Collapse, Input } from '@douyinfe/semi-ui';
+import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons';
+import { SkeletonScreen } from "$components";
+
+const AddModel = props => {
+   const { dispatch, user, error, actions, close, dataToModal, editionData } = props
+   const { edition } = actions
+   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
+   const [limits, setLimits] = useState()//每页实际条数
+   const [detailV, setDetailV] = useState(false)
+   const [property, setProperty] = useState([{ key: 'hb', value: 'ture' }])
+   const [attributeValue, setattributeValue] = useState({})
+   const api = useRef()
+
+   useEffect(() => {
+      if (dataToModal?.properties) {
+         let data = []
+         for (let k in dataToModal?.properties) {
+            data.push({ key: k, value: dataToModal?.properties[k] })
+         }
+         setProperty(data)
+      }
+   }, [])
+
+   useEffect(() => {
+      let data = {}
+      property?.map(v => {
+         if (v.key) {
+            data[v.key] = v.value
+         }
+      })
+      setattributeValue(data)
+   }, [property])
+
+   return (
+      <>
+         <Modal
+            title={dataToModal?.id ? '修改网关' : '新增网关'}
+            // okText={okText}
+            visible={true}
+            onOk={() => {
+               api.current.validate().then(r => {
+                  // console.log(r);
+                  r.properties = JSON.stringify(attributeValue)
+                  if (dataToModal?.id) {
+                     dispatch(edition.putedge(dataToModal?.id, r)).then(res => {
+                        console.log(res)
+                        if (res.success) {
+                           close()
+                        }
+                     })
+                  } else {
+                     dispatch(edition.postedge(r)).then(res => {
+                        // console.log(res);
+                        if (res.success) {
+                           close()
+                        }
+                     })
+                  }
+
+               })
+            }}
+            width={500}
+            onCancel={() => close()}
+         >
+            <Form
+               getFormApi={(formApi) => (api.current = formApi)}
+               layout="horizontal"
+               labelAlign="right"
+               labelWidth="114px"
+               style={{ display: 'flex', flexDirection: 'column' }}
+            >
+               <Form.Input
+                  field='serialNo'
+                  label='设备序列号:'
+                  labelPosition="left"
+                  hideButtons={true}
+                  placeholder='请输入设备序列号'
+                  style={{ width: 240, marginBottom: 12 }}
+                  initValue={dataToModal?.serialNo || ''}
+                  disabled={dataToModal?.id ? true : false}
+                  rules={[{ required: true, message: "请输入设备序列号" }, { pattern: "^[a-zA-Z0-9]{4,20}$", message: "必须4~20位数字或字母" },]}
+               />
+               <Form.Input
+                  field='name'
+                  label='设备名称:'
+                  labelPosition="left"
+                  hideButtons={true}
+                  placeholder='请输入设备名称'
+                  style={{ width: 240, marginBottom: 12 }}
+                  initValue={dataToModal?.name || ''}
+                  rules={[{ required: true, message: "请输入设备名称" }]}
+               />
+               {/* <Form.Input
+                  field='properties'
+                  label='设备属性:'
+                  labelPosition="left"
+                  hideButtons={true}
+                  placeholder='请输入设备属性'
+                  style={{ width: 240, marginBottom: 12 }}
+                  initValue={JSON.stringify(dataToModal?.properties) || ''}
+               // rules={[{ required: true, message: "请输入设备属性" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
+               /> */}
+               <Form.Input
+                  field='hardwareName' label='硬件信息:'
+                  labelPosition="left"
+                  hideButtons={true}
+                  placeholder='请输入硬件信息'
+                  style={{ width: 240, marginBottom: 12 }}
+                  initValue={dataToModal?.hardwareName || ''}
+               // rules={[{ required: true, message: "请输入硬件信息" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
+               />
+               <Form.Select
+                  field="softwareVer"
+                  label='软件信息:'
+                  labelPosition="left"
+                  placeholder='请选择软件版本'
+                  style={{ width: 240, marginBottom: 12 }}
+                  initValue={dataToModal?.softwareVer || ''}
+               // rules={[{ required: true, message: "请选择软件版本" }]}
+               >
+                  {editionData?.map((v, i) => <Form.Select.Option key={'softwareVer' + i} value={v}>{v}</Form.Select.Option>)}
+               </Form.Select>
+               <div style={{ display: 'flex', marginBottom: 12 }}>
+                  <div style={{ width: 114, height: 44, padding: '6px 16px 6px 0', textIndent: 38, fontWeight: 600, color: 'var(--semi-color-text-0)', fontSize: 14 }}>设备属性:</div>
+                  <Collapse style={{ width: 270, background: 'var(--semi-color-fill-0)' }}>
+                     <Collapse.Panel header={<div style={{ width: 260, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{JSON.stringify(attributeValue)}</div>} itemKey="1">
+                        <div style={{ background: 'white', paddingBottom: 10, position: 'relative' }}>
+                           <div style={{ display: 'flex', marginBottom: 10 }}>
+                              <div style={{ width: 104, fontWeight: 600, marginLeft: 6 }}>key:</div>
+                              <div style={{ width: 94, fontWeight: 600, }}>value:</div>
+                           </div>
+                           {property?.map((v, i) =>
+                              <div key={'properties' + i} style={{ marginBottom: 10 }}>
+                                 <Input value={v.key} style={{ width: 90, marginLeft: 6 }}
+                                    onChange={e => {
+                                       console.log(e);
+                                       property?.splice(i, 1, { key: e, value: v.value })
+                                       setProperty([...property])
+                                    }}
+                                 /> --
+                                 <Input value={v.value} style={{ width: 90 }}
+                                    onChange={e => {
+                                       property?.splice(i, 1, { key: v.key, value: e })
+                                       setProperty([...property])
+                                    }}
+                                 />
+                                 {property?.length > 1 ? <IconMinusCircle onClick={() => {
+                                    console.log(i);
+                                    console.log(property);
+                                    property?.splice(i, 1)
+                                    setProperty([...property])
+                                 }} /> : ""}
+                              </div>)}
+                           <IconPlusCircle style={{ position: 'absolute', bottom: 0, right: 0 }}
+                              onClick={() => {
+                                 setProperty([...property, { key: '', value: '' }])
+                              }}
+                           />
+                        </div>
+
+                     </Collapse.Panel>
+                  </Collapse>
+               </div>
+            </Form>
+         </Modal>
+      </>
+
+   );
+}
+
+function mapStateToProps (state) {
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      error: auth.error,
+      actions: global.actions,
+      apiRoot: global.apiRoot,
+      isRequesting: auth.isRequesting
+   }
+}
+
+export default connect(mapStateToProps)(AddModel);

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

@@ -12,6 +12,7 @@ const EditionManage = props => {
    const { edition } = actions
    const [versionList, setVersionList] = useState([])
    const [addVersion, setaddVersion] = useState(false)
+   const [query, setQuery] = useState({ page: 1, pageSize: 10 })
    const api = useRef()
 
    useEffect(() => {
@@ -20,7 +21,6 @@ const EditionManage = props => {
 
    const requestData = () => {
       dispatch(edition.getVersions()).then(res => {
-         console.log(res);
          if (res.success) {
             setVersionList(res.payload.data)
          }
@@ -80,9 +80,14 @@ const EditionManage = props => {
          dataIndex: "operation",
          render: (_, r, index) => {
             return <Button onClick={() => {
+               let volume = versionList?.slice((query?.page - 1) * query?.pageSize, query?.page * query?.pageSize) || []
                dispatch(edition.deleteVersion(r.id)).then(res => {
                   if (res.success) {
                      requestData()
+                     if (versionList?.length < (query?.limit + 1) || tableData?.length > 1) {
+                     } else {
+                        setQuery({ ...query, page: query?.page - 1 })
+                     }
                   }
                })
             }}>删除</Button>
@@ -151,7 +156,7 @@ const EditionManage = props => {
          }}>
             <Table
                columns={columns}
-               dataSource={versionList}
+               dataSource={versionList?.slice((query?.page - 1) * query?.pageSize, query?.page * query?.pageSize) || []}
                bordered={false}
                empty="暂无数据"
                style={{
@@ -172,11 +177,10 @@ const EditionManage = props => {
                <Pagination
                   total={versionList.length}
                   showSizeChanger
-                  currentPage={1}
+                  currentPage={query?.page}
                   pageSizeOpts={[10, 20, 30, 40]}
                   onChange={(currentPage, pageSize) => {
-                     // setQuery({ limit: pageSize, page: currentPage - 1 });
+                     setQuery({ pageSize: pageSize, page: currentPage });
-                     // page.current = currentPage - 1
                   }}
                />
             </div> : ""}
@@ -196,6 +200,7 @@ const EditionManage = props => {
                   dispatch(edition.postVersion({ ...r, createdAt: moment().format("YYYY-MM-DD HH:MM:SS") })).then(res => {
                      if (res.success) {
                         requestData()
+                        setQuery({ limit: 10, page: 1 })
                         setaddVersion(false)
                      }
                   })

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

@@ -2,28 +2,38 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
-import { Popconfirm, Button, Popover, Skeleton, Table, Tag } from '@douyinfe/semi-ui';
+import { Popconfirm, Button, Popover, Skeleton, Table, Tag, Input, Pagination } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
 import { SkeletonScreen } from "$components";
 import GatewayStatusModal from './gatewayStatusModal'
-import GatewayModal from './gatewayModal'
+import AddModel from '../components/addModel'
 
 const GatewayManage = props => {
    const { dispatch, user, error, actions } = props
    const { edition } = actions;
    const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
    const [tableData, setTableData] = useState([]);
-    const [limits, setLimits] = useState()//每页实际条数
+   const [limits, setLimits] = useState(0)//每页实际条数
    const [detailV, setDetailV] = useState(false)
    const [dataToModal, setDataToModal] = useState(null)
-    const [deviceModalV, setDeviceModalV] = useState(false)
+   const [addModel, setAddModel] = useState(false)
+   const [editionData, setEditionData] = useState([])
+   const [searchValue, setSearchValue] = useState('')
+
 
    useEffect(() => {
       getTableData(query)
+      dispatch(edition.getVersions()).then(res => {
+         if (res.success) {
+            let data = res.payload.data?.map(r => r.imageVersion)
+            setEditionData(data)
+         }
+      })
    }, [])
 
    const getTableData = (obj) => {
-        let { limit, page } = obj
+      let { limit, page, name } = obj
-        let queryObj = { limit, offset: limit * page }
+      let queryObj = { limit, offset: limit * page, name }
       dispatch(edition.getGateways(queryObj)).then(res => {//查询网关列表
          if (res.success) {
             setTableData(res.payload.data.data);
@@ -90,10 +100,11 @@ const GatewayManage = props => {
          dataIndex: "action",
          key: "action",
          render: (text, record) => {
-                return <div>
+            return <div style={{ width: 168 }}>
                <Popconfirm
                   title="提示"
-                        content={`确认${record.enabled ? '禁用' : '启用'}该网关？`}
+                  position='leftBottom'
+                  content={<div style={{ width: 150 }}>确认{record.enabled ? '禁用' : '启用'}该网关？</div>}
                   onConfirm={() => {
                      ableDevice(record.id, !record.enabled)
                   }}>
@@ -101,17 +112,23 @@ const GatewayManage = props => {
                </Popconfirm>
 
                <a style={{ ...aStyle, marginLeft: 15 }} onClick={() => {
-                        setDeviceModalV(true)
+                  setAddModel(true)
-                        setDataToModal(record)
+                  setDataToModal(record || {})
                }}>编辑</a>
 
                <Popconfirm
                   title="提示"
-                        content={`确认删除该网关？`}
+                  position='leftBottom'
+                  content={<div style={{ width: 150 }}>确认删除该网关？</div>}
                   onConfirm={() => {
                      dispatch(edition.delGateway(record.id)).then(r => {
                         if (r.success) {
-                                    getTableData(query)
+                           if (limits < (query?.limit + 1) || tableData?.length > 1) {
+                              getTableData({ ...query, name: searchValue })
+                           } else {
+                              getTableData({ ...query, page: query?.page - 1 })
+                              setQuery({ ...query, page: query?.page - 1, name: searchValue })
+                           }
                         }
                      })
                   }}>
@@ -148,7 +165,7 @@ const GatewayManage = props => {
             onConfirm={() => {
                dispatch(edition.rebootGateway(record.id)).then(r => {
                   if (r.success) {
-                            getTableData(query)
+                     getTableData({ ...query, name: searchValue })
                   }
                })
             }}>
@@ -161,7 +178,7 @@ const GatewayManage = props => {
             onConfirm={() => {
                dispatch(edition.restartGateway(record.id)).then(r => {
                   if (r.success) {
-                            getTableData(query)
+                     getTableData({ ...query, name: searchValue })
                   }
                })
             }}>
@@ -215,7 +232,7 @@ const GatewayManage = props => {
                      cursor: "pointer",
                   }}
                   onClick={() => {
-                            setDeviceModalV(true)
+                     setAddModel(true)
                   }}
                >
                   新增网关
@@ -229,6 +246,30 @@ const GatewayManage = props => {
             padding: "8px 20px",
             marginTop: 20,
          }}>
+            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
+               名称：
+               <Input
+                  style={{ width: 200 }}
+                  placeholder='请输入名称关键字'
+                  onEnterPress={(e) => {
+                     console.log(e.target.value)
+                     getTableData({ limit: 10, page: 0, name: e.target.value })
+                     setQuery({ limit: 10, page: 0 })
+                  }}
+                  onChange={e => {
+                     setSearchValue(e)
+                  }}
+                  showClear>
+               </Input>
+               <Button
+                  style={{ marginLeft: 20, width: 60, height: 32, borderRadius: 3, backgroundColor: '#0b57dcb3' }}
+                  theme="solid"
+                  type="primary"
+                  onClick={() => {
+                     getTableData({ limit: 10, page: 0, name: searchValue })
+                     setQuery({ limit: 10, page: 0 })
+                  }}>搜索</Button>
+            </div>
             <Skeleton
                loading={false}
                active={true}
@@ -242,32 +283,62 @@ const GatewayManage = props => {
                   style={{
                      padding: "0px 20px",
                   }}
-                        pagination={{
+                  pagination={false}
-                            current: query.page + 1,
+               // pagination={{
-                            total: limits,
+               //    current: query.page + 1,
-                            showSizeChanger: true,
+               //    total: limits,
-                            showQuickJumper: true,
+               //    showSizeChanger: true,
-                            showTotal: (total) => {
+               //    showQuickJumper: true,
-                                return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limits)}页，${total}项`}</span>
+               //    showTotal: (total) => {
-                            },
+               //       return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limits)}页，${total}项`}</span>
-                            onChange: (page, pageSize) => {
+               //    },
-                                setQuery({ limit: pageSize, page: page - 1 });
+               //    onChange: (page, pageSize) => {
-                                getTableData({ limit: pageSize, page: page - 1 });
+               //       setQuery({ limit: pageSize, page: page - 1 })
-                            }
+               //       getTableData({ limit: pageSize, page: page - 1 })
-                        }}
+               //    }
+               // }}
                />
             </Skeleton>
+            {limits > 0 ? <div
+               style={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  padding: "20px 20px",
+               }}
+            >
+               <span style={{ lineHeight: "30px" }}>
+                  共{limits}个设备
+               </span>
+               <Pagination
+                  total={limits}
+                  showSizeChanger
+                  currentPage={query.page + 1}
+                  pageSizeOpts={[10, 20, 30, 40]}
+                  onChange={(page, pageSize) => {
+                     setQuery({ limit: pageSize, page: page - 1 })
+                     getTableData({ limit: pageSize, page: page - 1, name: searchValue })
+                  }}
+               />
+            </div> : ""}
             {
                detailV ? <GatewayStatusModal
                   onCancel={() => setDetailV(false)}
                   dataToModal={dataToModal} /> : ''
             }
-                {
-                    deviceModalV ? <GatewayModal
-                        onCancel={() => setDeviceModalV(false)}
-                        dataToModal={dataToModal} /> : ''
-                }
          </div>
+         {addModel ?
+            <AddModel
+               dataToModal={dataToModal}
+               editionData={editionData}
+               close={() => {
+                  setAddModel(false);
+                  setDataToModal({})
+                  getTableData({ limit: 10, page: 0, name: searchValue });
+                  setQuery({ limit: 10, page: 0 })
+               }}
+            />
+            : ""
+         }
       </>
 
    );

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

@@ -1,130 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import moment from 'moment';
-import { connect } from "react-redux";
-import { Select, Modal, Form, Button } from "@douyinfe/semi-ui";
-
-const GatewayModal = (props) => {
-    const { dispatch, actions, user, onCancel, dataToModal } = props;
-    const { edition } = actions;
-    const api = useRef()
-    //初始化
-    useEffect(() => {
-
-    }, []);
-
-    return (
-        <Modal
-            title={`${dataToModal ? '修改' : '新增'}网关`}
-            destroyOnClose visible={true}
-            onOk={() => {
-                api.current.validate().then(r => {
-                    // for (let key in r) {
-                    //     if (['major', 'minor', 'patch', 'build'].includes(key)) {
-                    //         r[key] = Number(r[key])
-                    //     }
-                    // }
-                    // dispatch(edition.postVersion({ ...r, createdAt: moment().format("YYYY-MM-DD HH:MM:SS") })).then(res => {
-                    //     if (res.success) {
-                    //         requestData()
-                    //         setaddVersion(false)
-                    //     }
-                    // })
-                })
-            }}
-            width={610}
-            onCancel={() => onCancel(0)}
-        >
-            {/* <Form
-                getFormApi={(formApi) => (api.current = formApi)}
-                layout="horizontal"
-                labelAlign="right"
-                labelWidth="114px"
-                style={{ display: 'flex', flexDirection: 'column' }}
-            >
-                <Form.Input
-                    field='serialNo'
-                    label='序列号'
-                    labelPosition="left"
-                    hideButtons={true}
-                    placeholder='请输入序列号'
-                    style={{ width: 200, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请输入序列号" }]}
-                />
-                <Form.Input
-                    field='name'
-                    label='名称'
-                    labelPosition="left"
-                    hideButtons={true}
-                    placeholder='请输入名称'
-                    style={{ width: 200, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请输入名称" }]}
-                />
-                <Form.Input
-                    field='patch'
-                    label='属性'
-                    labelPosition="left"
-                    hideButtons={true}
-                    placeholder='请输入网关属性'
-                    style={{ width: 200, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请输入网关属性" }]}
-                />
-                <Form.Input
-                    field='build' label='构建号:'
-                    labelPosition="left"
-                    hideButtons={true}
-                    placeholder='请输入构建号'
-                    style={{ width: 200, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请输入构建号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
-                />
-                <Form.Select
-                    field="type"
-                    label='Type:'
-                    labelPosition="left"
-                    placeholder='请选择类型'
-                    style={{ width: 200, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请选择类型" }]}
-                >
-                    <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: 440, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请输入基础镜像地址" }]}
-                />
-                <Form.Input
-                    field='imageVersion'
-                    label='镜像版本:'
-                    labelPosition="left"
-                    placeholder='请输入镜像版本'
-                    style={{ width: 200, marginBottom: 10 }}
-                    rules={[{ required: true, message: "请输入镜像版本" }]}
-                />
-                <Form.TextArea
-                    field='desc'
-                    label='描述:'
-                    labelPosition="left"
-                    placeholder='请输入描述'
-                    style={{ width: 440 }}
-                />
-
-            </Form> */}
-        </Modal>
-    )
-}
-
-function mapStateToProps(state) {
-    const { auth, global } = state;
-    return {
-        user: auth.user,
-        error: auth.error,
-        actions: global.actions,
-    };
-}
-
-export default connect(mapStateToProps)(GatewayModal);

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

@@ -13,6 +13,8 @@ export const ApiTable = {
     gatewaySsh: 'v1/edge/{id}/ssh',
     rebootGateway: 'v1/edge/{id}/reboot',
     restartGateway: 'v1/edge/{id}/restart',
+    postedge:'v1/edge',  //新增网关
+    putedge:"v1/edge/{edgeId}",   //修改网关
 
     getVersions: 'v1/versions',    //查询网关版本信息
     deleteVersion: 'v1/version/{versionId}',  //删除网关版本