fix:id 修改

This commit is contained in:
shijing 2026-04-07 09:30:25 +08:00
parent 57ede91fa8
commit 724d89ecd6
1 changed files with 95 additions and 26 deletions

View File

@ -92,7 +92,7 @@
>
{{ row.label }}
</div>
<div class="control-panel__label control-panel__label--motor" :style="{ minHeight: returnMotorHeight }">
<div class="control-panel__label control-panel__label--motor" :style="{ minHeight: returnMotorHeight }">
回车侧
</div>
</div>
@ -108,9 +108,9 @@
{{ item.team }}
</span>
</div>
<div class="control-panel__section" :id="'unit_up_'+index"
<div class="control-panel__section" :id="getUnitDropId('up', index)"
@dragover="onDjDragOver"
@drop="onDjDrop($event, item , 'unit_up_'+index,index)">
@drop="onDjDrop($event, item, getUnitDropId('up', index), index)">
<div
v-for="row in upperBlockRows"
:key="`upper-${item.team}-${row.key}`"
@ -136,9 +136,9 @@
<div class="control-panel__cell control-panel__cell--motor" :style="{ minHeight: middleMotorHeight }">
<div class="control-panel__motor-grid">
<div
v-for="dj in item.team_top.dianji"
v-for="(dj, motorIndex) in item.team_top.dianji"
:key="dj.id"
:id="dj.id"
:id="'unit'+index+'_up_'+motorIndex"
class="control-panel__motor-card dianji_status"
>
<div class="flexs items_center gap0_25 justify_center">
@ -175,6 +175,11 @@
<div class="items_center">
<span v-if="dj.eqm == '正常'" class="text_10 fontw600 text_emerald">{{ dj.eqm }}</span>
<span v-else class="text_10 fontw600 text_red">{{ dj.eqm }}</span>
<span
v-if="motorIndex < 2"
:data-monitor-value="getMotorSlotId('up', index, motorIndex + 1)"
style="display: none"
></span>
</div>
</div>
</div>
@ -207,9 +212,9 @@
<span> °C</span>
</div>
<div class="control-panel__section"
:id="'unit_down_'+index"
:id="getUnitDropId('down', index)"
@dragover="onDjDragOver"
@drop="onDjDrop($event, item, 'unit_up_'+index,index)">
@drop="onDjDrop($event, item, getUnitDropId('down', index), index)">
<div
v-for="row in lowerBlockRows"
:key="`lower-${item.team}-${row.key}`"
@ -234,8 +239,9 @@
<div class="control-panel__cell control-panel__cell--motor" :style="{ minHeight: returnMotorHeight }">
<div class="control-panel__motor-grid">
<div
v-for="dj in item.team_bottom.dianji2"
v-for="(dj, motorIndex) in item.team_bottom.dianji2"
:key="dj.id"
:id="'unit'+index+'_down_'+motorIndex"
class="control-panel__motor-card dianji_status"
>
<div class="flexs items_center gap0_25 justify_center">
@ -272,6 +278,11 @@
<div class="items_center">
<span v-if="dj.eqm == '正常'" class="text_10 fontw600 text_emerald">{{ dj.eqm }}</span>
<span v-else class="text_10 fontw600 text_red">{{ dj.eqm }}</span>
<span
v-if="motorIndex < 2"
:data-monitor-value="getMotorSlotId('down', index, motorIndex + 1)"
style="display: none"
></span>
</div>
</div>
</div>
@ -1441,9 +1452,21 @@ const clearError = () => {
const getCellId = (prefix: string | undefined, index: number) => {
return prefix ? `${prefix}${index}` : undefined;
};
const getUnitDropId = (section: "up" | "down", index: number) => {
return `unit_${section}_${index}`;
};
const getMotorSlotId = (section: "up" | "down", index: number, slot: number) => {
return getMotorBindingKey(section, index, slot);
};
const getTempDropId = (side: "tempera1" | "tempera2", item: CoalUnit, index: number) => {
return `${side}_unit${item.unit}_${index + 1}`;
};
const getUnitBindingKey = (section: "up" | "down", index: number) => {
return `binding_unit_${section}_${index}`;
};
const getMotorBindingKey = (section: "up" | "down", index: number, slot: number) => {
return `binding_motor_${section}_${index}_${slot}`;
};
const isTimeRow = (row: BlockRowConfig) => row.kind === "time";
const getCellValue = (item: CoalUnit, row: BlockRowConfig) => {
if (row.kind === "time" && row.section) {
@ -1479,8 +1502,6 @@ const updateCellValue = (item: CoalUnit, row: BlockRowConfig, event: Event) => {
const onPointDragStart = (event: DragEvent, point: PointItem) => {
if (event.dataTransfer) {
event.dataTransfer.setData('text/plain', JSON.stringify(point));
console.log('start000000000');
console.log('event.dataTransfer.getData("text/plain"):', JSON.parse(event.dataTransfer.getData("text/plain")));
}
};
const onDjDragOver = (event: DragEvent) => {
@ -1492,22 +1513,67 @@ const onDjDragOver = (event: DragEvent) => {
};
const pendingPointUpdates = ref<Array<{ key: string; value: string }>>([]);
const onDjDrop = (event: DragEvent, dropItem: any, temp: string,index?:number) => {
const getRolePointId = (unit: any, equipmentIndex: number, rolePointIndex: number) => {
return unit?.equipments?.[equipmentIndex]?.role_points?.[rolePointIndex]?.point_id;
};
const assignUnitTiming = (targetItem: CoalUnit, section: SectionKey, unit: any) => {
targetItem[section].run_time_sec = unit?.run_time_sec ?? "";
targetItem[section].stop_time_sec = unit?.stop_time_sec ?? "";
targetItem[section].acc_time_sec = unit?.acc_time_sec ?? "";
targetItem[section].bl_time_sec = unit?.bl_time_sec ?? "";
};
const onDjDrop = (event: DragEvent, dropItem: any, DomId: string,index:number) => {
event.preventDefault();
if (!event.dataTransfer) return;
const rawJson = event.dataTransfer.getData("text/plain");
if (!rawJson) return;
const raw = JSON.parse(rawJson);
const key = temp;
console.log('raw:', raw);
console.log('key:', key);
const unitJson = event.dataTransfer.getData("text/plain");
if (!unitJson) return;
const unit = JSON.parse(unitJson);
console.log('unit:', unit);
console.log('DomId:', DomId);
console.log('index:', index);
console.log('dropItem:', dropItem);
const existing = pendingPointUpdates.value.find((item) => item.key === key);
if (existing) {
existing.value = String(raw.id);
} else {
pendingPointUpdates.value.push({ key, value: String(raw.id) });
const targetItem = dataList[index];
//1unittargetItemId
if (unit?.id) {
pendingPointUpdates.value.push({key: DomId, value: String(unit.id)});
}
//IdDomId
const djMotor1 = getRolePointId(unit, 0, 0);
const djMotor2 = getRolePointId(unit, 0, 1);
const djMotor3 = getRolePointId(unit, 1, 0);
const djMotor4 = getRolePointId(unit, 1, 1);
console.log('djMotor1:', djMotor1);
console.log('djMotor2:', djMotor2);
console.log('djMotor3:', djMotor1);
console.log('djMotor4:', djMotor1);
let djDomId1 = '', djDomId2 = '', djDomId3 = '', djDomId4 = '';
if (DomId.includes("unit_up_")) {
assignUnitTiming(targetItem, "team_top", unit);
djDomId1 = 'unit'+index+'_up_0';
djDomId2 = 'unit'+index+'_up_1';
djDomId3 = 'unit'+index+'_up_2';
djDomId4 = 'unit'+index+'_up_3';
}
if (DomId.includes("unit_down_")) {
assignUnitTiming(targetItem, "team_bottom", unit);
djDomId1 = 'unit'+index+'_down_0';
djDomId2 = 'unit'+index+'_down_1';
djDomId3 = 'unit'+index+'_down_2';
djDomId4 = 'unit'+index+'_down_3';
}
if (djMotor1) {
pendingPointUpdates.value.push({key: djDomId1, value: String(djMotor1)});
}
if (djMotor2) {
pendingPointUpdates.value.push({key: djDomId2, value: String(djMotor2)});
}
if (djMotor3) {
pendingPointUpdates.value.push({key: djDomId3, value: String(djMotor3)});
}
if (djMotor4) {
pendingPointUpdates.value.push({key: djDomId4, value: String(djMotor4)});
}
};
@ -1560,6 +1626,7 @@ const toggleDjStop = (
};
const commitPointUpdates = () => {
if (!pendingPointUpdates.value.length) return;
console.log('pendingPointUpdates',pendingPointUpdates.value);
const data: Record<string, string> = {};
pendingPointUpdates.value.forEach((item) => {
data[item.key] = item.value;
@ -1593,9 +1660,11 @@ const initWebSocket = () => {
if (entries.length) {
entries.forEach(([elementId]) => {
const el = document.getElementById(elementId);
const span = el?.querySelector("span");
if (span) {
span.textContent = data.data.value_text ?? "";
const valueTarget =
el?.querySelector<HTMLElement>("[data-monitor-value]") ||
el?.querySelector<HTMLElement>("span");
if (valueTarget) {
valueTarget.textContent = data.data.value_text ?? "";
}
});
// entries.forEach(([elementId]) => {