diff --git a/web/client/assets/images/problem/dropDown.png b/web/client/assets/images/problem/dropDown.png new file mode 100644 index 0000000..aeefc21 Binary files /dev/null and b/web/client/assets/images/problem/dropDown.png differ diff --git a/web/client/assets/images/problem/export.png b/web/client/assets/images/problem/export.png new file mode 100644 index 0000000..21a75b5 Binary files /dev/null and b/web/client/assets/images/problem/export.png differ diff --git a/web/client/assets/images/problem/preview.png b/web/client/assets/images/problem/preview.png new file mode 100644 index 0000000..3222d01 Binary files /dev/null and b/web/client/assets/images/problem/preview.png differ diff --git a/web/client/assets/images/problem/pullUp.png b/web/client/assets/images/problem/pullUp.png new file mode 100644 index 0000000..c4457d3 Binary files /dev/null and b/web/client/assets/images/problem/pullUp.png differ diff --git a/web/client/src/sections/problem/components/inspection.jsx b/web/client/src/sections/problem/components/inspection.jsx index 6c67195..3ae8221 100644 --- a/web/client/src/sections/problem/components/inspection.jsx +++ b/web/client/src/sections/problem/components/inspection.jsx @@ -4,6 +4,8 @@ import { connect } from "react-redux"; import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi-ui"; import moment from "moment"; import PerfectScrollbar from "perfect-scrollbar"; +import './inspection.less' +import { log } from "ezuikit-js"; let projectScrollbar; @@ -12,12 +14,19 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { const [selectProject, setSelectProject] = useState([]) //所选项目 const [applyFilter, setApplyFilter] = useState([]) //应用筛选 const [patrolAbnormal, setPatrolAbnormal] = useState([]) //巡检异常信息 + const [checkPatrol, setCheckPatrol] = useState({}) //巡检异常查询 + const [unfold, setUnfold] = useState(true) //展开收起 + const [picturePop, setPicturePop] = useState(false) //图片弹窗 + const [pictureId, setPictureId] = useState() //图片id + const [pictureData, setPictureData] = useState({}) //图片数据 const api = useRef(); + const unfoldApi = useRef(false); // console.log(actions); useEffect(() => { + dispatch(problem.getProjectPoms()).then((res) => { // console.log(res.payload.data); if (res.success) { @@ -25,67 +34,101 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { let apply = [] res.payload.data?.rows?.map(v => { project.push({ name: v.pepProjectName || v.name || v.id, value: v.id }) - v.projectApps.map(app => apply.push({ name: app.name, value: app.id })) + v.apps.map(app => apply.push({ name: app.name, value: app.id })) }) setSelectProject(project) setApplyFilter(apply) } }) - dispatch(problem.getAlarmLnspection({})).then((res) => { + }, []) + + useEffect(() => { + if (projectScrollbar) projectScrollbar.destroy() + const domEquipment = document.getElementById("inspection"); + if (unfold) { + projectScrollbar = new PerfectScrollbar("#inspection", { + suppressScrollY: true, + }); + if (domEquipment && projectScrollbar) projectScrollbar.update() + } else { + projectScrollbar = new PerfectScrollbar("#inspection", { + suppressScrollX: true, + }) + if (domEquipment && projectScrollbar) projectScrollbar.update() + } + }) + + useEffect(() => { + dispatch(problem.getAlarmLnspection(checkPatrol)).then((res) => { console.log(res.payload.data); if (res.success) { setPatrolAbnormal(res.payload.data) } }) - - projectScrollbar = new PerfectScrollbar("#inspection", { - suppressScrollY: true, - }); - }, []) + }, [checkPatrol]); useEffect(() => { - - const domEquipment = document.getElementById("inspection"); - if (domEquipment && projectScrollbar) { - projectScrollbar.update(); + if (patrolAbnormal && pictureId) { + console.log(patrolAbnormal.find(v => v.id == pictureId)); + setPictureData(patrolAbnormal.find(v => v.id == pictureId)) } - }); + }, [pictureId]); return ( -
-
+
+
{statistic[route]} APPLY SEMI-AUTOMATIC INSPECTION
仅保留48小时内的图片数据,每小时覆盖执行一次 03专项2期：已阅共123个
-
+
console.log(values)} - // onValueChange={values=>console.log(values)} + onSubmit={(v) => { + setCheckPatrol({ + appId: v.appId, + noted: v.noted, + projectId: v.projectId, + timeStart: v.time == 'true' ? + moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') : + v.time == 'false' ? + moment().day(moment().day() - 1).startOf('day').format('YYYY-MM-DD HH:mm:ss') : "", + timeEnd: v.time == 'true' ? + moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') : + v.time == 'false' ? + moment().day(moment().day() - 1).endOf('day').format('YYYY-MM-DD HH:mm:ss') : "", + }) + }} getFormApi={(formApi) => (api.current = formApi)} layout="horizontal" - style={{ position: "relative", width: "100%", flex: 1 }} > - console.log(v)} - /> + placeholder="全部" + showClear + > + {[{ name: '今日', value: 'true' }, { name: '昨日', value: 'false' }].map((item) => { + return ( + + {item.name} + + ); + })} + @@ -102,7 +145,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { labelPosition="left" field='appId' key='appId' - style={{ width: 116, marginRight: 10, color: "#F9F9F9", }} + style={{ width: 116, marginRight: 10, color: "#F9F9F9", marginBottom: 10 }} placeholder="全部" showClear > @@ -119,7 +162,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { labelPosition="left" field='noted' key='noted' - style={{ width: 116, marginRight: 10, color: "#F9F9F9", }} + style={{ width: 116, marginRight: 54, color: "#F9F9F9", marginBottom: 10 }} placeholder="全部" showClear > @@ -131,20 +174,94 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { ); })} - +
- -
- {patrolAbnormal?.map(v =>
- -
获取时间：{moment(v.createTime).format("YYYY-MM-DD HH:MM:SS")}
-
)} +
document.getElementById('unfold').style.display = 'none'} + onMouseOut={() => document.getElementById('unfold').style.display = 'block'} + id="inspection" style={{ width: 'calc(100% - 20px)', marginLeft: 10, height: unfold ? 280 : 600, whiteSpace: unfold ? 'nowrap' : '', position: "relative", }}> + {patrolAbnormal?.map(v => +
{ + console.log(v.id); + setPicturePop(true) + setPictureId(v.id); + }} + > + +
+ 获取时间：{moment(v.createTime).format("YYYY-MM-DD HH:MM:SS")} + {v.app?.name} +
+
)}
+
e.stopPropagation()} + onMouseOut={(e) => e.stopPropagation()} + onClick={() => setUnfold(!unfold)} + style={{ + width: 'calc(100% - 20px)', marginLeft: 10, height: 24, + background: unfold ? 'linear-gradient(180deg, rgba(36,139,255,0) 0%, rgba(36,139,255,0.38) 100%)' : 'linear-gradient(180deg, rgba(218,218,218,0) 0%, rgba(212,212,212,0.38) 100%)', + borderRadius: 3, + lineHeight: '24px', + fontSize: 14, + zIndex: 100, + position: 'relative', + top: unfold ? -20 : 6, + left: 0, + textAlign: 'center', + color: unfold ? 'rgba(0,90,189,0.7)' : '#969799', + cursor: 'pointer', + }}>{unfold ? '展开更多' : '收起'} +
+ {picturePop ? {pictureData.app?.name} + + 未读 { }/{patrolAbnormal.length} + +
} + hasCancel={false} + footer={
+ + + + +
} + visible={true} + onOk={() => { + }} + width={837} + onCancel={() => setPicturePop(false)} + > +
+ {pictureData.notedTime ? 核验信息:{pictureData.notedPepUser} {pictureData.notedTime}:""} + 截取时间:{moment(pictureData.createTime).format("YYYY-MM-DD HH:MM:SS")} +
+ + + : "" + }
) } diff --git a/web/client/src/sections/problem/components/inspection.less b/web/client/src/sections/problem/components/inspection.less new file mode 100644 index 0000000..e69de29 diff --git a/web/client/src/sections/problem/components/tableData.jsx b/web/client/src/sections/problem/components/tableData.jsx index 4521c03..900eba7 100644 --- a/web/client/src/sections/problem/components/tableData.jsx +++ b/web/client/src/sections/problem/components/tableData.jsx @@ -6,6 +6,7 @@ import { SkeletonScreen, } from "$components"; const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }) => { + const [selected, setSelected] = useState([]) //表格被勾选项 const api = useRef(); @@ -67,7 +68,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition label={collectData.common.name + ':'} field={collectData.common.field} key={collectData.common.field} - // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]} + // defaultPickerValue={['2022-08-08 00:00'), new Date('2022-08-09 12:00')]} // initValue={[new Date('2022-08-08 00:00'), new Date()]} onChange={(v) => console.log(v)} />) @@ -76,21 +77,15 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
- setSetup(true)} /> - + + setSetup(true)} />
@@ -127,14 +122,14 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }} rowSelection={{ selectedRowKeys: selected, - onSelect: (record, selected) => { - console.log(`select row: ${selected}`, record); - }, - onSelectAll: (selected, selectedRows) => { - console.log(`select all rows: ${selected}`, selectedRows); - }, + // onSelect: (record, selected) => { + // console.log(`select row: ${selected}`, record); + // }, + // onSelectAll: (selected, selectedRows) => { + // console.log(`select all rows: ${selected}`, selectedRows); + // }, onChange: (selectedRowKeys, selectedRows) => { - console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); setSelected(selectedRows.map(v => v.key)) }, }} @@ -148,12 +143,12 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }} >
-
勾选{selected.length}条问题
+
勾选{selected.length}条问题
- + 共{100}个问题
-
+
) }