告警

web/client/src/app.jsx

@@ -5,6 +5,7 @@ import Layout from './layout';
 import Auth from './sections/auth';
 import Example from './sections/example';
 import Example1 from './sections/example1';
+import Problem from './sections/problem';
 import NoMatch from './sections/noMatch';
 
 const App = props => {
@@ -18,7 +19,7 @@ const App = props => {
       <Layout
          title={projectName}
          sections={[
-            Example,Example1,
+            Example,Example1,Problem,
             Auth, NoMatch
          ]}
       />

web/client/src/index.jsx

@@ -6,4 +6,4 @@ import { render } from 'react-dom';
 import App from './app';
 import './index.less';
 
-render((<App projectName="飞尚物联" />), document.getElementById('PomsApp'));
+render((<App projectName="运维服务" />), document.getElementById('PomsApp'));

web/client/src/layout/containers/layout/index.jsx

@@ -207,7 +207,7 @@ const LayoutContainer = props => {
                   <Layout.Content>
                      <div style={{
                         margin: '12px 12px 0px',
-                        background: "#F6FAFF",
+                        background: "#F2F3F5",
                      }}>
                         <div id="page-content" style={{
                            height: clientHeight - 12,

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

@@ -0,0 +1,14 @@
+'use strict';
+
+import { ApiTable ,basicAction} from '$utils'
+
+// export function getMembers (orgId) {
+//     return dispatch => basicAction({
+//         type: 'get',
+//         dispatch: dispatch,
+//         actionType: 'GET_MEMBERS',
+//         url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
+//         msg: { error: '获取用户列表失败' },
+//         reducer: { name: 'members' }
+//     });
+// }

web/client/src/sections/problem/actions/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+import * as dataAlarm from './dataAlarm'
+
+export default {
+    ...dataAlarm
+}

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

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { IconAlertCircle } from '@douyinfe/semi-icons';
+import '../style.less'
+
+const DataAlarm = (props) => {
+   const { dispatch, actions, user, loading, socket } = props
+   const [abnormalLenght, setAbnormalLenght] = useState(1)  //异常数量
+
+   useEffect(() => {
+      console.log(props);
+   }, [])
+
+   return (
+      <>
+         <div>
+            {abnormalLenght > 0 ? <IconAlertCircle /> : ""}
+         </div>
+
+      </>
+   )
+}
+
+function mapStateToProps (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);

web/client/src/sections/problem/containers/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+import DataAlarm from './dataAlarm';
+
+export { DataAlarm };

web/client/src/sections/problem/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import reducers from './reducers';
+import routes from './routes';
+import actions from './actions';
+import { getNavItem } from './nav-item';
+
+export default {
+    key: 'problem',
+    name: '书写示例',
+    reducers: reducers,
+    routes: routes,
+    actions: actions,
+    getNavItem: getNavItem
+};

web/client/src/sections/problem/nav-item.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconCode } from '@douyinfe/semi-icons';
+
+export function getNavItem (user, dispatch) {
+   return (
+      [{
+         itemKey: 'problem', text: '问题',
+         items: [
+            {
+               itemKey: 'dataAlarm', text: '数据告警', icon: <iconpark-icon style={{ width: 20, height: 20 }} name="she-1"></iconpark-icon>,
+               items: [
+                  { itemKey: 'dataLnterrupt', to: '/problem/dataAlarm/dataLnterrupt', text: '数据中断' },
+                  { itemKey: 'dataAbnormal', to: '/problem/dataAlarm/dataAbnormal', text: '数据异常' },
+                  { itemKey: 'strategyHit', to: '/problem/dataAlarm/strategyHit', text: '策略命中' },
+                  { itemKey: 'videoAbnormal', to: '/problem/dataAlarm/videoAbnormal', text: '视频异常' },
+               ]
+            }, {
+               itemKey: 'useAlarm', text: '应用告警', icon: <iconpark-icon style={{ width: 20, height: 20 }} name="she-1"></iconpark-icon>,
+               items: [
+                  { itemKey: 'useAbnormal', to: '/problem/useAlarm/useAbnormal', text: '应用异常' },
+               ]
+            }, {
+               itemKey: 'deviceAlarm', text: '设备告警', icon: <iconpark-icon style={{ width: 20, height: 20 }} name="she-1"></iconpark-icon>,
+               items: [
+                  { itemKey: 'deviceAbnormal', to: '/problem/deviceAlarm/deviceAbnormal', text: '设备异常' },
+               ]
+            },
+         ]
+      },
+
+      ]
+   );
+}

web/client/src/sections/problem/reducers/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+
+}

web/client/src/sections/problem/routes.js

@@ -0,0 +1,61 @@
+'use strict';
+import { DataAlarm, } from './containers';
+
+export default [{
+   type: 'inner',
+   route: {
+      path: '/problem',
+      key: 'problem',
+      breadcrumb: '问题',
+      // 不设置 component 则面包屑禁止跳转
+      childRoutes: [{
+         path: '/dataAlarm',
+         key: 'dataAlarm',
+         breadcrumb: '数据告警',
+         // 不设置 component 则面包屑禁止跳转
+         childRoutes: [{
+            path: '/dataLnterrupt',
+            key: 'dataLnterrupt',
+            breadcrumb: '数据中断',
+            component: DataAlarm,
+         }, {
+            path: '/dataAbnormal',
+            key: 'dataAbnormal',
+            breadcrumb: '数据异常',
+            component: DataAlarm,
+         }, {
+            path: '/strategyHit',
+            key: 'strategyHit',
+            breadcrumb: '策略命中',
+            component: DataAlarm,
+         }, {
+            path: '/videoAbnormal',
+            key: 'videoAbnormal',
+            breadcrumb: '视频异常',
+            component: DataAlarm,
+         }]
+      }, {
+         path: '/useAlarm',
+         key: 'useAlarm',
+         breadcrumb: '应用告警',
+         // 不设置 component 则面包屑禁止跳转
+         childRoutes: [{
+            path: '/useAbnormal',
+            key: 'useAbnormal',
+            breadcrumb: '应用异常',
+            component: DataAlarm,
+         },]
+      }, {
+         path: '/deviceAlarm',
+         key: 'deviceAlarm',
+         breadcrumb: '设备告警',
+         // 不设置 component 则面包屑禁止跳转
+         childRoutes: [{
+            path: '/deviceAbnormal',
+            key: 'deviceAbnormal',
+            breadcrumb: '设备异常',
+            component: DataAlarm,
+         },]
+      }]
+   }
+}];

web/client/src/sections/problem/style.less

@@ -0,0 +1,7 @@
+#example {
+    box-shadow: 3px 3px 2px black;
+}
+
+#example:hover {
+    color: yellowgreen;
+}