异常统计

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

@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi-ui";
 import moment from "moment";
 import PerfectScrollbar from "perfect-scrollbar";
+import './inspection.less'
+import { log } from "ezuikit-js";
 
 
 let projectScrollbar;
@@ -12,12 +14,19 @@ const Inspection = ({ dispatch, actions, route, statistic }) => {
    const [selectProject, setSelectProject] = useState([])   //所选项目
    const [applyFilter, setApplyFilter] = useState([])     //应用筛选
    const [patrolAbnormal, setPatrolAbnormal] = useState([])     //巡检异常信息
+   const [checkPatrol, setCheckPatrol] = useState({})     //巡检异常查询
+   const [unfold, setUnfold] = useState(true)     //展开收起
+   const [picturePop, setPicturePop] = useState(false)  //图片弹窗
+   const [pictureId, setPictureId] = useState()  //图片id
+   const [pictureData, setPictureData] = useState({})  //图片数据
 
    const api = useRef();
+   const unfoldApi = useRef(false);
 
    // console.log(actions);
 
    useEffect(() => {
+
       dispatch(problem.getProjectPoms()).then((res) => {
          // console.log(res.payload.data);
          if (res.success) {
@@ -25,67 +34,101 @@ const Inspection = ({ dispatch, actions, route, statistic }) => {
             let apply = []
             res.payload.data?.rows?.map(v => {
                project.push({ name: v.pepProjectName || v.name || v.id, value: v.id })
-               v.projectApps.map(app => apply.push({ name: app.name, value: app.id }))
+               v.apps.map(app => apply.push({ name: app.name, value: app.id }))
             })
             setSelectProject(project)
             setApplyFilter(apply)
          }
       })
-      dispatch(problem.getAlarmLnspection({})).then((res) => {
+   }, [])
+
+   useEffect(() => {
+      if (projectScrollbar) projectScrollbar.destroy()
+      const domEquipment = document.getElementById("inspection");
+      if (unfold) {
+         projectScrollbar = new PerfectScrollbar("#inspection", {
+            suppressScrollY: true,
+         });
+         if (domEquipment && projectScrollbar) projectScrollbar.update()
+      } else {
+         projectScrollbar = new PerfectScrollbar("#inspection", {
+            suppressScrollX: true,
+         })
+         if (domEquipment && projectScrollbar) projectScrollbar.update()
+      }
+   })
+
+   useEffect(() => {
+      dispatch(problem.getAlarmLnspection(checkPatrol)).then((res) => {
          console.log(res.payload.data);
          if (res.success) {
             setPatrolAbnormal(res.payload.data)
          }
       })
-
-      projectScrollbar = new PerfectScrollbar("#inspection", {
-         suppressScrollY: true,
-      });
-   }, [])
+   }, [checkPatrol]);
 
 
    useEffect(() => {
-
-      const domEquipment = document.getElementById("inspection");
-      if (domEquipment && projectScrollbar) {
-         projectScrollbar.update();
+      if (patrolAbnormal && pictureId) {
+         console.log(patrolAbnormal.find(v => v.id == pictureId));
+         setPictureData(patrolAbnormal.find(v => v.id == pictureId))
       }
-   });
+   }, [pictureId]);
 
    return (
 
-      <div style={{ width: '100%', height: 250, backgroundColor: 'white', marginBottom: 20 }}>
-         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <div style={{ width: '100%', backgroundColor: 'white', marginBottom: 20 }}>
+         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
             <div style={{ width: 400, }}>
                <span style={{ width: 3, height: 20, background: '#005ABD', display: 'inline-block', margin: "0 10px 0 20px" }}></span>
                <span style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', marginRight: 10 }}>{statistic[route]}</span>
                <span style={{ fontSize: 12 }}>APPLY SEMI-AUTOMATIC INSPECTION</span>
                <div style={{ fontSize: 12 }}>仅保留48小时内的图片数据,每小时覆盖执行一次   <span style={{ fontWeight: 500, color: '#005ABD', fontSize: 12 }}>03专项2期：已阅共123个</span></div>
             </div>
-            <div style={{}}>
+            <div style={{ flex: 1, position: 'relative' }}>
                <Form
-                  onSubmit={(values) => console.log(values)}
-                  // onValueChange={values=>console.log(values)}
+                  onSubmit={(v) => {
+                     setCheckPatrol({
+                        appId: v.appId,
+                        noted: v.noted,
+                        projectId: v.projectId,
+                        timeStart: v.time == 'true' ?
+                           moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') :
+                           v.time == 'false' ?
+                              moment().day(moment().day() - 1).startOf('day').format('YYYY-MM-DD HH:mm:ss') : "",
+                        timeEnd: v.time == 'true' ?
+                           moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') :
+                           v.time == 'false' ?
+                              moment().day(moment().day() - 1).endOf('day').format('YYYY-MM-DD HH:mm:ss') : "",
+                     })
+                  }}
                   getFormApi={(formApi) => (api.current = formApi)}
                   layout="horizontal"
-                  style={{ position: "relative", width: "100%", flex: 1 }}
                >
-                  <Form.DatePicker
-                     type="dateRange"
+                  <Form.Select
                      labelPosition="left"
-                     style={{ width: 242 }}
+                     style={{ width: 80, marginBottom: 10 }}
+                     // new Date(new Date().setHours(00, 00, 00).getTime()), timeEnd: new Date(new Date().setHours(23, 59, 59).getTime())
                      label='时间筛选:'
                      field='time'
                      key='time'
-                     initValue={[new Date('2022-08-08'), new Date()]}
-                     onChange={(v) => console.log(v)}
-                  />
+                     placeholder="全部"
+                     showClear
+                  >
+                     {[{ name: '今日', value: 'true' }, { name: '昨日', value: 'false' }].map((item) => {
+                        return (
+                           <Form.Select.Option key={item.value} value={item.value}>
+                              {item.name}
+                           </Form.Select.Option>
+                        );
+                     })}
+                  </Form.Select>
                   <Form.Select
                      label='所选项目:'
                      labelPosition="left"
                      field='projectId'
                      key='projectId'
-                     style={{ width: 116, marginRight: 10, color: "#F9F9F9", }}
+                     style={{ width: 116, marginRight: 10, color: "#F9F9F9", marginBottom: 10 }}
                      placeholder="全部"
                      showClear
                   >
@@ -102,7 +145,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => {
                      labelPosition="left"
                      field='appId'
                      key='appId'
-                     style={{ width: 116, marginRight: 10, color: "#F9F9F9", }}
+                     style={{ width: 116, marginRight: 10, color: "#F9F9F9", marginBottom: 10 }}
                      placeholder="全部"
                      showClear
                   >
@@ -119,7 +162,7 @@ const Inspection = ({ dispatch, actions, route, statistic }) => {
                      labelPosition="left"
                      field='noted'
                      key='noted'
-                     style={{ width: 116, marginRight: 10, color: "#F9F9F9", }}
+                     style={{ width: 116, marginRight: 54, color: "#F9F9F9", marginBottom: 10 }}
                      placeholder="全部"
                      showClear
                   >
@@ -131,20 +174,94 @@ const Inspection = ({ dispatch, actions, route, statistic }) => {
                         );
                      })}
                   </Form.Select>
-
+                  <Button theme="solid" type="primary" htmlType='submit' style={{ width: 65, height: 30, borderRadius: 3, position: 'absolute', right: 2, bottom: 12 }}>查询</Button>
                </Form>
             </div>
          </div>
-
-         <div id="inspection" style={{ width: "100%", whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
-            {patrolAbnormal?.map(v => <div style={{ width: 400, height: 238, display: 'inline-block' }}>
+         <div
+            onMouseMove={() => document.getElementById('unfold').style.display = 'none'}
+            onMouseOut={() => document.getElementById('unfold').style.display = 'block'}
+            id="inspection" style={{ width: 'calc(100% - 20px)', marginLeft: 10, height: unfold ? 280 : 600, whiteSpace: unfold ? 'nowrap' : '', position: "relative", }}>
+            {patrolAbnormal?.map(v =>
+               <div key={'name' + v.id}
+                  style={{
+                     width: 400, height: 238,
+                     display: 'inline-block',
+                     margin: '8px 20px 8px 0',
+                     boxShadow: ' 0px 2px 12px 1px #F2F3F5',
+                     borderRadius: 2, border: '1px solid rgba(220,222,224,0.2)'
+                  }}
+                  onClick={() => {
+                     console.log(v.id);
+                     setPicturePop(true)
+                     setPictureId(v.id);
+                  }}
+               >
                   <img src={`/_file-server/${v.screenshot}`} style={{ width: 400, height: 182 }} />
-               <div><span>获取时间：{moment(v.createTime).format("YYYY-MM-DD HH:MM:SS")}</span><span></span></div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', margin: '10px 6px 0', color: '#005ABD' }}>
+                     <span style={{ fontSize: 12 }}>获取时间：{moment(v.createTime).format("YYYY-MM-DD HH:MM:SS")}</span>
+                     <span >{v.app?.name}</span>
+                  </div>
                </div>)}
 
          </div>
+         <div id="unfold"
+            onMouseMove={(e) => e.stopPropagation()}
+            onMouseOut={(e) => e.stopPropagation()}
+            onClick={() => setUnfold(!unfold)}
+            style={{
+               width: 'calc(100% - 20px)', marginLeft: 10, height: 24,
+               background: unfold ? 'linear-gradient(180deg, rgba(36,139,255,0) 0%, rgba(36,139,255,0.38) 100%)' : 'linear-gradient(180deg, rgba(218,218,218,0) 0%, rgba(212,212,212,0.38) 100%)',
+               borderRadius: 3,
+               lineHeight: '24px',
+               fontSize: 14,
+               zIndex: 100,
+               position: 'relative',
+               top: unfold ? -20 : 6,
+               left: 0,
+               textAlign: 'center',
+               color: unfold ? 'rgba(0,90,189,0.7)' : '#969799',
+               cursor: 'pointer',
+            }}>{unfold ? '展开更多' : '收起'}<img style={{ width: 20, height: 20, paddingTop: 8 }} src={`/assets/images/problem/${unfold ? "dropDown" : 'pullUp'}.png`} />
+         </div>
+         {picturePop ? <Modal
+            title={<div>{pictureData.app?.name}
+               <span style={{
+                  width: 80, height: 20, display: 'inline-block',
+                  background: 'url(/assets/images/problem/preview.png)',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: '100% 100%',
+                  color: '#FFFFFF', fontSize: 12,
+                  textAlign: 'center', lineHeight: '20px', marginLeft: 10,
+               }}>
+                  未读  { }/{patrolAbnormal.length}
+               </span>
+            </div>}
+            hasCancel={false}
+            footer={<div>
+               <Button style={{ borderRadius: 2 }}>上一张</Button>
+               <Button>下载地址</Button>
+               <Button>进入系统</Button>
+               <Button>下一张</Button>
+            </div>}
+            visible={true}
+            onOk={() => {
 
+            }}
+            width={837}
+            onCancel={() => setPicturePop(false)}
+         >
+            <div>
+               {pictureData.notedTime ? <span>核验信息:{pictureData.notedPepUser} {pictureData.notedTime}</span>:""}
+               <span>截取时间:{moment(pictureData.createTime).format("YYYY-MM-DD HH:MM:SS")}</span>
+            </div>
+            <img src={`/_file-server/${pictureData.screenshot}`}
+               style={{ width: 789, height: 359 }}
+            />
+         </Modal>
+            : ""
 
+         }
       </div >
    )
 }

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

@@ -6,6 +6,7 @@ import { SkeletonScreen, } from "$components";
 
 const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition }) => {
 
+
    const [selected, setSelected] = useState([])  //表格被勾选项
    const api = useRef();
 
@@ -67,7 +68,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
                            label={collectData.common.name + ':'}
                            field={collectData.common.field}
                            key={collectData.common.field}
-                           // defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
+                           // defaultPickerValue={['2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
                            // initValue={[new Date('2022-08-08 00:00'), new Date()]}
                            onChange={(v) => console.log(v)}
                         />)
@@ -76,21 +77,15 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
                   </Form>
                   <div
                      style={{
-                        width: 170,
+                        width: 138,
                         display: "flex",
                         justifyContent: "space-between",
                         alignItems: "flex-end",
                         marginRight: 10
                      }}
                   >
-                     <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, }}
-                     >
-                        导出
-                     </Button>
+                     <img title='导出' src="/assets/images/problem/export.png" style={{ width: 24, height: 24 }} onClick />
+                     <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 24, height: 24 }} onClick={() => setSetup(true)} />
                      <Button
                         theme="solid"
                         type="primary"
@@ -103,7 +98,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
                            });
                         }}
                      >
-                        搜索
+                        查询
                      </Button>
                   </div>
                </div>
@@ -127,14 +122,14 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
                   }}
                   rowSelection={{
                      selectedRowKeys: selected,
-                     onSelect: (record, selected) => {
-                        console.log(`select row: ${selected}`, record);
-                     },
-                     onSelectAll: (selected, selectedRows) => {
-                        console.log(`select all rows: ${selected}`, selectedRows);
-                     },
+                     // 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);
+                        // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                         setSelected(selectedRows.map(v => v.key))
                      },
                   }}
@@ -148,12 +143,12 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
                }}
             >
                <div>
-                  <div style={{ display: 'inline-block', lineHeight: '30px' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}>{selected.length}条</span>问题</div>
+                  <div style={{ display: 'inline-block', lineHeight: '30px', fontSize: 13 }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB',margin:'0 6px' }}>{selected.length}条</span>问题</div>
                   <Button onClick={() => setSelected(["156468", "257425"])} 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" }}>
+                  <span style={{ lineHeight: "30px", fontSize: 13 }}>
                      共{100}个问题
                   </span>
                   <Pagination
@@ -170,7 +165,7 @@ const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition
                </div>
 
             </div>
-         </div >
+         </div>
       </>
    )
 }