feat(): 增加视频基本信息
parent
709cb09a6b
commit
73cb86f503
|
|
@ -12,7 +12,20 @@ const apiurl = {
|
||||||
router: service_ykz + '/getRouters',
|
router: service_ykz + '/getRouters',
|
||||||
role: service_ykz + '/system/menu/list'
|
role: service_ykz + '/system/menu/list'
|
||||||
},
|
},
|
||||||
|
dataResourcesCenter: {
|
||||||
|
basicData: {
|
||||||
|
spjbxx: {
|
||||||
|
page: service_ykz + "/attCctvBase/page",
|
||||||
|
update: service_ykz + "/attCctvBase/update",
|
||||||
|
save: service_ykz + "/attCctvBase/insert",
|
||||||
|
delete: service_ykz + "/attCctvBase/del",
|
||||||
|
tree: service_ykz + "/cctvBMenu/tree",
|
||||||
|
saveTree: service_ykz + "/cctvBMenu/insert",
|
||||||
|
editTree: service_ykz + "/cctvBMenu/update",
|
||||||
|
deleteTree: service_ykz + "/cctvBMenu/del"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
home: {
|
home: {
|
||||||
videoList: service_fxdd + "/gateValveCctvRel/list",
|
videoList: service_fxdd + "/gateValveCctvRel/list",
|
||||||
videosrc: service_fxdd + "/attCctvBase/preview/",
|
videosrc: service_fxdd + "/attCctvBase/preview/",
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export async function page(params = {}) {
|
||||||
return { list: data.records, totalRow: data.total };
|
return { list: data.records, totalRow: data.total };
|
||||||
}
|
}
|
||||||
export async function getVideoTreeData(params = {}) {
|
export async function getVideoTreeData(params = {}) {
|
||||||
const { data, code, msg } = await httppost2(apiurl.rcgl.aqgl.fxgkqd.tree) || {};
|
const { data, code, msg } = await httpget2(apiurl.dataResourcesCenter.basicData.spjbxx.tree) || {};
|
||||||
if (code !== 200) {
|
if (code !== 200) {
|
||||||
message.error(msg || '请求失败');
|
message.error(msg || '请求失败');
|
||||||
return [];
|
return [];
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@ import Xjxpz from "./Gcyx/xcxj/xjxpz"
|
||||||
import Dmgl from "./SafeWatch/Dmgl"
|
import Dmgl from "./SafeWatch/Dmgl"
|
||||||
import Cdgx from "./SafeWatch/cdgx"
|
import Cdgx from "./SafeWatch/cdgx"
|
||||||
import Gzpz from './SafeWatch/Gzpz'
|
import Gzpz from './SafeWatch/Gzpz'
|
||||||
|
import Spjbxx from './SystemMangant/spBasicInfo'
|
||||||
import TestLine from './TestLine'
|
import TestLine from './TestLine'
|
||||||
// const HomePage = lazy(() => import('./Home'))
|
// const HomePage = lazy(() => import('./Home'))
|
||||||
|
|
||||||
|
|
@ -90,6 +91,7 @@ const AppRouters: React.FC = () => {
|
||||||
{ path: 'xtgl/bmgl', element: <Dept /> },
|
{ path: 'xtgl/bmgl', element: <Dept /> },
|
||||||
{ path: 'xtgl/jsgl', element: <Role /> },
|
{ path: 'xtgl/jsgl', element: <Role /> },
|
||||||
{ path: 'xtgl/cdgl', element: <MenuM /> },
|
{ path: 'xtgl/cdgl', element: <MenuM /> },
|
||||||
|
{ path: 'xtgl/spjbxx', element: <Spjbxx /> },
|
||||||
|
|
||||||
// 测试曲线
|
// 测试曲线
|
||||||
{ path: 'testLine/testLine', element: <TestLine /> },
|
{ path: 'testLine/testLine', element: <TestLine /> },
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher),
|
||||||
|
li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper,
|
||||||
|
li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span{
|
||||||
|
color: #000 !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.treeBox1{
|
||||||
|
.ant-tree-node-content-wrapper{
|
||||||
|
position: static !important;
|
||||||
|
}
|
||||||
|
.hover-ele{
|
||||||
|
&:hover{
|
||||||
|
color:#259dff
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.AdcdTreeSelectorStyle{
|
||||||
|
.ant-input-wrapper{
|
||||||
|
|
||||||
|
.ant-input-affix-wrapper{
|
||||||
|
width: 98%;
|
||||||
|
}
|
||||||
|
.ant-input-group-addon{
|
||||||
|
.ant-btn{
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.treeTitle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.treeBtn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.treeTitle:hover {
|
||||||
|
.treeBtn {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.no-matter{
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,329 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Tree, Input, Checkbox, Spin,Modal,Form,Col,Row,message,Space } from 'antd';
|
||||||
|
import { EditOutlined,PlusCircleOutlined, DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
|
||||||
|
import './index.less';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
|
||||||
|
import { getVideoTreeData } from '../../../../service/warn';
|
||||||
|
import apiurl from '../../../../service/apiurl';
|
||||||
|
import { httppost3,httpget6 } from '../../../../utils/request';
|
||||||
|
|
||||||
|
const { Search } = Input;
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
onSelectFun?: any;
|
||||||
|
setAdcd?: any;
|
||||||
|
showCheckbox: any;
|
||||||
|
tableName?: any;
|
||||||
|
onChangeOpen?: any;
|
||||||
|
hasAlertBox?: boolean;//顶部是否有预警条
|
||||||
|
isFetch?: boolean;
|
||||||
|
}
|
||||||
|
const { confirm } = Modal;
|
||||||
|
const AdcdTreeSelector: React.FC<IProps> = ({ onSelectFun, setAdcd, showCheckbox, tableName, hasAlertBox }) => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [treeData, setTreeData] = useState([]);
|
||||||
|
const [newTreeData, setNewTreeData] = useState([]);
|
||||||
|
const [isFiter, setIsFiter] = useState(false);
|
||||||
|
const [expandedKeys, setExpandedKeys] = useState([]);
|
||||||
|
const [checkedKeys, setCheckedKeys] = useState([]);
|
||||||
|
const [selectedKeys, setSelectedKeys] = useState<any>([]);
|
||||||
|
const [selectedItem, setSelectedItem] = useState({});
|
||||||
|
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||||
|
const [treeBoxHeight, setTreeBoxHeight] = useState({});
|
||||||
|
const [jdOpen, setJdOpen] = useState(false)
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [mode, setMode] = useState('')
|
||||||
|
const [itemDetail, setItemDetail] = useState<any>({})
|
||||||
|
const [orderMax, setOrderMax] = useState<any>(0)
|
||||||
|
useEffect(() => {
|
||||||
|
getCustomerTreeData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(tableName){
|
||||||
|
setSelectedKeys([]);
|
||||||
|
}
|
||||||
|
}, [tableName]);
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
//根据预警条计/多选框计算高度
|
||||||
|
if(hasAlertBox){
|
||||||
|
if(showCheckbox){
|
||||||
|
setTreeBoxHeight({height:"calc( 100vh - 240px )"})
|
||||||
|
}else{
|
||||||
|
setTreeBoxHeight({height:"calc( 100vh - 210px )"})
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(showCheckbox){
|
||||||
|
setTreeBoxHeight({height:"calc( 100vh - 224px )"})
|
||||||
|
}else{
|
||||||
|
setTreeBoxHeight({height:"calc( 100vh - 194px )"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},[hasAlertBox])
|
||||||
|
|
||||||
|
const getCustomerTreeData = async () => {
|
||||||
|
const adcdTreedata: any = await getVideoTreeData();
|
||||||
|
const item:any = adcdTreedata
|
||||||
|
if (item) {
|
||||||
|
setSelectedKeys([item[0]?.id])
|
||||||
|
setAdcd(item[0]?.id)
|
||||||
|
}
|
||||||
|
if (adcdTreedata.length > 0) {
|
||||||
|
handelTreeData(adcdTreedata);
|
||||||
|
setTreeData(adcdTreedata);
|
||||||
|
setLoading(false);
|
||||||
|
setOrderMax(Math.max(...adcdTreedata.map((item:any) => item?.orderIndex)))
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// @ts-ignore
|
||||||
|
const handelTreeData = (data) => {
|
||||||
|
if (data.length > 0) {
|
||||||
|
// @ts-ignore
|
||||||
|
data.forEach(item => {
|
||||||
|
item.title = item.name;
|
||||||
|
item.key = item.id;
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
handelTreeData(item.children);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExpand = (expandedKeysValue:any) => {
|
||||||
|
setExpandedKeys(expandedKeysValue);
|
||||||
|
setAutoExpandParent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const onSelect = (selectedKeysValue:any, info:any) => {
|
||||||
|
setSelectedKeys(selectedKeysValue);
|
||||||
|
setSelectedItem(info);
|
||||||
|
|
||||||
|
if (info.selectedNodes.length > 0) {
|
||||||
|
let selectData = info.selectedNodes[0];
|
||||||
|
|
||||||
|
let adcdVal = "";
|
||||||
|
adcdVal = selectData.key;
|
||||||
|
|
||||||
|
let params = { id: adcdVal };
|
||||||
|
if(onSelectFun){
|
||||||
|
onSelectFun(params);
|
||||||
|
}
|
||||||
|
if(setAdcd){
|
||||||
|
setAdcd(adcdVal)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let params = { id: "" };
|
||||||
|
if(onSelectFun){
|
||||||
|
onSelectFun(params);
|
||||||
|
}
|
||||||
|
if(setAdcd){
|
||||||
|
setAdcd("")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const deleteJd = (v: any) => {
|
||||||
|
confirm({
|
||||||
|
title: '删除',
|
||||||
|
icon: <ExclamationCircleOutlined />,
|
||||||
|
content: '确认删除此数据',
|
||||||
|
okText: '确定',
|
||||||
|
okType: 'primary',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk: async() => {
|
||||||
|
try {
|
||||||
|
const res = await httpget6(apiurl.dataResourcesCenter.basicData.spjbxx.deleteTree + `/${v.id}`)
|
||||||
|
if (res.code === 200) {
|
||||||
|
message.success('删除成功');
|
||||||
|
getCustomerTreeData();
|
||||||
|
}
|
||||||
|
if (res.code === 400) {
|
||||||
|
message.error(res.description);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
console.log('Cancel');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增节点
|
||||||
|
const saveJd = (v: any) => {
|
||||||
|
if (v) {
|
||||||
|
// form.setFieldValue('name', v.title);
|
||||||
|
setItemDetail(v);
|
||||||
|
}
|
||||||
|
setJdOpen(true);
|
||||||
|
setMode("save");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑节点
|
||||||
|
const editJd = (v: any) => {
|
||||||
|
setJdOpen(true);
|
||||||
|
form.setFieldsValue(v);
|
||||||
|
setMode("edit");
|
||||||
|
setItemDetail(v);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onOk = async () => {
|
||||||
|
const name = form.getFieldValue('name');
|
||||||
|
const url = mode == "save" ? apiurl.dataResourcesCenter.basicData.spjbxx.saveTree : apiurl.dataResourcesCenter.basicData.spjbxx.editTree;
|
||||||
|
let saveParams = {
|
||||||
|
name,
|
||||||
|
parentId: itemDetail?.id || undefined,
|
||||||
|
orderIndex:itemDetail?.orderIndex || orderMax
|
||||||
|
}
|
||||||
|
let editParams = {
|
||||||
|
...itemDetail,
|
||||||
|
name
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await httppost3(url, mode == "save" ? saveParams:editParams)
|
||||||
|
if (res.code == 200) {
|
||||||
|
message.success(mode == "save" ? '新增成功' : '编辑成功');
|
||||||
|
setJdOpen(false);
|
||||||
|
getCustomerTreeData();
|
||||||
|
form.resetFields();
|
||||||
|
} else if (res.code == 400) {
|
||||||
|
message.error(res.description);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className='AdcdTreeSelectorStyle'>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '10px',
|
||||||
|
color: "#409eff",
|
||||||
|
borderBottom: "1px solid #dfdfdf",
|
||||||
|
marginBottom: 20,
|
||||||
|
cursor: "pointer"
|
||||||
|
}}
|
||||||
|
onClick={saveJd}
|
||||||
|
>新增视频区域</div>
|
||||||
|
{
|
||||||
|
loading?
|
||||||
|
<div style={{position:"absolute",top:"200px",left:"35%",background:"#fff",padding:"20px 30px",borderRadius:"10px"}}>
|
||||||
|
<Spin tip="正在加载..." size="large" spinning={loading} />
|
||||||
|
</div>:null
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="treeBox1" style={{...treeBoxHeight,marginTop:"10px"}}>
|
||||||
|
<div style={{ width: "300px"}}>
|
||||||
|
{
|
||||||
|
treeData.length > 0 &&
|
||||||
|
<Tree
|
||||||
|
defaultExpandAll={true}
|
||||||
|
blockNode={false}
|
||||||
|
onExpand={onExpand}
|
||||||
|
checkedKeys={checkedKeys}
|
||||||
|
onSelect={onSelect}
|
||||||
|
selectedKeys={selectedKeys}
|
||||||
|
treeData={isFiter ? newTreeData : treeData}
|
||||||
|
showLine={true}
|
||||||
|
titleRender={(v: any) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
// style={
|
||||||
|
// {
|
||||||
|
// position: 'relative',
|
||||||
|
// display: 'flex',
|
||||||
|
// width: "300px",
|
||||||
|
// color: "#000",
|
||||||
|
// height: "30px"
|
||||||
|
// }}
|
||||||
|
style={{width:200}}
|
||||||
|
className='treeTitle'
|
||||||
|
>
|
||||||
|
<span>{v.title}</span>
|
||||||
|
<Space
|
||||||
|
// style={{
|
||||||
|
// display: 'flex',
|
||||||
|
// columnGap: '5px',
|
||||||
|
// marginLeft: "10%",
|
||||||
|
// position: "absolute",
|
||||||
|
// top: "-3px",
|
||||||
|
// right: "-4px",
|
||||||
|
// backgroundColor: "#fff",
|
||||||
|
// padding: '10px',
|
||||||
|
// zIndex: 10,
|
||||||
|
// }}
|
||||||
|
size={4}
|
||||||
|
className='treeBtn'
|
||||||
|
>
|
||||||
|
<PlusCircleOutlined
|
||||||
|
style={{ fontSize: 15 }}
|
||||||
|
title='新增'
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
saveJd(v);
|
||||||
|
}}
|
||||||
|
className='hover-ele'
|
||||||
|
/>
|
||||||
|
<EditOutlined
|
||||||
|
title='编辑'
|
||||||
|
style={{ fontSize: 15 }}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
editJd(v);
|
||||||
|
}}
|
||||||
|
className='hover-ele'
|
||||||
|
/>
|
||||||
|
<DeleteOutlined
|
||||||
|
title='删除'
|
||||||
|
style={{ fontSize: 15 }}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
deleteJd(v);
|
||||||
|
}}
|
||||||
|
className='hover-ele'
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
open={jdOpen}
|
||||||
|
title={mode == "save" ? "新增" : '编辑'}
|
||||||
|
destroyOnClose
|
||||||
|
onCancel={() => { setJdOpen(false); form.resetFields()}}
|
||||||
|
onOk={onOk}
|
||||||
|
>
|
||||||
|
<Form form={form} {...formItemLayout}>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="视频区域"
|
||||||
|
name="name"
|
||||||
|
rules={[{required: true}]}
|
||||||
|
>
|
||||||
|
<Input allowClear/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AdcdTreeSelector;
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
import React,{useEffect,useState,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row, Col, DatePicker, TreeSelect,message,Image,Modal } from 'antd';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import './index.less'
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
import { httpget2, httppost2 } from '../../../utils/request';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onCrudSuccess }) => {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [AdcdList, setAdcdList] = useState([])
|
||||||
|
const handleData = (arr) => {
|
||||||
|
arr.forEach(item => {
|
||||||
|
item.value = item.id;
|
||||||
|
item.title = item.name;
|
||||||
|
if (item.children && item.children.length) {
|
||||||
|
handleData(item.children)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const getAdcdList = async() => {
|
||||||
|
try {
|
||||||
|
const res = await httpget2(apiurl.dataResourcesCenter.basicData.spjbxx.tree)
|
||||||
|
handleData(res.data)
|
||||||
|
setAdcdList(res.data)
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onFinish = async (values) => {
|
||||||
|
values.buildDate = values.buildDate ? moment(values.buildDate).format('YYYY-MM-DD 00:00:00'): '';
|
||||||
|
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.dataResourcesCenter.basicData.spjbxx.update, values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
onSave(apiurl.dataResourcesCenter.basicData.spjbxx.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getAdcdList()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form form={form} {...formItemLayout} onFinish={onFinish} initialValues={record}>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="视频点名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="所在区域"
|
||||||
|
name="menuId"
|
||||||
|
>
|
||||||
|
<TreeSelect
|
||||||
|
showSearch
|
||||||
|
treeData={AdcdList}
|
||||||
|
disabled={mode === 'view'}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
allowClear
|
||||||
|
dropdownStyle={{
|
||||||
|
maxHeight: 400,
|
||||||
|
overflow: 'auto',
|
||||||
|
}}
|
||||||
|
// fieldNames={{label:"name", value:"id" }}
|
||||||
|
// treeDefaultExpandedKeys={["421181000000000"]}
|
||||||
|
treeNodeFilterProp="title"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="监控点类型"
|
||||||
|
name="type"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<NormalSelect
|
||||||
|
allowClear
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
disabled={mode==='view'}
|
||||||
|
options={[{ label: "枪机", value: 2}, { label: "球机", value:1 }]} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="IP及端口号"
|
||||||
|
name="ipAddress"
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="通道号"
|
||||||
|
name="chan"
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="建成日期"
|
||||||
|
name="buildDate"
|
||||||
|
getValueFromEvent={(e, dateString) => dateString}
|
||||||
|
getValueProps={value => ({
|
||||||
|
value: value ? moment(value) : undefined
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<DatePicker allowClear style={{ width: '100%' }} disabled={mode==='view'} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="经度"
|
||||||
|
name="lgtd"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="纬度"
|
||||||
|
name="lttd"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="视频序列号"
|
||||||
|
name="indexCode"
|
||||||
|
labelCol={{ span: 3, offset: 0 }}
|
||||||
|
wrapperCol={{span:19,offset:0}}
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="备注"
|
||||||
|
name="remark"
|
||||||
|
labelCol={{ span: 3, offset: 0 }}
|
||||||
|
wrapperCol={{span:19,offset:0}}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
import React, { useState, useEffect,useMemo,useRef } from 'react'
|
||||||
|
import { PlusOutlined,DeleteOutlined,FolderOpenOutlined,SearchOutlined,UndoOutlined } from '@ant-design/icons';
|
||||||
|
import { Table, Card,Button,message,Form,Input,Modal,Popconfirm } from 'antd';
|
||||||
|
import ToolBar from './toolbar';
|
||||||
|
import ModalForm from './form';
|
||||||
|
import AdcdTreeSelector from "./AdcdTreeSelector";
|
||||||
|
import BasicCrudModal from '../../../components/crud/BasicCrudModal2';
|
||||||
|
import UsePageTable from '../../../components/crud/usePageTable2';
|
||||||
|
import { createCrudService } from '../../../components/crud/_';
|
||||||
|
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import './index.less'
|
||||||
|
export default function Xmzlmb() {
|
||||||
|
const refModal = useRef();
|
||||||
|
const [code, setCode] = useState()
|
||||||
|
const [searchVal, setSearchVal] = useState({})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ title: '视频ID', key: 'id', dataIndex: 'id', width: 100, align:"center" },
|
||||||
|
{ title: '视频点名称', key: 'name', dataIndex: 'name', width: 300, align:"center" },
|
||||||
|
{title: '所在区域', key: 'menuName', dataIndex: 'menuName', width: 300, align: "center",},
|
||||||
|
{
|
||||||
|
title: '监控点类型', key: 'type', dataIndex: 'type', width: 200, align: "center",
|
||||||
|
render: (value, row) => <span>{value == 1 ? "球机": value == 2 ? "枪机": ''}</span>
|
||||||
|
},
|
||||||
|
{ title: '经度', key: 'lgtd', dataIndex: 'lgtd', width: 100, align:"center" },
|
||||||
|
{ title: '纬度', key: 'lttd', dataIndex: 'lttd', width: 100, align: "center" },
|
||||||
|
{ title: '视频序列号', key: 'indexCode', dataIndex: 'indexCode', width: 300, align:"center" },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (<CrudOpRender_text edit={true} del={true} view={true} command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
const { tableProps, search, refresh } = UsePageTable(createCrudService(apiurl.dataResourcesCenter.basicData.spjbxx.page).find_noCode, {});
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit(params)
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.dataResourcesCenter.basicData.spjbxx.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchVal && code) {
|
||||||
|
let params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
menuId:code
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}
|
||||||
|
}, [code,searchVal]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(code);
|
||||||
|
|
||||||
|
}, [code])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='content-box' style={{ backgroundColor: '#fff', height: '100%',display:'flex',padding:'10px' }}>
|
||||||
|
<div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 168px)',width:'340px'}}>
|
||||||
|
<AdcdTreeSelector hasAlertBox={false} setAdcd={setCode}/>
|
||||||
|
</div>
|
||||||
|
<div className='AdcdTreeTableBox' style={{flex:1,overflowX:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
rowKey="id"
|
||||||
|
{...tableProps}
|
||||||
|
scroll={{ x: width, y: "calc( 100vh - 400px )" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title=""
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={refresh}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
|
||||||
|
.basci-title{
|
||||||
|
display: flex;
|
||||||
|
column-gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding:5px 25px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
&::before{
|
||||||
|
position: absolute;
|
||||||
|
top:7px;
|
||||||
|
left:0;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 5px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #0079fe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker, Popconfirm } from 'antd';
|
||||||
|
import { SearchOutlined,UndoOutlined } from '@ant-design/icons';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, }) => {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const onFinish = (val) => {
|
||||||
|
setSearchVal(val);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="视频点名称" name="name">
|
||||||
|
<Input allowClear style={{width:'180px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="监控点类型" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '180px' }} options={[{label:"枪机",value:2},{label:"球机",value:1}]} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item >
|
||||||
|
<Button
|
||||||
|
type='primary'
|
||||||
|
htmlType="submit"
|
||||||
|
>查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item >
|
||||||
|
<Button
|
||||||
|
onClick={() => form.resetFields()}
|
||||||
|
>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
onSave && (
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新建</Button>
|
||||||
|
</Form.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
Loading…
Reference in New Issue