feat(): 增加视频基本信息
parent
709cb09a6b
commit
73cb86f503
|
|
@ -12,7 +12,20 @@ const apiurl = {
|
|||
router: service_ykz + '/getRouters',
|
||||
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: {
|
||||
videoList: service_fxdd + "/gateValveCctvRel/list",
|
||||
videosrc: service_fxdd + "/attCctvBase/preview/",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export async function page(params = {}) {
|
|||
return { list: data.records, totalRow: data.total };
|
||||
}
|
||||
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) {
|
||||
message.error(msg || '请求失败');
|
||||
return [];
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import Xjxpz from "./Gcyx/xcxj/xjxpz"
|
|||
import Dmgl from "./SafeWatch/Dmgl"
|
||||
import Cdgx from "./SafeWatch/cdgx"
|
||||
import Gzpz from './SafeWatch/Gzpz'
|
||||
import Spjbxx from './SystemMangant/spBasicInfo'
|
||||
import TestLine from './TestLine'
|
||||
// const HomePage = lazy(() => import('./Home'))
|
||||
|
||||
|
|
@ -90,6 +91,7 @@ const AppRouters: React.FC = () => {
|
|||
{ path: 'xtgl/bmgl', element: <Dept /> },
|
||||
{ path: 'xtgl/jsgl', element: <Role /> },
|
||||
{ path: 'xtgl/cdgl', element: <MenuM /> },
|
||||
{ path: 'xtgl/spjbxx', element: <Spjbxx /> },
|
||||
|
||||
// 测试曲线
|
||||
{ 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