<script setup>
|
import { ref, reactive, computed, onMounted } from 'vue';
|
import { updateLockPosition } from '@/api/lockManager.js';
|
import useElement from "@/hooks/useElement.js";
|
|
const { $loading, $message, $confirm, $confirmPwdDo } = useElement();
|
|
const emit = defineEmits(['success', 'cancel']);
|
|
// 接收父组件传入的锁的数量
|
const props = defineProps({
|
locationInfo: {
|
type: Object,
|
default: () => ({
|
control: [],
|
all: []
|
})
|
},
|
});
|
|
// // 初始化锁的配置数组
|
const lockConfigs = reactive([]);
|
|
// 所有机柜编号
|
// const allCabinets = ref(Array.from({ length: 20 }, (_, i) => ({idx: i + 1, doors: 0x00})));
|
const allCabinets = reactive({});
|
const cabIdxs = reactive({});
|
const doorIdxs = reactive({});
|
|
|
const lockCount = computed(() => {
|
return props.locationInfo.control.length;
|
});
|
|
const otherLocks = computed(() => {
|
let controls = props.locationInfo.control;
|
let all = props.locationInfo.all;
|
let res = [];
|
for (let i = 0, len = all.length; i < len; i++) {
|
let lockId = all[i].lockId;
|
if (controls.every(v => v.lockId != lockId)) {
|
res.push(all[i]);
|
}
|
}
|
return res;
|
});
|
|
// 根据锁的数量初始化配置对象
|
function init() {
|
let controls = props.locationInfo.control;
|
// console.log('controls', controls, cabIdxs.value, '=============');
|
for (let i = 0; i < 20; i++) {
|
allCabinets[i] = {
|
idx: i + 1,
|
doors: 0x00
|
};
|
}
|
|
for (let i = 0, len = lockCount.value; i < len; i++) {
|
cabIdxs[i] = controls[i].screenFlag || undefined;
|
doorIdxs[i] = controls[i].addressFlag || undefined;
|
}
|
|
let all = props.locationInfo.all;
|
// 重新计算每个机柜的门状态 doors 使用all 来更新
|
for (let i = 0, len = all.length; i < len; i++) {
|
let idx = all[i].screenFlag - 1;
|
if (idx < 0 || idx > 19) continue;
|
allCabinets[idx].doors |= all[i].addressFlag;
|
}
|
console.log('config', allCabinets, '=============');
|
|
}
|
|
// 计算可用的机柜编号
|
const availableCabinets = computed(() => {
|
// 计算可用的机柜 遍历所有的机柜，判断是否小于0x03
|
return Object.values(allCabinets).filter(v=> v.doors < 0x03);
|
});
|
|
// 处理机柜选择事件
|
const handleCabinetSelect = (index) => {
|
// 这里可以添加额外的逻辑，比如更新相关状态
|
doorIdxs[index] = undefined;
|
updateAllDoors();
|
};
|
|
const handleDoorSelect = (index) => {
|
// console.log('door change', '=============');
|
|
// allCabinets[index].doors |= doorIdxs[index];
|
updateAllDoors();
|
}
|
|
// 更新全部的门状态
|
function updateAllDoors () {
|
for (let i = 0; i < 20; i++) {
|
allCabinets[i] = {
|
idx: i + 1,
|
doors: 0x00
|
};
|
}
|
// otherLocks
|
let others = otherLocks.value;
|
for (let i = 0, len = others.length; i < len; i++) {
|
let idx = others[i].screenFlag - 1;
|
if (idx < 0 || idx > 19) continue;
|
allCabinets[idx].doors |= others[i].addressFlag;
|
}
|
// controls
|
let controls = props.locationInfo.control;
|
for (let i = 0, len = controls.length; i < len; i++) {
|
let idx = cabIdxs[i];
|
if (!idx) continue;
|
allCabinets[idx-1].doors |= doorIdxs[i];
|
}
|
// console.log('allCabinets', allCabinets, '=============');
|
|
}
|
|
function cancel () {
|
emit('cancel');
|
}
|
|
// 提交表单的方法
|
const submitForm = () => {
|
console.log('提交的锁配置:', cabIdxs, doorIdxs);
|
let params = [];
|
Object.keys(cabIdxs).forEach((key) => {
|
let value = cabIdxs[key];
|
let door = doorIdxs[key];
|
let lock = props.locationInfo.control[key];
|
if (value && door) {
|
params.push({
|
lockId: lock.lockId,
|
screenFlag: value,
|
addressFlag: door,
|
stationId: lock.stationId
|
});
|
}
|
});
|
|
let loading = $loading();
|
updateLockPosition(params).then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
// console.log(data);
|
$message.success("操作成功");
|
emit('success');
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
|
};
|
|
onMounted(() => {
|
init();
|
|
});
|
</script>
|
|
<template>
|
<!-- 遍历所有的锁 给每个锁选择 机柜序号 门序号 -->
|
<!-- <el-form :model="lockConfigs"> -->
|
<el-form class="form">
|
<div class="scroller">
|
<template v-for="(lock, index) in locationInfo.control" :key="index">
|
<el-row :gutter="16">
|
<el-col :span="24">
|
<div class="info">锁具: {{ lock.lockName }}</div>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="机柜序号">
|
<el-select
|
v-model="cabIdxs[index]"
|
placeholder="请选择机柜序号"
|
clearable
|
@change="handleCabinetSelect(index)"
|
>
|
<el-option
|
v-for="cabinet in availableCabinets"
|
:key="cabinet"
|
:label="cabinet.idx"
|
:value="cabinet.idx"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="所在柜门">
|
<el-select
|
v-model="doorIdxs[index]"
|
:disabled="!cabIdxs[index]"
|
clearable
|
placeholder="请选择机柜序号"
|
@change="handleDoorSelect(index)"
|
>
|
<el-option label="前门" :disabled="!cabIdxs[index] || (allCabinets[cabIdxs[index] - 1].doors & 0x01) > 0" :value="1"></el-option>
|
<el-option label="后门" :disabled="!cabIdxs[index] || (allCabinets[cabIdxs[index] - 1].doors & 0x02) > 0" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
</div>
|
<div class="footer">
|
<el-button @click="cancel">取消</el-button>
|
<el-button type="primary" @click="submitForm">提交配置</el-button>
|
</div>
|
</el-form>
|
</template>
|
|
<style scoped lang="less">
|
// .form {
|
// padding-right: 8px;
|
// }
|
.scroller {
|
max-height: 400px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
margin-right: -8px;
|
padding-right: 18px;
|
}
|
.info {
|
font-size: 14px;
|
color: #333;
|
font-weight: bold;
|
margin-bottom: 6px;
|
}
|
.footer {
|
text-align: right;
|
}
|
</style>
|
