jiangxucong
/
dq-emgms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频

Browse Source
main
wangyunfei 1 month ago
parent bba07c2c13
commit 669c14acc9
6 changed files with 140 additions and 93 deletions
Show Stats Download Patch File Download Diff File

10
src/assets/business_Emergency/iconAcc1.svg
Unescape Escape View File

@ -0,0 +1,10 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2506_26648)">
<path d="M0.969446 21.9996C0.710798 21.9975 0.463521 21.893 0.281805 21.7089C0.100089 21.5248 -0.00124433 21.2762 1.15356e-05 21.0176C1.15356e-05 20.4676 0.444663 20.0355 0.969446 20.0355H21.0275C21.5695 20.0355 21.9969 20.4849 21.9969 21.0176C21.9969 21.5675 21.5523 21.9996 21.0275 21.9996H0.969446ZM19.2567 3.0131L16.5385 0.260347C16.4577 0.178495 16.3614 0.113506 16.2553 0.06915C16.1492 0.0247937 16.0353 0.00195312 15.9203 0.00195312C15.8052 0.00195313 15.6913 0.0247937 15.5852 0.06915C15.4791 0.113506 15.3828 0.178495 15.302 0.260347L12.554 3.04452L16.5087 7.04953L19.2583 4.26535C19.4219 4.09801 19.5135 3.87327 19.5135 3.63923C19.5135 3.40518 19.4219 3.18044 19.2583 3.0131H19.2567ZM11.7338 3.87412L2.57365 13.149C2.32697 13.4003 2.11014 13.9471 2.11014 13.9471L0.691342 18.5146C0.581358 18.8587 0.906598 19.1714 1.24755 19.0771L5.72549 17.6395C5.72549 17.6395 6.26755 17.4352 6.52995 17.1524L15.6901 7.87756L11.7354 3.87412H11.7338Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_2506_26648">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
src/assets/business_Emergency/iconAcc2.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.685 4H1.96325C1.96325 4 0 4 0 5.98283V16.0172C0 18 1.96325 18 1.96325 18H13.685C13.685 18 15.6483 18 15.6483 16.0172V6.04292C15.6483 4 13.685 4 13.685 4ZM21.7113 5.02146C21.5381 4.96137 21.3648 4.96137 21.2493 5.08155L17.3806 8.20601C17.2651 8.32618 17.2073 8.44635 17.2073 8.56652V13.5536C17.2073 13.6738 17.2651 13.8541 17.3806 13.9142L21.2493 17.0386C21.3071 17.0987 21.4226 17.1588 21.5381 17.1588C21.5958 17.1588 21.6535 17.1588 21.769 17.0987C21.9423 17.0386 22 16.8584 22 16.6781V5.44206C22 5.2618 21.8845 5.08155 21.7113 5.02146Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 670 B

10
src/assets/business_Emergency/iconAcc3.svg
Unescape Escape View File

@ -0,0 +1,10 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2506_26657)">
<path d="M0.379103 9.31164L20.1498 1.04498C20.2552 1.00186 20.3705 0.988739 20.4829 1.00708C20.5953 1.02542 20.7004 1.0745 20.7866 1.14889C20.8729 1.22328 20.9368 1.32009 20.9714 1.42858C21.0061 1.53708 21.01 1.65304 20.9828 1.76362L16.0573 21.5296C16.0321 21.6306 15.9818 21.7235 15.9109 21.7996C15.8401 21.8758 15.7511 21.9328 15.6523 21.9652C15.5534 21.9976 15.448 22.0044 15.3458 21.9849C15.2436 21.9655 15.148 21.9204 15.068 21.854L10.7923 18.2794C10.6745 18.1806 10.5239 18.1296 10.3703 18.1365C10.2167 18.1434 10.0713 18.2078 9.96288 18.3168L7.7708 20.517C7.68469 20.6024 7.57527 20.6604 7.4563 20.6837C7.33733 20.707 7.21411 20.6947 7.10215 20.6481C6.99018 20.6016 6.89446 20.5231 6.82703 20.4223C6.7596 20.3216 6.72347 20.2031 6.72318 20.0819V15.4329C6.72318 15.2707 6.78617 15.1121 6.90167 14.9977L15.8216 6.04744L5.29173 13.9735C5.18101 14.0568 5.04533 14.1002 4.90679 14.0966C4.76825 14.093 4.63502 14.0426 4.52877 13.9536L0.221609 10.3534C0.140246 10.2856 0.0777421 10.198 0.0401351 10.099C0.00252816 9.99995 -0.00891164 9.89291 0.00692055 9.78818C0.0227527 9.68345 0.065322 9.58458 0.130517 9.5011C0.195712 9.41763 0.28133 9.35237 0.379103 9.31164Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_2506_26657">
<rect width="21" height="21" fill="white" transform="translate(0 1)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

83
src/pages/business_emergencyAccident/components/EventNotification.js
Unescape Escape View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import { Input, Select, Button, Checkbox, Tag } from 'antd';
import {
EditOutlined,
@ -13,16 +13,23 @@ import {
import StandardTable from '@/components/StandardTable';
import styles from './EventNotification.less';
import iconAcc1 from '@/assets/business_Emergency/iconAcc1.svg';
import iconAcc2 from '@/assets/business_Emergency/iconAcc2.svg';
import iconAcc3 from '@/assets/business_Emergency/iconAcc3.svg';
import testVideo from './testVideo.mp4';
const { TextArea } = Input;
const { Option } = Select;
const EventNotification = () => {
const [eventTitle, setEventTitle] = useState('');
const [eventType, setEventType] = useState('');
const [eventLevel, setEventLevel] = useState('');
const [eventType, setEventType] = useState(undefined);
const [eventLevel, setEventLevel] = useState(undefined);
const [eventDescription, setEventDescription] = useState('');
const [location, setLocation] = useState('');
const [videoRecord, setVideoRecord] = useState('');
const [videoPlaying, setVideoPlaying] = useState(false);
const videoRef = useRef(null);
const [pushTargets, setPushTargets] = useState({
'director-li': false,
'captain-zhang': true,
@ -185,6 +192,31 @@ const EventNotification = () => {
}));
};
// 视频播放控制
const handlePlayPause = () => {
if (videoRef.current) {
if (videoPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setVideoPlaying(!videoPlaying);
}
};
const handleVideoLoaded = () => {
if (videoRef.current) {
// 视频加载完成后可以设置默认行为
}
};
const handlePlayLiveVideo = () => {
if (videoRef.current) {
videoRef.current.play();
setVideoPlaying(true);
}
};
return (
<div className={styles.containerSJTZ}>
{/* A块：顶部区域，高度60%，背景透明 */}
@ -192,7 +224,7 @@ const EventNotification = () => {
{/* a块：事件信息编辑 */}
<div className={styles.blockA_a}>
<div className={styles.cardHeader}>
<EditOutlined className={styles.headerIcon} />
<img src={iconAcc1} alt="icon" style={{ width: '16px', height: '16px' }} />
<span className={styles.headerText}>事件信息编辑</span>
</div>
<div className={styles.cardContent}>
@ -249,7 +281,7 @@ const EventNotification = () => {
{/* b块：视频核实 */}
<div className={styles.blockA_b}>
<div className={styles.cardHeader}>
<VideoCameraOutlined className={styles.headerIcon} />
<img src={iconAcc2} alt="icon" style={{ width: '16px', height: '16px' }} />
<span className={styles.headerText}>视频核实</span>
</div>
<div className={styles.cardContent}>
@ -265,20 +297,45 @@ const EventNotification = () => {
<label className={styles.label}>视频监控画面</label>
<div className={styles.videoContainer}>
<div className={styles.videoPlaceholder}>
{/* 视频占位图 */}
<div className={styles.videoImage}>
<div className={styles.cityscape}></div>
</div>
{/* 视频播放器 */}
<video
ref={videoRef}
className={styles.videoPlayer}
controls={false}
onPlay={() => setVideoPlaying(true)}
onPause={() => setVideoPlaying(false)}
onLoadedMetadata={handleVideoLoaded}
preload="metadata"
>
{/* 使用本地测试视频 */}
<source
src={testVideo}
type="video/mp4"
/>
{/* 如果视频加载失败，显示提示 */}
您的浏览器不支持视频播放。
</video>
{/* 自定义播放控制栏 */}
<div className={styles.videoControls}>
<LeftOutlined className={styles.controlIcon} />
<PlayCircleOutlined className={styles.controlIcon} />
<LeftOutlined
className={styles.controlIcon}
onClick={() => videoRef.current && (videoRef.current.currentTime = Math.max(0, videoRef.current.currentTime - 5))}
/>
<PlayCircleOutlined
className={styles.controlIcon}
onClick={handlePlayPause}
style={{ fontSize: '24px' }}
/>
<InfoCircleOutlined className={styles.controlIcon} />
<RightOutlined className={styles.controlIcon} />
<RightOutlined
className={styles.controlIcon}
onClick={() => videoRef.current && (videoRef.current.currentTime = Math.min(videoRef.current.duration, videoRef.current.currentTime + 5))}
/>
</div>
</div>
<div className={styles.videoButtons}>
<Button type="primary">搜索监控点</Button>
<Button type="primary">播放实时画面</Button>
<Button type="primary" onClick={handlePlayLiveVideo}>播放实时画面</Button>
</div>
</div>
</div>

93
src/pages/business_emergencyAccident/components/EventNotification.less
Unescape Escape View File

@ -11,7 +11,7 @@
// A块：顶部区域，高度60%，背景透明
.blockA {
height: 60%;
height: 58%;
width: 100%;
padding: 0;
margin: 0;
@ -43,13 +43,13 @@
.headerIcon {
color: #fff;
font-size: 16px;
font-size: 14px;
}
.headerText {
color: #fff;
font-size: 14px;
font-weight: 500;
font-weight: 450;
}
}
@ -80,10 +80,8 @@
}
.saveButton {
width: 100%;
margin-top: auto;
background-color: #556FEB;
border-color: #556FEB;
width: 130px;
background-color: #2E4CD4;
}
}
}
@ -100,7 +98,9 @@
.cardHeader {
height: 40px;
background-color: #556FEB;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
display: flex;
align-items: center;
padding: 0 15px;
@ -114,7 +114,7 @@
.headerText {
color: #fff;
font-size: 14px;
font-weight: 500;
font-weight: 450;
}
}
@ -134,6 +134,7 @@
.label {
font-size: 14px;
color: #333;
border-radius: 2px;
font-weight: 500;
}
@ -144,62 +145,17 @@
.videoPlaceholder {
width: 100%;
border-radius: 4px;
border-radius: 2px;
overflow: hidden;
position: relative;
background-color: #000;
.videoImage {
.videoPlayer {
width: 100%;
height: 150px;
position: relative;
overflow: hidden;
.cityscape {
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(255, 200, 100, 0.4) 0%, transparent 50%),
radial-gradient(circle at 60% 30%, rgba(100, 150, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 150, 100, 0.3) 0%, transparent 50%),
linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background:
linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%),
repeating-linear-gradient(
90deg,
transparent,
transparent 20px,
rgba(255, 255, 255, 0.1) 20px,
rgba(255, 255, 255, 0.1) 22px
);
}
&::after {
content: '';
position: absolute;
top: 10%;
left: 0;
right: 0;
height: 70%;
background-image:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 20%, transparent 25%, transparent 45%, rgba(255, 255, 255, 0.05) 50%, transparent 55%, transparent 75%, rgba(255, 255, 255, 0.05) 80%, transparent 100%),
repeating-linear-gradient(
0deg,
transparent,
transparent 8px,
rgba(255, 255, 255, 0.03) 8px,
rgba(255, 255, 255, 0.03) 10px
);
}
}
display: block;
object-fit: cover;
background-color: #000;
}
.videoControls {
@ -208,15 +164,26 @@
justify-content: center;
gap: 20px;
padding: 10px;
background-color: #f5f5f5;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
.controlIcon {
font-size: 18px;
color: #666;
color: #fff;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #556FEB;
transform: scale(1.1);
}
&:active {
transform: scale(0.95);
}
}
}

BIN
src/pages/business_emergencyAccident/components/testVideo.mp4
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save