确认信息

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

@@ -5,6 +5,7 @@ import copy from "copy-to-clipboard";
 import moment from "moment";
 import PerfectScrollbar from "perfect-scrollbar";
 import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
 
 let projectScrollbar;
 
@@ -43,6 +44,12 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
                })
                // console.log(dataSort);
                let data = {
+                  grid: {
+                     left: '5%',
+                     // right: '4%',
+                     // bottom: '3%',
+                     // containLabel: true
+                  },
                   dataZoom: [
                      {
                         show: true,
@@ -60,10 +67,14 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
                   tooltip: {
                      trigger: 'axis'
                   },
-
+                  legend: {
+                     data: ['次数'],
+                     right: '10%',
+                  },
                   xAxis: {
                      type: 'category',
                      name: "时间",
+                     boundaryGap: false,
                      data: dataSort.map(v => v.hours)
                   },
                   yAxis: {
@@ -75,9 +86,13 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
                         data: dataSort.map(v => v.count),
                         type: 'line',
                         name: '次数',
-                        // markLine: {
-                        //    data: [{ type: 'average', name: 'Avg' }]
-                        // }
+                        smooth: true,
+                        areaStyle: {
+                           color: '#0e9cff26',
+                        },
+                        markLine: {
+                           data: [{ type: 'average', name: 'Avg' }]
+                        }
                      }
                   ]
                }
@@ -148,6 +163,12 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
          <Tabs type="line">
             <TabPane tab="告警信息" itemKey="1">
                <div id='Alarm' style={{ position: 'relative', height: document.body.clientHeight - 126, marginTop: 12 }}>
+                 
+                  <div style={{ display: 'flex', alignItems: 'center', margin: "0 0 16px 0" }}>
+                     <span style={{ width: 0, height: 20, margin: "0 8px 0 0", borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></span>
+                     <span style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}>告警详情</span>
+                     <span style={{ marginLeft: 6, fontSize: 12, color: "rgb(150, 151, 153)", fontFamily: 'DINExp' }}>ALARM DETAILS</span>
+                  </div>
                   <Table
                      columns={columns}
                      dataSource={dataSource.slice((query.page - 1) * query.pageSize, query.page * query.pageSize)}
@@ -177,15 +198,24 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
                         }}
                      />
                   </div> : ""}
-                  <ReactECharts
-                     option={option}
-                     notMerge={true}
-                     lazyUpdate={true}
-                     theme={"theme_name"}
-                  // onChartReady={this.onChartReadyCallback}
-                  // onEvents={EventsDict}
-                  // opts={}
-                  />
+
+                  <div style={{ display: 'flex', alignItems: 'center', margin: "36px 0 0 0" }}>
+                     <span style={{ width: 0, height: 20, margin: "0 8px 0 0", borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></span>
+                     <span style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}>趋势分析</span>
+                     <span style={{ marginLeft: 6, fontSize: 12, color: "rgb(150, 151, 153)", fontFamily: 'DINExp' }}>TREND ANALYSIS</span>
+                  </div>
+                  <div style={{ marginBottom: 60 }}>
+                     <ReactECharts
+                        option={option}
+                        notMerge={true}
+                        lazyUpdate={true}
+                        theme={"theme_name"}
+                     // onChartReady={this.onChartReadyCallback}
+                     // onEvents={EventsDict}
+                     // opts={}
+                     />
+                  </div>
+
 
                </div>
 

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

@@ -227,7 +227,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
       },
       { name: '产生次数', sort: 19, value: 'detailCount', render: (_, r, index) => r.detailCount + '次' },
       { name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => r.confirm ? r.confirm : "未确认" },
-      { name: '确认/恢复时间', sort: 21, value: 'confirmTime', render: (_, r, index) => r.confirmTime ? r.confirmTime : "无"},
+      { name: '确认/恢复时间', sort: 21, value: 'confirmTime', render: (_, r, index) => r.confirmTime ? r.confirmTime : "无" },
       {
          name: '持续时间', sort: 19.5, value: 'sustainTime', render: (_, r, index) => {
             console.log(r.updateTime);
@@ -411,23 +411,22 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
                   setConfirm(false)
                } else {
                   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 }
+                     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 })
                         }
-                     }) || tableData
-                     setTableData(data)
-                     setConfirm(false)
-                     // console.log(data)
-                     // setQuery({ limit: query.limit, page: query.page })
-                     // }
-                     // })
+                     })
                   })
                }
             }}