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

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>
@@ -117,7 +121,7 @@ function SelectGaodeLngLat(props) {
           <div className="input-search">
             <AutoComplete
               options={getLngLabel}
-              placeholder={address?address:"请选择地址"}
+              placeholder={address ? address : "请选择地址"}
               onSearch={searchLnglat}
               onSelect={onSelect}
               // enterButton={"搜索"}
@@ -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>`;

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;

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,

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}

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>

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>

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

src/pages/NewEnergy/ChargeStationMgm/loadable.jsx

@@ -13,7 +13,7 @@ import "./index.scss";
 
 
 function Appointment() {
-  
+  const pattern = /^\d+$/; // 正整数正则
   // 详情弹窗
   const [detailVisible, setDetailVisible] = useState(false);
   // 列表数据
@@ -175,7 +175,7 @@ function Appointment() {
       label: "商户名称",
       defaultValue: "0",
       placeholder: "请选择商户名称",
-      operatorName:1
+      operatorName: 1
     },
   ];
 
@@ -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"

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);
   // 详情数据

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx

@@ -613,6 +613,7 @@ function AddParking(props) {
                         }
                       }}
                       close={() => setLngLatVisible(false)}
+                      hide={() => setLngLatVisible(false)}
                     />
                   </Col>
                 </Row>