Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop

package.json

@@ -82,6 +82,7 @@
     "postcss": "^8.4.21",
     "qs": "^6.10.3",
     "react-beautiful-dnd": "^13.1.1",
+    "react-error-boundary": "^4.0.12",
     "react-quill": "^2.0.0",
     "save-dev": "0.0.1-security",
     "tslib": "^2.5.0",

src/components/TableModule/index.jsx

@@ -323,7 +323,7 @@ const TableModule = forwardRef((props, ref) => {
     setAreaSelectedList([])
     searchForm.resetFields();
     setFormData({ ...searchForm.getFieldsValue(), plateValue: '' })
-    // search({ ...searchForm.getFieldsValue() })
+    // search({ ...searchForm.getFieldsValue(), ...pageData })
     setTimeGroup({
       timeType: '1',
       timeRanges: {

src/components/layout/Layout/index.jsx

@@ -3,8 +3,11 @@ import SideBar from "../SideBar"
 import Header from "../Header"
 import Tabs from "../Tabs"
 import Footer from '../Footer'
-import { Outlet } from "react-router-dom"
+import { Outlet ,Link} from "react-router-dom"
 import "./index.scss"
+// import { ErrorBoundary } from "react-error-boundary";
+
+
 
 export default function Layout() {
   return (
@@ -16,9 +19,16 @@ export default function Layout() {
           <div className="cc-bottom-right">
             <Tabs />
             <div className="cc-container">
-              <Outlet />
+              {/* <ErrorBoundary  
+              FallbackComponent={Fallback}  
+              onError={(details,info) => {
+                
+              }}> */}
+                <Outlet />
+              {/* </ErrorBoundary> */}
             </div>
           </div>
+
         </div>
         <Footer />
       </div>

src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/HistoryTable.jsx

@@ -20,7 +20,7 @@ export default function HistoryTable(props) {
     })
     const [visible, setVisible]= useState(false)
 
-    const [timeRange, setTimeRange] = useState([moment(new Date(new Date().getTime() - 365*86400*1000)), moment()])
+    const [timeRange, setTimeRange] = useState([moment(new Date(new Date().getTime() - 7*86400*1000)), moment()])
     const videoRef = useRef()
     const [videoUrl, setVideoUrl] = useState('')
     const intervalPlayRef = useRef()

src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx

@@ -21,7 +21,10 @@ import moment from "moment";
 import "./index.scss";
 import ajax from "@/services";
 import HistoryTable from "./HistoryTable";
+// import {withErrorBoundary} from 'react-error-boundary'
+
 function OutMonitorMgm(props) {
+
   const [form] = Form.useForm();
   // session缓存
   const [defaultParams, setDefaultParams] = useSessionStorageState(
@@ -211,7 +214,7 @@ function OutMonitorMgm(props) {
             setTimeout(() => {
               videoRef.current.changeUrl(res.data.url)
             }, 300);
-            startIntervalToPlay()
+            startIntervalToPlay(1) // 因为默认展示实时的视频播放
           }else{
             message.error(`播放数据暂未对接`);
           }
@@ -222,10 +225,10 @@ function OutMonitorMgm(props) {
 
   };
 
-  const startIntervalToPlay = ()=>{
+  const startIntervalToPlay = (type)=>{
     if(!intervalPlayRef.current){
       intervalPlayRef.current = setInterval(() => {
-        ajax.getOutRoadVideoPlaying({id: rowDataRef.current.id, type:1}).then((res)=>{
+        ajax.getOutRoadVideoPlaying({id: rowDataRef.current.id, type:type}).then((res)=>{
           if(res.status == 20000){
             // console.log('')
           }
@@ -245,6 +248,12 @@ function OutMonitorMgm(props) {
     }
   }
 
+  const clickSwitch=(val)=>{
+    setPlayType(val); 
+    stopIntervalToClose(); 
+    startIntervalToPlay(val)
+  }
+
   const handleDel = (item) => {
     Modal.confirm({
       title: "确认删除？",
@@ -899,7 +908,8 @@ function OutMonitorMgm(props) {
           title={rowData.device_name}
         >
           <div className="out-monitor-switch-line">
-          <span onClick={()=>{setPlayType('1')}}>实时</span>&emsp;<span  onClick={()=>{setPlayType('2')}}>回放</span>
+          <span className={`${playType == '1' ? 'active' : ""}`} onClick={()=>{clickSwitch(1)}}>实时</span>&emsp;
+          <span  className={`${playType == '2' ? 'active' : ""}`} onClick={()=>{clickSwitch(2)}}>回放</span>
           </div>
           {
             playType == '1' ? 
@@ -918,4 +928,4 @@ function OutMonitorMgm(props) {
   );
 }
 
-export default OutMonitorMgm;
+export default OutMonitorMgm

src/router/router.config.js

@@ -1,5 +1,16 @@
 import pages from "@/pages";
+import React from "react"
 import { Layout } from "@/components";
+import {withErrorBoundary} from 'react-error-boundary'
+function Fallback({ error, resetErrorBoundary }) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+  return (
+    <div role="alert" style={{padding: '20px'}}>
+      <p>系统内部错误,请稍后再试</p>
+      <pre style={{ color: "red" }}>{error.message}</pre>
+    </div>
+  );
+}
 
 let routes = [
   {
@@ -1272,7 +1283,7 @@ let routes = [
         path: "/outRoad/outMonitorMgm",
         text: "视频监控设备管理",
         name: "outMonitorMgm",
-        component: pages.OutMonitorMgm,
+        component: withErrorBoundary(pages.OutMonitorMgm , {FallbackComponent: Fallback})
       },
       {
         path: "/outRoad/outNvrMgm",