fix: BUG修改
This commit is contained in:
kun
parent
f4a494e58a
commit
d9ffb26540
@ -65,14 +65,14 @@
|
|||||||
src="@/assets/images/AIwaring/抓拍.png"
|
src="@/assets/images/AIwaring/抓拍.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<img
|
<!-- <img
|
||||||
id="btnCapture"
|
id="btnCapture"
|
||||||
title="电子放大"
|
title="电子放大"
|
||||||
class="btn"
|
class="btn"
|
||||||
@click="imageLarge(videoData)"
|
@click="imageLarge(videoData)"
|
||||||
src="@/assets/images/AIwaring/电子放大.png"
|
src="@/assets/images/AIwaring/电子放大.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-relative-right">
|
<div class="video-relative-right">
|
||||||
@ -155,19 +155,19 @@ const adjust = async (params: any) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
// 电子放大
|
// 电子放大
|
||||||
const imageLarge = (item: any) => {
|
// const imageLarge = (item: any) => {
|
||||||
let Plugin = item.dialogPlugin;
|
// let Plugin = item.dialogPlugin;
|
||||||
Plugin.JS_EnableZoom(0).then(
|
// Plugin.JS_EnableZoom(0).then(
|
||||||
() => {
|
// () => {
|
||||||
console.info("JS_EnableZoom success");
|
// console.info("JS_EnableZoom success");
|
||||||
// do you want...
|
// // do you want...
|
||||||
},
|
// },
|
||||||
err => {
|
// err => {
|
||||||
console.info("JS_EnableZoom failed");
|
// console.info("JS_EnableZoom failed");
|
||||||
// do you want...
|
// // do you want...
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
};
|
// };
|
||||||
// 图片抓拍
|
// 图片抓拍
|
||||||
const imageGet = async (item: any) => {
|
const imageGet = async (item: any) => {
|
||||||
let Plugin = item.dialogPlugin;
|
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