Merge branch 'master' of https://g.civnet.cn:8443/ReactWeb5/maintenance

src/pages/platformCenter/baseFrameContainer/drawBoardManage/AddModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-07 10:23:26
+ * @LastEditTime: 2022-04-11 17:06:39
+ * @LastEditors: leizhe
+ */
+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
+import { Save } from '@/services/drawBoardManage/api';
+
+const AddModal = props => {
+  const { visible, onCancel, updateTrees } = props;
+  const [addForm] = Form.useForm();
+
+  useEffect(() => {
+    addForm.resetFields();
+  }, [visible]);
+
+  const submitAdd = () => {
+    console.log(addForm.getFieldValue().name);
+    if (addForm.getFieldValue().name) {
+      Save({ name: addForm.getFieldValue().name })
+        .then(res => {
+          if (res.statusCode === '0000') {
+            onCancel();
+            notification.success({
+              message: '提交成功',
+              duration: 2,
+            });
+            // 重新获取机构树与用户表
+            updateTrees();
+          } else {
+            notification.error({
+              message: '提交失败',
+              description: res.errMsg,
+            });
+          }
+        })
+        .catch(err => {
+          message.error(err);
+        });
+    } else {
+      notification.warning({
+        message: '模板类型名称不能为空',
+        duration: 2,
+      });
+    }
+  };
+  return (
+    <Modal
+      title="新增模型类型"
+      visible={visible}
+      onCancel={onCancel}
+      destroyOnClose
+      onOk={submitAdd}
+      afterClose={() => {
+        addForm.resetFields();
+      }}
+      maskClosable={false}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={addForm} labelCol={{ span: 6 }}>
+        <Form.Item
+          name="name"
+          label="模板类型名称"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input placeholder="请输入模板类型名称" maxLength="20" style={{ width: '330px' }} />
+        </Form.Item>
+        {/* <Form.Item name="creator" label="登录人名称">
+          <Input placeholder="" maxLength="20" style={{ width: '330px' }} disabled />
+        </Form.Item> */}
+      </Form>
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/platformCenter/baseFrameContainer/drawBoardManage/AddTemplate.jsx

+/* eslint-disable indent */
+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-07 10:23:26
+ * @LastEditTime: 2022-04-14 19:52:28
+ * @LastEditors: leizhe
+ */
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  Form,
+  Input,
+  notification,
+  message,
+  Upload,
+  Drawer,
+  Select,
+  Space,
+  Button,
+  Row,
+  Col,
+} from 'antd';
+import { SaveUpload } from '@/services/drawBoardManage/api';
+
+const AddTemplate = props => {
+  const { visible, treeData, pickItem, callBackSubmit = () => {} } = props;
+  const [addTemplateForm] = Form.useForm();
+  const [selectValue, setSelectValue] = useState('');
+  const [file, setFile] = useState('');
+  const { Option } = Select;
+
+  useEffect(() => {
+    console.log(pickItem);
+    addTemplateForm.resetFields();
+    if (pickItem) {
+      addTemplateForm.setFieldsValue({ Type: pickItem.name });
+      setSelectValue(pickItem.name);
+    }
+  }, [visible]);
+
+  const submitAdd = () => {
+    addTemplateForm.validateFields().then(validate => {
+      if (validate) {
+        let aa = {};
+        aa.width = addTemplateForm.getFieldsValue().imageWidth.toString();
+        aa.height = addTemplateForm.getFieldsValue().imageHeight.toString();
+        const formData = new FormData();
+        formData.append('Name', addTemplateForm.getFieldsValue().Name);
+        formData.append('Type', selectValue);
+        formData.append('Dimension', '二维');
+        formData.append('Size', JSON.stringify(aa));
+        formData.append('ModelFile', file);
+        console.log(formData);
+        SaveUpload(formData).then(res => {
+          if (res.statusCode === '0000') {
+            callBackSubmit();
+            notification.success({
+              message: '提示',
+              duration: 3,
+              description: res.info,
+            });
+          } else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: res.errMsg,
+            });
+          }
+        });
+      }
+    });
+  };
+
+  const changTable = e => {
+    console.log(e);
+    setSelectValue(e);
+  };
+
+  const aa = {
+    beforeUpload: file => {
+      // const isPNG = file.type === 'image/png';
+      // if (!isPNG) {
+      //   message.error(`${file.name} 不是png类型的图片`);
+      // } else {
+      setFile(file);
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const image = new Image();
+        image.src = reader.result;
+        image.onload = () => {
+          addTemplateForm.setFieldsValue({
+            imageWidth: `${image.width}px`,
+            imageHeight: `${image.height}px`,
+            ModelFile: file.name,
+            Name: file.name.substring(0, file.name.lastIndexOf('.')),
+          });
+        };
+        // };
+      };
+      return Upload.LIST_IGNORE;
+    },
+    onChange: info => {
+      console.log(info);
+    },
+  };
+
+  return (
+    <Drawer
+      title="新增模型"
+      visible={visible}
+      width="500px"
+      destroyOnClose
+      {...props}
+      footer={
+        <Space>
+          <Button onClick={submitAdd} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
+    >
+      <Form form={addTemplateForm} labelCol={{ span: 5 }}>
+        <Form.Item name="Type" label="模板类型" rules={[{ required: true, message: '不能为空' }]}>
+          <Select
+            placeholder="选择模板类型"
+            onChange={changTable}
+            style={{ marginLeft: '-3px' }}
+            showSearch
+          >
+            {treeData
+              ? treeData.map((item, index) => (
+                  <Option key={item.id} value={item.name}>
+                    {item.name}
+                  </Option>
+                ))
+              : ''}
+          </Select>
+        </Form.Item>
+        <Row>
+          <Col span={17}>
+            <Form.Item
+              label="模型文件"
+              name="ModelFile"
+              labelCol={{ span: 7 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择模型文件',
+                },
+              ]}
+            >
+              <Input placeholder="仅支持png和svg格式" />
+            </Form.Item>
+          </Col>
+          <Col span={7}>
+            <Form.Item>
+              <Upload {...aa} accept=".png, .svg">
+                <Button style={{ width: '130px' }}>上传图片</Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item label="模型名称" name="Name">
+          <Input placeholder="请输入菜单组名称" />
+        </Form.Item>
+        <Row>
+          <Col span={13}>
+            <Form.Item label="宽" name="imageWidth" labelCol={{ span: 9 }}>
+              <Input style={{ width: '153px' }} disabled />
+            </Form.Item>
+          </Col>
+          <Col span={11}>
+            <Form.Item label="高" name="imageHeight" labelCol={{ span: 7 }}>
+              <Input style={{ width: '146px' }} disabled />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Drawer>
+  );
+};
+export default AddTemplate;

src/pages/platformCenter/baseFrameContainer/drawBoardManage/ChildAddTemplate.jsx

+/* eslint-disable indent */
+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-07 10:23:26
+ * @LastEditTime: 2022-04-14 19:58:49
+ * @LastEditors: leizhe
+ */
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  Form,
+  Input,
+  notification,
+  message,
+  Upload,
+  Drawer,
+  Select,
+  Space,
+  Button,
+  Row,
+  Col,
+} from 'antd';
+import { SaveUpload } from '@/services/drawBoardManage/api';
+
+const ChildAddTemplate = props => {
+  const { visible, treeData, pickItem, obj, callBackSubmit = () => {} } = props;
+  const [addTemplateForm] = Form.useForm();
+  const [selectValue, setSelectValue] = useState('');
+  const [keepFile, setKeepFile] = useState('');
+  const [file, setFile] = useState('');
+  const { Option } = Select;
+
+  useEffect(() => {
+    console.log(obj);
+    addTemplateForm.resetFields();
+    addTemplateForm.setFieldsValue({ Type: obj.typeName });
+  }, [visible]);
+
+  const submitAdd = () => {
+    addTemplateForm.validateFields().then(validate => {
+      if (validate) {
+        let aa = {};
+        aa.width = addTemplateForm.getFieldsValue().imageWidth.toString();
+        aa.height = addTemplateForm.getFieldsValue().imageHeight.toString();
+        const formData = new FormData();
+        formData.append('Name', addTemplateForm.getFieldsValue().Name);
+        formData.append('Type', addTemplateForm.getFieldsValue().Type);
+        formData.append('Dimension', '二维');
+        formData.append('Size', JSON.stringify(aa));
+        formData.append('ModelFile', file);
+        formData.append('RelModel', obj.id);
+        console.log(formData);
+        SaveUpload(formData).then(res => {
+          if (res.statusCode === '0000') {
+            callBackSubmit();
+            notification.success({
+              message: '提示',
+              duration: 3,
+              description: res.info,
+            });
+          } else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: res.errMsg,
+            });
+          }
+        });
+      }
+    });
+  };
+
+  const changTable = e => {
+    setSelectValue(e);
+  };
+
+  const aa = {
+    beforeUpload: file => {
+      // const isPNG = file.type === 'image/png';
+      // if (!isPNG) {
+      //   message.error(`${file.name} 不是png类型的图片`);
+      // } else {
+      setFile(file);
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const image = new Image();
+        image.src = reader.result;
+        image.onload = () => {
+          addTemplateForm.setFieldsValue({
+            imageWidth: `${image.width}px`,
+            imageHeight: `${image.height}px`,
+            ModelFile: file.name,
+            Name: file.name.substring(0, file.name.lastIndexOf('.')),
+          });
+        };
+        // };
+      };
+      return Upload.LIST_IGNORE;
+    },
+    onChange: info => {
+      console.log(info);
+    },
+  };
+
+  return (
+    <Drawer
+      title="新增模型"
+      visible={visible}
+      width="500px"
+      destroyOnClose
+      {...props}
+      footer={
+        <Space>
+          <Button onClick={submitAdd} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
+    >
+      <Form form={addTemplateForm} labelCol={{ span: 5 }}>
+        <Form.Item name="Type" label="模板类型" rules={[{ required: true, message: '不能为空' }]}>
+          <Select
+            placeholder="选择模板类型"
+            onChange={changTable}
+            style={{ marginLeft: '-3px' }}
+            showSearch
+            disabled
+          >
+            {treeData
+              ? treeData.map((item, index) => (
+                  <Option key={item.id} value={item.name}>
+                    {item.name}
+                  </Option>
+                ))
+              : ''}
+          </Select>
+        </Form.Item>
+        <Row>
+          <Col span={17}>
+            <Form.Item
+              label="模型文件"
+              name="ModelFile"
+              labelCol={{ span: 7 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择模型文件',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={7}>
+            <Form.Item>
+              <Upload {...aa} accept=".png, .svg">
+                <Button style={{ width: '130px' }}>上传图片</Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item label="模型名称" name="Name">
+          <Input placeholder="请输入菜单组名称" />
+        </Form.Item>
+        <Row>
+          <Col span={13}>
+            <Form.Item label="宽" name="imageWidth" labelCol={{ span: 9 }}>
+              <Input style={{ width: '153px' }} disabled />
+            </Form.Item>
+          </Col>
+          <Col span={11}>
+            <Form.Item label="高" name="imageHeight" labelCol={{ span: 7 }}>
+              <Input style={{ width: '146px' }} disabled />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Drawer>
+  );
+};
+export default ChildAddTemplate;

src/pages/platformCenter/baseFrameContainer/drawBoardManage/DrawBoardManage.less

+.base_container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+  .ant-card-body {
+    padding: 12px;
+  }
+  .listItem {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 400;
+    color: #414e65;
+    cursor: pointer;
+    line-height: 20px;
+    align-items: center;
+    padding: 8px 14px;
+  }
+  .clickRowStyle {
+    background: #cfe7fd;
+  }
+  .backRowStyle {
+    background: #97c3e8;
+  }
+  .pickItem {
+    background-color: #aed8fa;
+  }
+  .listHover {
+    background-color: #f5f6f9;
+  }
+}
+.title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.title:hover {
+  .tip {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 25%;
+  }
+}
+.tip {
+  display: none;
+}

src/pages/platformCenter/baseFrameContainer/drawBoardManage/EditModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-07 10:23:26
+ * @LastEditTime: 2022-04-11 16:24:40
+ * @LastEditors: leizhe
+ */
+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
+import { UpdateModelType } from '@/services/drawBoardManage/api';
+
+const EditModal = props => {
+  const { visible, onCancel, updateTrees, changeObj } = props;
+  const [addForm] = Form.useForm();
+
+  useEffect(() => {
+    addForm.setFieldsValue({ name: changeObj.name });
+  }, [visible]);
+
+  const submitEdit = () => {
+    console.log(addForm.getFieldValue('name'));
+    if (addForm.getFieldValue('name')) {
+      UpdateModelType({ modelName: addForm.getFieldValue('name'), modelId: changeObj.id })
+        .then(res => {
+          if (res.code === 0) {
+            onCancel();
+            notification.success({
+              message: '提交成功',
+              duration: 2,
+            });
+            // 重新获取机构树与用户表
+            updateTrees();
+          } else {
+            notification.error({
+              message: '提交失败',
+              description: res.msg,
+            });
+          }
+        })
+        .catch(err => {
+          message.error(err);
+        });
+    } else {
+      notification.warning({
+        message: '模板类型名称不能为空',
+        duration: 2,
+      });
+    }
+  };
+  return (
+    <Modal
+      title="编辑模型类型"
+      visible={visible}
+      onCancel={onCancel}
+      destroyOnClose
+      onOk={submitEdit}
+      afterClose={() => {
+        addForm.resetFields();
+      }}
+      maskClosable={false}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={addForm} labelCol={{ span: 6 }}>
+        <Form.Item
+          name="name"
+          label="模板类型名称"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input placeholder="请输入模板类型名称" maxLength="20" style={{ width: '330px' }} />
+        </Form.Item>
+        {/* <Form.Item name="creator" label="登录人名称">
+          <Input placeholder="" maxLength="20" style={{ width: '330px' }} disabled />
+        </Form.Item> */}
+      </Form>
+    </Modal>
+  );
+};
+export default EditModal;

src/pages/platformCenter/baseFrameContainer/drawBoardManage/EditTemplate.jsx

+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  Form,
+  Input,
+  notification,
+  message,
+  Upload,
+  Drawer,
+  Select,
+  Space,
+  Button,
+  Row,
+  Col,
+} from 'antd';
+import { SaveUpload, UpdateModelInfo } from '@/services/drawBoardManage/api';
+
+const EditTemplate = props => {
+  const { visible, treeData, obj, pickItem, callBackSubmit = () => {}, onCancel } = props;
+  const [addTemplateForm] = Form.useForm();
+  const [selectValue, setSelectValue] = useState('');
+  const [file, setFile] = useState('');
+  const { Option } = Select;
+
+  useEffect(() => {
+    addTemplateForm.resetFields();
+    console.log(pickItem);
+    console.log(obj);
+    if (obj.modelPath) {
+      let index = obj.modelPath.lastIndexOf('\\');
+      let ab = obj.modelPath.substring(index + 1, obj.modelPath.length);
+      let a = JSON.parse(obj.size);
+      console.log(a);
+      let aa;
+      let bb;
+      if (a) {
+        if (a.width.charAt(a.width.length - 1) == 'x') {
+          aa = `${a.width}`;
+          bb = `${a.height}`;
+        } else {
+          aa = `${a.width}px`;
+          bb = `${a.height}px`;
+        }
+      }
+      addTemplateForm.setFieldsValue({
+        Name: obj.name,
+        Type: obj.typeName,
+        ModelFile: ab,
+        imageWidth: aa,
+        imageHeight: bb,
+      });
+    }
+  }, [visible]);
+
+  const submitAdd = () => {
+    addTemplateForm.validateFields().then(validate => {
+      if (validate) {
+        let aa = {};
+        aa.width = addTemplateForm.getFieldsValue().imageWidth.toString();
+        aa.height = addTemplateForm.getFieldsValue().imageHeight.toString();
+        console.log(aa);
+        console.log(file);
+        const formData = new FormData();
+        formData.append('ModelName', addTemplateForm.getFieldsValue().Name);
+        formData.append('ModelType', obj.typeName);
+        formData.append('width', aa.width);
+        formData.append('height', aa.height);
+        formData.append('ID', obj.id);
+        formData.append('ModelFile', file);
+        // if (obj.realModal != 0) {
+        //   formData.append('RelModel', obj.realModel);
+        // }
+        console.log(formData);
+        UpdateModelInfo(formData).then(res => {
+          if (res.code === 0) {
+            callBackSubmit();
+            notification.success({
+              message: '提示',
+              duration: 3,
+              description: res.info,
+            });
+          } else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: res.errMsg,
+            });
+          }
+        });
+      }
+    });
+  };
+  const changTable = e => {
+    setSelectValue(e);
+  };
+
+  const aa = {
+    beforeUpload: file => {
+      // const isPNG = file.type === 'image/png';
+      // if (!isPNG) {
+      //   message.error(`${file.name} 不是png类型的图片`);
+      // } else {
+      setFile(file);
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const image = new Image();
+        image.src = reader.result;
+        image.onload = () => {
+          addTemplateForm.setFieldsValue({
+            imageWidth: `${image.width}px`,
+            imageHeight: `${image.height}px`,
+            ModelFile: file.name,
+            // Name: file.name.substring(0, file.name.lastIndexOf('.')),
+          });
+        };
+        // };
+      };
+      return Upload.LIST_IGNORE;
+    },
+    onChange: info => {
+      console.log(info);
+    },
+  };
+
+  return (
+    <Drawer
+      title="编辑模型"
+      visible={visible}
+      width="500px"
+      destroyOnClose
+      {...props}
+      footer={
+        <Space>
+          <Button onClick={submitAdd} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
+    >
+      <Form form={addTemplateForm} labelCol={{ span: 5 }}>
+        <Form.Item name="Type" label="模板类型" rules={[{ required: true, message: '不能为空' }]}>
+          <Select
+            placeholder="选择模板类型"
+            onChange={changTable}
+            style={{ marginLeft: '-3px' }}
+            showSearch
+            disabled
+          >
+            {treeData
+              ? treeData.map((item, index) => (
+                  <Option key={item.id} value={item.name}>
+                    {item.name}
+                  </Option>
+                ))
+              : ''}
+          </Select>
+        </Form.Item>
+        <Row>
+          <Col span={17}>
+            <Form.Item
+              label="模型文件"
+              name="ModelFile"
+              labelCol={{ span: 7 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择模型文件',
+                },
+              ]}
+            >
+              <Input placeholder="仅支持png和svg格式" />
+            </Form.Item>
+          </Col>
+          <Col span={7}>
+            <Form.Item>
+              <Upload {...aa} accept=".png, .svg">
+                <Button style={{ width: '130px' }}>上传图片</Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item label="模型名称" name="Name">
+          <Input placeholder="请输入菜单组名称" disabled />
+        </Form.Item>
+        <Row>
+          <Col span={13}>
+            <Form.Item label="宽" name="imageWidth" labelCol={{ span: 9 }}>
+              <Input style={{ width: '153px' }} disabled />
+            </Form.Item>
+          </Col>
+          <Col span={11}>
+            <Form.Item label="高" name="imageHeight" labelCol={{ span: 7 }}>
+              <Input style={{ width: '146px' }} disabled />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Drawer>
+  );
+};
+export default EditTemplate;

src/pages/platformCenter/baseFrameContainer/drawBoardManage/ImportModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-11 18:12:39
+ * @LastEditTime: 2022-04-14 15:57:18
+ * @LastEditors: leizhe
+ */
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, notification, message, Button, Col, Row, Upload } from 'antd';
+import { Import } from '@/services/drawBoardManage/api';
+
+const ImportModal = props => {
+  const { visible, onCancel, callBackSubmit = () => {} } = props;
+  const [addForm] = Form.useForm();
+  const [file, setFile] = useState('');
+
+  useEffect(() => {
+    addForm.resetFields();
+  }, [visible]);
+
+  const aa = {
+    beforeUpload: file => {
+      console.log(file);
+      addForm.setFieldsValue({
+        ModelFile: file.name,
+      });
+      setFile(file);
+      return false;
+    },
+  };
+
+  const importData = () => {
+    addForm.validateFields().then(validate => {
+      if (validate) {
+        const formData = new FormData();
+        formData.append('file', file);
+        Import(formData).then(res => {
+          if (res.statusCode === '0000') {
+            callBackSubmit();
+            addForm.resetFields();
+            notification.success({
+              message: '提示',
+              duration: 3,
+              description: res.info,
+            });
+          } else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: res.errMsg,
+            });
+          }
+        });
+      }
+    });
+  };
+  return (
+    <Modal
+      title="导入数据"
+      visible={visible}
+      onCancel={onCancel}
+      destroyOnClose
+      onOk={importData}
+      afterClose={() => {
+        addForm.resetFields();
+      }}
+      maskClosable={false}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={addForm} labelCol={{ span: 5 }}>
+        <Row>
+          <Col span={17}>
+            <Form.Item
+              label="模型文件"
+              name="ModelFile"
+              labelCol={{ span: 7 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择压缩文件',
+                },
+              ]}
+            >
+              <Input placeholder="请选择压缩文件" />
+            </Form.Item>
+          </Col>
+          <Col span={7}>
+            <Form.Item>
+              <Upload {...aa} accept=".zip">
+                <Button style={{ width: '130px' }}>上传文件</Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+export default ImportModal;

src/pages/platformCenter/baseFrameContainer/index.jsx

+import React, { useState, useEffect } from 'react';
+import { Tabs } from 'antd';
+import PageContainer from '@/components/BasePageContainer';
+import DrawBoardManage from './drawBoardManage/DrawBoardManage';
+import ModelFileManage from './modelFileManage/ModelFileManage';
+const { TabPane } = Tabs;
+
+const BaseFrameContainer = () => {
+  const callback = () => {};
+
+  return (
+    <PageContainer>
+      <Tabs onChange={callback} type="card">
+        <TabPane tab="模型文件" key="1">
+          <DrawBoardManage />
+        </TabPane>
+        <TabPane tab="画板管理" key="2">
+          <ModelFileManage />
+        </TabPane>
+      </Tabs>
+    </PageContainer>
+  );
+};
+export default BaseFrameContainer;

src/pages/platformCenter/baseFrameContainer/modelFileManage/EditModal.jsx

+/* eslint-disable indent */
+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-07 10:23:26
+ * @LastEditTime: 2022-04-14 14:23:42
+ * @LastEditors: leizhe
+ */
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, notification, message, Select } from 'antd';
+import { list, Edit } from '@/services/ModelFileManage/api';
+
+const { Option } = Select;
+
+const EditModal = props => {
+  const { visible, onCancel, pickItem, callBackSubmit = () => {} } = props;
+  const [addForm] = Form.useForm();
+  const [value, setValue] = useState('');
+  const [select, setSelect] = useState('');
+
+  useEffect(() => {
+    console.log(pickItem);
+    addForm.setFieldsValue({ name: pickItem.name });
+    addForm.setFieldsValue({ type: pickItem.typeID });
+    list({ _site: '' }).then(res => {
+      console.log(res.getMe);
+      setValue(res.getMe);
+    });
+  }, [visible]);
+
+  const submitEdit = () => {
+    console.log(addForm.getFieldValue('name'));
+    console.log(addForm.getFieldValue('type'));
+    if (addForm.getFieldValue('name')) {
+      Edit({
+        id: pickItem.id,
+        Name: addForm.getFieldValue('name'),
+        TypeId: addForm.getFieldValue('type'),
+      })
+        .then(res => {
+          if (res.statusCode === '0000') {
+            onCancel();
+            callBackSubmit();
+            notification.success({
+              message: '提交成功',
+              duration: 2,
+              description: res.info,
+            });
+            // 重新获取机构树与用户表
+          } else {
+            notification.error({
+              message: '提交失败',
+              description: res.errMsg,
+            });
+          }
+        })
+        .catch(err => {
+          message.error(err);
+        });
+    } else {
+      notification.warning({
+        message: '模板类型名称不能为空',
+        duration: 2,
+      });
+    }
+  };
+
+  const changValue = e => {
+    console.log(e);
+    setSelect(e);
+  };
+  return (
+    <Modal
+      title="编辑画板"
+      visible={visible}
+      onCancel={onCancel}
+      destroyOnClose
+      onOk={submitEdit}
+      afterClose={() => {
+        addForm.resetFields();
+      }}
+      maskClosable={false}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={addForm} labelCol={{ span: 6 }}>
+        <Form.Item name="name" label="画板名称" rules={[{ required: true, message: '不能为空' }]}>
+          <Input placeholder="请输入模板类型名称" maxLength="20" style={{ width: '330px' }} />
+        </Form.Item>
+        <Form.Item name="type" label="画板类型" rules={[{ required: true, message: '不能为空' }]}>
+          <Select placeholder="选择画板类型" onChange={changValue} style={{ width: '330px' }}>
+            {value
+              ? value.map((item, index) => (
+                  <Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Option>
+                ))
+              : ''}
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default EditModal;

src/pages/platformCenter/baseFrameContainer/modelFileManage/ImportModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-11 18:12:39
+ * @LastEditTime: 2022-04-14 15:56:30
+ * @LastEditors: leizhe
+ */
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, notification, message, Button, Col, Row, Upload } from 'antd';
+import { Import, GetBasicInfo } from '@/services/ModelFileManage/api';
+
+const ImportModal = props => {
+  const { visible, onCancel, callBackSubmit = () => {} } = props;
+  const [addForm] = Form.useForm();
+  const [file, setFile] = useState('');
+
+  useEffect(() => {
+    addForm.resetFields();
+  }, [visible]);
+
+  const aa = {
+    beforeUpload: file => {
+      console.log(file);
+      addForm.setFieldsValue({
+        ModelFile: file.name,
+      });
+      setFile(file);
+      return false;
+    },
+  };
+
+  const importData = () => {
+    GetBasicInfo().then(res => {
+      if (res.code === 0) {
+        console.log(res.data);
+        console.log(file);
+        addForm.validateFields().then(validate => {
+          if (validate) {
+            const formData = new FormData();
+            formData.append('siteCode', res.data);
+            formData.append('file', file);
+            Import(formData).then(res => {
+              if (res.statusCode === '0000') {
+                callBackSubmit();
+                addForm.resetFields();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: res.info,
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.errMsg,
+                });
+              }
+            });
+          }
+        });
+      }
+    });
+  };
+  return (
+    <Modal
+      title="导入数据"
+      visible={visible}
+      onCancel={onCancel}
+      destroyOnClose
+      onOk={importData}
+      afterClose={() => {
+        addForm.resetFields();
+      }}
+      maskClosable={false}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={addForm} labelCol={{ span: 5 }}>
+        <Row>
+          <Col span={17}>
+            <Form.Item
+              label="模型文件"
+              name="ModelFile"
+              labelCol={{ span: 7 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择压缩文件',
+                },
+              ]}
+            >
+              <Input placeholder="请选择压缩文件" />
+            </Form.Item>
+          </Col>
+          <Col span={7}>
+            <Form.Item>
+              <Upload {...aa} accept=".zip">
+                <Button style={{ width: '130px' }}>上传文件</Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+export default ImportModal;

src/pages/platformCenter/baseFrameContainer/modelFileManage/ModelFileManage.less

+.base_container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+  .ant-card-body {
+    padding: 5px 24px 24px 10px;
+  }
+}

src/pages/platformCenter/videoManager/DHModal.jsx

+/* eslint-disable default-case */
+import React, { useEffect, useState } from 'react';
+import { Form, Modal, Row, Col, Input, Select, notification } from 'antd';
+import { addInsertVideoConfig, editInsertVideoConfig } from '@/services/videoManger/videoManger';
+
+const AddDHModal = props => {
+  const { callBackSubmit = () => {}, visible, onCancel, type, kind, obj } = props;
+
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  const { TextArea } = Input;
+
+  const [selectChange, setSelectChange] = useState('轻应用');
+  const [selectChange1, setSelectChange1] = useState('否');
+  const [selectChange2, setSelectChange2] = useState('主码流');
+
+  const onChange = value => {
+    setSelectChange(value);
+  };
+
+  const onChange1 = value => {
+    setSelectChange1(value);
+  };
+
+  const onChange2 = value => {
+    setSelectChange2(value);
+  };
+
+  useEffect(() => {
+    if (kind === 'add') {
+      form.resetFields();
+    } else {
+      form.setFieldsValue({ ...obj });
+    }
+  }, [visible]);
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let getValue = form.getFieldsValue();
+        console.log(getValue);
+        if (getValue.PlayModel === undefined) {
+          getValue.PlayModel = '轻应用';
+        }
+        if (getValue.PlayZeroChannel === undefined) {
+          getValue.PlayZeroChannel = '否';
+        }
+        if (getValue.StreamType === undefined) {
+          getValue.StreamType = '主码流';
+        }
+        getValue.VideoManufacturer = type;
+        if (kind === 'add') {
+          addInsertVideoConfig(getValue).then(res => {
+            if (res.msg === 'Ok') {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '新增成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        }
+        if (kind === 'edit') {
+          editInsertVideoConfig({
+            ...getValue,
+            Id: obj.Id,
+          }).then(res => {
+            if (res.msg === 'Ok') {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '编辑成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        }
+      }
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={
+        kind === 'add' ? (
+          <span style={{ fontSize: '18px' }}>新增配置</span>
+        ) : (
+          <span style={{ fontSize: '18px' }}>编辑配置</span>
+        )
+      }
+      width="1000px"
+      destroyOnClose
+      maskClosable={false}
+      onCancel={onCancel}
+      onOk={onSubmit}
+    >
+      <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
+      <Form
+        form={form}
+        labelCol={{ span: 7 }}
+        style={{ height: '25rem', overflowY: 'scroll' }}
+        autocomplete="off"
+      >
+        <Row>
+          <Col span={11}>
+            <Item
+              label="名称"
+              name="Name"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入名称',
+                },
+              ]}
+            >
+              <Input placeholder="请输入名称" maxlength="20px" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <span
+              style={{
+                position: 'absolute',
+                left: '12%',
+                top: '9%',
+                color: 'red',
+                fontSize: '16px',
+              }}
+            >
+              *
+            </span>
+            <Item label="视频厂商" name="VideoManufacturer">
+              <Input placeholder="大华" disabled />
+            </Item>
+          </Col>
+          <Col span={11}>
+            <Item
+              label="设备编码"
+              name="EquipmentCode"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入设备编码',
+                },
+              ]}
+            >
+              <Input placeholder="设备台账对应设备编码字段" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="通道ID"
+              name="PassageId"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入通道ID',
+                },
+              ]}
+            >
+              <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
+            </Item>
+          </Col>
+          <Col span={24}>
+            <p style={{ fontSize: '16px', marginLeft: '16px' }}>{type}</p>
+          </Col>
+          <Col span={11}>
+            <Item
+              label="登录IP"
+              name="LoginIp"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入登录ID',
+                },
+              ]}
+            >
+              <Input placeholder="登录ID" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="设备端口"
+              name="EquipmentPort"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入设备端口',
+                },
+              ]}
+            >
+              <Input placeholder="设备端口" />
+            </Item>
+          </Col>
+          <Col span={11}>
+            <Item
+              label="视频名称"
+              name="VideoName"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入视频名称',
+                },
+              ]}
+            >
+              <Input placeholder="视频监控点名称" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="默认通道ID"
+              name="DefaultPassageId"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入默认通道ID',
+                },
+              ]}
+            >
+              <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
+            </Item>
+          </Col>
+          <Col span={11}>
+            <Item
+              label="视频服务地址"
+              name="VideoPath"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入视频名称',
+                },
+              ]}
+            >
+              <Input placeholder="视频服务地址" />
+            </Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+export default AddDHModal;

src/pages/platformCenter/videoManager/HKModal.jsx

+import React, { useEffect, useState } from 'react';
+import { Form, Modal, Row, Col, Input, Select, notification } from 'antd';
+import { addInsertVideoConfig, editInsertVideoConfig } from '@/services/videoManger/videoManger';
+
+const AddHKModal = props => {
+  const { callBackSubmit = () => {}, visible, onCancel, type, kind, obj } = props;
+
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  const { TextArea } = Input;
+
+  const [selectChange, setSelectChange] = useState('轻应用');
+  const [selectChange1, setSelectChange1] = useState('否');
+  const [selectChange2, setSelectChange2] = useState('主码流');
+
+  const onChange = value => {
+    setSelectChange(value);
+  };
+
+  const onChange1 = value => {
+    setSelectChange1(value);
+  };
+
+  const onChange2 = value => {
+    setSelectChange2(value);
+  };
+
+  useEffect(() => {
+    if (kind === 'add') {
+      form.resetFields();
+    } else {
+      form.setFieldsValue({ ...obj });
+    }
+  }, [visible]);
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let getValue = form.getFieldsValue();
+        console.log(getValue);
+        if (getValue.PlayModel === undefined) {
+          getValue.PlayModel = '轻应用';
+        }
+        if (getValue.PlayZeroChannel === undefined) {
+          getValue.PlayZeroChannel = '否';
+        }
+        if (getValue.StreamType === undefined) {
+          getValue.StreamType = '主码流';
+        }
+        getValue.VideoManufacturer = type;
+        if (kind === 'add') {
+          addInsertVideoConfig(getValue).then(res => {
+            if (res.msg === 'Ok') {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '新增成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        }
+        if (kind === 'edit') {
+          editInsertVideoConfig({
+            ...getValue,
+            Id: obj.Id,
+          }).then(res => {
+            if (res.msg === 'Ok') {
+              form.resetFields();
+              callBackSubmit();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '编辑成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.msg,
+              });
+            }
+          });
+        }
+      }
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={
+        kind === 'add' ? (
+          <span style={{ fontSize: '18px' }}>新增配置</span>
+        ) : (
+          <span style={{ fontSize: '18px' }}>编辑配置</span>
+        )
+      }
+      width="1000px"
+      destroyOnClose
+      maskClosable={false}
+      onCancel={onCancel}
+      onOk={onSubmit}
+    >
+      <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
+      <Form
+        form={form}
+        labelCol={{ span: 7 }}
+        style={{ height: '25rem', overflowY: 'scroll' }}
+        autocomplete="off"
+      >
+        <Row>
+          <Col span={11}>
+            <Item
+              label="名称"
+              name="Name"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入名称',
+                },
+              ]}
+            >
+              <Input placeholder="请输入名称" maxlength="20px" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <span
+              style={{
+                position: 'absolute',
+                left: '12%',
+                top: '9%',
+                color: 'red',
+                fontSize: '16px',
+              }}
+            >
+              *
+            </span>
+            <Item label="视频厂商" name="VideoManufacturer">
+              <Input placeholder="海康ISC" disabled />
+            </Item>
+          </Col>
+
+          <Col span={11}>
+            <Item
+              label="登录名"
+              name="LoginName"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入登录名',
+                },
+              ]}
+            >
+              <Input placeholder="账户登录名" maxlength="100px" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="登录密码"
+              name="LoginPwd"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入登录密码',
+                },
+              ]}
+            >
+              <Input.Password placeholder="请输入登录密码" />
+            </Item>
+          </Col>
+
+          <Col span={11}>
+            <Item
+              label="设备编码"
+              name="EquipmentCode"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入设备编码',
+                },
+              ]}
+            >
+              <Input placeholder="设备台账对应设备编码字段" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="通道ID"
+              name="PassageId"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入通道ID',
+                },
+              ]}
+            >
+              <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
+            </Item>
+          </Col>
+          <Col span={24}>
+            <p style={{ fontSize: '16px', marginLeft: '16px' }}>{type}</p>
+          </Col>
+          <Col span={11}>
+            <Item
+              label="登录IP"
+              name="LoginIp"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入登录ID',
+                },
+              ]}
+            >
+              <Input placeholder="登录ID" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="视频端口"
+              name="VideoPort"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入视频端口',
+                },
+              ]}
+            >
+              <Input placeholder="视频端口" />
+            </Item>
+          </Col>
+          <Col span={11}>
+            <Item
+              label="视频名称"
+              name="VideoName"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入视频名称',
+                },
+              ]}
+            >
+              <Input placeholder="视频监控点名称" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <span
+              style={{
+                position: 'absolute',
+                left: '12%',
+                top: '9%',
+                color: 'red',
+                fontSize: '16px',
+              }}
+            >
+              *
+            </span>
+            <Item
+              label="码流类型"
+              name="StreamType"
+              rules={[
+                {
+                  validator: (_rule, value) => {
+                    if (form.getFieldsValue().StreamType == '') {
+                      return Promise.reject('请选择码流类型');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Select defaultValue="主码流" value={selectChange2} onChange={onChange2}>
+                <Option value="主码流">主码流</Option>
+                <Option value="子码流">子码流</Option>
+              </Select>
+            </Item>
+          </Col>
+          <Col span={11}>
+            <Item label="默认通道ID" name="DefaultPassageId">
+              <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
+            </Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+export default AddHKModal;

src/services/ModelFileManage/api.js

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-12 11:09:48
+ * @LastEditTime: 2022-04-14 11:11:02
+ * @LastEditors: leizhe
+ */
+import { get, post, postForm, PUBLISH_SERVICE, WebSERVICE } from '@/services/index';
+
+export const List = param => get(`${WebSERVICE}/Sketchpad/SketchPad/List`, param);
+
+export const deleteByID = param => get(`${WebSERVICE}/Sketchpad/SketchPad/deleteByID`, param);
+
+export const DownLoadSketchPadType = query =>
+  post(`${PUBLISH_SERVICE}/ModelType/DownLoadSketchPadType`, query);
+
+export const Export = query => `${WebSERVICE}/Sketchpad/SketchPad/Export?ids=${query.ids}`;
+
+export const Import = param => post(`${WebSERVICE}/Sketchpad/SketchPad/Import`, param);
+
+export const GetBasicInfo = param => get(`${PUBLISH_SERVICE}/HostManager/GetBasicInfo`, param);
+
+export const CaseTemplate = param => get(`${WebSERVICE}/Sketchpad/SketchPad/CaseTemplate`, param);
+
+export const list = param => get(`${WebSERVICE}/SketchPadType/SketchPadType/List`, param);
+
+export const Edit = param => get(`${WebSERVICE}/Sketchpad/SketchPad/Edit`, param);

src/services/drawBoardManage/api.js

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-04-06 17:28:30
+ * @LastEditTime: 2022-04-15 09:56:47
+ * @LastEditors: leizhe
+ */
+import { get, post, postForm, PUBLISH_SERVICE, WebSERVICE } from '@/services/index';
+
+export const typeList = param => get(`${WebSERVICE}/ModelType/ModelType/TypeList`, param);
+
+export const modelManageList = param => get(`${WebSERVICE}/Models/Models/ModelManageList`, param);
+
+export const SaveUpload = query =>
+  post(`${WebSERVICE}/Models/Models/SaveUpload`, query, {
+    headers: {
+      'Content-Type': 'multipart/form-data;charset=UTF-8',
+    },
+  });
+
+export const Save = param => get(`${WebSERVICE}/ModelType/ModelType/Save`, param);
+
+export const deleteByModel = param => get(`${WebSERVICE}/Models/Models/DeleteByModel`, param);
+
+export const UpdateModelType = param => get(`${PUBLISH_SERVICE}/ModelType/UpdateModelType`, param);
+
+export const DelModelType = param => get(`${PUBLISH_SERVICE}/ModelType/DelModelType`, param);
+
+export const Import = query =>
+  post(`${WebSERVICE}/Models/Models/Import`, query, {
+    headers: {
+      'Content-Type': 'multipart/form-data;charset=UTF-8',
+    },
+  });
+
+export const DownLoadModelType = query =>
+  `${PUBLISH_SERVICE}/ModelType/DownLoadModelType?modelList=${query.modelList}`;
+
+export const UpdateModelInfo = param => post(`${PUBLISH_SERVICE}/ModelType/UpdateModelInfo`, param);
+
+export const GetBasicInfo = param => get(`${PUBLISH_SERVICE}/HostManager/GetBasicInfo`, param);
+
+export const DownLoadModelTypeSingle = query =>
+  `${PUBLISH_SERVICE}/ModelType/DownLoadModelTypeSingle?modeId=${query.modeId}`;