feat: 新增首页待办事项页面

.eslintrc

@@ -18,10 +18,6 @@
   },
   "plugins": ["react", "@typescript-eslint", "react-hooks"],
   "rules": {
-    // "react/jsx-uses-react": 2,
-    // "react/jsx-uses-vars": 2,
-    // "react/react-in-jsx-scope": 2,
-    // "react/jsx-filename-extension": [1, { "“extensions”": [".js", ".ts", ".jsx", ".tsx"] }],
     "semi": ["error", "never"],
     "no-multiple-empty-lines": [1, { "max": 2 }], //空行最多不能超过2行
     "comma-dangle": [2, "never"],
@@ -29,8 +25,6 @@
     "array-bracket-spacing": ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "react-hooks/rules-of-hooks": "error"
-    // "react-hooks/exhaustive-deps": "warn"
-    // "import/no-unresolved": [1, { "ignore": ["^@/"] }]
   },
   "settings": {
     "react": {

src/assets/css/common.scss

@@ -43,6 +43,9 @@
   color: $pi-yellow;
 }
 
+.pi-muted {
+  color: $pi-muted;
+}
 .pi-link-blue {
   color: $pi-blue;
   &:hover {
@@ -371,6 +374,9 @@
   display: flex;
   flex-direction: column;
   width: calc(100vw - 55px - 120px);
+  &.hide-menu {
+    width: calc(100vw - 55px);
+  }
   .wrap-content {
     height: calc(100vh - 34px);
     overflow-y: auto;

src/assets/css/variable.scss

@@ -1,6 +1,7 @@
 $pi-font-size: 12px !default;
 $pi-green: #28a745 !default;
 $pi-gray: #757575 !default;
+$pi-muted: #6c757d!default;
 $pi-light-gray: #bbbbbb !default;
 $pi-blue: #007bff !default;
 $pi-red: #dc3545 !default;

src/components/SvgIcon/index.tsx

@@ -1,5 +1,5 @@
 import { createFromIconfontCN } from '@ant-design/icons'
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2224180_1k48wjqufrd.js'
+  scriptUrl: '//at.alicdn.com/t/font_2224180_pese2ng2hhd.js'
 })
 export default IconFont

src/index.scss

@@ -5,6 +5,7 @@ body {
   padding: 0;
   margin: 0;
   font-size: 12px;
+  background: #e4e7ea;
   #root {
     width: 100%;
     height: 100%;

src/pages/Dashboard/index.module.scss

@@ -0,0 +1,74 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  margin: calc(1.5rem + 15px);
+  & > :first-child {
+    margin-bottom: 1rem;
+  }
+  .title {
+    font-size: 1.75rem;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  .downtime {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    color: #ffffff;
+    background-color: #dc3545;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+    .downtimeText {
+      margin: 0 0 0 10px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1.2;
+    }
+  }
+  .card {
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    background-color: #ffffff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+    .cardTitle {
+      font-weight: 500;
+      line-height: 1.2;
+      & > h5 {
+        margin-bottom: 0.75rem;
+        font-size: 1.25rem;
+      }
+      & > h6 {
+        font-size: 1rem;
+      }
+    }
+    .cardHeader {
+      & > :first-child {
+        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+      }
+
+      padding: 0.75rem 1.25rem;
+      margin-bottom: 0;
+      background-color: rgba(0, 0, 0, 0.03);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    }
+    .cardBody {
+      padding: 1.25rem;
+      & > ul {
+        padding-left: 0;
+        margin: 0;
+        list-style: none;
+        & > li {
+          padding-bottom: 1rem;
+          margin-bottom: 1rem;
+          border-bottom: 1px solid #dee2e6;
+        }
+      }
+    }
+  }
+}

src/pages/Dashboard/index.scss

@@ -0,0 +1,54 @@
+.badge {
+  padding: 0.25em 0.4em;
+  font-size: 100%;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.badge-success {
+  @extend .badge;
+
+  color: #ffffff;
+  background-color: #28a745;
+}
+
+.badge-info {
+  @extend .badge;
+
+  color: #ffffff;
+  background-color: #17a2b8;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.list-group {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  .list-group-item {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-right: 0;
+    border-left: 0;
+  }
+
+  & > :not(:first-child) {
+    border-top: 0;
+  }
+  & > :last-child {
+    border: none;
+  }
+}
+

src/pages/Dashboard/index.tsx

@@ -1,11 +1,116 @@
-import React, { Component } from 'react'
-export default class index extends Component {
-  render() {
-    return (
-      <div className="pi-flex-row">
-        {/* <Meun></Meun> */}
-        <h1>首页</h1>
+import Header from '@/components/Header'
+import React from 'react'
+import styles from './index.module.scss'
+import SvgIcon from '@/components/SvgIcon'
+import './index.scss'
+import { Link } from 'react-router-dom'
+import { ZhButton } from '@/components/Button'
+import { dayjsFormat } from '@/utils/util'
+import { userStore } from '@/store/mobx'
+import { Tooltip } from 'antd'
+const Index = () => {
+  return (
+    <div className="wrap-contaniner hide-menu">
+      <Header title="待办事项"></Header>
+      <div className={styles.content}>
+        <span>系统消息</span>
+        <h5 className={styles.title}>项目名称</h5>
+        <div className={styles.downtime}>
+          <SvgIcon type="xxh-wrench" style={{ fontSize: '1.5rem' }}></SvgIcon>
+          <p className={styles.downtimeText}>系统将于 2019年3月10日 14:09 开始停机维护，持续30分钟。造成不便敬请谅解。</p>
+        </div>
+        <div className="pi-justify-between">
+          <div className={[ styles.card, 'pi-flex-twice' ].join(' ')}>
+            <div className={styles.cardHeader}>
+              <span>需要你处理</span>
+            </div>
+            <div className={styles.cardBody}>
+              <ul>
+                <li className="pi-flex-column">
+                  <div className="pi-justify-between">
+                    <div>
+                      <span className={[ 'pi-pd-lr-15', 'badge-success' ].join(' ')}>质量巡检</span>
+                      <span className="pi-pd-lr-15">
+                        <span>WWUJ-1 </span>
+                        <Link to="/console/dashboard">施工质量事故</Link>
+                      </span>
+                    </div>
+                    <ZhButton size="small">审批</ZhButton>
+                  </div>
+                  <div className="pi-justify-between mt-1 ">
+                    <span>张三-监理一</span>
+                    <span>{dayjsFormat(new Date(), 'MM-DD HH:mm')}</span>
+                  </div>
+                </li>
+              </ul>
+              {/* <p className="pi-text-center pi-muted">暂时没有需要你处理的事项</p> */}
+            </div>
+          </div>
+          <div className={[ styles.card, 'pi-flex-twice', 'pi-mg-lr-30' ].join(' ')}>
+            <div className={styles.cardHeader}>
+              <span>需要你关注</span>
+            </div>
+            <div className={styles.cardBody}>
+              <ul>
+                <li className="pi-flex-column">
+                  <div className="pi-justify-start">
+                    <span className={[ 'pi-pd-lr-15', 'badge-success' ].join(' ')}>质量巡检</span>
+                    <span className="pi-pd-lr-15">
+                      <span>WWUJ-1 </span>
+                      <Link to="/console/dashboard" className="pi-mg-lr-5">
+                        施工质量事故
+                      </Link>
+                      <span>审批完成，待整改</span>
+                    </span>
+                  </div>
+                  <div className="pi-justify-between mt-1">
+                    <span>张三-监理一</span>
+                    <span>{dayjsFormat(new Date(), 'MM-DD HH:mm')}</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="pi-flex-sub pi-flex-column">
+            <div className={styles.card}>
+              <div className={styles.cardBody}>
+                <div className={styles.cardTitle}>
+                  <h5>纵横技术支持</h5>
+                  <h6 className="pi-muted">{userStore.userInfo.name}</h6>
+                </div>
+              </div>
+              <ul className="list-group">
+                <Tooltip title="腾讯QQ" placement="left">
+                  <li className="list-group-item">
+                    <SvgIcon type="xxh-qq1" style={{ fontSize: 14 }}></SvgIcon>
+                    <span className="pi-mg-left-5">914630468</span>
+                  </li>
+                </Tooltip>
+                <Tooltip title="手机号码" placement="left">
+                  <li className="list-group-item">
+                    <SvgIcon type="xxh-mobile-alt" style={{ fontSize: 14 }}></SvgIcon>
+                    <span className="pi-mg-left-5">15812644017</span>
+                  </li>
+                </Tooltip>
+                <Tooltip title="固定电话" placement="left">
+                  <li className="list-group-item">
+                    <SvgIcon type="xxh-phone-volume1" style={{ fontSize: 14 }}></SvgIcon>
+                    <span className="pi-mg-left-5">0756-3850891</span>
+                  </li>
+                </Tooltip>
+              </ul>
+            </div>
+            <div className={[ styles.card, 'mt-2' ].join(' ')}>
+              <div className={styles.cardBody}>
+                <span className="pi-link-blue">当前版本: 1.2.0</span>
+              </div>
+            </div>
+            <div></div>
+          </div>
+        </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
+
+export default Index

src/pages/Quality/List/index.module.scss

@@ -12,20 +12,6 @@
       background-color: #007bff;
     }
   }
-
-  // :global(.ant-table-thead .ant-table-cell) {
-  //   padding: 0.4rem;
-  //   text-align: center !important;
-  //   background-color: #e9ecef;
-  //   border-right: 1px solid #dee2e6;
-  //   border-bottom: 2px solid #dee2e6;
-  // }
-  // :global(.ant-table-tbody .ant-table-cell) {
-  //   padding: 0.4rem;
-  // }
-  // :global(.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th) {
-  //   border-right: 1px solid #dee2e6;
-  // }
 }
 
 .textBtn {

src/pages/Quality/List/index.scss

@@ -1,3 +0,0 @@
-.list-content {
-  width: calc(100vw - 55px);
-}

src/pages/Quality/List/index.tsx

@@ -12,7 +12,6 @@ import { useAliveController } from 'react-activation'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { apiContractList } from './api'
 import styles from './index.module.scss'
-import './index.scss'
 const List: React.FC<RouteComponentProps> = (props) => {
   const { clear } = useAliveController()
   useEffect(() => {
@@ -101,7 +100,7 @@ const List: React.FC<RouteComponentProps> = (props) => {
   )
 
   return (
-    <div className="list-content">
+    <div className="wrap-contaniner hide-menu">
       <Header>
         <Slot>
           <Dropdown overlay={menu}>

src/pages/Safe/List/index.module.scss

@@ -12,20 +12,6 @@
       background-color: #007bff;
     }
   }
-
-  // :global(.ant-table-thead .ant-table-cell) {
-  //   padding: 0.4rem;
-  //   text-align: center !important;
-  //   background-color: #e9ecef;
-  //   border-right: 1px solid #dee2e6;
-  //   border-bottom: 2px solid #dee2e6;
-  // }
-  // :global(.ant-table-tbody .ant-table-cell) {
-  //   padding: 0.4rem;
-  // }
-  // :global(.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th) {
-  //   border-right: 1px solid #dee2e6;
-  // }
 }
 
 .textBtn {

src/pages/Safe/List/index.scss

@@ -1,3 +0,0 @@
-.list-content {
-  width: calc(100vw - 55px);
-}

src/pages/Safe/List/index.tsx

@@ -12,7 +12,6 @@ import { useAliveController } from 'react-activation'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { apiContractList } from './api'
 import styles from './index.module.scss'
-import './index.scss'
 const List: React.FC<RouteComponentProps> = (props) => {
   const { clear } = useAliveController()
   useEffect(() => {
@@ -107,7 +106,7 @@ const List: React.FC<RouteComponentProps> = (props) => {
   )
 
   return (
-    <div className="list-content">
+    <div className="wrap-contaniner hide-menu">
       <Header>
         <Slot>
           <Dropdown overlay={menu}>

src/store/mobx/tender/index.ts

@@ -9,6 +9,11 @@ interface iTenderState {
   name: string
 }
 
+interface ProjectInfo {
+  name: string
+  code: string
+}
+
 interface AuthController {
   contract: iPermission
   quality: iPermission
@@ -20,6 +25,7 @@ class Tender {
     name: ''
   }
 
+  // @observable projectInfo:ProjectInfo = { name: '', code: '' }
   @observable permission:AuthController = {
     contract: { access: 0, add: 0, delete: 0 },
     quality: { access: 0, add: 0, delete: 0 },