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

feat(): 消息管理-车辆预警消息page

tags/PMS_Frontend_v1.0.6-develop
wanghx 1 year ago
parent
9e4445ad44
commit
61d1507f3f
10 changed files with 1505 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.jsx
  2. 22
      src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.scss
  3. 221
      src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/index.scss
  4. 382
      src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx
  5. 130
      src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.jsx
  6. 22
      src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.scss
  7. 221
      src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/index.scss
  8. 371
      src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx
  9. 12
      src/router/router.config.js
  10. 20
      src/services/SystemMgm/MsgMgm/index.js

130
src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.jsx
View File

@ -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 (
<Modal
open={visible}
onCancel={onCancel}
footer={null}
width={600}
className="yisa-modal modal-conf"
title={isEdit ? '消息配置' : '报警详情'}
>
<div className="conf-form-container">
<Form
form={baseForm}
labelCol={{
span: 4,
offset: 0
}}
>
<Form.Item name="infoId" hidden></Form.Item>
<Form.Item label="报警标题" name="title" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<Input disabled={!isEdit} />
) : (
<div className="conf-detail-info conf-detail-title">{data.title}</div>
)
}
</Form.Item>
<Form.Item label="报警内容" name="content" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<Input.TextArea rows={8} disabled={!isEdit} />
) : (
<div className="conf-detail-info conf-detail-textarea">{data.content}</div>
)
}
</Form.Item>
<Form.Item label="报警时间" name="time" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<DatePicker allowClear={false} showTime disabled={!isEdit} />
) : (
<div className="conf-detail-info">{data.time}</div>
)
}
</Form.Item>
<Form.Item label="设备ID" name="deviceId" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<TreeSelect treeCheckable disabled={!isEdit} treeData={userListData} maxTagCount={5} fieldNames={{label: 'name', value: 'id'}} />
) : (
<div className="conf-detail-info">{data.deviceId}</div>
)
}
</Form.Item>
<Form.Item label="设备名称" name="deviceName" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<TreeSelect treeCheckable disabled={!isEdit} treeData={userListData} maxTagCount={5} fieldNames={{label: 'name', value: 'id'}} />
) : (
<div className="conf-detail-info">{data.deviceName}</div>
)
}
</Form.Item>
</Form>
</div>
<div className="conf-form-btn">
{
isDetail ? (
<Button onClick={onCancel}>关闭</Button>
) : (
<>
<Button type="" onClick={onCancel}>取消</Button>
{
(data.infoId) ? (
<Button type="primary" onClick={handleSave}>重新配置</Button>
) : (
<Button type="primary" onClick={handleSave}>新增</Button>
)
}
</>
)
}
</div>
</Modal>
)
}
export default ConfInfoModal

22
src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/ConfInfoModal/index.scss
View File

@ -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;
}
}

221
src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/index.scss
View File

@ -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;
}
}
}

382
src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx
View File

@ -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 <div>DeviceAlarmMes</div>
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 (
<div className="msg-item">
<div className="msg-title">{record.title}</div>
<Tooltip title={record.content}>
<div className="msg-content">{record.content}</div>
</Tooltip>
</div>
)
}
},
{
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 <>
<Popover content={
<div className="action-wrapper">
<div onClick={() => { handleDetail(record) }}>详情</div>
</div>}>
<Button type="primary" className="action-btn">操作</Button>
</Popover>
</>
}
}
]
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 (
<div className="arrearage-container sys-container">
<div className="sys-container-left">
<div className="sys-search">
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>消息关键字</label>
<Input
value={formData.keyword}
placeholder="请输入预警关键字"
onChange={v => setFormData({...formData, keyword: v.target.value})}
/>
</div>
<div className="yisa-search">
<label>设备关键字</label>
<Input
value={formData.device_text}
placeholder="请输入设备关键字"
onChange={v => setFormData({...formData, device_text: v.target.value})}
/>
</div>
<div className="yisa-search">
<label>时间范围</label>
<DatePicker
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.start_time ? moment(formData.start_time) : null}
onChange={(date, dateString) => {
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)}
/>
</div>
<div className="yisa-search">
<label>至</label>
<DatePicker
style={{ width: "100%" }}
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.end_time ? moment(formData.end_time) : null}
onChange={(date, dateString) => {
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)
}
/>
</div>
<div className="yisa-search">
<QuickMenu
dropdownData={[
{ text: '昨日', value: 1 },
{ text: '近一周', value: 6 },
{ text: '近30天', value: 29 },
{ text: '近90天', value: 89 },
]}
onChange={(v) => toDeftime(v)} />
</div>
<div className="form-btn-alarm">
<Button
className="reset"
onClick={handleReset}
>
重置
</Button>
<Button
className="submit"
type="primary"
onClick={handleSearch}
>
查询
</Button>
</div>
</div>
</div>
</div>
<div className="sys-container-right">
<div className="sys-table-content">
<ResultFlowResult
ajaxLoad={loading}
resultData={resultData?.list || []}
>
<Table
className='sys-table'
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
scroll={{y: 640}}
loading={loading}
/>
<Pagination {...paginationProps} className="pagination-common" />
</ResultFlowResult>
</div>
</div>
<ConfInfoModal
data={activeInfo}
isDetail={isDetail}
userListData={userTreeList}
visible={infoModalVisible}
isEdit={isEdit}
onCancel={handleInfoModalCancel}
onOk={handleInfoUpdate}
/>
</div>
)
}
export default DeviceAlarmMes;
export default NotificationMes;

130
src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.jsx
View File

@ -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 (
<Modal
open={visible}
onCancel={onCancel}
footer={null}
width={600}
className="yisa-modal modal-conf"
title={isEdit ? '消息配置' : '报警详情'}
>
<div className="conf-form-container">
<Form
form={baseForm}
labelCol={{
span: 4,
offset: 0
}}
>
<Form.Item name="infoId" hidden></Form.Item>
<Form.Item label="报警标题" name="title" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<Input disabled={!isEdit} />
) : (
<div className="conf-detail-info conf-detail-title">{data.title}</div>
)
}
</Form.Item>
<Form.Item label="报警内容" name="content" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<Input.TextArea rows={8} disabled={!isEdit} />
) : (
<div className="conf-detail-info conf-detail-textarea">{data.content}</div>
)
}
</Form.Item>
<Form.Item label="报警时间" name="time" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<DatePicker allowClear={false} showTime disabled={!isEdit} />
) : (
<div className="conf-detail-info">{data.time}</div>
)
}
</Form.Item>
<Form.Item label="停车场地址" name="parkName" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<TreeSelect treeCheckable disabled={!isEdit} treeData={userListData} maxTagCount={5} fieldNames={{label: 'name', value: 'id'}} />
) : (
<div className="conf-detail-info">{data.parkName}</div>
)
}
</Form.Item>
<Form.Item label="车牌号码" name="plateNumber" rules={isDetail ? undefined : rules}>
{
!isDetail ? (
<TreeSelect treeCheckable disabled={!isEdit} treeData={userListData} maxTagCount={5} fieldNames={{label: 'name', value: 'id'}} />
) : (
<div className="conf-detail-info">{data.plateNumber}</div>
)
}
</Form.Item>
</Form>
</div>
<div className="conf-form-btn">
{
isDetail ? (
<Button onClick={onCancel}>关闭</Button>
) : (
<>
<Button type="" onClick={onCancel}>取消</Button>
{
(data.infoId) ? (
<Button type="primary" onClick={handleSave}>重新配置</Button>
) : (
<Button type="primary" onClick={handleSave}>新增</Button>
)
}
</>
)
}
</div>
</Modal>
)
}
export default ConfInfoModal

22
src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/ConfInfoModal/index.scss
View File

@ -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;
}
}

221
src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/index.scss
View File

@ -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;
}
}
}

371
src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx
View File

@ -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 <div>MonitorCarAlarmMes</div>
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 (
<div className="msg-item">
<div className="msg-title">{record.title}</div>
<Tooltip title={record.content}>
<div className="msg-content">{record.content}</div>
</Tooltip>
</div>
)
}
},
{
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 <>
<Popover content={
<div className="action-wrapper">
<div onClick={() => { handleDetail(record) }}>详情</div>
</div>}>
<Button type="primary" className="action-btn">操作</Button>
</Popover>
</>
}
}
]
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 (
<div className="arrearage-container sys-container">
<div className="sys-container-left">
<div className="sys-search">
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>消息关键字</label>
<Input
value={formData.keyword}
placeholder="请输入预警关键字"
onChange={v => setFormData({...formData, keyword: v.target.value})}
/>
</div>
<div className="yisa-search">
<label>时间范围</label>
<DatePicker
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.start_time ? moment(formData.start_time) : null}
onChange={(date, dateString) => {
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)}
/>
</div>
<div className="yisa-search">
<label>至</label>
<DatePicker
style={{ width: "100%" }}
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.end_time ? moment(formData.end_time) : null}
onChange={(date, dateString) => {
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)
}
/>
</div>
<div className="yisa-search">
<QuickMenu
dropdownData={[
{ text: '昨日', value: 1 },
{ text: '近一周', value: 6 },
{ text: '近30天', value: 29 },
{ text: '近90天', value: 89 },
]}
onChange={(v) => toDeftime(v)} />
</div>
<div className="form-btn-alarm">
<Button
className="reset"
onClick={handleReset}
>
重置
</Button>
<Button
className="submit"
type="primary"
onClick={handleSearch}
>
查询
</Button>
</div>
</div>
</div>
</div>
<div className="sys-container-right">
<div className="sys-table-content">
<ResultFlowResult
ajaxLoad={loading}
resultData={resultData?.list || []}
>
<Table
className='sys-table'
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
scroll={{y: 640}}
loading={loading}
/>
<Pagination {...paginationProps} className="pagination-common" />
</ResultFlowResult>
</div>
</div>
<ConfInfoModal
data={activeInfo}
isDetail={isDetail}
userListData={userTreeList}
visible={infoModalVisible}
isEdit={isEdit}
onCancel={handleInfoModalCancel}
onOk={handleInfoUpdate}
/>
</div>
)
}
export default MonitorCarAlarmMes;

12
src/router/router.config.js
View File

@ -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",

20
src/services/SystemMgm/MsgMgm/index.js
View File

@ -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
}
Write Preview
Loading…
Cancel
Save