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

fix():停车记录查询图片错位问题

tags/PMS_Frontend_v1.0.6-develop
xingjx 1 year ago
parent
e23337dd31
commit
094544263f
5 changed files with 66 additions and 272 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 288
      src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.jsx
  2. 12
      src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/index.scss
  3. 14
      src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
  4. 12
      src/pages/OperationCenter/CarMgm/CarInfo/index.scss
  5. 12
      src/pages/OperationCenter/CarMgm/CarInfo/loadable.jsx

288
src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.jsx
View File

@ -70,48 +70,6 @@ function ParkingOrderInquiry() {
</>) </>)
arr.push(obj) arr.push(obj)
break break
case 4:
obj.render = (text, record) => (<>
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
refundSearch(record)
setTkddVisible(true)
}}>
<a>详情</a>
</span>
</>)
arr.push(obj)
break
case 5:
obj.render = (text, record) => (<>
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
refundSearch(record)
setTkddVisible(true)
}}>
<a>详情</a>
</span>
</>)
arr.push(obj)
break
case 6:
obj.render = (text, record) => (<>
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
setTkddVisible(true)
}}>
<a>详情</a>
</span>
</>)
arr.push(obj)
break
case 7:
obj.render = (text, record) => (<>
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
setTkddVisible(true)
}}>
<a>详情</a>
</span>
</>)
arr.push(obj)
break
default: break default: break
} }
return arr return arr
@ -291,7 +249,7 @@ function ParkingOrderInquiry() {
], ],
}, },
{//10 {//10
name: "PayChannel",
name: "payment_channels",
type: "Select", type: "Select",
label: "支付渠道", label: "支付渠道",
placeholder: "请选择支付渠道", placeholder: "请选择支付渠道",
@ -327,8 +285,8 @@ function ParkingOrderInquiry() {
{//15 {//15
name: "b", name: "b",
type: "Input", type: "Input",
label: "第三方流水号",
placeholder: "请输入第三方流水号",
label: "渠道流水号",
placeholder: "请输入渠道流水号",
}, },
{//16 {//16
name: "timePeriod", name: "timePeriod",
@ -364,7 +322,7 @@ function ParkingOrderInquiry() {
placeholder: "请输入支付订单ID", placeholder: "请输入支付订单ID",
}, },
{//21 {//21
name: "t",
name: "berth_id",
type: "Input", type: "Input",
label: "泊位号", label: "泊位号",
placeholder: "请输入泊位号", placeholder: "请输入泊位号",
@ -374,7 +332,7 @@ function ParkingOrderInquiry() {
type: "Select", type: "Select",
label: "所属商户", label: "所属商户",
placeholder: "请选择所属商户", placeholder: "请选择所属商户",
options: dictionary.PaydMethod,
options: dictionary.MerchantName,
}, },
{//23 {//23
name: "t", name: "t",
@ -389,7 +347,7 @@ function ParkingOrderInquiry() {
placeholder: "停车记录ID", placeholder: "停车记录ID",
}, },
{//25 {//25
name: "t",
name: "dealer",
type: "Input", type: "Input",
label: "操作人", label: "操作人",
placeholder: "请输入操作人", placeholder: "请输入操作人",
@ -434,30 +392,16 @@ function ParkingOrderInquiry() {
], ],
}, },
]; ];
const [tag, setTag] = useState('1');
const [edit, setEdit] = useState(true);
const [resultData, setResultData] = useState([]) const [resultData, setResultData] = useState([])
const [baseData, setBaseData] = useState({
//car_type:2
})
const [bindData, setBindData] = useState([])//绑定
const [modiData, setModiData] = useState([])//修改
const [detailData, setDetailData] = useState([])//
const [ycddData, setYcddData] = useState([])//异常订单数据 const [ycddData, setYcddData] = useState([])//异常订单数据
const [detailVisible, setDetailVisible] = useState(false); const [detailVisible, setDetailVisible] = useState(false);
const [ltcVisible, setLtcVisible] = useState(false);
const [timesVisible, setTimesVisible] = useState(false); //退款尝试次数展开 const [timesVisible, setTimesVisible] = useState(false); //退款尝试次数展开
const [ycddVisible, setYcddVisible] = useState(false);
const [tkddVisible, setTkddVisible] = useState(false); const [tkddVisible, setTkddVisible] = useState(false);
const [cardVisible, setCardVisible] = useState(false);
const [eaeVisible, setEaeVisible] = useState(false);//出入场图片 const [eaeVisible, setEaeVisible] = useState(false);//出入场图片
const [bigpicVisible, setBigpicVisible] = useState(false);//大图展示 const [bigpicVisible, setBigpicVisible] = useState(false);//大图展示
const [bigPic, setBigPic] = useState(); const [bigPic, setBigPic] = useState();
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [tabKey, setTabKey] = useState("1"); const [tabKey, setTabKey] = useState("1");
function openModal(params) {
setDetailVisible(true);
}
function changeKey(key) { function changeKey(key) {
setTabKey(key); setTabKey(key);
} }
@ -481,84 +425,25 @@ function ParkingOrderInquiry() {
} }
}) })
} }
//基本信息详情
function searchDetail(e) {
ajax({
url: "/api/ope/car/get_base_info",
type: "get",
data: { carId: e?.carId || carId },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setBaseData(data)
setTag('2')
} else {
message.error(res.message)
}
})
ajax({//绑定
url: "/api/ope/car/get_bind_records",
type: "get",
data: { carId: e?.carId || carId },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setBindData(data)
} else {
message.error(res.message)
}
})
ajax({//修改数据
url: "/api/ope/car/get_edit_records",
type: "get",
data: { carId: e?.carId || carId },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setModiData(data)
} else {
message.error(res.message)
}
})
}
//编辑车辆外观信息
function editDetail() {
ajax({
url: "/api/ope/car/edit_car",
type: "post",
data: {
carId: baseData.carId,
car_brand: baseData.car_brand,
car_model: baseData.car_model,
car_color: baseData.car_color,
car_type: baseData.car_type,
plate_type: baseData.plate_type,
},
}).then((res) => {
let { status, data } = res
if (status == 20000) {
setEdit(true)
//window.location.reload()
//setTag('2')
searchDetail()
} else {
message.error(res.message)
}
})
}
//详情其他模块查询 //详情其他模块查询
function searchOther(e) { function searchOther(e) {
var url = '' var url = ''
switch (tabKey) { switch (tabKey) {
case "1": case "1":
url = ""
url = "/api/fin/order_search/park_order"//支付订单查询
break
case "2.1":
url = "/api/fin/order_search/arrears_order"//欠费订单查询
break
case "2.2":
url = ""//
break break
case "2":
url = "/api/bpm/record/get_record_list"//停车记录
case "2.3":
url = ""//
break break
case "3": case "3":
url = "/api/bpm/record/get_parking_arrears_list"//欠费记录
url = ""//
break break
default: break default: break
} }
@ -568,7 +453,7 @@ function ParkingOrderInquiry() {
ajax({ ajax({
url: url, url: url,
type: "post", type: "post",
data: { ...e, carId: carId, startTime: e?.start_time, endTime: e?.end_time },
data: { ...e, carId: carId },
}).then((res) => { }).then((res) => {
let { status, data, total } = res let { status, data, total } = res
if (status == 20000) { if (status == 20000) {
@ -585,22 +470,6 @@ function ParkingOrderInquiry() {
} }
}) })
} }
//退款订单详情
function refundSearch(e) {
ajax({
url: "/api/ope/record/get_refund_info",
type: "get",
data: { id: e.refund_id },
}).then((res) => {
let { status, data } = res
if (status == 20000) {
//setResultData(data)
setYcddData(data)
} else {
message.error(res.message)
}
})
}
//停车记录信息渲染 //停车记录信息渲染
function renderParkRecord(params) { function renderParkRecord(params) {
return ( return (
@ -678,118 +547,13 @@ function ParkingOrderInquiry() {
</div> </div>
</div> </div>
<div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div> <div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div>
<Descriptions title="">
<Descriptions.Item label=""><img width={300} src={params.in_veh_pic} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} /></Descriptions.Item>
<Descriptions.Item label=""><img width={300} src={params.in_plate_pic} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} /></Descriptions.Item>
</Descriptions>
</div>
);
}
//基本信息渲染
function renderRecord(params) {
return (
<div style={{ padding: '18px' }}>
<div className="base-ltc">
<div className="ltc-img">
<img src={baseData.car_img} width={600} />
</div>
<div className="ltc-box">
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆归属信息</div>
<div className="ltc-content">
<div className="ltc-item">
车牌颜色：{baseData.plate_color}
</div>
<div className="ltc-item">
车牌号:{baseData.plate_number}
</div>
<div className="ltc-item">
绑定会员账户:{baseData.mobile}
</div>
<div className="ltc-item">
认证状态:{baseData.authStateName}
</div>
<div className="ltc-item">
车牌归属地:{baseData.home_location}
</div>
<div className="ltc-item">
创建时间:{baseData.create_time}
</div>
</div>
<div className="ltc-box-title">
<div className="ltc-icon"></div>车辆外观信息
{
edit ? <div className="ltc-btn" onClick={() => { setEdit(false) }}>编辑</div> :
<>
<div className="ltc-btn" onClick={() => { editDetail(); }}>保存</div>
<div className="ltc-btn ltc-cancel" onClick={() => { setEdit(true) }}>取消</div>
</>
}
</div>
<div className="ltc-content">
<div className="ltc-item">
车辆品牌：<Input className="ltc-item-input" value={baseData.car_brand} onChange={(e) => { console.log(e); setBaseData({ ...baseData, car_brand: e.target.value }) }} placeholder="请输入车辆品牌" disabled={edit}></Input>
</div>
<div className="ltc-item">
车辆型号：<Input className="ltc-item-input" value={baseData.car_model} placeholder="请输入车辆型号" disabled={edit}></Input>
</div>
<div className="ltc-item">
车身颜色：<Input className="ltc-item-input" value={baseData.car_color} placeholder="请输入车身颜色" disabled={edit}></Input>
</div>
<div className="ltc-item">
车辆类型：
<Select
disabled={edit}
defaultValue={baseData.car_type}
options={[
{
label: "大型车",
value: 1,
},
{
label: "中型车",
value: 2,
},
{
label: "小型车",
value: 3,
},
]}
placeholder={''}
/>
</div>
<div className="ltc-item">
号牌类型：
<Select
disabled={edit}
options={dictionary.PlateType}
fieldNames={{ label: 'text', value: 'value' }}
defaultValue={baseData?.plate_type}
placeholder={''}
/>
</div>
</div>
<div className="ltc-content">
<div className="ltc-item ltc-item-img ">
<img src={params.in_veh_pic || require("../../../../../src/assets/images/error-img.png")} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} />
</div> </div>
</div>
<div className="ltc-box">
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆绑定记录</div>
<div className="table-wrap">
{/* <Table
columns={bindColumns}
dataSource={bindData}
scroll={{ x: 1000 }}
className="yisa-table"
pagination={false}
/> */}
<div className="ltc-item ltc-item-img ">
<img src={params.in_plate_pic || require("../../../../../src/assets/images/error-img.png")} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} />
</div> </div>
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆信息修改记录</div>
{/* <Table
columns={modiColumns}
dataSource={modiData}
scroll={{ x: 1000 }}
className="yisa-table"
pagination={false}
/> */}
</div> </div>
</div> </div>
); );
@ -931,13 +695,13 @@ function ParkingOrderInquiry() {
searchOther() searchOther()
}, [tabKey]) }, [tabKey])
//欠费订单查询
//欠费订单查询渲染
const orderInfo = <> const orderInfo = <>
<Tabs > <Tabs >
<Tabs.TabPane tab="欠费订单查询" key="1"> <Tabs.TabPane tab="欠费订单查询" key="1">
{renderTable( {renderTable(
createCol(['欠费订单ID', '停车订单ID', '区域', '商户名称', '停车场名称', '车场类型', '车牌号', '入场时间', '出场时间', '停车时长', '欠费金额（元）'], createCol(['欠费订单ID', '停车订单ID', '区域', '商户名称', '停车场名称', '车场类型', '车牌号', '入场时间', '出场时间', '停车时长', '欠费金额（元）'],
['merchantName', '', 'area', '', 'sectionName', '', 'licensePlateNumber', 'entryTime', 'exitTime', '', 'arrearsAmount'],0),
['merchantName', '', 'area', '', 'sectionName', '', 'licensePlateNumber', 'entryTime', 'exitTime', '', 'arrearsAmount'], 2.1),
[ash[25], ash[0], ash[1], ash[2], ash[3], ash[18], ash[5], ash[12], ash[26]], [ash[25], ash[0], ash[1], ash[2], ash[3], ash[18], ash[5], ash[12], ash[26]],
resultData resultData
)} )}
@ -978,15 +742,13 @@ function ParkingOrderInquiry() {
<Tabs.TabPane tab="预付订单查询" key="3"> <Tabs.TabPane tab="预付订单查询" key="3">
{renderTable( {renderTable(
createCol(['订单ID', '支付商户', '所属商户', '支付渠道', '支付设备', '操作人', '支付时间', '预付金额', '已抵扣金额', '退款金额', '抵扣时间', '停车记录ID'], createCol(['订单ID', '支付商户', '所属商户', '支付渠道', '支付设备', '操作人', '支付时间', '预付金额', '已抵扣金额', '退款金额', '抵扣时间', '停车记录ID'],
['index', 'latest_try_time', 'payment_channels_name', 'refund_actual_amount', 'refund_discount_amount', 'reason', 'refund_time', 'payment_order_id', 'parking_type_name', 'park_record_id', 'payment_type_name', 'payment_order_id', 'flow_id', 'state_name'], 3),
['index', 'latest_try_time', 'payment_channels_name', 'refund_actual_amount', 'refund_discount_amount', 'reason', 'refund_time', 'payment_order_id', 'parking_type_name', 'park_record_id', 'payment_type_name', 'payment_order_id', 'flow_id', 'state_name'], 0),
[ash[22], ash[23], ash[21], ash[24], ash[15]], [ash[22], ash[23], ash[21], ash[24], ash[15]],
resultData resultData
)} )}
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
<Modal <Modal
open={detailVisible} open={detailVisible}
width={1500} width={1500}

12
src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/index.scss
View File

@ -203,4 +203,16 @@ $color-primary: var(--color-primary);
.ant-modal-footer{ .ant-modal-footer{
display: none; display: none;
} }
}
.ltc-item-img {
width: 390px;
height: 300px;
border: 1px solid;
background: #6565656b;
margin-right: 20px !important;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
} }

14
src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
View File

@ -117,7 +117,7 @@ function ParkRecordTotal() {
key: "in_person", key: "in_person",
width: 100, width: 100,
align: "center", align: "center",
}, },
{ {
title: "出场收费员", title: "出场收费员",
@ -549,10 +549,14 @@ function ParkRecordTotal() {
</Descriptions> </Descriptions>
<Descriptions title="入场照片"> <Descriptions title="入场照片">
<Descriptions.Item label="车辆照片"> <Descriptions.Item label="车辆照片">
<img src={item.in_veh_pic} alt="车辆照片" />
<div className="ltc-item ltc-item-img ">
<img src={item.in_veh_pic || require("../../../../../src/assets/images/error-img.png")} />
</div>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="车牌照片"> <Descriptions.Item label="车牌照片">
<img src={item.in_plate_pic} alt="车牌照片" />
<div className="ltc-item ltc-item-img ">
<img src={item.in_plate_pic || require("../../../../../src/assets/images/error-img.png")} />
</div>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
</div> </div>
@ -579,7 +583,7 @@ function ParkRecordTotal() {
columns={columns} columns={columns}
dataSource={dataSource} dataSource={dataSource}
scroll={{ x: 1000 }} scroll={{ x: 1000 }}
// className="yisa-table"
// className="yisa-table"
/> />
); );
} }
@ -691,7 +695,7 @@ function ParkRecordTotal() {
}, },
]} ]}
pagination={false} pagination={false}
// className="yisa-table"
// className="yisa-table"
/> />
<Descriptions title="车场详情"> <Descriptions title="车场详情">
<Descriptions.Item label="停车场名称"> <Descriptions.Item label="停车场名称">

12
src/pages/OperationCenter/CarMgm/CarInfo/index.scss
View File

@ -264,6 +264,18 @@ $color-primary: var(--color-primary);
width: 150px; width: 150px;
} }
} }
.ltc-item-img {
width: 540px;
height: 300px;
border: 1px solid;
background: #6565656b;
margin-right: 20px !important;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
} }
} }
.distable { .distable {

12
src/pages/OperationCenter/CarMgm/CarInfo/loadable.jsx
View File

@ -780,10 +780,14 @@ function CarInfo() {
</div> </div>
</div> </div>
<div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div> <div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div>
<Descriptions title="">
<Descriptions.Item label=""><img width={300} src={params.in_veh_pic} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} /></Descriptions.Item>
<Descriptions.Item label=""><img width={300} src={params.in_plate_pic} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} /></Descriptions.Item>
</Descriptions>
<div className="ltc-content">
<div className="ltc-item ltc-item-img ">
<img src={params.in_veh_pic || require("../../../../../src/assets/images/error-img.png")} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} />
</div>
<div className="ltc-item ltc-item-img ">
<img src={params.in_plate_pic || require("../../../../../src/assets/images/error-img.png")} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} />
</div>
</div>
</div> </div>
); );
} }

Write Preview
Loading…
Cancel
Save