Skip to content

C
CivManage
Commit 898a5e41 authored by 邓超's avatar 邓超
Browse files
Options

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

parents 8245a0d8 439c3b1e
Hide whitespace changes
Inline Side-by-side
Showing with 3160 additions and 0 deletions
src/pages/platformCenter/baseFrameContainer/drawBoardManage/AddModal.jsx 0 → 100644
View file @ 898a5e41
/*
* @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 0 → 100644
View file @ 898a5e41
/* 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 0 → 100644
View file @ 898a5e41
/* 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.jsx 0 → 100644
View file @ 898a5e41
/* eslint-disable no-shadow */
/*
* @Description:
* @Author: leizhe
* @Date: 2022-04-06 11:38:46
* @LastEditTime: 2022-04-15 09:56:38
* @LastEditors: leizhe
*/
import React, { useState, useEffect } from 'react';
import {
Button,
Descriptions,
Input,
Card,
Spin,
Divider,
Tabs,
Table,
Space,
Tooltip,
Modal,
Image,
Form,
notification,
message,
Pagination,
} from 'antd';
import {
typeList,
modelManageList,
deleteByModel,
DelModelType,
DownLoadModelType,
GetBasicInfo,
DownLoadModelTypeSingle,
} from '@/services/drawBoardManage/api';
import {
FormOutlined,
DeleteOutlined,
PlusOutlined,
DownloadOutlined,
UploadOutlined,
SyncOutlined,
PlusSquareFilled,
} from '@ant-design/icons';
import classnames from 'classnames';
import zhCN from 'antd/es/locale/zh_CN';
import styles from './DrawBoardManage.less';
import AddModal from './AddModal';
import EditModal from './EditModal';
import AddTemplate from './AddTemplate';
import ChildAddTemplate from './ChildAddTemplate';
import EditTemplate from './EditTemplate';
import ImportModal from './ImportModal';
const { TabPane } = Tabs;
const DrawBoardManage = () => {
const [searchWord, setSearchWord] = useState(''); // 关键字
const [tableLoading, setTableLoading] = useState(false);
const [treeLoading, setTreeLoading] = useState(false);
const [tableData, setTableData] = useState([]);
const [selectColor, setSelectColor] = useState({}); // 当前选中颜色,操作时设置
const [treeData, setTreeData] = useState([]);
const [pickItem, setPickItem] = useState('');
const [rember1, setRember1] = useState();
const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
const [addModalVisible, setAddModalVisible] = useState(false);
const [editModalVisible, setEditModalVisible] = useState(false);
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [selectGroup, setSelectGroup] = useState([]);
const [addTemplateVisible, setAddTemplateVisible] = useState(false);
const [childAddTemplateVisible, setChildAddTemplateVisible] = useState(false);
const [checkStrictly, setCheckStrictly] = useState(false);
const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选字段配置数,机构改变时重置
const [deleteVisible, setDeleteVisible] = useState(false);
const [editVisible, setEditVisible] = useState(false);
const [multDeleteVisible, setMultDeleteVisible] = useState(false);
const [changeObj, setChangeObj] = useState('');
const [obj, setObj] = useState('');
const [importVisible, setImportVisible] = useState(false);
const { Search } = Input;
const [keepId, setKeepId] = useState('');
const [total, setTotal] = useState('');
const setRowClassName = record => (record.id === selectColor.id ? styles.clickRowStyle : '');
useEffect(() => {
if (pickItem) {
updateTableData(pickItem.name, searchWord);
}
}, [pickItem]);
useEffect(() => {
updateTrees();
GetBasicInfo().then(res => {
setKeepId(res.data);
});
}, []);
// 获取Tree数据
const updateTrees = () => {
setTreeLoading(true);
typeList({ name: '二维' }).then(res => {
if (res.say.statusCode === '0000') {
setTreeLoading(false);
if (!pickItem) {
// setPickItem(res.getMe[0]);
updateTableData('', searchWord);
}
setTreeData(res.getMe);
}
});
};
// 获取表格数据
const updateTableData = (e, searchWord) => {
console.log(e);
console.log(pickItem);
setTableLoading(true);
setSelectedRowKeys([]);
modelManageList({
dimonsion: '二维',
name: searchWord,
type: e,
}).then(res => {
setTableLoading(false);
if (res.say.statusCode === '0000') {
if (searchWord != '') {
setShowSearchStyle(true);
} else {
setShowSearchStyle(false);
}
if (res.getMe.length > 0) {
if (!pickItem) {
let aa = [];
console.log(res.getMe);
res.getMe.map(i => {
i.list.map(j => {
aa.push(j);
});
});
let bb = aa;
if (bb.length > 0) {
bb.map(i => {
if (i.children.length > 0) {
i.children.map(j => {
delete j.children;
});
} else {
delete i.children;
}
});
}
console.log(bb);
console.log(bb.length);
setTotal(bb.length);
setTableData(bb);
setSelectGroup(bb);
} else {
let aa = res.getMe[0].list;
if (aa.length > 0) {
aa.map(i => {
if (i.children.length > 0) {
i.children.map(j => {
delete j.children;
});
} else {
delete i.children;
}
});
}
console.log(aa.length);
setTotal(aa.length);
setTableData(aa);
setSelectGroup(aa);
}
} else {
setTotal(0);
setTableData([]);
}
}
});
};
// 获取表格数据
const updateTableDataAll = (e, searchWord) => {
setTableLoading(true);
setSelectedRowKeys([]);
modelManageList({
dimonsion: '二维',
name: searchWord,
type: e,
}).then(res => {
setTableLoading(false);
if (res.say.statusCode === '0000') {
if (searchWord != '') {
setShowSearchStyle(true);
} else {
setShowSearchStyle(false);
}
if (res.getMe.length > 0) {
let aa = [];
console.log(res.getMe);
res.getMe.map(i => {
i.list.map(j => {
aa.push(j);
});
});
let bb = aa;
if (bb.length > 0) {
bb.map(i => {
if (i.children.length > 0) {
i.children.map(j => {
delete j.children;
});
} else {
delete i.children;
}
});
}
console.log(bb);
console.log(bb.length);
setTotal(bb.length);
setTableData(bb);
setSelectGroup(bb);
} else {
setTotal(0);
setTableData([]);
}
}
});
};
const columns = [
{
title: '模型类型',
align: 'center',
width: 200,
dataIndex: 'typeName',
key: 'typeName',
render: (text, record) => {
console.log(record);
if (record.children) {
console.log(record.children.length);
}
const obj = {
children: <>{record.realModel == 0 ? <span size="middle">{text}</span> : <span />}</>,
props: {},
};
obj.props.colSpan = 1;
return obj;
},
},
{
title: '模型名称',
align: 'center',
width: 300,
dataIndex: 'name',
key: 'name',
render: (text, record) => {
const obj = {
children: <span>{searchStyle(text)} </span>,
props: {},
};
obj.props.colSpan = 1;
return obj;
},
},
{
title: '图像',
align: 'center',
width: 200,
dataIndex: 'modelPath',
key: 'modelPath',
render: (text, record) => {
let time = new Date();
let timestamp = Date.parse(time);
const obj = {
children: (
<Image
src={
window.location.origin +
`/Publish/Web/File/ModelManage/ModelFilePreview/${encodeURIComponent(text)}?
${timestamp}`
}
height="50px"
/>
),
props: {},
};
obj.props.colSpan = 1;
return obj;
},
},
// {
// title: '模型属性',
// align: 'center',
// width: 200,
// dataIndex: 'property',
// key: 'property',
// render: (text, record) => {
// const obj = {
// children: <span>{text} </span>,
// props: {},
// };
// obj.props.colSpan = 1;
// return obj;
// },
// },
{
title: '设计者',
align: 'center',
dataIndex: 'people',
width: 100,
key: 'people',
render: (text, record) => {
const obj = {
children: <span>{text} </span>,
props: {},
};
obj.props.colSpan = 1;
return obj;
},
},
{
title: '创建日期',
align: 'center',
width: 250,
dataIndex: 'createTime',
key: 'createTime',
render: (text, record) => {
const obj = {
children: <span>{text} </span>,
props: {},
};
obj.props.colSpan = 1;
return obj;
},
},
{
title: '操作',
align: 'center',
width: 200,
key: 'action',
render: record => {
let aa = (
<Space size="middle">
<Tooltip title="编辑">
<FormOutlined
onClick={() => onedit(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="导出">
<DownloadOutlined
onClick={() => ExportSingle(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="删除">
<DeleteOutlined
onClick={() => ondelete(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
</Space>
);
const obj = {
children: aa,
props: {},
};
obj.props.colSpan = record.realModel == 0 ? 1 : 1;
return obj;
},
},
{
title: '添加子模型',
align: 'center',
dataIndex: 'stateModel',
key: 'stateModel',
render: (text, record) => {
const obj = {
children: (
<>
{record.realModel == 0 ? (
<Space size="middle">
<Tooltip title="新增">
<PlusOutlined
onClick={() => onadd(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
</Space>
) : (
<Space size="middle" />
)}
</>
),
props: {},
};
obj.props.colSpan = record.realModel == 0 ? 1 : 1;
return obj;
},
},
];
const onadd = e => {
setObj(e);
setChildAddTemplateVisible(true);
};
const onedit = e => {
setObj(e);
setEditVisible(true);
};
const onexport = e => {
console.log(e);
setObj(e);
let a = document.createElement('a');
a.href = `${e.imgUrl}${encodeURIComponent(e.modelPath)}?_site=null`;
console.log(a);
let sufStr = e.modelPath.split('.').pop();
a.download = `${e.name}.${sufStr}`;
a.click();
a.remove();
};
const ondelete = e => {
setObj(e);
setDeleteVisible(true);
};
const submitSearchUser = () => {
updateTableData(pickItem.name, searchWord);
};
const handleSearch = e => {
setSearchWord(e.target.value);
updateTableData(pickItem.name, e.target.value);
};
const addModal = () => {
setAddModalVisible(true);
};
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
console.log(selectedRowKeys);
},
renderCell: (checked, record, index, originNode) => {
if (record.realModel != 0) {
return null;
}
return originNode;
},
};
const onUnfold = (expanded, record) => {
if (record.children) {
const data = [...selectGroup];
let index = data.indexOf(record);
// let index = selectGroup.find(i => i.type || i.name == record.name);
if (expanded) {
data.push(record);
setSelectGroup(data);
} else {
data.splice(index, 1);
setSelectGroup(data);
}
}
};
// 模糊查询匹配的样式
const searchStyle = val => {
let n;
if (showSearchStyle) {
n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
} else {
n = val;
}
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
const addTemplate = () => {
setAddTemplateVisible(true);
};
const deleteModalData = () => {
setTableLoading(true);
DelModelType({ modelId: changeObj.id }).then(res => {
setTableLoading(false);
if (res.code === 0) {
setDeleteModalVisible(false);
notification.success({
message: '删除成功',
duration: 2,
});
updateTrees();
if (pickItem.name == changeObj.name) {
setPickItem('');
setChangeObj('');
updateTableDataAll('', searchWord);
}
} else {
notification.error({
message: '删除失败',
description: res.msg,
});
}
});
};
const deleteData = () => {
setTableLoading(true);
deleteByModel({ ids: obj.id }).then(res => {
setTableLoading(false);
if (res.statusCode === '0000') {
setDeleteVisible(false);
notification.success({
message: '删除成功',
duration: 2,
});
updateTableData(pickItem.name, searchWord);
} else {
notification.error({
message: '删除失败',
description: res.info,
});
}
});
};
const multDeleteData = () => {
setMultDeleteVisible(true);
};
const multDelete = () => {
setTableLoading(true);
deleteByModel({ ids: selectedRowKeys.toString() }).then(res => {
setTableLoading(false);
if (res.statusCode === '0000') {
setMultDeleteVisible(false);
notification.success({
message: '删除成功',
duration: 2,
});
updateTableData(pickItem.name, searchWord);
} else {
notification.error({
message: '删除失败',
description: res.info,
});
}
});
};
const onAddTemplateSubmit = () => {
setAddTemplateVisible(false);
updateTableData(pickItem.name, searchWord);
};
const onChildAddTemplateSubmit = () => {
setChildAddTemplateVisible(false);
updateTableData(pickItem.name, searchWord);
};
const onEditTemplateSubmit = () => {
setEditVisible(false);
updateTableData(pickItem.name, searchWord);
};
const onImportSubmit = () => {
setImportVisible(false);
updateTableData(pickItem.name, searchWord);
};
const oneditlist = (e, item) => {
e.stopPropagation();
setChangeObj(item);
setEditModalVisible(true);
};
const ondeletelist = (e, item) => {
e.stopPropagation();
setChangeObj(item);
setDeleteModalVisible(true);
};
const importFile = () => {
setImportVisible(true);
};
const ExportData = () => {
if (selectedRowKeys.length == 0) {
message.warning('请先选择导出的数据');
} else {
window.location.href = DownLoadModelType({ modelList: selectedRowKeys.toString() });
}
};
const ExportSingle = e => {
console.log(e);
window.location.href = DownLoadModelTypeSingle({ modeId: e.id });
};
const choose = () => {
setPickItem('');
updateTableDataAll('', searchWord);
};
return (
<div className={styles.base_container}>
<Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
<div style={{ display: 'flex', justifyContent: 'space-around', width: '100%' }}>
{/* 左侧类型树 */}
<div style={{ width: '250px' }}>
<Spin spinning={treeLoading} tip="loading...">
<div
style={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center' }}
>
<span
style={{
fontSize: '15px ',
fontWeight: 'bold',
}}
>
模型类型
</span>
<Tooltip title="添加模型类型">
<PlusSquareFilled
onClick={() => addModal()}
style={{
color: '#1890FF',
fontSize: '25px',
marginTop: '3px',
}}
/>
</Tooltip>
</div>
<hr style={{ width: '100%', color: '#eeecec' }} />
<div
style={{
height: 'calc(100vh - 250px)',
overflowY: 'scroll',
}}
>
<div
onClick={choose}
className={classnames({
[styles.allItem]: true,
[styles.pickItem]: pickItem === '',
})}
>
<span style={{ marginLeft: '14px', lineHeight: '36px' }}>全部类型</span>
</div>
{treeData.length > 0 &&
treeData.map((item, index) => (
<div
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: item.id === pickItem.id,
[styles.listHover]: item !== pickItem && item === hoverItemIndex,
})}
onClick={e => {
setPickItem(item);
setRember1(item);
}}
onMouseEnter={() => {
setHoverItemIndex(item);
}}
onMouseLeave={() => {
setHoverItemIndex('');
}}
key={item.id}
>
<div className={styles.title}>
<span>{item.name}</span>
<span className={styles.tip}>
<span>
<FormOutlined
onClick={e => oneditlist(e, item)}
style={{ color: '#1890FF', fontSize: '16px' }}
/>
</span>
<span style={{ marginLeft: '10px' }}>
<DeleteOutlined
onClick={e => ondeletelist(e, item)}
style={{ color: '#e86060', fontSize: '16px' }}
/>
</span>
</span>
</div>
</div>
))}
</div>
</Spin>
</div>
{/* 右侧表格 */}
<div
style={{ width: '1400px', marginLeft: '20px', marginTop: '-10px', overflow: 'scroll' }}
>
<div
style={{
height: '41px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div>
<span style={{ width: '200px', display: 'inline-block' }}>
{pickItem.name}（已选{selectedRowKeys.length}/共{total}条）
</span>
</div>
<div>
<span style={{ lineHeight: '32px' }}>模型检索：</span>
<Search
style={{ width: 260 }}
placeholder="请输入关键词"
onSearch={submitSearchUser}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={addTemplate}
style={{ marginLeft: '20px' }}
>
新增
</Button>
<Button
type="primary"
icon={<DeleteOutlined />}
onClick={multDeleteData}
style={{ marginLeft: '20px' }}
>
删除
</Button>
{/* <Button
type="primary"
icon={<UploadOutlined />}
onClick={importFile}
style={{ marginLeft: '20px' }}
>
导入
</Button>
<Button
type="primary"
icon={<DownloadOutlined />}
onClick={ExportData}
style={{ marginLeft: '20px' }}
>
导出
</Button> */}
</div>
</div>
<Table
rowSelection={{ ...rowSelection, selectedRowKeys }}
rowClassName={setRowClassName}
size="small"
expandIconAsCell={false}
expandIconColumnIndex={-1}
rowKey={record => record.id}
locale={zhCN}
bordered
expandedRowKeys={selectGroup.map(item => item.id)}
// expandRowByClick
columns={columns}
dataSource={tableData}
loading={tableLoading}
scroll={{ x: 'max-content', y: 'calc(100vh - 262px)' }}
onExpand={onUnfold}
onRow={record => ({
// onDoubleClick: event => {
// event.stopPropagation();
// editEventType(record);
// }, // 双击
onClick: e => {
setSelectColor(record);
},
})}
pagination={{
showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</div>
</div>
</Card>
{/* 新增模板类型 */}
<AddModal
visible={addModalVisible}
onCancel={() => setAddModalVisible(false)}
updateTrees={updateTrees}
/>
<EditModal
visible={editModalVisible}
onCancel={() => setEditModalVisible(false)}
updateTrees={updateTrees}
changeObj={changeObj}
/>
<AddTemplate
visible={addTemplateVisible}
onClose={() => setAddTemplateVisible(false)}
treeData={treeData}
placement="right"
pickItem={pickItem}
callBackSubmit={onAddTemplateSubmit}
/>
<ChildAddTemplate
visible={childAddTemplateVisible}
onClose={() => setChildAddTemplateVisible(false)}
treeData={treeData}
placement="right"
pickItem={pickItem}
obj={obj}
callBackSubmit={onChildAddTemplateSubmit}
/>
<EditTemplate
visible={editVisible}
onClose={() => setEditVisible(false)}
treeData={treeData}
placement="right"
pickItem={pickItem}
obj={obj}
callBackSubmit={onEditTemplateSubmit}
/>
<Modal
visible={deleteModalVisible}
onCancel={() => setDeleteModalVisible(false)}
title="删除模型类型"
okText="确认"
cancelText="取消"
onOk={deleteModalData}
>
<span>
是否删除<span style={{ color: 'red' }}>{changeObj.name}</span>
</span>
</Modal>
<Modal
visible={deleteVisible}
onCancel={() => setDeleteVisible(false)}
title="删除"
okText="确认"
cancelText="取消"
onOk={deleteData}
>
<span>是否删除该数据</span>
</Modal>
<Modal
visible={multDeleteVisible}
onCancel={() => setMultDeleteVisible(false)}
title="批量删除"
okText="确认"
cancelText="取消"
onOk={multDelete}
>
<span>是否批量删除所选数据</span>
</Modal>
<ImportModal
visible={importVisible}
onCancel={() => setImportVisible(false)}
callBackSubmit={onImportSubmit}
/>
</div>
);
};
export default DrawBoardManage;
src/pages/platformCenter/baseFrameContainer/drawBoardManage/DrawBoardManage.less 0 → 100644
View file @ 898a5e41
.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 0 → 100644
View file @ 898a5e41
/*
* @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 0 → 100644
View file @ 898a5e41
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 0 → 100644
View file @ 898a5e41
/*
* @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 0 → 100644
View file @ 898a5e41
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 0 → 100644
View file @ 898a5e41
/* 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 0 → 100644
View file @ 898a5e41
/*
* @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.jsx 0 → 100644
View file @ 898a5e41
/* eslint-disable no-nested-ternary */
/*
* @Description:
* @Author: leizhe
* @Date: 2022-04-06 11:39:53
* @LastEditTime: 2022-04-14 17:26:54
* @LastEditors: leizhe
*/
import React, { useState, useEffect } from 'react';
import {
Button,
Descriptions,
Input,
Card,
Spin,
Divider,
Message,
Tabs,
Table,
Space,
Tooltip,
Modal,
Form,
notification,
message,
Image,
Pagination,
} from 'antd';
import {
FormOutlined,
DeleteOutlined,
PlusOutlined,
DownloadOutlined,
UploadOutlined,
SyncOutlined,
PlusSquareFilled,
CloudUploadOutlined,
} from '@ant-design/icons';
import {
List,
deleteByID,
DownLoadSketchPadType,
Export,
CaseTemplate,
} from '@/services/ModelFileManage/api';
import styles from './ModelFileManage.less';
import EditModal from './EditModal';
import ImportModal from './ImportModal';
const ModelFileManage = () => {
const [searchWord, setSearchWord] = useState(''); // 关键字
const [tableData, setTableData] = useState('');
const [tableLoading, setTableLoading] = useState(false);
const [pickItem, setPickItem] = useState('');
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectColor, setSelectColor] = useState({}); // 当前选中颜色,操作时设置
const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
const { Search } = Input;
const [total, setTotal] = useState();
const [pageSize, setPageSize] = useState(20);
const [currentPage, setCurrentPage] = useState(1);
const [deleteVisible, setDeleteVisible] = useState(false);
const [multDeleteVisible, setMultDeleteVisible] = useState(false);
const [editVisible, setEditVisible] = useState(false);
const [flag, setFlag] = useState(0);
const [importVisible, setImportVisible] = useState(false);
const [keepId, setKeepId] = useState([]);
const [upgradeVisible, setUpgradeVisible] = useState(false);
const setRowClassName = record =>
record.userID === selectColor.userID ? styles.clickRowStyle : '';
useEffect(() => {
setSelectedRowKeys([]);
setTableLoading(true);
List({ version: '全部', pageIndex: 1, pageSize: 20 }).then(res => {
setTableLoading(false);
if (res.say.statusCode === '0000') {
console.log(res.getMe);
setTableData(res.getMe);
setTotal(res.totalRcdNum);
let aa = [];
if (res.getMe.length > 0) {
res.getMe.map(i => {
aa.push(i.id);
});
}
console.log(aa);
setKeepId(aa);
}
});
}, [flag]);
const columns = [
{
title: '序号',
dataIndex: 'ID',
align: 'center',
key: 'ID',
width: 200,
render: (text, record, index) => (
<span>{`${currentPage * pageSize + index + 1 - pageSize}`}</span>
),
},
{
title: '画板名称',
dataIndex: 'name',
align: 'center',
key: 'name',
width: 400,
render: item => searchStyle(item),
},
{
title: '画板类型',
dataIndex: 'templet',
align: 'center',
key: 'templet',
width: 200,
render: (text, record, index) => (
<span>
{record.templet ? (
<span
style={{
backgroundColor: '#cfcf71',
width: '47px',
height: '23px',
display: 'inline-block',
borderRadius: '5px',
color: 'white',
}}
>
样品
</span>
) : record.isTemplate ? (
<span
style={{
backgroundColor: '#95c6f3',
width: '47px',
height: '23px',
display: 'inline-block',
borderRadius: '5px',
color: 'white',
}}
>
案例
</span>
) : (
<span
style={{
backgroundColor: '#dda8a8',
width: '47px',
height: '23px',
display: 'inline-block',
borderRadius: '5px',
color: 'white',
}}
>
普通
</span>
)}
</span>
),
},
{
title: '图像',
dataIndex: 'thumbnailURL',
align: 'center',
key: 'thumbnailURL',
width: 400,
render: text => (
<Image
src={window.location.origin + `/Publish/Web/File/Sketch/Preview/${text}`}
height="50px"
/>
),
},
{
title: '操作',
key: 'action',
align: 'center',
render: record => (
<Space size="middle">
<Tooltip title="编辑">
<FormOutlined
onClick={() => onedit(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
{record.isTemplate && !record.templet ? (
<Tooltip title="升级产品">
<CloudUploadOutlined
onClick={() => onupgrade(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
) : (
<></>
)}
<Tooltip title="删除">
<DeleteOutlined
onClick={() => ondelete(record)}
style={{ fontSize: '16px', color: '#e86060' }}
/>
</Tooltip>
</Space>
),
},
];
const onedit = e => {
console.log(e);
setPickItem(e);
setEditVisible(true);
};
const onupgrade = e => {
console.log(e);
setPickItem(e);
setUpgradeVisible(true);
};
const ondelete = e => {
console.log(e);
setPickItem(e);
setDeleteVisible(true);
};
// 复选框
const rowSelection = {
selectedRowKeys,
onChange: (RowKeys, Rows) => {
setSelectedRowKeys(RowKeys);
},
};
// 模糊查询匹配的样式
const searchStyle = val => {
let n;
if (showSearchStyle) {
n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
} else {
n = val;
}
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
const submitSearchUser = () => {
setSelectedRowKeys([]);
setTableLoading(true);
List({
version: '全部',
// pageIndex: currentPage,
// pageSize: pageSize,
queryInfo: searchWord,
}).then(res => {
setTableLoading(false);
if (res.say.statusCode === '0000') {
setShowSearchStyle(true);
setTableData(res.getMe);
setTotal(res.totalRcdNum);
}
});
};
const handleSearch = e => {
setSearchWord(e.target.value);
};
// 监听分页
const paginationChange = (page, pageSizes) => {
setCurrentPage(page);
setPageSize(pageSizes);
setSelectedRowKeys([]);
setTableLoading(true);
List({ version: '全部', pageIndex: page, pageSize: pageSizes, queryInfo: searchWord }).then(
res => {
setTableLoading(false);
if (res.say.statusCode === '0000') {
setTableData(res.getMe);
setTotal(res.totalRcdNum);
}
},
);
};
const clearSearchWord = () => {
setSearchWord('');
setSelectedRowKeys([]);
setTableLoading(true);
List({
version: '全部',
pageIndex: currentPage,
pageSize: pageSize,
queryInfo: '',
}).then(res => {
setTableLoading(false);
if (res.say.statusCode === '0000') {
setTableData(res.getMe);
setTotal(res.totalRcdNum);
}
});
};
const deleteData = () => {
deleteByID({ ids: pickItem.id }).then(res => {
if (res.statusCode === '0000') {
setDeleteVisible(false);
notification.success({
message: '删除成功',
duration: 2,
});
setFlag(flag + 1);
} else {
notification.error({
message: '删除失败',
description: res.info,
});
}
});
};
const multDeleteData = () => {
setMultDeleteVisible(true);
};
const multDelete = () => {
deleteByID({ ids: selectedRowKeys.toString() }).then(res => {
if (res.statusCode === '0000') {
setMultDeleteVisible(false);
notification.success({
message: '删除成功',
duration: 2,
});
setFlag(flag + 1);
} else {
notification.error({
message: '删除失败',
description: res.info,
});
}
});
};
const ExportData = () => {
if (selectedRowKeys.length == 0) {
message.warning('请先选择导出的数据');
} else {
window.location.href = Export({ ids: selectedRowKeys.toString() });
}
};
const MultExportData = () => {
window.location.href = Export({ ids: keepId.toString() });
};
const onImportSubmit = () => {
setImportVisible(false);
setFlag(flag + 1);
};
const importFile = () => {
setImportVisible(true);
};
const upgrade = () => {
CaseTemplate({ ids: pickItem.id }).then(res => {
if (res.statusCode === '0000') {
setUpgradeVisible(false);
notification.success({
message: '升级成功',
duration: 2,
});
setFlag(flag + 1);
} else {
notification.error({
message: '升级失败',
description: res.info,
});
}
});
};
const onEditSubmit = () => {
setImportVisible(false);
setFlag(flag + 1);
};
return (
<div className={styles.base_container}>
<Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
<div
style={{
height: '41px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div>
<span style={{ width: '200px', display: 'inline-block' }}>
（已选{selectedRowKeys.length}/共{total}条）
</span>
</div>
<div>
<span style={{ lineHeight: '32px' }}>画板检索：</span>
<Search
style={{ width: 260 }}
placeholder="请输入画板名称"
onSearch={submitSearchUser}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
<Button
type="primary"
icon={<SyncOutlined />}
onClick={clearSearchWord}
style={{ marginLeft: '20px' }}
>
重置
</Button>
<Button
type="primary"
icon={<DeleteOutlined />}
onClick={multDeleteData}
style={{ marginLeft: '20px' }}
>
删除
</Button>
<Button
type="primary"
icon={<UploadOutlined />}
onClick={importFile}
style={{ marginLeft: '20px' }}
>
导入
</Button>
<Button
type="primary"
icon={<DownloadOutlined />}
onClick={ExportData}
style={{ marginLeft: '20px' }}
>
导出
</Button>
<Button
type="primary"
icon={<DownloadOutlined />}
onClick={MultExportData}
style={{ marginLeft: '20px' }}
>
导出全部
</Button>
</div>
</div>
<div style={{ marginTop: '10px' }}>
<Table
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
rowClassName={setRowClassName}
size="small"
rowKey={record => record.id}
bordered
onRow={record => ({
// onDoubleClick: event => {
// event.stopPropagation();
// editEventType(record);
// }, // 双击
onClick: e => {
setSelectColor(record);
},
})}
columns={columns}
dataSource={tableData}
loading={tableLoading}
scroll={{ x: 'max-content', y: 'calc(100vh - 270px)' }}
pagination={false}
/>
</div>
<Pagination
style={{ float: 'right', marginTop: '10px' }}
total={total}
showTotal={item => `共 ${item} 条`}
defaultPageSize={pageSize}
defaultCurrent={1}
pageSizeOptions={[10, 20, 40, 100]}
current={currentPage}
onChange={paginationChange}
size="small"
showQuickJumper
/>
</Card>
<Modal
visible={deleteVisible}
onCancel={() => setDeleteVisible(false)}
title="删除"
okText="确认"
cancelText="取消"
onOk={deleteData}
>
<span>是否删除该数据</span>
</Modal>
<Modal
visible={multDeleteVisible}
onCancel={() => setMultDeleteVisible(false)}
title="批量删除"
okText="确认"
cancelText="取消"
onOk={multDelete}
>
<span>是否批量删除所选数据</span>
</Modal>
<EditModal
visible={editVisible}
onCancel={() => setEditVisible(false)}
pickItem={pickItem}
callBackSubmit={onImportSubmit}
/>
<ImportModal
visible={importVisible}
onCancel={() => setImportVisible(false)}
callBackSubmit={onEditSubmit}
/>
<Modal
visible={upgradeVisible}
onCancel={() => setUpgradeVisible(false)}
title="升级产品"
okText="确认"
cancelText="取消"
onOk={upgrade}
>
<span>是否升级为样品</span>
</Modal>
</div>
);
};
export default ModelFileManage;
src/pages/platformCenter/baseFrameContainer/modelFileManage/ModelFileManage.less 0 → 100644
View file @ 898a5e41
.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 0 → 100644
View file @ 898a5e41
/* 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 0 → 100644
View file @ 898a5e41
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 0 → 100644
View file @ 898a5e41
/*
* @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 0 → 100644
View file @ 898a5e41
/*
* @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}`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment