diff --git a/src/components/TableModule/index.jsx b/src/components/TableModule/index.jsx index 3066977..97c0ce2 100644 --- a/src/components/TableModule/index.jsx +++ b/src/components/TableModule/index.jsx @@ -322,7 +322,7 @@ const TableModule = forwardRef((props, ref) => { setAreaSelectedList([]) searchForm.resetFields(); setFormData({ ...searchForm.getFieldsValue(), plateValue: '' }) - search({ ...searchForm.getFieldsValue() }) + // search({ ...searchForm.getFieldsValue() }) setTimeGroup({ timeType: '1', timeRanges: { diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/HistoryTable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/HistoryTable.jsx new file mode 100644 index 0000000..40f4912 --- /dev/null +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/HistoryTable.jsx @@ -0,0 +1,156 @@ +import React, { useEffect, useState, useRef } from "react" +import { Button, message , Input, Modal ,Table ,DatePicker } from "antd" +import { IconPda ,VideoPlay } from '@/components' +import { useNavigate } from "react-router-dom" +import './index.scss' +import ajax from "@/services" +import { useDispatch,useSelector } from "react-redux" +import { setFirstPageMap } from "@/store/common.js" +import axios from 'axios' +import { dictionary } from "@/config/common"; +import moment from "moment"; + +export default function HistoryTable(props) { + const {id} = props + const [tableData, setTableData] = useState([ ]) + const [total, setTotal] = useState(0) + const [pageData, setPageData] = useState({ + pn: 1, + page_size: dictionary?.pageSizeOptions[0] ? dictionary.pageSizeOptions[0] : 15 + }) + const [visible, setVisible]= useState(false) + + const [timeRange, setTimeRange] = useState([moment(new Date(new Date().getTime() - 365*86400*1000)), moment()]) + const videoRef = useRef() + const [videoUrl, setVideoUrl] = useState('') + const intervalPlayRef = useRef() + const columns = [ + { + title: '序号', + width: 150, + dataIndex: 'name', + key: 'name', + align: "center", + render: (va, record,index) => {index + 1}, + }, + { + title: '开始时间', + dataIndex: 'start_time', + key: 'start_time', + align: "center" + }, + { + title: '结束时间', + dataIndex: 'end_time', + key: 'end_time', + align: "center" + }, + { + title: '操作', + key: 'operation', + width: 150, + align: "center", + render: (va, record) => {getOneVideoPlay(record.start_time, record.end_time)}}>查看回放, + }, + ]; + + const getHistoryVideoList = ()=>{ + let start_time = timeRange[0].format('YYYY-MM-DD HH:mm:ss'), + end_time = timeRange[1].format('YYYY-MM-DD HH:mm:ss'); + ajax.getHistoryVideoList({...pageData, start_time, end_time}).then( + res=>{ + if(res.status == 20000){ + setTableData(res.data) + setTotal(res.total ? res.total: 1000) + }else{ + setTableData([]) + setTotal(0) + } + } + ).catch(err=>{ + setTableData([]) + setTotal(0) + }) + } + + const getOneVideoPlay =(time1, time2)=>{ + ajax.getOneVideoPlay({id: id, start_time: time1, end_time: time2, type: 2}).then( + res=>{ + if(res.status == 20000){ + setVisible(true) + setVideoUrl(res.data.url) + } + } + ).catch(err=>{ + + }) + } + + // const stopIntervalToClose = ()=>{ + // if(intervalPlayRef.current){ + // clearInterval(intervalPlayRef.current) + // intervalPlayRef.current = null + // } + // } + + useEffect(()=>{ + getHistoryVideoList() + },[pageData]) + + useEffect(()=>{ + getHistoryVideoList() + },[]) + + return ( +
+
+
+ 回放时间 + {setTimeRange(e)}} showTime allowClear={false} /> +
+ +
+
+ row.start_time} + scroll={{ + y: 450, + }} + pagination={{ + total: total, + pageSizeOptions: dictionary?.pageSizeOptions, + current: pageData.pn, + pageSize: pageData.page_size, + onChange:(targetPn, targetSize)=>{ + if(pageData.page_size != targetSize){ + setPageData({ + pn:1, page_size: targetSize + }) + }else{ + setPageData({ + pn:targetPn, page_size: targetSize + }) + } + } + }} + /> + + {setVisible(false);}} + footer={null} + > +
+ { + videoUrl ? : null + } +
+
+ + + ) +} diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss index b8ead0f..9ff61cc 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss @@ -281,4 +281,17 @@ $color-primary : var(--color-primary); } } +} +.out-monitor-switch-line{ + border-bottom: 1px solid #999da8; + margin-bottom: 10px; + height: 34px; + line-height: 34px; + span{ + cursor: pointer; + font-weight: bold; + &.active{ + color: #3b97ff; + } + } } \ No newline at end of file diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx index 410893f..dce5a9e 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { ResultFlowResult } from "@/components"; +import { ResultFlowResult , VideoPlay } from "@/components"; import { Select, Input, @@ -20,6 +20,7 @@ import { getToken } from "@/config/cookie"; import moment from "moment"; import "./index.scss"; import ajax from "@/services"; +import HistoryTable from "./HistoryTable"; function OutMonitorMgm(props) { const [form] = Form.useForm(); // session缓存 @@ -32,6 +33,7 @@ function OutMonitorMgm(props) { device_code: "", // 设备编号 operator_id: "", //运营商 road_id: "", //路段名称 + nvr_type: 0 }; // 分页数据 const [pageInfo, setPageInfo] = useState({ @@ -58,26 +60,37 @@ function OutMonitorMgm(props) { const [roadData, setRoadData] = useState([]); const [nvrData, setNvrData] = useState([]); + const [nvrGbData, setNvrGbData] = useState([]); const [berthData, setBerthData] = useState([]); const [berthSelectData, setBerthSelectData] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]); - const defRowData = { device_name: "", nvr_id: "", device_code: "", berth_ids: "", + nvr_type: "" }; // 行数据 const [rowData, setRowData] = useState(defRowData); // 模版弹窗 const [visible1, setVisible1] = useState(false); + // 视频弹窗 + const [videoModalVisible, setVideoModalVisible] = useState(false) + const [playType ,setPlayType] = useState('1') + const intervalPlayRef = useRef() // 上传文件数组 const [fileList, setFileList] = useState([]); const [sessionTabList, setSessionTabList] = useSessionStorageState('outMonitorMgm', { value: { } }) + + const [oneVideoRealtimeUrlInfo, setOneVideoRealtimeUrlInfo] = useState({}) + const videoRef = useRef() + const intervalRef = useRef() + const rowDataRef = useRef() + rowDataRef.current = rowData useEffect(() => { if (sessionTabList && Object.values(sessionTabList).length > 0) { setFormData({ @@ -188,9 +201,43 @@ function OutMonitorMgm(props) { }; const handlePlay = (item) => { - message.error(`播放数据暂未对接`); + // message.error(`播放数据暂未对接`); + + ajax.getOneVideoPlay({id: item.id, type: 1}).then( + res=>{ + if(res.status == 20000 && res.data.url){ + setVideoModalVisible(true) + setOneVideoRealtimeUrlInfo({id: item.id, url: res.data.url}) + startIntervalToPlay() + }else{ + message.error(`播放数据暂未对接`); + } + } + ).catch(err=>{ + + }) + }; + const startIntervalToPlay = ()=>{ + if(!intervalPlayRef.current){ + intervalPlayRef.current = setInterval(() => { + ajax.getOutRoadVideoPlaying({id: rowDataRef.current.id, type:1}).then((res)=>{ + if(res.status == 20000){ + // console.log('') + } + }) + }, 5000); + } + } + + const stopIntervalToClose = ()=>{ + if(intervalPlayRef.current){ + clearInterval(intervalPlayRef.current) + intervalPlayRef.current = null + } + } + const handleDel = (item) => { Modal.confirm({ title: "确认删除?", @@ -202,7 +249,8 @@ function OutMonitorMgm(props) { }); }; const getNvrList = () => { - ajax.getAllOutNvrList().then( + // 非国标 + ajax.getAllOutNvrList({nvr_type: 1}).then( (res) => { if (res.status == 20000) { setNvrData(res?.data || []); @@ -215,6 +263,21 @@ function OutMonitorMgm(props) { message.error("服务器异常"); } ); + // 国标 + ajax.getAllOutNvrList({nvr_type: 2}).then( + (res) => { + if (res.status == 20000) { + res.data.push({value: 111222233, label: 'nvr090909'}) // todo + setNvrGbData(res?.data || []); + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); }; const getChannelByNvr = (nvr) => { ajax @@ -228,7 +291,7 @@ function OutMonitorMgm(props) { .then( (res) => { if (res?.status == 20000) { - const newData = res?.data || []; + const newData = res?.data?.left || []; if (newData?.length) { setBerthData( newData.map((item) => ({ key: item.value, title: item.label })) @@ -321,6 +384,15 @@ function OutMonitorMgm(props) { align: "center", }, { + title: "NVR类型", + dataIndex: "nvr_type", + align: "center", + render: (val) => { + return <>{val == 2 ? '国标' : '非国标'}; + }, + width: 100, + }, + { title: "设备编号", dataIndex: "device_code", align: "center", @@ -399,10 +471,10 @@ function OutMonitorMgm(props) { // 表单提交 const onFinish = (values) => { // console.log(values); - if (!rowData?.berth_ids) { - message.error("请选择泊位"); - return; - } + // if (!rowData?.berth_ids) { + // message.error("请选择泊位"); + // return; + // } ajax[values?.id ? "monitorOutEdit" : "monitorOutAdd"]({ ...values, berth_ids: rowData?.berth_ids, @@ -580,6 +652,19 @@ function OutMonitorMgm(props) { onChange={(v) => setFormData({ ...formData, road_id: v })} /> +
+ + - -
-
- +
-
- 通道号}> - item.title} +
+ + + + + ) : ( + + { + setFormData({ ...formData, nvr_type: v }); + }} + /> +
-
- - - - - -
-
- - - + + prevValues.nvr_type !== currentValues.nvr_type + } + > + {({ getFieldValue }) => { + return getFieldValue("nvr_type") == 2 ? ( +
+ + + +
+ + ) : null; + }} +
+ + prevValues.nvr_type !== currentValues.nvr_type + } + > + {({ getFieldValue }) => { + return getFieldValue("nvr_type") == 1 ? ( + <> +
+ + + + + + - - - -
+
+
+ + + + + + + +
+
+ + + + + +
+ + + ) : null; + }} +
+