Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/OperationalService into dev

web/client/src/sections/problem/actions/problem.jsx

@@ -86,3 +86,27 @@ export function getAlarmDataList (query) {   //查询数据告警列表
       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: '' }
+   });
+}

web/client/src/sections/problem/components/sideSheet.jsx

@@ -0,0 +1,172 @@
+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) {
+            let dataSort = res.payload.data || []
+            console.log(dataSort);
+            // moment.duration(videoAfter?.diff(videoFront))._data.milliseconds;
+            dataSort.sort((a, b) => moment(a.hours).diff(b.hours))
+            let data = {
+               xAxis: {
+                  type: 'category',
+                  name: "时间",
+                  data: dataSort.map(v => v.hour)
+               },
+               yAxis: {
+                  type: 'value',
+                  name: "次数",
+               },
+               series: [
+                  {
+                     data: dataSort.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 (
+      <SideSheet
+         visible={true}
+         title=''
+         style={{ background: "#F9FBFF", height: '100%' }}
+         size="large"
+         onCancel={() => {
+            close();
+         }}
+      >
+         <Tabs type="line">
+            <TabPane tab="告警信息" itemKey="1">
+               <div id='Alarm' style={{ position: 'relative', height: document.body.clientHeight - 126 }}>
+                  <Table
+                     columns={columns}
+                     dataSource={dataSource.slice((query.page - 1) * query.pageSize, query.page * query.pageSize)}
+                     bordered={false}
+                     empty="暂无数据"
+                     style={{ padding: "0px 20px", }}
+                     pagination={false}
+                     onRow={(record, index) => {
+                        if (index % 1 === 0) {
+                           return { style: { background: '#FAFCFF' } }
+                        }
+                     }}
+                  />
+                  <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end', marginTop: 16 }}>
+                     <span style={{ lineHeight: "30px", fontSize: 13 }}>
+                        共{dataSource?.length || 0}条告警
+                     </span>
+                     <Pagination
+                        className="22"
+                        total={dataSource?.length}
+                        showSizeChanger
+                        currentPage={query.page}
+                        pageSizeOpts={[10, 20, 30, 40]}
+                        onChange={(currentPage, pageSize) => {
+                           console.log(currentPage, pageSize);
+                           setQuery({ pageSize: pageSize, page: currentPage });
+                        }}
+                     />
+                  </div>
+                  <ReactECharts
+                     option={option}
+                     notMerge={true}
+                     lazyUpdate={true}
+                     theme={"theme_name"}
+                  // onChartReady={this.onChartReadyCallback}
+                  // onEvents={EventsDict}
+                  // opts={}
+                  />
+
+               </div>
+
+            </TabPane>
+            <TabPane tab="工单信息" itemKey="2">
+            </TabPane>
+         </Tabs>
+      </SideSheet>
+   );
+}
+
+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);

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
             >
                <Table
                   columns={exhibition}
-                  dataSource={tableData}
+                  // dataSource={tableData}
+                  dataSource={[{key:'1'}]}
                   bordered={false}
                   empty="暂无数据"
                   style={{ padding: "0px 20px", }}

web/client/src/sections/problem/containers/dataAlarm.jsx

@@ -4,6 +4,7 @@ import { IconAlertCircle } from '@douyinfe/semi-icons'
 import { Button, Form, Modal, Skeleton, Pagination, TextArea } from "@douyinfe/semi-ui";
 import Statistics from '../components/statistics'
 import TableData from '../components/tableData'
+import SideSheets from '../components/sideSheet'
 import { Setup, OutHidden } from "$components";
 import moment from "moment";
 
@@ -25,6 +26,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
    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 ? <Button theme='borderless' disabled>已确认</Button> :
                      <Button theme='borderless' onClick={() => (setConfirm(true), setSelected([r.id]))}>确认</Button>
                   }
+                  {route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ?
+                     <Button theme='borderless' onClick={() => (setCheckPop(true))}>查看</Button>
+                     : "" : ""
+                  }
                </>
             }
          })
@@ -373,6 +380,14 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
                <TextArea maxCount={500} showClear onChange={(e) => setContent(e)} />
             </div>
          </Modal> : ""}
+
+         {checkPop ?
+            <SideSheets
+               close={() => {
+                  setCheckPop(false)
+               }}
+            /> : ""
+         }
       </div>
    )
 }

web/client/src/utils/webapi.js

@@ -39,7 +39,10 @@ export const ApiTable = {
    getAlarmLnspectionApi: 'alarm/application/api',           //查询应用接口/元素错误信息
    postApiConfirm: "alarm/application/api_confirm",    //确认应用接口/元素错误信息
    getAlarmDataGroup: 'alarm/data/group',   //获取数据告警分类
-   getAlarmDataList: "/alarm/data/list",    //查询数据告警列表
+   getAlarmDataList: "alarm/data/list",    //查询数据告警列表
+   getAlarmDataDetailAgg: 'alarm/data/detail_agg',    //查询数据告警详情聚集数据
+   getAlarmDataDetail: 'alarm/data/detail',   //查询数据告警详情
+
 
 
 };

web/package.json

@@ -58,6 +58,8 @@
       "babel-polyfill": "^6.26.0",
       "copy-to-clipboard": "^3.3.1",
       "cross-env": "^7.0.3",
+      "echarts": "^5.3.3",
+      "echarts-for-react": "^3.0.2",
       "ezuikit-js": "^0.6.1",
       "fs-attachment": "^1.0.0",
       "fs-web-server-scaffold": "^1.0.6",