结构物 & 部门成员样式

2 years ago · 3b7df35e97
8 changed files with 281 additions and 167 deletions
--- a/web/client/assets/images/search.svg
+++ b/web/client/assets/images/search.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont">
+  <path d="M12.0506327,11.0902815 L15.8213146,14.8610273 C16.0670626,15.1290723 16.0582885,15.5430676 15.8014045,15.8004596 C15.5445206,16.0578516 15.1305504,16.0674368 14.862029,15.8222101 L11.0900932,12.0508373 C9.87809017,13.044408 8.3586841,13.5862707 6.79149082,13.5838392 C3.04087246,13.5838392 0,10.5429151 0,6.79160611 C0,3.04092408 3.04087246,0 6.79149082,0 C10.5427362,0 13.5836086,3.04092408 13.5836086,6.79160611 C13.5836086,8.42241921 13.0086643,9.91905545 12.0506327,11.0902815 Z M6.79149082,12.2251418 C9.79229878,12.2251418 12.2249343,9.79246501 12.2249343,6.79160611 C12.2249343,3.79074721 9.79229878,1.35807042 6.79149082,1.35807042 C3.79068287,1.35807042 1.35804737,3.79074721 1.35804737,6.79160611 C1.35804737,9.79246501 3.79068287,12.2251418 6.79149082,12.2251418 Z" fill="#646566" fill-rule="nonzero"/>
+</svg>
--- a/web/client/index.html
+++ b/web/client/index.html
@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <title></title>
-   <link rel="shortcut icon" href="/assets/images/logo.png">
+   <link rel="shortcut icon" href="/assets/images/logo.svg">
   <link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
   <script type="text/javascript">
      window._AMapSecurityConfig = {
--- a/web/client/src/layout/containers/layout/index.js
+++ b/web/client/src/layout/containers/layout/index.js
@ -94,8 +94,8 @@ const LayoutContainer = props => {
            </Layout.Sider>
            <Layout.Content id="page-content" style={{
               position: 'relative',
-               margin: '12px 12px 0px',
-               padding: '8px',
+               marginTop: '12px',
+               padding: '0px 20px 20px',
               height: clientHeight,
               background: '#F2F3F5'
            }}>
--- a/web/client/src/layout/containers/layout/index.less
+++ b/web/client/src/layout/containers/layout/index.less
@ -1,2 +1,30 @@
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
@import '~nprogress/nprogress.css';
+
+.global-main {
+    background: #FFFFFF;
+    box-shadow: 0 0 12px 2px #dcdee033;
+    border-radius: 2px;
+    padding: 16px;
+}
+
+.global-light-row {
+    background: #fff;
+}
+
+.global-dark-row {
+    background: #FAFCFF;
+}
+
+// .global-pagination {
+//     .ant-pagination-item {
+//         border-color: #fff;
+//     }
+//     .ant-pagination-item-active {
+//         border-color: #EAF2FF;
+//         background: #EAF2FF;
+//     }
+//     .ant-pagination-item-link {
+//         border-color: #fff !important;
+//     }
+// }
--- a/web/client/src/sections/organization/containers/user.js
+++ b/web/client/src/sections/organization/containers/user.js
@ -7,13 +7,14 @@ import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, c
 import UserModal from '../components/userModal';
 import ResetPwd from '../components/resetPwd';
 import DeptModal from '../components/deptModal';
+import './user.less';

 const TreeNode = Tree.TreeNode;

 const UserManage = (props) => {
    const user = JSON.parse(sessionStorage.getItem('user'));
    const [tableList, settableList] = useState([])
-    const { dispatch, loading, depMessage, depUser, clientHeight,actions } = props;
+    const { dispatch, loading, depMessage, depUser, clientHeight, actions } = props;
    // 部门
    const [deptModalVisible, setDeptModalVisible] = useState(false);
    const [deptModalType, setDeptModalType] = useState();
@ -186,11 +187,11 @@ const UserManage = (props) => {

    const renderTree = (item, id) => {
        // let cannotDel = item.users.length || item.subordinate?.filter(is => is.users.length).length;//自己下面有成员 或者下级部门下有成员 不能删除
-        return <div style={{ display: 'flex', width: '6vw', justifyContent: 'space-between' }}>
+        return <div style={{ display: 'flex', width: '10vw', justifyContent: 'space-between' }}>
            <Tooltip title={item.name}>
-                <div style={{ width: '70%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div>
+                <div style={{ width: '80%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div>
            </Tooltip>
-            <div style={{ width: '30%' }} >
+            <div style={{ width: '20%' }} >
                {
                    depSelectedKeys == id && user.username === "SuperAdmin" ?
                        <>
@ -209,24 +210,29 @@ const UserManage = (props) => {
            </div>
        </div>
    }
-console.log(tableList,'tableList')
-    return (<div >
-        <Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */>
-            <Row gutter={16} /* style={{ overflow: "scroll" }} */>
-                <Col flex="260px" style={{ height: '100%' }}>
-                    <Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24, }}>
+
+    return (<>
+        <Spin spinning={loading} style={{ height: clientHeight }}>
+            <div className='dep-box'>
+                <div className='top'>
+                    <div className='title'>
+                        <span className='line'></span>
+                        <span className='cn'>部门</span>
+                        <span className='en'>&nbsp;DEPARTMENT</span>
+                    </div>
                    {
                        user.username === "SuperAdmin" && <Button
                            type="primary"
                            key="primary"
-                                style={{ margin: '16px 0px' }}
                            onClick={() => openDeptModal('create')}
                        >新建部门</Button>
                    }
+                </div>
                {
                    depMessage.length ?
                        <Tree
-                                    height={clientHeight - 95}
+                            style={{ width: 272 }}
+                            height={150}
                            defaultExpandedKeys={[depMessage[0].id]}
                            selectedKeys={depSelectedKeys}
                            onSelect={(selectedKeys, e) => {
@ -256,15 +262,31 @@ console.log(tableList,'tableList')
                            }
                        </Tree> : ''
                }
-                    </Card>
-                </Col>
-
-                <Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}>
-                    <Card title="用户" bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}>
+            </div>
+            <div className='user-box'>
+                <div className='top' style={{ marginBottom: 19 }}>
+                    <div className='title'>
+                        <span className='line'></span>
+                        <span className='cn'>用户</span>
+                        <span className='en'>&nbsp;USER</span>
+                    </div>
+                    <div>
+                        <Button
+                            type="primary"
+                            key="primary"
+                            style={{ marginRight: 10 }}
+                            onClick={() => openModal('create')}
+                        >新建用户</Button>
+                        <Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button>
+                        <Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }}>
+                            <Button>批量删除</Button>
+                        </Popconfirm>
+                    </div>
+                </div>
                <ProTable
                    columns={columns}
                    dataSource={depUser}
-                            style={{ width: "100% ", height: clientHeight - 95, overflow: "auto" }}
+                    style={{ width: "100% ", height: clientHeight - 371, overflow: "auto" }}
                    rowSelection={{
                        selectedRowKeys: rowSelected,
                        onChange: (selectedRowKeys) => {
@ -280,22 +302,8 @@ console.log(tableList,'tableList')
                    options={false}
                    search={false}
                    rowKey="id"
-                            toolBarRender={() => [
-                                <span>
-                                    <Button
-                                        type="primary"
-                                        key="primary"
-                                        style={{ marginRight: 10 }}
-                                        onClick={() => openModal('create')}
-                                    >新建用户</Button>
-                                    <Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button>
-                                    <Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }}>
-                                        <Button>批量删除</Button>
-                                    </Popconfirm>
-                                </span>
-                            ]}
                />
-                    </Card>
+            </div>
            {
                deptModalVisible ?
                    <DeptModal
@ -315,7 +323,7 @@ console.log(tableList,'tableList')
                        onVisibleChange={setModalVisible}
                        modalType={modalType}
                        onConfirm={onConfirm}
-                                editData={{...modalRecord,structure:modalRecord?.structure||[]}}
+                        editData={{ ...modalRecord, structure: modalRecord?.structure || [] }}
                        tableList={tableList}
                    />
                    : ''
@ -323,13 +331,8 @@ console.log(tableList,'tableList')
            {pwdModalVisible ? <ResetPwd visible={pwdModalVisible}
                onVisibleChange={setPwdModalVisible}
                onConfirm={onPwdConfirm} /> : ''}
-
-                </Col>
-            </Row>
        </Spin>
-    </div>
-
-    )
+    </>)
 }

 function mapStateToProps(state) {
--- a/web/client/src/sections/organization/containers/user.less
+++ b/web/client/src/sections/organization/containers/user.less
@ -0,0 +1,42 @@
+.dep-box {
+    height: 213px;
+    background: #fff;
+    padding: 16px;
+    margin-bottom: 20px;
+}
+
+.user-box {
+    background: #fff;
+    padding: 16px;
+}
+
+.top {
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+        background-color: #fff;
+        display: inline-block;
+
+        .line {
+            display: inline-block;
+            width: 3px;
+            height: 20px;
+            background: #006BE3;
+        }
+
+        .cn {
+            font-family: YouSheBiaoTiHei;
+            font-size: 24px;
+            color: #101531;
+            margin-left: 11px;
+        }
+
+        .en {
+            font-family: D-DINExp-Italic;
+            font-weight: Italic;
+            font-size: 12px;
+            color: #969799;
+        }
+    }
+}
--- a/web/client/src/sections/projectRegime/containers/information.js
+++ b/web/client/src/sections/projectRegime/containers/information.js
@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Spin, Card, Form, Input, Select, Button, Table, Modal, Popconfirm, Tooltip } from 'antd';
-import moment from "moment";
+import { Form, Input,  Button, Table, Modal, Popconfirm } from 'antd';
 import '../style.less';
 import { push } from 'react-router-redux';
 import ProjectAddModel from '../components/projectAddModel'
-import { Model } from 'echarts';
+import './information.less';


 const Information = (props) => {
@ -22,7 +21,6 @@ const Information = (props) => {
   const [pictureUrl, setPictureUrl] = useState()
   const [companyID, setCompanyId] = useState('')
   const [select, setSelect] = useState([])
-   const [selec, setSelec] = useState()
   var QRCode = require('qrcode')


@ -100,7 +98,6 @@ const Information = (props) => {
                     setAddModel(true)
                     setModelData(record)
                  }}
-
                  >编辑</Button>
                  <Popconfirm
                     title={<div style={{ width: 180 }}>删除此结构物后，与结构物对应的点位、巡检计划、巡检记录也会删除，是否确认删除？</div>}
@ -135,11 +132,16 @@ const Information = (props) => {
   ]

   return (
-      <>
-         <img src={selec} />
-         <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}>
+      <div className='global-main'>
+         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <div className='title'>
+               <span className='line'></span>
+               <span className='cn'>结构物</span>
+               <span className='en'>&nbsp;Structure</span>
+            </div>
+            <div className='flex-end'>
               <Form
-               style={{ display: 'flex', }}
+                  style={{ display: 'flex' }}
                  onFinish={r => {
                     projectList({ limit: 10, page: 0, ...r, companyId: companyID || r?.companyId })
                     setQuery({ limit: 10, page: 0 });
@ -151,15 +153,15 @@ const Information = (props) => {
                     name="name"
                     style={{ marginRight: 16, minWidth: 180 }}
                  >
-                  <Input placeholder="请输入结构物名称" allowClear />
+                     <Input placeholder="请输入结构物名称" allowClear suffix={<img src='/assets/images/search.svg' style={{ width: 16 }} />} />
                  </Form.Item>
                  <Form.Item wrapperCol={{}}>
-                  <Button type="primary" htmlType="submit">
+                     <Button htmlType="submit">
                        搜索
                     </Button>
                  </Form.Item>
               </Form>
-            <div style={{ display: 'flex' }}>
+               <div style={{ display: 'flex', marginLeft: 20 }}>
                  <Button type="primary" onClick={() => {
                     setAddModel(true)
                  }}>新建结构物</Button>
@ -168,12 +170,13 @@ const Information = (props) => {
                  setAddModel(true)
               }}>一键生成二维码</Button> */}
               </div>
-
+            </div>
         </div>
         <Table
            columns={columns}
            dataSource={tableList}
            pagination={{
+               className: 'global-pagination',
               current: query.page + 1,
               total: limits,
               showSizeChanger: true,
@ -194,6 +197,11 @@ const Information = (props) => {
                  console.log(selectedRowKeys, selectedRows);
               }
            }}
+            rowClassName={(record, index) => {
+               let className = 'global-light-row';
+               if (index % 2 === 1) className = 'global-dark-row';
+               return className;
+            }}
         />
         {
            <Modal
@ -227,7 +235,7 @@ const Information = (props) => {
                  }}
               /> : ""
         }
-      </>
+      </div>
   )
 }

--- a/web/client/src/sections/projectRegime/containers/information.less
+++ b/web/client/src/sections/projectRegime/containers/information.less
@ -0,0 +1,30 @@
+.title {
+    background-color: #fff;
+    display: inline-block;
+
+    .line {
+        display: inline-block;
+        width: 3px;
+        height: 20px;
+        background: #006BE3;
+    }
+
+    .cn {
+        font-family: YouSheBiaoTiHei;
+        font-size: 24px;
+        color: #101531;
+        margin-left: 11px;
+    }
+
+    .en {
+        font-family: D-DINExp-Italic;
+        font-weight: Italic;
+        font-size: 12px;
+        color: #969799;
+    }
+}
+
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}