一图统揽框架

api/config.js

@@ -153,7 +153,7 @@ const ANXINCLOUD_ES_NODES_REST = process.env.ANXINCLOUD_ES_NODES_REST || flags.e
 
 //文件上传类型限制（主要是固件升级上传固件包）
 const TYPES= process.env.TYPES&&process.env.TYPES.split(',')||flags.types.split(',')
-console.log('process.env.TYPES',process.env.TYPES,TYPES)
+
 const requireParams = {
    FS_CAMUNDA_HOST, FS_CAMUNDA_ROOT,
    POMS_DB,

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

@@ -3,4 +3,5 @@
 import ProblemData from './problemData';
 import OperationData from './operationData';
 import WorkorderData from './workorderData';
-export { ProblemData,OperationData ,WorkorderData};
+import Network from './network.jsx';
+export { ProblemData, OperationData, WorkorderData,Network };

web/client/src/sections/analysis/containers/network.jsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import ReactECharts from 'echarts-for-react';
+import echarts from 'echarts';
+import { Spin, Card, CardGroup, Form, Button } from '@douyinfe/semi-ui';
+import TableShow from './tableShow';
+import TreeShow from './treeShow';
+
+
+
+const Network = (props) => {
+   const { dispatch, actions, user, clientHeight } = props
+
+   const [show, setShow] = useState('tree')
+
+   const form = useRef();//表单
+
+
+   useEffect(() => {
+
+   }, [])
+
+
+   return (
+      <>
+         <div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px', height: clientHeight - 72, display: 'flex', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+               <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
+                  <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>一图统揽</div>
+                  <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>PICTURE CENTRALIZE</div>
+               </div>
+            </div>
+            <div style={{ marginRight: 20, display: 'flex', alignItems: 'center' }} >
+               <Form
+                  getFormApi={(formApi) => (form.current = formApi)}
+                  layout="horizontal"
+                  style={{ position: "relative", width: "100%", flex: 1, display: 'flex', margin: "16px 0" }}
+               >
+                  <Form.Select
+                     filter
+                     showClear
+                     label='项目选择'
+                     field="keywordTarget"
+                     labelPosition="left"
+                     placeholder="请选择项目选择"
+                     style={{ width: 200, marginRight: 10, }}
+                  // initValue={""}
+                  >
+                     <Form.Select.Option value='pepProject'>项目</Form.Select.Option>
+                     <Form.Select.Option value='struc'>结构物</Form.Select.Option>
+                     <Form.Select.Option value='tactics'>策略名</Form.Select.Option>
+                  </Form.Select>
+                  <Form.Select
+                     label='结构物选择:'
+                     labelPosition="left"
+                     field='tactics'
+                     style={{ width: 200, }}
+                     placeholder="请选择结构物选择"
+                     filter
+                     showClear
+                  >
+                     <Form.Select.Option value="immediately">即时推送机制</Form.Select.Option>
+                     <Form.Select.Option value="continue">持续时长推送机制</Form.Select.Option>
+                     <Form.Select.Option value="abnormal_rate">异常率推送机制</Form.Select.Option>
+                  </Form.Select>
+               </Form>
+
+            </div>
+
+
+
+            <Card
+               title={'设备总数: 222 个; 异常设备:0 个; 正常设备:222 个;'}
+               style={{ width: "100%", height: "calc(100% - 106px)" }}
+               bodyStyle={{ width: "100%", height: "calc(100% - 60px)" }}
+               headerExtraContent={
+                  <>
+                     <Button
+                        theme="solid"
+                        type="primary"
+                        style={{
+                           width: 80,
+                           height: 32,
+                           borderRadius: 2,
+                           marginRight: 32,
+                           background: '#FFFFFF',
+                           color: '#005ABD',
+                           border: '1px solid #005ABD'
+                        }}
+                        onClick={() => {
+                           setShow("tree")
+                        }}
+                     >
+                        树状展示
+                     </Button>
+                     <Button
+                        theme="solid"
+                        type="primary"
+                        style={{
+                           width: 80,
+                           height: 32,
+                           borderRadius: 2,
+                           marginRight: 32,
+                           background: '#FFFFFF',
+                           color: '#005ABD',
+                           border: '1px solid #005ABD'
+                        }}
+                        onClick={() => { setShow("table") }}
+                     >
+                        表格展示
+                     </Button>
+                  </>
+               }
+            >
+               {show == 'tree' && <TreeShow />}
+               {show == 'table' && <TableShow />}
+            </Card>
+         </div>
+
+
+
+      </>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth, global, members, webSocket } = state;
+   return {
+      user: auth.user,
+      actions: global.actions,
+      clientHeight: global.clientHeight
+   };
+}
+
+export default connect(mapStateToProps)(Network);

web/client/src/sections/analysis/containers/tableShow.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import ReactECharts from 'echarts-for-react';
+import echarts from 'echarts';
+import { Spin, Card, CardGroup, Form, Button } from '@douyinfe/semi-ui';
+
+
+
+const Network = (props) => {
+   const { dispatch, actions, user, clientHeight } = props
+
+   const form = useRef();//表单
+
+
+   useEffect(() => {
+
+   }, [])
+
+
+   return (
+
+      <div style={{ width: "100%", height: "100%" }}>
+
+         表格展示
+
+      </div>
+
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth, global, members, webSocket } = state;
+   return {
+      user: auth.user,
+      actions: global.actions,
+      clientHeight: global.clientHeight
+   };
+}
+
+export default connect(mapStateToProps)(Network);

web/client/src/sections/analysis/containers/treeShow.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import ReactECharts from 'echarts-for-react';
+import echarts from 'echarts';
+import { Spin, Card, CardGroup, Form, Button } from '@douyinfe/semi-ui';
+
+
+
+const Network = (props) => {
+   const { dispatch, actions, user, clientHeight } = props
+
+   const form = useRef();//表单
+
+
+   useEffect(() => {
+
+   }, [])
+
+
+   return (
+
+      <div style={{ width: "100%", height: "100%" }}>
+
+         树状展示
+
+      </div>
+
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth, global, members, webSocket } = state;
+   return {
+      user: auth.user,
+      actions: global.actions,
+      clientHeight: global.clientHeight
+   };
+}
+
+export default connect(mapStateToProps)(Network);

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

@@ -24,6 +24,8 @@ export function getNavItem (user, dispatch) {
                   to: '/analysis/operationAnalysis/operationData',
                   items: [{
                      itemKey: 'operationData', to: '/analysis/operationAnalysis/operationData', text: '运维数据'
+                  },{
+                     itemKey: 'network', to: '/analysis/operationAnalysis/network', text: '一图统揽'
                   }]
                },
                // {

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

@@ -1,4 +1,4 @@
-import { ProblemData, OperationData, WorkorderData } from './containers';
+import { ProblemData, OperationData, WorkorderData, Network } from './containers';
 
 export default [{
    type: 'inner',
@@ -27,6 +27,12 @@ export default [{
                key: 'operationData',
                component: OperationData,
                breadcrumb: '运维数据',
+            },
+            {
+               path: '/network',
+               key: 'network',
+               component: Network,
+               breadcrumb: '一图统揽',
             }]
          },
          {