Mark
- 
+
+ Pin
+ 
+ bell
+ 
+ Clock
+ 
+ phone book
+ 

组 74
- 
- 组 83
@@ -92,12 +104,6 @@

组 238
- 
- 组 164
@@ -116,12 +122,6 @@

组 266
- 
- 组 67
@@ -134,18 +134,6 @@

组 137
- 
- 组 108
- 
- 组 196
@@ -164,36 +152,12 @@

组 261
- 
- 组 253
- 
- 组 131
- 
- 组 57

组 18
- 
- 组 286
@@ -212,18 +176,6 @@

组 150
- 
- 组 284
- 
- 组 3
@@ -242,42 +194,6 @@

组 112
- 
- 组 63
- 
- 组 126
- 
- 组 110
- 
- 组 116
- 
- 组 4
- 
- 24gl-expand2
@@ -309,9 +225,9 @@
>@font-face {
font-family: 'iconfont';
src:
- url('iconfont.woff2?t=1709515058835') format('woff2'),
- url('iconfont.woff?t=1709515058835') format('woff'),
- url('iconfont.ttf?t=1709515058835') format('truetype');
+ url('iconfont.woff2?t=1709685340067') format('woff2'),
+ url('iconfont.woff?t=1709685340067') format('woff'),
+ url('iconfont.ttf?t=1709685340067') format('truetype');
}
第二步：定义使用 iconfont 的样式
@@ -338,11 +254,38 @@-
-
+
- Mark + Pin-.icon-Mark +.icon-Pin ++ + +
- + +
+ ++ bell ++.icon-bell ++- + +
+ ++ Clock ++.icon-Clock ++- + +
@@ -364,15 +307,6 @@+ phone book ++.icon-a-phonebook
- - + +
-
-
- - 组 74 --.icon-a-zu74 --
-
-
@@ -391,15 +325,6 @@
-
-
-
- - 组 238 --.icon-a-zu238 --
-
-
@@ -427,15 +352,6 @@
-
-
-
- - 组 266 --.icon-a-zu266 --
-
-
@@ -454,24 +370,6 @@
-
-
-
- - 组 137 --.icon-a-zu137 --
-
-
-
-
- - 组 108 --.icon-a-zu108 --
-
-
@@ -499,33 +397,6 @@
-
-
-
- - 组 261 --.icon-a-zu261 --
-
-
-
-
- - 组 253 --.icon-a-zu253 --
-
-
-
-
- - 组 131 --.icon-a-zu131 --
-
-
@@ -535,15 +406,6 @@
-
-
-
- - 组 18 --.icon-a-zu18 --
-
-
@@ -571,24 +433,6 @@
-
-
-
- - 组 150 --.icon-a-zu150 --
-
-
-
-
- - 组 284 --.icon-a-zu284 --
-
-
@@ -616,60 +460,6 @@
-
-
-
- - 组 112 --.icon-a-zu112 --
-
-
-
-
- - 组 63 --.icon-a-zu63 --
-
-
-
-
- - 组 126 --.icon-a-zu126 --
-
-
-
-
- - 组 110 --.icon-a-zu110 --
-
-
-
-
- - 组 116 --.icon-a-zu116 --
-
-
-
-
- - 组 4 --.icon-a-zu4 --
-
-
@@ -717,10 +507,34 @@
- -
+ +Mark-#icon-Mark+Pin+#icon-Pin+- + +
+ +bell+#icon-bell+- + +
+ +Clock+#icon-Clock+- + +
phone book+#icon-a-phonebook- @@ -739,14 +553,6 @@
-#icon-a-zu249- - -
-组 74-#icon-a-zu74-- - -
-组 238-#icon-a-zu238-- - -
-组 266-#icon-a-zu266-- - -
- -组 137-#icon-a-zu137-- - -
-组 108-#icon-a-zu108-- - -
- -组 261-#icon-a-zu261-- - -
- -组 253-#icon-a-zu253-- - -
-组 131-#icon-a-zu131-- - -
-组 18-#icon-a-zu18-- - -
- -组 150-#icon-a-zu150-- - -
-组 284-#icon-a-zu284-- - -
- -组 112-#icon-a-zu112-- - -
- -组 63-#icon-a-zu63-- - -
- -组 126-#icon-a-zu126-- - -
- -组 110-#icon-a-zu110-- - -
- -组 116-#icon-a-zu116-- - -
-组 4-#icon-a-zu4-) : ( 矿山安全生产标准化系统 （SMS） @@ -338,15 +398,16 @@ function Header(props) { {!props.matchLogin ? ( -) : null} diff --git a/src/layout/Main.js b/src/layout/Main.js index d2d9e13..f6fdd83 100644 --- a/src/layout/Main.js +++ b/src/layout/Main.js @@ -37,10 +37,14 @@ const MainLayout = (props) => { return (- + + + {/* style={{"color":"#f3eded"}} */} - - + {/* */} + {/* {props.login.user.NAME}({props.login.user.CODE}) - + */} -) diff --git a/src/layout/Sider.js b/src/layout/Sider.js index abfd672..7b09a66 100644 --- a/src/layout/Sider.js +++ b/src/layout/Sider.js @@ -18,9 +18,7 @@ import "./sider.less"; import MenuItem from "antd/lib/menu/MenuItem"; import SubMenu from "antd/lib/menu/SubMenu"; - const Sider = (props) => { - /** 菜单页展开与收起 */ const timer = useRef(-1); const handleExpandMenuShow = () => { @@ -47,13 +45,16 @@ const Sider = (props) => { setActiveMenu(null); props.history.push({ pathname: "/home" }); }; -const clickMenu = ()=>{ - collapsed===true?setCollapsed(false):setCollapsed(false) - - -} + const clickMenu = () => { + collapsed === true ? setCollapsed(false) : setCollapsed(false); + }; + const [mainSilder, setMainSilder] = useState(1); + const clickMainMenu = (index) => { + setMainSilder(index); + }; /** 子菜单路由 */ const navToMenu = (menu) => { + console.log("12312312312", menu); props.history.push({ pathname: `/main/${menu.ID}` }); }; @@ -72,6 +73,7 @@ const clickMenu = ()=>{ /** 已激活菜单 */ const [activeMenu, setActiveMenu] = useState(null); const handleActiveMenu = (menu) => { + console.log("111111"); setActiveMenu(menu); navToMenu(menu); }; @@ -157,173 +159,214 @@ const clickMenu = ()=>{ } }, [IS_MENU_SHRINK]); const [collapsed, setCollapsed] = useState(true); + const [MenuShow, setMenuShow] = useState(false); + const toggleCollapsed = () => { setCollapsed(!collapsed); }; - useEffect(()=>{ - if(collapsed == false) { + useEffect(() => { + if (collapsed == false) { setCollapsed(true); } - },[props.repost]) - // console.log(props.repost,'21312313213213123') + }, [props.repost]); + const menuCUR = topMenus.menus[mainSilder - 2]; /** 登录页隐藏 */ if (props.matchLogin) return null; - return (+-+ {matchLogin?'':} ++ {matchLogin?'':+}{props.children}+-+ +-); }; diff --git a/src/layout/header.less b/src/layout/header.less index 064cf6e..0eb6de5 100644 --- a/src/layout/header.less +++ b/src/layout/header.less @@ -13,6 +13,18 @@ .ant-modal { padding-bottom: 0; } + .headerInput { + .ant-input { + border: 1px solid #fff; + height: 38px; + } + .ant-input-affix-wrapper .ant-input:not(:first-child) { + padding-left: 40px; + } + .ant-input::placeholder { + color: #909399; + } + } .@{header-prefix} { // width: 100%; @@ -72,7 +84,7 @@ &-icon { font-size: 22px !important; - color: #606266 !important; //f3eded + color: #909399 !important; //f3eded cursor: pointer; } diff --git a/src/layout/main.less b/src/layout/main.less index 1385300..131c010 100644 --- a/src/layout/main.less +++ b/src/layout/main.less @@ -1,85 +1,92 @@ :global { - @main-prefix: main; - - .@{main-prefix} { - position : relative; - width : 100%; - height : 100%; - background-color: #f2f2f2; - - &.float { - .@{main-prefix}__body { - padding: 0; - } - } - - &__header { - position: absolute; - top : 0; - left : 0; - width : 100%; - height : 52px; - z-index : 999; - } - - &__body { - position: relative; - width : 100%; - height : 100%; - padding : 52px 0 0 82px; - display: flex; - flex-direction: row; - overflow: auto; - - &-sider { - // width : 256px; - height : ~'calc(100% - 52px)'; - position: fixed; - // top : 52px; - top:52px; - bottom: 0; - left : 0; - z-index : 998; - overflow: auto; - box-shadow : 0 0 8px rgba(0, 0, 0, 0.25); - - - } - &-sider ::-webkit-scrollbar { - display: none; - } - &-content { - width : 100%; - height: 100%; - flex:1 - } - } - - &__body2 { - position: relative; - width : 100%; - height : 100%; - // padding : 52px 0 0 76px; - - &-sider { - width : 76px; - height : ~'calc(100% - 52px)'; - position: absolute; - top : 52px; - left : 0; - z-index : 998; - } - &-content { - width : 100%; - height: 100%; - } - } - - &__backend { - position : relative; - width : 100%; - height : 100%; - padding-top: 52px; + @main-prefix: main; + + .@{main-prefix} { + position : relative; + width : 100%; + height : 100%; + background-color: #f4f7ff; + + &.float { + .@{main-prefix}__body { + padding: 0; } } - } \ No newline at end of file + + + + &__body { + // position: relative; + width : 100%; + height : 100%; + padding : 0px 0 0 100px; + display: flex; + flex-direction: row; + overflow: auto; + + &-right { + display: flex; + flex-direction: column; + flex: 1; + width: calc(100% - 100px); + } + + &-sider { + width : auto; + height : 100%; + position: fixed; + // top : 52px; + // top:52px; + bottom: 0; + left : 0; + z-index : 998; + overflow: auto; + box-shadow : 0 0 8px rgba(0, 0, 0, 0.25); + min-width: 90px; + border-radius: 10px; + + + } + &-sider ::-webkit-scrollbar { + display: none; + } + &-header { + width : 100%; + height : 52px; + // z-index : 999; + } + &-content { + width : 100%; + height: ~'calc(100% - 52px)'; + flex:1 + } + } + + &__body2 { + position: relative; + width : 100%; + height : 100%; + // padding : 52px 0 0 76px; + + &-sider { + width : 76px; + height : ~'calc(100% - 52px)'; + position: absolute; + top : 52px; + left : 0; + z-index : 998; + } + &-content { + width : 100%; + height: 100%; + } + } + + &__backend { + position : relative; + width : 100%; + height : 100%; + padding-top: 52px; + } + } +} \ No newline at end of file diff --git a/src/layout/sider.less b/src/layout/sider.less index 55e22cf..8ee16d2 100644 --- a/src/layout/sider.less +++ b/src/layout/sider.less @@ -1,373 +1,630 @@ :global { - @opacity-bg : #ffffff;//#f5f5f5菜单背景色 - @active-color: #0047FF; - @sider-prefix: sider; - .ant-menu-inline-collapsed { - .ant-menu-item { - padding: 5px 0px 5px 0px !important; - .anticon { + @opacity-bg: #55c596; //#f5f5f5菜单背景色 + @active-color: #0047ff; + @sider-prefix: sider; + .ant-menu-inline-collapsed { + .ant-menu-item { + padding: 5px 0px 5px 0px !important; + .anticon { font-size: 24px; display: flex; align-items: center; justify-content: center; } - } - - .ant-menu-submenu .ant-menu-submenu-title { - padding: 5px 0px 5px 0px !important; - .anticon { - font-size: 24px; - display: flex; - align-items: center; - justify-content: center; - } - } - } - .ant-menu-inline { - .ant-menu-submenu { - .ant-menu-submenu-title { - line-height: 30px; - height: 35px; - display: flex; - align-items: center; - } - } - } - .ant-menu-sub.ant-menu-inline{ - .ant-menu-submenu { - .ant-menu-submenu-title{ - line-height: 20px; - height: 30px; - display: flex; - align-items: center; - } - } - } - .ant-menu-sub.ant-menu-inline { - .ant-menu-item { - line-height: 18px; - height: 28px; - display: flex; - align-items: center; - } - } - .ant-menu-submenu-popup { - display: none; - } - .ant-menu-vertical { - border-right: 0px; - } - .ant-menu-inline { - border-right: 0px; - } - - .@{sider-prefix} { - position : relative; - width : 100%; - height : 100%; - // padding : 0 12px; - background-color: @opacity-bg; - transition : width .2s ease; - // box-shadow : 0 0 10px rgba(0, 0, 0, 0.25); - - &.shortMenuShow { - - height: 100%; - // overflow: auto; - // position: relative; - background-color: #ffffff; - // display: flex; - // flex-direction: row; + .ant-menu-submenu .ant-menu-submenu-title { + padding: 5px 0px 5px 0px !important; + .anticon { + font-size: 24px; + display: flex; + align-items: center; + justify-content: center; } - &.shortMenuShow_overflow { - width: 256; - overflow: auto; - height: 100%; - // width: ~'calc(100% - 12px)'; + } + } + .ant-menu-inline { + .ant-menu-submenu { + .ant-menu-submenu-title { + line-height: 30px; + height: 35px; + display: flex; + align-items: center; } - &.shortMenuShow_overflow::-webkit-scrollbar { + } + } + .ant-menu-sub.ant-menu-inline { + .ant-menu-submenu { + .ant-menu-submenu-title { + line-height: 20px; + height: 30px; + display: flex; + align-items: center; + } + } + } + .ant-menu-sub.ant-menu-inline { + .ant-menu-item { + line-height: 18px; + height: 28px; + display: flex; + align-items: center; + } + } + .ant-menu-submenu-popup { + display: none; + } + .ant-menu-vertical { + border-right: 0px; + } + .ant-menu-inline { + border-right: 0px; + } + + .@{sider-prefix} { + position: relative; + width: 100%; + height: 100%; + // padding : 0 12px; + // background-color: @opacity-bg; + transition: width 0.2s ease; + overflow: hidden; + // overflow: auto; + // box-shadow : 0 0 10px rgba(0, 0, 0, 0.25); + + &.shortMenuShow { + background-color: #ffffff; + display: flex; + // flex-direction: row; + height: 100%; + border-radius: 10px; + } + &.shortMenuShow_overflow { + // width: 250px; + // height: 100%; + display: flex; + flex-direction: row; + border-radius: 10px; + // min-width: 200px; + // width: ~'calc(100% - 12px)'; + } + &.shortMenuShow_overflow::-webkit-scrollbar { + display: none; + } + &.shortMenuShow_overflowb { + width: 100px; + // height: 100%; + padding-top: 100px; + // display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #55c596; + } + + &.shortMenuShow_overflowc { + background-color: #fff; + height: 100%; + width: 900px; + border-radius: 0px 10px 10px 0px; + display: flex; + flex-direction: column; + } + &.shortMenuShow_overflowcExpand { + background-color: #fff; + height: 100%; + width: 300px; + border-radius: 10px; + display: none; + flex-direction: column; + } + &.shortMenuShow_sliderChild { + display: flex; + flex-direction: column; + margin-top: 20px; + background-color: #fff; + } + &.shortMenuShow_ChildPadding { + padding: 60px 10px 40px 10px; + margin-bottom: 40px; + // background-color: #f3f4f6; + // background: linear-gradient( + // 90deg, + // rgba(166, 226, 235, 0.2) 0%, + // rgba(127, 190, 171, 0.2) 100% + // ); + background: linear-gradient( + 90deg, + #55c596 0%, + rgba(166, 226, 235, 0.2) 100% + ); + overflow-y: auto; + } + &__outButton { + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 0); + } + &__shortMenuShowoverca { + width: 100%; + margin: 15px 0px; + display: inline-block; + text-align: center; + height: auto; + &-overc { + color: #fff; + font-size: 24px; + padding: 10px 10px; + width: 100%; + } + &-overcd { + color: #55c596; + background-color: #fff; + font-size: 24px; + padding: 10px 10px; + width: 44px; + height: 44px; + border-radius: 10px; + box-shadow: 0px 0px 10px 0px #3ea178; + } + &-title { display: none; } - &__menuAll, - &__menu { - display : flex; - flex-direction : row; - justify-content: flex-start; - align-items : center; - width : 100%; - padding : 0 12px; - cursor : pointer; - overflow : hidden; + } + &__shortMenuShowovercae { + width: 100%; + margin: 15px 0px; + display: inline-block; + text-align: center; + height: auto; + &-overc { + color: #fff; + font-size: 24px; + padding: 10px 10px; + width: 100%; } - - &__menuAll { - height : 61px; - border-bottom: 1px solid #333333;//#333333菜单下划线颜色 - - &-icon { - width : auto; - height: 28px; - } + &-overcd { + color: #55c596; + background-color: #fff; + font-size: 24px; + padding: 10px 10px; + width: 44px; + height: 44px; + border-radius: 10px; + box-shadow: 0px 0px 10px 0px #3ea178; } - - &__menuExpand { - position : absolute; - top : 0; - left : 100%; - width : 0; - height : 100%; - transition : width .2s ease; - background-color: @opacity-bg; - box-shadow : 6px 0 10px rgba(0, 0, 0, 0.1); - - &-divempty { - position: absolute; - top : -52px; - left : -30%; - height : 50px; - width : 130%; - } - - &-divempty-hide { - position: absolute; - } - - &-inner { - height : 100%; - padding: 0 24px; - } - - &-divider { - position : absolute; - top : 0; - left : 0; - height : 100%; - border-left: 1px solid #333333;//#333333 - } - - &-divempty-right { - position: relative; - bottom : 100%; - left : 100%; - height : 100%; - width : 200px; - } - - &-header { - display : flex; + } + &__shortMenuShowoverca:hover { + width: 100%; + margin: 15px 0px; + display: flex; + flex-direction: row; + } + &__shortMenuShowoverca:hover &__shortMenuShowoverca-overcd { + color: #55c596; + background-color: #fff; + font-size: 24px; + padding: 10px 10px; + width: 44px; + height: 44px; + border-radius: 10px; + box-shadow: 0px 0px 10px 0px #3ea178; + margin-left: 28px; + } + &__shortMenuShowoverca:hover &__shortMenuShowoverca-overc { + color: #55c596; + background-color: #fff; + font-size: 24px; + padding: 10px 10px; + width: 44px; + height: 44px; + border-radius: 10px; + box-shadow: 0px 0px 10px 0px #3ea178; + margin-left: 28px; + } + &__shortMenuShowoverca:hover &__shortMenuShowoverca-title { + display: block; + color: #fff; + font-size: 16px; + font-weight: bold; + position: fixed; + height: 44px; + left: 72px; + padding: 0px 15px; + border-radius: 10px; + background-color: #55c596; + display: flex; + align-items: center; + justify-content: center; + z-index: 999; + } + + &__shortMenuShowGrid { + display: grid; + grid-template-rows: auto; + grid-template-columns: auto; + grid-template-columns: repeat(auto-fill, 170px); + justify-content: space-between; + // grid-gap: 5px; + /* 声明了两行，行高分别为 50px 50px */ + // grid-template-rows: 50px; + margin: 10px 20px 10px 70px; + } + &__shortMenuShowFlex { + background-color: #fff; + // border-top: 10px solid #f3f4f6; + padding: 30px 0px 20px 0px; + margin-bottom: 20px; + margin-right: 30px; + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12); + border-radius: 10px; + } + &__shortMenuShowChildTwo { + line-height: 20px; + height: 44px; + // background-color: #fff; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + &-iconri { + font-size: 14px; + width: 20px; + // background-color: #fff; + margin-right: 15px; + display: flex; + align-items: center; + margin-left: 20px; + } + &-name { + // background-color: #fff; + font-size: 14px; + display: flex; + align-items: center; + color: #2c5570; + font-weight: bold; + } + &-icon { + font-size: 20px; + // width: 20px; + background-color: #d4f4e8; + padding: 8px; + border-radius: 5px; + color: #0cbf7c; + margin-right: 10px; + display: flex; + align-items: center; + // margin-left: 20px; + } + } + + &__shortMenuShowChild { + line-height: 20px; + // height: 44px; + background-color: #fff; + // background: linear-gradient(90deg, rgba(166,226,235,0.2) 0%, rgba(127,190,171,0.2) 100%); + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + margin: 10px 0px; + padding: 10px; + border-radius: 5px; + // justify-content: center; + &-icontwo { + font-size: 18px; + // width: 20px; + // background-color: #fff; + margin-right: 10px; + display: flex; + align-items: center; + border-radius: 5px; + padding: 8px; + color: #4791ff; + background-color: #e0edff; + // margin-left: 70px; + } + &-nametwo { + // background-color: #fff; + font-size: 13px; + display: flex; + align-items: center; + // color: #2c5570; + color: #303133; + padding-right: 10px; + // font-weight: bold; + } + } + + &__shortMenuShowChild:hover { + // transform: scale(1.1); + transform: translate(-5px , -5px); + transition: all 0.5s ease 0s; + box-shadow: 5px 5px 15px rgba(67,72,84,0.5); + + } + + &__position { + background-color: #fff; + height: 40px; + } + &__menuAll, + &__menu { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + width: 100%; + padding: 0 12px; + cursor: pointer; + overflow: hidden; + } + + &__menuAll { + height: 61px; + border-bottom: 1px solid #333333; //#333333菜单下划线颜色 + + &-icon { + width: auto; + height: 28px; + } + } + + &__menuExpand { + position: absolute; + top: 0; + left: 100%; + width: 0; + height: 100%; + transition: width 0.2s ease; + background-color: @opacity-bg; + box-shadow: 6px 0 10px rgba(0, 0, 0, 0.1); + + &-divempty { + position: absolute; + top: -52px; + left: -30%; + height: 50px; + width: 130%; + } + + &-divempty-hide { + position: absolute; + } + + &-inner { + height: 100%; + padding: 0 24px; + } + + &-divider { + position: absolute; + top: 0; + left: 0; + height: 100%; + border-left: 1px solid #333333; //#333333 + } + + &-divempty-right { + position: relative; + bottom: 100%; + left: 100%; + height: 100%; + width: 200px; + } + + &-header { + display: flex; // flex-wrap : nowrap; // width : 100%; // height : 61px; - border-bottom: 1px solid #333333;//#333333菜单扩展处下划线颜色 + border-bottom: 1px solid #333333; //#333333菜单扩展处下划线颜色 + flex-direction: column; + font-size: 16px; + } + + &-body { + width: 100%; + height: ~"calc(100% - 140px)"; + padding: 12px 0; + + &--scroll { + display: flex; flex-direction: column; - font-size: 16px; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; } - - &-body { - width : 100%; - height : ~'calc(100% - 140px)'; - padding: 12px 0; - - &--scroll { - display : flex; - flex-direction : column; - justify-content: flex-start; - align-items : flex-start; - flex-wrap : wrap; + } + + &-footer { + position: relative; + height: 70px; + padding: 4px; + border: 1px solid #e1e1e1; + border-radius: 4px; + + &--title { + position: absolute; + top: -24px; + left: 0; + } + + &--scroll { + font-size: 14px; + line-height: 18px; + } + } + + &-menu { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 82px; + height: 100%; + margin-right: 40px; + cursor: pointer; + + &:hover { + .@{sider-prefix}__menuExpand-menu--itemIcon, + .@{sider-prefix}__menuExpand-menu--itemText { + color: @active-color; + } + + .@{sider-prefix}__menuExpand-menu--indicator { + opacity: 1; } } - - &-footer { - position : relative; - height : 70px; - padding : 4px; - border : 1px solid #e1e1e1; - border-radius: 4px; - - &--title { - position: absolute; - top : -24px; - left : 0; - } - - &--scroll { - font-size : 14px; - line-height: 18px; - } + + &.lastChild { + margin-right: 0; } - - &-menu { - position : relative; - display : flex; - flex-direction : column; + + &--item { + width: 100%; + display: flex; + flex-direction: row; justify-content: center; - align-items : center; - width : 82px; - height : 100%; - margin-right : 40px; - cursor : pointer; - + align-items: center; + + &Icon { + font-size: 12px; + color: #333333; //#333333右侧扩展菜单图标颜色 + margin-right: 5px; + transition: color 0.2s ease; + + &.active { + color: @active-color; + } + } + + &Text { + font-size: 16px; + color: #333333; //#333333右侧扩展菜单字体颜色 + transition: color 0.2s ease; + &.active { + color: @active-color; + } + } + } + + &--indicator { + position: absolute; + bottom: 12px; + width: 48px; + height: 2px; + background-color: @active-color; + border-radius: 2px; + opacity: 0; + transition: opacity 0.2s ease; + + &.active { + opacity: 1; + } + } + } + + &-subMenu { + display: flex; + flex-direction: column; + padding-right: 20px; + margin-bottom: 4px; + overflow: hidden; + + &--title { + font-size: 12px; + color: #333333; //#ABABAB二级菜单颜色 + margin-bottom: 18px; + cursor: pointer; + + &--icon { + margin-left: 5px; + font-size: 14px; + } + + &:hover { + color: @active-color; + } + } + + &--menu { + width: 100%; + // padding-left : 20px; + margin-bottom: 20px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + cursor: pointer; + &:hover { - .@{sider-prefix}__menuExpand-menu--itemIcon, .@{sider-prefix}__menuExpand-menu--itemText { color: @active-color; } - - .@{sider-prefix}__menuExpand-menu--indicator { - opacity: 1; - } - } - - &.lastChild { - margin-right: 0; - } - - &--item { - width : 100%; - display : flex; - flex-direction : row; - justify-content: center; - align-items : center; - - &Icon { - font-size : 12px; - color : #333333;//#333333右侧扩展菜单图标颜色 - margin-right: 5px; - transition : color .2s ease; - - &.active { - color: @active-color; - } - } - - &Text { - font-size : 16px; - color : #333333;//#333333右侧扩展菜单字体颜色 - transition: color .2s ease; - &.active { - color: @active-color; - } - } - } - - &--indicator { - position : absolute; - bottom : 12px; - width : 48px; - height : 2px; - background-color: @active-color; - border-radius : 2px; - opacity : 0; - transition : opacity .2s ease; - - &.active { - opacity: 1; - } - } - } - - &-subMenu { - display : flex; - flex-direction: column; - padding-right : 20px; - margin-bottom : 4px; - overflow : hidden; - - &--title { - font-size : 12px; - color : #333333;//#ABABAB二级菜单颜色 - margin-bottom: 18px; - cursor : pointer; - - &--icon { - margin-left: 5px; - font-size : 14px; - } - - &:hover { - color: @active-color;; - } - } - - &--menu { - width : 100%; - // padding-left : 20px; - margin-bottom : 20px; - display : flex; - flex-direction : row; - justify-content: flex-start; - align-items : center; - cursor : pointer; - - &:hover { - - .@{sider-prefix}__menuExpand-menu--itemIcon, - .@{sider-prefix}__menuExpand-menu--itemText { - color: @active-color; - } - } - } - } - } - - &__scrollbars { - width : 100%; - height: ~'calc(100% - 61px)' !important; - } - - &__menu { - height : 28px; - margin-top: 30px; - - &:hover { - - .@{sider-prefix}__menu-icon, - .@{sider-prefix}__menu-font--text { - color: @active-color; - } - } - - &.lastChild { - margin-bottom: 30px; - } - - &-icon { - font-size : 28px; - color : #333333;//#333333左侧常用菜单图标颜色 - transition: color .2s ease; - - &.active { - color: @active-color; - } - } - - &-font { - display : flex; - flex-direction : row; - justify-content: flex-start; - align-items : center; - margin-left : 16px; - - &--text { - font-size : 16px; - color : #333333;//#333333左侧常用菜单字体颜色 - margin-right: 4px; - white-space : nowrap; - transition : color .2s ease; - - &.active { - color: @active-color; - } - } - - &--icon { - font-size: 12px; - color : #000000; } } } } - } \ No newline at end of file + + &__scrollbars { + width: 100%; + height: ~"calc(100% - 61px)" !important; + } + + &__menu { + height: 28px; + margin-top: 30px; + + &:hover { + .@{sider-prefix}__menu-icon, + .@{sider-prefix}__menu-font--text { + color: @active-color; + } + } + + &.lastChild { + margin-bottom: 30px; + } + + &-icon { + font-size: 28px; + color: #333333; //#333333左侧常用菜单图标颜色 + transition: color 0.2s ease; + + &.active { + color: @active-color; + } + } + + &-font { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin-left: 16px; + + &--text { + font-size: 16px; + color: #333333; //#333333左侧常用菜单字体颜色 + margin-right: 4px; + white-space: nowrap; + transition: color 0.2s ease; + + &.active { + color: @active-color; + } + } + + &--icon { + font-size: 12px; + color: #000000; + } + } + } + } +} diff --git a/src/routes/Home.js b/src/routes/Home.js index d454298..8e2f1d3 100644 --- a/src/routes/Home.js +++ b/src/routes/Home.js @@ -14,705 +14,196 @@ import { import "./home.less"; // 组件库 import { - Table, - Modal, Row, Col, Icon, - Button, - Input, - DatePicker, - Form, - Select, - notification, - Popconfirm, - Divider, - Space, - Descriptions, + Progress, + Tabs, message, - Carousel, + Dropdown, + Menu, + Empty, } from "antd"; -import FormPage from "../components/FormPage"; -import backlog from "../assets/home/backlog.png"; -import backlog_i from "../assets/home/backlog_icon.png"; import styles from "./dashboard.css"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; -import moment from "moment"; -import flow from "../assets/home/flow.png"; -import flow_i from "../assets/home/remind_icon.png"; -import finished from "../assets/home/finished.png"; -import finished_i from "../assets/home/finished_icon.png"; -import remind from "../assets/home/remind.png"; -import remind_i from "../assets/home/red-err.png"; import echarts from "echarts"; import config from "../config"; -import Toggle from "./toggle"; -import RisiLevel from "../components/MainPage/RiskLevel"; -import ClassCompletion from "../components/MainPage/ClassCompletion"; -import WorkTicket from "../components/MainPage/WorkTicket"; -import MonthDanger from "../components/MainPage/MonthDanger"; -import SafeCheck from "../components/MainPage/SafeCheck"; +import ModifyPassword from "../components/MainPage/ModifyPassword"; +import FoUserInfoShow from "../components/MainPage/FoUserInfoShow"; +const { TabPane } = Tabs; +const WorkBench = (props) => { + return ( ++ {props.data.map((item, index) => { + const result = + (Date.parse(item.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000; + const prepare = result > 0 ? "正常" : "超期"; + const warning = + item.NOTICE_STATUS == 0 + ? "未读" + : item.NOTICE_STATUS == 3 + ? "已读" + : "已办"; + const type = props.index == 1 || props.index == 2 ? prepare : warning; + + return ( ++ ); }; - -const openNotification = (placement) => { - notification.info({ - duration: null, - top: 43, - message: `签名照上传提示：`, - description: "您还没上传自己的签名照片，请在我的资料中尽快上传您的签名照！", - placement, - }); -}; - -const openNotificationMobile = (placement) => { - notification.info({ - duration: 20, - message: `友情提示：`, - description: "您当前用的是手机在访问，为有更好体验，建议使用电脑访问！", - placement, - }); -}; -const contentStyle = { - height: "400px", - lineHeight: "400px", - textAlign: "center", - background: "#364d79", +const UserInfo = (props) => { + return ( +++ ); + })} ++ {type} +-const Option = Select.Option; -const RangePicker = DatePicker.RangePicker; - -const formItemLayout = { - labelCol: { span: 6 }, - wrapperCol: { span: 14 }, ++ {item.NOTICE_TITLE} +++ 开始时间：{item.TASK_STARTDT} +++ 结束时间：{item.TASK_ENDDT} ++ {/*+ 发起人：{item.person} +*/} +++ ); }; class Home extends React.Component { constructor(props) { super(props); this.state = { - isNaN: false, - scoreVisible: false, - scoreTotalVisible: false, - scoreNaVisible: false, - standardScore: [], - standardScoreTemp: [], - standardScoreNaN: [], visible: false, - safetySloganOne: "", - safetySloganTwo: "", - noticeTitle: "", - tmpData: {}, - tableKey: "1", - pagination: {}, - retData: [], - chartData: [], - displayStr: null, - displayNum: 24, - columnData: [], - columnFields: [], - delayData: [], - Workbench: { - StockDetail: [], - ApprovalCount: 0, - InComingCount: 0, - OutingCount: 0, - ProductingCount: 0, - }, //工作台模型 - showLoading: false, //待办事项数据刷新提示 - searchVisible: false, //弹窗显示 - searchTodayVisible: false, //弹窗显示 - columns: [], - searchColumns: [], - scoreColumns: [], - scoreTotalColumns: [], - tableData: [ + userInfo: "", + timeNow: "上午好", + workData: [], + workTotal:'', + completeName: [ { - //工作台四个展示模块 - key: "1", - bgImg: backlog, - title: - window.navigator.userAgent.indexOf("Windows") < 1 - ? "待办" - : "待办事项", - total: "0", - iconImg: backlog_i, - iconDisplay: "block", + name: "张森友", + value: 100, }, { - key: "4", - bgImg: remind, - title: - window.navigator.userAgent.indexOf("Windows") < 1 - ? "超时" - : "待办超时", - total: "0", - iconImg: remind_i, - iconDisplay: "none", + name: "李友军", + value: 99, }, { - key: "2", - bgImg: flow, - title: - window.navigator.userAgent.indexOf("Windows") < 1 - ? "已办" - : "已办事项", - total: "0", - iconImg: flow_i, - iconDisplay: "none", + name: "洪虎林", + value: 97, }, { - key: "3", - bgImg: finished, - title: "今日提醒", - total: "0", - iconImg: finished_i, - iconDisplay: "none", + name: "李彦斌", + value: 95, + }, + { + name: "王志文", + value: 93, + }, + { + name: "黄海林", + value: 90, + }, + { + name: "赵无极", + value: 67, + }, + { + name: "林佑君", + value: 43, }, ], - visibleTitle: "", //点击title - isSearch: false, // 是否搜索 - querySearch: {}, //搜索集合 - visibleStartTime: [], - visibleEndTime: [], - currentpageIndex: "1", - departmentName: "", - stardardScoreQty: "0", - riskLevelPage: [], - departmentCompletionData: [], - workTicketData: [], - // 用户层级id - deparmentID: "", - deparmentType: 0, - dangerList: {}, - //弹窗显示参数 wyw - detailForm: { - isShow: false, - formCode: "", - title: "", - }, - taskSelects: [], }; - // this.enums = []; - this.reportType = ""; - this.hiddenTop = 10; - this.jobTop = 10; - this.teamTop = 8; - this.tempTime = moment(new Date()).add(-3, "month").format("YYYY-MM-DD"); - this.resizeRef = React.createRef(); } componentDidMount() { if (window.navigator.userAgent.indexOf("Windows") < 1) { window.location.replace(config.guideH5Host); - openNotificationMobile("bottomRight"); - this.state.displayStr = "none"; - this.state.displayNum = 24; //alert('手机'); - } else { - this.state.displayStr = ""; - this.state.displayNum = 16; - //alert('PC'); } - this.state.columns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "预警状态", - dataIndex: "NOTICE_TYPE", - key: "NOTICE_TYPE", - render: (text, record) => this.ShowState(record), - }, - ]; - this.getTeam(); - //定时器功能，暂时不开启 - this.timerID = setInterval( - () => this.getBaseInfoData(1, this.state.tableKey, 5), - 120000 - ); - this.showModalSign(); - this.getBaseInfoData(1, 1, 5); - this.setMessageData(); - this.state.scoreNoneColumns = [ - { - width: "80px", - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - width: "80px", - title: "一级要素", - dataIndex: "Nav_Primary.NAME", - key: "Nav_Primary.NAME", - }, - { - width: "80px", - title: "二级要素", - dataIndex: "Nav_Second.NAME", - key: "Nav_Second.NAME", - }, - { - width: "50px", - title: "考评项目", - dataIndex: "EVALUATION_ITEM", - key: "EVALUATION_ITEM", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationItemEnum.enums[ - record.EVALUATION_ITEM - ] - } - - ), - }, - { - // width: "450px", - title: "考评内容", - dataIndex: "CONTENTS", - key: "CONTENTS", - }, - { - width: "50px", - title: "扣分分值", - dataIndex: "NON_STANDARDIZED_SCORE", - key: "NON_STANDARDIZED_SCORE", - }, - { - width: "400px", - title: "不符合说明", - dataIndex: "NON_CONFORMANCE", - key: "NON_CONFORMANCE", - }, - { - width: "100px", - title: "评价方法", - dataIndex: "Nav_EvaluationMethod", - key: "Nav_EvaluationMethod", - render: (text, record) => ( - - {record.Nav_EvaluationMethod && - record.Nav_EvaluationMethod?.map((item, i) => { - return ( -+++ {props.title}++ {props.data} ++- - - ); - })} - - ), - }, - ]; - this.state.scoreColumns = [ - { - width: "80px", - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - width: "80px", - title: "一级要素", - dataIndex: "Nav_Primary.NAME", - key: "Nav_Primary.NAME", - }, - { - width: "80px", - title: "二级要素", - dataIndex: "Nav_Second.NAME", - key: "Nav_Second.NAME", - }, - { - width: "80px", - title: "三级要素", - dataIndex: "Nav_Three.NAME", - key: "Nav_Three.NAME", - }, - { - width: "50px", - title: "考评项目", - dataIndex: "EVALUATION_ITEM", - key: "EVALUATION_ITEM", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationItemEnum.enums[ - record.EVALUATION_ITEM - ] - } - - ), - }, - { - // width: "500px", - title: "考评内容", - dataIndex: "CONTENTS", - key: "CONTENTS", - }, - { - width: "100px", - title: "评分办法", - dataIndex: "DESCRIPTION", - key: "DESCRIPTION", - }, - { - width: "50px", - title: "标准分", - dataIndex: "STANDARDIZED_SCORE", - key: "STANDARDIZED_SCORE", - }, - { - width: "50px", - title: "实得分", - dataIndex: "RESULT_SCORE", - key: "RESULT_SCORE", - }, - { - width: "200px", - title: "不符合说明", - dataIndex: "NON_CONFORMANCE", - key: "NON_CONFORMANCE", - }, - , - { - width: "80px", - title: "评价结论", - dataIndex: "EVALUATION_RESULT", - key: "EVALUATION_RESULT", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationResultEnum.enums[ - record.EVALUATION_RESULT - ] - } - - ), - }, - { - width: "100px", - title: "评价方法", - dataIndex: "Nav_EvaluationMethod", - key: "Nav_EvaluationMethod", - render: (text, record) => ( - - {record.Nav_EvaluationMethod && - record.Nav_EvaluationMethod?.map((item, i) => { - return ( -- - - ); - })} - - ), - }, - ]; - this.state.scoreTotalColumns = [ - { - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - title: "标准化得分", - dataIndex: "NON_STANDARDIZED_SCORE", - key: "NON_STANDARDIZED_SCORE", - }, - { - title: "操作", - dataIndex: "", - key: "", - render: (text, record) => ( - - { -- {" "} - - - - } - - ), - }, - ]; + this.getBaseData(1, "1", 5); + this.timeJudg(); + this.riskLevel(); + // this.homeRound(); + this.completeRate(); + this.timelyRate(); + this.safeCheck(); + this.dangerChange(); + this.getUser(); } - componentWillUnmount() { - this.timerID && clearTimeout(this.timerID); - } - - showModalSign = () => { - var userId = storage("lacal").getItem("userid")?.val; //登录后有存储登录信息 - var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息 - - let json = initFilter(orgId); - this.props.dispatch({ - type: "app/getDataByPost", - payload: json, - url: "FM/User/UserSign", //验证是否有签名照 - onComplete: (ret) => { - //返回查询结果ret - if (ret) { - //判断是否有记录 - openNotification("topRight"); - } - }, - }); - }; - - getTeam = () => { - var userId = storage("lacal").getItem("userid")?.val; //登录后有存储登录信息 - var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息 - // 龙岩稀土 - if (orgId == "8f1cf418-8bf3-ea3f-7a6d-fc5d61247008") { - this.setState({ - safetySloganOne: "安全方针：以人为本、关注健康、依法治企、安全发展。", - }); - } - // 都昌金鼎 - else if (orgId == "8b3c41aa-51b1-7ce9-1879-248a038c1b5c") { - this.setState({ - safetySloganOne: "安全方针：安全第一，预防为主，科学管理，持续改进。", - }); - } - //洛阳豫璐 - else if (orgId == "d9871ba8-0eec-9e4a-bb87-7d5a540d8913") { - this.setState({ - safetySloganOne: "安全方针：科技、安全、环保、效益。", - }); - } - //博柏 - else if (orgId == "3efd5276-632b-e379-9ff3-7a7546591fca") { - this.setState({ - safetySloganOne: "安全方针：安全第一、综合治理、控制风险、科学发展", - }); - } - //行洛坑 - else { - this.setState({ - safetySloganOne: "安全方针：安全第一、综合治理、控制风险、科学发展", - }); - } - this.setState({ - safetySloganTwo: "安全理念：一切风险皆可控，一切事故皆可防！", - }); - let json = initFilter(orgId); - extendRule(json, "ID", 1, userId); - extendInclude(json, "Nav_Department"); - this.props.dispatch({ - type: "app/getDataByPost", - payload: json, - url: "FM/User/Get", - onComplete: (ret) => { - if (ret && ret.Nav_Department) { - this.setState({ - departmentName: ret.Nav_Department.NAME, - deparmentType: ret.Nav_Department.DEPARTMENT_TYPE, - deparmentID: ret.DEPARTMENT_ID, - }); - this.departmentCompletion(); - this.workTicket(); //工作票完成率前十(统计图) - this.riskLevel(); //岗位风险等级(饼图) - this.getStandardScore(); //获取标准化评分 - this.hiddenDanger(); - } - }, - }); - }; - getStandardScore = () => { - //标准化得分 - var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息 - let json = ""; - if (this.state.mineType) { - json = initFilter(orgId, this.state.mineType); + tabsCallback = (key) => { + if (key == 1) { + this.getBaseData(1, "1", 5); + } else if (key == 2) { + this.getBaseData(1, "4", 5); + } else if (key == 3) { + this.getBaseData(1, "2", 5); } else { - json = initFilter(orgId);//, MineType + this.getBaseData(1, "3", 5); } - - this.props.dispatch({ - type: "app/getDataByPost", - payload: json, - url: "PE/PESafetyEvaluationRecord/HomeGet", - onComplete: (ret) => { - if (ret && ret.Nav_Details) { - this.setState({ - standardScore: ret, - stardardScoreQty: ( - (ret.RESULT_TOTAL / ret.STAND_TOTAL) * - 100 - ).toFixed(2), - }); - } - }, - }); }; - getEnums = () => { - this.props.dispatch({ - type: "app/getDataByGet", - url: "PF/Extend/GetAllEnum", - onComplete: (ret) => { - if (ret) { - this.enums = ret; - } - }, - }); - }; - //班组作业完成率前八 - departmentCompletion = () => { - const userInfo = storage("lacal").getItem("webUserInfo").val; - let json = initFilter( - this.props.login.OrgId, - this.state.mineType, - "NUM", - "desc" - ); - this.props.dispatch({ - type: "app/getDataByPost", - url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort", - payload: json, - onlyData: false, - onComplete: (data) => { - if (data && data.IsSuccessful) { - if (data.Data && data.Data.length > 0) { - this.setState({ - departmentCompletionData: data.Data, - }); - } - } - }, - }); - }; - //工作票完成情况统计图 - workTicket = () => { - const userInfo = storage("lacal").getItem("webUserInfo").val; - let json = initFilter( - this.props.login.OrgId, - this.state.mineType, - "NUM", - "desc" - ); - this.props.dispatch({ - type: "app/getDataByPost", - url: "BI/BIStatiscialAnalysisController/GetJobCompletionSort", - payload: json, - onlyData: false, - onComplete: (data) => { - if (data && data.IsSuccessful) { - if (data.Data && data.Data.length > 0) { - this.setState({ - workTicketData: data.Data, - }); - } - } - }, - }); - }; - // hiddenDanger - hiddenDanger = () => { - const userInfo = storage("lacal").getItem("webUserInfo").val; - let json = initFilter(this.props.login.OrgId, this.state.mineType, "NUM"); - this.props.dispatch({ - type: "app/getDataByPost", - url: "BI/BIHome/GetHomeInfo", - payload: json, - onlyData: false, - onComplete: (data) => { - if (data && data.IsSuccessful) { - this.hiddenTop = data.Data.length; - this.setState({ - dangerList: data.Data, - }); - //图标2 - } - }, - }); - }; - //风险等级占比 - riskLevel = () => { - const userInfo = storage("lacal").getItem("webUserInfo").val; - let json = initFilter(this.props.login.OrgId); - extendOrder(json, "CREATE_TIME", 0); - extendRule(json, "COLOR", 1, this.state.mineType); - this.props.dispatch({ - type: "app/getDataByPost", - url: "FM/RiskLevelProportion/OrderPaged", - payload: json, - onlyData: false, - onComplete: (data) => { - if (data && data.IsSuccessful) { - if (data.Data && data.Data.length > 0) { - this.setState({ - riskLevelPage: data.Data, - }); - } - } - }, - }); - }; - //获取数据 - getBaseInfoData = (pagination, key, limit) => { + getBaseData = (pagination, key, limit) => { const current = pagination ? pagination.current : 1; const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current); //extendRule(json, "NOTICE_STATUS", 1, 0); - const querySearch = this.state.querySearch; - for (var item in querySearch) { - if (item == "searchName") { - extendRule(json, "NOTICE_TITLE", 9, querySearch[item]); - } - if (item == "searchCode") { - extendRule(json, "CODE", 9, querySearch[item]); - } - if (item == "startTime1") { - extendRule(json, "TASK_STARTDT", 6, querySearch[item]); - } - if (item == "startTime2") { - extendRule(json, "TASK_STARTDT", 4, querySearch[item]); - } - if (item == "endTime1") { - extendRule(json, "TASK_ENDDT", 6, querySearch[item]); - } - if (item == "endTime2") { - extendRule(json, "TASK_ENDDT", 4, querySearch[item]); - } - if (item == "searchStatus") { - extendRule(json, "NOTICE_STATUS", 1, querySearch[item]); - } - } json.Limit = limit; //json.Limit = 10; json.Parameter1 = key; //1待办事项2已办事项3今日新增4待办超时 @@ -722,1433 +213,1366 @@ class Home extends React.Component { url: "FM/FMNotificationTask/HomeOrderPaged", payload: json, onlyData: false, - onComplete: (re) => { - if (re && re.IsSuccessful && re.Data.newData) { - this.state.tableData[0].total = re.Data.todoCount; - this.state.tableData[1].total = re.Data.timeOverCount; - this.state.tableData[2].total = re.Data.doneCount; - this.state.tableData[3].total = re.Data.todayNewCount; - - if (limit != null || limit != undefined) { - this.setState({ - retData: re.Data.newData, - }); - } else { - var pageInfo = {}; - pageInfo.current = current; - pageInfo.total = Math.ceil(re.Data.TotalCount, 10); - this.setState({ - retDataAll: re.Data.newData, - pagination: pageInfo, - }); - } + onComplete: (ret) => { + if (ret && ret.IsSuccessful && ret.Data.newData) { + this.setState({ + workData: ret.Data.newData, + workTotal: ret.Data, + }); } }, }); }; + timeJudg = () => { + let time = new Date(); + let hour = time.getHours(); + if (hour >= 6 && hour <= 11) { + this.setState({ + timeNow: "上午好", + }); + } else if (hour > 11 && hour <= 13) { + this.setState({ + timeNow: "中午好", + }); + } else if (hour > 13 && hour <= 18) { + this.setState({ + timeNow: "下午好", + }); + } else { + this.setState({ + timeNow: "晚上好", + }); + } + }; + getUser = () => { + var userId = storage("lacal").getItem("userid")?.val; //登录后有存储登录信息 + var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息 + let json = initFilter(orgId); + extendRule(json, "ID", 1, userId); + extendInclude(json, "Nav_Department"); + this.props.dispatch({ + type: "app/getDataByPost", + payload: json, + url: "FM/User/Get", + onComplete: (ret) => { + if (ret) { + this.setState({ + userInfo: ret, + }); + } + }, + }); + }; + safeCheck = () => { + let series = []; + let seriesName = ["巡回检查", "例行检查", "专业检查", "综合检查"]; + let data3 = [ + [17, 20, 16, 20, 16, 16, 20, 16, 16, 20, 16, 4], + [43, 41, 43, 32, 47, 33, 57, 38, 46, 42, 49, 39], + [23, 21, 43, 12, 15, 13, 15, 16, 17, 14, 19, 24], + [17, 20, 23, 42, 12, 17, 13, 15, 12, 17, 19, 34], + ]; + let xData = [ + "2023年4月", + "2023年5月", + "2023年6月", + "2023年7月", + "2023年8月", + "2023年9月", + "2023年10月", + "2023年11月", + "2023年12月", + "2024年1月", + "2024年2月", + "2024年3月", + ]; + for (let i = 0; i < data3.length; i++) { + series.push({ + name: seriesName[i], + type: "bar", + stack: "总量", + data: data3[i], + barWidth: "20%", + // itemStyle:{ + // borderWidth:2, + // borderColor:'#fff', + // barBorderRadius:5, + // } + }); + } + let safeChecks = document.getElementById("safeCheck"); + if (safeChecks) { + let myChart = echarts.init(safeChecks); + myChart.setOption({ + color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"], - clearData = () => { - let newtmpData = { ...this.state.tmpData }; - newtmpData["data"].id = ""; - newtmpData["data"].homeReload = false; - newtmpData.formCode = ""; + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + transitionDuration: 0, + }, + grid: { + left: "5%", + right: "5%", + bottom: "15%", + top: "5%", + containLabel: true, + z: 22, + }, + xAxis: { + type: "category", + data: xData, + axisLine: { + lineStyle: { + color: "#0c3b71", + }, + }, + axisLabel: { + show: true, + color: "rgb(170,170,170)", + interval: 0, + textStyle: { + lineHeight: 14, + }, + formatter: function (param) { + return param.split("年")[1]; + }, + }, + }, + legend: { + data: ["巡回检查", "例行检查", "专业检查", "综合检查"], + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + // itemGap: 15, + }, + yAxis: { + type: "value", + splitLine: { + show: true, + lineStyle: { + color: ["#f2f2f2"], + }, + }, + axisLine: { + lineStyle: { + color: "#0c3b71", + }, + }, + axisLabel: { + color: "rgb(170,170,170)", + formatter: "{value} ", + }, + }, + series: series, + }); + } + }; + dangerChange = () => { + let sourceName = [ + "按时整改隐患", + "超期整改隐患", + "未整改隐患", + "隐患整改率", + ]; + let ydata = [ + ["2", "5", "6", "8", "10", "9"], + ["1", "7", "1", "2", "5", "4"], + ["0", "1", "0", "3", "0", "1"], + ["100.00", "92.31", "100.00", "76.92", "100.00", "92.86"], + ]; + let xData = [ + ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], + ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], + ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], + ["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], + ]; + let dangerChanges = document.getElementById("dangerChange"); + if (dangerChanges) { + let myChart = echarts.init(dangerChanges); + myChart.setOption({ + color: ["#72b85b", "#f6841a", "#cc0404", "#4285F4"], + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + transitionDuration: 0, + formatter: function (params) { + return ( + params[0].name + + "" + + params[0].marker + + params[0].seriesName + + " : " + + params[0].value + + "" + + params[1].marker + + params[1].seriesName + + " : " + + params[1].value + + "" + + params[2].marker + + params[2].seriesName + + " : " + + params[2].value + + "" + + params[3].marker + + params[3].seriesName + + " : " + + params[3].value + + "%" + ); + }, + }, + grid: { + left: "10%", + // right: "10%", + bottom: "15%", + top: "5%", + containLabel: true, + z: 22, + }, + xAxis: { + type: "category", + data: xData[0], + axisLine: { + lineStyle: { + color: "#0c3b71", + }, + }, + axisLabel: { + show: true, + color: "rgb(170,170,170)", + interval: 0, + textStyle: { + lineHeight: 14, + }, + }, + }, + legend: { + data: sourceName, + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + // itemGap: 35, + }, + yAxis: [ + { + type: "value", + position: "left", + splitLine: { + show: true, + lineStyle: { + color: ["#f2f2f2"], + // opacity:0.2 + // zlevel: -1, + }, + }, + axisLine: { + lineStyle: { + color: "#0c3b71", + }, + }, + axisLabel: { + color: "rgb(170,170,170)", + formatter: "{value} ", + }, + }, + { + type: "value", + position: "right", + splitLine: { + show: false, + lineStyle: { + color: ["#f2f2f2"], + }, + }, + axisLine: { + lineStyle: { + color: "#f2f2f2", + }, + }, + axisLabel: { + color: "rgb(170,170,170)", + formatter: "{value} %", + }, + }, + ], + series: [ + { + name: sourceName[0], + type: "bar", + data: ydata[0], + barWidth: "10%", + barGap: "10%", + stack: null, + }, + { + name: sourceName[1], + type: "bar", + data: ydata[1], + barWidth: "10%", + barGap: "10%", + stack: null, + }, + { + name: sourceName[2], + type: "bar", + data: ydata[2], + barWidth: "10%", + barGap: "10%", + stack: null, + // zlevel: 99, + }, + { + name: sourceName[3], + type: "line", + smooth: false, + data: ydata[3], + yAxisIndex: 1, + itemStyle: { + normal: { + lineStyle: { + type: "dotted", + }, + }, + }, + // zlevel:100, + }, + ], + }); + } + }; + timelyRate = () => { + let timelyRates = document.getElementById("timelyRate"); + if (timelyRates) { + let myChart = echarts.init(timelyRates); + myChart.setOption( + { + title: { + text: "83%", + x: "center", + y: "center", + textStyle: { + fontWeight: "normal", + color: "#ffa94d", + fontSize: "20", + }, + }, + color: '#ffd6b5', + legend: { + show: false, + itemGap: 12, + data: ["01", "02"], + }, + + series: [ + { + name: "Line 1", + type: "pie", + clockWise: true, + radius: ["60%", "76%"], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + hoverAnimation: false, + data: [ + { + value: 83, + name: "01", + itemStyle: { + normal: { + color: { + // 完成的圆环的颜色 + colorStops: [ + { + offset: 0, + color: "#ffa94d", // 0% 处的颜色 + }, + { + offset: 1, + color: "#f76707", // 100% 处的颜色 + }, + ], + }, + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + }, + { + name: "02", + value: 17, + }, + ], + }, + ], + }, + true + ); + } + }; + + completeRate = () => { + let completeRates = document.getElementById("completeRate"); + if (completeRates) { + let myChart = echarts.init(completeRates); + myChart.setOption({ + title: { + text: "93%", + x: "center", + y: "center", + textStyle: { + fontWeight: "normal", + color: "#0580f2", + fontSize: "20", + }, + }, + color: ["rgba(176, 212, 251, 1)"], + legend: { + show: false, + itemGap: 12, + data: ["01", "02"], + }, + + series: [ + { + name: "Line 1", + type: "pie", + clockWise: true, + radius: ["60%", "76%"], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + hoverAnimation: false, + data: [ + { + value: 93, + name: "01", + itemStyle: { + normal: { + color: { + // 完成的圆环的颜色 + colorStops: [ + { + offset: 0, + color: "#00cefc", // 0% 处的颜色 + }, + { + offset: 1, + color: "#367bec", // 100% 处的颜色 + }, + ], + }, + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + }, + { + name: "02", + value: 7, + }, + ], + }, + ], + }); + } + }; + + riskLevel = () => { + let riskLevel = []; + let showData = [ + { value: 20, name: "一级" }, + { value: 10, name: "二级" }, + { value: 15, name: "三级" }, + { value: 30, name: "四级" }, + ]; + + let riskLevels = document.getElementById("riskLevel"); + if (riskLevels) { + let myChart = echarts.init(riskLevels); + myChart.setOption({ + color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"], + title: { + text: "60", + x: "26%", + y: "center", + textStyle: { + fontSize: 16, + fontWeight: "normal", + color: ["#333"], + }, + subtextStyle: { + color: "#666", + fontSize: 12, + }, + }, + tooltip: { + trigger: "item", + formatter: "{b}:({d}%)", + }, + legend: { + icon: "pin", + orient: "vartical", + // x: "right", + top: "18%", + right: "15%", + bottom: "20%", + data: showData, + // itemWidth: 20, + // itemHeight: 14, + itemGap: 25, + formatter: function (name) { + //通过name获取到数组对象中的单个对象 + let singleData = showData.filter(function (item) { + return item.name == name; + }); + let countAll = 0; + showData.map((item) => { + countAll = countAll + item.value; + }); + + return ( + name + + " | " + + // singleData[0].value + + // " | " + + Number((singleData[0].value / countAll) * 100).toFixed(2) + + "%" + ); + }, + }, + grid: { + left: 30, + containLabel: true, + bottom: 10, + top: 10, + right: 30, + }, + series: [ + { + name: "访问来源", + type: "pie", + clockwise: false, + // minAngle: 20, + avoidLabelOverlap: false, + radius: ["50%", "65%"], + center: ["30%", "50%"], + itemStyle: { + //图形样式 + normal: { + borderColor: "#ffffff", + borderWidth: 4, + padding: "0 20px", + borderRadius: 50, + }, + }, + label: { + show: false, + }, + // color: color, + data: showData, + }, + ], + }); + } + }; + navToMenu = (ID) => { + this.props.history.push({ pathname: `/main/${ID}` }); + }; + /** + * 注销登录 + */ + handleLogout = () => { + const { OrgId, userId } = this.props.login; + const logJson = initFilter(OrgId, userId, "", 0, 1, 0); + this.props.dispatch({ + type: "app/addLoginOut", + payload: logJson, + }); + localStorage.removeItem("accessToken"); + this.props.history.push({ pathname: "/login" }); + }; + + handleUserMenuClick = (evt) => { + switch (evt.key) { + case "user-menu-logout": + handleLogout(); + break; + case "user-menu-cacheclean": + window.localStorage.clear(); + message.success("清除成功，即将重新加载页面", 2, () => { + setTimeout(() => window.location.reload(true), 500); + }); + break; + default: + break; + } this.setState({ visible: false, - tmpData: [], //newtmpData - }); - }; - clearScoreData = () => { - this.setState({ - scoreVisible: false, - // standardScore: [],//newtmpData - }); - }; - handleCancel = () => { - // 退出弹窗 - this.getBaseInfoData(1, this.state.tableKey, 5); - this.clearData(); - }; - closeModal = () => { - // 退出弹窗 - this.clearData(); - }; - - showEditModal = (dataId, formCode, TaskID, title, taskCode) => { - this.props.dispatch({ - type: "app/getDataByPost", - url: "BI/BIController/getVersion", - onComplete: (ret) => { - if (ret > config.version) { - window.localStorage.clear(); - message.success("清除成功，即将重新加载页面", 2, () => { - setTimeout(() => window.location.reload(true), 500); - }); - } - }, - }); - const newtmpData = { - data: { - id: dataId, - TaskID: TaskID, - onCancel: this.handleCancel, - taskCode: taskCode, - tableKey: this.state.tableKey, - homeReload: true, - }, - formCode: formCode, - }; - this.setState( - { - noticeTitle: title, - taskCode: taskCode, - tmpData: newtmpData, - currActivatedMenu: "", - }, - () => - this.setState({ - visible: true, - }) - ); - }; - showTodayModal = ( - dataId, - formCode, - TaskID, - title, - taskCode, - taskStartdt, - taskStatus - ) => { - const newtmpData = { - data: { - id: dataId, - TaskID: TaskID, - onCancel: this.handleCancel, - taskCode: taskCode, - tableKey: this.state.tableKey, - noticeTitle: title, - taskStartdt: taskStartdt, - taskStatus: taskStatus, - homeReload: true, - }, - formCode: "PF135", - }; - this.setState( - { - noticeTitle: "今日提醒", - taskCode: taskCode, - tmpData: newtmpData, - currActivatedMenu: "", - }, - () => - this.setState({ - visible: true, - }) - ); - }; - - setMessageData = (dataSource) => { - const data = dataSource ? dataSource : this.props.taskData; - }; - //点击切换四个统计模块更改列表数据 - totalModuleClick = (item) => { - const { tableData } = this.state; - tableData.map((_item, i) => { - if (_item.key == item.key) { - if (item.key == "2") { - this.state.columns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE, - record.CODE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "办结时间", - dataIndex: "TASK_DT", - key: "TASK_DT", - }, - ]; - } else if (item.key == "3") { - this.state.columns = [ - { - title: "提醒内容", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showTodayModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE, - record.CODE, - record.TASK_STARTDT, - record.NOTICE_STATUS - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - width: "150px", - title: "提醒时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - width: "150px", - title: "状态", - dataIndex: "NOTICE_STATUS", - key: "NOTICE_STATUS", - render: (text, record) => this.ShowStatus(record), - }, - ]; - } else { - this.state.columns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE, - record.CODE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "预警状态", - dataIndex: "NOTICE_TYPE", - key: "NOTICE_TYPE", - render: (text, record) => this.ShowState(record), - }, - ]; - } - _item.iconDisplay = "block"; - this.setState({ - tableKey: item.key, - }); - if (window.navigator.userAgent.indexOf("Windows") < 1) { - this.getBaseInfoData(1, item.key, 10); - } else { - this.getBaseInfoData(1, item.key, 5); - } - } else { - _item.iconDisplay = "none"; - } - }); - }; - // 双击切换四个统计模块获取全部信息 - totalMoonDoubleClick = (item) => { - const { tableData } = this.state; - tableData.map((_item) => { - if (_item.key == item.key) { - if (item.key == "2") { - this.state.searchColumns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE, - record.CODE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "办结时间", - dataIndex: "TASK_DT", - key: "TASK_DT", - }, - ]; - this.setState({ - searchVisible: true, - searchTodayVisible: false, - querySearch: {}, - }); - } else if (item.key === "3") { - this.state.searchColumns = [ - { - width: "450px", - title: "提醒内容", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showTodayModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE, - record.CODE, - record.TASK_STARTDT, - record.NOTICE_STATUS - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "提醒时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "状态", - dataIndex: "NOTICE_STATUS", - key: "NOTICE_STATUS", - render: (text, record) => this.ShowStatus(record), - }, - ]; - this.setState({ - searchVisible: false, - searchTodayVisible: true, - querySearch: {}, - }); - } else { - this.state.searchColumns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE, - record.CODE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "预警状态", - dataIndex: "NOTICE_TYPE", - key: "NOTICE_TYPE", - render: (text, record) => this.ShowState(record), - }, - ]; - this.setState({ - searchVisible: true, - searchTodayVisible: false, - querySearch: {}, - }); - } - } - }); - this.setState( - { - tableData, - currentpageIndex: item.key, - }, - () => { - this.getBaseInfoData(1, item.key); - } - ); - }; - // 开始时间 - selectChange = (value) => { - const { querySearch } = this.state; - querySearch.searchStatus = value; - this.setState( - { - querySearch, - }, - () => { } - ); - }; - // 开始时间 - startChange = (dates, dateStr) => { - const { querySearch } = this.state; - if (dates.length != 2) { - this.setState({ - visibleStartTime: [], - querySearch: {}, - }); - return; - } - this.state.visibleStartTime = dates; - querySearch.startTime1 = this.state.visibleStartTime[0].format( - "YYYY-MM-DD HH:mm:ss" - ); - querySearch.startTime2 = this.state.visibleStartTime[1].format( - "YYYY-MM-DD HH:mm:ss" - ); - this.setState( - { - querySearch, - }, - () => { } - ); - }; - // 结束时间 - endChange = (dates, dateStr) => { - const { querySearch } = this.state; - if (dates.length != 2) { - this.setState({ - visibleEndTime: [], - querySearch: {}, - }); - return; - } - this.state.visibleEndTime = dates; - querySearch.endTime1 = this.state.visibleEndTime[0].format( - "YYYY-MM-DD HH:mm:ss" - ); - querySearch.endTime2 = this.state.visibleEndTime[1].format( - "YYYY-MM-DD HH:mm:ss" - ); - this.setState({ querySearch }); - }; - // 搜索 - handleSearch = (item) => { - this.getBaseInfoData(1, item, null); - }; - closeTasks() { - const json = initFilter(this.props.login.OrgId, "", "CODE", 1); - let ids = []; - let names = []; - this.state.taskSelects.forEach(element => { - ids.push(element.ID); - names.push( - { - title: element.NOTICE_TITLE, - startTime: element.TASK_STARTDT, - endTime: element.TASK_ENDDT, - }); - }); - json.Parameter1 = ids.join(","); - json.Parameter2 = JSON.stringify(names); - this.props.dispatch({ - type: "app/getDataByPost", - url: "BI/BITask/CloseTask", - payload: json, - onlyData: false, - onComplete: (ret) => { - message.success('申请成功！'); - }, - }); - }; - // input输入 - vauleChange = (e) => { - const { querySearch } = this.state; - if (e.target.value) { - switch (e.target.name) { - case "searchName": - querySearch[e.target.name] = e.target.value; - this.setState({ querySearch }); - break; - case "searchCode": - querySearch[e.target.name] = e.target.value; - this.setState({ querySearch }); - break; - case "searchType": - querySearch[e.target.name] = e.target.value; - this.setState({ querySearch }); - break; - case "searchContent": - querySearch[e.target.name] = e.target.value; - this.setState({ querySearch }); - break; - } - } else { - this.setState({ querySearch: {} }); - } - }; - closeModal = () => { - this.setState({ - searchVisible: false, - searchTodayVisible: false, - querySearch: {} - }); - }; - ShowState(obj) { - var thisResult = - (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000; - if (thisResult > 0) { - return "正常"; - } else { - return 超期; - } - } - ShowStatus(obj) { - if (obj.NOTICE_STATUS === 0) { - return 未读; - } else if (obj.NOTICE_STATUS === 3) { - return "已读"; - } else { - return "已办"; - } - } - handleSelect = (e) => { - const { querySearch } = this.state; - if (e != undefined) { - querySearch.status = e; - } else { - querySearch.status = ""; - } - this.setState({ querySearch }); - }; - showStandardScoreTotalModal = () => { - this.setState({ - scoreTotalVisible: true, - }); - }; - showStandardScoreModal = (item) => { - let temp = false; - if (this.state.standardScore && this.state.standardScore.Nav_Details) { - this.state.standardScore.Nav_Details.forEach((t) => { - if (t.THREE_ELEMENTS_ID) { - temp = true; - } - }); - } - if (item) { - let dataTemp = this.state.standardScore.Nav_Details.filter( - (t) => t.NON_CONFORMANCE != null && t.NON_CONFORMANCE != "" - ); - let tmpData = dataTemp.map((item, i) => { - item["ROW_NO"] = i + 1; - return item; - }); - let aa = { - CONTENTS: "合计扣分：", - NON_STANDARDIZED_SCORE: this.state.standardScore.NON_STANDARDIZED_SCORE, - }; - tmpData.push(aa); - this.setState({ - isNaN: temp, - standardScoreNaN: tmpData, - scoreNaVisible: true, - }); - } else { - let dataTemp = this.state.standardScore.Nav_Details; - let tmpData = dataTemp.map((item, i) => { - item["ROW_NO"] = i + 1; - return item; - }); - let aa = { - DESCRIPTION: "合计：", - STANDARDIZED_SCORE: this.state.standardScore.STAND_TOTAL, - RESULT_SCORE: this.state.standardScore.RESULT_TOTAL, - NON_CONFORMANCE: - "标准化得分：" + this.state.standardScore.STANDARDIZED_RESULT, - }; - tmpData.push(aa); - this.setState({ - isNaN: temp, - standardScoreTemp: tmpData, - scoreVisible: true, - }); - } - }; - clearScoreTotalData = () => { - this.setState({ - scoreTotalVisible: false, - }); - }; - clearScoreNaData = () => { - this.setState({ - scoreNaVisible: false, - }); - }; - useEffect = () => { - // 监听的函数 - const resize = new ResizeObserver((e) => { - if (!Array.isArray(e) || !e.length) return; - for (const ent of e) { - resizeChange(ent); - } - }); - // 传入监听对象 - resize.observe(resizeRef.current); - // 及时销毁监听函数（重要!!!） - return () => { - resize.unobserve(resizeRef?.current); - }; - }; - - //显示详情弹窗 - showDetailModal = (formCode) => { - var titleTemp = - this.state.mineType == 20 - ? "尾矿库" - : this.state.mineType == 10 - ? "选矿厂" - : "露天矿"; - if (formCode == "BI054_HOMEDETAIL") { - titleTemp += "安全检查次数统计（近12月）"; - } else if (formCode == "BI055_HOMEDETAIL") { - titleTemp += "月度隐患整改情况（近12月）"; - } else if (formCode == "BI001_HOMEDETAIL") { - titleTemp += "班组活动任务完成详情（近12月）"; - } else if (formCode == "BI002_HOMEDETAIL") { - titleTemp += "工作票完成详情（近12月）"; - } else if (formCode == "BI013_RISKANALYSISMODEL") { - titleTemp += "风险管理统计分析"; - } - - const newtmpData = { - data: { - id: guid(), - mineType: this.state.mineType, - onCancel: this.handleCancel, - homeReload: true, - }, - formCode: formCode, - }; - this.setState({ tmpData: newtmpData }, () => { - var detailForm = { - isShow: true, - formCode: formCode, - title: titleTemp, - }; - this.setState({ - detailForm: detailForm, - }); - }); - }; - - //详情弹窗关闭（隐藏） - detailFormClose = () => { - var detailForm = { - isShow: false, - formCode: "", - title: "", - }; - this.setState({ - detailForm: detailForm, }); }; render() { - const { tableData } = this.state; - const thingsData = this.state.delayData; - const settings = { - dots: false, - autoplay: false, - infinite: true, - speed: 500, - slidesToShow: 1, - slidesToScroll: 1, - className: styles.slideHeight, - fade: true, - }; - const rowSelection = { - onChange: (selectedRowKeys, selectedRows) => { - this.state.taskSelects = selectedRows; - }, - }; - const empty =; return ( - -- ---+ --
- - --
- --
- --
- -- - {/* 五个图标模块 */} -
- + this.showStandardScoreTotalModal()} style={{ - // padding: "0px", - height: "236px", - borderRadius: "10px", - padding: "10px", - cursor: "pointer", + height: "50%", + width: "100%", + display: "flex", + flexDirection: "row", + alignItems: "center", + borderBottom: "2px solid #f6f6f6", }} - className="backlog-background-style4" > -+ > + {this.state.userInfo.SEX == 1 ? ( + ![homeuser]({require("../assets/home/avaB.png")})
+ ) : (
+ ![homeuser]({require("../assets/home/avaG.png")})
+ )}
+ -- {/* {83.6} */} - {this.state.stardardScoreQty} - {/* {this.state.uitem} */} --- 标准化得分 --- -
-- -- ---- --- {this.state.safetySloganOne} - - {this.state.safetySloganTwo} -
--
- - - - {/* 通知 */} -- - {tableData.map((item) => { - return ( -
- -- this.totalModuleClick(item)} - onDoubleClick={() => - this.totalMoonDoubleClick(item) - } - style={{ - padding: "0px", - height: "176px", - borderRadius: "10px", - cursor: "pointer", - }} - className={ - item.title === "待办事项" - ? "backlog-background-style" - : item.title === "待办超时" - ? "backlog-background-style1" - : item.title === "已办事项" - ? "backlog-background-style2" - : item.title === "今日提醒" - ? "backlog-background-style3" - : "backlog-background-style4" - } - > -- - ); - })} -- - 9999 - ? "backlog-style4" - : "backlog-style" - } - > - {item.total} --- {item.title} -- -- -- - ----- {this.state.riskLevelPage.length > 0 ? ( --- {this.state.riskLevelPage.length > 0 ? ( - -- 风险等级占比 - - this.showDetailModal("BI013_RISKANALYSISMODEL") + {this.state.userInfo.NAME}，{this.state.timeNow} +++- - ) : null} -{ + this.setState({ visible: !this.state.visible }); + }} + overlay={ + } + placement="topLeft" + trigger={["click"]} > - - - ) : null} - - {/* 列表 */} -
- -- --
- -++- - - */} - - -- this.getBaseInfoData(num, this.state.currentpageIndex, null) - } - loading={this.state.showLoading} - size="small" - /> - - -
- -+- 搜索 - - - - -- this.getBaseInfoData(num, this.state.currentpageIndex, null) - } - loading={this.state.showLoading} - size="small" - /> - - - {/* 岗位风险类别 */} -
- + {this.state.userInfo.Nav_Department ? ( ++ + ++ 部门：{this.state.userInfo.Nav_Department.NAME} ++ ) : ( + "" + )} +++ + ++ + + + - --+ +- 班组活动完成率 + +++- {this.state.departmentCompletionData.length > 0 ? ( - + ++ +完成率+++ + ++++ ++及时完成率++ +++ +++ ++ + {/*我的常用功能+*/} + ++
-{ + this.navToMenu("dd1e5b37-f8b2-45fe-8904-08c587b5cc79"); }} > - this.showDetailModal("BI001_HOMEDETAIL")} - > +-- - ) : null} + 用户列表 + +{ + this.navToMenu("a8236679-bb7d-4432-b539-28c270338db1"); + }} + > + ++ 菜单配置 + ++ { + this.navToMenu("12388502-4ee9-02c2-8c80-68e07ba3d087"); + }} + > + ++ 排班日历 + ++ { + this.navToMenu("a81dfac3-af1e-4a5a-aadc-eb8e525ddd16"); + }} + > + ++ 角色列表 + + ++ +
{ + this.navToMenu("b0972124-6aa1-479b-9725-5f726754ce58"); + }} + > + ++ 模版表单 + ++ { + this.navToMenu("6dc35aee-dd5e-4b31-b7ca-5f62d337d0c1"); + }} + > + ++ 排班明细 + ++ { + this.navToMenu("269f79ae-5f41-40f1-8d77-f532750208d1"); + }} + > + ++ 班前会议 + ++ { + this.navToMenu("ea164ba5-b78a-4545-96fa-46e6ab635fb7"); + }} + > + ++ 岗位当班 + ++
-- {this.state.departmentCompletionData.length > 0 ? ( -- -+ + +
+ +++ ++ + {/*我的工作+*/} + +- {/*+ + ++ 待办事项{" "} + } - /> - ) : null} + key="1" + > + + {this.state.workData.length > 0 ? ( +++ ) : ( + + )} + + ++ 待办超时 + + } + key="2" + > + + {this.state.workData.length > 0 ? ( +++ ) : ( + + )} + + ++ 已办事项 + + } + key="3" + > + + {this.state.workData.length > 0 ? ( +++ ) : ( + + )} + + ++ 今日提醒 + + } + key="4" + > + + {this.state.workData.length > 0 ? ( +++ ) : ( + + )} + */} - - {/* 工作票完成情况前十 */} - {/* 隐患整改完成情况排名前十 */} -
- + + +- -+ + +-- - {/* 隐患整改情况 */} -- 工作票完成数 + +-+ +- {this.state.workTicketData.length > 0 ? ( - -完成率排名this.showDetailModal("BI002_HOMEDETAIL")} - > -- - ) : null} + + {/*- */}
- {this.state.workTicketData.length > 0 ? ( -- ) : null} - + {this.state.completeName.map((item, index) => { + return ( + + {index == 0 ? ( ++ ); + })} +![4-1]({require("./../assets/home/4-1.png")})
+ ) : index == 1 ? (
+ ![4-2]({require("./../assets/home/4-2.png")})
+ ) : index == 2 ? (
+ ![4-3]({require("./../assets/home/4-3.png")})
+ ) : (
+ {index + 1}+ )} + +{item.name}+ +-
--); } diff --git a/src/routes/Login.js b/src/routes/Login.js index feff056..67d399a 100644 --- a/src/routes/Login.js +++ b/src/routes/Login.js @@ -482,7 +482,7 @@ class LoginPage extends React.Component {-- - + +- 月度隐患整改情况 + +- - {/* 风险类别占比、风险等级占比 */} -+- {this.state.dangerList.ListC && - this.state.dangerList.ListC.length > 0 ? ( - ++ +安全检查次数统计+--this.showDetailModal("BI055_HOMEDETAIL")} - > -- - ) : null} --
- {this.state.dangerList.ListC && - this.state.dangerList.ListC.length > 0 ? ( -- ) : null} - {/* */} - - --- {/* {this.state.departmentName}作业完成情况 */} -- {this.state.dangerList.ListSafeCheckYearMonth && - this.state.dangerList.ListSafeCheckYearMonth.length > 0 ? ( - --- 安全检查次数统计 + > this.showDetailModal("BI054_HOMEDETAIL")} - > -- - ) : null}-
- {this.state.dangerList.ListSafeCheckYearMonth && this.state.dangerList.ListSafeCheckYearMonth.length > 0 ? ( -- ) : null} - ++ + + ++++ ++月度隐患整改情况++ +++ +++ ++风险等级占比++ ++ + +{/*})
*/}
-Copyright ©2022-2023 厦门鸣鹤管理咨询股份有限公司
+Copyright ©2024-2025 厦门鸣鹤管理咨询股份有限公司
{/*})
diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css
index 908d577..92af254 100644
--- a/src/routes/dashboard.css
+++ b/src/routes/dashboard.css
@@ -1,436 +1,332 @@
/* 工作台调整样式 */
-:global(.dashboard-div-style){
- height: 100%;
- width:100%;
- border-radius:10px;
- background-color:white;
- min-height: 20px;
- }
- :global(.redTableCell){
- background: #e6f7ff;
- }
- :global(.bi001-table){
- :global(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td){
- background: #fff;
- }
- }
+:global(.home-rate) {
+ width: calc(50% - 10px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ min-Width: "320px",
+}
+:global(.home-userInfo-tabs) {
+ background-color: #eefff8;
+ color: #55c596;
+ padding: 3px 10px;
+ border-radius: 15px;
+ border: 1px solid #55c596;
+}
+:global(.home-userInfo-card) {
+ height: 50%;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 0px;
+}
+:global(.home-userInfo) {
+ display: flex;
+ flex-direction: column;
+ background-color: #fafafa;
+ padding: 10px 30px 10px 10px;
+ height: 100%;
+ justify-content: space-between;
+ border-radius: 10px;
+ width: calc(25% - 10px);
+}
+:global(.home-userInfo-pad) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
- :global(.slide-style){
- /* margin-bottom: 10px; */
- font-size: 24px;
- font-weight: bold;
- color:#de4e58;
- /* -webkit-text-stroke: #E38C7A 1px; */
- /* padding-left:30px; */
- flex: 1;
- overflow: hidden;
- display: flex;
- align-items: center;
-
- }
- :global(.slide-icon-style){
- /* padding: 0px 20px; */
- margin-right: 10px;
- display: flex;
- align-items: center;
-
- }
-
- :global(.slide-content){
- margin-bottom: 10px;
- background: #ffffff;
- /* padding-left:30px; */
- padding: 0px 30px;
- box-sizing: border-box;
- border-radius:4px;
- height:50px;
- line-height:50px;
- /* border:1px solid red; */
- /* overflow:hidden; */
- display: flex;
- flex-direction: row;
- align-items: center;
- box-shadow: 2px 1px 8px 1px rgb(228, 232, 235);
- /* min-width: 100px; */
- }
-
- :global(.slide-text-style){
- position:relative;
- display:inline-block;
- white-space:nowrap;
- animation: slide-text-style 20s linear 1s infinite ;
- width:'auto';
- align-items: center;
- margin-top: 1em;
- }
-
- @keyframes slide-text-style{
- 0%{margin-left:100%;}
- 100%{margin-left:-1200px;}
- }
-
-
- :global(.slick-prev){
- padding: 2px 0px 0px 0px !important;
- }
- :global(.slick-next){
- padding: 2px 0px 0px 0px !important;
- }
- :global(.slick-dots){
- position: absolute!important;
- bottom: 20px!important;
- z-index: 100;
- }
- :global(.slick-prev){
- background-color: rgb(50,150,250) !important;
- left: 8px !important;
- z-index: 100 !important;
- border-radius: 50%;
- }
- :global(.slick-next){
- background-color: rgb(50,150,250) !important;
- right: 8px !important;
- z-index: 100 !important;
- border-radius: 50%;
- }
-
- :global(.score-title-style){
- font-size: 14pt;
- padding-top: 18px;
- color: red;
- text-align: center;
- min-width: 110px;
- }
-
- :global(.score-num-style){
- font-size: 60pt;
- font-weight: bold;
- margin-top: 14px;
- color: white;
- text-align: center;
- }
-
- :global(.score-icon-style){
- font-size: 30pt;
- margin-top: -64px;
- color: white;
- float: right;
- }
-
- :global(.backlog-title-style){
- font-size: 14pt;
- margin-left: 22px;
- padding-top: 10px;
- color: white;
- margin-bottom: 20px;
- /* min-width: 120px; */
- }
- :global(.backlog-icontitle-style){
- font-size: 32px;
- margin-left: 22px;
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- margin-top: 22px;
- }
- :global(.backlog-icontitle-style1){
- font-size: 32px;
- margin-left: 24px;
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- margin-top: 22px;
- }
- :global(.backlog-icontitle-style2){
- font-size: 32px;
- margin-left: 18px;
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- margin-top: 22px;
- }
- :global(.backlog-icontitle-style3){
- font-size: 32px;
- margin-left: 22px;
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- margin-top: 22px;
- }
- :global(.backlog-icontitle-style4){
- font-size: 32px;
- margin-left: 18px;
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- margin-top: 22px;
- }
- :global(.backlog-icon-score){
- font-size: 32px;
- /* margin-left: 22px; */
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- /* margin-top: 22px; */
- }
-
- :global(.backlog-title-score){
- font-size: 14pt;
- margin-left: 12px;
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- }
-
- :global(.backlog-scoretitle-style){
- font-size: 32px;
- /* margin-left: 22px; */
- /* padding-top: 10px; */
- color: white;
- /* min-width: 120px; */
- /* margin-top: 20px; */
- margin: 9px 0px 9px 22px;
- }
- :global(.backlog-score-wrap){
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin: 20px 0px 0px 0px;
- }
-
-
- :global(.backlog-icon-title){
- font-size: 14pt;
- margin-left: 10px;
- /* padding-top: 10px; */
- color: #333333;
- /* min-width: 120px; */
- /* margin-top: 22px; */
- display: flex;
- align-items: center;
- }
- :global(.backlog-background-style){
- background: linear-gradient(135deg, #75baf3,#2177d5);
- }
- :global(.backlog-background-style1){
- background: linear-gradient(135deg, #ffa94d,#f76707);
- }
- :global(.backlog-background-style2){
- background:linear-gradient(135deg, #99ca6e,#48a447);
- /* linear-gradient(135deg, #aab5e2,#5f6ac2); */
- }
- :global(.backlog-background-style3){
- background: linear-gradient(135deg, #ffe066,#fcc419);
- }
- :global(.backlog-background-style4){
- background: linear-gradient(135deg, rgb(245, 121, 118),#c92a2a);
- /*#ea9a99,#de4e58 */
- }
-
- :global(.backlog-title-style2){
- font-size: 12pt;
- margin-left: 10px;
- padding-top: 2px;
- color: white;
- min-width: 500px;
- }
- :global(.backlog-style){
- font-size: 28pt;
- font-weight: bold;
- margin-left:22px;
- color: white;
- margin-top: 10px;
- }
- :global(.backlog-style-score){
-
- /* margin-left:22px; */
- color: white;
- /* margin-top: 5px; */
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 20px 0px 20px 0px;
- width: 100%;
- height: 100%;
- font-size: 38pt;
- font-weight: bold;
- }
- :global(.score-title){
- font-size: 16pt;
- /* font-weight: bold; */
- display: flex;
- align-items: center;
- /* margin-left:22px; */
- }
- :global(.score-content){
- display: flex;
- flex-direction: row;
- margin-bottom: 10px;
- }
- :global(.score-num){
- display: flex;
- align-items: center;
- font-size: 16pt;
- font-weight: bold;
- }
+:global(.home-userInfo-Icon) {
+ font-size: 16px;
+ margin-right: 5px;
+}
+:global(.home-userInfo-title) {
+ font-size: 13px;
+ color: #303133;
+ font-weight: bold;
+ white-space: nowrap;
+}
+:global(.home-userInfo-content) {
+ font-size: 20px;
+ font-weight: bold;
+ white-space: nowrap;
+ /* margin-right: 20px; */
+}
+:global(.home-always-title) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 10px 10px 0px;
+}
+:global(.home-always-left) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+:global(.home-always-badge) {
+ width: 4px;
+ height: 19px;
+ background-color: #4f69e9;
+ border-radius: 3px;
+ margin-top: 2px;
+ margin-right: 10px;
+}
+:global(.home-always-name) {
+ font-size: 14px;
+ color: #303133;
+ font-weight: bold;
+}
+:global(.home-always-icon) {
+ color: #909399;
+ font-size: 14px;
+}
-
- :global(.backlog-style4){
- font-size: 28pt;
- font-weight: bold;
- margin-left:22px;
- color: white;
- margin-top: 10px;
- }
- :global(.backlog-style2){
- font-size: 20pt;
- font-weight: bold;
- margin-left:10px;
- color: white;
- margin-top: -8px;
- }
- :global(.backlog-style3){
- font-size: 16pt;
- font-weight: bold;
- margin-left:10px;
- color: white;
- margin-top: -8px;
- }
- :global(.notice-title-style){
- color: rgb(255, 255, 255);
- font-size: 16pt;
- margin-left: 20px;
- padding-top: 6px;
- }
-
- :global(.notice-title-style span){
- float: right;
- margin-right: 48px;
- font-size: 14pt;
- margin-top: 6px;
- }
-
- :global(.notice-content-style ){
- color: white;
- line-height: 38px;
- margin-left: 20px;
- margin-top: 20px;
- font-size: 12pt;
- }
- :global(.notice-content-style span){
- margin-right: 16px;
- }
- :global(.statistical-title-style){
- border-bottom: 1px solid #d9d9d9;
- color: #333333;
- font-size: 18px;
- padding: 8px 0px 8px 20px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- }
- :global(.statistical-title-style2){
- border-bottom: 1px solid #d9d9d9;
- color: #333333;
- font-size: 14px;
- padding: 8px 0px 0px 20px;
- }
- :global(.badge-style){
- /* background: #ffffff;
- border: 2px solid #5f6ac2;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- margin-right:8px;
- display:inline-block;
- position: relative;
- top: -2px; */
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- :global(.backlog-icon-style){
- position: relative;
- top: -2px;
- margin-left: 45%;
- width: 30px;
- }
- :global(.backlog-icon-style2){
- position: relative;
- /* top: -2px; */
- /* width: 10px; */
- }
- :global(.backlog-icon-style3){
- position: relative;
- top: -2px;
- margin-left: calc(50% - 20px);
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
- border-top: 10px solid #3b8bde;
- }
- :global(.backlog-icon-style4){
- position: relative;
- top: -2px;
- margin-left: calc(50% - 20px);
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
- border-top: 10px solid #fa7b1c;
- }
- :global(.backlog-icon-style5){
- position: relative;
- top: -2px;
- margin-left: calc(50% - 20px);
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
- border-top: 10px solid #5faf52;
- }
- :global(.backlog-icon-style6){
- position: relative;
- top: -2px;
- margin-left: calc(50% - 20px);
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
- border-top: 10px solid #fdcc2e;
- }
- :global(.backlog-icon-style7){
- position: relative;
- top: -2px;
- margin-left: calc(50% - 20px);
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
- border-top: 10px solid #c92a2a;
- }
- .sideContent :global(.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title){
- padding: 0 10px !important;
- text-align: center;
- }
-
- .sideContent :global(.ant-menu-inline-collapsed){
- width: inherit!important;
- }
- .IndexPageTabs{
- background-color: inherit;
- }
-
- .IndexPageTabs :global(.ant-tabs-bar){
- background-color: #ecf4f6;
- padding: 0 10px;
- }
- /* :global(.header .IndexPage__loginMenu___xUJI4 span) {
- vertical-align: baseline!important;
- } */
- :global(.ant-select-combobox .ant-select-search__field) {
- z-index: auto!important;
- }
\ No newline at end of file
+:global(.badge-style) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+:global(.home-tech-col) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+:global(.home-tech-back) {
+ background-color: #fafafa;
+ padding: 8px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12) ;
+}
+:global(.home-tech-icon) {
+ font-size: 30px;
+ cursor: pointer;
+ z-index: 999;
+}
+:global(.home-tech-name) {
+ font-size: 12px;
+ font-weight: bold;
+ color: #303133;
+ margin-top: 5px;
+}
+:global(.home-row) {
+ width: 100%;
+ height: calc(35% - 70px);
+ display: flex;
+ padding: 0px 20px;
+ justify-content: space-between;
+ align-items: center;
+}
+:global(.home-rank) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 10px;
+}
+:global(.home-rank-index) {
+ width: 30px;
+ height: 30px;
+ margin-right: 40px;
+ color: #eac088;
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+:global(.home-rank-name) {
+ color: #303133;
+ font-size: 13px;
+ margin-right: 40px;
+ white-space: nowrap;
+}
+:global(.home-img) {
+ object-fit: contain;
+ width: 30px;
+ height: 30px;
+ margin-right: 40px;
+}
+:global(.home-rank > .ant-progress .ant-progress-text) {
+ margin-left: 30px;
+}
+:global(.home-job-title) {
+ display: flex;
+ align-items: center;
+}
+:global(.home-job-icon) {
+ font-size: 20px;
+ cursor: pointer;
+ margin-right: 5px;
+}
+:global(.home-job-content) {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: auto;
+ grid-template-columns: repeat(auto-fill, 30%);
+ justify-content: space-between;
+ padding: 0px 16px 16px 16px;
+}
+:global(.home-work-wrap) {
+ display: flex;
+ flex-direction: row;
+ padding: 10px 20px;
+ /* background-color: #fafafa; */
+ margin-bottom: 20px;
+ border-radius: 15px;
+ background: url("./../assets/home/prepare2.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+ /* align-items: center; */
+}
+:global(.home-work-wrap-overtime) {
+ display: flex;
+ flex-direction: row;
+ padding: 10px 20px;
+ /* background-color: #fafafa; */
+ margin-bottom: 20px;
+ border-radius: 15px;
+ background: url("./../assets/home/overtime.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+ /* align-items: center; */
+}
+:global(.home-work-wrap-over) {
+ display: flex;
+ flex-direction: row;
+ padding: 10px 20px;
+ /* background-color: #fafafa; */
+ margin-bottom: 20px;
+ border-radius: 15px;
+ background: url("./../assets/home/over.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+ /* align-items: center; */
+}
+:global(.home-work-wrap-warn) {
+ display: flex;
+ flex-direction: row;
+ padding: 10px 20px;
+ /* background-color: #fafafa; */
+ margin-bottom: 20px;
+ border-radius: 15px;
+ background: url("./../assets/home/warn.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+ /* align-items: center; */
+}
+:global(.home-work-more) {
+ display: flex;
+ flex-direction: row;
+ padding: 10px 25px;
+ /* background-color: #fafafa; */
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+ margin-bottom: 20px;
+ align-items: center;
+ color: #2177d5;
+ font-size: 13px;
+ white-space: nowrap;
+ border-radius: 15px;
+ /* font-weight: bold; */
+ justify-content: space-between;
+}
+:global(.home-more-icon) {
+ font-size: 12px;
+ margin-left: 5px;
+}
+:global(.home-work-icon) {
+ padding: 3px 5px;
+ margin-right: 10px;
+}
+:global(.home-work-right) {
+ white-space: nowrap;
+ display: flex;
+ flex-direction: column;
+ width: calc(100% - 71px);
+}
+:global(.home-work-top) {
+ display: flex;
+ flex-direction: row;
+}
+:global(.home-work-type-red) {
+ background-color: #ffeff0;
+ color: #ff3838;
+ padding: 3px 8px;
+ margin-right: 10px;
+ font-size: 13px;
+}
+:global(.home-work-type-yellow) {
+ background-color: #fff8ee;
+ color: #ffab2b;
+ padding: 3px 8px;
+ margin-right: 10px;
+ font-size: 13px;
+}
+:global(.home-work-type-black) {
+ background-color: #eef5ff;
+ color: #55a0f7;
+ padding: 3px 8px;
+ margin-right: 10px;
+ font-size: 13px;
+}
+:global(.home-work-type-green) {
+ background-color: #eef6eb;
+ color: #6dd230;
+ padding: 3px 8px;
+ margin-right: 10px;
+ font-size: 13px;
+}
+:global(.home-work-person) {
+ color: #606266;
+ font-size: 13px;
+ padding: 3px 8px;
+}
+:global(.home-work-title) {
+ font-size: 15px;
+ color: #303133;
+ padding: 5px 0px;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+:global(.home-work-date) {
+ color: #909399;
+ font-size: 13px;
+}
+:global(.home-work-detail) {
+ color: #2177d5;
+ font-size: 13px;
+ margin-top: 5px;
+}
+:global(.home-chart) {
+ display: flex;
+ height: 100%;
+ width: calc(50% - 10px);
+ flex-direction: column;
+ background-color: #fff;
+ border-radius: 5px;
+ min-width: 674px;
+}
+:global(.home-setting) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+:global(.home-setting-icon) {
+ color: #909399;
+ padding: 4px;
+}
+:global(.home-setting-icon):hover {
+ color: #909399;
+ background-color: #f3f4f6;
+ padding: 4px;
+ border-radius: 5px;
+ box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file
- -