fix():修复地图组件、充电站管理页面问题与样式

1 year ago · a72d7824de
10 changed files with 102 additions and 13 deletions
--- a/src/components/SelectGaodeLngLat/index.jsx
+++ b/src/components/SelectGaodeLngLat/index.jsx
@ -13,9 +13,11 @@ function SelectGaodeLngLat(props) {
  const {
    getLntLat = () => { },
    close,
+    hide,
    lngLatVisible = false,
    open,
    onChange = () => { },
+    isClickMarker = false // 点击地图添加标记
  } = props;
  const [lnglat, setLnglat] = useState([]);
  const [marker, setMarker] = useState([]);
@ -93,6 +95,7 @@ function SelectGaodeLngLat(props) {
        打开
      </Button>
      <Modal
+        className="map-modal"
        visible={lngLatVisible}
        width={1000}
        footer={false}
@ -108,6 +111,7 @@ function SelectGaodeLngLat(props) {
            setLnglat={setLnglat}
            getLntLat={getLntLat}
            searchLnglatValue={searchLnglatValue}
+            isClickMarker={isClickMarker}
            markerPoint={marker}
          >
          </ModalMap>
@ -132,11 +136,11 @@ function SelectGaodeLngLat(props) {
            <Button
              type="primary"
              onClick={() => {
-                close();
+                hide();
                getLocationMessage();
              }}
            >
-              关闭
+              保存
            </Button>
          </div>
        </div>
@ -149,6 +153,7 @@ function ModalMap(props) {
    setLnglat = () => { },
    getLntLat = () => { },
    searchLnglatValue = [],
+    isClickMarker = false, // 点击地图添加标记
    markerPoint = []
  } = props;
  const mapConfig = {
@ -164,6 +169,7 @@ function ModalMap(props) {
  const [map, setMap] = useState(null);
  const [Marker, setMarker] = useState(null);
  const mapRef = useRef(null);
+  const [latLng, setLatLng] = useState([])
  const initMap = () => {
    // console.log(mapConfig);
    // const _map = L.map("mapid", {
@ -201,15 +207,20 @@ function ModalMap(props) {
      // onClick(info)
      setLnglat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]);
      getLntLat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]);
-      //addMarker([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)])
+      if (isClickMarker) {
+        setLatLng([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)])
+      }
    })
    mapRef.current = map
  };
  useEffect(() => {
+    setLatLng(markerPoint)
+  }, [markerPoint]);
+  useEffect(() => {
    if (map) {
-      addMarker(markerPoint); // 添加点位
+      addMarker(latLng); // 添加点位
    }
-  }, [markerPoint]);
+  }, [latLng]);
  const markerContent = `<div class="custom-content-marker">
      <img src='${Rerm}' />
    </div>`;
--- a/src/components/SelectGaodeLngLat/index.scss
+++ b/src/components/SelectGaodeLngLat/index.scss
@ -1,4 +1,12 @@
 .SelectLnglat {
+
+}
+.map-modal {
+  .ant-modal-close-x {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+  }
 }
 .bottom-input {
  display: flex;
--- a/src/components/TableModule/index.jsx
+++ b/src/components/TableModule/index.jsx
@ -98,9 +98,20 @@ const TableModule = forwardRef((props, ref) => {
  const operatorNameType = formSearch.filter((item) => item.type === "Select")[0]?.operatorName || null;
  const [loading, setLoading] = useState(false);
  //区域的下拉数据
-  const [areaList, setAreaList] = useState([]);
+  const [areaList, setAreaList] = useState([
+    {
+      id: "0",
+      name: "全部",
+      pid: "0"
+    }
+  ]);
  //商户名称
-  const [operatorList, setOperatorList] = useState([]);
+  const [operatorList, setOperatorList] = useState([
+    {
+      label: "全部",
+      value: "0"
+    }
+  ]);
  //时间范围
  const [timeGroup, setTimeGroup] = useState({
    timeType: 1,
--- a/src/components/form/FormInput/index.jsx
+++ b/src/components/form/FormInput/index.jsx
@ -6,6 +6,7 @@ import "./index.scss";

 export default function FormInput(props) {
  const {
+    type,
    yisaLabel = "",
    labelPosition = "top",
    onChange = () => { },
@ -43,6 +44,7 @@ export default function FormInput(props) {
      )}
      <div className={`cc-form-content`}>
        <Input
+          type={type}
          placeholder={placeholder}
          value={value || ""}
          onChange={setValue}
--- a/src/pages/InRoadMgm/RoadMgm/AddRoad/loadable.jsx
+++ b/src/pages/InRoadMgm/RoadMgm/AddRoad/loadable.jsx
@ -560,6 +560,7 @@ function AddRoad(props) {
                            form1.setFieldValue("address", adress);
                          }}
                          close={() => setLngLatVisible(false)}
+                          hide={() => setLngLatVisible(false)}
                        />
                      </Col>
                    </Row>
--- a/src/pages/InRoadMgm/RoadMgm/ConfigRoad/loadable.jsx
+++ b/src/pages/InRoadMgm/RoadMgm/ConfigRoad/loadable.jsx
@ -2161,6 +2161,7 @@ const ConfigRoad = (props) => {
                      setLngLat(value);
                    }}
                    close={() => setLngLatVisible(false)}
+                    hide={() => setLngLatVisible(false)}
                  />
                }
              />
@ -2402,6 +2403,9 @@ const ConfigRoad = (props) => {
                    close={() =>
                      setLngLatModal({ ...lngLatModal, visible: false })
                    }
+                    hide={() =>
+                      setLngLatModal({ ...lngLatModal, visible: false })
+                    }
                  />
                </Col>
              </Row>
--- a/src/pages/NewEnergy/ChargeStationMgm/index.scss
+++ b/src/pages/NewEnergy/ChargeStationMgm/index.scss
@ -29,6 +29,14 @@
      }
    }
    .right {
+      position: relative;
+      .required {
+        position: absolute;
+        top: -8px;
+        left: -10px;
+        color: red;
+        font-size: 16px;
+      }
      .img-box {
        position: relative;
        height: 100%;
@ -51,4 +59,18 @@
      }
    }
  }
+  .ant-modal-footer{
+    display: flex;
+    justify-content: center;
+    .ant-btn{
+      width: 88px;
+      height: 35px;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+    }
+    .ant-btn:last-child{
+      background: #409eff;
+    }
+  }
 }
--- a/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
+++ b/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
@ -13,7 +13,7 @@ import "./index.scss";


 function Appointment() {
-  
+  const pattern = /^\d+$/; // 正整数正则
  // 详情弹窗
  const [detailVisible, setDetailVisible] = useState(false);
  // 列表数据
@ -236,6 +236,10 @@ function Appointment() {
    setLoading(false)
    setDetailVisible(true)
  }
+  const handelClose = () => {
+    setLngLatVisible(false)
+    setAddFormData({ lng_lat: "", address: "" })
+  }
  const handelOk = () => {
    // console.log(addFormData);
    if (!addFormData.name) {
@ -250,6 +254,14 @@ function Appointment() {
      message.warn("请输入车位数量")
      return
    }
+    if (addFormData.count < 1) {
+      message.warn("请输入正确的车位数量")
+      return
+    }
+    if (!pattern.test(addFormData.count)) {
+      message.warn("请输入正整数的车位数量")
+      return
+    }
    if (!addFormData.address) {
      message.warn("请输入详细地址")
      return
@ -271,7 +283,7 @@ function Appointment() {
      return
    }
    if (!addFormData.img) {
-      message.warn("请上传充电照片")
+      message.warn("请上传充电站图片")
      return
    }
    ajax.addStation(addFormData).then((res) => {
@ -376,6 +388,7 @@ function Appointment() {
              <FormInput
                yisaLabel="充电站名称"
                placeholder="请输入充电站名称"
+                isRequired
                isShowAfterIcon={false}
                value={addFormData.name}
                onChange={e => { setAddFormData({ name: e.target.value }) }}
@ -385,6 +398,7 @@ function Appointment() {
              <FormInput
                yisaLabel="充电站编码"
                placeholder="请输入充电站编码"
+                isRequired
                isShowAfterIcon={false}
                value={addFormData.code}
                onChange={e => { setAddFormData({ code: e.target.value }) }}
@ -394,6 +408,8 @@ function Appointment() {
              <FormInput
                yisaLabel="车位数量"
                placeholder="请输入车位数量"
+                isRequired
+                type={"Number"}
                isShowAfterIcon={false}
                value={addFormData.count}
                onChange={e => { setAddFormData({ count: e.target.value }) }}
@ -403,6 +419,7 @@ function Appointment() {
              <FormSelect
                yisaLabel="站点类型"
                placeholder="请选择站点类型"
+                required
                hasUnlimited={false}
                defaultValue={addFormData.site_type || null}
                yisaData={sysConfig?.stationType || []}
@ -415,6 +432,7 @@ function Appointment() {
                yisaLabel="所属区域"
                labelPosition="left"
                placeholder="请选择所属区域"
+                isRequired
                value={addFormData.area || null}
                fieldNames={{
                  label: "name",
@ -431,6 +449,7 @@ function Appointment() {
              <FormSelect
                yisaLabel="商户名称"
                placeholder="请选择商户名称"
+                required
                hasUnlimited={false}
                defaultValue={addFormData.operator || null}
                yisaData={operatorList}
@ -442,6 +461,7 @@ function Appointment() {
              <FormInput
                yisaLabel="经纬度"
                placeholder="请选择经纬度"
+                isRequired
                isShowAfterIcon={false}
                defaultValue={addFormData.lng_lat || null}
                value={addFormData.lng_lat}
@ -449,6 +469,7 @@ function Appointment() {
              />
              <div className="latlng-box">
                <SelectGaodeLngLat
+                  isClickMarker
                  open={() => setLngLatVisible(true)}
                  lngLatVisible={lngLatVisible}
                  getLntLat={(value) => {
@ -458,7 +479,8 @@ function Appointment() {
                    // console.log(adress);
                    setAddFormData({ address: adress })
                  }}
-                  close={() => setLngLatVisible(false)}
+                  close={handelClose}
+                  hide={() => setLngLatVisible(false)}
                />
              </div>
            </div>
@ -466,6 +488,7 @@ function Appointment() {
              <FormInput
                yisaLabel="详细地址"
                placeholder="请输入详细地址"
+                isRequired
                isShowAfterIcon={false}
                value={addFormData.address}
                onChange={e => { setAddFormData({ address: e.target.value }) }}
@ -473,6 +496,7 @@ function Appointment() {
            </div>
          </div>
          <div className="right">
+            <div className="required">*</div>
            <Upload
              name="file"
              listType="picture-card"
--- a/src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx
+++ b/src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx
@ -16,7 +16,12 @@ function Violation() {
  // 列表数据
  const [tableData, setTableData] = useState([]);
  // 违规类型下拉
-  const [typeList, setTypeList] = useState([]);
+  const [typeList, setTypeList] = useState([
+    {
+      label: "全部",
+      value: "0"
+    }
+  ]);
  // 数据总数
  const [total, setTotal] = useState(0);
  // 详情数据
--- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx
+++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx
@ -613,6 +613,7 @@ function AddParking(props) {
                        }
                      }}
                      close={() => setLngLatVisible(false)}
+                      hide={() => setLngLatVisible(false)}
                    />
                  </Col>
                </Row>