feat(comp-opericon, comp-projectanalysis): 曲线选择，个人账号、管理员下拉菜单

增加：工程分析主页面曲线选择功能；增加：个人账号、管理员下拉菜单选择
LGDHuaOPER · Jan 21, 2019 · 70f5a13 · 70f5a13
1 parent e9f44b6
commit 70f5a13
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -94,6 +94,7 @@ data_analysis-React
 - `2019/01/21`
 	- 版本回退：删除V1.0.0，回退至`1d3ba909a7fcc10aeb404f5b872151c8457c7d37`
     - 新分支：V1.0.0
+    - 增加：工程分析主页面曲线选择功能；增加：个人账号、管理员下拉菜单选择
     
 ## 生产环境依赖或第三方库
 - `antd` `3.12.1`

diff --git a/app/component/common/OperIcon.jsx b/app/component/common/OperIcon.jsx
@@ -1,10 +1,34 @@
 import React from 'react';
-import { Icon, Row, Col, Divider, Input } from 'antd';
+import { Icon, Row, Col, Divider, Input, Menu, Dropdown } from 'antd';
 import _ from 'lodash';
 import myLifeCircle from '../../public/js/myLifeCircle';
 import eventProxy from '../../public/js/eventProxy';
 
 const Search = Input.Search;
+const menu = (
+  <Menu>
+    <Menu.SubMenu
+      key="UserSubMenu"
+      title={
+        <span>
+          <Icon type="smile" /> <span>Admin</span>
+        </span>
+      }
+    >
+      <Menu.Item key="User">
+        <a rel="noopener noreferrer" href="User.html">
+          <Icon type="setting" /> <span>个人账号</span>
+        </a>
+      </Menu.Item>
+    </Menu.SubMenu>
+    <Menu.Divider />
+    <Menu.Item key="Admin">
+      <a rel="noopener noreferrer" href="Admin.html">
+        <Icon type="user" /> <span>管理员</span>
+      </a>
+    </Menu.Item>
+  </Menu>
+);
 
 class OperIcon extends React.Component {
   /*
@@ -74,7 +98,9 @@ class OperIcon extends React.Component {
             <Divider type="vertical" />
           </Col>
           <Col span={1}>
-            <Icon style={{ fontSize: 22, cursor: 'pointer' }} type="user" title="账户信息与管理员" />
+            <Dropdown overlay={menu} placement="bottomRight">
+              <Icon style={{ fontSize: 22, cursor: 'pointer' }} type="user" title="账户信息与管理员" />
+            </Dropdown>
           </Col>
           <Col span={1}>
             <Divider type="vertical" />
@@ -88,7 +114,9 @@ class OperIcon extends React.Component {
       return (
         <Row style={{ height: 40, lineHeight: 40 }} type="flex" justify="end" align="middle">
           <Col span={1}>
-            <Icon style={{ fontSize: 22, cursor: 'pointer' }} type="user" title="账户信息与管理员" />
+            <Dropdown overlay={menu} placement="bottomRight">
+              <Icon style={{ fontSize: 22, cursor: 'pointer' }} type="user" title="账户信息与管理员" />
+            </Dropdown>
           </Col>
           <Col span={1}>
             <Divider type="vertical" />

diff --git a/app/component/projectAnalysis/Index.jsx b/app/component/projectAnalysis/Index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Breadcrumb } from 'antd';
+import { Breadcrumb, Collapse, List, Tag } from 'antd';
 import _ from 'lodash';
 import dayjs from 'dayjs';
 // import relativeTime from 'dayjs/plugin/relativeTime';
@@ -13,6 +13,8 @@ import DataTable from '../dataTable/Index';
 import '../../public/css/libs/react-split-pane.css';
 import '../../public/css/projectAnalysis.pcss';
 
+const Panel = Collapse.Panel;
+
 const routes = [
   {
     path: 'index',
@@ -30,6 +32,34 @@ const routes = [
 
 const allTableData = _.cloneDeep(mockData.tableData);
 const allKeys = _.cloneDeep(mockData.allKeys);
+const dataSource = {
+  DC: [
+    {
+      title: 'ID-VD',
+      description: 'DC之ID-VD'
+    },
+    {
+      title: 'ID-VG',
+      description: 'DC之ID-VG'
+    }
+  ],
+  RTP: [
+    {
+      title: 'BTI',
+      description: 'RTP之BTI'
+    },
+    {
+      title: 'HCI',
+      description: 'RTP之HCI'
+    }
+  ],
+  'RF-S2P': [
+    {
+      title: 'SP2',
+      description: 'RF-S2P之SP2'
+    }
+  ]
+};
 
 myLifeCircle.setBaseOptions({
   'getDerivedStateFromProps.componentLastProps': 'componentLastProps'
@@ -53,7 +83,7 @@ class Index extends React.Component {
       quoteDataTable2: 'projectAnalysis2',
       outSplitPane: {
         defaultSize: 250,
-        minSize: 150,
+        minSize: 200,
         maxSize: 300
       },
       inSplitPane: {
@@ -153,7 +183,52 @@ class Index extends React.Component {
                   />
                 </div>
               </SplitPane>
-              <div>1</div>
+              <div>
+                <Collapse accordion>
+                  <Panel header="DC" key="DC">
+                    <List
+                      itemLayout="horizontal"
+                      dataSource={dataSource.DC}
+                      renderItem={(item) => (
+                        <List.Item actions={[<Tag color="orange">待开发</Tag>]}>
+                          <List.Item.Meta
+                            title={<a href="https://ant.design">{item.title}</a>}
+                            description={item.description}
+                          />
+                        </List.Item>
+                      )}
+                    />
+                  </Panel>
+                  <Panel header="RTP" key="RTP">
+                    <List
+                      itemLayout="horizontal"
+                      dataSource={dataSource.RTP}
+                      renderItem={(item) => (
+                        <List.Item actions={[<Tag color="orange">待开发</Tag>]}>
+                          <List.Item.Meta
+                            title={<a href="https://ant.design">{item.title}</a>}
+                            description={item.description}
+                          />
+                        </List.Item>
+                      )}
+                    />
+                  </Panel>
+                  <Panel header="RF-S2P" key="RF-S2P">
+                    <List
+                      itemLayout="horizontal"
+                      dataSource={dataSource['RF-S2P']}
+                      renderItem={(item) => (
+                        <List.Item actions={[<Tag color="green">已开发</Tag>]}>
+                          <List.Item.Meta
+                            title={<a href="https://ant.design">{item.title}</a>}
+                            description={item.description}
+                          />
+                        </List.Item>
+                      )}
+                    />
+                  </Panel>
+                </Collapse>
+              </div>
             </SplitPane>
           </div>
         </div>