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}
+
+
+
+
+ prevValues.nvr_type !== currentValues.nvr_type
+ }
+ >
+ {({ getFieldValue }) => {
+ return getFieldValue("nvr_type") == 1 ? (
+
+
+
+
+ ) : (
+
+
+ );
+ }}
+
+
+ prevValues.nvr_type !== currentValues.nvr_type || prevValues.nvr_id !== currentValues.nvr_id
+ }
+ >
+ {({ getFieldValue }) => {
+ return getFieldValue("nvr_type") == 1 ? (
+
+
通道号}>
+ item.title}
+ />
+
+
+
+ ) : null;
+ }}
+
+
+ {setVideoModalVisible(false); setPlayType('1'); stopIntervalToClose()}}
+ footer={null}
+ title={rowData.device_name}
+ >
+
+ {setPlayType('1')}}>实时 {setPlayType('2')}}>回放
+
+ {
+ playType == '1' ?
+
+ {
+ rowData.id == oneVideoRealtimeUrlInfo.id ?
+
+ : null
+ }
+
+ :
+
+
+
+ }
+
+
>
);
diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx
index 55da3fc..e3485a7 100644
--- a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx
+++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx
@@ -31,6 +31,7 @@ function OutNvrMgm(props) {
name: "", // 设备名称
operator_id: "", //运营商
road_id: "", //路段名称
+ nvr_type: 0
};
// 分页数据
const [pageInfo, setPageInfo] = useState({
@@ -275,26 +276,51 @@ function OutNvrMgm(props) {
title: "设备名称",
dataIndex: "name",
align: "center",
+ width: 150,
+ ellipsis: true
},
{
title: "区域",
dataIndex: "area_name",
align: "center",
+ width: 150,
+ ellipsis: true
},
{
title: "所属车场",
dataIndex: "road_name",
align: "center",
+ width: 150,
+ ellipsis: true
+ },
+ {
+ title: "NVR类型",
+ dataIndex: "nvr_type",
+ align: "center",
+ render: (val) => {
+ return <>{val == 2 ? '国标' : '非国标'}>;
+ },
+ width: 100,
+ },
+ {
+ title: "国际编号",
+ dataIndex: "standard_code",
+ align: "center",
+ width: 150,
+ ellipsis: true
},
{
title: "IP地址",
dataIndex: "ip_address",
align: "center",
+ width: 150,
+ ellipsis: true
},
{
title: "端口号",
dataIndex: "port",
align: "center",
+ width: 80,
},
{
title: "视频端口号",
@@ -306,22 +332,27 @@ function OutNvrMgm(props) {
title: "用户名",
dataIndex: "user_name",
align: "center",
+ width: 100,
},
{
title: "密码",
dataIndex: "password",
align: "center",
+ width: 150,
+ ellipsis: true
},
{
title: "更新时间",
dataIndex: "update_time",
align: "center",
- width: 110,
+ width: 150,
+ ellipsis: true
},
{
title: "操作",
align: "center",
width: 140,
+ fixed: 'right',
render: (val, row, index) => {
return (
setFormData({ ...formData, road_id: v.target.value })}
/>
+
+
+
-
-
- {/*
- */}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+
+ ) : null;
+ }}
+
+