From 177bcaf72b484254385e47e8cfe64326c7ed74ea Mon Sep 17 00:00:00 2001
From: wenlele <wen.lele@free-sun.com.cn>
Date: Mon, 27 Nov 2023 16:03:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E5=9B=BE=E7=BB=9F=E6=8F=BD=E6=A1=86?=
 =?UTF-8?q?=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/config.js                                 |   2 +-
 .../src/sections/analysis/containers/index.js |   3 +-
 .../sections/analysis/containers/network.jsx  | 136 ++++++++++++++++++
 .../analysis/containers/tableShow.jsx         |  40 ++++++
 .../sections/analysis/containers/treeShow.jsx |  40 ++++++
 web/client/src/sections/analysis/nav-item.jsx |   2 +
 web/client/src/sections/analysis/routes.js    |   8 +-
 7 files changed, 228 insertions(+), 3 deletions(-)
 create mode 100644 web/client/src/sections/analysis/containers/network.jsx
 create mode 100644 web/client/src/sections/analysis/containers/tableShow.jsx
 create mode 100644 web/client/src/sections/analysis/containers/treeShow.jsx

diff --git a/api/config.js b/api/config.js
index ebe11e7..099c5de 100644
--- a/api/config.js
+++ b/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,
diff --git a/web/client/src/sections/analysis/containers/index.js b/web/client/src/sections/analysis/containers/index.js
index eaa6303..bc1f685 100644
--- a/web/client/src/sections/analysis/containers/index.js
+++ b/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};
\ No newline at end of file
+import Network from './network.jsx';
+export { ProblemData, OperationData, WorkorderData,Network };
\ No newline at end of file
diff --git a/web/client/src/sections/analysis/containers/network.jsx b/web/client/src/sections/analysis/containers/network.jsx
new file mode 100644
index 0000000..4995c38
--- /dev/null
+++ b/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);
diff --git a/web/client/src/sections/analysis/containers/tableShow.jsx b/web/client/src/sections/analysis/containers/tableShow.jsx
new file mode 100644
index 0000000..5f84bc8
--- /dev/null
+++ b/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);
diff --git a/web/client/src/sections/analysis/containers/treeShow.jsx b/web/client/src/sections/analysis/containers/treeShow.jsx
new file mode 100644
index 0000000..f02713a
--- /dev/null
+++ b/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);
diff --git a/web/client/src/sections/analysis/nav-item.jsx b/web/client/src/sections/analysis/nav-item.jsx
index 68ea5ec..76213e6 100644
--- a/web/client/src/sections/analysis/nav-item.jsx
+++ b/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: '一图统揽'
                   }]
                },
                // {
diff --git a/web/client/src/sections/analysis/routes.js b/web/client/src/sections/analysis/routes.js
index 02475e9..b8b5ba5 100644
--- a/web/client/src/sections/analysis/routes.js
+++ b/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: '一图统揽',
             }]
          },
          {