diff --git a/web/client/assets/images/problem/anomaly.png b/web/client/assets/images/problem/anomaly.png new file mode 100644 index 0000000..cb73702 Binary files /dev/null and b/web/client/assets/images/problem/anomaly.png differ diff --git a/web/client/src/components/index.js b/web/client/src/components/index.js index fec201e..e560b3f 100644 --- a/web/client/src/components/index.js +++ b/web/client/src/components/index.js @@ -3,10 +3,12 @@ import SimpleFileDownButton from './simpleFileDownButton' import ReminderBox from './reminderBox' import Setup from './setup' import { SkeletonScreen } from './skeletonScreen' +import OutHidden from './outHidden' export { SimpleFileDownButton, ReminderBox, Setup, SkeletonScreen, + OutHidden, }; diff --git a/web/client/src/components/outHidden.jsx b/web/client/src/components/outHidden.jsx new file mode 100644 index 0000000..98ee65e --- /dev/null +++ b/web/client/src/components/outHidden.jsx @@ -0,0 +1,40 @@ +import React, { useState, useEffect } from "react"; +import { Tooltip } from "@douyinfe/semi-ui"; + +function OutHidden ({ name, width, height, color, background, numberHidden, number }) { + + return <> + {numberHidden ? +
+ +
+ {name.length > number ? `${name.substr(0, number)}...` : name} +
+ +
+ + :
+ +
+ {name} +
+ +
} + +} + +export default OutHidden; diff --git a/web/client/src/sections/problem/actions/problem.jsx b/web/client/src/sections/problem/actions/problem.jsx index 8e20756..cbb08c6 100644 --- a/web/client/src/sections/problem/actions/problem.jsx +++ b/web/client/src/sections/problem/actions/problem.jsx @@ -25,3 +25,40 @@ export function getAlarmLnspection (query) { //查询应用巡检信息 reducer: { name: '' } }); } + + +export function putAlarmApplicationNoted (data) { //预览状态 + return dispatch => basicAction({ + type: 'put', + dispatch: dispatch, + data, + actionType: 'PUT-AIARM-APPLICATIO-NNOTED', + url: `${ApiTable.putAlarmApplicationNoted}`, + msg: { error: '预览失败' }, + reducer: { name: '' } + }); +} + +export function getAlarmLnspectionApi (query) { //查询应用接口/元素错误信息 + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + query, + actionType: 'GET_ALARM_LNICSPECTION-API', + url: `${ApiTable.getAlarmLnspectionApi}`, + msg: { error: '查询应用接口/元素错误信息失败' }, + reducer: { name: '' } + }); +} + +export function postApiConfirm (data) { //确认应用接口/元素错误信息 + return dispatch => basicAction({ + type: 'post', + dispatch: dispatch, + data, + actionType: 'POST-API-CONFIRM', + url: `${ApiTable.postApiConfirm}`, + msg: { error: '添加确认信息失败' }, + reducer: { name: '' } + }); +} diff --git a/web/client/src/sections/problem/components/inspection.jsx b/web/client/src/sections/problem/components/inspection.jsx index 3ae8221..908d1a6 100644 --- a/web/client/src/sections/problem/components/inspection.jsx +++ b/web/client/src/sections/problem/components/inspection.jsx @@ -9,7 +9,8 @@ import { log } from "ezuikit-js"; let projectScrollbar; -const Inspection = ({ dispatch, actions, route, statistic }) => { +let timer +const Inspection = ({ dispatch, actions, user, route, statistic }) => { const { problem } = actions const [selectProject, setSelectProject] = useState([]) //所选项目 const [applyFilter, setApplyFilter] = useState([]) //应用筛选 @@ -19,6 +20,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { const [picturePop, setPicturePop] = useState(false) //图片弹窗 const [pictureId, setPictureId] = useState() //图片id const [pictureData, setPictureData] = useState({}) //图片数据 + const [notRead, setNotRead] = useState(0) //已阅图片数量 const api = useRef(); const unfoldApi = useRef(false); @@ -60,18 +62,30 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { useEffect(() => { dispatch(problem.getAlarmLnspection(checkPatrol)).then((res) => { - console.log(res.payload.data); + // console.log(res.payload.data); if (res.success) { setPatrolAbnormal(res.payload.data) + setNotRead(res.payload.data.filter(v => !v.notedTime).length) } }) }, [checkPatrol]); useEffect(() => { - if (patrolAbnormal && pictureId) { - console.log(patrolAbnormal.find(v => v.id == pictureId)); - setPictureData(patrolAbnormal.find(v => v.id == pictureId)) + if (patrolAbnormal && pictureId >= 0) { + if (timer) clearTimeout(timer) + timer = setTimeout(() => { + if (!patrolAbnormal[pictureId]?.notedTime) { + patrolAbnormal[pictureId].notedPepUser = user.name + patrolAbnormal[pictureId].notedPepUserId = user.id + patrolAbnormal[pictureId].notedTime = new Date() + setPatrolAbnormal(patrolAbnormal) + setNotRead(notRead - 1) + setPictureData(patrolAbnormal[pictureId]) + dispatch(problem.putAlarmApplicationNoted({ inspectionId: patrolAbnormal[pictureId].id })) + } + }, 2000) + setPictureData(patrolAbnormal[pictureId]) } }, [pictureId]); @@ -83,7 +97,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { {statistic[route]} APPLY SEMI-AUTOMATIC INSPECTION -
仅保留48小时内的图片数据,每小时覆盖执行一次 03专项2期：已阅共123个
+
仅保留48小时内的图片数据,每小时覆盖执行一次 03专项2期：已阅共{notRead}个
{ onMouseMove={() => 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 => + {patrolAbnormal?.map((v, i) =>
{ borderRadius: 2, border: '1px solid rgba(220,222,224,0.2)' }} onClick={() => { - console.log(v.id); setPicturePop(true) - setPictureId(v.id); + setPictureId(i); }} > @@ -225,7 +238,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { }}>{unfold ? '展开更多' : '收起'}
{picturePop ? {pictureData.app?.name} + title={
{pictureData.app?.name} { color: '#FFFFFF', fontSize: 12, textAlign: 'center', lineHeight: '20px', marginLeft: 10, }}> - 未读 { }/{patrolAbnormal.length} + 未阅 {notRead}/{patrolAbnormal.length}
} hasCancel={false} - footer={
- - - - + footer={
+ + 图片下载 + + + + +
} visible={true} onOk={() => { }} width={837} - onCancel={() => setPicturePop(false)} + onCancel={() => { + setPicturePop(false) + if (timer) clearTimeout(timer) + }} > -
- {pictureData.notedTime ? 核验信息:{pictureData.notedPepUser} {pictureData.notedTime}:""} +
+ {pictureData.notedTime ? 核验信息：{pictureData.notedPepUser} {moment(pictureData.notedTime).format("YYYY-MM-DD HH:MM:SS")} : ""} 截取时间:{moment(pictureData.createTime).format("YYYY-MM-DD HH:MM:SS")}
+ : "" @@ -270,7 +299,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => { function mapStateToProps (state) { const { auth, global, members } = state; return { - // user: auth.user, + user: auth.user, actions: global.actions, // global: global, // members: members.data, diff --git a/web/client/src/sections/problem/components/tableData.jsx b/web/client/src/sections/problem/components/tableData.jsx index 900eba7..0601bce 100644 --- a/web/client/src/sections/problem/components/tableData.jsx +++ b/web/client/src/sections/problem/components/tableData.jsx @@ -2,15 +2,43 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi-ui"; import { SkeletonScreen, } from "$components"; +import moment from "moment"; -const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }) => { +const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition, selected, setSelected, setIfBulk, setConfirm }) => { + const { problem } = actions - const [selected, setSelected] = useState([]) //表格被勾选项 + const [tableData, setTableData] = useState([]) //表格数据 const api = useRef(); useEffect(() => { + switch (route) { + case 'useAbnormal': + dispatch(problem.getAlarmLnspectionApi({})).then((res) => { + console.log(res.payload.data); + let tableDatas = res.payload.data?.rows.map(v => ({ + key: v.id, + serialNumber: v.serialNumber, + projectName: v.app?.projectCorrelations?.map(r => r.name)?.filter(c => c), + appName: v.app?.name, + url: v.app?.url, + createTime: v.createTime ? moment(v.createTime).format("YYYY-MM-DD HH:MM:SS") : "", + updateTime: v.updateTime ? moment(v.updateTime).format("YYYY-MM-DD HH:MM:SS") : "", + confirmTime: v.confirmTime ? moment(v.confirmTime).format("YYYY-MM-DD HH:MM:SS") : "", + alarmContent: v.alarmContent, + screenshot: v.screenshot, + type: v.type, + confirm: v.confirm, + })) + console.log(tableDatas); + setTableData(tableDatas) + }) + break; + + default: + break; + } }, [route]) @@ -20,7 +48,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition <>
-
+
console.log(values)} // onValueChange={values=>console.log(values)} @@ -84,7 +112,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition marginRight: 10 }} > - + setSetup(true)} />