<template>
|
<div class="charts-cont">
|
<div class="monitor">
|
<div style="width: 100%;height: 100%">
|
<!-- <img src="../../../../assets/warningScreen/video.png">-->
|
<iframe class="video" style="width: 100%;height: 100%" :src="'http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=' + videoUrl + '&&account=gtxh&password=000000'"></iframe>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
import { Search } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
|
import * as echarts from 'echarts';
|
import '/@/theme/bigScreen.css'
|
import {videoApi} from "/@/api/systemManage/video";
|
|
|
interface stateType {
|
videoList: [],
|
listQuery: {}
|
videoUrl: string
|
}
|
export default defineComponent({
|
name: 'monitor',
|
components: {},
|
props: [''],
|
setup(props,context) {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
videoList: [],
|
listQuery: {
|
bizDepId: null,
|
name: '',
|
shortName: '',
|
pageIndex: 1,
|
pageSize: 999
|
},
|
videoUrl: ''
|
})
|
|
onMounted(() => {
|
getVideoTableData()
|
})
|
|
|
const getVideoTableData = async () => {
|
let res = await videoApi().getVideoList(state.listQuery);
|
if (res.data.code === '200') {
|
state.videoList = res.data.data
|
state.videoUrl = state.videoList[0].deviceNo
|
context.emit('getData',state.videoList)
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
const changeVideo = (no)=>{
|
state.videoUrl = no
|
}
|
return {
|
Search,
|
getVideoTableData,
|
changeVideo,
|
...toRefs(state)
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.charts-cont{
|
width: 100%;
|
height: 100%;
|
padding: 5%;
|
position: relative;
|
|
.monitor{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
border-radius: 8px;
|
overflow: hidden;
|
|
img{
|
display: block;
|
width: 100%;
|
height: auto;
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
top: 0;
|
margin: auto;
|
}
|
}
|
}
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
}
|
</style>
|
