282 lines
9.4 KiB
JavaScript
282 lines
9.4 KiB
JavaScript
import {Connect} from "@cqsjjb/jjb-dva-runtime";
|
|
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
|
|
import {useEffect, useState} from "react";
|
|
import FormBuilder from "zy-react-library/components/FormBuilder";
|
|
import Search from "zy-react-library/components/Search";
|
|
import Table from "zy-react-library/components/Table";
|
|
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
|
|
import useTable from "zy-react-library/hooks/useTable";
|
|
import {NS_MKMJAREA} from "~/enumerate/namespace";
|
|
import AddIcon from "zy-react-library/components/Icon/AddIcon";
|
|
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
|
|
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
|
|
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
|
|
import Map from "zy-react-library/components/Map";
|
|
import MapSelector from "zy-react-library/components/Map/MapSelector";
|
|
|
|
const AREA_TYPE = [
|
|
{name: "人行口门", bianma: "1"},
|
|
{name: "车行口门", bianma: "2"},
|
|
{name: "综合口门", bianma: "3"},
|
|
]
|
|
|
|
const AREA_STATUS = [
|
|
{name: "停用", bianma: "0"},
|
|
{name: "正常", bianma: "1"},
|
|
{name: "暂时关闭", bianma: "2"},
|
|
]
|
|
|
|
function MkmjArea(props) {
|
|
const [addModalVisible, setAddModalVisible] = useState(false);
|
|
const [infoModalVisible, setInfoModalVisible] = useState(false);
|
|
const [currentId, setCurrentId] = useState("");
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
const [form] = Form.useForm();
|
|
const {tableProps, getData} = useTable(props["mkmjAreaList"], {
|
|
form,
|
|
params: {
|
|
eqAreaLevel: 1,
|
|
}
|
|
});
|
|
return (
|
|
<div style={{padding: 10}}>
|
|
<Search
|
|
form={form}
|
|
onFinish={getData}
|
|
options={[
|
|
{name: "likeAreaName", label: "口门名称"},
|
|
{name: "eqAreaStatus", label: "口门状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS},
|
|
{name: "eqAreaType", label: "口门类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE},
|
|
{name: "eqAreaParentId", label: "所属区域",render: <DictionarySelect dictValue="primeport_area" />},
|
|
]}
|
|
/>
|
|
<Table
|
|
rowSelection={{
|
|
selectedRowKeys,
|
|
onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
|
|
}}
|
|
toolBarRender={() => (
|
|
<Space>
|
|
<Button type="primary" icon={<AddIcon/>} onClick={() => setAddModalVisible(true)}>新增</Button>
|
|
<Button
|
|
icon={<DeleteIcon/>}
|
|
type="primary"
|
|
danger
|
|
onClick={() => {
|
|
if (!selectedRowKeys.length)
|
|
return message.warning("请选择要删除的行");
|
|
Modal.confirm({
|
|
title: "确定删除吗？",
|
|
onOk: async () => {
|
|
await props["mkmjAreaBatchDelete"]({ids: selectedRowKeys});
|
|
message.success("删除成功");
|
|
getData();
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
批量删除
|
|
</Button>
|
|
</Space>
|
|
)}
|
|
columns={[
|
|
{dataIndex: "areaParentName", title: "所属区域"},
|
|
{dataIndex: "areaName", title: "口门名称"},
|
|
{dataIndex: "areaType", title: "口门类型",render:(_,record)=>{
|
|
return record.areaType === 1 ? "人行口门" : record.areaType === 2 ? "车行口门" : "综合口门";
|
|
}},
|
|
{dataIndex: "location", title: "地理位置",render:(_,record)=>{
|
|
return `${record.latitude || ""}--${record.longitude || ""}`;
|
|
}},
|
|
{dataIndex: "videoNum", title: "视频个数",render:(_,record)=>{
|
|
return record.videoNum || 0;
|
|
}},
|
|
{
|
|
title: "操作",
|
|
align: "center",
|
|
width: 200,
|
|
render: (_, record) => (
|
|
<Space>
|
|
<Button
|
|
type="link"
|
|
onClick={() => {
|
|
setCurrentId(record.id);
|
|
setInfoModalVisible(true);
|
|
}}
|
|
>
|
|
查看
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
onClick={() => {
|
|
setCurrentId(record.id);
|
|
setAddModalVisible(true);
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
danger
|
|
onClick={() => {
|
|
Modal.confirm({
|
|
title: "确定删除吗？",
|
|
onOk: async () => {
|
|
await props["mkmjAreaDelete"]({id: record.id});
|
|
message.success("删除成功");
|
|
getData();
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
删除
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
onClick={() => {
|
|
props.history.push(`./MkmjPassage?areaId=${record.areaId}`)
|
|
}}
|
|
>
|
|
添加通道
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
onClick={() => {
|
|
props.history.push(`./MkmjGateVideo?areaGateId=${record.areaId}&deviceType=1`)
|
|
}}
|
|
>
|
|
添加摄像头
|
|
</Button>
|
|
</Space>
|
|
),
|
|
},
|
|
]}
|
|
{...tableProps}
|
|
/>
|
|
<AddModal
|
|
visible={addModalVisible}
|
|
currentId={currentId}
|
|
onCancel={() => {
|
|
setAddModalVisible(false);
|
|
setCurrentId("");
|
|
}}
|
|
getData={getData}
|
|
/>
|
|
|
|
<InfoModal
|
|
visible={infoModalVisible}
|
|
currentId={currentId}
|
|
onCancel={() => {
|
|
setInfoModalVisible(false);
|
|
setCurrentId("");
|
|
}}
|
|
getData={getData}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AddModalComponent(props) {
|
|
const [form] = Form.useForm();
|
|
useEffect(() => {
|
|
if (props.currentId) {
|
|
props["mkmjAreaInfo"]({id: props.currentId}).then((res) => {
|
|
form.setFieldsValue({...res.data,
|
|
areaType: Number(res.data.areaType),
|
|
areaStatus: Number(res.data.areaStatus),
|
|
});
|
|
});
|
|
}
|
|
}, [props.currentId]);
|
|
const onCancel = () => {
|
|
form.resetFields();
|
|
props.onCancel();
|
|
};
|
|
const submit = async (values) => {
|
|
await props[!props.currentId ? "mkmjAreaAdd" : "mkmjAreaEdit"]({...values, areaLevel:1, id: props.currentId});
|
|
onCancel();
|
|
props.getData();
|
|
};
|
|
return (
|
|
<Modal
|
|
open={props.visible}
|
|
onCancel={onCancel}
|
|
onOk={form.submit}
|
|
title={props.currentId ? "编辑" : "新增"}
|
|
loading={props.mkmjArea.loading}
|
|
width={800}
|
|
>
|
|
<FormBuilder
|
|
labelCol={{ span: 6 }}
|
|
form={form}
|
|
span={24}
|
|
onFinish={submit}
|
|
showActionButtons={false}
|
|
options={[
|
|
{name: "areaName", label: "口门名称"},
|
|
{name: "areaType", label: "口门类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE},
|
|
{name: "areaParentId", label: "所属区域",render: <DictionarySelect dictValue="primeport_area" onGetLabel={(label) => form.setFieldValue("areaParentName",label)}/>},
|
|
{name: "areaParentName", label: "所属区域",onlyForLabel:true},
|
|
{name: "areaRange", label: "口门位置"},
|
|
{name: "areaStatus", label: "口门状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS},
|
|
{key:"map",customizeRender:true,render:<Map/>}
|
|
|
|
]}
|
|
/>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
function InfoModalComponent(props) {
|
|
const [info, setInfo] = useState({});
|
|
const [mapVisible, setMapVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (props.currentId) {
|
|
props["mkmjAreaInfo"]({id: props.currentId}).then((res) => {
|
|
setInfo(res.data);
|
|
});
|
|
}
|
|
}, [props.currentId]);
|
|
|
|
return (
|
|
<Modal
|
|
open={props.visible}
|
|
onCancel={props.onCancel}
|
|
footer={<Button onClick={props.onCancel}>关闭</Button>}
|
|
title="查看"
|
|
loading={props.mkmjArea.loading}
|
|
>
|
|
<Descriptions
|
|
labelStyle={{width: 200}}
|
|
column={1}
|
|
bordered
|
|
items={[
|
|
{children: info.areaParentName, label: "所属区域"},
|
|
{children: info.areaName, label: "口门名称"},
|
|
{children: info.areaRange, label: "口门位置"},
|
|
{children: info.areaLevel===1?"一级":info.areaLevel===2?"二级":"三级", label: "区域级别"},
|
|
{children: info.areaType===1?"人行口门":info.areaType===2?"车行口门":"综合口门", label: "口门类型"},
|
|
{children: info.areaStatus===0?"停用":info.areaStatus===1?"正常":"暂时关闭", label: "区域状态"},
|
|
{children: <LocationIcon onClick={() => {
|
|
setMapVisible(true);
|
|
}}/>, label: "位置"},
|
|
]}
|
|
/>
|
|
|
|
<MapSelector
|
|
visible={mapVisible}
|
|
onClose={() => setMapVisible(false)}
|
|
longitude={info.longitude}
|
|
latitude={info.latitude}
|
|
disable={true}
|
|
/>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
const AddModal = Connect([NS_MKMJAREA], true)(AddModalComponent);
|
|
const InfoModal = Connect([NS_MKMJAREA], true)(InfoModalComponent);
|
|
export default Connect([NS_MKMJAREA], true)(MkmjArea);
|
|
|