Commit 82315916 authored by 王海涛's avatar 王海涛

江西电建

parent 01df0c6b
...@@ -24,11 +24,12 @@ class App extends Component { ...@@ -24,11 +24,12 @@ class App extends Component {
const ConvertorView3DRoot = getSketchCompnents('convertorView3DRoot'); const ConvertorView3DRoot = getSketchCompnents('convertorView3DRoot');
const PanoramicLeft = getSketchCompnents('panoramicLeft'); const PanoramicLeft = getSketchCompnents('panoramicLeft');
const PanoramicRight = getSketchCompnents('panoramicRight'); const PanoramicRight = getSketchCompnents('panoramicRight');
const ElecManageRoot = getSketchCompnents('elecManageRoot');
return ( return (
<div> <div>
{/* <PanoramicLeft /> */} {/* <PanoramicLeft /> */}
<ConvertorView3DRoot /> <ElecManageRoot />
{/* <PanoramicRight /> */} {/* <PanoramicRight /> */}
</div> </div>
); );
......
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
};
import ElecManageRoot from './view/peopleManage';
export default {
key: 'elecManageRoot',
component: ElecManageRoot
};
@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;
}
}
@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;
}
}
import React, { Component } from 'react';
import { Select, Button, Form, Input, Row, Col, Upload, Icon, message } from 'amos-framework';
import { Table } from 'amos-antd';
import './company.scss';
const Option = Select.Option;
const FormItem = Form.Item;
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
class companyManage extends Component {
constructor(props) {
super(props);
this.state = {
form: {
name: '',
cantact: '',
phone: '',
telephone: '',
servicePhone: '',
website: '',
email: '',
area: '',
introduce: '',
code: '',
identifier: '',
type: '',
delegate: '',
operatePeriod: '',
issueDate: '',
registerAuthority: '',
residence: '',
businessScope: '',
logoUrl: ''
},
addVisible: false,
companyData: [
{
order: '1',
order1: '1',
order2: '上海市山水田园工程建设有限公司',
order3: '王飞鸿',
order4: '911103026892022180',
order5: '王小二',
order6: '18092841111',
order7: '西安市',
order8: '1'
}
],
rules: {
name: [
{ required: true, message: '请输入活动名称' },
{ min: 5, message: '长度不够!' }
]
}
};
}
onChange = (key, e) => {
const value = e.target.value;
const newForm = Object.assign({}, this.state.form, { [key]: value });
this.setState({
form: newForm
});
}
onChanges = (value, item) => {
console.log(value, item);
}
handleAddCompany = () => {
console.log('888');
this.setState({ addVisible: true });
}
beforeUpload = (file) => {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.danger('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.danger('Image must smaller than 2MB!');
}
return isJPG && isLt2M;
}
handleChange = (info) => {
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
}
}
render() {
const { companyData, addVisible, form, rules, logoUrl } = this.state;
const columns = [
{
title: '序号',
dataIndex: 'order',
key: 'order'
},
{
title: '企业LOGO',
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',
render: () => {
return <Button onClick={() => this.handleAddCompany()}>查看</Button>;
}
}
];
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
const wrapperCol = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 14, offset: 4 }
}
};
return (
<div className="company-container">
<div className="company-title">安全作业执行清单</div>
<div className="list-search">
<div className="search-condition">
<div >
<span>企业名称:</span>
<Select onChange={this.onChanges} defaultValue="1">
<Option>请选择</Option>
<Option value="0">张三</Option>
<Option value="1">李四</Option>
<Option value="2">王五</Option>
</Select>
</div>
<div>
<span>统一社会信用代码:</span>
<Select onChange={this.onChanges} defaultValue="1">
<Option>请选择</Option>
<Option value="0">张三</Option>
<Option value="1">李四</Option>
<Option value="2">王五</Option>
</Select>
</div>
<div>
<span>地区:</span>
<Select onChange={this.onChanges} defaultValue="1">
<Option>请选择</Option>
<Option value="0">张三</Option>
<Option value="1">李四</Option>
<Option value="2">王五</Option>
</Select>
</div>
</div>
<div className="">
<Icon icon="add-noborder" style={{ fontSize: 16, color: '#08c' }} />&nbsp;
<Icon icon="edit" style={{ fontSize: 16, color: '#08c' }} />&nbsp;
<Icon icon="delete" style={{ fontSize: 18, color: '#08c' }} />&nbsp;
<Icon icon="filter" style={{ fontSize: 16, color: '#08c' }} /> 筛
</div>
</div>
<Table
columns={columns}
dataSource={companyData}
/>
<div className="add-company" style={{ display: !addVisible ? 'none' : 'block' }}>
<Form rules={rules} model={form}>
<div>企业基本信息</div>
<Row>
<Col span={12}>
<FormItem label={<span>企业名称</span>} field="name" {...formItemLayout}>
<Input
value={form.name}
placeholder="输入"
onChange={(e) => this.onChange('name', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>联系人</span>} field="contact" {...formItemLayout}>
<Input
value={form.cantact}
placeholder="输入"
onChange={(e) => this.onChange('cantact', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>手机号码</span>} field="phone" {...formItemLayout}>
<Input
value={form.phone}
placeholder="输入"
onChange={(e) => this.onChange('phone', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>固定号码</span>} field="telephone" {...formItemLayout}>
<Input
value={form.telephone}
placeholder="输入"
onChange={(e) => this.onChange('telephone', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>客服电话</span>} field="servicePhone" {...formItemLayout}>
<Input
value={form.servicePhone}
placeholder="输入"
onChange={(e) => this.onChange('servicePhone', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>网址</span>} field="website" {...formItemLayout}>
<Input
value={form.website}
placeholder="输入"
onChange={(e) => this.onChange('website', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>邮箱</span>} field="email" {...formItemLayout}>
<Input
value={form.email}
placeholder="输入"
onChange={(e) => this.onChange('email', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>地区</span>} field="area" {...formItemLayout}>
<Input
value={form.area}
placeholder="输入"
onChange={(e) => this.onChange('area', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>简介</span>} field="introduce" {...formItemLayout}>
<Input.TextArea
rows={4}
disableResize
value={form.introduce}
placeholder="输入"
onChange={(e) => this.onChange('introduce', e)}
/>
</FormItem>
</Col>
</Row>
<div>企业工商信息</div>
<Row>
<Col span={12}>
<FormItem label={<span>统一社会信用代码</span>} field="code" {...formItemLayout}>
<Input
value={form.code}
placeholder="输入"
onChange={(e) => this.onChange('code', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>编号</span>} field="identifier" {...formItemLayout}>
<Input
value={form.identifier}
placeholder="输入"
onChange={(e) => this.onChange('identifier', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>类型</span>} field="type" {...formItemLayout}>
<Input
value={form.type}
placeholder="输入"
onChange={(e) => this.onChange('type', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>法定代表人</span>} field="delegate" {...formItemLayout}>
<Input
value={form.delegate}
placeholder="输入"
onChange={(e) => this.onChange('delegate', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>注册资本</span>} field="type" {...formItemLayout}>
<Input
value={form.type}
placeholder="输入"
onChange={(e) => this.onChange('type', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>成立日期</span>} field="delegate" {...formItemLayout}>
<Input
value={form.delegate}
placeholder="输入"
onChange={(e) => this.onChange('delegate', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>营业期限</span>} field="operatePeriod" {...formItemLayout}>
<Input
value={form.operatePeriod}
placeholder="输入"
onChange={(e) => this.onChange('operatePeriod', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>发证日期</span>} field="issueDate" {...formItemLayout}>
<Input
value={form.issueDate}
placeholder="输入"
onChange={(e) => this.onChange('issueDate', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>登记机关</span>} field="registerAuthority" {...formItemLayout}>
<Input
value={form.registerAuthority}
placeholder="输入"
onChange={(e) => this.onChange('registerAuthority', e)}
/>
</FormItem>
</Col>
<Col span={12}>
<FormItem label={<span>住所</span>} field="residence" {...formItemLayout}>
<Input
value={form.residence}
placeholder="输入"
onChange={(e) => this.onChange('residence', e)}
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem label={<span>经营范围</span>} field="businessScope" {...formItemLayout}>
<Input.TextArea
rows={4}
disableResize
value={form.businessScope}
placeholder="输入"
onChange={(e) => this.onChange('businessScope', e)}
/>
</FormItem>
</Col>
</Row>
<div>企业LOGO</div>
<Row>
<Col span={12}>
<Upload
className="avatar-uploader"
name="avatar"
showUploadList={false}
action="http://localhost:3100/file/upload"
beforeUpload={this.beforeUpload}
onChange={this.handleChange}
>
{
logoUrl ?
<img src={logoUrl} alt="" className="avatar" /> :
<Icon icon="plus" className="avatar-uploader-trigger" />
}
</Upload>
</Col>
</Row>
</Form>
</div>
</div>
);
}
}
export default companyManage;
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;
@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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment