From 87ce373e59be45d25b9219ec923bf99f1c18a647 Mon Sep 17 00:00:00 2001 From: wenlele Date: Thu, 29 Sep 2022 18:02:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/problem/CurrentLevel1.png | Bin 0 -> 304 bytes .../assets/images/problem/CurrentLevel2.png | Bin 0 -> 303 bytes .../assets/images/problem/CurrentLevel3.png | Bin 0 -> 321 bytes .../src/layout/containers/layout/index.jsx | 2 +- .../src/sections/problem/actions/problem.jsx | 24 ++--- .../problem/components/inspection.jsx | 14 +-- .../sections/problem/components/sideSheet.jsx | 16 ++- .../problem/components/statistics.jsx | 16 +-- .../sections/problem/components/tableData.jsx | 38 +++++-- .../sections/problem/containers/dataAlarm.jsx | 93 +++++++++++++----- 10 files changed, 139 insertions(+), 64 deletions(-) create mode 100644 web/client/assets/images/problem/CurrentLevel1.png create mode 100644 web/client/assets/images/problem/CurrentLevel2.png create mode 100644 web/client/assets/images/problem/CurrentLevel3.png diff --git a/web/client/assets/images/problem/CurrentLevel1.png b/web/client/assets/images/problem/CurrentLevel1.png new file mode 100644 index 0000000000000000000000000000000000000000..39f654d190956bbdf120b8098b3efbbc169b401b GIT binary patch literal 304 zcmV-00nh%4P)Px#>PbXFRCr$P+QAKjFc3shZz;4xH&jA5v_mP*HMv+?87bNLPUBE727qAN?NVq{^yTG6A z0vY>PJX`)>VzZ(XU{=BE*K*cHu!4X~;ESf!w+j#E9S`57aQ#WsmP0|C9{%K+Bw3dJ@6@`~&&%`b{y8y-ZrI5b zmGGGdN6>rJ7{d5xd5nr^R$DE zH;*MMu(UJ?2rxM@vT6yrG=4+K19dn*m}G=rzBpUXO@geCw<1baFF literal 0 HcmV?d00001 diff --git a/web/client/assets/images/problem/CurrentLevel3.png b/web/client/assets/images/problem/CurrentLevel3.png new file mode 100644 index 0000000000000000000000000000000000000000..49e1618da5eeb7f6bd87ae0c110fa96c2d27e491 GIT binary patch literal 321 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D$|etWt&hE&A8 zy|t0I)j)tb;6~H5zwL|8iv9WKELdVy!gXqKpMu4;Ps-*y zf2(`SbHY!8!JK7NL(&21U43_ycPFVhFom;h>UqTI|I4;tImG;W?fa%#u^Wr{85r0m zFz{Cxo$}tB(p1KHJHg+m$l;TUyTB?v=Sd4xG&sGQCM7U1-e)dhjCBydz-q;z;e0CK z-FCCw0BIdNso?hX^@kg!KAc?mbot@M3t1X2hApYGlL+Yjk#YVogkvvLeIVdd+>&*` PU|{fc^>bP0l+XkK4U>P5 literal 0 HcmV?d00001 diff --git a/web/client/src/layout/containers/layout/index.jsx b/web/client/src/layout/containers/layout/index.jsx index 7b7191e..495636a 100644 --- a/web/client/src/layout/containers/layout/index.jsx +++ b/web/client/src/layout/containers/layout/index.jsx @@ -173,7 +173,7 @@ const LayoutContainer = props => { // websocket 使用测试 useEffect(() => { - console.log(socket) + // console.log(socket) if (socket) { socket.on('CAMERA_ONLINE', function (msg) { console.info(msg); diff --git a/web/client/src/sections/problem/actions/problem.jsx b/web/client/src/sections/problem/actions/problem.jsx index dbe4e3f..d1007ff 100644 --- a/web/client/src/sections/problem/actions/problem.jsx +++ b/web/client/src/sections/problem/actions/problem.jsx @@ -8,7 +8,7 @@ export function getProjectPoms () { //获取已绑定项目 dispatch: dispatch, actionType: 'GET_PROJECT_POMS', url: `${ApiTable.getProjectPoms}`, - msg: { error: '获取已绑定项目失败' }, + msg: { option: '获取已绑定项目' }, reducer: { name: '' } }); } @@ -21,7 +21,7 @@ export function getAlarmLnspection (query) { //查询应用巡检信息 query, actionType: 'GET_ALARM_LNICSPECTION', url: `${ApiTable.getAlarmLnspection}`, - msg: { error: '查询应用巡检信息失败' }, + msg: { option: '查询应用巡检信息' }, reducer: { name: '' } }); } @@ -34,7 +34,7 @@ export function putAlarmApplicationNoted (data) { //预览状态 data, actionType: 'PUT-AIARM-APPLICATIO-NNOTED', url: `${ApiTable.putAlarmApplicationNoted}`, - msg: { error: '预览失败' }, + msg: { option: '预览失败' }, reducer: { name: '' } }); } @@ -46,7 +46,7 @@ export function getAlarmLnspectionApi (query) { //查询应用接口/元素错 query, actionType: 'GET_ALARM_LNICSPECTION-API', url: `${ApiTable.getAlarmLnspectionApi}`, - msg: { error: '查询应用接口/元素错误信息失败' }, + msg: { option: '查询应用接口/元素错误信息' }, reducer: { name: '' } }); } @@ -58,7 +58,7 @@ export function postApiConfirm (data) { //确认应用接口/元素错误信 data, actionType: 'POST-API-CONFIRM', url: `${ApiTable.postApiConfirm}`, - msg: { error: '添加确认信息失败' }, + msg: { option: '添加确认信息' }, reducer: { name: '' } }); } @@ -69,7 +69,7 @@ export function getAlarmDataGroup () { //获取数据告警分类 dispatch: dispatch, actionType: 'GET_ALARM_DATA_GROUP', url: `${ApiTable.getAlarmDataGroup}`, - msg: { error: '获取数据告警分类失败' }, + msg: { option: '获取数据告警分类' }, reducer: { name: '' } }); } @@ -82,7 +82,7 @@ export function getAlarmDataList (query) { //查询数据告警列表 query, actionType: 'GET_ALARM_DATA_LIST', url: `${ApiTable.getAlarmDataList}`, - msg: { error: '查询数据告警列表失败' }, + msg: { option: '查询数据告警列表' }, reducer: { name: '' } }); } @@ -94,7 +94,7 @@ export function getAlarmDataDetail (query) { //查询数据告警详情 query, actionType: 'GET_ALARM_DATA_DATAIL', url: `${ApiTable.getAlarmDataDetail}`, - msg: { error: '查询数据告警详情失败' }, + msg: { option: '查询数据告警详情' }, reducer: { name: '' } }); } @@ -106,7 +106,7 @@ export function getAlarmDataDetailAgg (query) { //查询数据告警详情聚 query, actionType: 'GET_ALARM_DATA_DATAIL_AGG', url: `${ApiTable.getAlarmDataDetailAgg}`, - msg: { error: '查询数据告警详情聚集数据失败' }, + msg: { option: '查询数据告警详情聚集数据' }, reducer: { name: '' } }); } @@ -118,7 +118,7 @@ export function putAlarmdataConfirm (data) { //确认数据告警 data, actionType: 'PUT-AIARM-DATA-CONFIRM', url: `${ApiTable.putAlarmdataConfirm}`, - msg: { error: '确认数据告警失败' }, + msg: { option: '确认数据告警' }, reducer: { name: '' } }); } @@ -130,7 +130,7 @@ export function getAlarmVideoList (query) { //查询视频告警列表 query, actionType: 'GET_ALARM_VIDEO_LIST', url: `${ApiTable.getAlarmVideoList}`, - msg: { error: '查询视频告警列表失败' }, + msg: { option: '查询视频告警列表' }, reducer: { name: '' } }); } @@ -143,7 +143,7 @@ export function getAlarmVideoDeviceKind () { //查询视频设备类型 dispatch: dispatch, actionType: 'GET_ALARM_VIDEO_DEVICE_KIND', url: `${ApiTable.getAlarmVideoDeviceKind}`, - msg: { error: '查询视频设备类型失败' }, + msg: { option: '查询视频设备类型' }, reducer: { name: '' } }); } \ No newline at end of file diff --git a/web/client/src/sections/problem/components/inspection.jsx b/web/client/src/sections/problem/components/inspection.jsx index 7ba27be..f0c9d11 100644 --- a/web/client/src/sections/problem/components/inspection.jsx +++ b/web/client/src/sections/problem/components/inspection.jsx @@ -91,13 +91,13 @@ const Inspection = ({ dispatch, actions, user, route, statistic }) => { return ( -
+
-
- +
+ {statistic[route]} APPLY SEMI-AUTOMATIC INSPECTION -
仅保留48小时内的图片数据,每小时覆盖执行一次 未阅共{notRead}个
+
仅保留48小时内的图片数据，每日8时、14时、17时系统巡检一次。未阅共{notRead}个
{ 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%)', + background: unfold ? 'linear-gradient(180deg, rgba(36,139,255,0) 0%, rgba(36,139,255,0.09) 100%)' : 'linear-gradient(180deg, rgba(218,218,218,0) 0%, rgba(212,212,212,0.38) 100%)', borderRadius: 3, lineHeight: '24px', - fontSize: 14, + fontSize: 12, zIndex: 100, position: 'relative', top: unfold ? -20 : 6, @@ -235,7 +235,7 @@ const Inspection = ({ dispatch, actions, user, route, statistic }) => { textAlign: 'center', color: unfold ? 'rgba(0,90,189,0.7)' : '#969799', cursor: 'pointer', - }}>{unfold ? '展开更多' : '收起'} + }}>{unfold ? '展开更多' : '收起'}
{picturePop ? {pictureData.app?.name} diff --git a/web/client/src/sections/problem/components/sideSheet.jsx b/web/client/src/sections/problem/components/sideSheet.jsx index 98cbb80..d92aa68 100644 --- a/web/client/src/sections/problem/components/sideSheet.jsx +++ b/web/client/src/sections/problem/components/sideSheet.jsx @@ -105,25 +105,31 @@ function SideSheets ({ dispatch, actions, close, alarmId }) { rowKey: 'AlarmState', render: (_, r, index) => { let data = { 0: '首次产生', 1: '持续产生', 2: '等级提升', 3: '自动恢复', 4: '人工恢复' } - return data[r.AlarmState] || '' + return data[r.AlarmState] ?
{data[r.AlarmState]}
: '' }, }, { title: "告警信息", dataIndex: "Content", rowKey: 'Content', + render: (_, r, index) => { + return !(r.AlarmState == 3) && !r.Content ? '由安心云集成侧确认，无确认信息' : r.AlarmState == 3 ? '无' : r.Content + }, }, { title: "等级", dataIndex: "CurrentLevel", rowKey: 'CurrentLevel', render: (_, r, index) => { let data = { 1: '一级', 2: '二级', 3: '三级' } - return data[r.CurrentLevel] || "" + return
+ + {data[r.CurrentLevel]} +
}, }, { title: "产生时间", dataIndex: "Time", rowKey: 'Time', - render: (_, r, index) => r.Time ? moment(r.Time).format("YYYY-MM-DD HH:mm:ss") : "" + render: (_, r, index) => r.Time ?
{moment(r.Time).format("YYYY-MM-DD HH:mm:ss")}
: "" }, ] @@ -141,13 +147,13 @@ function SideSheets ({ dispatch, actions, close, alarmId }) { > -
+
{ if (index % 1 === 0) { diff --git a/web/client/src/sections/problem/components/statistics.jsx b/web/client/src/sections/problem/components/statistics.jsx index 04000ee..09c5844 100644 --- a/web/client/src/sections/problem/components/statistics.jsx +++ b/web/client/src/sections/problem/components/statistics.jsx @@ -3,15 +3,19 @@ import { connect } from "react-redux"; import { DatePicker } from "@douyinfe/semi-ui"; import Inspection from "./inspection"; -const Statistics = ({ dispatch, actions, route ,statistic}) => { - +const Statistics = ({ dispatch, actions, route, statistic }) => { + let title = { dataLnterrupt: "DATA ABORTS", dataAbnormal: "DATA ABORTS", strategyHit: "DATA ABORTS" } // console.log(route); return ( <>{route == 'useAbnormal' ? : -
-
-
{statistic[route]}
+
+
+
+ + {statistic[route]} + {title[route]} +
{/* { 暂未开放 敬请期待
*/} - +
} diff --git a/web/client/src/sections/problem/components/tableData.jsx b/web/client/src/sections/problem/components/tableData.jsx index 7033ded..16832c6 100644 --- a/web/client/src/sections/problem/components/tableData.jsx +++ b/web/client/src/sections/problem/components/tableData.jsx @@ -9,10 +9,9 @@ import { emit } from "superagent"; const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition, - selected, setSelected, setIfBulk, setConfirm, setGenre, query, setQuery }) => { + selected, setSelected, setIfBulk, setConfirm, setGenre, query, setQuery,tableData,setTableData }) => { const { problem } = actions - const [tableData, setTableData] = useState([]) //表格数据 const [count, setCount] = useState(0) // const [search, setSearch] = useState({}) //查询 const [checkAll, setCheckAll] = useState(true) //查询 @@ -50,7 +49,30 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition case 'videoAbnormal': dispatch(problem.getAlarmVideoList({})).then((res) => { if (res.success) { - // console.log(res); + console.log(res); + let tableDatas = res.payload.data?.rows?.map(v => ({ + key: v.AlarmId, + // StructureName: v.StructureName, + // projectName: v.pomsProject?.map(r => (r.name ? { name: r.name, state: 'PMOS' } : { + // name: r.pepProject?.projectName, state: r.pepProject?.constructionStatus + // }))?.filter(c => c), + // createTime: v.StartTime ? moment(v.StartTime).format("YYYY-MM-DD HH:mm:ss") : "", + // updateTime: v.EndTime ? moment(v.EndTime).format("YYYY-MM-DD HH:mm:ss") : "", + // confirmTime: v.confirmedTime ? moment(v.confirmedTime).format("YYYY-MM-DD HH:mm:ss") : "", + // SourceName: v.SourceName, + // AlarmGroupUnit: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "", + // Strategy: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "", + // type: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "", + // AlarmCodeName: v.AlarmCodeName, + // CurrentLevel: v.CurrentLevel, + // detailCount: v.detailCount, + // AlarmContent: v.AlarmContent, + // State: v.State, + // alarmType: v.alarmType, + // confirm: v.confirmedContent, + })) + console.log(tableDatas); + setTableData(tableDatas) } }) dispatch(problem.getAlarmVideoDeviceKind()).then((res) => { @@ -104,7 +126,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition alarmType: v.alarmType, confirm: v.confirmedContent, })) - console.log(tableDatas); + // console.log(tableDatas); setTableData(tableDatas) } }) @@ -117,13 +139,13 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition }, [query, search]) -// console.log(query); + // console.log(query); return ( <> -
+
-
+
console.log(values)} // onValueChange={values=>console.log(values)} @@ -235,7 +257,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition // dataSource={[{ key: '1' }]} bordered={false} empty="暂无数据" - style={{ padding: "0px 20px", }} + style={{ }} pagination={false} onRow={(record, index) => { if (index % 1 === 0) { diff --git a/web/client/src/sections/problem/containers/dataAlarm.jsx b/web/client/src/sections/problem/containers/dataAlarm.jsx index f4d9106..1c7ea52 100644 --- a/web/client/src/sections/problem/containers/dataAlarm.jsx +++ b/web/client/src/sections/problem/containers/dataAlarm.jsx @@ -10,6 +10,7 @@ import moment from "moment"; import '../style.less' import { request } from 'screenfull'; +import { useRef } from 'react'; const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { let route = match.url.substring(match.url.lastIndexOf("/") + 1, match.url.length) @@ -30,6 +31,11 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { const [checkPop, setCheckPop] = useState(false) //查看弹框是否显现 const [alarmId, setAlarmId] = useState(false) //查看alarmId const [query, setQuery] = useState({ limit: 10, page: 0 }) //分页 + const [tableData, setTableData] = useState([]) //表格数据 + + + + const TextAreaApi = useRef('') const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' } const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用异常统计', deviceAbnormal: '设备异常统计' } @@ -133,16 +139,16 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { { name: '离线', value: '11' }] }], common: { - name: '持续时间', + name: '告警时间', field: 'time' } } //表格设置信息 const tableList = { - dataLnterrupt: ['index', 'projectName', 'StructureName', 'SourceName', 'AlarmGroupUnit', 'AlarmCodeName', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime',], - dataAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'type', 'alarmType', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], - strategyHit: ['index', 'projectName', 'StructureName', 'SourceName', 'Strategy', 'State', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], + dataLnterrupt: ['index', 'projectName', 'StructureName', 'SourceName', 'AlarmGroupUnit', 'AlarmCodeName', 'sustainTime', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime',], + dataAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'type', 'alarmType', 'createTime', 'sustainTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], + strategyHit: ['index', 'projectName', 'StructureName', 'SourceName', 'Strategy', 'State', 'createTime', 'sustainTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], videoAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', '20', '21', '22', 'AlarmContent', '111', 'createTime', 'updateTime', 'confirm', 'confirmTime', '56115'], useAbnormal: ['index', 'projectName', 'appName', 'url', 'type', 'alarmContent', 'createTime', 'updateTime', 'confirm', 'confirmTime'], deviceAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', 'alarmContent', '21', 'AlarmContent', 'AlarmCodeName', 'createTime', 'updateTime', 'confirm', 'confirmTime'], @@ -171,7 +177,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { name: '项目名称', sort: 3, value: 'projectName', render: (_, r, index) => { return <> {r.projectName?.map((v, index) => { - return v.name ?
+ return v.name ?
{OutHidden({ number: 7, name: v.name @@ -199,7 +205,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { } if (route == 'strategyHit') data = '测点' return
-
{r.SourceName}
+
{r.SourceName}
{data}
} @@ -213,12 +219,23 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { { name: '告警等级', sort: 13, value: 'CurrentLevel', render: (_, r, index) => { let data = { 1: '一级', 2: '二级', 3: '三级' } - return data[r.CurrentLevel] + return
+ + {data[r.CurrentLevel]} +
} }, { name: '产生次数', sort: 19, value: 'detailCount', render: (_, r, index) => r.detailCount + '次' }, { name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => r.confirm }, { name: '确认/恢复时间', sort: 21, value: 'confirmTime', }, + { + name: '持续时间', sort: 19.5, value: 'sustainTime', render: (_, r, index) => { + console.log(r.updateTime); + let time = moment(r.updateTime).diff(moment(r.createTime), 'seconds') + // console.log(time); + return time < 60 ? '< 1分钟' : time > 3600 ? Math.floor(time / 3600) + '小时' + Math.floor((time - Math.floor(time / 3600) * 3600) / 60) + '分钟' : Math.floor((time - Math.floor(time / 3600) * 3600) / 60) + '分钟' + } + }, { name: '异常信息', sort: 14, value: 'alarmContent', render: (_, r, index) => { return <>{r.alarmContent} @@ -247,17 +264,19 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { { name: '在离线', sort: 18, value: '56115' }, { name: '操作', sort: 25, value: 'text', render: (_, r, index) => { - return
- {r.State || r.State == 0 ? r.State >= 0 && r.State < 3 ? : - : "" + return
+ {r.State || r.State == 0 ? r.State >= 0 && r.State < 3 ? + + : r.State == 3 ? + : + : "" } {route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? <> - - + @@ -344,6 +363,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { setGenre={setGenre} query={query} setQuery={setQuery} + tableData={tableData} + setTableData={setTableData} /> {setup ? ( { width={600} onCancel={() => setConfirm(false)} onOk={() => { + if (route == 'useAbnormal') { dispatch(problem.postApiConfirm({ appAlarmId: selected, confirm: content })).then(res => { if (res.success) { @@ -388,19 +410,40 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { } else if (route == 'videoAbnormal') { setConfirm(false) } else { - console.log(selected); - dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => { - if (res.success) { - setConfirm(false) - setQuery({ limit: query.limit, page: query.page }) - } + TextAreaApi.current.validate().then((v) => { + // console.log(selected); + // dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => { + // if (res.success) { + // setConfirm(false) + let data = tableData?.map(v => { + if (selected.find(vv => vv == v.key)) { + return { ...v, confirm: '告警确认：' + content, confirmTime: moment().format("YYYY-MM-DD HH:mm:ss"), State: 4 } + } else { + return { ...v } + } + }) || tableData + setTableData(data) + setConfirm(false) + // console.log(data) + // setQuery({ limit: query.limit, page: query.page }) + // } + // }) }) } }} > -
- 确认信息: -