115 lines
3.8 KiB
Vue
115 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<div style="width:100%;height: 100%;">
|
||
|
|
<a-row>
|
||
|
|
<a-col :span="4">
|
||
|
|
<a-menu
|
||
|
|
v-model:openKeys="openKeys"
|
||
|
|
v-model:selectedKeys="selectedKeys"
|
||
|
|
style="overflow: hidden;overflow-y:scroll"
|
||
|
|
:style="{ height: `calc(100vh - ${topWidth})`, borderRight: 0 }"
|
||
|
|
mode="inline"
|
||
|
|
>
|
||
|
|
<a-menu-item v-for="(item, index) of leftList" :key="index" @click="(e) => titleClick(e,item)" :title="`${item.jsmc}-${item.xm}`">
|
||
|
|
{{ item.jsmc }}-{{ item.xm }}
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
<!-- document.querySelector('.ant-layout .jeecg-default-layout-main > div').style.height -->
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="20">
|
||
|
|
<bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</div>
|
||
|
|
<!-- <a-layout>
|
||
|
|
<a-layout-sider width="200" style="background: #fff">
|
||
|
|
<a-menu
|
||
|
|
v-model:openKeys="openKeys"
|
||
|
|
v-model:selectedKeys="selectedKeys"
|
||
|
|
:style="{ height: '100%', borderRight: 0 }"
|
||
|
|
mode="inline"
|
||
|
|
>
|
||
|
|
<a-menu-item v-for="(item, index) of leftList" :key="index" @click="(e) => titleClick(e,item)" :title="`${item.xq}-${item.jsmc}-${item.xm}`">
|
||
|
|
{{ item.xq }}-{{ item.jsmc }}-{{ item.xm }}
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
|
||
|
|
</a-layout-sider>
|
||
|
|
<a-layout>
|
||
|
|
<a-layout-content> -->
|
||
|
|
<!-- {{ currentItem }} -->
|
||
|
|
<!-- <bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/> -->
|
||
|
|
<!-- <a-row>
|
||
|
|
<a-col :span="12">
|
||
|
|
<bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<bVideo ref="bVideoLeftRef" :videoOption="{ autoPlay: true }" :videoKey="'main2'+currentItem.id"/>
|
||
|
|
</a-col>
|
||
|
|
</a-row> -->
|
||
|
|
<!-- </a-layout-content>
|
||
|
|
</a-layout> -->
|
||
|
|
<!-- </a-layout> -->
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup name="zhihuijiaoshiIndexPage">
|
||
|
|
import type { MenuProps } from 'ant-design-vue';
|
||
|
|
import { defHttp } from '/@/utils/http/axios';
|
||
|
|
import { useMessage } from "/@/hooks/web/useMessage";
|
||
|
|
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
|
||
|
|
import bVideo from '/@/views/site/common/webRTC/video.vue';
|
||
|
|
|
||
|
|
const bVideoMainRef = ref();
|
||
|
|
const _document = window.document;
|
||
|
|
// const bVideoLeftRef = ref();
|
||
|
|
|
||
|
|
const leftList = <any>ref([]);
|
||
|
|
const currentItem = <any>ref({});
|
||
|
|
const topWidth = <any>ref('0');
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
list({ pageSize: -1 }).then(res => {
|
||
|
|
leftList.value = (res?.records) ?? [];
|
||
|
|
topWidth.value = _document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0';
|
||
|
|
// console.log(_document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0')
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// const topWidthCalc = computed(() => {
|
||
|
|
// return _document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0';
|
||
|
|
// });
|
||
|
|
// xxx = document.querySelector('.ant-layout .jeecg-default-layout-main > div').style.height
|
||
|
|
//
|
||
|
|
enum Api {
|
||
|
|
list = '/jiaoshi/kcZhihuijiaoshi/list',
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 列表接口
|
||
|
|
* @param params
|
||
|
|
*/
|
||
|
|
const list = (params) => defHttp.get({ url: Api.list, params });
|
||
|
|
|
||
|
|
|
||
|
|
const selectedKeys = ref<string[]>(['1']);
|
||
|
|
const openKeys = ref<string[]>(['sub1']);
|
||
|
|
const titleClick = (e: Event, item: any) => {
|
||
|
|
console.log('titleClick ->', e, item);
|
||
|
|
currentItem.value = item;
|
||
|
|
playerVideo(item);
|
||
|
|
};
|
||
|
|
|
||
|
|
function playerVideo(item){
|
||
|
|
bVideoMainRef.value.connectFn(item.ip);
|
||
|
|
// bVideoMainRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external');
|
||
|
|
// bVideoLeftRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//页面销毁时销毁webRtc
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
bVideoMainRef.value.closeWebRtcStreamerFn();
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
</style>
|