扣除后
<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import useHiKvision from '@/hook/useHikvision'
const { initPlugin, destroyWnd, cuttingPartWindow, repairPartWindow } =
useHiKvision()
const containerId = 'play-wnd'
const modal = ref(null)
const containerRef = ref(null)
const cutWnd = () => {
const { left, top, width, height } = calcCompute()
cuttingPartWindow(left, top, width, height)
}
const repairWnd = () => {
const { left, top, width, height } = calcCompute()
repairPartWindow(left, top, width, height)
}
const calcCompute = () => {
// 获取 modal 左边 到 containerRef 左边的距离
const modalLeft = modal.value.getBoundingClientRect().left
const modalWidth = modal.value.getBoundingClientRect().width
const containerLeft = containerRef.value.getBoundingClientRect().left
const left = modalLeft - containerLeft
// 获取 modal 上边 到 containerRef 上边的距离
const modalTop = modal.value.getBoundingClientRect().top
const containerTop = containerRef.value.getBoundingClientRect().top
const top = modalTop - containerTop
// 计算垂直重叠区域
const containerTopBottom = containerRef.value.getBoundingClientRect().bottom
const modalBottom = modal.value.getBoundingClientRect().bottom
const overlapTop = Math.max(containerTop, modalTop)
const overlapBottom = Math.min(containerTopBottom, modalBottom)
const overlapHeight = Math.max(0, overlapBottom - overlapTop)
return {
left,
top,
width: modalWidth + 1,
height: overlapHeight + 1
}
}
onMounted(() => {
initPlugin(containerId)
})
onUnmounted(destroyWnd)
</script>
<template>
<div class="relative">
<div
class="w-[50vw] h-[50vh] bg-red-400 translate-x-[300px]"
:id="containerId"
ref="containerRef"
></div>
<button
class="bg-amber-950 text-white px-4 py-2 rounded-md"
@click="cutWnd"
>
扣除
</button>
<button
class="bg-amber-950 text-white px-4 py-2 rounded-md"
@click="repairWnd"
>
还原
</button>
<div
class="absolute w-[500px] h-[400px] bg-white top-[300px] left-[500px]"
ref="modal"
></div>
</div>
</template>
