Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/OperationalService into dev

web/client/src/layout/components/header/index.jsx

@@ -67,25 +67,43 @@ const Header = (props) => {
                         text={
                            <div
                               style={{
-                                 marginLeft: 20,
+                                 marginLeft: -8,
                                  display: "inline-block",
                                  color: "white",
                               }}
                            >
-                              <Avatar size="extra-small" color="light-blue" style={{marginRight:4}}>
-                                    U
+                              <Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
+                                 {user?.name?.substr(0, 1)}
                               </Avatar>
                               <div style={{
                                  display: "inline-block", position: "relative",
                                  top: 10,
                                  left: 4,
                                  marginRight: 4,
-                              }}>
+                              }}
+                              >
                               </div>
                            </div>
                         }
                      >
-                        <Nav.Item itemKey={"logout"} text={"退出"} />
+                        <div style={{ width: 200, padding: 16, background: '#c7bebeeb' }}>
+                           <div style={{ display: "flex" }}>
+                              <Avatar size="default" color="light-blue" style={{ marginRight: 4 }}>
+                                 {user?.name?.substr(0, 1)}
+                              </Avatar>
+                              <div style={{ fontSize: 12 }}>
+                                 {user.name}
+                                 <div title={user?.department?.map(v => v.name + '、')} style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{user?.department?.map(v => v.name + '、')}</div>
+                              </div>
+                           </div>
+                           <div>用户中心</div>
+                           <div>安全认证</div>
+                        </div>
+                        <Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} />
+
+                        {/* collapseButton   collapseText */}
+
+
                      </Nav.Sub>
                   </>
                }

web/client/src/sections/auth/containers/login.jsx

@@ -8,41 +8,41 @@ import { IconLock, IconUser } from '@douyinfe/semi-icons';
 import '../style.less'
 
 const Login = props => {
-    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
-    const form = useRef();
+   const { dispatch, user, error, actions, apiRoot, isRequesting } = props
+   const form = useRef();
 
-    useEffect(() => {
-        if (error) {
-            Toast.error(error);
-            form.current.setValue('password', '')
-        }
-    }, [error])
+   useEffect(() => {
+      if (error) {
+         Toast.error(error);
+         form.current.setValue('password', '')
+      }
+   }, [error])
 
-    useEffect(() => {
-        if (user && user.authorized) {
-            dispatch(push('/console'));
-            localStorage.setItem('poms_open_sider', JSON.stringify([]))
-            localStorage.removeItem('poms_selected_sider')
-        }
-    }, [user])
+   useEffect(() => {
+      if (user && user.authorized) {
+         dispatch(push('/console'));
+         localStorage.setItem('poms_open_sider', JSON.stringify([]))
+         localStorage.removeItem('poms_selected_sider')
+      }
+   }, [user])
 
-    return (
-        <div style={{
-            // height: '100vh',
-            //  backgroundImage: "url('/assets/images/background/loginBackground.gif')",
-            // backgroundSize: 'cover',
-            // backgroundRepeat: 'no-repeat',
-            // position: 'relative',
-        }}>
-            <video
-                autoPlay loop muted
-                style={{
-                    width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)'
-                }}
-                src="/assets/video/login_bg.mp4"
-                type="video/mp4"
-            />
-            <img src='/assets/images/background/loginBackground.gif' style={{
+   return (
+      <div style={{
+         // height: '100vh',
+         //  backgroundImage: "url('/assets/images/background/loginBackground.gif')",
+         // backgroundSize: 'cover',
+         // backgroundRepeat: 'no-repeat',
+         // position: 'relative',
+      }}>
+         <video
+            autoPlay loop muted
+            style={{
+               width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)'
+            }}
+            src="/assets/video/login_bg.mp4"
+            type="video/mp4"
+         />
+         {/* <img src='/assets/images/background/loginBackground.gif' style={{
                 width: "100%",
                 height: 'calc(100vh - 4px)',
                 objectFit: "cover",
@@ -51,65 +51,92 @@ const Login = props => {
                 top: 0,
                 left: 0,
                 zIndex: "5"
-            }} />
+            }} /> */}
+         <div style={{
+            width: 600,
+            height: 90,
+            objectFit: "cover",
+            objectPosition: 'left top',
+            position: 'absolute',
+            top: 139,
+            left: 41,
+            zIndex: 5,
+            fontSize: 14,
+            color: ' #005ABD',
+            display:'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+         }}>
+            <div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>POMS运维中台管理系统—</span> 为企业数字化转型提供安全、稳定、高效的数字化运维底座</div>
+            <div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>高效—</span> 为运维智能化升级提供领先的创新技术和平台管理</div>
+            <div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>智能—</span>助力数字化转型和智能化升级一步到位</div>
+         </div>
+         <div style={{
+            width: 512,
+            height: '100%',
+            padding: '45px 60px',
+            background: 'rgb(255 255 255 / 50%)',
+            backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            zIndex: "6",
+            textAlign: 'center',
+         }}>
             <div style={{
-                width: 446,
-                height: 348,
-                padding: '45px 60px',
-                background: 'linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,.3))',
-                backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
-                position: 'absolute',
-                top: '33.89%',
-                right: '16.43%',
-                zIndex: "6"
+               width: 388,
+               marginTop: "40%"
             }}>
-                <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
-                    <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
-                </div>
-                <Form
-                    onSubmit={values => {
-                        dispatch(login(values.username, values.password)).then(res => {
-                            const data = res.payload.user
-                            dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token ,pomsUserId:data.pomsUserInfo.id}))
-                        })
-                    }}
-                    getFormApi={formApi => form.current = formApi}
-                >
-                    <Form.Input
-                        className='inputbgc'
-                        field='username'
-                        noLabel={true}
-                        label='用户名'
-                        placeholder='请输入账号'
-                        prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
-                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
-                    />
-                    <Form.Input
-                        field='password'
-                        noLabel={true}
-                        mode="password"
-                        autoComplete=""
-                        placeholder='请输入密码'
-                        label='密码'
-                        prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
-                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
-                    />
-                    <Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
-                </Form>
+               <img src="/assets/images/background/user_login.png" alt="" style={{ width: 324, height: 24, marginBottom: 71 }} />
+               <Form
+                  onSubmit={values => {
+                     dispatch(login(values.username, values.password)).then(res => {
+                        const data = res.payload.user
+                        dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, pomsUserId: data.pomsUserInfo.id }))
+                     })
+                  }}
+                  getFormApi={formApi => form.current = formApi}
+               >
+                  <Form.Input
+                     className='inputbgc'
+                     field='username'
+                     noLabel={true}
+                     label='用户名'
+                     placeholder='请输入账号'
+                     prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                     style={{ background: '#FFFFFF', height: 46, marginBottom: 33, border: '1px solid #E0EFFF', borderRadius: '4px' }}
+                  />
+                  <Form.Input
+                     field='password'
+                     noLabel={true}
+                     mode="password"
+                     autoComplete=""
+                     placeholder='请输入密码'
+                     label='密码'
+                     prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                     style={{ background: '#FFFFFF', height: 46, border: '1px solid #E0EFFF', borderRadius: '4px' }}
+                  />
+                  <img src="/assets/images/background/xiangqi.png" style={{ width: 112, height: 14, margin: "4px 0 0 278px" }} />
+                  <Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 56, height: 46, backgroundColor: '#005ABD', borderRadius: '3px' }}>立即登录</Button>
+
+               </Form>
+
             </div>
-        </div>
-    );
+
+         </div>
+      </div>
+   );
 }
 
 function mapStateToProps (state) {
-    const { auth, global } = state;
-    return {
-        user: auth.user,
-        error: auth.error,
-        actions: global.actions,
-        apiRoot: global.apiRoot,
-        isRequesting: auth.isRequesting
-    }
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      error: auth.error,
+      actions: global.actions,
+      apiRoot: global.apiRoot,
+      isRequesting: auth.isRequesting
+   }
 }
 
 export default connect(mapStateToProps)(Login);

web/client/src/sections/problem/components/statistics.jsx

@@ -6,24 +6,27 @@ const Statistics = ({ dispatch, actions, close, modalName, visible, appData }) =
 
 
    return (
-      <div style={{ width: '100%', height: 180, border: '1px solid #00000012', backgroundColor: 'white', marginBottom: 20 }}>
+      <div style={{ width: '100%', height: 180, backgroundColor: 'white', marginBottom: 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <div>数据异常统计</div>
-            <DatePicker
+            {/* <DatePicker
                type="dateTimeRange"
                style={{ width: 405 }}
                // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
                value={[new Date('2022-08-08 00:00'), new Date('2022-08-09 00:00')]}
                prefix='统计时段：'
                onChange={console.log}
-            />
+            /> */}
          </div>
-         <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}>
+         {/* <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around', marginTop: 8 }}>
             <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
             <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
             <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
             <div style={{ width: 'calc(25% - 20px)', height: 126, backgroundColor: '#F2F3F5', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂未开放敬请期待</div>
 
+         </div> */}
+         <div style={{ fontSize: 32, fontFamily: 'YouSheBiaoTiHei', fontWeight: 500, color: '#005ABD', textIndent:60, lineHeight: '156px', background: 'url(/assets/images/problem/await.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: 'calc(100% - 40px)', height: '156', margin: '0 0 0 10px' }}>
+         暂未开放   敬请期待
          </div>
       </div>
    )

web/client/src/sections/problem/components/tableData.jsx

@@ -4,8 +4,9 @@ import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi
 import { SkeletonScreen, } from "$components";
 
 
-const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
+const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }) => {
 
+   const [selected, setSelected] = useState([])  //表格被勾选项
    const api = useRef();
 
    useEffect(() => {
@@ -67,7 +68,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
                            field={collectData.common.field}
                            key={collectData.common.field}
                            // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
-                           values={[new Date('2022-08-08 00:00'), new Date()]}
+                           // initValue={[new Date('2022-08-08 00:00'), new Date()]}
                            onChange={(v) => console.log(v)}
                         />)
                         return frame
@@ -82,17 +83,11 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
                         marginRight: 10
                      }}
                   >
-                     <img src="/assets/images/problem/setup.png"
-                        style={{ width: 24, height: 24 }}
-                        onClick={() => setSetup(true)} />
+                     <img src="/assets/images/problem/setup.png" style={{ width: 24, height: 24 }} onClick={() => setSetup(true)} />
                      <Button
                         theme="solid"
                         type="primary"
-                        style={{
-                           width: 65,
-                           height: 30,
-                           borderRadius: 3,
-                        }}
+                        style={{ width: 65, height: 30, borderRadius: 3, }}
                         onClick={() => {
                            api.current.validate().then((v) => {
                               console.log(v);
@@ -112,42 +107,60 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
                placeholder={SkeletonScreen()}
             >
                <Table
-                  columns={[{ title: '叫', dataIndex: 'name', }]}
-                  dataSource={[{ name: '1', }]}
+                  columns={exhibition}
+                  dataSource={[{ key: "156468", 1: '1', }, { key: "257425", 2: '555', }]}
                   bordered={false}
                   empty="暂无数据"
-                  style={{
-                     padding: "0px 20px",
-                  }}
+                  style={{ padding: "0px 20px", }}
                   pagination={false}
                   onRow={(record, index) => {
                      if (index % 1 === 0) {
-                        return { style: { background: '' } }
+                        return { style: { background: '#FAFCFF' } }
                      }
                   }}
+                  rowSelection={{
+                     selectedRowKeys: selected,
+                     onSelect: (record, selected) => {
+                        console.log(`select row: ${selected}`, record);
+                     },
+                     onSelectAll: (selected, selectedRows) => {
+                        console.log(`select all rows: ${selected}`, selectedRows);
+                     },
+                     onChange: (selectedRowKeys, selectedRows) => {
+                        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+                     },
+                  }}
                />
             </Skeleton>
             <div
                style={{
                   display: "flex",
-                  justifyContent: "flex-end",
+                  justifyContent: "space-between",
                   padding: "20px 20px",
                }}
             >
-               <span style={{ lineHeight: "30px" }}>
-                  共{100}个设备
-               </span>
-               <Pagination
-                  className="22"
-                  total={100}
-                  showSizeChanger
-                  currentPage={1}
-                  pageSizeOpts={[10, 20, 30, 40]}
-                  onChange={(currentPage, pageSize) => {
-                     // setQuery({ limit: pageSize, page: currentPage - 1 });
-                     // page.current = currentPage - 1
-                  }}
-               />
+               <div>
+                  <div style={{ display: 'inline-block', lineHeight: '30px' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}>0条</span>问题</div>
+                  <Button style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}>全选</Button>
+                  <Button type='primary' theme='solid' style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量确认</Button>
+               </div>
+               <div style={{ display: 'flex', }}>
+                  <span style={{ lineHeight: "30px" }}>
+                     共{100}个问题
+                  </span>
+                  <Pagination
+                     className="22"
+                     total={100}
+                     showSizeChanger
+                     currentPage={1}
+                     pageSizeOpts={[10, 20, 30, 40]}
+                     onChange={(currentPage, pageSize) => {
+                        // setQuery({ limit: pageSize, page: currentPage - 1 });
+                        // page.current = currentPage - 1
+                     }}
+                  />
+               </div>
+
             </div>
          </div >
       </>
@@ -157,8 +170,9 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup }) => {
 
 function mapStateToProps (state) {
    const { auth, global, members } = state;
+   // console.log(auth.user);
    return {
-      // user: auth.user,
+      user: auth.user,
       // actions: global.actions,
       // global: global,
       // members: members.data,

web/client/src/sections/problem/containers/dataAlarm.jsx

@@ -14,6 +14,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
    const [collect, setCollect] = useState([])  //搜索结构
    const [setup, setSetup] = useState(false);  //表格设置是否显现
    const [tableSetup, setTableSetup] = useState([]);  //单一表格设置信息
+   const [exhibition, setExhibition] = useState([]);  //单一表格展现信息
 
    const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' }
 
@@ -22,10 +23,25 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
       setRoute(match.url.substring(match.url.lastIndexOf("/") + 1, match.url.length))
       console.log(match.url)
       console.log(tableType);
+
+
    }, [])
 
 
    useEffect(() => {
+
+      if (route) {
+         //初始化表格显示设置
+         let data = columns[route]
+         data.splice(0, 1)
+         if (tableType[route] == 'dataAbnormal') data.splice(6, 0, '6')
+         localStorage.getItem(tableType[route]) == null
+            ? localStorage.setItem(
+               tableType[route],
+               JSON.stringify(data)
+            )
+            : "";
+      }
       attribute(tableType[route], route);
    }, [route])
 
@@ -146,7 +162,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
    const columns = {
       dataLnterrupt: ['0', '1', '2', '3', '4', '5', '6', '7', '8',],
       dataAbnormal: ['0', '1', '2', '3', '15', '5', '6', '7', '8'],
-      strategyHit: ['0', '1', '2', '3', '17', '5', '10', '11', '7', '8'],
+      strategyHit: ['0', '1', '2', '3', '17', '5', '10', '11', '8'],
       videoAbnormal: ['0', '1', '2', '3', '21', '20', '5', '7', '8'],
       useAbnormal: ['0', '1', '23', '24', '15', '25', '7', '8'],
       deviceAbnormal: ['0', '1', '2', '3', '15', '19', '5', '7', '8'],
@@ -183,17 +199,38 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
 
 
 
-   const attribute = (tableType, route) => {
-      let arr = localStorage.getItem(tableType)
-         ? JSON.parse(localStorage.getItem(tableType))
+   const attribute = (name, route) => {
+      let arr = localStorage.getItem(name)
+         ? JSON.parse(localStorage.getItem(name))
          : [];
-      // if (route) {
-      //    console.log(tableList[route]);
-      //    console.log([...[1,2,3],...[2,3]]);
-      //    let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value))
-      //    console.log(setup);
-      //    setTableSetup([{ list: setup }])
-      // }
+      console.log(arr);
+      if (route) {
+         let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value))
+
+         let data = ['0']
+         if (tableType[route] == 'dataAbnormal') {
+            data = ['0', '6']
+            data.splice(1, 0, ...arr)
+         } else {
+            data.splice(1, 0, ...arr)
+         }
+
+
+         console.log(data)
+
+         let TableDisplay = data.map(v => {
+            let datas = columnAll.find(vv => v == vv.value)
+            if (datas) {
+               return { title: datas.name, dataIndex: datas.value, rowKey: datas.value }
+            }
+
+         })
+
+         console.log(TableDisplay);
+         console.log(setup);
+         setExhibition(TableDisplay)
+         setTableSetup([{ list: setup }])
+      }
 
       // for (let i = 0; i < arr.length; i++) {
       // let colum = column.filter((item) => {
@@ -219,24 +256,25 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
       }
    }
    return (
-      <div>
+      <div style={{minWidth:1000}}>
          {/* 滞留提醒 */}
          <div>
             {abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时，请尽快处理！</div></div> : ""}
          </div>
-         <Statistics />
+         {/* <Statistics />
          <TableData
             route={route}
             collectData={collectData}
             setSetup={setSetup}
-         />
+            exhibition={exhibition}
+         /> */}
          {setup ? (
             <Setup
                tableType={tableType[route] || []}
                tableList={tableSetup}
                close={() => {
                   setSetup(false);
-                  attribute(tableType[route]);
+                  attribute(tableType[route], route);
                   // setcameraSetup(false);
                }}
             />