S.规则设置逻辑和拆分更新，boxApi方法调用
This commit is contained in:
龚皓
parent
1c0a51ed5e
commit
11ea95b902
|
|
@ -0,0 +1,365 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 打开弹窗按钮 -->
|
||||
<!-- <el-button type="primary" @click="openDialog">打开设置弹窗</el-button> -->
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<!-- <el-dialog title="设置规则" v-model="dialogVisible" width="50%" @close="resetDialog"> -->
|
||||
<el-dialog v-model="localVisible" width="50%" :modal="false" @close="handleClose">
|
||||
<!-- 显示摄像头基本信息 -->
|
||||
<div v-if="CameraDialog.id" class="camera-title">
|
||||
<p><strong>摄像头名称：</strong>{{ CameraDialog.name }} <strong> 通道号: </strong>{{ CameraDialog.id }}
|
||||
</p>
|
||||
<!-- <p><strong>摄像头状态：</strong>{{ CameraDialog.status }}</p> -->
|
||||
<!-- <img :src="CameraDialog.snapshot" alt="Snapshot" style="max-width: 100%; margin-bottom: 20px" /> -->
|
||||
</div>
|
||||
<el-radio-group v-model="CameraDialog.mode" @change="handleGlobalModeChange" style="margin-bottom: 20px">
|
||||
<el-radio label="on">ON</el-radio>
|
||||
<el-radio label="off">OFF</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
|
||||
<div v-for="(rule, index) in CameraDialog.rules" :key="rule.id" class="rule-block">
|
||||
<h3>{{ rule.name }} (模式: {{ rule.mode }})</h3>
|
||||
<el-radio-group v-model="rule.mode" :disabled="CameraDialog.mode === 'off'" @change="handleRuleModeChange(rule)">
|
||||
<el-radio label="on">ON</el-radio>
|
||||
<el-radio label="off">OFF</el-radio>
|
||||
<el-radio label="schedule">时间段</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div v-if="rule.mode === 'schedule'">
|
||||
|
||||
<el-select v-model="rule.schedule.type" placeholder="请选择" style="margin: 10px 0">
|
||||
<el-option label="每日" value="daily"></el-option>
|
||||
</el-select>
|
||||
|
||||
|
||||
<div v-for="(time, timeIndex) in rule.schedule.time_slots" :key="timeIndex" class="time-period">
|
||||
<el-time-picker v-model="rule.schedule.time_slots[timeIndex][0]" format="HH:mm" value-format="HH:mm"
|
||||
placeholder="Start Time" @change="validateTime(rule.schedule.time_slots, timeIndex)" />
|
||||
<el-time-picker v-model="rule.schedule.time_slots[timeIndex][1]" format="HH:mm" value-format="HH:mm"
|
||||
placeholder="End Time" @change="validateTime(rule.schedule.time_slots, timeIndex)" />
|
||||
<el-button type="danger" @click="removeTimeSlot(rule.schedule.time_slots, timeIndex)">删除</el-button>
|
||||
|
||||
|
||||
<p v-if="!rule.schedule.time_slots[timeIndex][0] || !rule.schedule.time_slots[timeIndex][1]"
|
||||
style="color: red; margin-top: 5px">
|
||||
*
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="addTimeSlot(rule.schedule.time_slots)">新增时间段</el-button>
|
||||
<p v-if="!rule.schedule.time_slots.length" style="color: red; margin-top: 10px">
|
||||
请至少添加一个时间段！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗底部操作 -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="success" @click="saveRules">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, reactive } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { BoxApi } from "@/utils/boxApi.ts";
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
cameraData: Object, // 父组件传递过来的摄像头数据
|
||||
visible: Boolean, // 父组件传递的弹窗状态
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible", "save-result"]);
|
||||
|
||||
// API 实例
|
||||
const apiInstance = new BoxApi();
|
||||
|
||||
const cameraDataZ = ref({});
|
||||
const localVisible = ref(props.visible);
|
||||
|
||||
const cameraData = ref({}); // 原始摄像头数据
|
||||
const CameraDialog = ref({}); // 镜像对象，用于格式化后的数据
|
||||
|
||||
// 弹窗控制
|
||||
// const dialogVisible = ref(false);
|
||||
|
||||
// 打开弹窗
|
||||
// const openDialog = async () => {
|
||||
// try {
|
||||
// const token = localStorage.getItem("alertToken");
|
||||
// const cameraId = 1;
|
||||
// const camera = await apiInstance.getCameraById(token, cameraId);
|
||||
// cameraData.value = camera;
|
||||
|
||||
// console.log("摄像头数据:", cameraData.value);
|
||||
|
||||
// formatCameraData();
|
||||
// dialogVisible.value = true;
|
||||
// } catch (error) {
|
||||
// console.error("获取摄像头规则失败:", error);
|
||||
// }
|
||||
// };
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
localVisible.value = newVal;
|
||||
// console.log("newVal:", newVal);
|
||||
if (newVal) {
|
||||
// cameraDataZ.value = JSON.parse(JSON.stringify(newVal));
|
||||
Object.assign(cameraDataZ.value, JSON.parse(JSON.stringify(props.cameraData)));
|
||||
console.log("cameraDataZ:", cameraDataZ.value);
|
||||
formatCameraData(cameraDataZ.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// watch(
|
||||
// () => props.cameraData,
|
||||
// (newVal) => {
|
||||
// console.log("父组件传递的 cameraData:", newVal);
|
||||
// },
|
||||
// { immediate: true } // 立即触发以检查初始值
|
||||
// );
|
||||
|
||||
// watch(
|
||||
// () => props.visible,
|
||||
// (newVal) => {
|
||||
// console.log("父组件传递的 visible 状态:", newVal);
|
||||
// },
|
||||
// { immediate: true }
|
||||
// );
|
||||
|
||||
const handleClose = () => {
|
||||
emit("update:visible", false);
|
||||
};
|
||||
|
||||
|
||||
// 格式化 cameraData 到 CameraDialog
|
||||
const formatCameraData = () => {
|
||||
CameraDialog.value = {
|
||||
id: cameraDataZ.value.id,
|
||||
name: cameraDataZ.value.name,
|
||||
status: cameraDataZ.value.status,
|
||||
mode: cameraDataZ.value.mode,
|
||||
// snapshot: cameraData.value.snapshot,
|
||||
rules: cameraDataZ.value.rules.map((rule) => ({
|
||||
id: rule.id,
|
||||
name: rule.name,
|
||||
mode: rule.mode,
|
||||
schedule: {
|
||||
type: rule.schedule?.type || "",
|
||||
time_slots: rule.schedule?.time_slots
|
||||
? rule.schedule.time_slots.map(([start, end]) => [
|
||||
start !== undefined ? convertMinutesToTime(start) : "00:00",
|
||||
end !== undefined ? convertMinutesToTime(end) : "00:00",
|
||||
])
|
||||
: [],
|
||||
},
|
||||
})),
|
||||
};
|
||||
};
|
||||
|
||||
const handleGlobalModeChange = () => {
|
||||
if (CameraDialog.value.mode === "off") {
|
||||
// 全局模式为 off，所有规则的 mode 变为 off
|
||||
CameraDialog.value.rules.forEach((rule) => {
|
||||
rule.mode = "off";
|
||||
});
|
||||
} else if (CameraDialog.value.mode === "on") {
|
||||
// 全局模式为 on，规则保持原有状态
|
||||
CameraDialog.value.rules.forEach((rule) => {
|
||||
if (rule.mode === "schedule") {
|
||||
rule.schedule.type = "daily"; // 自动设置为 daily
|
||||
rule.schedule.time_slots = []; // 清空时间段
|
||||
} else if (rule.mode === "on" || rule.mode === "off") {
|
||||
rule.schedule.type = ""; // 清空 type
|
||||
rule.schedule.time_slots = []; // 清空时间段
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleRuleModeChange = (rule) => {
|
||||
if (rule.mode === "schedule") {
|
||||
rule.schedule.type = "daily"; // 自动选择 daily
|
||||
rule.schedule.time_slots = []; // 清空时间段
|
||||
} else {
|
||||
// 非 schedule 模式，清空 schedule 配置
|
||||
rule.schedule.type = ""; // 清空 type
|
||||
rule.schedule.time_slots = []; // 清空时间段
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleModeChange = (rule) => {
|
||||
if (rule.mode === "schedule") {
|
||||
rule.schedule.type = "daily";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 验证时间段
|
||||
const validateTime = (timeSlots, index) => {
|
||||
const [startTime, endTime] = timeSlots[index];
|
||||
|
||||
if (!startTime || !endTime) {
|
||||
ElMessage.error("请填写完整时间段");
|
||||
return;
|
||||
}
|
||||
|
||||
if (endTime <= startTime) {
|
||||
ElMessage.error("开始时间必须小于结束时间");
|
||||
timeSlots[index][1] = "00:00"; // 恢复为默认值
|
||||
}
|
||||
|
||||
if (endTime && startTime >= endTime) {
|
||||
ElMessage.error("开始时间和结束时间不合理");
|
||||
timeSlots[index][1] = "";
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < timeSlots.length; i++) {
|
||||
if (
|
||||
i !== index &&
|
||||
timeSlots[i][0] &&
|
||||
timeSlots[i][1] &&
|
||||
startTime &&
|
||||
endTime &&
|
||||
!(
|
||||
endTime <= timeSlots[i][0] ||
|
||||
startTime >= timeSlots[i][1]
|
||||
)
|
||||
) {
|
||||
ElMessage.error("时间段重叠，请重新选择");
|
||||
timeSlots[index][0] = "";
|
||||
timeSlots[index][1] = "";
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 添加时间段
|
||||
const addTimeSlot = (timeSlots) => {
|
||||
timeSlots.push([]);
|
||||
};
|
||||
|
||||
// 删除时间段
|
||||
const removeTimeSlot = (timeSlots, index) => {
|
||||
timeSlots.splice(index, 1);
|
||||
};
|
||||
|
||||
// 转换分钟数为时间字符串
|
||||
const convertMinutesToTime = (minutes) => {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// 转换时间为分钟数
|
||||
const convertTimeToMinutes = (timeString) => {
|
||||
const [hours, minutes] = timeString.split(":").map(Number);
|
||||
return hours * 60 + minutes;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 保存规则并反向格式化
|
||||
const saveRules = async() => {
|
||||
let invalidSchedule = false;
|
||||
|
||||
// 遍历所有规则，校验 schedule 模式的完整性
|
||||
CameraDialog.value.rules.forEach((rule) => {
|
||||
if (rule.mode === "schedule") {
|
||||
if (rule.schedule.type && rule.schedule.time_slots.length === 0) {
|
||||
// 提示用户添加时间段
|
||||
ElMessage.error(`规则 "${rule.name}" 的时间段不能为空，请添加至少一个时间段`);
|
||||
invalidSchedule = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 如果校验失败，阻止保存
|
||||
if (invalidSchedule) return;
|
||||
|
||||
// 构造 cameraUpdate 数据
|
||||
const cameraUpdate = {
|
||||
id: CameraDialog.value.id,
|
||||
name: CameraDialog.value.name,
|
||||
mode: CameraDialog.value.mode,
|
||||
// rules: CameraDialog.value.rules.map((rule) => ({
|
||||
// id: rule.id,
|
||||
// name: rule.name,
|
||||
// mode: rule.mode,
|
||||
// })),
|
||||
};
|
||||
console.log("页面的cameraUpdate》》》》》》》》》》》:", cameraUpdate);
|
||||
|
||||
// 构造 ruleUpdate 数据
|
||||
const ruleUpdate = CameraDialog.value.rules.map((rule) => ({
|
||||
id: rule.id,
|
||||
name: rule.name,
|
||||
mode: CameraDialog.value.mode === "off" ? "off" : rule.mode,
|
||||
schedule: rule.mode === "schedule" ? {
|
||||
type: rule.schedule.type,
|
||||
time_slots: rule.schedule.time_slots.map(([start, end]) => [
|
||||
convertTimeToMinutes(start),
|
||||
convertTimeToMinutes(end),
|
||||
]),
|
||||
} : {}, // 非 schedule 模式，schedule 为空对象
|
||||
}));
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
// 假设 API 分别处理 camera 和 rules 更新
|
||||
await apiInstance.updateCamera(token, cameraUpdate.id, cameraUpdate); // 更新摄像头信息
|
||||
await apiInstance.updateRule(token, ruleUpdate); // 更新规则信息
|
||||
// ElMessage.success("规则保存成功");
|
||||
emit("save-result", { success: true, message: "规则保存成功" });
|
||||
emit("update:visible", false);
|
||||
// dialogVisible.value = false;
|
||||
} catch (error) {
|
||||
console.error("保存失败:", error);
|
||||
// ElMessage.error("保存失败，请重试");
|
||||
emit("save-result", { success: false, message: "规则保存失败，请重试" });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-period {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rule-block {
|
||||
border: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
/* text-align: right; */
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.camera-title{
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue