flx: 合并代码
This commit is contained in:
parent
5b18d6ae77
commit
05ff718a99
@ -49,8 +49,8 @@ var LOGINTYPE = 1; // 1.通用 2.只支持企业账号登录 3.只支持项目
|
||||
var showNotBuyMoudle = false; //是否展示未解锁产品
|
||||
var isDockingToWoer = false; //是否是和沃尔平台对接
|
||||
// var mqttUrl = 'mqtt://jxj.zhgdyun.com:1883/ws'
|
||||
// var mqttUrl = "ws://jxj.zhgdyun.com:8083/mqtt";
|
||||
var mqttUrl = "wss://gszhdz.crpower.com.cn:8084/mqtt";
|
||||
var mqttUrl = "ws://jxj.zhgdyun.com:8083/mqtt";
|
||||
// var mqttUrl = "wss://gszhdz.crpower.com.cn:8084/mqtt";
|
||||
// var mqttUrl = 'ws://10.139.72.12:8083/mqtt' //longguang
|
||||
if (COMPANY == "longguang") {
|
||||
// mqttUrl = 'ws://182.90.224.147:8083/mqtt'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -85,7 +85,7 @@ const props = defineProps({
|
||||
},
|
||||
playerId: {
|
||||
type: String,
|
||||
default: () => "player-" + Math.random().toString(36).substr(2, 9),
|
||||
default: () => Math.random().toString(36).substr(2, 9),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["selectPlayVideo"]);
|
||||
@ -285,7 +285,7 @@ const capture = (imageType, currentWindowIndex) => {
|
||||
* 初始化播放器
|
||||
*/
|
||||
const initPlayer = () => {
|
||||
videoInfo.player = new JSPlugin({
|
||||
videoInfo.player = new H5Player.JSPlugin({
|
||||
// 需要英文字母开头 必填
|
||||
szId: "player-" + props.playerId, // 使用唯一ID
|
||||
// 必填,引用H5player.min.js的js相对路径
|
||||
@ -357,7 +357,7 @@ const getPreviewUrl = (row) => {
|
||||
* 播放
|
||||
*/
|
||||
const play = (row, index) => {
|
||||
stopPlay(index + 1, "delete");
|
||||
// stopPlay(index + 1, "delete");
|
||||
getPreviewUrl({
|
||||
...row,
|
||||
}).then((res) => {
|
||||
@ -464,16 +464,6 @@ const play = (row, index) => {
|
||||
}
|
||||
}
|
||||
);
|
||||
videoInfo.player.JS_SetConnectTimeOut(index, 60).then(
|
||||
() => {
|
||||
console.info("JS_SetConnectTimeOut success");
|
||||
// do you want...
|
||||
},
|
||||
(err) => {
|
||||
console.info("JS_SetConnectTimeOut failed", err);
|
||||
// do you want...
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
const onReload = (id) => {
|
||||
@ -635,6 +625,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
:deep(.sub-wnd) {
|
||||
height: 100% !important;
|
||||
// width: 100% !important;
|
||||
}
|
||||
.bgImage {
|
||||
width: 18px;
|
||||
|
||||
@ -296,7 +296,7 @@
|
||||
status: workTicketDetail.status,
|
||||
}]"
|
||||
:key="'player-' + item.itemId"
|
||||
:playerId="'player-' + item.itemId"
|
||||
:playerId="item.itemId"
|
||||
/>
|
||||
<div v-else class="fullHeight videoOverview" :id="`videoOverview${item.itemId}`">
|
||||
<IscPlugin
|
||||
@ -324,7 +324,7 @@
|
||||
:current-page="policeCameraItemInfo.pageNo"
|
||||
:page-sizes="[6, Number(policeCameraItemInfo.total)]"
|
||||
:page-size="policeCameraItemInfo.pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
layout="total, prev, pager, next"
|
||||
:total="Number(policeCameraItemInfo.total)"
|
||||
></el-pagination>
|
||||
<!-- <div class="content-right-bottom" v-if="!viewAllShow">
|
||||
@ -624,11 +624,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive, computed } from "vue";
|
||||
import { ref, onMounted, reactive, computed, defineAsyncComponent } from "vue";
|
||||
import Card from "./components/card.vue";
|
||||
import HlsPlayer from "./components/HlsPlayer.vue";
|
||||
import IscPlayer from "./components/iscPlayer.vue";
|
||||
|
||||
const IscPlayer = defineAsyncComponent(() =>
|
||||
import("./components/iscPlayer.vue")
|
||||
);
|
||||
import IscPlugin from "./components/isc_plugin";
|
||||
import { Message } from "element-ui";
|
||||
import {
|
||||
getWorkTicketCountWorkTicketApi,
|
||||
@ -1022,6 +1024,7 @@ const getPoliceCameraItemPage = () => {
|
||||
...params,
|
||||
ticketId: viewAllShow.value ? "" : workTicketDetail.value.id,
|
||||
// deviceState: viewAllShow.value ? 1 : "",
|
||||
status: viewAllShow.value ? 2 : "", // 2 施工中
|
||||
bindTicket: viewAllShow.value ? 1 : "",
|
||||
projectSn: workTicketInfo.projectSn == store.state.userInfo.sn ? "" : workTicketInfo.projectSn,
|
||||
}).then(async (res) => {
|
||||
@ -1210,12 +1213,14 @@ const projectSnName = computed(() => {
|
||||
|
||||
.content-box {
|
||||
padding: 20px 10px;
|
||||
height: calc(100% - 20px - 20px);
|
||||
|
||||
.box-main {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto !important;
|
||||
height: 600px !important;
|
||||
// height: 600px !important;
|
||||
height: 68% !important;
|
||||
|
||||
.box-main_box:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
@ -1504,6 +1509,7 @@ const projectSnName = computed(() => {
|
||||
|
||||
:deep(.content) {
|
||||
height: 94.5%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1947,19 +1953,26 @@ const projectSnName = computed(() => {
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
> div {
|
||||
width: 16% !important;
|
||||
height: 195px;
|
||||
width: 32.4% !important;
|
||||
height: 350px;
|
||||
background: url("~@/assets/images/companyBigScreen/terminalOperation/cardImg.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 !important;
|
||||
.hls-video {
|
||||
height: 310px !important;
|
||||
}
|
||||
:deep(.sub-wnd) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
> div:not(:nth-child(6n + 1)) {
|
||||
margin-left: 10px !important;
|
||||
> div:not(:nth-child(3n + 1)) {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
|
||||
> div:nth-child(n + 7) {
|
||||
margin-top: 10px !important;
|
||||
> div:nth-child(n + 4) {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,78 +1,70 @@
|
||||
<template>
|
||||
<div id="player-main">
|
||||
<div id="player"></div>
|
||||
<!-- 为每个窗口添加控制按钮容器 -->
|
||||
<div
|
||||
class="video-controls"
|
||||
v-for="i in maxWindows"
|
||||
:key="i"
|
||||
:id="'controls-' + i"
|
||||
:style="{ display: 'none' }"
|
||||
>
|
||||
<div class="controls-top">
|
||||
<div></div>
|
||||
<div @click="stopPlay(i)" class="top-close">
|
||||
关闭
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-bottom">
|
||||
<div></div>
|
||||
<div>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`${recordingBegin ? '结束' : '开始'}录制`"
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
class="bgImage transcribe"
|
||||
@click="isTranscribe(i)"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`抓图`"
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
class="bgImage screenshot"
|
||||
@click="capture('JPEG', i)"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- <div>流畅</div> -->
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`${muted ? '关闭' : '开启'}音量`"
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
@click="handleVolume(i)"
|
||||
:class="muted ? 'openVolume' : 'disableVolume'"
|
||||
class="bgImage"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`${isFullScreen ? '退出' : '进入'}全屏模式`"
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
class="bgImage"
|
||||
:class="
|
||||
isFullScreen ? 'exitFullScreen' : 'fullScreen'
|
||||
"
|
||||
@click="singleFullScreen(i)"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player-main">
|
||||
<div id="player"></div>
|
||||
<!-- 为每个窗口添加控制按钮容器 -->
|
||||
<div
|
||||
class="video-controls"
|
||||
v-for="i in maxWindows"
|
||||
:key="i"
|
||||
:id="'controls-' + i"
|
||||
:style="{ display: 'none' }"
|
||||
>
|
||||
<div class="controls-top">
|
||||
<div></div>
|
||||
<div @click="stopPlay(i)" class="top-close">
|
||||
关闭
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<!-- <div class="player-tool">
|
||||
</div>
|
||||
<div class="controls-bottom">
|
||||
<div></div>
|
||||
<div>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`${recordingBegin ? '结束' : '开始'}录制`"
|
||||
placement="top"
|
||||
>
|
||||
<div class="bgImage transcribe" @click="isTranscribe(i)"></div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`抓图`"
|
||||
placement="top"
|
||||
>
|
||||
<div class="bgImage screenshot" @click="capture('JPEG', i)"></div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- <div>流畅</div> -->
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`${muted ? '关闭' : '开启'}音量`"
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
@click="handleVolume(i)"
|
||||
:class="muted ? 'openVolume' : 'disableVolume'"
|
||||
class="bgImage"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`${isFullScreen ? '退出' : '进入'}全屏模式`"
|
||||
placement="top"
|
||||
>
|
||||
<div
|
||||
class="bgImage"
|
||||
:class="isFullScreen ? 'exitFullScreen' : 'fullScreen'"
|
||||
@click="singleFullScreen(i)"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="player-tool">
|
||||
<el-tooltip class="item" effect="dark" :content="`默认`" placement="top">
|
||||
<div class="bgImage splitscreen1" @click="onTwoSubmit(1)"></div>
|
||||
</el-tooltip>
|
||||
@ -103,83 +95,77 @@
|
||||
></div>
|
||||
</el-tooltip>
|
||||
</div> -->
|
||||
<div class="ant-radio-group3">
|
||||
<!-- 时间筛选 -->
|
||||
<div class="Progress_timeline">
|
||||
<div
|
||||
class="Progress_timelineLeft"
|
||||
@click="onClickOffsetX('left')"
|
||||
>
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<div class="Progress_timelineCenterWrap">
|
||||
<div class="Progress_placeholder"></div>
|
||||
<div class="Progress_timelineCenter1">
|
||||
<div
|
||||
class="Progress_timelineCenter"
|
||||
@mousemove="mousemoveTime"
|
||||
@click="seekTo"
|
||||
>
|
||||
<div class="Progress_cover"></div>
|
||||
<div
|
||||
class="Progress_time"
|
||||
:style="`transform: translateX(${videoInfo.offsetTranslateX}%);`"
|
||||
>
|
||||
<div
|
||||
class="Progress_timeItem"
|
||||
v-for="(item, index) in videoInfo.timeList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<!-- <div class="Progress_timeItem">1:00</div>
|
||||
<div class="Progress_timeItem">2:00</div> -->
|
||||
</div>
|
||||
<div class="Progress_line"></div>
|
||||
<div
|
||||
class="Progress_area"
|
||||
:style="`transform: translateX(${videoInfo.offsetTranslateX}%);`"
|
||||
>
|
||||
<div
|
||||
class="Progress_areaItem"
|
||||
v-for="(item, index) in videoInfo.timeList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<!-- <div class="Progress_areaItem">1:00</div>
|
||||
<div class="Progress_areaItem">2:00</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="Progress_arrowTime"
|
||||
:style="`left:${videoInfo.offsetX}%; transform: translateX(${videoInfo.translateX}%);`"
|
||||
>
|
||||
{{ videoInfo.minuteTime }}
|
||||
</div>
|
||||
<div
|
||||
class="Progress_arrow"
|
||||
:style="`left:${videoInfo.offsetX}%`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Progress_timelineRight"
|
||||
@click="onClickOffsetX('right')"
|
||||
>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
:clearable="false"
|
||||
v-model="videoInfo.dateTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
<div class="ant-radio-group3">
|
||||
<!-- 时间筛选 -->
|
||||
<div class="Progress_timeline">
|
||||
<div class="Progress_timelineLeft" @click="onClickOffsetX('left')">
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<div class="Progress_timelineCenterWrap">
|
||||
<div class="Progress_placeholder"></div>
|
||||
<div class="Progress_timelineCenter1">
|
||||
<div
|
||||
class="Progress_timelineCenter"
|
||||
@mousemove="mousemoveTime"
|
||||
@click="seekTo"
|
||||
>
|
||||
<div class="Progress_cover"></div>
|
||||
<div
|
||||
class="Progress_time"
|
||||
:style="`transform: translateX(${videoInfo.offsetTranslateX}%);`"
|
||||
>
|
||||
<div
|
||||
class="Progress_timeItem"
|
||||
v-for="(item, index) in videoInfo.timeList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<!-- <div class="Progress_timeItem">1:00</div>
|
||||
<div class="Progress_timeItem">2:00</div> -->
|
||||
</div>
|
||||
<div class="Progress_line"></div>
|
||||
<div
|
||||
class="Progress_area"
|
||||
:style="`transform: translateX(${videoInfo.offsetTranslateX}%);`"
|
||||
>
|
||||
<div
|
||||
class="Progress_areaItem"
|
||||
v-for="(item, index) in videoInfo.timeList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<!-- <div class="Progress_areaItem">1:00</div>
|
||||
<div class="Progress_areaItem">2:00</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="Progress_arrowTime"
|
||||
:style="`left:${videoInfo.offsetX}%; transform: translateX(${videoInfo.translateX}%);`"
|
||||
>
|
||||
{{ videoInfo.minuteTime }}
|
||||
</div>
|
||||
<div
|
||||
class="Progress_arrow"
|
||||
:style="`left:${videoInfo.offsetX}%`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Progress_timelineRight" @click="onClickOffsetX('right')">
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
:clearable="false"
|
||||
v-model="videoInfo.dateTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -877,9 +863,13 @@ export default {
|
||||
// for (let i = 0; i < num * num; i++) {
|
||||
// _this.play(i);
|
||||
// }
|
||||
},)
|
||||
},
|
||||
(e) => {
|
||||
console.error(e);
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -907,309 +897,309 @@ export default {
|
||||
}
|
||||
}
|
||||
.ant-radio-group3 {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.Progress_timeline {
|
||||
background: #19233a;
|
||||
border: 1px solid #2b344c;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 44px;
|
||||
// width: 431px;
|
||||
width: 100%;
|
||||
// margin-right: 10px;
|
||||
|
||||
.Progress_timeline {
|
||||
background: #19233a;
|
||||
border: 1px solid #2b344c;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
height: 44px;
|
||||
// width: 431px;
|
||||
.Progress_timelineRight,
|
||||
.Progress_timelineLeft {
|
||||
align-items: center;
|
||||
background: #202a43;
|
||||
border-left: 1px solid #2b344c;
|
||||
border-radius: 0 4px 4px 0;
|
||||
color: #7a8bb5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Progress_timelineCenterWrap {
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
padding-top: 50px;
|
||||
// width: 391px;
|
||||
width: calc(92% - 60px);
|
||||
display: flex;
|
||||
|
||||
> div:first-child {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.Progress_timelineCenter1 {
|
||||
position: relative;
|
||||
// width: 371px;
|
||||
width: 100%;
|
||||
// margin-right: 10px;
|
||||
// padding-left: 20px;
|
||||
|
||||
.Progress_timelineRight,
|
||||
.Progress_timelineLeft {
|
||||
align-items: center;
|
||||
background: #202a43;
|
||||
border-left: 1px solid #2b344c;
|
||||
border-radius: 0 4px 4px 0;
|
||||
color: #7a8bb5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Progress_timelineCenterWrap {
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
padding-top: 50px;
|
||||
// width: 391px;
|
||||
width: calc(92% - 60px);
|
||||
display: flex;
|
||||
|
||||
> div:first-child {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.Progress_timelineCenter1 {
|
||||
position: relative;
|
||||
// width: 371px;
|
||||
width: 100%;
|
||||
// padding-left: 20px;
|
||||
|
||||
.Progress_timelineCenter {
|
||||
// width: 960px;
|
||||
width: 1500px;
|
||||
|
||||
&:hover .Progress_arrowTime,
|
||||
&:hover .Progress_arrow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Progress_cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Progress_time {
|
||||
display: flex;
|
||||
|
||||
.Progress_timeItem {
|
||||
min-width: 100px;
|
||||
color: #99a0b4;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
left: 0px;
|
||||
line-height: 14px;
|
||||
padding: 3px 0;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.Progress_line {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
// left: 20px;
|
||||
}
|
||||
|
||||
.Progress_area {
|
||||
align-items: center;
|
||||
border-top: 1px solid #2b344c;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
opacity: 0.5;
|
||||
// margin-left: 20px;
|
||||
|
||||
.Progress_areaItem {
|
||||
min-width: 100px;
|
||||
border-left: 1px solid #fff;
|
||||
height: 10px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.Progress_arrowTime {
|
||||
background: linear-gradient(180deg, #89a3f8, #516aee);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
margin-left: -60px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
// top: -45px;
|
||||
top: -20px;
|
||||
width: 120px;
|
||||
// display: none;
|
||||
}
|
||||
|
||||
.Progress_arrow {
|
||||
background: linear-gradient(180deg, #89a3f8, #516aee);
|
||||
box-shadow: 0 0 6px 0 #5363f2;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
// display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.date-picker {
|
||||
width: initial;
|
||||
.Progress_timelineCenter {
|
||||
// width: 960px;
|
||||
width: 1500px;
|
||||
|
||||
&:hover .Progress_arrowTime,
|
||||
&:hover .Progress_arrow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Progress_cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.el-input__icon {
|
||||
line-height: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Progress_time {
|
||||
display: flex;
|
||||
|
||||
.Progress_timeItem {
|
||||
min-width: 100px;
|
||||
color: #99a0b4;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
left: 0px;
|
||||
line-height: 14px;
|
||||
padding: 3px 0;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker .el-input__wrapper {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #19233a;
|
||||
border: 1px solid #2b344c;
|
||||
box-shadow: none;
|
||||
}
|
||||
.Progress_line {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
// left: 20px;
|
||||
}
|
||||
|
||||
.date-picker .el-input__inner {
|
||||
display: none;
|
||||
.Progress_area {
|
||||
align-items: center;
|
||||
border-top: 1px solid #2b344c;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
opacity: 0.5;
|
||||
// margin-left: 20px;
|
||||
|
||||
.Progress_areaItem {
|
||||
min-width: 100px;
|
||||
border-left: 1px solid #fff;
|
||||
height: 10px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.Progress_arrowTime {
|
||||
background: linear-gradient(180deg, #89a3f8, #516aee);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
margin-left: -60px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
// top: -45px;
|
||||
top: -20px;
|
||||
width: 120px;
|
||||
// display: none;
|
||||
}
|
||||
|
||||
.Progress_arrow {
|
||||
background: linear-gradient(180deg, #89a3f8, #516aee);
|
||||
box-shadow: 0 0 6px 0 #5363f2;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
// display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.date-picker {
|
||||
width: initial;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
.el-input__icon {
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker .el-input__wrapper {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #19233a;
|
||||
border: 1px solid #2b344c;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.date-picker .el-input__inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bgImage {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.transcribe {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("~@/assets/images/iscImage/transcribe.png");
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("~@/assets/images/iscImage/transcribe.png");
|
||||
}
|
||||
.screenshot {
|
||||
background-image: url("~@/assets/images/iscImage/screenshot.png");
|
||||
background-image: url("~@/assets/images/iscImage/screenshot.png");
|
||||
}
|
||||
.disableVolume {
|
||||
background-image: url("~@/assets/images/iscImage/disableVolume.png");
|
||||
background-image: url("~@/assets/images/iscImage/disableVolume.png");
|
||||
}
|
||||
.fullScreen {
|
||||
background-image: url("~@/assets/images/iscImage/fullScreen.png");
|
||||
background-image: url("~@/assets/images/iscImage/fullScreen.png");
|
||||
}
|
||||
.openVolume {
|
||||
background-image: url("~@/assets/images/iscImage/openVolume.png");
|
||||
background-image: url("~@/assets/images/iscImage/openVolume.png");
|
||||
}
|
||||
.exitFullScreen {
|
||||
background-image: url("~@/assets/images/iscImage/exitFullScreen.png");
|
||||
background-image: url("~@/assets/images/iscImage/exitFullScreen.png");
|
||||
}
|
||||
.splitscreen1 {
|
||||
background-image: url("~@/assets/images/iscImage/splitscreen1.png");
|
||||
background-image: url("~@/assets/images/iscImage/splitscreen1.png");
|
||||
}
|
||||
.splitscreen2 {
|
||||
background-image: url("~@/assets/images/iscImage/splitscreen2.png");
|
||||
background-image: url("~@/assets/images/iscImage/splitscreen2.png");
|
||||
}
|
||||
.splitscreen3 {
|
||||
background-image: url("~@/assets/images/iscImage/splitscreen3.png");
|
||||
background-image: url("~@/assets/images/iscImage/splitscreen3.png");
|
||||
}
|
||||
.stopAll {
|
||||
background-image: url("~@/assets/images/iscImage/stopAll.png");
|
||||
background-image: url("~@/assets/images/iscImage/stopAll.png");
|
||||
}
|
||||
.video-controls_flex {
|
||||
display: flex !important;
|
||||
display: flex !important;
|
||||
}
|
||||
/* 添加控制按钮样式 */
|
||||
.video-controls {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
// background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
// background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.controls-bottom {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.controls-bottom {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 0 16px;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> div:not(:first-child) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 0 16px;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> div:not(:first-child) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.controls-top {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.top-close {
|
||||
width: 84px;
|
||||
height: 27px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 41px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.controls-top {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.top-close {
|
||||
width: 84px;
|
||||
height: 27px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 41px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#player-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#player {
|
||||
width: 100%;
|
||||
height: calc(100% - 46px);
|
||||
width: 100%;
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
.player-tool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background-color: #3d3d3d;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
> div:not(:first-child) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background-color: #3d3d3d;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
> div:not(:first-child) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
.hikvision-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.control-bar {
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.video-source {
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user