zcdsj
/
product_control_client
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:页面调整

This commit is contained in:
shijing 2026-03-31 10:24:22 +08:00
parent afb8a50556
commit 734933a9df
1 changed files with 60 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/coalFeeding.vue
View File

@ -108,7 +108,9 @@
{{ item.team }} {{ item.team }}
</span> </span>
</div> </div>
<div class="control-panel__section"> <div class="control-panel__section" :id="'unit_up_'+index"
@dragover="onDjDragOver"
@drop="onDjDrop($event, item , 'unit_up_'+index,index)">
<div <div
v-for="row in upperBlockRows" v-for="row in upperBlockRows"
:key="`upper-${item.team}-${row.key}`" :key="`upper-${item.team}-${row.key}`"
@ -138,8 +140,6 @@
:key="dj.id" :key="dj.id"
:id="dj.id" :id="dj.id"
class="control-panel__motor-card dianji_status" class="control-panel__motor-card dianji_status"
@dragover="onDjDragOver"
@drop="onDjDrop($event, dj, 'id')"
> >
<div class="flexs items_center gap0_25 justify_center"> <div class="flexs items_center gap0_25 justify_center">
<div <div
@ -185,7 +185,7 @@
:id="getTempDropId('tempera2', item, index)" :id="getTempDropId('tempera2', item, index)"
class="control-panel__cell control-panel__cell--temp" class="control-panel__cell control-panel__cell--temp"
@dragover="onDjDragOver" @dragover="onDjDragOver"
@drop="onDjDrop($event, item, getTempDropId('tempera2', item, index))" @drop="onDjDrop($event, item, getTempDropId('tempera2', item, index),index)"
> >
<span class="control-panel__value control-panel__value--temp">{{ item.tempera2 }}</span> <span class="control-panel__value control-panel__value--temp">{{ item.tempera2 }}</span>
<span> °C</span> <span> °C</span>
@ -201,12 +201,15 @@
:id="getTempDropId('tempera1', item, index)" :id="getTempDropId('tempera1', item, index)"
class="control-panel__cell control-panel__cell--temp" class="control-panel__cell control-panel__cell--temp"
@dragover="onDjDragOver" @dragover="onDjDragOver"
@drop="onDjDrop($event, item, getTempDropId('tempera1', item, index))" @drop="onDjDrop($event, item, getTempDropId('tempera1', item, index),index)"
> >
<span class="control-panel__value control-panel__value--temp">{{ item.tempera1 }}</span> <span class="control-panel__value control-panel__value--temp">{{ item.tempera1 }}</span>
<span> °C</span> <span> °C</span>
</div> </div>
<div class="control-panel__section"> <div class="control-panel__section"
:id="'unit_down_'+index"
@dragover="onDjDragOver"
@drop="onDjDrop($event, item, 'unit_up_'+index,index)">
<div <div
v-for="row in lowerBlockRows" v-for="row in lowerBlockRows"
:key="`lower-${item.team}-${row.key}`" :key="`lower-${item.team}-${row.key}`"
@ -234,8 +237,6 @@
v-for="dj in item.team_bottom.dianji2" v-for="dj in item.team_bottom.dianji2"
:key="dj.id" :key="dj.id"
class="control-panel__motor-card dianji_status" class="control-panel__motor-card dianji_status"
@dragover="onDjDragOver"
@drop="onDjDrop($event, dj, 'id')"
> >
<div class="flexs items_center gap0_25 justify_center"> <div class="flexs items_center gap0_25 justify_center">
<div <div
@ -365,19 +366,19 @@ type djItem = {
id: string; id: string;
name?: string; name?: string;
}; };
type TimeFieldKey = "run_time_sec" | "top_time_sec" | "acc_time_sec" | "bl_time_sec"; type TimeFieldKey = "run_time_sec" | "stop_time_sec" | "acc_time_sec" | "bl_time_sec";
type DisplayFieldKey = "tmljsjs" | "tmljsjx" | "tempera1" | "tempera2" | "carNumber"; type DisplayFieldKey = "tmljsjs" | "tmljsjx" | "tempera1" | "tempera2" | "carNumber";
type SectionKey = "team_top" | "team_bottom"; type SectionKey = "team_top" | "team_bottom";
type CoalSectionTop = { type CoalSectionTop = {
run_time_sec: number | string; run_time_sec: number | string;
top_time_sec: number | string; stop_time_sec: number | string;
acc_time_sec: number | string; acc_time_sec: number | string;
bl_time_sec: number | string; bl_time_sec: number | string;
dianji: djItem[]; dianji: djItem[];
}; };
type CoalSectionBottom = { type CoalSectionBottom = {
run_time_sec: number | string; run_time_sec: number | string;
top_time_sec: number | string; stop_time_sec: number | string;
acc_time_sec: number | string; acc_time_sec: number | string;
bl_time_sec: number | string; bl_time_sec: number | string;
dianji2: djItem[]; dianji2: djItem[];
@ -402,17 +403,17 @@ type CoalUnit = {
team_bottom: CoalSectionBottom; team_bottom: CoalSectionBottom;
}; };
const upperBlockRows: BlockRowConfig[] = [ const upperBlockRows: BlockRowConfig[] = [
{ key: "run_time_sec", label: "投煤运行时间设定", kind: "time", section: "team_top", idPrefix: "tmyxsds" }, { key: "run_time_sec", label: "投煤运行时间设定", kind: "time", section: "team_top", idPrefix: "run_time_sec" },
{ key: "top_time_sec", label: "投煤停止时间设定", kind: "time", section: "team_top", idPrefix: "tmtzsds" }, { key: "stop_time_sec", label: "投煤停止时间设定", kind: "time", section: "team_top", idPrefix: "stop_time_sec" },
{ key: "acc_time_sec", label: "投煤累积时间设定", kind: "time", section: "team_top", idPrefix: "tmljsds" }, { key: "acc_time_sec", label: "投煤累积时间设定", kind: "time", section: "team_top", idPrefix: "acc_time_sec" },
{ key: "bl_time_sec", label: "布料运行时间设定", kind: "time", section: "team_top", idPrefix: "blyxsds" }, { key: "bl_time_sec", label: "布料运行时间设定", kind: "time", section: "team_top", idPrefix: "bl_time_sec" },
{ key: "tmljsjs", label: "投煤累积时间", kind: "display", idPrefix: "tmljsjs" }, { key: "tmljsjs", label: "投煤累积时间", kind: "display", idPrefix: "tmljsjs" },
]; ];
const lowerBlockRows: BlockRowConfig[] = [ const lowerBlockRows: BlockRowConfig[] = [
{ key: "run_time_sec", label: "投煤运行时间设定", kind: "time", section: "team_bottom", idPrefix: "tmyxsdx" }, { key: "run_time_sec", label: "投煤运行时间设定", kind: "time", section: "team_bottom", idPrefix: "run_time_sec" },
{ key: "top_time_sec", label: "投煤停止时间设定", kind: "time", section: "team_bottom", idPrefix: "tmtzsdx" }, { key: "stop_time_sec", label: "投煤停止时间设定", kind: "time", section: "team_bottom", idPrefix: "stop_time_sec" },
{ key: "acc_time_sec", label: "投煤累积时间设定", kind: "time", section: "team_bottom", idPrefix: "tmljsdx" }, { key: "acc_time_sec", label: "投煤累积时间设定", kind: "time", section: "team_bottom", idPrefix: "acc_time_sec" },
{ key: "bl_time_sec", label: "布料运行时间设定", kind: "time", section: "team_bottom", idPrefix: "blyxsdx" }, { key: "bl_time_sec", label: "布料运行时间设定", kind: "time", section: "team_bottom", idPrefix: "bl_time_sec" },
{ key: "tmljsjx", label: "投煤累积时间", kind: "display", idPrefix: "tmljsjx" }, { key: "tmljsjx", label: "投煤累积时间", kind: "display", idPrefix: "tmljsjx" },
]; ];
const dataList = reactive<CoalUnit[]>([ const dataList = reactive<CoalUnit[]>([
@ -427,7 +428,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 55, stop_time_sec: 55,
acc_time_sec: 55, acc_time_sec: 55,
bl_time_sec: 3, bl_time_sec: 3,
dianji: [ dianji: [
@ -459,7 +460,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 55, stop_time_sec: 55,
acc_time_sec: 58, acc_time_sec: 58,
bl_time_sec: 3, bl_time_sec: 3,
dianji2: [ dianji2: [
@ -501,7 +502,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 120, stop_time_sec: 120,
acc_time_sec: 57, acc_time_sec: 57,
bl_time_sec: 40, bl_time_sec: 40,
dianji: [ dianji: [
@ -533,7 +534,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 120, stop_time_sec: 120,
acc_time_sec: 57, acc_time_sec: 57,
bl_time_sec: 40, bl_time_sec: 40,
dianji2: [ dianji2: [
@ -575,7 +576,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 480, stop_time_sec: 480,
acc_time_sec: 58, acc_time_sec: 58,
bl_time_sec: 40, bl_time_sec: 40,
dianji: [ dianji: [
@ -607,7 +608,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 480, stop_time_sec: 480,
acc_time_sec: 58, acc_time_sec: 58,
bl_time_sec: 40, bl_time_sec: 40,
dianji2: [ dianji2: [
@ -649,7 +650,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 240, stop_time_sec: 240,
acc_time_sec: 59, acc_time_sec: 59,
bl_time_sec: 38, bl_time_sec: 38,
dianji: [ dianji: [
@ -681,7 +682,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 240, stop_time_sec: 240,
acc_time_sec: 59, acc_time_sec: 59,
bl_time_sec: 38, bl_time_sec: 38,
dianji2: [ dianji2: [
@ -723,7 +724,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 120, stop_time_sec: 120,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 38, bl_time_sec: 38,
dianji: [ dianji: [
@ -755,7 +756,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 120, stop_time_sec: 120,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 38, bl_time_sec: 38,
dianji2: [ dianji2: [
@ -797,7 +798,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 240, stop_time_sec: 240,
acc_time_sec: 57, acc_time_sec: 57,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -829,7 +830,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 240, stop_time_sec: 240,
acc_time_sec: 57, acc_time_sec: 57,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -871,7 +872,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 180, stop_time_sec: 180,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -903,7 +904,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 180, stop_time_sec: 180,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -945,7 +946,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -977,7 +978,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1019,7 +1020,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -1051,7 +1052,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1093,7 +1094,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 180, stop_time_sec: 180,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -1125,7 +1126,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 180, stop_time_sec: 180,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1167,7 +1168,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 480, stop_time_sec: 480,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -1199,7 +1200,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 480, stop_time_sec: 480,
acc_time_sec: 60, acc_time_sec: 60,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1241,7 +1242,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 59, acc_time_sec: 59,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -1273,7 +1274,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 3, run_time_sec: 3,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 59, acc_time_sec: 59,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1315,7 +1316,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 60, stop_time_sec: 60,
acc_time_sec: 63, acc_time_sec: 63,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -1347,7 +1348,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 60, stop_time_sec: 60,
acc_time_sec: 63, acc_time_sec: 63,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1389,7 +1390,7 @@ const dataList = reactive<CoalUnit[]>([
statusAuto: true, statusAuto: true,
team_top: { team_top: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 65, acc_time_sec: 65,
bl_time_sec: 36, bl_time_sec: 36,
dianji: [ dianji: [
@ -1409,7 +1410,7 @@ const dataList = reactive<CoalUnit[]>([
}, },
team_bottom: { team_bottom: {
run_time_sec: 2, run_time_sec: 2,
top_time_sec: 90, stop_time_sec: 90,
acc_time_sec: 65, acc_time_sec: 65,
bl_time_sec: 36, bl_time_sec: 36,
dianji2: [ dianji2: [
@ -1478,22 +1479,30 @@ const updateCellValue = (item: CoalUnit, row: BlockRowConfig, event: Event) => {
const onPointDragStart = (event: DragEvent, point: PointItem) => { const onPointDragStart = (event: DragEvent, point: PointItem) => {
if (event.dataTransfer) { if (event.dataTransfer) {
event.dataTransfer.setData('text/plain', JSON.stringify(point)); 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) => { const onDjDragOver = (event: DragEvent) => {
console.log('over1111111111111');
event.preventDefault(); event.preventDefault();
if (event.dataTransfer) { if (event.dataTransfer) {
event.dataTransfer.dropEffect = "copy"; event.dataTransfer.dropEffect = "copy";
} }
}; };
const pendingPointUpdates = ref<Array<{ key: string; value: string }>>([]); const pendingPointUpdates = ref<Array<{ key: string; value: string }>>([]);
const onDjDrop = (event: DragEvent, dropItem: any, temp: string) => {
const onDjDrop = (event: DragEvent, dropItem: any, temp: string,index?:number) => {
event.preventDefault(); event.preventDefault();
if (!event.dataTransfer) return; if (!event.dataTransfer) return;
const rawJson = event.dataTransfer.getData("text/plain"); const rawJson = event.dataTransfer.getData("text/plain");
if (!rawJson) return; if (!rawJson) return;
const raw = JSON.parse(rawJson); const raw = JSON.parse(rawJson);
const key = temp; const key = temp;
console.log('raw:', raw);
console.log('key:', key);
console.log('index:', index);
console.log('dropItem:', dropItem);
const existing = pendingPointUpdates.value.find((item) => item.key === key); const existing = pendingPointUpdates.value.find((item) => item.key === key);
if (existing) { if (existing) {
existing.value = String(raw.id); existing.value = String(raw.id);
@ -1501,6 +1510,7 @@ const onDjDrop = (event: DragEvent, dropItem: any, temp: string) => {
pendingPointUpdates.value.push({ key, value: String(raw.id) }); pendingPointUpdates.value.push({ key, value: String(raw.id) });
} }
}; };
const isUnitLocal = (unitName: string, _unitState?: boolean) => { const isUnitLocal = (unitName: string, _unitState?: boolean) => {
return dataList return dataList
.filter((item) => item.team.indexOf(unitName) > -1) .filter((item) => item.team.indexOf(unitName) > -1)
@ -1565,7 +1575,8 @@ const commitPointUpdates = () => {
}; };
// 初始化WebSocket连接 // 初始化WebSocket连接
const initWebSocket = () => { const initWebSocket = () => {
ws.value = new WebSocket(`ws://10.0.11.74:60309/ws/public`); // ws.value = new WebSocket(`ws://10.0.11.74:60309/ws/public`);
ws.value = new WebSocket(`ws://127.0.0.1:60309/ws/public`);
ws.value.onmessage = (event) => { ws.value.onmessage = (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
console.log('WebSocketdata:', data); console.log('WebSocketdata:', data);