flx: 合并代码

This commit is contained in:
Rain_ 2025-11-10 17:43:01 +08:00
parent 5b18d6ae77
commit 05ff718a99
6 changed files with 2384 additions and 2961 deletions

View File

@ -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

View File

@ -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.jsjs
@ -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;

View File

@ -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;
}
}
}

View File

@ -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>