滚动

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

@@ -27,7 +27,7 @@ const Header = (props) => {
          if (v == 'resource_manage') ['facility', 'workOrder', 'means'].map(u => modal.push(u))
          if (v == 'customer_service') ['service', 'workOrder', 'means'].map(u => modal.push(u))
       })
-      modal.push('console')
+      modal.push('control')
       modal = [...new Set(modal)]
       modalRole = headerItems?.filter(v => modal.includes(v.itemKey))
       if (userRole?.includes('SuperAdmin') || userRole?.includes('admin')) modalRole = headerItems

web/client/src/sections/control/containers/control.jsx

@@ -38,25 +38,26 @@ const Control = (props) => {
    const [alter, setAlter] = useState(false);  //工具添加或编辑
    const [compile, setCompile] = useState({});  //工具编辑的内容
    const [toolShow, setToolShow] = useState([]);  //工具展示
+   const [toolData, setToolData] = useState(0);  //工具数
    const [tableSetup, setTableSetup] = useState([]);  //单一表格设置信息
    const [workData, setWorkData] = useState({});  //我的工作台数据
    const [dataBI, setDataBI] = useState({});  //查询BI分析数据-数据
    const [videoBI, setVideoBI] = useState([]);  //查询BI分析数据-视频
    const [appBI, setAppBI] = useState([]);  //查询BI分析数据-应用
    const [efficiencyBI, setEfficiencyBI] = useState({});  //查询BI分析数据-问题处置
-   const [query, setQuery] = useState({ limit: 10, page: 0, projectCorrelationId: '', types: '1,2,3,4' });  //最新动态
    const [querydata1, setQueryData1] = useState([]);  //最新动态数据
    const [long, setLong] = useState('');  //最新动态设置
    const [pomsList, setPomsList] = useState([]);  //项目
    const [projectId, setProjectId] = useState('');  //项目id
    const [ask, setASk] = useState(true);  //是否继续请求
    const [setData, setSetData] = useState();  //设置总数
+   const [projectData, setProjectData] = useState([]);  //项目总信息
 
 
    const exhibition = useRef({ workbench: [], statistical: [] })  //页面结构
    const FormApi = useRef()
    const querydata = useRef([])//最新动态数据
-   // const query={ limit: 10, page: 0, projectCorrelationId: '', types: '1,2,3,4' }  //最新动态
+   const query = useRef({ limit: 10, page: 0, projectCorrelationId: '', types: '1,2,3,4' })  //最新动态
 
    // websocket 使用测试
    useEffect(() => {
@@ -88,6 +89,7 @@ const Control = (props) => {
       async function concentration2 () {
          await dispatch(install.getProjectPoms({ global: 1 })).then((res) => {  //获取已绑定项目
             if (res.success) {
+               setProjectData(res.payload.data?.rows?.filter(v => v.pepProjectIsDelete !== 1))
                let data = res.payload.data?.rows?.filter(v => v.pepProjectIsDelete !== 1)?.map(v => ({ pepProjectId: v.id, pepProjectName: v.pepProjectName || v.name }))
                setPomsList(data)
                setProjectId(data[0]?.pepProjectId)
@@ -95,6 +97,72 @@ const Control = (props) => {
          })
       }
       concentration2()
+
+      const line = document.getElementById("line")
+      const news = document.getElementById("news")
+      if (line && news) {
+         news.onscroll = () => {
+            if ((line.clientHeight - 578) < news.scrollTop + 10) {
+               query.current = { ...query.current, page: query.current.page + 1 }
+               if (exhibition?.current?.dynamic?.length > 0) {
+                  dispatch(control.getLatestDynamic({ ...query.current, projectCorrelationId: pepProjectId, page: query.current.page })).then(res => {
+                     console.log(res.payload.data)
+                     let branches = [...res.payload.data?.appear, ...res.payload.data?.confirm, ...res.payload.data?.notice]
+                     if (branches?.length == 10) {
+                        news.scrollTop = news.scrollTop - 640
+                     }
+                     let data = querydata.current
+                     if (res.success) {
+                        if (exhibition?.current?.dynamic?.find(v => v.key == 'discovery')) {
+                           res.payload.data?.appear?.map(v => data.push({
+                              seed: 'discovery',
+                              project: v.projectName,
+                              sources: v.alarmInfo?.sourceName,
+                              type: v.type,
+                              time: v.time,
+                              id: v.id,
+                           }))
+                        }
+                        if (exhibition?.current?.dynamic?.find(v => v.key == 'confirm')) {
+                           res.payload.data?.confirm?.map(v => data.push({
+                              seed: 'confirm',
+                              project: v.projectName,
+                              sources: v.alarmInfo?.source,
+                              type: v.alarmInfo?.type,
+                              time: v.confirmTime,
+                              userName: v.userName,
+                              id: v.id,
+                           }))
+                        }
+                        if (exhibition?.current?.dynamic?.find(v => v.key == 'notice')) {
+                           res.payload.data?.notice?.map(v => data.push({
+                              seed: 'notice',
+                              time: v.time,
+                              project: v.projectName,
+                              userName: v.userName?.map(u => u.name),
+                              alarmPushConfig: v.alarmPushConfig?.name,
+                              tactics: v.tactics,
+                              interval: v.tacticsParams?.interval,
+                              deviceProportion: v.tacticsParams?.deviceProportion,
+                              id: v.id,
+                           }))
+                        }
+                        data.sort((a, b) => {
+                           if (moment(a.time).isBefore(b.time)) {
+                              return 1
+                           } else {
+                              return -1
+                           }
+                        })
+                        console.log(data)
+                        querydata.current = data
+                        setQueryData1(data)
+                     }
+                  })
+               }
+            }
+         }
+      }
       return () => {
 
       }
@@ -103,7 +171,6 @@ const Control = (props) => {
    useEffect(() => {
       async function concentration1 () {
          if (pepProjectId) setProjectId(pepProjectId)
-         if (!projectId) {
          // 工作台数据请求
          await dispatch(control.getConsoleCount({ pepProjectId: pepProjectId })).then(res => {
             if (res.success) setWorkData(res.payload.data)
@@ -124,6 +191,13 @@ const Control = (props) => {
             if (res.success) setEfficiencyBI(res.payload.data[0])
          })
       }
+      concentration1()
+
+   }, [pepProjectId])
+
+
+   useEffect(() => {
+      async function concentration4 () {
          // 统计概览--异常&问题
          await dispatch(control.getConsoleAbnormal({ pepProjectId: pepProjectId || projectId })).then(res => {
             if (res.success) {
@@ -153,24 +227,20 @@ const Control = (props) => {
             }
          })
       }
-      concentration1()
+      concentration4()
-
+   }, [projectId])
-
-
-
-
-   }, [pepProjectId, projectId])
 
    // console.log(exhibition?.current?.dynamic);
    useEffect(() => {
       //查询最新动态
       async function concentration3 () {
          if (exhibition?.current?.dynamic?.length > 0) {
-            console.log(query?.page);
+            let dynamicData = [1]
-            await dispatch(control.getLatestDynamic({ ...query, projectCorrelationId: pepProjectId })).then(res => {
+            await dispatch(control.getLatestDynamic({ ...query.current, projectCorrelationId: pepProjectId })).then(res => {
                // console.log(res.payload.data);
                if (res.payload.data?.appear?.length || 0 + res.payload.data?.confirm?.length + res.payload.data?.notice?.length < 10) setASk(false)
                let data = []
+               querydata.current = []
                if (res.success) {
                   if (exhibition?.current?.dynamic?.find(v => v.key == 'discovery')) {
                      res.payload.data?.appear?.map(v => data.push({
@@ -223,70 +293,7 @@ const Control = (props) => {
       concentration3()
    }, [pepProjectId, exhibition.current])
 
-   useEffect(() => {
-      const line = document.getElementById("line")
-      const news = document.getElementById("news")
-      if (line && news) {
-         news.onscroll = () => {
-            if ((line.clientHeight - 600) < news.scrollTop) {
-               setQuery({ ...query, page: query.page + 1 })
-               if (exhibition?.current?.dynamic?.length > 0) {
-                  dispatch(control.getLatestDynamic({ ...query, projectCorrelationId: pepProjectId, page: query.page + 1 })).then(res => {
-                     console.log(res.payload.data)
-                     let data = querydata.current
-                     if (res.success) {
-                        if (exhibition?.current?.dynamic?.find(v => v.key == 'discovery')) {
-                           res.payload.data?.appear?.map(v => data.push({
-                              seed: 'discovery',
-                              project: v.projectName,
-                              sources: v.alarmInfo?.sourceName,
-                              type: v.type,
-                              time: v.time,
-                              id: v.id,
-                           }))
-                        }
-                        if (exhibition?.current?.dynamic?.find(v => v.key == 'confirm')) {
-                           res.payload.data?.confirm?.map(v => data.push({
-                              seed: 'confirm',
-                              project: v.projectName,
-                              sources: v.alarmInfo?.source,
-                              type: v.alarmInfo?.type,
-                              time: v.confirmTime,
-                              userName: v.userName,
-                              id: v.id,
-                           }))
-                        }
-                        if (exhibition?.current?.dynamic?.find(v => v.key == 'notice')) {
-                           res.payload.data?.notice?.map(v => data.push({
-                              seed: 'notice',
-                              time: v.time,
-                              project: v.projectName,
-                              userName: v.userName?.map(u => u.name),
-                              alarmPushConfig: v.alarmPushConfig?.name,
-                              tactics: v.tactics,
-                              interval: v.tacticsParams?.interval,
-                              deviceProportion: v.tacticsParams?.deviceProportion,
-                              id: v.id,
-                           }))
-                        }
-                        data.sort((a, b) => {
-                           if (moment(a.time).isBefore(b.time)) {
-                              return 1
-                           } else {
-                              return -1
-                           }
-                        })
-                        console.log(data)
-                        querydata.current = data
-                        setQueryData1(data)
-                     }
-                  })
-               }
-            }
-         }
-      }
 
-   }, [query])
 
 
    useEffect(() => {
@@ -378,7 +385,10 @@ const Control = (props) => {
 
    const consoleToollink = () => {
       dispatch(control.getConsoleToollink()).then(res => {
-         if (res.success) setToolShow(res.payload.data)
+         if (res.success) {
+            setToolShow(res.payload.data)
+            setToolData(res.payload.data?.length)
+         }
       })
    }
 
@@ -614,7 +624,7 @@ const Control = (props) => {
                               </div>}
 
                               {/* 项目里程碑 */}
-                              {exhibition.current?.statistical?.find(v => v.key == 'milestone') ?
+                              {exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId && projectData?.find(u => u.id == projectId)?.pepProjectName ?
                                  <div style={{ marginBottom: 30, width: 466, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
                                     <div style={{ margin: '20px 0px 20px 24px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
                                        项目里程碑
@@ -1124,11 +1134,16 @@ const Control = (props) => {
                               border: '1px solid #F2F3F5'
                            }}
                            onClick={() => {
+                              if (toolData && toolData < 10) {
                                  setTool(true)
+                              }
+
+
                            }}
                         >
                            添加
                         </Button>
+                        {toolData && toolData >= 10 ? <div style={{ color: 'red', marginTop: 8 }}>最多可添加10个应用</div> : ""}
 
                      </div> : ""}
                </div>
@@ -1154,7 +1169,8 @@ const Control = (props) => {
             )
          }
          {/* 工具添加修改弹窗 */}
-         {tool ? <Modal
+         {
+            tool ? <Modal
                title={alter ? '编辑' : "添加"}
                visible={true}
                width={600}