From 3b7df35e97705ff70d1131192330558d2d2ab9f2 Mon Sep 17 00:00:00 2001
From: liujiangyong <liu.jiangyong@free-sun.com.cn>
Date: Tue, 16 May 2023 14:53:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=93=E6=9E=84=E7=89=A9=20&=20=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E6=88=90=E5=91=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/client/assets/images/search.svg           |   3 +
 web/client/index.html                         |   2 +-
 .../src/layout/containers/layout/index.js     |   4 +-
 .../src/layout/containers/layout/index.less   |  30 +-
 .../sections/organization/containers/user.js  | 259 +++++++++---------
 .../organization/containers/user.less         |  42 +++
 .../projectRegime/containers/information.js   |  78 +++---
 .../projectRegime/containers/information.less |  30 ++
 8 files changed, 281 insertions(+), 167 deletions(-)
 create mode 100644 web/client/assets/images/search.svg
 create mode 100644 web/client/src/sections/organization/containers/user.less
 create mode 100644 web/client/src/sections/projectRegime/containers/information.less
diff --git a/web/client/assets/images/search.svg b/web/client/assets/images/search.svg
new file mode 100644
index 0000000..c89ea3f
--- /dev/null
+++ 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>
diff --git a/web/client/index.html b/web/client/index.html
index 7c36869..dc88049 100644
--- 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 = {
diff --git a/web/client/src/layout/containers/layout/index.js b/web/client/src/layout/containers/layout/index.js
index 6b1dd47..87a87ae 100644
--- 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'
             }}>
diff --git a/web/client/src/layout/containers/layout/index.less b/web/client/src/layout/containers/layout/index.less
index d55219a..ce990b9 100644
--- 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';
\ No newline at end of file
+@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;
+//     }
+// }
\ No newline at end of file
diff --git a/web/client/src/sections/organization/containers/user.js b/web/client/src/sections/organization/containers/user.js
index 97ead25..5fabbe2 100644
--- 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();
@@ -32,16 +33,16 @@ const UserManage = (props) => {
         projectList()
     }, [])
 
-     const projectList = (obj) => {
-        
+    const projectList = (obj) => {
+
         dispatch(projectRegime.getProjectList()).then(res => {
-           // console.log(res)
-           if (res.success) {
-              settableList(res.payload.data?.rows)
-            //   setLimits(res.payload.data?.count)
-           }
+            // console.log(res)
+            if (res.success) {
+                settableList(res.payload.data?.rows)
+                //   setLimits(res.payload.data?.count)
+            }
         })
-     }
+    }
 
     useEffect(() => {
         if (depMessage.length) {
@@ -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,127 +210,129 @@ 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, }}>
-                        {
-                            user.username === "SuperAdmin" && <Button
-                                type="primary"
-                                key="primary"
-                                style={{ margin: '16px 0px' }}
-                                onClick={() => openDeptModal('create')}
-                            >新建部门</Button>
-                        }
-                        {
-                            depMessage.length ?
-                                <Tree
-                                    height={clientHeight - 95}
-                                    defaultExpandedKeys={[depMessage[0].id]}
-                                    selectedKeys={depSelectedKeys}
-                                    onSelect={(selectedKeys, e) => {
-                                        if (e.selected) {
-                                            setDepSelectedKeys(selectedKeys)
-                                            dispatch(getDepUser(selectedKeys[0]))
-                                        }
-                                    }}
-                                // treeData={depMessage}
-                                // fieldNames={{
-                                //     title: 'name',
-                                //     key: 'id',
-                                //     children: 'subordinate'
-                                // }}
-                                >
-                                    {
-                                        depMessage.map((s, index) => {
-                                            return <TreeNode title={renderTree(s, s.id)} key={s.id} >
-                                                {
-                                                    s.subordinate.map(k => {
-                                                        return <TreeNode title={renderTree(k, k.id)} key={k.id} onMouseOver={() => { setIShowIcon(k.id) }} onMouseOut={() => { setIShowIcon(null) }}>
-                                                        </TreeNode>
-                                                    })
-                                                }
-                                            </TreeNode>
-                                        })
-                                    }
-                                </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%" }}>
-                        <ProTable
-                            columns={columns}
-                            dataSource={depUser}
-                            style={{ width: "100% ", height: clientHeight - 95, overflow: "auto" }}
-                            rowSelection={{
-                                selectedRowKeys: rowSelected,
-                                onChange: (selectedRowKeys) => {
-                                    setRowSelected(selectedRowKeys);
 
-                                },
-                                getCheckboxProps: (record) => {
-                                    return {
-                                        disabled: record.username === 'SuperAdmin',
-                                    }
-                                },
-                            }}
-                            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>
-                    {
-                        deptModalVisible ?
-                            <DeptModal
-                                visible={deptModalVisible}
-                                onVisibleChange={setDeptModalVisible}
-                                modalType={deptModalType}
-                                onConfirm={onDeptConfirm}
-                                editData={deptModalRecord}
-                                depts={depMessage}
-                            />
-                            : ''
-                    }
+    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>
                     {
-                        depMessage.length && modalVisible ?
-                            <UserModal
-                                visible={modalVisible}
-                                onVisibleChange={setModalVisible}
-                                modalType={modalType}
-                                onConfirm={onConfirm}
-                                editData={{...modalRecord,structure:modalRecord?.structure||[]}}
-                                tableList={tableList}
-                            />
-                            : ''
+                        user.username === "SuperAdmin" && <Button
+                            type="primary"
+                            key="primary"
+                            onClick={() => openDeptModal('create')}
+                        >新建部门</Button>
                     }
-                    {pwdModalVisible ? <ResetPwd visible={pwdModalVisible}
-                        onVisibleChange={setPwdModalVisible}
-                        onConfirm={onPwdConfirm} /> : ''}
+                </div>
+                {
+                    depMessage.length ?
+                        <Tree
+                            style={{ width: 272 }}
+                            height={150}
+                            defaultExpandedKeys={[depMessage[0].id]}
+                            selectedKeys={depSelectedKeys}
+                            onSelect={(selectedKeys, e) => {
+                                if (e.selected) {
+                                    setDepSelectedKeys(selectedKeys)
+                                    dispatch(getDepUser(selectedKeys[0]))
+                                }
+                            }}
+                        // treeData={depMessage}
+                        // fieldNames={{
+                        //     title: 'name',
+                        //     key: 'id',
+                        //     children: 'subordinate'
+                        // }}
+                        >
+                            {
+                                depMessage.map((s, index) => {
+                                    return <TreeNode title={renderTree(s, s.id)} key={s.id} >
+                                        {
+                                            s.subordinate.map(k => {
+                                                return <TreeNode title={renderTree(k, k.id)} key={k.id} onMouseOver={() => { setIShowIcon(k.id) }} onMouseOut={() => { setIShowIcon(null) }}>
+                                                </TreeNode>
+                                            })
+                                        }
+                                    </TreeNode>
+                                })
+                            }
+                        </Tree> : ''
+                }
+            </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 - 371, overflow: "auto" }}
+                    rowSelection={{
+                        selectedRowKeys: rowSelected,
+                        onChange: (selectedRowKeys) => {
+                            setRowSelected(selectedRowKeys);
 
-                </Col>
-            </Row>
+                        },
+                        getCheckboxProps: (record) => {
+                            return {
+                                disabled: record.username === 'SuperAdmin',
+                            }
+                        },
+                    }}
+                    options={false}
+                    search={false}
+                    rowKey="id"
+                />
+            </div>
+            {
+                deptModalVisible ?
+                    <DeptModal
+                        visible={deptModalVisible}
+                        onVisibleChange={setDeptModalVisible}
+                        modalType={deptModalType}
+                        onConfirm={onDeptConfirm}
+                        editData={deptModalRecord}
+                        depts={depMessage}
+                    />
+                    : ''
+            }
+            {
+                depMessage.length && modalVisible ?
+                    <UserModal
+                        visible={modalVisible}
+                        onVisibleChange={setModalVisible}
+                        modalType={modalType}
+                        onConfirm={onConfirm}
+                        editData={{ ...modalRecord, structure: modalRecord?.structure || [] }}
+                        tableList={tableList}
+                    />
+                    : ''
+            }
+            {pwdModalVisible ? <ResetPwd visible={pwdModalVisible}
+                onVisibleChange={setPwdModalVisible}
+                onConfirm={onPwdConfirm} /> : ''}
         </Spin>
-    </div>
-
-    )
+    </>)
 }
 
 function mapStateToProps(state) {
diff --git a/web/client/src/sections/organization/containers/user.less b/web/client/src/sections/organization/containers/user.less
new file mode 100644
index 0000000..567fb35
--- /dev/null
+++ 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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/web/client/src/sections/projectRegime/containers/information.js b/web/client/src/sections/projectRegime/containers/information.js
index aa9eea0..dbaf57f 100644
--- 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,45 +132,51 @@ const Information = (props) => {
    ]
 
    return (
-      <>
-         <img src={selec} />
-         <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}>
-            <Form
-               style={{ display: 'flex', }}
-               onFinish={r => {
-                  projectList({ limit: 10, page: 0, ...r, companyId: companyID || r?.companyId })
-                  setQuery({ limit: 10, page: 0 });
-                  setSearch(r)
-               }}
-            >
-               <Form.Item
-                  label='结构物名称'
-                  name="name"
-                  style={{ marginRight: 16, minWidth: 180 }}
+      <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' }}
+                  onFinish={r => {
+                     projectList({ limit: 10, page: 0, ...r, companyId: companyID || r?.companyId })
+                     setQuery({ limit: 10, page: 0 });
+                     setSearch(r)
+                  }}
                >
-                  <Input placeholder="请输入结构物名称" allowClear />
-               </Form.Item>
-               <Form.Item wrapperCol={{}}>
-                  <Button type="primary" htmlType="submit">
-                     搜索
-                  </Button>
-               </Form.Item>
-            </Form>
-            <div style={{ display: 'flex' }}>
-               <Button type="primary" onClick={() => {
-                  setAddModel(true)
-               }}>新建结构物</Button>
-               {/* <Button type="primary" style={{ marginLeft: 20 }} onClick={() => {
+                  <Form.Item
+                     label='结构物名称'
+                     name="name"
+                     style={{ marginRight: 16, minWidth: 180 }}
+                  >
+                     <Input placeholder="请输入结构物名称" allowClear suffix={<img src='/assets/images/search.svg' style={{ width: 16 }} />} />
+                  </Form.Item>
+                  <Form.Item wrapperCol={{}}>
+                     <Button htmlType="submit">
+                        搜索
+                     </Button>
+                  </Form.Item>
+               </Form>
+               <div style={{ display: 'flex', marginLeft: 20 }}>
+                  <Button type="primary" onClick={() => {
+                     setAddModel(true)
+                  }}>新建结构物</Button>
+                  {/* <Button type="primary" style={{ marginLeft: 20 }} onClick={() => {
                   console.log(45513);
                   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>
    )
 }
 
diff --git a/web/client/src/sections/projectRegime/containers/information.less b/web/client/src/sections/projectRegime/containers/information.less
new file mode 100644
index 0000000..84ce4a1
--- /dev/null
+++ 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;
+}
\ No newline at end of file
