feat(mkmjArea): 新增封闭区域管理功能

master
fangjiakai 2025-12-18 09:17:22 +08:00
parent b15c8696b7
commit 3045b714db
8 changed files with 31 additions and 314 deletions

View File

@ -49,6 +49,6 @@
<noscript>此网页需要开启JavaScript功能。</noscript>
<!-- MAIN -->
<% const { root } = $element; %>
<div id="<%= root.id %>" style="width: 100%; height: 100%; position: relative"></div>
<div id="<%= root.id %>" style="width: 100%; height: 100%; position: relative;overflow-y: auto;"></div>
</body>
</html>

View File

@ -23,3 +23,8 @@ export const mkmjAreaBatchDelete = declareRequest(
export const mkmjAreaInfo = declareRequest('mkmjAreaLoading', 'Get > /primeport/mkmjArea/{id}');
export const getStatistics = declareRequest('mkmjAreaLoading', 'Post > @/primeport/mkmjArea/statistics');
export const getCorpInfoList = declareRequest(
'fireresourcesLoading',
'Get > /basicInfo/corpInfo/listAll?inType=0,1'
);

View File

@ -10,3 +10,4 @@ export const NS_MKMJAREAGATE = defineNamespace("mkmjAreaGate");
export const NS_MKMJGATELOG = defineNamespace("mkmjGateLog");
export const NS_MKMJGATEVIDEO = defineNamespace("mkmjGateVideo");
export const NS_MKMJPASSAGE = defineNamespace("mkmjPassage");
export const NS_ENCLOSEDAREA = defineNamespace("enclosedArea");

View File

@ -1,281 +0,0 @@
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: res.data.areaType + "",
areaStatus: 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);

View File

@ -145,8 +145,7 @@ function MkmjAreaGate(props) {
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
{addModalVisible && <AddModal
currentId={currentId}
areaId={areaId}
passageId={passageId}
@ -155,17 +154,16 @@ function MkmjAreaGate(props) {
setCurrentId("");
}}
getData={getData}
/>
/>}
<InfoModal
visible={infoModalVisible}
{infoModalVisible && <InfoModal
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
/>}
</div>
);
}
@ -194,7 +192,7 @@ function AddModalComponent(props) {
};
return (
<Modal
open={props.visible}
open
onCancel={onCancel}
onOk={form.submit}
title={props.currentId ? "编辑" : "新增"}
@ -234,7 +232,7 @@ function InfoModalComponent(props) {
return (
<Modal
open={props.visible}
open
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjAreaGate.loading}

View File

@ -125,25 +125,23 @@ function MkmjGateLog(props) {
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
{addModalVisible && <AddModal
currentId={currentId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
/>}
<InfoModal
visible={infoModalVisible}
{infoModalVisible && <InfoModal
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
/>}
</div>
);
}
@ -168,7 +166,7 @@ function AddModalComponent(props) {
};
return (
<Modal
open={props.visible}
open
onCancel={onCancel}
onOk={form.submit}
title="新增"
@ -209,7 +207,7 @@ function InfoModalComponent(props) {
return (
<Modal
open={props.visible}
open
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjGateLog.loading}

View File

@ -122,25 +122,23 @@ function MkmjGateVideo(props) {
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
{addModalVisible && <AddModal
currentId={currentId}
onCancel={() => {
setAddModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
/>}
<InfoModal
visible={infoModalVisible}
{infoModalVisible && <InfoModal
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
/>}
</div>
);
}
@ -165,7 +163,7 @@ function AddModalComponent(props) {
};
return (
<Modal
open={props.visible}
open
onCancel={onCancel}
onOk={form.submit}
title="新增"
@ -203,7 +201,7 @@ function InfoModalComponent(props) {
return (
<Modal
open={props.visible}
open
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"
loading={props.mkmjGateVideo.loading}

View File

@ -153,8 +153,7 @@ function MkmjPassage(props) {
]}
{...tableProps}
/>
<AddModal
visible={addModalVisible}
{addModalVisible && <AddModal
currentId={currentId}
areaId={areaId}
onCancel={() => {
@ -162,17 +161,16 @@ function MkmjPassage(props) {
setCurrentId("");
}}
getData={getData}
/>
/>}
<InfoModal
visible={infoModalVisible}
{infoModalVisible && <InfoModal
currentId={currentId}
onCancel={() => {
setInfoModalVisible(false);
setCurrentId("");
}}
getData={getData}
/>
/>}
</div>
);
}
@ -213,7 +211,7 @@ function AddModalComponent(props) {
};
return (
<Modal
open={props.visible}
open
onCancel={onCancel}
onOk={form.submit}
title={props.currentId ? "编辑" : "新增"}
@ -250,7 +248,7 @@ function InfoModalComponent(props) {
return (
<Modal
open={props.visible}
open
onCancel={props.onCancel}
footer={<Button onClick={props.onCancel}>关闭</Button>}
title="查看"