<script setup>
|
import { ref, computed, onMounted, onBeforeUnmount, } from "vue";
|
import svgLine from '@/components/svg/svgLine.vue';
|
import switchBox from '@/components/svg/switchBox.vue';
|
import svgText from '@/components/svg/svgText.vue';
|
|
|
import svgFloor from '@/components/svg/svgFloor.vue';
|
import svgCabinet from '@/components/svg/svgCabinet.vue';
|
|
const currentCabinetIdx = ref(-1);
|
const currentLockIdx = ref(-1);
|
const infoVisisble = ref(false);
|
const left = ref(0);
|
const top = ref(0);
|
const settingVisible = ref(false);
|
const viewInfo = ref({});
|
|
const props = defineProps({
|
rtData: {
|
type: Array,
|
default: () => [],
|
},
|
locationInfo: {
|
type: Object,
|
default: () => ({
|
control: [],
|
all: []
|
}),
|
},
|
});
|
|
const cabinetsList = computed(() => {
|
return props.locationInfo.control.map(v => v.screenFlag).filter(v => v);
|
});
|
|
const lockStatus = computed(() => {
|
// props.rtData;
|
let arr = [];
|
for(let i = 0; i < 20; i++) {
|
let lock1 = getInfo(i + 1, 1);
|
let lock2 = getInfo(i + 1, 2);
|
arr.push([lock1, lock2]);
|
}
|
// console.log('arr', arr, '=============');
|
|
return arr;
|
});
|
|
function getInfo(idx, doorIdx) {
|
let lock = props.locationInfo.control.filter(v=>v.screenFlag == idx && v.addressFlag == doorIdx);
|
let lockId;
|
if (lock.length) {
|
lockId = lock[0].lockId;
|
}
|
let info = props.rtData.filter(v => v.lockId == lockId);
|
// console.log('idx', idx, doorIdx, info.length ? info[0] : {}, '=============');
|
|
return info.length ? info[0] : {};
|
}
|
|
|
function showInfo(data, idx) {
|
// console.log(data, idx);
|
currentCabinetIdx.value = idx;
|
currentLockIdx.value = data.idx;
|
left.value = data.event.clientX + 'px';
|
top.value = data.event.clientY + 'px';
|
// console.log('top, left', top.value, left.value, '=============');
|
|
viewInfo.value = getInfo(idx + 1, data.idx + 1);
|
// console.log('viewInfo', viewInfo.value, '=============');
|
|
if (!viewInfo.value.lockId) return;
|
infoVisisble.value = true;
|
}
|
|
function hideInfo() {
|
infoVisisble.value = false;
|
}
|
|
onMounted(() => {
|
window.addEventListener('resize', hideInfo);
|
});
|
|
onBeforeUnmount(() => {
|
window.removeEventListener('resize', hideInfo);
|
});
|
|
defineExpose({
|
hideInfo
|
});
|
|
</script>
|
|
<template>
|
<svg
|
v-bind="$attrs"
|
width="100%"
|
height="100%"
|
viewBox="0 0 1566 712"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
style="position: relative"
|
>
|
|
<svg-text
|
:offset="[783, 44]"
|
textAnchor="middle"
|
fontSize="28"
|
text="机房机柜"
|
></svg-text>
|
|
<svg-floor
|
:offset="[0, 0]"
|
:points="[
|
[320, 210],
|
[1410, 210],
|
[ 1210, 570],
|
[10, 570],
|
]"
|
></svg-floor>
|
|
<svg-cabinet
|
v-for="(i, idx) in 10"
|
:key="'list0_' + idx"
|
:offset="[300 + idx * 110, 100]"
|
:disabled="cabinetsList.every(v => v !== (idx + 1))"
|
:onLine0="lockStatus[idx][0]['lockOnline'] == 1"
|
:onLine1="lockStatus[idx][1]['lockOnline'] == 1"
|
:lock0="lockStatus[idx][0]['lockState'] == 0"
|
:lock1="lockStatus[idx][1]['lockState'] == 0"
|
@showInfo="(eData) => showInfo(eData, idx)"
|
></svg-cabinet>
|
|
<svg-cabinet
|
v-for="(i, idx) in 10"
|
:key="'list1_' + idx"
|
:offset="[40 + idx * 120, 400]"
|
:disabled="cabinetsList.every(v => v !== (idx + 11))"
|
:onLine0="lockStatus[idx + 10][0]['lockOnline'] == 1"
|
:onLine1="lockStatus[idx + 10][1]['lockOnline'] == 1"
|
:lock0="lockStatus[idx + 10][0]['lockState'] == 0"
|
:lock1="lockStatus[idx + 10][1]['lockState'] == 0"
|
@showInfo="(eData) => showInfo(eData, idx + 10)"
|
></svg-cabinet>
|
<div class="setting"></div>
|
</svg>
|
|
<teleport to='body' v-if="infoVisisble">
|
<div class="info" v-if="infoVisisble" :style="{ left, top }">
|
<!-- 第{{ currentCabinetIdx + 1 }}个柜
|
{{ currentLockIdx == 0 ? "前门" : "后门" }}锁 -->
|
<div class="item lock-id">
|
<div class="label">锁具ID:</div>
|
<div class="value">{{ viewInfo.lockId }}</div>
|
</div>
|
<div class="item lock-name">
|
<div class="label">锁具名称:</div>
|
<div class="value">{{ viewInfo.lockName }}</div>
|
</div>
|
<div class="item online">
|
<div class="label">在线状态:</div>
|
<div class="value">{{ viewInfo.lockOnline ? "在线" : "离线" }}</div>
|
</div>
|
<div class="item is-lock" v-if="viewInfo.lockOnline">
|
<div class="label">锁具状态:</div>
|
<div class="value">{{ viewInfo.lockState == 0 ? "已闭锁" : "已开锁" }}</div>
|
</div>
|
<div class="item" v-if="viewInfo.lockOnline">
|
<div class="label">蓝牙状态:</div>
|
<div class="value">{{ viewInfo.blState == 0 ? '蓝牙关闭' : '蓝牙开启' }}</div>
|
</div>
|
</div>
|
<div class="mask" @mouseenter="hideInfo"></div>
|
</teleport>
|
</template>
|
|
<style scoped lang="less">
|
.info {
|
position: absolute;
|
background: #0ff;
|
color: #000;
|
z-index: 999999;
|
cursor: pointer;
|
padding: 8px;
|
transform: translate(-100%, -100%);
|
border-radius: 4px;
|
.item {
|
display: flex;
|
align-items: center;
|
.label {
|
width: 5em;
|
margin-right: 0.4em;
|
text-align: right;
|
}
|
.value {
|
flex: 1;
|
}
|
}
|
&::after {
|
content: '';
|
position: absolute;
|
left: 80%;
|
top: 80%;
|
width: 22%;
|
height: 22%;
|
z-index: -1;
|
}
|
}
|
.mask {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
// background: rgba(0, 0, 0, 0.4);
|
z-index: 999998;
|
}
|
|
</style>
|
