|
@ -2,12 +2,16 @@ |
|
|
import React, { useState, useEffect, useRef } from "react"; |
|
|
import React, { useState, useEffect, useRef } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { connect } from "react-redux"; |
|
|
import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi-ui"; |
|
|
import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi-ui"; |
|
|
|
|
|
import moment from "moment"; |
|
|
|
|
|
import PerfectScrollbar from "perfect-scrollbar"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let projectScrollbar; |
|
|
const Inspection = ({ dispatch, actions, route, statistic }) => { |
|
|
const Inspection = ({ dispatch, actions, route, statistic }) => { |
|
|
const { problem } = actions |
|
|
const { problem } = actions |
|
|
const [selectProject, setSelectProject] = useState([]) |
|
|
const [selectProject, setSelectProject] = useState([]) //所选项目 |
|
|
const [applyFilter, setApplyFilter] = useState([]) |
|
|
const [applyFilter, setApplyFilter] = useState([]) //应用筛选 |
|
|
|
|
|
const [patrolAbnormal, setPatrolAbnormal] = useState([]) //巡检异常信息 |
|
|
|
|
|
|
|
|
const api = useRef(); |
|
|
const api = useRef(); |
|
|
|
|
|
|
|
@ -29,13 +33,28 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { |
|
|
}) |
|
|
}) |
|
|
dispatch(problem.getAlarmLnspection({})).then((res) => { |
|
|
dispatch(problem.getAlarmLnspection({})).then((res) => { |
|
|
console.log(res.payload.data); |
|
|
console.log(res.payload.data); |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
setPatrolAbnormal(res.payload.data) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
projectScrollbar = new PerfectScrollbar("#inspection", { |
|
|
|
|
|
suppressScrollY: true, |
|
|
|
|
|
}); |
|
|
}, []) |
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
|
|
|
|
const domEquipment = document.getElementById("inspection"); |
|
|
|
|
|
if (domEquipment && projectScrollbar) { |
|
|
|
|
|
projectScrollbar.update(); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
|
|
|
|
|
|
<div style={{ width: '100%', height: 180, backgroundColor: 'white', marginBottom: 20 }}> |
|
|
<div style={{ width: '100%', height: 250, backgroundColor: 'white', marginBottom: 20 }}> |
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> |
|
|
<div style={{ width: 400, }}> |
|
|
<div style={{ width: 400, }}> |
|
|
<span style={{ width: 3, height: 20, background: '#005ABD', display: 'inline-block', margin: "0 10px 0 20px" }}></span> |
|
|
<span style={{ width: 3, height: 20, background: '#005ABD', display: 'inline-block', margin: "0 10px 0 20px" }}></span> |
|
@ -52,14 +71,13 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { |
|
|
style={{ position: "relative", width: "100%", flex: 1 }} |
|
|
style={{ position: "relative", width: "100%", flex: 1 }} |
|
|
> |
|
|
> |
|
|
<Form.DatePicker |
|
|
<Form.DatePicker |
|
|
type="dateTimeRange" |
|
|
type="dateRange" |
|
|
labelPosition="left" |
|
|
labelPosition="left" |
|
|
style={{ width: 352 }} |
|
|
style={{ width: 242 }} |
|
|
label='时间筛选:' |
|
|
label='时间筛选:' |
|
|
field='time' |
|
|
field='time' |
|
|
key='time' |
|
|
key='time' |
|
|
// defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]} |
|
|
initValue={[new Date('2022-08-08'), new Date()]} |
|
|
// initValue={[new Date('2022-08-08 00:00'), new Date()]} |
|
|
|
|
|
onChange={(v) => console.log(v)} |
|
|
onChange={(v) => console.log(v)} |
|
|
/> |
|
|
/> |
|
|
<Form.Select |
|
|
<Form.Select |
|
@ -118,8 +136,12 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style={{}}> |
|
|
<div id="inspection" style={{ width: "100%", whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> |
|
|
<img src="/_file-server/project/da09f988-4c62-46fc-a532-b4cf053a4b6d/accurate_invest.png" style={{ width: 400, height: 128 }} /> |
|
|
{patrolAbnormal?.map(v => <div style={{ width: 400, height: 238, display: 'inline-block' }}> |
|
|
|
|
|
<img src={`/_file-server/${v.screenshot}`} style={{ width: 400, height: 182 }} /> |
|
|
|
|
|
<div><span>获取时间:{moment(v.createTime).format("YYYY-MM-DD HH:MM:SS")}</span><span></span></div> |
|
|
|
|
|
</div>)} |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|