策略，视频，应用

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}
                 </div>
                 <div style={{ padding: "15px 12px", width: 530 }}>
-                    {item.list.map((itm) => {
+                    {item.list?.map((itm) => {
                     return (
                         <Checkbox
                         key={itm.value}

web/client/src/layout/actions/global.js

@@ -18,7 +18,7 @@ export function initLayout (title, copyright, sections, actions) {
 
 export const RESIZE = 'RESIZE';
 export function resize (clientHeight, clientWidth) {
-   const headerHeight = 60
+   const headerHeight = 50
    const footerHeight = 0
    return {
       type: RESIZE,

web/client/src/layout/components/header/index.jsx

@@ -22,7 +22,7 @@ const Header = (props) => {
                     }
                 }}
                 style={{
-                    height: 60,
+                    height: 50,
                     minWidth: 520,
                     background: '#1D2343',
                     backgroundSize: "100% 100%",
@@ -32,7 +32,7 @@ const Header = (props) => {
                     logo: (
                         <img
                             src="/assets/images/background/logo.png"
-                            style={{ display: "inline-block", width: 280, height: 52 }}
+                            style={{ display: "inline-block", width: 280, height: 43 }}
                         />
                     ),
                     text: "",

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

@@ -237,7 +237,7 @@ const LayoutContainer = props => {
                             }}
                         />
                     </Layout.Header>
-                    <Layout style={{ height: 'calc(100% - 60px)' }}>
+                    <Layout style={{ height: 'calc(100% - 50px)' }}>
                         {leftShow ? (<Layout.Sider>
                             <Sider
                                 sections={sections}

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

@@ -0,0 +1,42 @@
+import React, { useState, useEffect, useRef } from "react";
+import { connect } from "react-redux";
+import { DatePicker } from "@douyinfe/semi-ui";
+
+const Statistics = ({ dispatch, actions, close, modalName, visible, appData }) => {
+
+
+   return (
+      <div style={{ width: '100%', height: 180, border: '1px solid #00000012', backgroundColor: 'white', marginBottom: 20 }}>
+         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <div>数据异常统计</div>
+            <DatePicker
+               type="dateTimeRange"
+               style={{ width: 405 }}
+               // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
+               value={[new Date('2022-08-08 00:00'), new Date('2022-08-09 00:00')]}
+               prefix='统计时段：'
+               onChange={console.log}
+            />
+         </div>
+         <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}>
+            <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
+            <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
+            <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
+            <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
+
+         </div>
+      </div>
+   )
+}
+
+
+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);

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 (
+      <>
+         <div style={{ backgroundColor: '#FFFFFF' }}>
+            <div style={{}}>
+               <div style={{ display: "flex", marginBottom: 16 }}>
+                  <Form
+                     onSubmit={(values) => 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(<Form.Input
+                                 label={v.name + ':'}
+                                 field={v.field}
+                                 key={v.field}
+                                 maxLength="16"
+                                 placeholder="搜索项目名称、结构物名称、或告警源名称"
+                                 labelPosition="left"
+                                 style={{ width: 292, marginRight: 10, }}
+                              />)
+                           } else {
+                              frame.push(<Form.Select
+                                 label={v.name + ':'}
+                                 labelPosition="left"
+                                 field={v.field}
+                                 key={v.field}
+                                 style={{ width: 116, marginRight: 10, color: "#F9F9F9", }}
+                                 placeholder="全部"
+                                 showClear
+                              >
+                                 {v.data?.map((item) => {
+                                    return (
+                                       <Form.Select.Option key={item.value} value={item.value}>
+                                          {item.name}
+                                       </Form.Select.Option>
+                                    );
+                                 })}
+                              </Form.Select>)
+                           }
+                        })
+                        frame.push(<Form.DatePicker
+                           type="dateTimeRange"
+                           labelPosition="left"
+                           style={{ width: 352 }}
+                           label={collectData.common.name + ':'}
+                           field={collectData.common.field}
+                           key={collectData.common.field}
+                           // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
+                           values={[new Date('2022-08-08 00:00'), new Date()]}
+                           onChange={(v) => console.log(v)}
+                        />)
+                        return frame
+                     })()}
+                  </Form>
+                  <div
+                     style={{
+                        width: 100,
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "flex-end",
+                        marginRight: 10
+                     }}
+                  >
+                     <img src="/assets/images/problem/setup.png"
+                        style={{ width: 24, height: 24 }}
+                        onClick={() => setSetup(true)} />
+                     <Button
+                        theme="solid"
+                        type="primary"
+                        style={{
+                           width: 65,
+                           height: 30,
+                           borderRadius: 3,
+                        }}
+                        onClick={() => {
+                           api.current.validate().then((v) => {
+                              console.log(v);
+                              // setSearch(v);
+                              // setQuery({ limit: 10, page: 0 })
+                           });
+                        }}
+                     >
+                        搜索
+                     </Button>
+                  </div>
+               </div>
+            </div>
+            <Skeleton
+               loading={false}
+               active={true}
+               placeholder={SkeletonScreen()}
+            >
+               <Table
+                  columns={[{ title: '叫', dataIndex: 'name', }]}
+                  dataSource={[{ name: '1', }]}
+                  bordered={false}
+                  empty="暂无数据"
+                  style={{
+                     padding: "0px 20px",
+                  }}
+                  pagination={false}
+                  onRow={(record, index) => {
+                     if (index % 1 === 0) {
+                        return { style: { background: '' } }
+                     }
+                  }}
+               />
+            </Skeleton>
+            <div
+               style={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  padding: "20px 20px",
+               }}
+            >
+               <span style={{ lineHeight: "30px" }}>
+                  共{100}个设备
+               </span>
+               <Pagination
+                  className="22"
+                  total={100}
+                  showSizeChanger
+                  currentPage={1}
+                  pageSizeOpts={[10, 20, 30, 40]}
+                  onChange={(currentPage, pageSize) => {
+                     // setQuery({ limit: pageSize, page: currentPage - 1 });
+                     // page.current = currentPage - 1
+                  }}
+               />
+            </div>
+         </div >
+      </>
+   )
+}
+
+
+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);

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

@@ -1,35 +1,261 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'
-import { connect } from 'react-redux';
+import { connect } from 'react-redux'
-import { IconAlertCircle } from '@douyinfe/semi-icons';
+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 DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
-   const { dispatch, actions, user, loading, socket } = props
+
-   const [abnormalLenght, setAbnormalLenght] = useState(1)  //异常数量
+   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 (
-      <>
+      <div>
+         {/* 滞留提醒 */}
          <div>
-            {abnormalLenght > 0 ? <IconAlertCircle /> : ""}
+            {abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时，请尽快处理！</div></div> : ""}
          </div>
-
+         <Statistics />
-      </>
+         <TableData
+            route={route}
+            collectData={collectData}
+            setSetup={setSetup}
+         />
+         {setup ? (
+            <Setup
+               tableType={tableType[route] || []}
+               tableList={tableSetup}
+               close={() => {
+                  setSetup(false);
+                  attribute(tableType[route]);
+                  // setcameraSetup(false);
+               }}
+            />
+         ) : (
+            ""
+         )}
+      </div>
    )
 }
 
 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)

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: <iconpark-icon style={{ width: 20, height: 20 }} name="she-1"></iconpark-icon>,
+               itemKey: 'dataAlarm', text: '数据告警', to: '/problem/dataAlarm/dataLnterrupt', 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: '数据异常' },
@@ -15,12 +15,12 @@ export function getNavItem (user, dispatch) {
                   { itemKey: 'videoAbnormal', to: '/problem/dataAlarm/videoAbnormal', text: '视频异常' },
                ]
             }, {
-               itemKey: 'useAlarm', text: '应用告警', icon: <iconpark-icon style={{ width: 20, height: 20 }} name="she-1"></iconpark-icon>,
+               itemKey: 'useAlarm', text: '应用告警', to: '/problem/useAlarm/useAbnormal', 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>,
+               itemKey: 'deviceAlarm', text: '设备告警', to: '/problem/deviceAlarm/deviceAbnormal', icon: <iconpark-icon style={{ width: 20, height: 20 }} name="she-1"></iconpark-icon>,
                items: [
                   { itemKey: 'deviceAbnormal', to: '/problem/deviceAlarm/deviceAbnormal', text: '设备异常' },
                ]