diff --git a/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-gz.png b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-gz.png new file mode 100644 index 0000000..2ec3ad3 Binary files /dev/null and b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-gz.png differ diff --git a/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-kx.png b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-kx.png new file mode 100644 index 0000000..6067ae1 Binary files /dev/null and b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-kx.png differ diff --git a/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-lx.png b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-lx.png new file mode 100644 index 0000000..0b4a02b Binary files /dev/null and b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-lx.png differ diff --git a/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zdzs.png b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zdzs.png new file mode 100644 index 0000000..2d856c8 Binary files /dev/null and b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zdzs.png differ diff --git a/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zy.png b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zy.png new file mode 100644 index 0000000..4a368cf Binary files /dev/null and b/src/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zy.png differ diff --git a/src/components/TableModule/index.jsx b/src/components/TableModule/index.jsx index 2607b67..8f59462 100644 --- a/src/components/TableModule/index.jsx +++ b/src/components/TableModule/index.jsx @@ -66,6 +66,7 @@ const TableModule = forwardRef((props, ref) => { showSerial = false,// 表格是否显示序号 limitType = 0, // 时间限制类型 0无限制， < 0 今天之前不可选， > 0 今天之后不可选 limit = 0, // 限制距离今天之前或之后天数 + rightHeaderCompSlot= null, // 右侧头部插入自定义组件，注意计算并表格样式高度 } = props; const [sessionTabList, setSessionTabList] = useSessionStorageState(pageName, { value: {} @@ -1051,7 +1052,7 @@ const TableModule = forwardRef((props, ref) => { : null} - + {rightHeaderCompSlot}
共查询到 diff --git a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/dataSource.js b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/dataSource.js index 99b73a3..e69de29 100644 --- a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/dataSource.js +++ b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/dataSource.js @@ -1,183 +0,0 @@ -//用来存储表头的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", - }, -]; diff --git a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss index 9a8202a..9772ef5 100644 --- a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss +++ b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss @@ -1,238 +1,29 @@ -@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; +.TableModule { + &.real-time-monitor_charger-monitor { + // .left-search{ + + // } + .right-list { + .cc-result-flow { + .ant-table-wrapper { + .custom-table-cell-span { + &.charge-status { + &__1 { + color: #2adc41; + } + &__2 { + color: #f99b2f; + } + &__3 { + color: #ec5761; + } + &__4 { + color: #a0b0bd; + } + } + } } } } } } - -.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; - } -} \ No newline at end of file diff --git a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx index 7d1888e..e3c82ab 100644 --- a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx +++ b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx @@ -30,69 +30,68 @@ import { } from "./dataSource"; // import errorImg from "@/assets/images/layout/error.png" -const { TextArea } = Input; - function ChargerMonitor() { - const [tableData, setTableData] = useState([]); - const [total, setTotal] = useState(0); + const [tableData, setTableData] = useState([]); // 列表数据 + const [total, setTotal] = useState(0); // 数据总数 const initFormData = { - charge_station: "", // 充电站 - tel: "", // 手机号 + status: "", // 充电状态 plate: "", // 车牌号 - charge_status: "", // 充电状态 - time:{ - - } + phone: "", // 手机号 + station_name: "", // 充电站 + start_time: "", // 开始时间 + end_time: "", // 结束时间 }; // 初始数据 const formSearch = [ { label: "充电桩", - name: "charge_station", + name: "charging_pile", type: "Input", placeholder: "请输入", }, { label: "会员手机", - name: "tel", + name: "phone", type: "Input", placeholder: "请输入会员手机", }, { label: "车牌号", - name: "plate_num", + name: "plate", type: "Input", placeholder: "请输入车牌号", }, { label: "充电状态", - name: "charge_status", + name: "charging_status", type: "Select", - placeholder: "请输入", - options:[] + placeholder: "请选择充电状态", + defaultValue: 0, + options: sysConfig.energyChargingStatus, }, { name: "time", type: "RangePicker", label: "充电开始时间", + defaultTitle: ["充电开始时间", " "], }, ]; // 检索栏 const columns = [ - { - title: "序号", - dataIndex: "index", - key: "index", - align: "center", - fixed: "left", - render: (text, record, index) => index + 1, - width: 100, - }, + // { + // title: "序号", + // dataIndex: "index", + // key: "index", + // align: "center", + // fixed: "left", + // render: (text, record, index) => index + 1, + // width: 100, + // }, { title: "用户手机号", - dataIndex: "user_tel", - key: "user_tel", + dataIndex: "phone", + key: "phone", align: "center", }, { @@ -103,38 +102,70 @@ function ChargerMonitor() { }, { title: "枪名称", - dataIndex: "plate_color", - key: "plate_color", + dataIndex: "muzzle_type_text", + key: "muzzle_type_text", align: "center", + render: (val, record) => { + return ( + + {val || "-"} + + ); + }, }, { title: "充电站", - dataIndex: "berth_id", - key: "berth_id", - width: 100, + dataIndex: "station_name", + key: "station_name", + // width: 100, align: "center", }, { title: "充电开始时间", - dataIndex: "in_time", - key: "in_time", + dataIndex: "charge_start_time", + key: "charge_start_time", align: "center", }, { title: "充电状态", - dataIndex: "operation", - key: "operation", + dataIndex: "charge_status_text", + key: "charge_status_text", align: "center", - fixed: "right", - width: 100, + // fixed: "right", + // width: 100, + render: (val, record) => { + return ( + + {val || "-"} + + ); + }, }, { title: "图像记录", - dataIndex: "operation", - key: "operation", + dataIndex: "pic_url", + key: "pic_url", align: "center", - fixed: "right", - width: 100, + // fixed: "right", + // width: 100, + render: (val, record) => { + return ( + <> + { + openImgRecordModal(val); + }} + > + 查看 + + + ); + }, }, { title: "操作", @@ -143,39 +174,83 @@ function ChargerMonitor() { align: "center", fixed: "right", width: 100, + render: (val, record) => { + return ( + <> + - + + ); + }, }, ]; // 表头 // 获取函数 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); - } - }); + ajax + .getChargingMonitorList(params) + .then((res) => { + if (res.status === 20000) { + setTableData(res.data.list); + setTotal(res.data.total); + } else { + message.error(res.message); + } + }) + .catch((err) => { + console.error(err); + }); } - useEffect(() => {}, []); + // 图像记录查看 + const [ImgRecordShow, setImgRecordShow] = useState(false); + const [ImgRecordData, setImgRecordData] = useState({ + pic_url: "", + }); + + const openImgRecordModal = (pic_url = "") => { + setImgRecordShow(true); + setImgRecordData({ pic_url }); + }; + const closeImgRecordModal = () => { + setImgRecordShow(false); + }; return ( <> + { + closeImgRecordModal(); + }} + > +
+ +
+ ); } diff --git a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/dataSource.js b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/dataSource.js index 99b73a3..e69de29 100644 --- a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/dataSource.js +++ b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/dataSource.js @@ -1,183 +0,0 @@ -//用来存储表头的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", - }, -]; diff --git a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.scss b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.scss index 9a8202a..9a7abf9 100644 --- a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.scss +++ b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.scss @@ -1,238 +1,85 @@ -@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%; +// 组件样式修改 +.TableModule { + &.real-time-monitor_pile-monitor { + // .left-search { + // } + .right-list { + .custom-right-list-header { 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; + // align-items: center; + height: 100px; + padding-bottom: 20px; + .item { + width: 20%; + height: 80px; + display: flex; + .item-left { + width: 80px; + height: 100%; + .img { + width: 80px; + height: 100%; + border: none; + background-size: 100% 100%; + &-zdzs{ + background: url("@/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zdzs.png"); + } + &-kx{ + background: url("@/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-kx.png"); + } + &-zy{ + background: url("@/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-zy.png"); + } + &-gz{ + background: url("@/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-gz.png"); + } + &-lx{ + background: url("@/assets/images/NewEnergy/RealtimeMonitor/PileMonitor/image-lx.png"); + } + } + } + .item-right { + width: calc(100% - 80px); + padding-left: 15px; + display: flex; + flex-direction: column; + justify-content: center; + span { + &.num { + color: #fff; + font-size: 20px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + color: #ffffff; + } + &.label { + opacity: 0.8; + font-size: 14px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: left; + color: #ffffff; + } + } + } } } - } - } -} - -.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); + .cc-result-flow { + height: calc(100% - 34px - 13px - 100px); + .ant-table-wrapper { + .custom-table-cell-span { + &.online-status { + &__2 { + color: #2adc41; + } + &__1 { + color: #ec5761; + } + } + } + } } } } } - -.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; - } -} \ No newline at end of file diff --git a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx index fe1f87b..af4272c 100644 --- a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx +++ b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from "react"; +import React, { useState, useRef, useEffect, useMemo } from "react"; import { message, Pagination, @@ -13,109 +13,124 @@ import { Select, Image, Timeline, - Popover + Popover, } from "antd"; + import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; +import { ResultFlow, ExportBtnNew, QuickMenu } from "@/components"; import ajax from "@/services"; -import errorImg from '@/assets/images/error-img-new.png' -import { QuestionCircleOutlined } from '@ant-design/icons'; +import errorImg from "@/assets/images/error-img-new.png"; +import { QuestionCircleOutlined } from "@ant-design/icons"; import { TableModule } from "@/components"; import "./index.scss"; +import { functions } from "lodash"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; -const { TextArea } = Input; - -let array = []; function PileMonitor() { + // const [pageData,setPageData] = useState({ + // pn:1, + // page_size:15 + // }) + // const [loading,setLoading] = useState(false); + const [tableData, setTableData] = useState([]); // 列表数据 + const [total, setTotal] = useState(0); // 数据总数 + const [statsData, setStatsData] = useState({}); // 统计数据 - + const initFormData = { + station_name: "", // 充电桩 + muzzle_text: "", // 枪名称 + pile_type: "", // 充电类型 + charge_status: "", // 枪状态 + }; // 初始数据 const formSearch = [ { - name: "device_name", + label: "充电桩", + name: "station_name", type: "Input", - label: "设备名称", - placeholder:"请输入" + placeholder: "请输入", }, { - name: "device_num", + label: "枪名称", + name: "muzzle_text", type: "Input", - label: "设备编码", - placeholder:"请输入" + placeholder: "请输入", }, { - name: "device_state", + label: "充电类型", + name: "pile_type", type: "Select", - label: "设备状态", defaultValue: 0, - options: sysConfig.energyDeviceType, + options: sysConfig.energyChargingType, }, { - name: "lock_state", + label: "枪状态", + name: "charge_status", type: "Select", - label: "车位锁状态", defaultValue: 0, - options: sysConfig.energyLockState, + options: sysConfig.energyChargingGunStatus, }, - - ]; - const initFormData = { - device_name:"", - device_num:"" - }; - //历史处理的表头 + ]; // 搜索栏配置 + const columns = [ { - title: "序号", - dataIndex: "id", - key: "id", + title: "桩名称", + dataIndex: "name", + key: "name", align: "center", - render: (text, record, index) => index + 1, }, { - title: "设备名称", - dataIndex: "device_name", - key: "device_name", + title: "枪名称", + dataIndex: "muzzle_text", + key: "muzzle_text", align: "center", }, { - title: "设备编码", - dataIndex: "device_num", - key: "device_num", - align: "center", - }, - { - title: "设备类型", - dataIndex: "device_type", - key: "device_type", + title: "在线状态", + dataIndex: "pile_status_text", + key: "pile_status_text", align: "center", + render: (val, record) => { + return ( + + {val} + + ); + }, }, { - title: "设备供应商", - dataIndex: "device_vendor", - key: "device_vendor", + title: "枪状态", + dataIndex: "charge_status_text", + key: "charge_status_text", align: "center", + // render: (val, record) => { + // return ( + // + // {val} + // + // ); + // }, }, { - title: "对接平台", - dataIndex: "platform", - key: "platform", + title: "地锁状态", + dataIndex: "lock_status_text", + key: "lock_status_text", align: "center", }, { - title: "车位锁状态", - dataIndex: "lock_state_name", - key: "lock_state_name", + title: "充电类型", + dataIndex: "type_text", + key: "type_text", align: "center", }, { - title: "设备状态", - dataIndex: "device_state_name", - key: "device_state_name", + title: "充电站", + dataIndex: "station_name", + key: "station_name", align: "center", }, { @@ -123,53 +138,187 @@ function PileMonitor() { dataIndex: "operation", key: "operation", align: "center", - fixed: "right", render: (_, record) => { - return ( - - ); + return <>; + // return ; }, }, - ]; - - + ]; // 表头 - - const [tableData, setTableData] = useState([]); - const [total, setTotal] = useState(0); //获取函数 function search(params) { - utils.tableScrollTop("parent-table-scroll") - ajax.getPileMonitor(params).then((res) => { - if (res.status === 20000) { - setTableData(res.data.list); - setTotal(res.data.total); - }else{ - message.error(res.message) - } - }); + utils.tableScrollTop("parent-table-scroll"); + // setLoading(true); + ajax + .getPileMonitorList(params) + .then((res) => { + if (res.status === 20000) { + setTableData(res?.data?.list ?? []); + setTotal(res?.data?.total ?? 0); + } else { + message.error(res.message); + } + }) + .catch((err) => { + console.error(err); + }) + .finally(() => { + // setLoading(false); + }); + } + + // 获取统计数据 + function getStatsData(params) { + ajax + .getPileMonitorStatsData() + .then((res) => { + if (res.status === 20000) { + setStatsData(res.data ?? {}); + } else { + message.error(res.message); + } + }) + .catch((err) => { + console.error(err); + }) + .finally(() => { + // setLoading(false); + }); } + useEffect(() => { + getStatsData(); + }, []); + + // 右边头部 + const renderRightListHeader = useMemo(() => { + const renderItem = (type, num, label) => { + return ( +
+
+ {/* */} +
+
+
+ {num ?? 0} + {label } +
+
+ ); + }; + return ( +
+ {renderItem("zdzs", statsData?.all_count, "终端总数(个)")} + {renderItem("kx", statsData?.kx_count, "空闲(个)")} + {renderItem("zy", statsData?.zy_count, "占用(个)")} + {renderItem("gz", statsData?.gz_count, "故障(个)")} + {renderItem("lx", statsData?.lx_count, "离线(个)")} +
+ ); + }, [statsData]); + return ( <> + {/*
+
+
{"查询条件"}
+
+ {renderSearch()} +
+ + + {renderAdd()} +
+
+
+
+
+ + 共查询到 + {total} + 条结果 + +
+ + {true && ( + + total ? ( + 导出} + modalType="noImg" + ref={exportRef} + totalRecords={total} + exportUrl={exportUrl} + imgno={false} + postdata={{ + formData: pageData + }} + isTableModule={true} + onOk={handleExport} + /> + ) : <> + )} +
+
+ +
+ + +
+ `共 ${total_records} 条`} + total={total} + current={pageData.pn} + pageSize={pageData.page_size} + pageSizeOptions={dictionary?.pageSizeOptions} + onChange={onChange} + // onShowSizeChange={onShowSizeChange} + /> +
+ + + */} ); } diff --git a/src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx b/src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx index b1907fd..10d87f4 100644 --- a/src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx +++ b/src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx @@ -19,22 +19,21 @@ import { dictionary } from "@/config/common"; import ajax from "@/services"; import { TableModule } from "@/components"; import "./index.scss"; - +import moment from "moment"; const { TextArea } = Input; + // 开锁记录 function Unlocking() { - // 详情弹窗 - // const [detailVisible, setDetailVisible] = useState(false); - // 列表数据 - const [tableData, setTableData] = useState([]); - // 数据总数 - const [total, setTotal] = useState(0); - // 详情数据 - const [detailData, setDetailData] = useState({}); + + const [tableData, setTableData] = useState([]); // 列表数据 + const [total, setTotal] = useState(0); // 数据总数 + // 初始搜索条件 const initFormData = { - tel_number: "", - rule_name: "", + tel: "", + charging_station: "", + ground_lock_name: "", + unlocking_timerange:[moment().subtract(1,"weeks"),moment()] }; const formSearch = [ @@ -57,9 +56,9 @@ function Unlocking() { placeholder: "请输入", }, { - name: "timePeriod", - type: "RangePicker", - label: "降锁时间范围", + name: "unlocking_timerange", + type: "DateRangePicker", + label: "降锁时间", }, ]; // 搜索栏 @@ -113,14 +112,14 @@ function Unlocking() { }, ]; // 表头 - // 打开弹窗 - const openModal = (index, record) => { - setDetailData(record) - setDetailVisible(true); - } - // 检索 const search = (params) => { + let temp_obj = {...params} + if(temp_obj.unlocking_timerange?.length){ + temp_obj.unlocking_timerange = temp_obj.unlocking_timerange[0].format('YYYY-MM-DD') + ',' + temp_obj.unlocking_timerange[1].format('YYYY-MM-DD') + }else{ + temp_obj.unlocking_timerange = '' + } ajax.recordsInquiry.getUnlockingList(params).then((res) => { if (res.status === 20000) { setTableData(res.data.list); @@ -131,9 +130,6 @@ function Unlocking() { }); } - const handelAdd = () => { - setDetailVisible(true) - } return ( <> @@ -143,7 +139,7 @@ function Unlocking() { diyButton={ @@ -156,7 +152,7 @@ function Unlocking() { initFormData={initFormData} total={total} search={search} - exportUrl="/api/bpm/record/get_record_export" + exportUrl="/api/new_power/records/unlocking" /> {/* { return ajax({ url: "/api/new_power/realtime_monitor/pile_monitor/get_record_list", @@ -9,6 +9,36 @@ const getPileMonitor = (params) => { }); }; -export default{ - getPileMonitor, -} \ No newline at end of file +//获取充电监控接口 +const getChargingMonitorList = (params) => { + return ajax({ + url: "/api/nes/charge/list", + type: "post", + data: params, + }); +}; + +//获取电桩监控接口 +const getPileMonitorList = (params) => { + return ajax({ + url: "/api/nes/piles/list", + type: "post", + data: params, + }); +}; + +//获取电桩监控- 统计接口 +const getPileMonitorStatsData = (params) => { + return ajax({ + url: "/api/nes/piles/count", + type: "post", + data: params, + }); +}; + +export default { + getPileMonitor, + getChargingMonitorList, + getPileMonitorList, + getPileMonitorStatsData, +};