Commit fee8dd90 authored by 张伯涛's avatar 张伯涛

大屏模块bug修改

parent 0f07b377
......@@ -433,14 +433,16 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="videoLoading-spinner"></div>
<p> 视频加载中,请稍后......</p>
</div>
<video-components :divWidth="divWidth" :divHeight="divHeight" :queryParams="queryParams" :stopParams="stopParams"/>
<video-components @initSuccess="handleInitSuccess" :divWidth="divWidth" :divHeight="divHeight" :queryParams="queryParams" :stopParams="stopParams"/>
</div>
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>电气柜监视</p></div>
<div class="noVideoData">暂无监控信息......</div>
</div>
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>循环泵听诊</p></div>
<div class="noVideoData">暂无监控信息......</div>
</div>
</div>
<div class="thirdRightLayer">
......@@ -471,6 +473,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div>
<div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
<div class="noVideoData">暂无监控信息......</div>
</div>
</div>
<div class="bottomLayerTwo">
......@@ -492,7 +495,11 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="alarmInfo_title">换热站监控</div>
<div class="alarmInfo_close" @click="handleVideoClose">X</div>
</div>
<video-components-two :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
<div v-if="videoAllLoading" class="videoLoading-overlayAll">
<div class="videoLoading-spinner"></div>
<p> 视频加载中,请稍后......</p>
</div>
<video-components-two @initSuccessAll="handleInitSuccessAll" :queryParams="queryParamsAll" :stopParams="stopParamsAll"/>
</div>
<div class="alarmInfo" v-if="open">
<div class="alarmInfo_header">
......@@ -584,6 +591,7 @@ export default defineComponent({
data() {
return {
videoLoading: false,
videoAllLoading: false,
videoNum: 0,
queryParams: '',
divWidth: '',
......@@ -2995,9 +3003,7 @@ export default defineComponent({
videoList.push(this.VideoInfo.playVideoList[this.videoNum])
this.getDivWidth()
this.queryParams = JSON.stringify(videoList)
setTimeout(() => {
this.videoLoading = false
}, 2000)
}else {
// ElMessage({
// message: res.data,
......@@ -3015,6 +3021,14 @@ export default defineComponent({
// this.markerThree.stationId = _this.transferList[0].stationId
this.getVideoAPI(0)
},
handleInitSuccess() {
console.log('value')
this.videoLoading = false
},
handleInitSuccessAll() {
console.log('value2222222222222', this.videoOpen)
this.videoAllLoading = false
},
getGYTransferVideo2() {
this.videoNum = 0
const params = {
......@@ -3049,9 +3063,7 @@ export default defineComponent({
videoList.push(this.VideoInfo.playVideoList[this.videoNum])
this.getDivWidth()
this.queryParams = JSON.stringify(videoList)
setTimeout(() => {
this.videoLoading = false
}, 2000)
})
},
getDivWidth() {
......@@ -3062,9 +3074,9 @@ export default defineComponent({
// 更多视频
moreVideo() {
this.videoOpen = true
this.videoAllLoading = true
this.queryParams = ''
this.stopParams += 1
console.log('this.VideoInfo.playVideoList',this.VideoInfo.playVideoList)
this.queryParamsAll = JSON.stringify(this.VideoInfo.playVideoList)
},
// 关闭更多视频弹窗
......@@ -3967,6 +3979,68 @@ export default defineComponent({
});
</script>
<style scoped lang="scss">
.videoLoading-overlayAll {
position: fixed;
top: 34%;
left: 40%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
p {
margin-top: 60px;
font-size: 26px;
color: #29d78b;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.videoLoading-spinner {
position: relative;
width: 106px;
height: 56px;
background-image: linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
radial-gradient(circle 14px, #29d78b 100%, transparent 0);
background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
background-repeat: no-repeat;
transform: rotate(-45deg);
&::after,
&::before {
content: "";
position: absolute;
left: -45px;
top: -10px;
width: 56px;
height: 56px;
border: 6px solid #29d78b;
border-radius: 50%;
background-repeat: no-repeat;
background-image: linear-gradient(#29d78b 64px, transparent 0),
linear-gradient(#29d78b 66px, transparent 0),
radial-gradient(circle 4px, #29d78b 100%, transparent 0);
background-size: 40px 1px, 1px 40px, 8px 8px;
background-position: center center;
-webkit-animation: rotation 0.3s linear infinite;
animation: rotation 0.3s linear infinite;
}
&::before {
left: 25px;
top: 60px;
}
}
}
.videoLoading-overlay {
position: fixed;
top: 5px;
......@@ -4173,6 +4247,12 @@ export default defineComponent({
bottom: 5px;
/*border: rgba(129, 210, 230, 0.5) solid 1px;*/
}
.noVideoData{
color: white;
text-align: center;
margin-top: 18%;
font-size: 20px;
}
.thirdLeftLayer_one{
width: 100%;
margin-bottom: 11px;
......
......@@ -57,7 +57,7 @@
<script setup>
// ../OutputFile/VideoWebPlugin.zip
import {ref, reactive, onMounted, onUnmounted, provide, computed, handleError, watch} from 'vue'
import {ref, reactive, onMounted,defineEmits, onUnmounted, provide, computed, handleError, watch} from 'vue'
import { useRoute } from 'vue-router'
import http from '../api/http'
import store from "../store/index";
......@@ -279,7 +279,7 @@ function getVideoFromVideoList(value) {
onUnmounted(() => {
hidePlay();
})
const emit = defineEmits(['initSuccess'])
// 创建播放实例
function initPlugin() {
oWebControl = new WebControl({
......@@ -289,6 +289,7 @@ function initPlugin() {
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () { // 创建WebControl实例成功
console.log('创建成功')
emit('initSuccess')
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function () { // 启动插件服务成功
......
......@@ -57,7 +57,7 @@
<script setup>
// ../OutputFile/VideoWebPlugin.zip
import {ref, reactive, onMounted, onUnmounted, provide, computed, handleError, watch} from 'vue'
import {ref, reactive, onMounted,defineEmits, onUnmounted, provide, computed, handleError, watch} from 'vue'
import { useRoute } from 'vue-router'
import http from '../api/http'
import store from "../store/index";
......@@ -272,7 +272,7 @@ function getVideoFromVideoList(value) {
onUnmounted(() => {
hidePlay();
})
const emit = defineEmits(['initSuccessAll'])
// 创建播放实例
function initPlugin() {
oWebControl = new WebControl({
......@@ -281,7 +281,8 @@ function initPlugin() {
iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () { // 创建WebControl实例成功
console.log('创建成功')
console.log('创建成功2222222222222222')
emit('initSuccessAll')
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function () { // 启动插件服务成功
......@@ -651,7 +652,7 @@ watch(
watch(
() => pProps.stopParams,
async (newData) => {
console.log('停停停停停停停停停停停停')
console.log('停停停停停停停停停停停停222222222222222222222')
hidePlay();
}
)
......
......@@ -101,11 +101,8 @@ import http from "../../api/http.js";
import { ElMessage,ElMessageBox } from "element-plus";
import { vFloatNumber } from "../../utils/directives.js";
import { fa } from 'element-plus/es/locale';
import ExtinguisherNewDataPage from "../AIStation/ExtinguisherPage/ExtinguisherNewDataPage.vue";
import {useRoute} from "vue-router";
import {selectOneStartStop, selectIsScheduleByUserId} from '../../api/oneKeyStartStop/index.js'
import {getAlarmNumData} from "../../api/AIStation/Extinguisher";
import {log} from "util";
const enterpriseId = ref(null);
const cascaderRef = ref(null);
const isLoading= ref(false);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment