chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat():完成地锁监控页面的接口

tags/PMS_V1.0.0_Alpha5
zhangjian 1 year ago
parent
4be85b216d
commit
1c5b28f01e
6 changed files with 115 additions and 1527 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx
  2. 1045
      src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
  3. 571
      src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
  4. 4
      src/services/NewEnergy/index.js
  5. 14
      src/services/NewEnergy/realtimeMonitor.js
  6. 4
      src/services/index.js

4
src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx
View File

@ -2,5 +2,5 @@ import React from "react"
import loadable from "@loadable/component"
import { LoadingImg } from "@/components"
const LockMonitor = loadable(() => import("./loadable"))
export default (pros) => <LockMonitor {...pros} fallback={<LoadingImg />} />
const PileMonitor = loadable(() => import("./loadable"))
export default (pros) => <PileMonitor {...pros} fallback={<LoadingImg />} />

1045
src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
File diff suppressed because it is too large
View File

571
src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
View File

@ -32,275 +32,43 @@ let array = [];
function PileMonitor() {
const columns = [
{
title: "序号",
dataIndex: "index",
key: "index",
align: "center",
fixed: "left",
render: (text, record, index) => index + 1,
width: 100,
},
{
title: "路段名称",
dataIndex: "road",
align: "center",
render: (text, record, index) => (
<div style={{ width: "100px", wordBreak: "break-all" }}>{record.road}</div>
)
},
{
title: "车牌号",
dataIndex: "plate",
align: "center",
render: (text, record, index) => (
<div style={{ width: "100px", wordBreak: "break-all" }}>{record.plate}</div>
)
},
{
title: "车牌颜色",
dataIndex: "plate_color",
key: "plate_color",
width: 100,
align: "center",
},
{
title: "泊位号",
dataIndex: "berth_id",
key: "berth_id",
width: 100,
align: "center",
},
{
title: "入场时间",
dataIndex: "in_time",
align: "center",
render: (text, record, index) => (
<div style={{ width: "130px", wordBreak: "break-all" }}>{record.in_time}</div>
)
},
{
title: "离场时间",
dataIndex: "out_time",
align: "center",
render: (text, record, index) => (
<div style={{ width: "130px", wordBreak: "break-all" }}>{record.out_time}</div>
)
},
{
title: "停车时长",
dataIndex: "admission_time",
key: "admission_time",
width: 100,
align: "center",
},
{
title: "入场收费员",
dataIndex: "in_person",
key: "in_person",
width: 100,
align: "center",
},
{
title: "出场收费员",
dataIndex: "out_person",
key: "out_person",
width: 100,
align: "center",
},
{
title: "停车记录ID",
dataIndex: "park_id",
align: "center",
render: (text, record, index) => (
<div style={{ width: "130px", wordBreak: "break-all" }}>
<a onClick={() => {
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") });
}}>{record.park_id}</a>
</div>
),
},
{
title: "区域",
dataIndex: "region",
align: "center",
render: (text, record, index) => (
<div style={{ width: "120px", wordBreak: "break-all" }}>{record.region}</div>
)
},
{
title: "商户名称",
dataIndex: "operator",
align: "center",
render: (text, record, index) => (
<div style={{ width: "150px", wordBreak: "break-all" }}>{record.operator}</div>
)
},
{
title: "路段类型",
dataIndex: "road_type",
key: "road_type",
width: 100,
align: "center",
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
align: "center",
fixed: "right",
width: 100,
render: (text, record, index) => {
setDataDetail(record)
return (
<>
<Button type="primary" onClick={() => openModal(index, record)}>
详情
</Button>
</>
)
},
},
];
const formSearch = [
{
name: "region",
type: "TreeSelect",
label: "区域",
},
{
name: "operator",
type: "Select",
label: "商户名称",
defaultValue: "0",
placeholder: "请选择商户名称",
},
{
name: "road",
type: "SearchSelect",
label: "路段名称",
placeholder: "请输入路段名称",
},
{
name: "road_type",
type: "Select",
label: "路段类型",
defaultValue: 0,
options: sysConfig.roadType,
},
{
name: "phone",
name: "device_name",
type: "Input",
label: "手机号",
placeholder: "请输入手机号",
label: "设备名称",
placeholder:"请输入"
},
{
name: "plate",
name: "device_num",
type: "Input",
label: "车牌号",
placeholder: "请输入车牌号",
label: "设备编码",
placeholder:"请输入"
},
{
name: "berth_id",
type: "Input",
label: "泊位号",
placeholder: "请输入泊位号",
},
{
name: "type",
type: "Select",
label: "出入场类型",
defaultValue: 1,
options: [
{
label: "入场",
value: 1,
},
{
label: "出场",
value: 2,
},
],
},
{
name: "park_id",
type: "Input",
label: "停车记录ID",
placeholder: "请输入停车记录ID",
},
{
name: "plate_color",
name: "device_state",
type: "Select",
label: "车牌颜色",
placeholder: "请输入车牌颜色",
options: sysConfig.plateColor,
label: "设备状态",
defaultValue: 0,
options: sysConfig.energyDeviceType,
},
{
name: "order_type",
name: "lock_state",
type: "Select",
label: "订单类型",
label: "车位锁状态",
defaultValue: 0,
options: [
{
label: "全部",
value: 0,
},
{
label: "进行中",
value: 1,
},
{
label: "待支付",
value: 2,
},
{
label: "已支付",
value: 3,
}
],
},
{
name: "in_person",
type: "Input",
label: "入场收费员",
placeholder: "请输入入场收费员",
},
{
name: "out_person",
type: "Input",
label: "出场收费员",
placeholder: "请输入出场收费员",
},
{
name: "timePeriod",
type: "RangePicker",
label: "时间段",
options: sysConfig.energyLockState,
},
];
const initFormData = {
region: ["0"],
operator: "0",
road: "0",
road_type: 0,
phone: "",
plate: "",
berth_id: "",
type: 1,
park_id: "",
order_type: 0,
plate_color: -1,
in_person: "",
out_person: "",
device_name:"",
device_num:""
};
//历史处理的表头
const historyProgressColumns = [
const columns = [
{
title: "序号",
dataIndex: "id",
@ -309,62 +77,45 @@ function PileMonitor() {
render: (text, record, index) => index + 1,
},
{
title: "状态",
dataIndex: "status",
key: "status",
title: "设备名称",
dataIndex: "device_name",
key: "device_name",
align: "center",
},
{
title: "处理记录ID",
dataIndex: "deal_record_id",
key: "deal_record_id",
title: "设备编码",
dataIndex: "device_num",
key: "device_num",
align: "center",
},
{
title: "处理时间",
dataIndex: "deal_time",
key: "deal_time",
title: "设备类型",
dataIndex: "device_type",
key: "device_type",
align: "center",
},
{
title: "处理人",
dataIndex: "dealer",
key: "dealer",
title: "设备供应商",
dataIndex: "device_vendor",
key: "device_vendor",
align: "center",
},
{
title: "业务订单类型",
dataIndex: "business_type",
key: "business_type",
title: "对接平台",
dataIndex: "platform",
key: "platform",
align: "center",
},
{
title: "更改项",
dataIndex: "change_content",
key: "change_content",
title: "车位锁状态",
dataIndex: "lock_state_name",
key: "lock_state_name",
align: "center",
render: (text) => {
return text == 1
? "调整出场时间"
: text == 2
? "变更车牌号"
: text == 3
? "更改订单金额"
: text == 4
? "免费该订单"
: "作废该订单"
}
},
{
title: "更改初始值",
dataIndex: "initial_value",
key: "initial_value",
align: "center",
},
{
title: "更改更新值",
dataIndex: "update_value",
key: "update_value",
title: "设备状态",
dataIndex: "device_state_name",
key: "device_state_name",
align: "center",
},
{
@ -377,9 +128,7 @@ function PileMonitor() {
return (
<Button
type="primary"
onClick={() => {
checkHistoryDetail(record);
}}
>
操作
</Button>
@ -389,240 +138,14 @@ function PileMonitor() {
];
const h_columns = [
{
title: "停车订单ID",
dataIndex: "park_id",
key: "park_id",
width: 200,
align: "center",
render: (text) => (
<>
<a
onClick={() => {
navigator.clipboard.writeText(`${text}`).then(() => {
message.success("已复制到剪切板");
});
}}
>
{text}
</a>
</>
),
},
{
title: "车牌号",
dataIndex: "plate",
key: "plate",
align: "center",
},
{
title: "停车场名称",
dataIndex: "park_name",
key: "park_name",
align: "center",
width: 200,
},
{
title: "入场时间",
dataIndex: "in_time",
key: "in_time",
align: "center",
},
{
title: "计费时间",
dataIndex: "admission_time",
key: "admission_time",
align: "center",
},
];
const [detailVisible, setDetailVisible] = useState(false);
const [tableData, setTableData] = useState([]);
const [total, setTotal] = useState(0);
const [tabKey, setTabKey] = useState("1");
// 车场id
const [parkId, setParkId] = useState("");
//支付记录数据
const [payRecord, setPayRecord] = useState([]);
//退款订单数据
const [refundRecord, setRefundRecord] = useState([]);
//操作记录数据
const [operationRecord, setOperatorRecord] = useState([]);
//历史处理数据
const [historyProgressRecord, setHistoryProgressRecord] = useState([]);
//停车记录信息数据
const [parkingRecordDetail, setParkingRecordDetail] = useState({});
//当前的所选择的停车信息索引
const [recordIndex, setRecordIndex] = useState(-1);
//当前所选择的订单ID
const [currentRecordID, setCurrentRecordID] = useState("");
//历史记录详情Modal
const [historyVisible, setHistoryVisible] = useState(false);
//历史记录详情的弹窗查看全部
const [isShowAll, setIsShowAll] = useState(false);
//历史记录车辆图片弹窗
const [platePhototModal, setPlatePhotoModal] = useState(false);
//历史记录详情数据
const [historyDataDetail, setHistoryDataDetail] = useState({});
const [DataDetail, setDataDetail] = useState({});
function openModal(index, record) {
setDetailVisible(true);
setParkingRecordDetail(record);
setHistoryDataDetail(record)
setRecordIndex(index);
}
const handleImgError = (e) => {
let evn = e || event
let img = evn.srcElement ? evn.srcElement : evn.target
img.src = errorImg
}
function changeKey(key) {
setTabKey(key);
switch (key) {
case "2":
getPaymentRecord(currentRecordID);
break;
case "3":
getRefundRecord(currentRecordID);
break;
case "4":
getOperateRecord(currentRecordID);
break;
case "5":
getHistoryRecord(currentRecordID);
break;
default:
break;
}
}
function renderParkRecord(item) {
return (
item && (
<div>
<Descriptions title="停车场名称">
<Descriptions.Item label="停车场名称">{item.road}</Descriptions.Item>
<Descriptions.Item label="泊位号">{item.berth_id}</Descriptions.Item>
<Descriptions.Item label="区域">{item.region}</Descriptions.Item>
<Descriptions.Item label="商户">{item.operator}</Descriptions.Item>
<Descriptions.Item label="车场类型">{item.road_type}</Descriptions.Item>
</Descriptions>
<Descriptions title="停车信息">
<Descriptions.Item label="车牌号">{item.plate}</Descriptions.Item>
<Descriptions.Item label="会员手机号">{item.phone}</Descriptions.Item>
<Descriptions.Item label="入场时间"> {item.in_time} </Descriptions.Item>
<Descriptions.Item label="出场时间">{item.out_time}</Descriptions.Item>
<Descriptions.Item label="停车时长">{item.admission_time}</Descriptions.Item>
<Descriptions.Item label="订单金额"> {item.order_amount}</Descriptions.Item>
<Descriptions.Item label="停车卡折扣">{item.parking_card_discount} </Descriptions.Item>
<Descriptions.Item label="车场折扣">
{item.road_discount}
</Descriptions.Item>
<Descriptions.Item label="应收金额">
{item.receivable_amount}
</Descriptions.Item>
<Descriptions.Item label="优惠券">{item.coupon }</Descriptions.Item>
<Descriptions.Item label="优惠总额">
{item.preferential_amount}
</Descriptions.Item>
<Descriptions.Item label="实付金额">
{item.actual_amount}
</Descriptions.Item>
<Descriptions.Item label="优惠退款">
{item.refund_discount}
</Descriptions.Item>
<Descriptions.Item label="实付退款">
{item.actual_refund}
</Descriptions.Item>
<Descriptions.Item label="退款总计">
{item.refund_total}
</Descriptions.Item>
<Descriptions.Item label="入场收费员">
{item.in_person}
</Descriptions.Item>
<Descriptions.Item label="出场收费员">
{item.out_person}
</Descriptions.Item>
</Descriptions>
<Descriptions title="入场照片">
<Descriptions.Item label="车辆照片">
<div className="ltc-item ltc-item-img ">
<Image src={item.in_veh_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
</div>
</Descriptions.Item>
<Descriptions.Item label="车牌照片">
<div className="ltc-item ltc-item-img ">
<Image src={item.in_plate_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
</div>
</Descriptions.Item>
<Descriptions.Item label=" 残疾人证件">
<div className="ltc-item ltc-item-img ">
<Image src={item.cj_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
</div>
</Descriptions.Item>
</Descriptions>
</div>
)
);
}
//查看历史详情
const [getHistoryData,setGetHistoryData]=useState({})
function checkHistoryDetail(record) {
setGetHistoryData(record);
setHistoryVisible(true);
}
function renderModalTable(columns, dataSource) {
return (
<Table
columns={columns}
dataSource={dataSource}
scroll={{ x: 1000 }}
// className="yisa-table"
/>
);
}
//获取订单的支付记录
function getPaymentRecord(park_id) {
ajax.getPaymentRecord({ park_record_id: park_id }).then((res) => {
if (res.status === 20000) {
setPayRecord(res.data.list);
}
});
}
//获取退款订单的接口
function getRefundRecord(park_id) {
ajax.getRefundRecord({ park_id }).then((res) => {
if (res.status === 20000) {
setRefundRecord(res.data.list);
}
});
}
//获取操作处理的接口
function getOperateRecord(park_id) {
ajax.getOperateRecord({ park_record_id: park_id }).then((res) => {
if (res.status === 20000) {
setOperatorRecord(res.data.list);
}
});
}
//获取历史处理记录的接口
function getHistoryRecord(park_id) {
ajax.getHistoryRecord({ park_record_id: park_id }).then((res) => {
if (res.status === 20000) {
// res.data.list.map(res=>{
setHistoryProgressRecord(res.data.list);
// })
}
});
}
//获取函数
function search(params) {
utils.tableScrollTop("parent-table-scroll")
ajax.getParkingList(params).then((res) => {
ajax.getPileMonitor(params).then((res) => {
if (res.status === 20000) {
setTableData(res.data.list);
setTotal(res.data.total);
@ -631,10 +154,6 @@ function PileMonitor() {
}
});
}
useEffect(() => {
// setParkingRecordDetail(tableData[recordIndex]);
setCurrentRecordID(tableData[recordIndex]?.park_id || "");
}, [recordIndex]);
return (
<>
@ -642,14 +161,14 @@ function PileMonitor() {
columns={columns}
tableData={tableData}
formSearch={formSearch}
pagename="停车记录查询"
mandatory={['plate','berth_id']}
mandatory_name={['车牌号或泊位号']}
pageName={'parkRecordTotal'}
pagename="电桩监控"
// mandatory={['plate','berth_id']}
// mandatory_name={['车牌号或泊位号']}
pageName={'pileMonitor'}
initFormData={initFormData}
total={total}
search={search}
exportUrl="/api/bpm/record/get_record_export"
// exportUrl="/api/bpm/record/get_record_export"
/>
</>
);

4
src/services/NewEnergy/index.js
View File

@ -1,5 +1,7 @@
import chargingMgm from './chargingMgm'
import realtimeMonitor from './realtimeMonitor'
export default {
...chargingMgm
...chargingMgm,
...realtimeMonitor
}

14
src/services/NewEnergy/realtimeMonitor.js
View File

@ -0,0 +1,14 @@
import ajax from "@/config/ajax"
//获取电桩监控接口
const getPileMonitor = (params) => {
return ajax({
url: "/api/new_power/realtime_monitor/pile_monitor/get_record_list",
type: "post",
data: params,
});
};
export default{
getPileMonitor,
}

4
src/services/index.js
View File

@ -23,6 +23,7 @@ import FinancialMgm from "./FinancialMgm";
import DataAnalysisPrediction from "./DataAnalysisPrediction";
import ParkingOverview from "./ParkingOverview";
import OffPeak from "./OffPeak";
import NewEnergy from "./NewEnergy";
const api = {};
export default {
...api,
@ -50,5 +51,6 @@ export default {
...FinancialMgm,
...DataAnalysisPrediction,
ParkingOverview,
...OffPeak
...OffPeak,
...NewEnergy
};
Write Preview
Loading…
Cancel
Save