江西电建

example/entry.js

@@ -24,11 +24,12 @@ class App extends Component {
     const ConvertorView3DRoot = getSketchCompnents('convertorView3DRoot');
     const PanoramicLeft = getSketchCompnents('panoramicLeft');
     const PanoramicRight = getSketchCompnents('panoramicRight');
+    const ElecManageRoot = getSketchCompnents('elecManageRoot');
 
     return (
       <div>
         {/* <PanoramicLeft /> */}
-        <ConvertorView3DRoot />
+        <ElecManageRoot />
         {/* <PanoramicRight /> */}
       </div>
     );

mods/components/elecBuilding/consts/imgConst.js

+const peopleImg = {
+  edit: require('./../assets/view/people/编辑@3x.png'),
+  delete: require('./../assets/view/people/删除@3x.png'),
+  imports: require('./../assets/view/people/导入@3x.png'),
+  exports: require('./../assets/view/people/导出@3x.png'),
+  add: require('./../assets/view/people/添加@3x.png'),
+  filter: require('./../assets/view/people/筛选@3x.png')
+};
+
+
+export default {
+  peopleImg
+};

mods/components/elecBuilding/index.js

+import ElecManageRoot from './view/peopleManage';
+
+
+export default {
+  key: 'elecManageRoot',
+  component: ElecManageRoot
+};

mods/components/elecBuilding/styles/common.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+
+@media screen and (min-width: 1600px) {
+  html {
+    font-size: 100px;
+  }
+
+  body {
+    font-size: 0.14rem;
+  }
+}
+
+@media screen and (min-width: 1366px) and (max-width: 1599px) {
+  html {
+    font-size: 75px;
+  }
+
+  body {
+    font-size: 0.13rem;
+  }
+
+}
+
+@media screen and (min-width: 1280px) and (max-width: 1365px) {
+  html {
+    font-size: 70px;
+  }
+
+  body {
+    font-size: 0.14rem;
+  }
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  html {
+    font-size: 55px;
+  }
+
+  body {
+    font-size: 0.17rem;
+  }
+}

mods/components/elecBuilding/view/companyManage/company.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+
+html body {
+  background: white;
+
+  .amos-select-options {
+    font-size: 16px;
+  }
+}
+
+.company-container {
+  font-size: 16px;
+
+  .company-title {
+    font-size: 30px;
+    width: vw(1920);
+    height: vh(71);
+    background-color: rgb(52, 95, 166);
+    line-height: vh(71);
+    font-weight: bolder;
+    padding-left: vw(20);
+    color: white;
+  }
+
+  .list-search {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px;
+
+    .search-condition {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: vw(1200);
+
+      .amos-select-dropdown {
+        width: vw(200);
+        font-size: 16px;
+      }
+    }
+  }
+
+  .add-company {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    overflow-x: hidden;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+    background: pink;
+    filter: alpha(opacity=60);
+    z-index: 999;
+    color: white;
+  }
+}
+

mods/components/elecBuilding/view/peopleManage/index.js

+import React, { Component } from 'react';
+import { Table } from 'amos-antd';
+import { Select, Button, Form, Input, Row, Col, Upload, Icon, message } from 'amos-framework';
+import images from './../../consts/imgConst';
+import './people.scss';
+
+/**
+ * PeopleManage
+ * 人员管理组件
+ * @class PeopleManage
+ * @extends {Component}
+ */
+
+
+class PeopleManage extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      addVisible: false,
+      selectedRowKeys: [],
+      peopleData: [
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+        {
+          order: '1',
+          order1: '1',
+          order2: '张无忌',
+          order3: '男',
+          order4: '6102922199203105712',
+          order5: '汉',
+          order6: '山东',
+          order7: '15111174773',
+          order8: '西安建工集团',
+          order9: '西安建工',
+          order10: '在岗',
+          order11: '一级',
+          order12: '94',
+          order13: 'zsf',
+          order14: '管理员'
+        },
+      ]
+    };
+  }
+
+  onSelectChange = (selectedRowKeys) => {
+    console.log('selectedRowKeys changed: ', selectedRowKeys);
+    this.setState({ selectedRowKeys });
+  }
+
+  handleAddPeople = () => {
+    this.setState({ addVisible: true });
+  }
+
+
+  render() {
+    const { peopleData, selectedRowKeys, addVisible } = this.state;
+    const columns = [
+      {
+        title: '序号',
+        dataIndex: 'order',
+        key: 'order'
+      },
+      {
+        title: '头像',
+        dataIndex: 'order1',
+        key: 'order1'
+      },
+      {
+        title: '姓名',
+        dataIndex: 'order2',
+        key: 'order2'
+      },
+      {
+        title: '性别',
+        dataIndex: 'order3',
+        key: 'order3'
+      },
+      {
+        title: '身份证号',
+        dataIndex: 'order4',
+        key: 'order4'
+      },
+      {
+        title: '民族',
+        dataIndex: 'order5',
+        key: 'order5'
+      },
+      {
+        title: '籍贯',
+        dataIndex: 'order6',
+        key: 'order6'
+      },
+      {
+        title: '联系电话',
+        dataIndex: 'order7',
+        key: 'order7'
+      },
+      {
+        title: '所属项目',
+        dataIndex: 'order8',
+        key: 'order8'
+      },
+      {
+        title: '分包商',
+        dataIndex: 'order9',
+        key: 'order9'
+      },
+      {
+        title: '在岗/不在岗',
+        dataIndex: 'order10',
+        key: 'order10'
+      },
+      {
+        title: '技能等级',
+        dataIndex: 'order11',
+        key: 'order11'
+      },
+      {
+        title: '考核成绩',
+        dataIndex: 'order12',
+        key: 'order12'
+      },
+      {
+        title: '系统账户',
+        dataIndex: 'order13',
+        key: 'order13'
+      },
+      {
+        title: '角色',
+        dataIndex: 'order14',
+        key: 'order14'
+      },
+      {
+        title: '操作',
+        dataIndex: 'order15',
+        key: 'order15',
+        render: () => {
+          return <Button onClick={() => this.handleAddCompany()}>查看</Button>;
+        }
+      }
+    ];
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: this.onSelectChange
+    };
+    return (
+      <div className="people-container">
+        <div className="people-operation">
+          <div className="people-add" onClick={this.handleAddPeople}>
+            <img src={images.peopleImg.add} alt='' />
+          </div>
+          <div >
+            <img src={images.peopleImg.edit} alt='' />
+          </div>
+          <div className="people-delete">
+            <img src={images.peopleImg.delete} alt='' />
+          </div>
+
+          <div className="people-imports">
+            <img src={images.peopleImg.imports} alt='' />
+          </div>
+          <div className="people-exports">
+            <img src={images.peopleImg.exports} alt='' />
+          </div>
+
+          <div className="people-filter">
+            <img src={images.peopleImg.filter} alt='' />
+          </div>
+          <span>筛选</span>
+        </div>
+        <div className="people-table">
+          <Table
+            rowSelection={rowSelection}
+            columns={columns}
+            dataSource={peopleData}
+          />
+        </div>
+        <div className="add-people" style={{ display: !addVisible ? 'none' : 'block' }}>66666</div>
+      </div>
+    );
+  }
+}
+
+export default PeopleManage;

mods/components/elecBuilding/view/peopleManage/people.scss

+@import './../../styles/common.scss';
+
+.people-container {
+  padding-top: vh(10);
+  font-size: 15px;
+
+  .people-operation {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: vh(42);
+    background-color: #f3f3f3;
+    border: solid 1px #eaeaea;
+    padding-right: vw(20);
+
+
+    .people-add {
+      border-radius: 4px 0 0 4px;
+    }
+
+    .people-delete {
+      border-radius: 4px 0 0 4px;
+    }
+
+    .people-exports {
+      border-radius: 4px 0 0 4px;
+    }
+
+    .people-filter {
+      border-radius: 4px 0 0 4px;
+      margin-left: 20px;
+    }
+
+    .people-imports {
+      border-radius: 4px 0 0 4px;
+      margin-left: 20px;
+    }
+
+    div {
+      height: vw(36);
+      width: vw(36);
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: solid 1px #eaeaea;
+
+      img {
+        width: 60%;
+        height: auto;
+      }
+    }
+  }
+
+  .add-people {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    overflow-x: hidden;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+    background: pink;
+    filter: alpha(opacity=60);
+    z-index: 999;
+    color: white;
+  }
+}