feat():充电站管理新增经纬度选择功能

src/components/TableModule/index.jsx

@@ -37,7 +37,7 @@ const { RangePicker } = DatePicker;
 //如想在外部调用搜索方法，请通过<TableModule ref={Ref} />  ，   Ref.current.fetche 的方式调用
 const TableModule = forwardRef((props, ref) => {
   const {
-    className="",
+    className = "",
     pagename = "",
     columns = [], //表头
     tableData = [], //table的数据
@@ -50,9 +50,10 @@ const TableModule = forwardRef((props, ref) => {
     rowSelection = false, //自定义选择项
     isExport = true, //是否显示导出按钮
     diyButton,//右上角自定义按钮
+    diyTotal, // 自定义统计
     rightButtonGroup = [], //右侧按钮额外的展示，需要传入数组
     otherData = {}, //额外需要携带的参数，传入对象
-    rowKey="id", //table的key值
+    rowKey = "id", //table的key值
     userInfo = {},//用户信息页面数据
     valueChange,
     mandatory,
@@ -61,12 +62,12 @@ const TableModule = forwardRef((props, ref) => {
     limitCon,//自定义限制条件
     isQuickMenu = [],
     mandatory_name,
-    renderAdd=() => {},
+    renderAdd = () => { },
     pageName = '',//路由名字
     showSerial = false,// 表格是否显示序号
     limitType = 0, // 时间限制类型 0无限制， < 0 今天之前不可选， > 0 今天之后不可选
     limit = 0, // 限制距离今天之前或之后天数
-    rightHeaderCompSlot= null, // 右侧头部插入自定义组件，注意计算并表格样式高度
+    rightHeaderCompSlot = null, // 右侧头部插入自定义组件，注意计算并表格样式高度
   } = props;
   const [sessionTabList, setSessionTabList] = useSessionStorageState(pageName, {
     value: {}
@@ -131,25 +132,25 @@ const TableModule = forwardRef((props, ref) => {
 
   function onShowSizeChange(pn, page_size) {
     setPageData({
-      pn:1,
+      pn: 1,
       page_size: page_size
     });
-    fetch({pn:1,page_size:page_size})
+    fetch({ pn: 1, page_size: page_size })
   }
 
-  function onChange(pn, page_size){
-    if(pageData.page_size == page_size){
+  function onChange(pn, page_size) {
+    if (pageData.page_size == page_size) {
       setPageData({
         pn,
         page_size,
       });
-      fetch({pn,page_size})
-    }else{
+      fetch({ pn, page_size })
+    } else {
       setPageData({
-        pn:1,
+        pn: 1,
         page_size: page_size
       });
-      fetch({pn:1,page_size:page_size})
+      fetch({ pn: 1, page_size: page_size })
     }
   }
 
@@ -185,12 +186,12 @@ const TableModule = forwardRef((props, ref) => {
       }
       // 处理异常  daterange不做处理, 会出现date1.isAfter 方法异常   todo --> datepicker 也会出现这个问题
       let fv = searchForm.getFieldsValue();
-      Object.keys(fv).map(key=>{
-        if(temp_obj.hasOwnProperty(key) && fv[key]?.length == 2 && fv[key][0]._isAMomentObject){
-          if(temp_obj[key] == null || temp_obj[key].length != 2){
-            temp_obj[key] = initFormData[key] ? initFormData[key]  : []
-          }else{
-            temp_obj[key] = [moment(temp_obj[key][0]), moment( temp_obj[key][1])]
+      Object.keys(fv).map(key => {
+        if (temp_obj.hasOwnProperty(key) && fv[key]?.length == 2 && fv[key][0]._isAMomentObject) {
+          if (temp_obj[key] == null || temp_obj[key].length != 2) {
+            temp_obj[key] = initFormData[key] ? initFormData[key] : []
+          } else {
+            temp_obj[key] = [moment(temp_obj[key][0]), moment(temp_obj[key][1])]
           }
         }
       })
@@ -198,7 +199,7 @@ const TableModule = forwardRef((props, ref) => {
       if (sessionTabList?.plateValue) {
         // temp_obj.carId   =  sessionTabList.plate2
         fetchPlateSearch(sessionTabList.plateValue.match(/:(\S*)/)[1], setPlateData, []);
-      } 
+      }
       // if (sessionTabList.start_time) {
       //   let temp_obj = { ...sessionTabList, start_time: moment(start_time), end_time: moment(end_time) }
       //   if (sessionTabList.plateValue){
@@ -217,7 +218,7 @@ const TableModule = forwardRef((props, ref) => {
       //   searchForm.setFieldsValue({ ...sessionTabList, carId: sessionTabList.plate2 })
       // }    //   let start_time = sessionTabList.start_time
       //   let end_time = sessionTabList.end_time
-    } 
+    }
     fetch('first')
   }, [])
   useEffect(() => {
@@ -242,16 +243,16 @@ const TableModule = forwardRef((props, ref) => {
       }
     }
     let form = {};
-    if(typeof args1 == 'object'){
-      form = {...searchForm.getFieldsValue(), ...args1, ...otherData, ...updateData}
-    }else{
-      form = {...searchForm.getFieldsValue(), ...pageData, ...otherData, ...pnno, ...updateData}
+    if (typeof args1 == 'object') {
+      form = { ...searchForm.getFieldsValue(), ...args1, ...otherData, ...updateData }
+    } else {
+      form = { ...searchForm.getFieldsValue(), ...pageData, ...otherData, ...pnno, ...updateData }
     }
-    if(args1 == 'first' ){  // 去掉plateData的监听, 避免进入页面多发送一次请求
-      if(sessionTabList?.plate2){
-        form.carId  = sessionTabList.plate2
+    if (args1 == 'first') {  // 去掉plateData的监听, 避免进入页面多发送一次请求
+      if (sessionTabList?.plate2) {
+        form.carId = sessionTabList.plate2
       }
-      if(sessionTabList?.region?.length){
+      if (sessionTabList?.region?.length) {
         form.region = sessionTabList.region
       }
     }
@@ -283,7 +284,7 @@ const TableModule = forwardRef((props, ref) => {
         )
       }
     }
-    if(args1 != 'first'){
+    if (args1 != 'first') {
       if (areaName !== null) form[areaName] = areaSelectedList;
     }
     if (form.deal_time_start !== void 0 && form.deal_time_end !== void 0) {//暂时写法
@@ -597,9 +598,9 @@ const TableModule = forwardRef((props, ref) => {
                     key={item.name}
                   >
                     {item.hiddenCount ? (
-                      <Input placeholder={item.placeholder} autoComplete={item.autoComplete?item.autoComplete:null} />//autoComplete输入框是否显示自动填充
+                      <Input placeholder={item.placeholder} autoComplete={item.autoComplete ? item.autoComplete : null} />//autoComplete输入框是否显示自动填充
                     ) : (
-                      <Input {...inputParams} placeholder={item.placeholder} autoComplete={item.autoComplete?item.autoComplete:null}/>
+                      <Input {...inputParams} placeholder={item.placeholder} autoComplete={item.autoComplete ? item.autoComplete : null} />
                     )}
                   </Form.Item>
                 );
@@ -817,7 +818,7 @@ const TableModule = forwardRef((props, ref) => {
                     key={item.name}
                     initialValue={item.defaultValue}
                   >
-                    <DatePicker.RangePicker  allowClear={item.allowClear ? true : false} />
+                    <DatePicker.RangePicker allowClear={item.allowClear ? true : false} />
                   </Form.Item>
                 )
                 break;
@@ -927,6 +928,9 @@ const TableModule = forwardRef((props, ref) => {
           export_file_name: filename,
         }
       }
+      if (pageName === "charge") { //特殊情况，充电记录导出
+        form.start_time = moment(form.start_time[0]).format("YYYY-MM-DD") + "," + moment(form.start_time[1]).format("YYYY-MM-DD")
+      }
       if (tableData.length != 0) {
         exportAjax({
           url: exportUrl,
@@ -1024,11 +1028,11 @@ const TableModule = forwardRef((props, ref) => {
               重置
             </Button>
             <Button type="primary" className="submit"
-              onClick={() => { 
-                if(pageData.pn == 1){
-                  fetch(1) 
-                }else{
-                  setPageData({ ...pageData, pn: 1 }) 
+              onClick={() => {
+                if (pageData.pn == 1) {
+                  fetch(1)
+                } else {
+                  setPageData({ ...pageData, pn: 1 })
                   fetch({ ...pageData, pn: 1 })
                 }
               }}>
@@ -1058,6 +1062,7 @@ const TableModule = forwardRef((props, ref) => {
             <span className="letter">共查询到</span>
             <span className="total-number"> {total}</span>
             <span className="letter">条结果</span>
+            {diyTotal ? diyTotal : null}
           </span>
           <div className="right-button-group">
             {rightButtonGroup.map((item) => item)}
@@ -1114,7 +1119,7 @@ const TableModule = forwardRef((props, ref) => {
               pageSize={pageData.page_size}
               pageSizeOptions={dictionary?.pageSizeOptions}
               onChange={onChange}
-              // onShowSizeChange={onShowSizeChange}
+            // onShowSizeChange={onShowSizeChange}
             />
           </div>
         </ResultFlow>
@@ -1197,7 +1202,7 @@ function InputSelectGroup(params) {
         </Col>
         <Col span={16}>
           <DatePicker
-          className="date-group-time"
+            className="date-group-time"
             placeholder="请选择开始日期"
             allowClear={false}
             onChange={(val, string) => {

src/components/TableModule/index.scss

@@ -38,6 +38,14 @@ $color-primary: var(--color-primary);
     
   }
   .right-list {
+    .charge-static {
+      .charge-item {
+        padding: 0 20px;
+        &:first-child {
+          margin-left: 20px;
+        }
+      }
+    }
     .total-wrapper  {
        display: block;
        .total-item {

src/pages/NewEnergy/ChargeStationMgm/index.scss

@@ -5,8 +5,14 @@
     .left,.right {
       width: calc(50% - 10px);
       .row {
+        position: relative;
         width: 100%;
         margin: 10px 0;
+        .latlng-box {
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
       }
       .cc-form-tree {
         margin-bottom: 0;

src/pages/NewEnergy/ChargeStationMgm/loadable.jsx

@@ -8,7 +8,7 @@ import {
 import ajax from "@/services";
 import { useSessionStorageState, useSetState } from "ahooks"
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
-import { TableModule, FormInput, FormSelect, FormTreeSelectNew, ImgError } from "@/components";
+import { TableModule, FormInput, FormSelect, FormTreeSelectNew, ImgError, SelectGaodeLngLat } from "@/components";
 import "./index.scss";
 
 
@@ -25,6 +25,8 @@ function Appointment() {
   const [areaList, setAreaList] = useState([]);
   //商户名称下拉
   const [operatorList, setOperatorList] = useState([]);
+  // 经纬度选择弹窗
+  const [lngLatVisible, setLngLatVisible] = useState(false);
   // 添加站点
   const initAdd = {
     name: "",
@@ -34,7 +36,8 @@ function Appointment() {
     area: "",
     operator: "",
     count: "",
-    img: ""
+    img: "",
+    lng_lat: ""
   }
   const [addFormData, setAddFormData] = useSetState(initAdd);
   // 搜索参数
@@ -208,35 +211,40 @@ function Appointment() {
     setDetailVisible(true)
   }
   const handelOk = () => {
-    if(!addFormData.name) {
+    // console.log(addFormData);
+    if (!addFormData.name) {
       message.warn("请输入充电站名称")
       return
     }
-    if(!addFormData.code) {
+    if (!addFormData.code) {
       message.warn("请输入充电站编码")
       return
     }
-    if(!addFormData.count) {
+    if (!addFormData.count) {
       message.warn("请输入车位数量")
       return
     }
-    if(!addFormData.address) {
+    if (!addFormData.address) {
       message.warn("请输入详细地址")
       return
     }
-    if(!addFormData.site_type) {
+    if (!addFormData.site_type) {
       message.warn("请选择站点类型")
       return
     }
-    if(!addFormData.area) {
+    if (!addFormData.area) {
       message.warn("请选择所属区域")
       return
     }
-    if(!addFormData.operator) {
+    if (!addFormData.operator) {
       message.warn("请选择商户名称")
       return
     }
-    if(!addFormData.img) {
+    if (!addFormData.lng_lat) {
+      message.warn("请选择经纬度")
+      return
+    }
+    if (!addFormData.img) {
       message.warn("请上传充电照片")
       return
     }
@@ -401,19 +409,6 @@ function Appointment() {
                 isBayonet={true}
                 onChange={(e) => { setAddFormData({ area: e }) }}
               />
-              {/* <Cascader
-              options={areaList}
-              defaultValue={addFormData.area}
-              placeholder="请选择区域"
-              expandTrigger="hover"
-              changeOnSelect
-              fieldNames={{
-                label: "name",
-                value: "id",
-                children: "children",
-              }}
-              onChange={cascaderChange}
-            /> */}
             </div>
             <div className="row">
               <FormSelect
@@ -426,6 +421,29 @@ function Appointment() {
                 onChange={e => { setAddFormData({ operator: e }) }}
               />
             </div>
+            <div className="row">
+              <FormInput
+                yisaLabel="经纬度"
+                placeholder="请选择经纬度"
+                isShowAfterIcon={false}
+                defaultValue={addFormData.lng_lat || null}
+                value={addFormData.lng_lat}
+                disabled={true}
+              />
+              <div className="latlng-box">
+                <SelectGaodeLngLat
+                  open={() => setLngLatVisible(true)}
+                  lngLatVisible={lngLatVisible}
+                  getLntLat={(value) => {
+                    setAddFormData({ lng_lat: value })
+                  }}
+                  onChange={(adress) => {
+                    console.log(adress);
+                  }}
+                  close={() => setLngLatVisible(false)}
+                />
+              </div>
+            </div>
           </div>
           <div className="right">
             <Upload

src/pages/NewEnergy/RecordsInquiry/Appointment/loadable.jsx

@@ -19,7 +19,7 @@ function Appointment() {
   const [total, setTotal] = useState(0);
   // 详情数据
   const [detailData, setDetailData] = useState({});
-  const startTime = moment().subtract(0, 'days').startOf('day').format('YYYY-MM-DD')
+  const startTime = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD')
   const endTime = moment().format('YYYY-MM-DD')
   // 初始搜索条件
   const initFormData = {

src/pages/NewEnergy/RecordsInquiry/Charge/loadable.jsx

@@ -16,9 +16,18 @@ function Charge() {
   const [tableData, setTableData] = useState([]);
   // 数据总数
   const [total, setTotal] = useState(0);
+  const [resultData, setResultData] = useState({
+    data: [],
+    total: 0,
+    total_capacity: 0, // 总充电电量
+    total_electric: 0, //总电费
+    total_service_fee: 0, //总充电服务费
+    total_income: 0, //总充电收入
+    total_duration: 0, //总充电时长
+  });
   // 详情数据
   const [detailData, setDetailData] = useState({});
-  const startTime = moment().subtract(0, 'days').startOf('day').format('YYYY-MM-DD')
+  const startTime = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD')
   const endTime = moment().format('YYYY-MM-DD')
   // 初始搜索条件
   const initFormData = {
@@ -136,6 +145,7 @@ function Charge() {
     }
     ajax.recordsInquiry.getChargeList(params).then((res) => {
       if (res.status === 20000) {
+        setResultData(res)
         setTableData(res.data);
         setTotal(res.total);
       } else {
@@ -144,6 +154,37 @@ function Charge() {
     });
   }
 
+  const diyTotal = (data) => {
+    return (
+      <span className="charge-static">
+        <span className="charge-item">
+          <span className="letter">总电量:</span>
+          <span className="total-number">{data.total_capacity||0}</span>
+          <span className="letter">度</span>
+        </span>
+        <span className="charge-item">
+          <span className="letter">总电费:</span>
+          <span className="total-number">{data.total_electric||0}</span>
+          <span className="letter">元</span>
+        </span>
+        <span className="charge-item">
+          <span className="letter">总服务费:</span>
+          <span className="total-number">{data.total_service_fee||0}</span>
+          <span className="letter">元</span>
+        </span>
+        <span className="charge-item">
+          <span className="letter">总收入:</span>
+          <span className="total-number">{data.total_income||0}</span>
+          <span className="letter">元</span>
+        </span>
+        <span className="charge-item">
+          <span className="letter">总时长:</span>
+          <span className="total-number">{data.total_duration||0}</span>
+        </span>
+      </span>
+    )
+  }
+
   const handelAdd = () => {
     setDetailVisible(true)
   }
@@ -153,6 +194,7 @@ function Charge() {
       <TableModule
         showSerial={true}
         columns={columns}
+        diyTotal={diyTotal(resultData)}
         tableData={tableData}
         formSearch={formSearch}
         pagename="充电订单"
@@ -160,7 +202,7 @@ function Charge() {
         initFormData={initFormData}
         total={total}
         search={search}
-        exportUrl="/api/bpm/record/get_record_export"
+        exportUrl="/api/nes/record_query/export_charge_list"
       />
       <Modal
         open={detailVisible}

src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx

@@ -21,7 +21,7 @@ function Violation() {
   const [total, setTotal] = useState(0);
   // 详情数据
   const [detailData, setDetailData] = useState({});
-  const startTime = moment().subtract(0, 'days').startOf('day').format('YYYY-MM-DD')
+  const startTime = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD')
   const endTime = moment().format('YYYY-MM-DD')
   // 初始搜索条件
   const initFormData = {

src/services/NewEnergy/recordsInquiry.js

@@ -12,7 +12,7 @@ const getUnlockingList = (params) => {
 // 预约记录查询
 const getAppointmentList = (params) => {
   return ajax({
-    url: "/api/new_power/records/appointment_list",
+    url: "/api/nes/record_query/appointment_list",
     type: "post",
     data: params,
   });
@@ -21,7 +21,7 @@ const getAppointmentList = (params) => {
 // 充电记录查询
 const getChargeList = (params) => {
   return ajax({
-    url: "/api/new_power/records/charge_list",
+    url: "/api/nes/record_query/charge_list",
     type: "post",
     data: params,
   });
@@ -30,7 +30,7 @@ const getChargeList = (params) => {
 // 违规记录查询
 const getViolationList = (params) => {
   return ajax({
-    url: "/api/new_power/records/violation_list",
+    url: "/api/nes/record_query/violation_list",
     type: "post",
     data: params,
   });
@@ -39,7 +39,7 @@ const getViolationList = (params) => {
 // 违规类型下拉
 const getViolationSelect = (params) => {
   return ajax({
-    url: "/api/new_power/records/violation_select",
+    url: "/api/nes/record_query/violation_select",
     type: "get",
     data: params,
   });