Browse Source
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop
tags/PMS_V1.0.0_Alpha5
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop
tags/PMS_V1.0.0_Alpha5
chenglb
1 year ago
28 changed files with 6111 additions and 1 deletions
-
183src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/dataSource.js
-
6src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.jsx
-
238src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss
-
1126src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
-
183src/pages/NewEnergy/RealtimeMonitor/LockMonitor/dataSource.js
-
6src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx
-
238src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.scss
-
1126src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
-
183src/pages/NewEnergy/RealtimeMonitor/PileMonitor/dataSource.js
-
6src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.jsx
-
238src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.scss
-
658src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
-
10src/pages/NewEnergy/RealtimeMonitor/index.jsx
-
6src/pages/NewEnergy/RecordsInquiry/Appointment/index.jsx
-
238src/pages/NewEnergy/RecordsInquiry/Appointment/index.scss
-
231src/pages/NewEnergy/RecordsInquiry/Appointment/loadable.jsx
-
6src/pages/NewEnergy/RecordsInquiry/Charge/index.jsx
-
238src/pages/NewEnergy/RecordsInquiry/Charge/index.scss
-
231src/pages/NewEnergy/RecordsInquiry/Charge/loadable.jsx
-
6src/pages/NewEnergy/RecordsInquiry/Unlocking/index.jsx
-
238src/pages/NewEnergy/RecordsInquiry/Unlocking/index.scss
-
181src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx
-
6src/pages/NewEnergy/RecordsInquiry/Violation/index.jsx
-
238src/pages/NewEnergy/RecordsInquiry/Violation/index.scss
-
231src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx
-
13src/pages/NewEnergy/RecordsInquiry/index.jsx
-
6src/pages/NewEnergy/index.jsx
-
42src/router/router.config.js
@ -0,0 +1,183 @@ |
|||||
|
//用来存储表头的js文件
|
||||
|
import React from "react"; |
||||
|
import { Button } from "antd"; |
||||
|
//支付记录的表头
|
||||
|
export const payRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单ID", |
||||
|
dataIndex: "order_id", |
||||
|
key: "order_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "入场时间", |
||||
|
dataIndex: "admission_time", |
||||
|
key: "admission_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "计费时间", |
||||
|
dataIndex: "charging_time", |
||||
|
key: "charging_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付时间", |
||||
|
dataIndex: "pay_time", |
||||
|
key: "pay_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "应收金额", |
||||
|
dataIndex: "receivable_amount", |
||||
|
key: "receivable_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "优惠金额", |
||||
|
dataIndex: "discount_amount", |
||||
|
key: "discount_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "实付金额", |
||||
|
dataIndex: "paid_in_money", |
||||
|
key: "paid_in_money", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付类型", |
||||
|
dataIndex: "pay_type_name", |
||||
|
key: "pay_type_name", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付渠道", |
||||
|
dataIndex: "payment_channels", |
||||
|
key: "payment_channels", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付设备", |
||||
|
dataIndex: "payment_equipment", |
||||
|
key: "payment_equipment", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付人", |
||||
|
dataIndex: "pay_person", |
||||
|
key: "pay_person", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "付款路段", |
||||
|
dataIndex: "pay_road", |
||||
|
key: "pay_road", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "第三方流水ID", |
||||
|
dataIndex: "third_party_flow_id", |
||||
|
key: "third_party_flow_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
|
//退款订单的表头
|
||||
|
export const refundRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款方式", |
||||
|
dataIndex: "refund_type", |
||||
|
key: "refund_type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付渠道", |
||||
|
dataIndex: "pay_road", |
||||
|
key: "pay_road", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付设备", |
||||
|
dataIndex: "paymentDevice", |
||||
|
key: "paymentDevice", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款原因", |
||||
|
dataIndex: "reason", |
||||
|
key: "reason", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款金额", |
||||
|
dataIndex: "refund_amount", |
||||
|
key: "refund_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "申请人", |
||||
|
dataIndex: "application_person", |
||||
|
key: "application_person", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "申请时间", |
||||
|
dataIndex: "application_time", |
||||
|
key: "application_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款时间", |
||||
|
dataIndex: "refund_time", |
||||
|
key: "refund_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
|
//操作记录
|
||||
|
export const operatorRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作类型", |
||||
|
dataIndex: "type", |
||||
|
key: "type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作来源", |
||||
|
dataIndex: "source", |
||||
|
key: "source", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作人/设备", |
||||
|
dataIndex: "object", |
||||
|
key: "object", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作时间", |
||||
|
dataIndex: "time", |
||||
|
key: "time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const ChargerMonitor = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <ChargerMonitor {...pros} fallback={<LoadingImg />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
1126
src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,183 @@ |
|||||
|
//用来存储表头的js文件
|
||||
|
import React from "react"; |
||||
|
import { Button } from "antd"; |
||||
|
//支付记录的表头
|
||||
|
export const payRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单ID", |
||||
|
dataIndex: "order_id", |
||||
|
key: "order_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "入场时间", |
||||
|
dataIndex: "admission_time", |
||||
|
key: "admission_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "计费时间", |
||||
|
dataIndex: "charging_time", |
||||
|
key: "charging_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付时间", |
||||
|
dataIndex: "pay_time", |
||||
|
key: "pay_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "应收金额", |
||||
|
dataIndex: "receivable_amount", |
||||
|
key: "receivable_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "优惠金额", |
||||
|
dataIndex: "discount_amount", |
||||
|
key: "discount_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "实付金额", |
||||
|
dataIndex: "paid_in_money", |
||||
|
key: "paid_in_money", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付类型", |
||||
|
dataIndex: "pay_type_name", |
||||
|
key: "pay_type_name", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付渠道", |
||||
|
dataIndex: "payment_channels", |
||||
|
key: "payment_channels", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付设备", |
||||
|
dataIndex: "payment_equipment", |
||||
|
key: "payment_equipment", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付人", |
||||
|
dataIndex: "pay_person", |
||||
|
key: "pay_person", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "付款路段", |
||||
|
dataIndex: "pay_road", |
||||
|
key: "pay_road", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "第三方流水ID", |
||||
|
dataIndex: "third_party_flow_id", |
||||
|
key: "third_party_flow_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
|
//退款订单的表头
|
||||
|
export const refundRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款方式", |
||||
|
dataIndex: "refund_type", |
||||
|
key: "refund_type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付渠道", |
||||
|
dataIndex: "pay_road", |
||||
|
key: "pay_road", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付设备", |
||||
|
dataIndex: "paymentDevice", |
||||
|
key: "paymentDevice", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款原因", |
||||
|
dataIndex: "reason", |
||||
|
key: "reason", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款金额", |
||||
|
dataIndex: "refund_amount", |
||||
|
key: "refund_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "申请人", |
||||
|
dataIndex: "application_person", |
||||
|
key: "application_person", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "申请时间", |
||||
|
dataIndex: "application_time", |
||||
|
key: "application_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款时间", |
||||
|
dataIndex: "refund_time", |
||||
|
key: "refund_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
|
//操作记录
|
||||
|
export const operatorRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作类型", |
||||
|
dataIndex: "type", |
||||
|
key: "type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作来源", |
||||
|
dataIndex: "source", |
||||
|
key: "source", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作人/设备", |
||||
|
dataIndex: "object", |
||||
|
key: "object", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作时间", |
||||
|
dataIndex: "time", |
||||
|
key: "time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,6 @@ |
|||||
|
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 />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
1126
src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,183 @@ |
|||||
|
//用来存储表头的js文件
|
||||
|
import React from "react"; |
||||
|
import { Button } from "antd"; |
||||
|
//支付记录的表头
|
||||
|
export const payRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单ID", |
||||
|
dataIndex: "order_id", |
||||
|
key: "order_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "入场时间", |
||||
|
dataIndex: "admission_time", |
||||
|
key: "admission_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "计费时间", |
||||
|
dataIndex: "charging_time", |
||||
|
key: "charging_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付时间", |
||||
|
dataIndex: "pay_time", |
||||
|
key: "pay_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "应收金额", |
||||
|
dataIndex: "receivable_amount", |
||||
|
key: "receivable_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "优惠金额", |
||||
|
dataIndex: "discount_amount", |
||||
|
key: "discount_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "实付金额", |
||||
|
dataIndex: "paid_in_money", |
||||
|
key: "paid_in_money", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付类型", |
||||
|
dataIndex: "pay_type_name", |
||||
|
key: "pay_type_name", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付渠道", |
||||
|
dataIndex: "payment_channels", |
||||
|
key: "payment_channels", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付设备", |
||||
|
dataIndex: "payment_equipment", |
||||
|
key: "payment_equipment", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付人", |
||||
|
dataIndex: "pay_person", |
||||
|
key: "pay_person", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "付款路段", |
||||
|
dataIndex: "pay_road", |
||||
|
key: "pay_road", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "第三方流水ID", |
||||
|
dataIndex: "third_party_flow_id", |
||||
|
key: "third_party_flow_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
|
//退款订单的表头
|
||||
|
export const refundRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款方式", |
||||
|
dataIndex: "refund_type", |
||||
|
key: "refund_type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付渠道", |
||||
|
dataIndex: "pay_road", |
||||
|
key: "pay_road", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "支付设备", |
||||
|
dataIndex: "paymentDevice", |
||||
|
key: "paymentDevice", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款原因", |
||||
|
dataIndex: "reason", |
||||
|
key: "reason", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款金额", |
||||
|
dataIndex: "refund_amount", |
||||
|
key: "refund_amount", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "申请人", |
||||
|
dataIndex: "application_person", |
||||
|
key: "application_person", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "申请时间", |
||||
|
dataIndex: "application_time", |
||||
|
key: "application_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "退款时间", |
||||
|
dataIndex: "refund_time", |
||||
|
key: "refund_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
|
//操作记录
|
||||
|
export const operatorRecordColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作类型", |
||||
|
dataIndex: "type", |
||||
|
key: "type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作来源", |
||||
|
dataIndex: "source", |
||||
|
key: "source", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作人/设备", |
||||
|
dataIndex: "object", |
||||
|
key: "object", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作时间", |
||||
|
dataIndex: "time", |
||||
|
key: "time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const PileMonitor = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <PileMonitor {...pros} fallback={<LoadingImg />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,658 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { |
||||
|
message, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
Space, |
||||
|
Modal, |
||||
|
Button, |
||||
|
Tabs, |
||||
|
Descriptions, |
||||
|
Input, |
||||
|
Steps, |
||||
|
Select, |
||||
|
Image, |
||||
|
Timeline, |
||||
|
Popover |
||||
|
} from "antd"; |
||||
|
import { dictionary, utils } from "@/config/common"; |
||||
|
// import moment from 'moment' |
||||
|
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
||||
|
import ajax from "@/services"; |
||||
|
import errorImg from '@/assets/images/error-img-new.png' |
||||
|
import { QuestionCircleOutlined } from '@ant-design/icons'; |
||||
|
import { TableModule } from "@/components"; |
||||
|
import "./index.scss"; |
||||
|
|
||||
|
// import errorImg from "@/assets/images/layout/error.png" |
||||
|
// import { useLocation } from "react-router-dom"; |
||||
|
const { TextArea } = Input; |
||||
|
|
||||
|
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", |
||||
|
type: "Input", |
||||
|
label: "手机号", |
||||
|
placeholder: "请输入手机号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "plate", |
||||
|
type: "Input", |
||||
|
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", |
||||
|
type: "Select", |
||||
|
label: "车牌颜色", |
||||
|
placeholder: "请输入车牌颜色", |
||||
|
options: sysConfig.plateColor, |
||||
|
}, |
||||
|
{ |
||||
|
name: "order_type", |
||||
|
type: "Select", |
||||
|
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: "时间段", |
||||
|
}, |
||||
|
]; |
||||
|
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: "", |
||||
|
}; |
||||
|
//历史处理的表头 |
||||
|
const historyProgressColumns = [ |
||||
|
{ |
||||
|
title: "序号", |
||||
|
dataIndex: "id", |
||||
|
key: "id", |
||||
|
align: "center", |
||||
|
render: (text, record, index) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: "状态", |
||||
|
dataIndex: "status", |
||||
|
key: "status", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "处理记录ID", |
||||
|
dataIndex: "deal_record_id", |
||||
|
key: "deal_record_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "处理时间", |
||||
|
dataIndex: "deal_time", |
||||
|
key: "deal_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "处理人", |
||||
|
dataIndex: "dealer", |
||||
|
key: "dealer", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "业务订单类型", |
||||
|
dataIndex: "business_type", |
||||
|
key: "business_type", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "更改项", |
||||
|
dataIndex: "change_content", |
||||
|
key: "change_content", |
||||
|
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", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
dataIndex: "operation", |
||||
|
key: "operation", |
||||
|
align: "center", |
||||
|
fixed: "right", |
||||
|
render: (_, record) => { |
||||
|
return ( |
||||
|
<Button |
||||
|
type="primary" |
||||
|
onClick={() => { |
||||
|
checkHistoryDetail(record); |
||||
|
}} |
||||
|
> |
||||
|
操作 |
||||
|
</Button> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
|
||||
|
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) => { |
||||
|
if (res.status === 20000) { |
||||
|
setTableData(res.data.list); |
||||
|
setTotal(res.data.total); |
||||
|
}else{ |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
useEffect(() => { |
||||
|
// setParkingRecordDetail(tableData[recordIndex]); |
||||
|
setCurrentRecordID(tableData[recordIndex]?.park_id || ""); |
||||
|
}, [recordIndex]); |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<TableModule |
||||
|
columns={columns} |
||||
|
tableData={tableData} |
||||
|
formSearch={formSearch} |
||||
|
pagename="停车记录查询" |
||||
|
mandatory={['plate','berth_id']} |
||||
|
mandatory_name={['车牌号或泊位号']} |
||||
|
pageName={'parkRecordTotal'} |
||||
|
initFormData={initFormData} |
||||
|
total={total} |
||||
|
search={search} |
||||
|
exportUrl="/api/bpm/record/get_record_export" |
||||
|
/> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default PileMonitor; |
||||
@ -0,0 +1,10 @@ |
|||||
|
import ChargerMonitor from "./ChargerMonitor" |
||||
|
import LockMonitor from "./LockMonitor" |
||||
|
import PileMonitor from "./PileMonitor" |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
ChargerMonitor, |
||||
|
LockMonitor, |
||||
|
PileMonitor |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const Appointment = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <Appointment {...pros} fallback={<LoadingImg />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,231 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { |
||||
|
message, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
Space, |
||||
|
Modal, |
||||
|
Button, |
||||
|
Tabs, |
||||
|
Descriptions, |
||||
|
Input, |
||||
|
Steps, |
||||
|
Select, |
||||
|
Image, |
||||
|
Timeline, |
||||
|
Popover |
||||
|
} from "antd"; |
||||
|
import { dictionary } from "@/config/common"; |
||||
|
import ajax from "@/services"; |
||||
|
import { TableModule } from "@/components"; |
||||
|
import "./index.scss"; |
||||
|
|
||||
|
const { TextArea } = Input; |
||||
|
|
||||
|
function Appointment() { |
||||
|
// 详情弹窗 |
||||
|
const [detailVisible, setDetailVisible] = useState(false); |
||||
|
// 列表数据 |
||||
|
const [tableData, setTableData] = useState([]); |
||||
|
// 数据总数 |
||||
|
const [total, setTotal] = useState(0); |
||||
|
// 详情数据 |
||||
|
const [detailData, setDetailData] = useState({}); |
||||
|
// 初始搜索条件 |
||||
|
const initFormData = { |
||||
|
operator: "0", |
||||
|
rule_name: "", |
||||
|
}; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: "用户手机号", |
||||
|
dataIndex: "operator", |
||||
|
key: "operator", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "车牌号", |
||||
|
dataIndex: "plate", |
||||
|
key: "plate", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "充电站", |
||||
|
dataIndex: "plate_color", |
||||
|
key: "plate_color", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "商户名称", |
||||
|
dataIndex: "berth_id", |
||||
|
key: "berth_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "降预约开始时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "预约截至时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "缴纳预约费用金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "缴费时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单状态", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单完结时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "预约费用退款金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "顶动感实收金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
dataIndex: "operation", |
||||
|
key: "operation", |
||||
|
align: "center", |
||||
|
fixed: "right", |
||||
|
width: 100, |
||||
|
render: (text, record, index) => { |
||||
|
return ( |
||||
|
<> |
||||
|
<Button type="primary" onClick={() => openModal(index, record)}> |
||||
|
详情 |
||||
|
</Button> |
||||
|
</> |
||||
|
) |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const formSearch = [ |
||||
|
{ |
||||
|
name: "phone", |
||||
|
type: "Input", |
||||
|
label: "用户手机号", |
||||
|
placeholder: "请输入用户手机号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "plate", |
||||
|
type: "Input", |
||||
|
label: "车牌号", |
||||
|
placeholder: "请输入车牌号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "charging", |
||||
|
type: "Input", |
||||
|
label: "充电站", |
||||
|
placeholder: "请输入充电站", |
||||
|
}, |
||||
|
{ |
||||
|
name: "operator", |
||||
|
type: "Select", |
||||
|
label: "商户名称", |
||||
|
defaultValue: "0", |
||||
|
placeholder: "请选择商户名称", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timeStart", |
||||
|
type: "DateRangePicker", |
||||
|
label: "预约开始时间", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timeEnd", |
||||
|
type: "DateRangePicker", |
||||
|
label: "订单完结时间", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const openModal = (index, record) => { |
||||
|
setDetailData(record) |
||||
|
setDetailVisible(true); |
||||
|
} |
||||
|
|
||||
|
// 检索 |
||||
|
const search = (params) => { |
||||
|
ajax.getParkingList(params).then((res) => { |
||||
|
if (res.status === 20000) { |
||||
|
setTableData(res.data.list); |
||||
|
setTotal(res.data.total); |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const handelAdd = () => { |
||||
|
setDetailVisible(true) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<TableModule |
||||
|
showSerial={true} |
||||
|
isExport={false} |
||||
|
diyButton={ |
||||
|
<Button |
||||
|
type="primary" |
||||
|
onClick={handelAdd} |
||||
|
> |
||||
|
新增 |
||||
|
</Button> |
||||
|
} |
||||
|
columns={columns} |
||||
|
tableData={tableData} |
||||
|
formSearch={formSearch} |
||||
|
pagename="预约订单" |
||||
|
pageName={'Appointment'} |
||||
|
initFormData={initFormData} |
||||
|
total={total} |
||||
|
search={search} |
||||
|
exportUrl="/api/bpm/record/get_record_export" |
||||
|
/> |
||||
|
<Modal |
||||
|
open={detailVisible} |
||||
|
width={800} |
||||
|
className="totalModal" |
||||
|
onCancel={() => { |
||||
|
setDetailVisible(false); |
||||
|
}} |
||||
|
destroyOnClose |
||||
|
> |
||||
|
|
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default Appointment; |
||||
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const Charge = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <Charge {...pros} fallback={<LoadingImg />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,231 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { |
||||
|
message, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
Space, |
||||
|
Modal, |
||||
|
Button, |
||||
|
Tabs, |
||||
|
Descriptions, |
||||
|
Input, |
||||
|
Steps, |
||||
|
Select, |
||||
|
Image, |
||||
|
Timeline, |
||||
|
Popover |
||||
|
} from "antd"; |
||||
|
import { dictionary } from "@/config/common"; |
||||
|
import ajax from "@/services"; |
||||
|
import { TableModule } from "@/components"; |
||||
|
import "./index.scss"; |
||||
|
|
||||
|
const { TextArea } = Input; |
||||
|
|
||||
|
function Charge() { |
||||
|
// 详情弹窗 |
||||
|
const [detailVisible, setDetailVisible] = useState(false); |
||||
|
// 列表数据 |
||||
|
const [tableData, setTableData] = useState([]); |
||||
|
// 数据总数 |
||||
|
const [total, setTotal] = useState(0); |
||||
|
// 详情数据 |
||||
|
const [detailData, setDetailData] = useState({}); |
||||
|
// 初始搜索条件 |
||||
|
const initFormData = { |
||||
|
operator: "0", |
||||
|
rule_name: "", |
||||
|
}; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: "用户手机号", |
||||
|
dataIndex: "operator", |
||||
|
key: "operator", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "车牌号", |
||||
|
dataIndex: "plate", |
||||
|
key: "plate", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "充电站", |
||||
|
dataIndex: "plate_color", |
||||
|
key: "plate_color", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "商户名称", |
||||
|
dataIndex: "berth_id", |
||||
|
key: "berth_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "降预约开始时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "预约截至时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "缴纳预约费用金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "缴费时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单状态", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单完结时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "预约费用退款金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "顶动感实收金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
dataIndex: "operation", |
||||
|
key: "operation", |
||||
|
align: "center", |
||||
|
fixed: "right", |
||||
|
width: 100, |
||||
|
render: (text, record, index) => { |
||||
|
return ( |
||||
|
<> |
||||
|
<Button type="primary" onClick={() => openModal(index, record)}> |
||||
|
详情 |
||||
|
</Button> |
||||
|
</> |
||||
|
) |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const formSearch = [ |
||||
|
{ |
||||
|
name: "phone", |
||||
|
type: "Input", |
||||
|
label: "用户手机号", |
||||
|
placeholder: "请输入用户手机号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "plate", |
||||
|
type: "Input", |
||||
|
label: "车牌号", |
||||
|
placeholder: "请输入车牌号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "charging", |
||||
|
type: "Input", |
||||
|
label: "充电站", |
||||
|
placeholder: "请输入充电站", |
||||
|
}, |
||||
|
{ |
||||
|
name: "operator", |
||||
|
type: "Select", |
||||
|
label: "商户名称", |
||||
|
defaultValue: "0", |
||||
|
placeholder: "请选择商户名称", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timeStart", |
||||
|
type: "DateRangePicker", |
||||
|
label: "预约开始时间", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timeEnd", |
||||
|
type: "DateRangePicker", |
||||
|
label: "订单完结时间", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const openModal = (index, record) => { |
||||
|
setDetailData(record) |
||||
|
setDetailVisible(true); |
||||
|
} |
||||
|
|
||||
|
// 检索 |
||||
|
const search = (params) => { |
||||
|
ajax.getParkingList(params).then((res) => { |
||||
|
if (res.status === 20000) { |
||||
|
setTableData(res.data.list); |
||||
|
setTotal(res.data.total); |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const handelAdd = () => { |
||||
|
setDetailVisible(true) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<TableModule |
||||
|
showSerial={true} |
||||
|
isExport={false} |
||||
|
diyButton={ |
||||
|
<Button |
||||
|
type="primary" |
||||
|
onClick={handelAdd} |
||||
|
> |
||||
|
新增 |
||||
|
</Button> |
||||
|
} |
||||
|
columns={columns} |
||||
|
tableData={tableData} |
||||
|
formSearch={formSearch} |
||||
|
pagename="预约订单" |
||||
|
pageName={'Appointment'} |
||||
|
initFormData={initFormData} |
||||
|
total={total} |
||||
|
search={search} |
||||
|
exportUrl="/api/bpm/record/get_record_export" |
||||
|
/> |
||||
|
<Modal |
||||
|
open={detailVisible} |
||||
|
width={800} |
||||
|
className="totalModal" |
||||
|
onCancel={() => { |
||||
|
setDetailVisible(false); |
||||
|
}} |
||||
|
destroyOnClose |
||||
|
> |
||||
|
|
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default Charge; |
||||
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const UnlockingRecord = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <UnlockingRecord {...pros} fallback={<LoadingImg />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,181 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { |
||||
|
message, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
Space, |
||||
|
Modal, |
||||
|
Button, |
||||
|
Tabs, |
||||
|
Descriptions, |
||||
|
Input, |
||||
|
Steps, |
||||
|
Select, |
||||
|
Image, |
||||
|
Timeline, |
||||
|
Popover |
||||
|
} from "antd"; |
||||
|
import { dictionary } from "@/config/common"; |
||||
|
import ajax from "@/services"; |
||||
|
import { TableModule } from "@/components"; |
||||
|
import "./index.scss"; |
||||
|
|
||||
|
const { TextArea } = Input; |
||||
|
|
||||
|
function UnlockingRecord() { |
||||
|
// 详情弹窗 |
||||
|
const [detailVisible, setDetailVisible] = useState(false); |
||||
|
// 列表数据 |
||||
|
const [tableData, setTableData] = useState([]); |
||||
|
// 数据总数 |
||||
|
const [total, setTotal] = useState(0); |
||||
|
// 详情数据 |
||||
|
const [detailData, setDetailData] = useState({}); |
||||
|
// 初始搜索条件 |
||||
|
const initFormData = { |
||||
|
operator: "0", |
||||
|
rule_name: "", |
||||
|
}; |
||||
|
|
||||
|
const formSearch = [ |
||||
|
{ |
||||
|
name: "tel_number", |
||||
|
type: "Input", |
||||
|
label: "手机号", |
||||
|
placeholder: "请输入手机号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "tel_number", |
||||
|
type: "Input", |
||||
|
label: "充电站", |
||||
|
placeholder: "请输入充电站", |
||||
|
}, |
||||
|
{ |
||||
|
name: "tel_number", |
||||
|
type: "Input", |
||||
|
label: "地锁名称", |
||||
|
placeholder: "请输入地锁名称", |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
name: "timePeriod", |
||||
|
type: "RangePicker", |
||||
|
label: "开锁时间范围", |
||||
|
}, |
||||
|
]; // 搜搜栏 |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: "运营商名称", |
||||
|
dataIndex: "operator", |
||||
|
key: "operator", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "规则名称", |
||||
|
dataIndex: "plate", |
||||
|
key: "plate", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "规则编码", |
||||
|
dataIndex: "plate_color", |
||||
|
key: "plate_color", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "创建人", |
||||
|
dataIndex: "berth_id", |
||||
|
key: "berth_id", |
||||
|
width: 100, |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "创建时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
dataIndex: "operation", |
||||
|
key: "operation", |
||||
|
align: "center", |
||||
|
fixed: "right", |
||||
|
width: 100, |
||||
|
render: (text, record, index) => { |
||||
|
return ( |
||||
|
<> |
||||
|
<Button type="primary" onClick={() => openModal(index, record)}> |
||||
|
详情 |
||||
|
</Button> |
||||
|
</> |
||||
|
) |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
]; // 表头 |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const openModal = (index, record) => { |
||||
|
setDetailData(record) |
||||
|
setDetailVisible(true); |
||||
|
} |
||||
|
|
||||
|
// 检索 |
||||
|
const search = (params) => { |
||||
|
ajax.getParkingList(params).then((res) => { |
||||
|
if (res.status === 20000) { |
||||
|
setTableData(res.data.list); |
||||
|
setTotal(res.data.total); |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const handelAdd = () => { |
||||
|
setDetailVisible(true) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<TableModule |
||||
|
showSerial={true} |
||||
|
isExport={false} |
||||
|
diyButton={ |
||||
|
<Button |
||||
|
type="primary" |
||||
|
onClick={handelAdd} |
||||
|
> |
||||
|
新增 |
||||
|
</Button> |
||||
|
} |
||||
|
columns={columns} |
||||
|
tableData={tableData} |
||||
|
formSearch={formSearch} |
||||
|
pagename="停车记录查询" |
||||
|
pageName={'AppointmentRecord'} |
||||
|
initFormData={initFormData} |
||||
|
total={total} |
||||
|
search={search} |
||||
|
exportUrl="/api/bpm/record/get_record_export" |
||||
|
/> |
||||
|
<Modal |
||||
|
open={detailVisible} |
||||
|
width={1500} |
||||
|
className="totalModal" |
||||
|
onCancel={() => { |
||||
|
setDetailVisible(false); |
||||
|
}} |
||||
|
destroyOnClose |
||||
|
> |
||||
|
|
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default UnlockingRecord; |
||||
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const Violation = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <Violation {...pros} fallback={<LoadingImg />} /> |
||||
@ -0,0 +1,238 @@ |
|||||
|
@import "@/assets/css/mixin.scss"; |
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
|
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
|
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
|
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .ant-btn-primary { |
||||
|
width: 68px; |
||||
|
height: 30px; |
||||
|
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th { |
||||
|
background-color: #616b83 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td { |
||||
|
background-color: #3e4557 !important; |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
|
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
|
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
|
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
|
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
|
||||
|
// .yisa-table { |
||||
|
// width: 100%; |
||||
|
|
||||
|
// .ant-table-thead { |
||||
|
// th { |
||||
|
// background: var(--color-table-header-bg) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .ant-table-tbody { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg) !important; |
||||
|
// border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(even) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// tr:nth-child(odd) { |
||||
|
// td { |
||||
|
// background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.totalModal{ |
||||
|
.ant-modal-footer{ |
||||
|
display: none; |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 174px; |
||||
|
} |
||||
|
.ltc-item-img { |
||||
|
width: 390px; |
||||
|
height: 300px; |
||||
|
border: 1px solid; |
||||
|
background: #6565656b; |
||||
|
margin-right: 20px !important; |
||||
|
img { |
||||
|
height: 295px; |
||||
|
width: 387px; |
||||
|
// object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.hanleHistoyModal{ |
||||
|
max-height: 700px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
} |
||||
|
.hanleHistoyModal::-webkit-scrollbar-thumb { |
||||
|
background-color: #9da2ab; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.modal-img{ |
||||
|
img{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,231 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { |
||||
|
message, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
Space, |
||||
|
Modal, |
||||
|
Button, |
||||
|
Tabs, |
||||
|
Descriptions, |
||||
|
Input, |
||||
|
Steps, |
||||
|
Select, |
||||
|
Image, |
||||
|
Timeline, |
||||
|
Popover |
||||
|
} from "antd"; |
||||
|
import { dictionary } from "@/config/common"; |
||||
|
import ajax from "@/services"; |
||||
|
import { TableModule } from "@/components"; |
||||
|
import "./index.scss"; |
||||
|
|
||||
|
const { TextArea } = Input; |
||||
|
|
||||
|
function Violation() { |
||||
|
// 详情弹窗 |
||||
|
const [detailVisible, setDetailVisible] = useState(false); |
||||
|
// 列表数据 |
||||
|
const [tableData, setTableData] = useState([]); |
||||
|
// 数据总数 |
||||
|
const [total, setTotal] = useState(0); |
||||
|
// 详情数据 |
||||
|
const [detailData, setDetailData] = useState({}); |
||||
|
// 初始搜索条件 |
||||
|
const initFormData = { |
||||
|
operator: "0", |
||||
|
rule_name: "", |
||||
|
}; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: "用户手机号", |
||||
|
dataIndex: "operator", |
||||
|
key: "operator", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "车牌号", |
||||
|
dataIndex: "plate", |
||||
|
key: "plate", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "充电站", |
||||
|
dataIndex: "plate_color", |
||||
|
key: "plate_color", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "商户名称", |
||||
|
dataIndex: "berth_id", |
||||
|
key: "berth_id", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "降预约开始时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "预约截至时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "缴纳预约费用金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "缴费时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单状态", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "订单完结时间", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "预约费用退款金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "顶动感实收金额", |
||||
|
dataIndex: "in_time", |
||||
|
key: "in_time", |
||||
|
align: "center", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
dataIndex: "operation", |
||||
|
key: "operation", |
||||
|
align: "center", |
||||
|
fixed: "right", |
||||
|
width: 100, |
||||
|
render: (text, record, index) => { |
||||
|
return ( |
||||
|
<> |
||||
|
<Button type="primary" onClick={() => openModal(index, record)}> |
||||
|
详情 |
||||
|
</Button> |
||||
|
</> |
||||
|
) |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const formSearch = [ |
||||
|
{ |
||||
|
name: "phone", |
||||
|
type: "Input", |
||||
|
label: "用户手机号", |
||||
|
placeholder: "请输入用户手机号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "plate", |
||||
|
type: "Input", |
||||
|
label: "车牌号", |
||||
|
placeholder: "请输入车牌号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "charging", |
||||
|
type: "Input", |
||||
|
label: "充电站", |
||||
|
placeholder: "请输入充电站", |
||||
|
}, |
||||
|
{ |
||||
|
name: "operator", |
||||
|
type: "Select", |
||||
|
label: "商户名称", |
||||
|
defaultValue: "0", |
||||
|
placeholder: "请选择商户名称", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timeStart", |
||||
|
type: "DateRangePicker", |
||||
|
label: "预约开始时间", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timeEnd", |
||||
|
type: "DateRangePicker", |
||||
|
label: "订单完结时间", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const openModal = (index, record) => { |
||||
|
setDetailData(record) |
||||
|
setDetailVisible(true); |
||||
|
} |
||||
|
|
||||
|
// 检索 |
||||
|
const search = (params) => { |
||||
|
ajax.getParkingList(params).then((res) => { |
||||
|
if (res.status === 20000) { |
||||
|
setTableData(res.data.list); |
||||
|
setTotal(res.data.total); |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const handelAdd = () => { |
||||
|
setDetailVisible(true) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<TableModule |
||||
|
showSerial={true} |
||||
|
isExport={false} |
||||
|
diyButton={ |
||||
|
<Button |
||||
|
type="primary" |
||||
|
onClick={handelAdd} |
||||
|
> |
||||
|
新增 |
||||
|
</Button> |
||||
|
} |
||||
|
columns={columns} |
||||
|
tableData={tableData} |
||||
|
formSearch={formSearch} |
||||
|
pagename="预约订单" |
||||
|
pageName={'Appointment'} |
||||
|
initFormData={initFormData} |
||||
|
total={total} |
||||
|
search={search} |
||||
|
exportUrl="/api/bpm/record/get_record_export" |
||||
|
/> |
||||
|
<Modal |
||||
|
open={detailVisible} |
||||
|
width={800} |
||||
|
className="totalModal" |
||||
|
onCancel={() => { |
||||
|
setDetailVisible(false); |
||||
|
}} |
||||
|
destroyOnClose |
||||
|
> |
||||
|
|
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default Violation; |
||||
@ -0,0 +1,13 @@ |
|||||
|
import Appointment from './Appointment' |
||||
|
import Charge from './Charge' |
||||
|
import Violation from './Violation' |
||||
|
import Unlocking from './Unlocking' |
||||
|
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
Appointment, |
||||
|
Charge, |
||||
|
Violation, |
||||
|
Unlocking |
||||
|
} |
||||
@ -1,7 +1,11 @@ |
|||||
import ChargingMgm from './ChargingMgm' |
import ChargingMgm from './ChargingMgm' |
||||
import NewEnergyOverview from './NewEnergyOverview' |
import NewEnergyOverview from './NewEnergyOverview' |
||||
|
import RecordsInquiry from './RecordsInquiry' |
||||
|
import RealtimeMonitor from './RealtimeMonitor' |
||||
|
|
||||
export default { |
export default { |
||||
NewEnergyOverview, |
NewEnergyOverview, |
||||
...ChargingMgm |
|
||||
|
...RealtimeMonitor, |
||||
|
...ChargingMgm, |
||||
|
...RecordsInquiry, |
||||
} |
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue