fix: BUG修改
This commit is contained in:
kun
parent
f4a494e58a
commit
d9ffb26540
@ -65,14 +65,14 @@
|
||||
src="@/assets/images/AIwaring/抓拍.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
<!-- <img
|
||||
id="btnCapture"
|
||||
title="电子放大"
|
||||
class="btn"
|
||||
@click="imageLarge(videoData)"
|
||||
src="@/assets/images/AIwaring/电子放大.png"
|
||||
alt=""
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-relative-right">
|
||||
@ -155,19 +155,19 @@ const adjust = async (params: any) => {
|
||||
}
|
||||
};
|
||||
// 电子放大
|
||||
const imageLarge = (item: any) => {
|
||||
let Plugin = item.dialogPlugin;
|
||||
Plugin.JS_EnableZoom(0).then(
|
||||
() => {
|
||||
console.info("JS_EnableZoom success");
|
||||
// do you want...
|
||||
},
|
||||
err => {
|
||||
console.info("JS_EnableZoom failed");
|
||||
// do you want...
|
||||
}
|
||||
);
|
||||
};
|
||||
// const imageLarge = (item: any) => {
|
||||
// let Plugin = item.dialogPlugin;
|
||||
// Plugin.JS_EnableZoom(0).then(
|
||||
// () => {
|
||||
// console.info("JS_EnableZoom success");
|
||||
// // do you want...
|
||||
// },
|
||||
// err => {
|
||||
// console.info("JS_EnableZoom failed");
|
||||
// // do you want...
|
||||
// }
|
||||
// );
|
||||
// };
|
||||
// 图片抓拍
|
||||
const imageGet = async (item: any) => {
|
||||
let Plugin = item.dialogPlugin;
|
||||
|
||||
@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<div class="video-box">
|
||||
<div class="plr-20" style="display: flex; height: 100%">
|
||||
<el-tabs class="demo-tabs" v-model="active">
|
||||
<el-tab-pane label="项目名称" name="first">
|
||||
<TreeFilter
|
||||
ref="proTree"
|
||||
:checkStrictly="true"
|
||||
label="title"
|
||||
:requestApi="proApi"
|
||||
@change="changeTreeFilter"
|
||||
class="treefilter"
|
||||
>
|
||||
</TreeFilter>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="工程名称" name="two">
|
||||
<TreeFilter ref="engTree" label="title" :requestApi="engApi" @change="changeTreeFilter" class="treefilter">
|
||||
</TreeFilter>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="middle-video">
|
||||
<div class="title-video flx-justify-between">
|
||||
<h3>实时视频</h3>
|
||||
<!-- <span>-</span>
|
||||
<h3>{{ childTitle }}</h3> -->
|
||||
<img id="btnCapture" title="图片抓拍" class="btn" @click="imageGet" src="@/assets/images/AIwaring/抓拍.png" alt="" />
|
||||
</div>
|
||||
<!-- 视频数据站位 -->
|
||||
<div id="player" ref="playWndBox" class="main" style="width: 100%; height: calc(100% - 76px)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="governVideo">
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import { getVideoQuestionPage, getvideoProTreeList, getvideoEngTreeList } from "@/api/modules/goverment";
|
||||
import { getpreviewURL, getmanualCaptureL } from "@/api/modules/common";
|
||||
import TreeFilter from "@/components/TreeFilter/index.vue";
|
||||
const videoList = ref<any>([]);
|
||||
interface rightFormList {
|
||||
createTime: string;
|
||||
projectName: string;
|
||||
engineeringName: string;
|
||||
monitorId: string;
|
||||
questionDesc: string;
|
||||
showForm: boolean;
|
||||
}
|
||||
|
||||
const pageable = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 9,
|
||||
total: 0
|
||||
});
|
||||
|
||||
const active = ref("two");
|
||||
const parentTitle = ref<string>("");
|
||||
const rightForm = ref<rightFormList>({
|
||||
createTime: "",
|
||||
projectName: "",
|
||||
engineeringName: "",
|
||||
monitorId: "",
|
||||
questionDesc: "",
|
||||
showForm: false
|
||||
});
|
||||
const proTree = ref();
|
||||
const engTree = ref();
|
||||
const playWndBox = ref(null);
|
||||
let playWndHeight = ref("");
|
||||
let playWndWidth = ref("");
|
||||
let myPlugin = ref("");
|
||||
let cameraIndexCode = ref<string>("");
|
||||
let playUrl = ref("");
|
||||
let playIndex = ref(0);
|
||||
let dataIndex = ref(0);
|
||||
// 图片抓拍
|
||||
const imageGet = async (item: any) => {
|
||||
let fileName = "img";
|
||||
let fileType = "JPEG";
|
||||
let curIndex = 0;
|
||||
myPlugin.value.JS_CapturePicture(curIndex, fileName, fileType).then(
|
||||
() => {
|
||||
console.log("capture success", "JPEG");
|
||||
},
|
||||
e => {
|
||||
console.error(e);
|
||||
}
|
||||
);
|
||||
// if (!cameraIndexCode.value) {
|
||||
// ElMessage.error("请先选择要抓拍的监控");
|
||||
// } else {
|
||||
// const { result } = await getmanualCaptureL({ monitorCode: cameraIndexCode.value });
|
||||
// console.log(result);
|
||||
// window.open(result.url);
|
||||
// // let link = document.createElement("a");
|
||||
// // link.href = result.url;
|
||||
// // link.download = "抓拍图片";
|
||||
// // link.click();
|
||||
// // link.remove();
|
||||
// }
|
||||
};
|
||||
// 播放视频流
|
||||
const playVideo = async () => {
|
||||
let url = playUrl.value;
|
||||
let newMyplugin = myPlugin.value;
|
||||
newMyplugin
|
||||
.JS_Play(
|
||||
url,
|
||||
{
|
||||
playURL: url, // 流媒体播放时必传
|
||||
mode: 1 // 解码类型：0=普通模式; 1=高级模式 默认为0
|
||||
// 设置直连时的认证参数等
|
||||
// ...
|
||||
},
|
||||
playIndex.value //当前窗口下标
|
||||
)
|
||||
.then(
|
||||
() => {
|
||||
console.info("JS_Play success");
|
||||
playIndex.value += 1;
|
||||
// do you want...
|
||||
},
|
||||
() => {
|
||||
console.info("JS_Play failed:");
|
||||
// playIndex.value += 1;
|
||||
// do you want...
|
||||
}
|
||||
);
|
||||
dataIndex.value = dataIndex.value + 1;
|
||||
};
|
||||
// 获取视频流
|
||||
const getVideo = async () => {
|
||||
const res = await getpreviewURL({ cameraIndexCode: cameraIndexCode.value, protocol: "ws" });
|
||||
playUrl.value = res.result;
|
||||
console.log(res);
|
||||
await playVideo();
|
||||
};
|
||||
const BeginPlayer = () => {
|
||||
// 初始化插件
|
||||
myPlugin.value = new JSPlugin({
|
||||
szId: "player", //需要英文字母开头 必填
|
||||
// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
|
||||
szBasePath: "/h5player", // 打包后的地址
|
||||
// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
|
||||
// iWidth: playWndWidth.value + "px",
|
||||
// iHeight: playWndHeight.value + "px",
|
||||
// iWidth: "300px",
|
||||
// iHeight: "300px",
|
||||
iMaxSplit: 1,
|
||||
iCurrentSplit: 1,
|
||||
openDebug: true
|
||||
});
|
||||
videoList.value[videoList.value.length - 1].pluginValue = myPlugin.value;
|
||||
};
|
||||
const changeTreeFilter = async (item: {
|
||||
data: { code: string | null; title: any; children: any[] };
|
||||
parent: { data: { title: any } };
|
||||
}) => {
|
||||
console.log("我是你要的数据", item);
|
||||
//给该方法传入监控编码
|
||||
cameraIndexCode.value = item.data.code;
|
||||
parentTitle.value = item.parent.data.title || item.data.title;
|
||||
|
||||
if (item.data.code === null) {
|
||||
cameraIndexCode.value = item.data.children.map(item => {
|
||||
return item.code;
|
||||
});
|
||||
cameraIndexCode.value.forEach(element => {
|
||||
getVideo(element);
|
||||
});
|
||||
// 点击父节点判断是项目还是工程
|
||||
if (active.value === "first") {
|
||||
const { result } = await getVideoQuestionPage({
|
||||
...pageable,
|
||||
projectSn: item.data.sn
|
||||
});
|
||||
rightForm.value = result.records;
|
||||
pageable.total = +result.total;
|
||||
} else {
|
||||
const { result } = await getVideoQuestionPage({
|
||||
...pageable,
|
||||
engineeringSn: item.data.sn
|
||||
});
|
||||
rightForm.value = result.records;
|
||||
pageable.total = +result.total;
|
||||
}
|
||||
} else {
|
||||
// childTitle.value = item.data.title;
|
||||
getVideo();
|
||||
const { result } = await getVideoQuestionPage({
|
||||
...pageable,
|
||||
deviceCode: item.data.code
|
||||
});
|
||||
rightForm.value = result.records;
|
||||
pageable.total = +result.total;
|
||||
}
|
||||
};
|
||||
|
||||
const proApi = async () => {
|
||||
const { result } = await getvideoProTreeList({});
|
||||
proTree.value.treeAllData = result;
|
||||
// cameraIndexCode.value = proTree.value.treeAllData[5].children[0].code;
|
||||
// console.log(cameraIndexCode.value);
|
||||
};
|
||||
|
||||
const engApi = async () => {
|
||||
const { result } = await getvideoEngTreeList({});
|
||||
engTree.value.treeAllData = result;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await BeginPlayer();
|
||||
const pageInstance = getCurrentInstance();
|
||||
// 获取dom节点对象
|
||||
const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
playWndHeight.value = tagDomObj?.clientHeight;
|
||||
playWndWidth.value = tagDomObj?.clientWidth;
|
||||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("scroll", () => {
|
||||
if (myPlugin.value == undefined) {
|
||||
setTimeout(function () {
|
||||
myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
}, 500);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("resize", e => {
|
||||
if (myPlugin.value == undefined) {
|
||||
// console.log("wwwww", e);
|
||||
setTimeout(function () {
|
||||
myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
}, 500);
|
||||
// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
|
||||
:deep(.btn-prev) {
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
:deep(.btn-next) {
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
:deep() {
|
||||
.el-tabs__header {
|
||||
display: none;
|
||||
}
|
||||
.el-tabs__content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user