Browse Source

结构物&巡检计划&用户弹窗样式

master
liujiangyong 1 year ago
parent
commit
66b82b93f6
  1. 6
      web/client/assets/images/show_map.svg
  2. 81
      web/client/src/layout/containers/layout/index.less
  3. 63
      web/client/src/sections/organization/components/userModal.js
  4. 234
      web/client/src/sections/patrolManage/components/planModal.js
  5. 66
      web/client/src/sections/projectRegime/components/projectAddModel.js

6
web/client/assets/images/show_map.svg

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="design-iconfont">
<g fill="none" fill-rule="evenodd">
<path d="M0,2.99610022 C0,1.34139976 1.33425951,0 2.99610022,0 L29.0038998,0 C30.6586002,0 32,1.33425951 32,2.99610022 L32,29.0038998 C32,30.6586002 30.6657405,32 29.0038998,32 L2.99610022,32 C1.34139976,32 0,30.6657405 0,29.0038998 L0,2.99610022 Z" fill="#006BE3"/>
<path d="M7,0 C2.72759022,0 0,3.32739357 0,7.45039491 C0,11.5733963 5.9580908,17.5 7,17.5 C8.0419092,17.5 14,11.57452 14,7.45039491 C14,3.32626983 11.2712456,0 7,0 Z M7,9.70349323 C5.3161069,9.7016319 3.95236417,8.38287457 3.95343444,6.75742446 C3.95450596,5.13197435 5.31998525,3.81489247 7.00387945,3.8150986 C8.68777364,3.81530473 10.0529068,5.13272087 10.0535515,6.75817119 C10.0541707,7.53978891 9.73254562,8.28951637 9.15965864,8.84188738 C8.58677167,9.3942584 7.80971987,9.70386249 7,9.70236949 L7,9.70349323 Z" transform="translate(9 7)" fill="#FFF" fill-rule="nonzero"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 992 B

81
web/client/src/layout/containers/layout/index.less

@ -20,11 +20,92 @@
.ant-pagination-item {
border-color: #fff;
}
.ant-pagination-item-active {
border-color: #EAF2FF;
background: #EAF2FF;
}
.ant-pagination-item-link {
border-color: #fff !important;
}
}
.global-modal {
.ant-modal-footer {
text-align: center;
.ant-btn {
margin: 0 19px !important;
border-radius: 3px;
}
.ant-btn-primary {
background: #006BE3;
border-color: #006BE3;
}
.ant-btn-primary:hover {
background: #1890ff;
border-color: #1890ff;
}
}
.ant-form-item-control-input {
background-color: #F9F9F9;
border-radius: 3px;
}
.ant-select-disabled,
.ant-input-disabled,
.ant-picker.ant-picker-disabled {
background-color: #e5e5e5 !important;
}
.ant-input-group-addon {
border: none;
background-color: #006BE3;
.ant-select-selection-item {
color: #fff;
}
.ant-select-selection-item::after {
color: #fff;
}
}
}
.global-modal-form {
.ant-modal-footer div {
justify-content: center !important;
.ant-btn {
margin: 0 19px !important;
border-radius: 3px;
}
.ant-btn-primary {
background: #006BE3;
border-color: #006BE3;
}
.ant-btn-primary:hover {
background: #1890ff;
border-color: #1890ff;
}
}
.ant-input-affix-wrapper {
border: none;
background-color: #F9F9F9;
.ant-input {
background-color: #F9F9F9;
}
}
.ant-select-selector {
border: none !important;
background-color: #F9F9F9 !important;
}
}

63
web/client/src/sections/organization/components/userModal.js

@ -1,10 +1,10 @@
import React from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Modal, TreeSelect, message } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect ,ProFormSelect} from '@ant-design/pro-form';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect, ProFormSelect } from '@ant-design/pro-form';
const UserModal = (props) => {
const { visible, modalType, depData, onVisibleChange, onConfirm, editData ,tableList} = props
const { visible, modalType, depData, onVisibleChange, onConfirm, editData, tableList } = props
const reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
const onFinish = (values) => {
if (onConfirm) {
@ -20,6 +20,12 @@ const UserModal = (props) => {
return (
<Spin spinning={false}>
<ModalForm
modalProps={{
className: "global-modal-form",
}}
layout="horizontal"
grid={true}
width={800}
title={modalType == 'edit' ? '编辑用户' : '新建用户'}
visible={visible}
onVisibleChange={onVisibleChange}
@ -40,16 +46,17 @@ const UserModal = (props) => {
<ProForm.Group>
<ProFormText
name={['contract', 'name']}
colProps={{ md: 12, xl: 12 }}
maxLength={24}
width="md"
label="姓名"
required
placeholder="请输入姓名"
rules={[{ required: true, message: '请输入姓名' }]}
bordered={false}
/>
<ProFormText
name={['contract', 'phone']}
width="md"
colProps={{ md: 12, xl: 12 }}
label="用户名(手机号)"
required
fieldProps={{
@ -68,7 +75,7 @@ const UserModal = (props) => {
<ProFormTreeSelect
name={['contract', 'departmentId']}
placeholder="请选择所属部门"
width="md"
colProps={{ md: 12, xl: 12 }}
label="所属部门"
required
fieldNames={{
@ -98,7 +105,7 @@ const UserModal = (props) => {
/>
< ProFormText
name={['contract', 'post']}
width="md"
colProps={{ md: 12, xl: 12 }}
label="职位"
// required
placeholder="请输入职位"
@ -135,26 +142,26 @@ const UserModal = (props) => {
}}
expandedKeys={["title"]}
/> */}
<ProFormSelect
width="md"
label="关注结构物"
name={['contract', 'structure']}
mode="multiple"
// fieldProps={{//这里使用了select的onChange方法,必须使用这样的写法来进行调用onChange方法
// onChange:(val) => handleChange(val),
// }}
request={async () => {
console.log(tableList);
const opts = tableList?.map(i=>({label:i.name,value:i.id}))
return opts
}}
placeholder="请选择结构物"
rules={[{ required: true, message: '结构物不能为空' }]}
/>
<ProFormSelect
colProps={{ md: 12, xl: 12 }}
label="关注结构物"
name={['contract', 'structure']}
mode="multiple"
// fieldProps={{//这里使用了select的onChange方法,必须使用这样的写法来进行调用onChange方法
// onChange:(val) => handleChange(val),
// }}
request={async () => {
console.log(tableList);
const opts = tableList?.map(i => ({ label: i.name, value: i.id }))
return opts
}}
placeholder="请选择结构物"
rules={[{ required: true, message: '结构物不能为空' }]}
/>
<ProFormText
<ProFormText
name={['contract', 'email']}
width="md"
colProps={{ md: 12, xl: 12 }}
label="邮箱"
// required
placeholder="请输入邮箱"
@ -165,10 +172,9 @@ const UserModal = (props) => {
/>
</ProForm.Group>
<ProForm.Group>
{modalType == 'edit' ? null : <ProFormText.Password
name={['contract', 'password']}
width="md"
colProps={{ md: 12, xl: 12 }}
label="密码"
required
placeholder="请输入密码"
@ -180,12 +186,9 @@ const UserModal = (props) => {
{ min: 6, message: '请填写至少6位密码' },
]}
/>}
</ProForm.Group>
<ProForm.Group>
<ProFormSwitch
name={['contract', 'enable']}
width="md"
colProps={{ md: 12, xl: 12 }}
label="是否启用"
placeholder="请选择"
// defaultChecked

234
web/client/src/sections/patrolManage/components/planModal.js

@ -1,4 +1,5 @@
import { Button, Form, Input, Modal, Select, DatePicker } from 'antd';
import { Form, Input, Modal, Select, DatePicker } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { getUserList, getProjectList, positionList } from '../actions/plan';
@ -38,7 +39,7 @@ const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userLis
const userListIds = userList?.map(u => u.id);
const filterUsers = curRecord?.users?.filter(u => userListIds.includes(u.id));
const nextUserIds = filterUsers?.map(u => u.id);
form.setFieldsValue({
form.setFieldsValue({
userIds: nextUserIds,
userDept: [...new Set(filterUsers?.map(u => u.department?.name))].join()
});
@ -52,9 +53,10 @@ const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userLis
}, [structureList])
const selectAfter = (
<Select
defaultValue={curRecord?.frequency ? curRecord.frequency.substring(curRecord.frequency.length - 3, curRecord.frequency.length) : "次/天"}
<Select
defaultValue={curRecord?.frequency ? curRecord.frequency.substring(curRecord.frequency.length - 3, curRecord.frequency.length) : "次/天"}
onChange={value => setUnit(value)}
suffixIcon={<DownOutlined style={{color: '#fff'}} />}
>
<Option value="次/天">/</Option>
<Option value="次/周">/</Option>
@ -63,6 +65,8 @@ const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userLis
);
return (
<Modal
className="global-modal"
width={717}
visible={visible}
title={(type === 'view' ? '查看' : type === 'edit' ? '编辑' : '新增') + "巡检计划"}
okText="确定"
@ -97,8 +101,9 @@ const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userLis
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
labelAlign='right'
labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}
initialValues={{
...curRecord,
time: [moment(curRecord?.startTime), moment(curRecord?.endTime)],
@ -109,107 +114,132 @@ const PlanModal = ({ visible, onCreate, onCancel, dispatch, userLoading, userLis
}}
disabled={type === 'view'}
>
<Form.Item
name="structureId"
label="结构物名称"
rules={[
{ required: true, message: '请选择结构物' },
]}
>
<Select disabled={type === 'view'} options={struOpt} loading={struLoading} onChange={(projectId) => {
dispatch(positionList({ projectId })).then(res => {
if (res.success) {
setPoints(res.payload.data?.rows)
setPointOpt(res.payload.data?.rows[0]?.points?.map(p => ({ label: p.name, value: p.id })))
}
})
form.setFieldsValue({ userIds: [], userDept: [] });
setUserOpt(userList?.filter(f => f.structure?.includes(projectId))?.map(u => ({ label: u.name, value: u.id })))
}} />
</Form.Item>
<Form.Item
name="name"
label="巡检任务名称"
rules={[
{ required: true, message: '请输入巡检任务名称' },
]}
>
<Input disabled={type === 'view'} />
</Form.Item>
<Form.Item
name="way"
label="巡检方式"
rules={[
{ required: true, message: '请选择巡检方式' },
]}
initialValue='周期巡检'
>
<Select options={[{
label: '周期巡检',
value: '周期巡检'
}]} disabled />
</Form.Item>
<Form.Item
name="frequency"
label="巡检频次"
rules={[
{ required: true, message: '请选择巡检频次' },
]}
>
<Input addonAfter={selectAfter} disabled={type === 'view'} />
</Form.Item>
<Form.Item
name="templateId"
label="巡检模板"
rules={[
{ required: true, message: '请选择巡检模板' },
]}
>
<Select
disabled={type === 'view'}
options={patrolTemplate.map(t => {
return { label: t.name, value: t.id }
})}
loading={templateLoading}
/>
</Form.Item>
<Form.Item
name="time"
label="任务周期"
rules={[
{ required: true, message: '请选择任务周期' },
]}
>
<RangePicker disabled={type === 'view'} />
</Form.Item>
<Form.Item
name="points"
label="巡检点"
rules={[
{ required: true, message: '请选择巡检点' },
]}
>
<Select mode="multiple" options={pointOpt} disabled={!pointOpt || type === 'view'} />
</Form.Item>
<Form.Item
name="userIds"
label="巡检人员"
rules={[
{ required: true, message: '请选择巡检人员' },
]}
>
<Select mode="multiple" disabled={type === 'view'} options={userOpt} loading={userLoading} onChange={(values) => {
const selectUser = userList?.filter(u => values?.includes(u.id))
form.setFieldsValue({
userDept: [...new Set(selectUser?.map(u => u.department.name))].join()
});
}} />
</Form.Item>
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
<Form.Item
name="structureId"
label="结构物名称"
labelCol={{ span: 9 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择结构物' },
]}
>
<Select disabled={type === 'view'} bordered={false} options={struOpt} loading={struLoading} onChange={(projectId) => {
dispatch(positionList({ projectId })).then(res => {
if (res.success) {
setPoints(res.payload.data?.rows)
setPointOpt(res.payload.data?.rows[0]?.points?.map(p => ({ label: p.name, value: p.id })))
}
})
form.setFieldsValue({ userIds: [], userDept: [] });
setUserOpt(userList?.filter(f => f.structure?.includes(projectId))?.map(u => ({ label: u.name, value: u.id })))
}} />
</Form.Item>
<Form.Item
name="name"
label="巡检任务名称"
labelCol={{ span: 9 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请输入巡检任务名称' },
]}
>
<Input disabled={type === 'view'} bordered={false} />
</Form.Item>
</div>
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
<Form.Item
name="way"
label="巡检方式"
labelCol={{ span: 8 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择巡检方式' },
]}
initialValue='周期巡检'
>
<Select bordered={false} options={[{
label: '周期巡检',
value: '周期巡检'
}]} disabled />
</Form.Item>
<Form.Item
name="frequency"
label="巡检频次"
labelCol={{ span: 8 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择巡检频次' },
]}
>
<Input addonAfter={selectAfter} disabled={type === 'view'} bordered={false} />
</Form.Item>
</div>
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
<Form.Item
name="templateId"
label="巡检模板"
labelCol={{ span: 8 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择巡检模板' },
]}
>
<Select
bordered={false}
disabled={type === 'view'}
options={patrolTemplate.map(t => {
return { label: t.name, value: t.id }
})}
loading={templateLoading}
/>
</Form.Item>
<Form.Item
name="time"
label="任务周期"
labelCol={{ span: 8 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择任务周期' },
]}
>
<RangePicker disabled={type === 'view'} bordered={false} />
</Form.Item>
</div>
<div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
<Form.Item
name="points"
label="巡检点"
labelCol={{ span: 8 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择巡检点' },
]}
>
<Select mode="multiple" options={pointOpt} disabled={!pointOpt || type === 'view'} bordered={false} />
</Form.Item>
<Form.Item
name="userIds"
label="巡检人员"
labelCol={{ span: 8 }}
style={{ width: 330 }}
rules={[
{ required: true, message: '请选择巡检人员' },
]}
>
<Select mode="multiple" disabled={type === 'view'} bordered={false} options={userOpt} loading={userLoading} onChange={(values) => {
const selectUser = userList?.filter(u => values?.includes(u.id))
form.setFieldsValue({
userDept: [...new Set(selectUser?.map(u => u.department.name))].join()
});
}} />
</Form.Item>
</div>
<Form.Item
name="userDept"
label="巡检单位"
>
<Input disabled />
<Input disabled bordered={false} />
</Form.Item>
</Form>
</Modal >

66
web/client/src/sections/projectRegime/components/projectAddModel.js

@ -1,11 +1,11 @@
import React, { useState } from 'react';
import { Button, Form, Input, Modal, Select, DatePicker, Icon } from 'antd';
import { EnvironmentTwoTone } from '@ant-design/icons';
import { Form, Input, Modal, Select, Row, Col } from 'antd';
// import { EnvironmentTwoTone } from '@ant-design/icons';
const { TextArea } = Input;
import { connect } from 'react-redux';
import Uploads from '$components/Uploads';
import { useEffect } from 'react';
import moment from 'moment';
// import moment from 'moment';
const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, firmList }) => {
@ -34,7 +34,7 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
map: map
}); //构造地点查询类
function select (e) {
function select(e) {
if (e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name, function (status, result) {
@ -56,8 +56,9 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
return (
<Modal
className="global-modal"
title={modelData?.id ? '编辑项目' : '新建项目'}
width={600}
width={717}
open={true}
onOk={() => {
form.validateFields().then(v => {
@ -78,7 +79,7 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
style={{}}
form={form}
labelAlign='right'
labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}
labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}
onFinish={r => {
}}
initialValues={{
@ -90,24 +91,29 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
describe: modelData?.describe,
}}
>
<Form.Item label='结构物名称' name="name" style={{}}
initialValue={modelData?.name}
rules={[{ required: true, message: '请输入结构物名称' },]}
>
<Input placeholder="请输入结构物名称" allowClear />
</Form.Item>
<Form.Item label='结构物类型' name="type" style={{}}
initialValue={modelData?.type || '桥梁'}
// rules={[{ required: true, message: '请选择结构物类型' },]}
>
<Select allowClear
options={[
{ value: '桥梁', label: '桥梁' },
{ value: '隧道', label: '隧道' },
{ value: '管廊', label: '管廊' }]} />
</Form.Item>
<div style={{ position: 'relative', display: 'flex' }}>
<Form.Item label='结构物名称' labelCol={{ span: 9 }} name="name" style={{ width: 369 }}
initialValue={modelData?.name}
rules={[{ required: true, message: '请输入结构物名称' },]}
>
<Input placeholder="请输入结构物名称" allowClear bordered={false} />
</Form.Item>
<Form.Item label='结构物类型' labelCol={{ span: 9 }} name="type" style={{ width: 254 }}
initialValue={modelData?.type || '桥梁'}
// rules={[{ required: true, message: '请选择结构物类型' },]}
>
<Select
bordered={false}
allowClear
options={[
{ value: '桥梁', label: '桥梁' },
{ value: '隧道', label: '隧道' },
{ value: '管廊', label: '管廊' }]}
/>
</Form.Item>
</div>
<div style={{ position: 'relative' }}>
<Form.Item label="所在地区:" labelCol={{ span: 11 }} labelAlign='right' name="longitude" style={{ display: 'inline-block', width: 'calc(60% - 30px)', }}
<Form.Item label="所在地区:" labelCol={{ span: 9 }} labelAlign='right' name="longitude" style={{ display: 'inline-block', width: 'calc(60% - 50px)', }}
rules={[{ required: true, message: '', }, {
validator: (rule, value, callback) => {
const sjh = /^\d+$|^\d*\.\d+$/g;
@ -122,10 +128,10 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
}
}]}
>
<Input placeholder="经度支持数字" />
<Input placeholder="经度支持数字" bordered={false} />
</Form.Item>
~
<Form.Item name="latitude" style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
&nbsp;&nbsp;
<Form.Item name="latitude" style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
rules={[{ required: true, message: '', }, {
validator: (rule, value, callback) => {
const sjh = /^\d+$|^\d*\.\d+$/g;
@ -140,9 +146,9 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
}
}]}
>
<Input placeholder="维度支持数字" />
<Input placeholder="维度支持数字" bordered={false} />
</Form.Item>
<EnvironmentTwoTone style={{ position: 'absolute', top: 5, right: 27, fontSize: 22 }} onClick={() => {
<img src='/assets/images/show_map.svg' style={{ position: 'absolute', width: 28, top: 2, right: 47, cursor: 'pointer' }} onClick={() => {
setShowBaiduMap(!showBaiduMap)
}} />
</div>
@ -161,7 +167,7 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
<div id="container" style={{ width: '100%', height: '425px', marginBottom: '15px' }}></div>
</Form.Item>
<Form.Item name='describe' label="描述">
<TextArea />
<TextArea bordered={false} />
</Form.Item>
<Form.Item
label="结构物图片"
@ -193,7 +199,7 @@ const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, f
};
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

Loading…
Cancel
Save