port XiaoFang 文件按块拆分

src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.js

@@ -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);

src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.less

@@ -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;
+}

src/pages/Container/Map/components/Content/port/XiaoFang/FireSearchPanel/index.js

@@ -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;

src/pages/Container/Map/components/Content/port/XiaoFang/FireSearchPanel/index.less

@@ -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;
+}

src/pages/Container/Map/components/Content/port/XiaoFang/index.js

@@ -1,115 +1,17 @@
-import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { useState } from "react";
-import { Button, Form, Input, Space, Spin } from "antd";
+import FireDeviceListPanel from "./FireDeviceListPanel";
-import { useContext, useEffect, useState } from "react";
+import FireSearchPanel from "./FireSearchPanel";
-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";
 
-const XiaoFang = (props) => {
+/** 消防模块负责协调查询条件与设备列表之间的参数传递。 */
-  const { portArea } = useContext(Context);
+function XiaoFang() {
-  const [form] = Form.useForm();
+  const [queryParams, setQueryParams] = useState({});
-  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();
-  };
 
   return (
-    <div className="port_xiaofang">
+    <div className="port-fire">
-      <div className="block1">
+      <FireSearchPanel onSearch={setQueryParams} />
-        <Title title="消防设备查询" />
+      <FireDeviceListPanel queryParams={queryParams} />
-        <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>
   );
-};
+}
 
-export default Connect([NS_BI], true)(XiaoFang);
+export default XiaoFang;

src/pages/Container/Map/components/Content/port/XiaoFang/index.less

@@ -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);
-  }
-}