dbsd_kczx/src/views/kc/jiaoshi/index.vue

115 lines
3.8 KiB
Vue
Raw Normal View History

2023-04-21 00:41:02 +08:00
<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>