diff --git a/web/client/assets/images/problem/setup.png b/web/client/assets/images/problem/setup.png new file mode 100644 index 0000000..58aa294 Binary files /dev/null and b/web/client/assets/images/problem/setup.png differ diff --git a/web/client/src/components/setup.jsx b/web/client/src/components/setup.jsx index 9ff3a55..c4cd070 100644 --- a/web/client/src/components/setup.jsx +++ b/web/client/src/components/setup.jsx @@ -11,6 +11,9 @@ function Setup(props) { tableType, tableList } = props; + + console.log(tableType, + tableList); const [check, setCheck] = useState([]); const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; @@ -98,7 +101,7 @@ function Setup(props) { {item.title}
- {item.list.map((itm) => { + {item.list?.map((itm) => { return ( { } }} style={{ - height: 60, + height: 50, minWidth: 520, background: '#1D2343', backgroundSize: "100% 100%", @@ -32,7 +32,7 @@ const Header = (props) => { logo: ( ), text: "", diff --git a/web/client/src/layout/containers/layout/index.jsx b/web/client/src/layout/containers/layout/index.jsx index 320d652..dcf46dc 100644 --- a/web/client/src/layout/containers/layout/index.jsx +++ b/web/client/src/layout/containers/layout/index.jsx @@ -237,7 +237,7 @@ const LayoutContainer = props => { }} /> - + {leftShow ? ( { + + + return ( +
+
+
数据异常统计
+ +
+
+
暂未开放敬请期待
+
暂未开放敬请期待
+
暂未开放敬请期待
+
暂未开放敬请期待
+ +
+
+ ) +} + + +function mapStateToProps (state) { + const { auth, global, members } = state; + return { + // user: auth.user, + // actions: global.actions, + // global: global, + // members: members.data, + }; +} +export default connect(mapStateToProps)(Statistics); diff --git a/web/client/src/sections/problem/components/tableData.jsx b/web/client/src/sections/problem/components/tableData.jsx new file mode 100644 index 0000000..17eddf2 --- /dev/null +++ b/web/client/src/sections/problem/components/tableData.jsx @@ -0,0 +1,167 @@ +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"; + + +const TableData = ({ dispatch, actions, route, collectData, setSetup }) => { + + const api = useRef(); + + useEffect(() => { + + }, [route]) + + + + return ( + <> +
+
+
+
console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} + layout="horizontal" + style={{ position: "relative", width: "100%", flex: 1 }} + > + {(() => { + let frame = [] + collectData[route]?.map((v, index) => { + if (index == 0) { + frame.push() + } else { + frame.push( + {v.data?.map((item) => { + return ( + + {item.name} + + ); + })} + ) + } + }) + frame.push( console.log(v)} + />) + return frame + })()} + +
+ setSetup(true)} /> + +
+
+
+ + { + if (index % 1 === 0) { + return { style: { background: '' } } + } + }} + /> + +
+ + 共{100}个设备 + + { + // setQuery({ limit: pageSize, page: currentPage - 1 }); + // page.current = currentPage - 1 + }} + /> +
+ + + ) +} + + +function mapStateToProps (state) { + const { auth, global, members } = state; + return { + // user: auth.user, + // actions: global.actions, + // global: global, + // members: members.data, + }; +} +export default connect(mapStateToProps)(TableData); diff --git a/web/client/src/sections/problem/containers/dataAlarm.jsx b/web/client/src/sections/problem/containers/dataAlarm.jsx index 720ab94..5d9206d 100644 --- a/web/client/src/sections/problem/containers/dataAlarm.jsx +++ b/web/client/src/sections/problem/containers/dataAlarm.jsx @@ -1,35 +1,261 @@ -import React, { useEffect, useState } from 'react'; -import { connect } from 'react-redux'; -import { IconAlertCircle } from '@douyinfe/semi-icons'; +import React, { useEffect, useState } from 'react' +import { connect } from 'react-redux' +import { IconAlertCircle } from '@douyinfe/semi-icons' +import Statistics from '../components/statistics' +import TableData from '../components/tableData' +import { Setup } from "$components"; + import '../style.less' -const DataAlarm = (props) => { - const { dispatch, actions, user, loading, socket } = props - const [abnormalLenght, setAbnormalLenght] = useState(1) //异常数量 +const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { + + const [route, setRoute] = useState('') //子页面路由 + const [abnormalLenght, setAbnormalLenght] = useState(0) //异常数量 + const [collect, setCollect] = useState([]) //搜索结构 + const [setup, setSetup] = useState(false); //表格设置是否显现 + const [tableSetup, setTableSetup] = useState([]); //单一表格设置信息 + + const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' } + useEffect(() => { - console.log(props); + setRoute(match.url.substring(match.url.lastIndexOf("/") + 1, match.url.length)) + console.log(match.url) + console.log(tableType); }, []) + + useEffect(() => { + attribute(tableType[route], route); + }, [route]) + + + //搜索结构 + const collectData = { + dataLnterrupt: [ //数据中断(dataLnterrupt) + { name: '搜索', field: '1' }, + { + name: '中断类型', field: '2', + data: [ + { name: '服务异常', value: '11' }, + { name: '链接中断', value: '22' }, + { name: '设备异常', value: '33' }] + }, + { + name: '中断状态', field: '3', + data: [ + { name: '当前', value: '11' }, + { name: '历史', value: '22' }] + }], + dataAbnormal: [ //数据异常(dataAbnormal) + { name: '搜索', field: '1' }, + { + name: '异常类型', field: '2', + data: [ + { name: '超远程', value: '11' }, + { name: '超限幅', value: '22' }] + }, + { + name: '异常状态', field: '3', + data: [ + { name: '当前', value: '11' }, + { name: '历史', value: '22' }] + }], + strategyHit: [ // 策略命中(strategyHit) + { name: '搜索', field: '1' }, + { + name: '策略类型', field: '2', + data: [ + { name: '超阀值', value: '11' }, + { name: '防驶入告警', value: '22' }, + { name: '设备关闭', value: '33' }, + { name: '超围栏', value: '44' }] + }, + { + name: '命中状态', field: '3', + data: [ + { name: '当前', value: '11' }, + { name: '历史', value: '22' }] + }], + videoAbnormal: [ // 视频异常(videoAbnormal) + { name: '搜索', field: '1' }, + { + name: '设备类型', field: '2', + data: [ + { name: '枪机', value: '11' }, + { name: '球机', value: '22' }, + { name: '其他', value: '33' }] + }, + { + name: '异常状态', field: '3', + data: [ + { name: '当前', value: '11' }, + { name: '历史', value: '22' }] + }], + useAbnormal: [ // 应用异常(useAbnormal) + { name: '搜索', field: '1' }, + { + name: '异常类型', field: '2', + data: [ + { name: '接口报错', value: '11' }, + { name: '加载超时', value: '22' }, + { name: '元素异常', value: '33' }] + }, + { + name: '异常状态', field: '3', + data: [ + { name: '当前', value: '11' }, + { name: '历史', value: '22' }] + }], + deviceAbnormal: [ // 设备告警(deviceAbnormal) + { name: '搜索', field: '1' }, + { + name: '设备类型', field: '2', + data: [ + { name: '传感器', value: '11' }, + { name: 'DTU', value: '22' }, + { name: '服务器', value: '33' }] + }, + { + name: '异常状态', field: '3', + data: [ + { name: '当前', value: '11' }, + { name: '历史', value: '22' }] + }, + { + name: '异常类型', field: '4', + data: [ + { name: '离线', value: '11' }] + }], + common: { + name: '持续时间', + field: '5' + } + } + + //表格设置信息 + const tableList = { + dataLnterrupt: ['1', '2', '3', '4', '6', '9', '7', '5', '10', '8', '11', '12', '13', '14'], + dataAbnormal: ['1', '2', '3', '4', '15', '16', '9', '7', '5', '10', '8', '11', '12', '13'], + strategyHit: ['1', '2', '3', '17', '18', '7', '5', '10', '8', '11', '12', '13'], + videoAbnormal: ['1', '2', '3', '19', '20', '21', '22', '5', '6', '7', '8', '12', '13'], + useAbnormal: ['1', '23', '24', '15', '25', '7', '8', '12', '13'], + deviceAbnormal: ['1', '2', '3', '19', '15', '21', '5', '6', '7', '8', '12', '13'], + } + //表格默认配置信息 + const columns = { + dataLnterrupt: ['0', '1', '2', '3', '4', '5', '6', '7', '8',], + dataAbnormal: ['0', '1', '2', '3', '15', '5', '6', '7', '8'], + strategyHit: ['0', '1', '2', '3', '17', '5', '10', '11', '7', '8'], + videoAbnormal: ['0', '1', '2', '3', '21', '20', '5', '7', '8'], + useAbnormal: ['0', '1', '23', '24', '15', '25', '7', '8'], + deviceAbnormal: ['0', '1', '2', '3', '15', '19', '5', '7', '8'], + } + //所有表格信息 + const columnAll = [ + { name: '问题编号', value: '0' }, + { name: '项目名称', value: '1' }, + { name: '结构物名称', value: '2' }, + { name: '告警源', value: '3' }, + { name: '中断类型', value: '4' }, + { name: '告警信息', value: '5' }, + { name: '常见原因', value: '6' }, + { name: '产生时间', value: '7' }, + { name: '更新时间', value: '8' }, + { name: '服务器地址', value: '9' }, + { name: '告警等级', value: '10' }, + { name: '产生次数', value: '11' }, + { name: '确认信息', value: '12' }, + { name: '确认/恢复时间', value: '13' }, + { name: '项目阶段', value: '14' }, + { name: '异常类型', value: '15' }, + { name: '异常原因', value: '16' }, + { name: '策略类型', value: '17' }, + { name: '命中状态', value: '18' }, + { name: '位置信息', value: '19' }, + { name: '设备类型', value: '20' }, + { name: '设备厂家', value: '21' }, + { name: '接入方式', value: '22' }, + { name: '应用名称', value: '23' }, + { name: 'URL地址', value: '24' }, + { name: '异常信息', value: '25' }, + ] + + + + const attribute = (tableType, route) => { + let arr = localStorage.getItem(tableType) + ? JSON.parse(localStorage.getItem(tableType)) + : []; + // if (route) { + // console.log(tableList[route]); + // console.log([...[1,2,3],...[2,3]]); + // let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value)) + // console.log(setup); + // setTableSetup([{ list: setup }]) + // } + + // for (let i = 0; i < arr.length; i++) { + // let colum = column.filter((item) => { + // return item.key === arr[i]; + // }); + // columns.splice(i + 2, 0, colum[0]); + // } + // setSetupp(columns); + } + + + + + + const distinguish = (route) => { + switch (route) { + case value: + + break; + + default: + break; + } + } return ( - <> +
+ {/* 滞留提醒 */}
- {abnormalLenght > 0 ? : ""} + {abnormalLenght > 0 ?
当前滞留5个工单即将超时，请尽快处理！
: ""}
- - + + + {setup ? ( + { + setSetup(false); + attribute(tableType[route]); + // setcameraSetup(false); + }} + /> + ) : ( + "" + )} +
) } function mapStateToProps (state) { - const { auth, global, members, webSocket } = state; + const { auth, global, members, webSocket } = state return { // loading: members.isRequesting, user: auth.user, actions: global.actions, // members: members.data, // socket: webSocket.socket - }; + } } -export default connect(mapStateToProps)(DataAlarm); +export default connect(mapStateToProps)(DataAlarm) diff --git a/web/client/src/sections/problem/nav-item.jsx b/web/client/src/sections/problem/nav-item.jsx index 279dcdc..dc1d7d3 100644 --- a/web/client/src/sections/problem/nav-item.jsx +++ b/web/client/src/sections/problem/nav-item.jsx @@ -7,7 +7,7 @@ export function getNavItem (user, dispatch) { itemKey: 'problem', text: '问题', items: [ { - itemKey: 'dataAlarm', text: '数据告警', icon: , + itemKey: 'dataAlarm', text: '数据告警', to: '/problem/dataAlarm/dataLnterrupt', icon: , items: [ { itemKey: 'dataLnterrupt', to: '/problem/dataAlarm/dataLnterrupt', text: '数据中断' }, { itemKey: 'dataAbnormal', to: '/problem/dataAlarm/dataAbnormal', text: '数据异常' }, @@ -15,12 +15,12 @@ export function getNavItem (user, dispatch) { { itemKey: 'videoAbnormal', to: '/problem/dataAlarm/videoAbnormal', text: '视频异常' }, ] }, { - itemKey: 'useAlarm', text: '应用告警', icon: , + itemKey: 'useAlarm', text: '应用告警', to: '/problem/useAlarm/useAbnormal', icon: , items: [ { itemKey: 'useAbnormal', to: '/problem/useAlarm/useAbnormal', text: '应用异常' }, ] }, { - itemKey: 'deviceAlarm', text: '设备告警', icon: , + itemKey: 'deviceAlarm', text: '设备告警', to: '/problem/deviceAlarm/deviceAbnormal', icon: , items: [ { itemKey: 'deviceAbnormal', to: '/problem/deviceAlarm/deviceAbnormal', text: '设备异常' }, ]