From 61d1507f3f650b25b3dd30662262a3c95226caa0 Mon Sep 17 00:00:00 2001 From: wanghx Date: Fri, 15 Dec 2023 16:53:08 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E6=B6=88=E6=81=AF=E7=AE=A1=E7=90=86-?= =?UTF-8?q?=E8=BD=A6=E8=BE=86=E9=A2=84=E8=AD=A6=E6=B6=88=E6=81=AFpage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DeviceAlarmMes/ConfInfoModal/index.jsx | 130 +++++++ .../DeviceAlarmMes/ConfInfoModal/index.scss | 22 ++ .../SystemMgm/MessageMgm/DeviceAlarmMes/index.scss | 221 ++++++++++++ .../MessageMgm/DeviceAlarmMes/loadable.jsx | 382 ++++++++++++++++++++- .../MonitorCarAlarmMes/ConfInfoModal/index.jsx | 130 +++++++ .../MonitorCarAlarmMes/ConfInfoModal/index.scss | 22 ++ .../MessageMgm/MonitorCarAlarmMes/index.scss | 221 ++++++++++++ .../MessageMgm/MonitorCarAlarmMes/loadable.jsx | 371 +++++++++++++++++++- src/router/router.config.js | 12 + src/services/SystemMgm/MsgMgm/index.js | 20 +- 10 files changed, 1505 insertions(+), 26 deletions(-) create mode 100644 src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.jsx create mode 100644 src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.scss create mode 100644 src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.jsx create mode 100644 src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.scss diff --git a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.jsx b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.jsx new file mode 100644 index 0000000..76bfe71 --- /dev/null +++ b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.jsx @@ -0,0 +1,130 @@ +import React, {useState, useEffect} from 'react' +import { Modal, Form, Input, DatePicker, TreeSelect, Button } from 'antd' +import moment from 'moment' +import './index.scss' + +function ConfInfoModal (props) { + const { + visible, + isEdit=false, + isDetail=false, + onCancel, + userListData=[], + data={}, + onOk + } = props + + const [baseForm] = Form.useForm() + + const rules = [ + { + required: true, + message: "此为必填字段", + }, + ] + + const handleSave = () => { + baseForm.validateFields().then((data) => { + onOk({...data, push_time: data.push_time.format('YYYY-MM-DD HH:mm:ss'), reciverId: data.reciverId.join(',')}) + }).catch(err => { + console.error(err) + }) + } + + useEffect(() => { + if (visible) { + baseForm.setFieldsValue({...data, push_time: moment(data.push_time), reciverId: data.reciverId ? data.reciverId.split(",") : undefined}) + } else { + baseForm.resetFields() + } + }, [visible]) + + return ( + +
+
+ + + { + !isDetail ? ( + + ) : ( +
{data.title}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.content}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.time}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.deviceId}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.deviceName}
+ ) + } + +
+
+ +
+ { + isDetail ? ( + + ) : ( + <> + + { + (data.infoId) ? ( + + ) : ( + + ) + } + + ) + } +
+ + ) +} + +export default ConfInfoModal \ No newline at end of file diff --git a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.scss b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.scss new file mode 100644 index 0000000..e9b9762 --- /dev/null +++ b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.scss @@ -0,0 +1,22 @@ +.modal-conf { + .conf-form-btn { + display: flex; + justify-content: center; + button { + margin: 0 10px; + &:first-child { + background: var(--button-default-bg); + } + } + } + .conf-detail-title { + font-size: 18px; + font-weight: 700; + } + .conf-detail-textarea { + min-height: 200px; + border: 1px solid #666d7d; + padding: 10px; + border-radius: 4px; + } +} \ No newline at end of file diff --git a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/index.scss b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/index.scss index 1838f71..800ab3b 100644 --- a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/index.scss +++ b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/index.scss @@ -1,5 +1,226 @@ @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); + +.sys-container { + display: flex; + padding-top: 10px; + height: 100%; + .sys-container-left { + display: block; + width: 375px; + padding: 10px 10px 20px 20px; + } + .sys-container-right { + width: calc(100% - 375px); + padding-bottom: 15px; + padding: 20px; + background: var(--color-user-list-bg); + border-top-left-radius: 20px; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); + .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list { + width: unset; + } + .ant-tabs-tab { + padding: unset; + } + + .sys-content { + height: 100%; + display: flex; + flex-direction: column; + .sys-tabs { + margin-bottom: 10px; + } + .sys-wrapper { + flex: 1; + } + } + } +} +.sys-container { + .yisa-search { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 24px; + + label { + color: var(--color-search-list-item-text); + flex: 0 0 27% !important; + max-width: 27% !important; + text-align: right; + padding-right: 8px; + } + + .form-con { + flex: 1; + width: 220px; + } + .ant-select { + width: 100%; + } + } + .form-btn-alarm { + display: flex; + flex-flow: row nowrap; + justify-content: center; + // margin: 40px 0px 0px; + padding: 0 3px; + + .ant-btn+.ant-btn { + margin-left: 10px; + } + + .ant-btn span { + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #ffffff; + } + + .reset { + width: 90px; + height: 36px; + background: var(--button-default-bg); + } + + .btn-export { + width: 90px; + height: 36px; + } + + .add-btn { + width: 90px; + height: 36px; + } + + .submit { + width: 90px; + height: 36px; + } + } + .ant-select-selector, + .ant-picker, + .ant-input { + background-color: var(--color-search-list-item-bg) !important; + box-shadow: none !important; + color: var(--color-search-list-item-value); + border-color: var(--color-search-list-item-bd) !important; + } + .ant-picker { + width: 100%; + } + .sys-search { + .title { + width: 100%; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + color: var(--color-text); + margin-bottom: 20px; + } + } + .form-Wrap { + display: flex; + flex-direction: column; + } +} +.ant-cascader-menu { + width: 260px; +} + + +.sys-container-right { + .export-container { + margin-bottom: 10px; + text-align: right; + } + .sys-item { + height: 350px; + } + .sys-table-content { + margin-top: 20px; + .sys-table { + flex: 1; + .ant-table-body { + @include scrollBar(var(--color-user-list-bg), #3B97FF); + } + .ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td { + background: unset !important; + background-color: #3e4557 !important; + } + .msg-item { + text-align: left; + .msg-title { + font-size: 18px; + font-weight: 700; + } + .msg-content { + display: inline-block; + font-size: 16px; + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; + } + } + } + } +} + +.action-btn { + // background: #409eff; + // border: none; + // width: 50px; + // border-radius: 4px; + cursor: pointer; + } + .action-wrapper { + div { + cursor: pointer; + margin-top: 5px; + } + } + +.sys-item { + color: #fff; + background: #3e4557; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 20px; + &-title { + height: 18px; + display: flex; + align-items: center; + position: relative; + text-indent: .5rem; + font-size: 16px; + font-weight: 700; + user-select: none; + .time { + font-size: 12px; + } + &::before { + position: absolute; + content: ""; + height: 100%; + width: 4px; + left: -2px; + background: var(--color-menu-selected-text-item); + } + } + &-content { + flex: 1; + .echarts-for-react { + height: 100% !important; + } + } +} + diff --git a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx index 2ed1c11..4b440ac 100644 --- a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx +++ b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx @@ -1,15 +1,371 @@ -import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; -// import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; -// import ajax from "@/services" -// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; -function DeviceAlarmMes() { - return
DeviceAlarmMes
+import React, { useState, useRef, useEffect } from "react" +import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip, Popover, Modal } from "antd" +import { DeleteOutlined, InfoCircleOutlined } from '@ant-design/icons' +import { ResultFlowResult, QuickMenu } from '@/components' +import { dictionary } from "@/config/common" +import ConfInfoModal from './ConfInfoModal' +import ajax from "@/services" +import moment from "moment" +import './index.scss' + +function NotificationMes(props) { + const { + + } = props + + const [loading, setLoading] = useState(false) + const defaultFormData = { + keyword: '', + device_text: '', + start_time: '', + end_time: '' + } + const [formData, setFormData] = useState({ + ...defaultFormData + }) + const [pageInfo, setPageInfo] = useState({ + pn: 1, + length: 10 + }) + const [resultData, setResultDate] = useState({ + list: [], + totalRecords: 0 + }) + const [infoModalVisible, setInfoModalVisible] = useState(false) + const [isEdit, setIsEdit] = useState(false) + const [isDetail, setIsDetail] = useState(false) + const [activeInfo, setActiveInfo] = useState({}) + const [userTreeList, setUserTreeList] = useState([]) + const tableColumns = [ + { + title: "序号", + width: 60, + align: 'center', + render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1 + }, + { + title: "报警详情", + align: 'center', + render: (text, record) => { + return ( +
+
{record.title}
+ +
{record.content}
+ +
+ ) + } + }, + { + title: "设备ID", + width: 200, + align: 'center', + dataIndex: "deviceId", + }, + { + title: "设备名称", + width: 200, + align: 'center', + dataIndex: "deviceName", + }, + { + title: "报警时间", + width: 150, + align: 'center', + dataIndex: "time", + }, + { + title: '操作', + width: 120, + align: 'center', + render: (text, record) => { + return <> + +
{ handleDetail(record) }}>详情
+ }> + + + + } + } + ] + const paginationProps = { + className: "pagination-common", + showQuickJumper: true, + showSizeChanger: true, + current: pageInfo.pn, + total: resultData?.totalRecords, + pageSize: pageInfo.length, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), + onChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current, length: size } + }); + } + } + const toDeftime = (v) => { + setFormData({ + ...formData, + start_time: moment(v.startDateTime), + end_time: moment(v.endDateTime) + }) + } + + + const ajaxGetListData = () => { + setLoading(true) + ajax.getDeviceAlarmList({...formData, ...pageInfo}).then(res => { + if (res.status == 20000) { + setResultDate({ + list: res.data, + totalRecords: res.totalRecords || 0 + }) + } + setLoading(false) + }) + } + + const ajaxGetUserListData = () => { + ajax.getUserTreeData().then(res => { + if (res.status == 20000) { + setUserTreeList(res.data) + } + }) + } + + const TimeChange = () => { + let e = formData.date_type; + let str = "date"; + let mat = "YYYY-MM-DD"; + if (e == "year") { + str = "year"; + mat = "YYYY"; + } else if (e == "month") { + str = "month"; + mat = "YYYY-MM"; + } else if (e == "week") { + str = "week"; + mat = "YYYY-MM-DD"; + } + return { str, mat }; + } + + const ajaxMsgInfoUpdate = (data) => { + return new Promise((resolve, rejected) => { + ajax.msgConfUpdate(data).then((res) => { + if (res.status == 20000) { + resolve(res.messgae) + } else { + rejected(res.message) + } + }).catch((err) => { + rejected(err) + }) + }) + } + + const handleInfoUpdate = (data) => { + ajaxMsgInfoUpdate(data).then(msg => { + message.success(msg) + setInfoModalVisible(false) + handleSearch() + }).catch(err => { + console.log(err) + }) + } + + + const handleDetail = (data) => { + setIsEdit(false) + setIsDetail(true) + setActiveInfo({...data}) + setInfoModalVisible(true) + } + + const handleInfoModalCancel = () => { + setInfoModalVisible(false) + } + + const handleReset = () => { + setFormData({ + ...defaultFormData + }) + setPageInfo({ + pn: 1, + length: 10 + }) + } + + const handleSearch = () => { + ajaxGetListData() + } + + useEffect(() => { + ajaxGetListData() + }, [JSON.stringify(pageInfo)]) + + useEffect(() => { + ajaxGetUserListData() + }, []) + + return ( +
+
+
+
查询条件
+
+
+ + setFormData({...formData, keyword: v.target.value})} + /> +
+
+ + setFormData({...formData, device_text: v.target.value})} + /> +
+
+ + { + if (TimeChange().str == "week") { + setFormData({ + ...formData, + start_time: date + ? moment(date).day(1).format("YYYY-MM-DD") + : null, + }); + } else if (TimeChange().str == "day") { + if (date > moment(formData.end_time)) { + setFormData({ + ...formData, + end_time: dateString, + start_time: formData.end_time, + }); + } else { + setFormData({ + ...formData, + start_time: dateString, + }); + } + } else { + setFormData({ ...formData, start_time: dateString }); + } + }} + disabledDate={(current) => current > moment(formData.end_time)} + /> + +
+
+ + { + if (TimeChange().str == "week") { + setFormData({ + ...formData, + end_time: date + ? moment(date).day(7).format("YYYY-MM-DD") + : null, + }); + } else if (TimeChange().str == "day") { + if (date < moment(formData.start_time)) { + setFormData({ + ...formData, + start_time: dateString, + end_time: formData.start_time, + }); + } else { + setFormData({ + ...formData, + end_time: dateString, + }); + } + } else { + setFormData({ ...formData, end_time: dateString }); + } + }} + disabledDate={(current) => + current < moment(formData.start_time) + } + /> +
+
+ toDeftime(v)} /> +
+
+ + +
+
+
+
+
+
+ + + + + + + + + ) } -export default DeviceAlarmMes; \ No newline at end of file +export default NotificationMes; \ No newline at end of file diff --git a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.jsx b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.jsx new file mode 100644 index 0000000..fc192fd --- /dev/null +++ b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.jsx @@ -0,0 +1,130 @@ +import React, {useState, useEffect} from 'react' +import { Modal, Form, Input, DatePicker, TreeSelect, Button } from 'antd' +import moment from 'moment' +import './index.scss' + +function ConfInfoModal (props) { + const { + visible, + isEdit=false, + isDetail=false, + onCancel, + userListData=[], + data={}, + onOk + } = props + + const [baseForm] = Form.useForm() + + const rules = [ + { + required: true, + message: "此为必填字段", + }, + ] + + const handleSave = () => { + baseForm.validateFields().then((data) => { + onOk({...data, push_time: data.push_time.format('YYYY-MM-DD HH:mm:ss'), reciverId: data.reciverId.join(',')}) + }).catch(err => { + console.error(err) + }) + } + + useEffect(() => { + if (visible) { + baseForm.setFieldsValue({...data, push_time: moment(data.push_time), reciverId: data.reciverId ? data.reciverId.split(",") : undefined}) + } else { + baseForm.resetFields() + } + }, [visible]) + + return ( + +
+
+ + + { + !isDetail ? ( + + ) : ( +
{data.title}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.content}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.time}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.parkName}
+ ) + } + + + { + !isDetail ? ( + + ) : ( +
{data.plateNumber}
+ ) + } + + +
+ +
+ { + isDetail ? ( + + ) : ( + <> + + { + (data.infoId) ? ( + + ) : ( + + ) + } + + ) + } +
+ + ) +} + +export default ConfInfoModal \ No newline at end of file diff --git a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.scss b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.scss new file mode 100644 index 0000000..e9b9762 --- /dev/null +++ b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.scss @@ -0,0 +1,22 @@ +.modal-conf { + .conf-form-btn { + display: flex; + justify-content: center; + button { + margin: 0 10px; + &:first-child { + background: var(--button-default-bg); + } + } + } + .conf-detail-title { + font-size: 18px; + font-weight: 700; + } + .conf-detail-textarea { + min-height: 200px; + border: 1px solid #666d7d; + padding: 10px; + border-radius: 4px; + } +} \ No newline at end of file diff --git a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/index.scss b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/index.scss index 1838f71..800ab3b 100644 --- a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/index.scss +++ b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/index.scss @@ -1,5 +1,226 @@ @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); + +.sys-container { + display: flex; + padding-top: 10px; + height: 100%; + .sys-container-left { + display: block; + width: 375px; + padding: 10px 10px 20px 20px; + } + .sys-container-right { + width: calc(100% - 375px); + padding-bottom: 15px; + padding: 20px; + background: var(--color-user-list-bg); + border-top-left-radius: 20px; + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); + .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list { + width: unset; + } + .ant-tabs-tab { + padding: unset; + } + + .sys-content { + height: 100%; + display: flex; + flex-direction: column; + .sys-tabs { + margin-bottom: 10px; + } + .sys-wrapper { + flex: 1; + } + } + } +} +.sys-container { + .yisa-search { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 24px; + + label { + color: var(--color-search-list-item-text); + flex: 0 0 27% !important; + max-width: 27% !important; + text-align: right; + padding-right: 8px; + } + + .form-con { + flex: 1; + width: 220px; + } + .ant-select { + width: 100%; + } + } + .form-btn-alarm { + display: flex; + flex-flow: row nowrap; + justify-content: center; + // margin: 40px 0px 0px; + padding: 0 3px; + + .ant-btn+.ant-btn { + margin-left: 10px; + } + + .ant-btn span { + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #ffffff; + } + + .reset { + width: 90px; + height: 36px; + background: var(--button-default-bg); + } + + .btn-export { + width: 90px; + height: 36px; + } + + .add-btn { + width: 90px; + height: 36px; + } + + .submit { + width: 90px; + height: 36px; + } + } + .ant-select-selector, + .ant-picker, + .ant-input { + background-color: var(--color-search-list-item-bg) !important; + box-shadow: none !important; + color: var(--color-search-list-item-value); + border-color: var(--color-search-list-item-bd) !important; + } + .ant-picker { + width: 100%; + } + .sys-search { + .title { + width: 100%; + font-size: 16px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + text-align: left; + color: var(--color-text); + margin-bottom: 20px; + } + } + .form-Wrap { + display: flex; + flex-direction: column; + } +} +.ant-cascader-menu { + width: 260px; +} + + +.sys-container-right { + .export-container { + margin-bottom: 10px; + text-align: right; + } + .sys-item { + height: 350px; + } + .sys-table-content { + margin-top: 20px; + .sys-table { + flex: 1; + .ant-table-body { + @include scrollBar(var(--color-user-list-bg), #3B97FF); + } + .ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td { + background: unset !important; + background-color: #3e4557 !important; + } + .msg-item { + text-align: left; + .msg-title { + font-size: 18px; + font-weight: 700; + } + .msg-content { + display: inline-block; + font-size: 16px; + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; + } + } + } + } +} + +.action-btn { + // background: #409eff; + // border: none; + // width: 50px; + // border-radius: 4px; + cursor: pointer; + } + .action-wrapper { + div { + cursor: pointer; + margin-top: 5px; + } + } + +.sys-item { + color: #fff; + background: #3e4557; + border-radius: 4px; + display: flex; + flex-direction: column; + padding: 20px; + &-title { + height: 18px; + display: flex; + align-items: center; + position: relative; + text-indent: .5rem; + font-size: 16px; + font-weight: 700; + user-select: none; + .time { + font-size: 12px; + } + &::before { + position: absolute; + content: ""; + height: 100%; + width: 4px; + left: -2px; + background: var(--color-menu-selected-text-item); + } + } + &-content { + flex: 1; + .echarts-for-react { + height: 100% !important; + } + } +} + diff --git a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx index 0f556e3..a9fa4ef 100644 --- a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx +++ b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx @@ -1,15 +1,362 @@ -import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; -// import { dictionary, utils } from "@/config/common"; -// import moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; -// import ajax from "@/services" -// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; -function MonitorCarAlarmMes() { - return
MonitorCarAlarmMes
+import React, { useState, useRef, useEffect } from "react" +import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip, Popover, Modal } from "antd" +import { DeleteOutlined, InfoCircleOutlined } from '@ant-design/icons' +import { ResultFlowResult, QuickMenu } from '@/components' +import { dictionary } from "@/config/common" +import ConfInfoModal from './ConfInfoModal' +import ajax from "@/services" +import moment from "moment" +import './index.scss' + +function MonitorCarAlarmMes(props) { + const { + + } = props + + const [loading, setLoading] = useState(false) + const defaultFormData = { + keyword: '', + start_time: '', + end_time: '' + } + const [formData, setFormData] = useState({ + ...defaultFormData + }) + const [pageInfo, setPageInfo] = useState({ + pn: 1, + length: 10 + }) + const [resultData, setResultDate] = useState({ + list: [], + totalRecords: 0 + }) + const [infoModalVisible, setInfoModalVisible] = useState(false) + const [isEdit, setIsEdit] = useState(false) + const [isDetail, setIsDetail] = useState(false) + const [activeInfo, setActiveInfo] = useState({}) + const [userTreeList, setUserTreeList] = useState([]) + const tableColumns = [ + { + title: "序号", + width: 60, + align: 'center', + render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1 + }, + { + title: "报警详情", + align: 'center', + render: (text, record) => { + return ( +
+
{record.title}
+ +
{record.content}
+ +
+ ) + } + }, + { + title: "停车场地址", + width: 200, + align: 'center', + dataIndex: "parkName", + }, + { + title: "车牌号码", + width: 200, + align: 'center', + dataIndex: "plateNumber", + }, + { + title: "通知时间", + width: 150, + align: 'center', + dataIndex: "time", + }, + { + title: '操作', + width: 120, + align: 'center', + render: (text, record) => { + return <> + +
{ handleDetail(record) }}>详情
+ }> + + + + } + } + ] + const paginationProps = { + className: "pagination-common", + showQuickJumper: true, + showSizeChanger: true, + current: pageInfo.pn, + total: resultData?.totalRecords, + pageSize: pageInfo.length, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), + onChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current, length: size } + }); + } + } + const toDeftime = (v) => { + setFormData({ + ...formData, + start_time: moment(v.startDateTime), + end_time: moment(v.endDateTime) + }) + } + + + const ajaxGetListData = () => { + setLoading(true) + ajax.getCarAlarmList({...formData, ...pageInfo}).then(res => { + if (res.status == 20000) { + setResultDate({ + list: res.data, + totalRecords: res.totalRecords || 0 + }) + } + setLoading(false) + }) + } + + const ajaxGetUserListData = () => { + ajax.getUserTreeData().then(res => { + if (res.status == 20000) { + setUserTreeList(res.data) + } + }) + } + + const TimeChange = () => { + let e = formData.date_type; + let str = "date"; + let mat = "YYYY-MM-DD"; + if (e == "year") { + str = "year"; + mat = "YYYY"; + } else if (e == "month") { + str = "month"; + mat = "YYYY-MM"; + } else if (e == "week") { + str = "week"; + mat = "YYYY-MM-DD"; + } + return { str, mat }; + } + + const ajaxMsgInfoUpdate = (data) => { + return new Promise((resolve, rejected) => { + ajax.msgConfUpdate(data).then((res) => { + if (res.status == 20000) { + resolve(res.messgae) + } else { + rejected(res.message) + } + }).catch((err) => { + rejected(err) + }) + }) + } + + const handleInfoUpdate = (data) => { + ajaxMsgInfoUpdate(data).then(msg => { + message.success(msg) + setInfoModalVisible(false) + handleSearch() + }).catch(err => { + console.log(err) + }) + } + + + const handleDetail = (data) => { + setIsEdit(false) + setIsDetail(true) + setActiveInfo({...data}) + setInfoModalVisible(true) + } + + const handleInfoModalCancel = () => { + setInfoModalVisible(false) + } + + const handleReset = () => { + setFormData({ + ...defaultFormData + }) + setPageInfo({ + pn: 1, + length: 10 + }) + } + + const handleSearch = () => { + ajaxGetListData() + } + + useEffect(() => { + ajaxGetListData() + }, [JSON.stringify(pageInfo)]) + + useEffect(() => { + ajaxGetUserListData() + }, []) + + return ( +
+
+
+
查询条件
+
+
+ + setFormData({...formData, keyword: v.target.value})} + /> +
+
+ + { + if (TimeChange().str == "week") { + setFormData({ + ...formData, + start_time: date + ? moment(date).day(1).format("YYYY-MM-DD") + : null, + }); + } else if (TimeChange().str == "day") { + if (date > moment(formData.end_time)) { + setFormData({ + ...formData, + end_time: dateString, + start_time: formData.end_time, + }); + } else { + setFormData({ + ...formData, + start_time: dateString, + }); + } + } else { + setFormData({ ...formData, start_time: dateString }); + } + }} + disabledDate={(current) => current > moment(formData.end_time)} + /> + +
+
+ + { + if (TimeChange().str == "week") { + setFormData({ + ...formData, + end_time: date + ? moment(date).day(7).format("YYYY-MM-DD") + : null, + }); + } else if (TimeChange().str == "day") { + if (date < moment(formData.start_time)) { + setFormData({ + ...formData, + start_time: dateString, + end_time: formData.start_time, + }); + } else { + setFormData({ + ...formData, + end_time: dateString, + }); + } + } else { + setFormData({ ...formData, end_time: dateString }); + } + }} + disabledDate={(current) => + current < moment(formData.start_time) + } + /> +
+
+ toDeftime(v)} /> +
+
+ + +
+
+
+
+
+
+ +
+ + + + + + + ) } export default MonitorCarAlarmMes; \ No newline at end of file diff --git a/src/router/router.config.js b/src/router/router.config.js index 57e1cf3..d97cfc3 100644 --- a/src/router/router.config.js +++ b/src/router/router.config.js @@ -1075,6 +1075,18 @@ let routes = [ component: pages.NotificationMes }, { + path: "/systemMgm/deviceAlarmMes", + text: "设备报警消息", + name: "deviceAlarmMes", + component: pages.DeviceAlarmMes + }, + { + path: "/systemMgm/monitorCarAlarmMes", + text: "监控车辆报警消息", + name: "monitorCarAlarmMes", + component: pages.MonitorCarAlarmMes + }, + { path: "/systemMgm/businessConf", text: "业务配置", name: "businessConf", diff --git a/src/services/SystemMgm/MsgMgm/index.js b/src/services/SystemMgm/MsgMgm/index.js index 648e762..2188b5b 100644 --- a/src/services/SystemMgm/MsgMgm/index.js +++ b/src/services/SystemMgm/MsgMgm/index.js @@ -56,6 +56,22 @@ const msgNotificationDel = (data) => { }) } +const getDeviceAlarmList = (data) => { + return ajax({ + url: "/api/msg/device/list", + type: "get", + data: data, + }) +} + +const getCarAlarmList = (data) => { + return ajax({ + url: "/api/msg/car_alert/list", + type: "get", + data: data, + }) +} + export default { getMsgConfList, getUserTreeData, @@ -63,5 +79,7 @@ export default { msgConfDel, getNotificationList, msgNotificationRead, - msgNotificationDel + msgNotificationDel, + getDeviceAlarmList, + getCarAlarmList } \ No newline at end of file