From 509585b40f1b066f81031fc7125eeeaa4b30a3d1 Mon Sep 17 00:00:00 2001 From: wenlele Date: Sat, 24 Sep 2022 17:20:44 +0800 Subject: [PATCH 1/2] ReactECharts --- .../src/sections/problem/actions/problem.jsx | 24 +++ .../sections/problem/components/sideSheet.jsx | 170 ++++++++++++++++++ .../sections/problem/components/tableData.jsx | 9 +- .../sections/problem/containers/dataAlarm.jsx | 17 +- web/client/src/utils/webapi.js | 5 +- web/package.json | 2 + 6 files changed, 221 insertions(+), 6 deletions(-) create mode 100644 web/client/src/sections/problem/components/sideSheet.jsx diff --git a/web/client/src/sections/problem/actions/problem.jsx b/web/client/src/sections/problem/actions/problem.jsx index 0512cfa..a5bfd10 100644 --- a/web/client/src/sections/problem/actions/problem.jsx +++ b/web/client/src/sections/problem/actions/problem.jsx @@ -85,4 +85,28 @@ export function getAlarmDataList (query) { //查询数据告警列表 msg: { error: '查询数据告警列表失败' }, reducer: { name: '' } }); +} + +export function getAlarmDataDetail (query) { //查询数据告警详情 + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + query, + actionType: 'GET_ALARM_DATA_DATAIL', + url: `${ApiTable.getAlarmDataDetail}`, + msg: { error: '查询数据告警详情失败' }, + reducer: { name: '' } + }); +} + +export function getAlarmDataDetailAgg (query) { //查询数据告警详情聚集数据 + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + query, + actionType: 'GET_ALARM_DATA_DATAIL_AGG', + url: `${ApiTable.getAlarmDataDetailAgg}`, + msg: { error: '查询数据告警详情聚集数据失败' }, + reducer: { name: '' } + }); } \ No newline at end of file diff --git a/web/client/src/sections/problem/components/sideSheet.jsx b/web/client/src/sections/problem/components/sideSheet.jsx new file mode 100644 index 0000000..5cc4b94 --- /dev/null +++ b/web/client/src/sections/problem/components/sideSheet.jsx @@ -0,0 +1,170 @@ +import React, { useState, useEffect } from "react"; +import { connect } from "react-redux"; +import { SideSheet, Tabs, TabPane, Button, Table, Pagination } from "@douyinfe/semi-ui"; +import copy from "copy-to-clipboard"; +import moment from "moment"; +import PerfectScrollbar from "perfect-scrollbar"; +import ReactECharts from 'echarts-for-react'; + +let projectScrollbar; + +function SideSheets ({ dispatch, actions, close }) { + + const { problem } = actions; + const [clickStyle, setclickStyle] = useState(); + const [query, setQuery] = useState({ page: 1, pageSize: 10 }); + const [dataSource, setdataSource] = useState([]); + const [option, setOption] = useState({}); + + + + useEffect(() => { + dispatch(problem.getAlarmDataDetail({ alarmId: "fa7fd145-f251-3657-8176-8f8f04a92a96" })).then((res) => { + if (res?.success) { + console.log(res.payload.data); + setdataSource(res.payload.data); + projectScrollbar = new PerfectScrollbar("#Alarm", { + suppressScrollX: true, + }); + } + }); + dispatch(problem.getAlarmDataDetailAgg({ alarmId: "fa7fd145-f251-3657-8176-8f8f04a92a96" })).then((res) => { + if (res?.success) { + console.log(res.payload.data); + let data = { + xAxis: { + type: 'category', + name:"时间", + show :true, + data: res.payload.data.map(v=>v.hours) + }, + yAxis: { + type: 'value', + name:"次数", + }, + series: [ + { + data:res.payload.data.map(v=>v.count) , + type: 'line' + } + ] + } + console.log(data); + setOption(data) + // setNvrDetails(res.payload.data); + } + }); + }, []); + + + useEffect(() => { + const domProject = document.getElementById("Alarm"); + if (domProject && projectScrollbar) { + projectScrollbar.update(); + } + }); + + let columns = [ + { + title: "告警活动", + dataIndex: "AlarmState", + rowKey: 'AlarmState', + render: (_, r, index) => { + let data = { 0: '首次产生', 1: '持续产生', 2: '等级提升', 3: '自动恢复', 4: '人工恢复' } + return data[r.AlarmState] + }, + }, { + title: "告警信息", + dataIndex: "Content", + rowKey: 'Content', + }, { + title: "等级", + dataIndex: "CurrentLevel", + rowKey: 'CurrentLevel', + render: (_, r, index) => { + let data = { 1: '一级', 2: '二级', 3: '三级' } + return data[r.CurrentLevel] + }, + }, { + title: "产生时间", + dataIndex: "Time", + rowKey: 'Time', + render: (_, r, index) => moment(r.time).format("YYYY-MM-DD HH:MM:SS") + }, + ] + + + + return ( + { + close(); + }} + > + + +
+ { + if (index % 1 === 0) { + return { style: { background: '#FAFCFF' } } + } + }} + /> +
+ + 共{dataSource?.length || 0}条告警 + + { + console.log(currentPage, pageSize); + setQuery({ pageSize: pageSize, page: currentPage }); + }} + /> +
+ + + + + + + + + + ); +} + +function mapStateToProps (state) { + const { auth, global, members } = state; + return { + // loading: members.isRequesting, + user: auth.user, + actions: global.actions, + global: global, + // members: members.data, + }; +} +export default connect(mapStateToProps)(SideSheets); diff --git a/web/client/src/sections/problem/components/tableData.jsx b/web/client/src/sections/problem/components/tableData.jsx index 51de180..57fd894 100644 --- a/web/client/src/sections/problem/components/tableData.jsx +++ b/web/client/src/sections/problem/components/tableData.jsx @@ -50,18 +50,18 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition if (route == 'dataAbnormal') data = res.payload.data?.filter(v => v.desc == '数据异常') if (route == 'strategyHit') data = res.payload.data?.filter(v => v.desc == '策略命中') if (route == 'deviceAbnormal') data = res.payload.data?.filter(v => v.desc == '掉线' || v.desc == '不活跃') - console.log(data); + // console.log(data); let genreData = [] data?.map(v => { v?.unit?.map(vv => { genreData.push({ name: vv.name, value: vv.id }) }) }) - console.log(genreData); + // console.log(genreData); setGenre(genreData) if (data || data[0]?.id) { dispatch(problem.getAlarmDataList({})).then((res) => { - console.log(res); + // console.log(res); }) } @@ -192,7 +192,8 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition >
{ const [content, setContent] = useState(false); //确认内容 const [selected, setSelected] = useState([]) //表格被勾选项 const [genre, setGenre] = useState([]) //搜索类型 + const [checkPop, setCheckPop] = useState(false) //查看弹框是否显现 + const [alarmId, setAlarmId] = useState(false) //查看alarmId const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' } const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用异常统计', deviceAbnormal: '设备异常统计' } @@ -87,7 +90,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { { name: '搜索', field: '1' }, { name: '策略类型', field: '2', - data:genre + data: genre }, { name: '命中状态', field: '3', @@ -278,6 +281,10 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { {r.confirmTime ? : } + {route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? + + : "" : "" + } } }) @@ -373,6 +380,14 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {