port XiaoFang 文件按块拆分
LiuJiaNan
parent
48f768bdc6
commit
84fcbf0260
|
|
@ -0,0 +1,67 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Spin } from "antd";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||
import { NS_BI } from "~/enumerate/namespace";
|
||||
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
|
||||
import { Context } from "~/pages/Container/Map/js/context";
|
||||
import "./index.less";
|
||||
|
||||
/** 消防设备列表区块根据查询条件请求并展示消防点位设备。 */
|
||||
function FireDeviceListPanel(props) {
|
||||
const { portArea } = useContext(Context);
|
||||
const { queryParams } = props;
|
||||
const [deviceList, setDeviceList] = useState([]);
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadDeviceList = async () => {
|
||||
setIsVisible(false);
|
||||
const { data } = await props.getFirePointDeviceList({
|
||||
portArea,
|
||||
...queryParams,
|
||||
});
|
||||
setDeviceList(data);
|
||||
setIsVisible(true);
|
||||
};
|
||||
|
||||
loadDeviceList();
|
||||
}, [queryParams]);
|
||||
|
||||
return (
|
||||
<Panel title="消防设备列表" className="port-fire__device-list">
|
||||
<div className="port-fire-device-list__content">
|
||||
<div className="port-fire-device-list__table">
|
||||
<div className="port-fire-device-list__row">
|
||||
<div className="port-fire-device-list__cell">消防点位</div>
|
||||
<div className="port-fire-device-list__cell">设备类型</div>
|
||||
<div className="port-fire-device-list__cell">数量</div>
|
||||
</div>
|
||||
<div className="port-fire-device-list__table-body">
|
||||
<Spin spinning={props.bi.xiaoFangFirePointDeviceListLoading}>
|
||||
{isVisible && (
|
||||
<SeamlessScroll list={deviceList} step={0.5}>
|
||||
{deviceList.map((item, index) => (
|
||||
<div key={index} className="port-fire-device-list__row">
|
||||
<div className="port-fire-device-list__cell">
|
||||
{item.firePointName}
|
||||
</div>
|
||||
<div className="port-fire-device-list__cell">
|
||||
{item.fireDeviceTypeName}
|
||||
</div>
|
||||
<div className="port-fire-device-list__cell">
|
||||
{item.deviceCount}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</SeamlessScroll>
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default Connect([NS_BI], true)(FireDeviceListPanel);
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
.port-fire__device-list {
|
||||
margin-top: 10px;
|
||||
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0.8));
|
||||
}
|
||||
|
||||
.port-fire-device-list__content {
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
border-image: linear-gradient(to bottom,
|
||||
rgba(58, 122, 149, 0),
|
||||
rgba(58, 122, 149, 1)) 1;
|
||||
}
|
||||
|
||||
.port-fire-device-list__table {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.port-fire-device-list__table-body {
|
||||
height: 300px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.port-fire-device-list__table-body .port-fire-device-list__row:nth-child(odd) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.port-fire-device-list__row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
background-color: rgba(42, 86, 158, 0.53);
|
||||
}
|
||||
|
||||
.port-fire-device-list__cell {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { Button, Form, Input, Space } from "antd";
|
||||
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
|
||||
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
|
||||
import "./index.less";
|
||||
|
||||
/** 消防设备查询区块负责收集筛选条件并通知设备列表刷新。 */
|
||||
function FireSearchPanel({ onSearch }) {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
form.submit();
|
||||
};
|
||||
|
||||
return (
|
||||
<Panel title="消防设备查询" className="port-fire__search">
|
||||
<div className="port-fire-search__content">
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{ span: 8 }}
|
||||
onFinish={onSearch}
|
||||
styles={{ label: { color: "#fff" } }}
|
||||
>
|
||||
<Form.Item label="消防设备类型" name="fireDeviceType">
|
||||
<DictionarySelect
|
||||
placeholder="消防设备类型"
|
||||
classNames={{ root: "port-fire-search__select" }}
|
||||
styles={{
|
||||
root: {
|
||||
color: "#fff",
|
||||
backgroundColor: "rgba(2, 30, 81, 0.85)",
|
||||
borderColor: "rgba(2, 30, 81, 1)",
|
||||
},
|
||||
placeholder: { color: "#fff" },
|
||||
suffix: { color: "#fff" },
|
||||
}}
|
||||
dictValue="fire_device_type"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="关键字" name="vagueKey">
|
||||
<Input
|
||||
placeholder="请输入消防点位关键字"
|
||||
classNames={{ input: "port-fire-search__input" }}
|
||||
styles={{
|
||||
root: {
|
||||
color: "#fff",
|
||||
backgroundColor: "rgba(2, 30, 81, 0.85)",
|
||||
borderColor: "rgba(2, 30, 81, 1)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<div className="port-fire-search__actions">
|
||||
<Space>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
<Button type="primary" onClick={form.submit}>
|
||||
查询
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default FireSearchPanel;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.port-fire__search {
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0.8));
|
||||
}
|
||||
|
||||
.port-fire-search__content {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
border-image: linear-gradient(to bottom,
|
||||
rgba(58, 122, 149, 0),
|
||||
rgba(58, 122, 149, 1)) 1;
|
||||
}
|
||||
|
||||
.port-fire-search__actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.port-fire-search__input::placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -1,115 +1,17 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Button, Form, Input, Space, Spin } from "antd";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
|
||||
import { NS_BI } from "~/enumerate/namespace";
|
||||
import Title from "~/pages/Container/Map/components/Content/port/Title";
|
||||
import { Context } from "~/pages/Container/Map/js/context";
|
||||
import "./index.less";
|
||||
import { useState } from "react";
|
||||
import FireDeviceListPanel from "./FireDeviceListPanel";
|
||||
import FireSearchPanel from "./FireSearchPanel";
|
||||
|
||||
const XiaoFang = (props) => {
|
||||
const { portArea } = useContext(Context);
|
||||
const [form] = Form.useForm();
|
||||
const [block2List, setBlock2List] = useState([]);
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
const getData = async (values) => {
|
||||
setIsVisible(false);
|
||||
const { data } = await props.getFirePointDeviceList({ portArea, ...values });
|
||||
setBlock2List(data);
|
||||
setIsVisible(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, []);
|
||||
|
||||
const onReset = () => {
|
||||
form.resetFields();
|
||||
form.submit();
|
||||
};
|
||||
/** 消防模块负责协调查询条件与设备列表之间的参数传递。 */
|
||||
function XiaoFang() {
|
||||
const [queryParams, setQueryParams] = useState({});
|
||||
|
||||
return (
|
||||
<div className="port_xiaofang">
|
||||
<div className="block1">
|
||||
<Title title="消防设备查询" />
|
||||
<div className="content">
|
||||
<Form form={form} labelCol={{ span: 8 }} onFinish={getData} styles={{ label: { color: "#fff" } }}>
|
||||
<Form.Item label="消防设备类型" name="fireDeviceType">
|
||||
<DictionarySelect
|
||||
placeholder="消防设备类型"
|
||||
classNames={{ root: "xiaofang-select" }}
|
||||
styles={{
|
||||
root: {
|
||||
color: "#fff",
|
||||
backgroundColor: "rgba(2, 30, 81, 0.85)",
|
||||
borderColor: "rgba(2, 30, 81, 1)",
|
||||
},
|
||||
placeholder: {
|
||||
color: "#fff",
|
||||
},
|
||||
suffix: {
|
||||
color: "#fff",
|
||||
},
|
||||
}}
|
||||
dictValue="fire_device_type"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="关键字" name="vagueKey">
|
||||
<Input
|
||||
placeholder="请输入消防点位关键字"
|
||||
classNames={{ input: "xiaofang-input" }}
|
||||
styles={{
|
||||
root: {
|
||||
color: "#fff",
|
||||
backgroundColor: "rgba(2, 30, 81, 0.85)",
|
||||
borderColor: "rgba(2, 30, 81, 1)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<div className="button">
|
||||
<Space>
|
||||
<Button onClick={onReset}>重置</Button>
|
||||
<Button type="primary" onClick={form.submit}>查询</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="block2">
|
||||
<Title title="消防设备列表" />
|
||||
<div className="content">
|
||||
<div className="table">
|
||||
<div className="tr">
|
||||
<div className="td">消防点位</div>
|
||||
<div className="td">设备类型</div>
|
||||
<div className="td">数量</div>
|
||||
</div>
|
||||
<div className="scroll">
|
||||
<Spin spinning={props.bi.xiaoFangFirePointDeviceListLoading}>
|
||||
{isVisible && (
|
||||
<SeamlessScroll list={block2List} step={0.5}>
|
||||
{block2List.map((item, index) => (
|
||||
<div key={index} className="tr">
|
||||
<div className="td">{item.firePointName}</div>
|
||||
<div className="td">{item.fireDeviceTypeName}</div>
|
||||
<div className="td">{item.deviceCount}</div>
|
||||
</div>
|
||||
))}
|
||||
</SeamlessScroll>
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="port-fire">
|
||||
<FireSearchPanel onSearch={setQueryParams} />
|
||||
<FireDeviceListPanel queryParams={queryParams} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Connect([NS_BI], true)(XiaoFang);
|
||||
export default XiaoFang;
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
.port_xiaofang {
|
||||
.block1 {
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0.8));
|
||||
|
||||
.content {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(to bottom,
|
||||
rgba(58, 122, 149, 0),
|
||||
rgba(58, 122, 149, 1)) 1;
|
||||
border-top: none;
|
||||
|
||||
.button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xiaofang-input {
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block2 {
|
||||
margin-top: 10px;
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0.8));
|
||||
|
||||
.content {
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(to bottom,
|
||||
rgba(58, 122, 149, 0),
|
||||
rgba(58, 122, 149, 1)) 1;
|
||||
border-top: none;
|
||||
padding: 10px;
|
||||
|
||||
.table {
|
||||
margin-top: 5px;
|
||||
|
||||
.scroll {
|
||||
height: 300px;
|
||||
overflow-y: hidden;
|
||||
|
||||
.tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
background-color: rgba(42, 86, 158, 0.53);
|
||||
|
||||
.td {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xiaofang-select {
|
||||
background-color: rgba(2, 30, 81, 0.85);
|
||||
|
||||
.@{ant-prefix}-select-item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-select-item-option-selected:not(.@{ant-prefix}-select-item-option-disabled) {
|
||||
color: #fff;
|
||||
background-color: rgba(16, 87, 216, 0.5);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue