驱采列表调整

This commit is contained in:
joylink_zhaoerwei 2023-10-26 17:43:08 +08:00
parent 107c861004
commit 9ec7f73ff2
5 changed files with 184 additions and 95 deletions

View File

@ -1,18 +1,27 @@
<template>
<draggable-dialog seamless title="采集列表" :width="600" :height="485">
<div class="row" v-for="row in setCellMessage.rows" :key="row">
<draggable-dialog seamless title="采集列表" :width="865" :height="485">
<div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
<div
class="ceil"
:class="{
heightLight:
!setCellDialog &&
ciCjList?.cjList[col - 1].bitList[row - 1].refRelays.length,
row > 1 &&
col > 1 &&
ciCjList?.cjList[col - 2].bitList[row - 2].refRelays.length,
changeCellSize: col == 1,
}"
v-for="col in setCellMessage.cols"
v-for="col in showSetCellMessage.cols"
:key="col"
@click="handleCellClick(row, col)"
>
{{ row + '-' + col }}
<span v-if="row == 1 && col == 1"> 位置</span>
<span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span
>
<span v-else>
{{ map.get(`${row - 1}-${col - 1}`) }}
</span>
</div>
</div>
<template v-slot:titleButton>
@ -62,11 +71,16 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import DraggableDialog from 'src/components/common/DraggableDialog.vue';
import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
import { loadCiCjList, creatCiCjList } from 'src/drawApp/relayCabinetLayoutApp';
import {
loadCiCjList,
creatCiCjList,
refRelaysListMap,
} from 'src/drawApp/relayCabinetLayoutApp';
import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
import { Relay } from 'src/graphics/relay/Relay';
const relayCabinetStore = useRelayCabinetStore();
const setCellDialog = ref(false);
@ -74,7 +88,15 @@ const setCellMessage = ref<{ rows: number; cols: number }>({
rows: 32,
cols: 8,
});
const showSetCellMessage = computed(() => {
return {
rows: setCellMessage.value.rows + 1,
cols: setCellMessage.value.cols + 1,
};
});
let ciCjList: relayCabinetGraphicData.CiCj | undefined;
const map = new Map<string, string>();
watch(
() => relayCabinetStore.updateCiCjList,
@ -83,6 +105,7 @@ watch(
relayCabinetStore.updateCiCjList = false;
setCellDialog.value = true;
setCellDialog.value = false;
updateMap();
}
}
);
@ -96,12 +119,14 @@ onMounted(() => {
setCellMessage.value.rows = ciCjList.dsCount;
setCellMessage.value.cols = ciCjList.cjList.length;
}
updateMap();
});
function handleCellClick(row: number, col: number) {
if (row == 1 || col == 1) return;
relayCabinetStore.showCiQdConfig = false;
relayCabinetStore.showCiCjConfig = true;
relayCabinetStore.setEditCiCjConfig({ row, col });
relayCabinetStore.setEditCiCjConfig({ row: row - 1, col: col - 1 });
}
function setCellListConfig() {
@ -119,22 +144,43 @@ function cancelSetCellListConfig() {
ciCjList as relayCabinetGraphicData.CiCj
).cjList.length;
}
function updateMap() {
ciCjList?.cjList.forEach((cjDataSet, i) => {
cjDataSet.bitList.forEach((cjData, j) => {
const ref = cjData.refRelays.map((refRelay) => {
const conbinationData = refRelaysListMap.get(refRelay.relayId);
const relay = relayCabinetStore
.getDrawApp()
.queryStore.queryById<Relay>(refRelay.relayId);
const pos =
refRelay.position == relayCabinetGraphicData.CjDataItem.PostionType.Q
? 'Q'
: 'H';
return `${conbinationData?.device}_${conbinationData?.combinationtype}_${relay.datas.code}_${pos}`;
});
map.set(`${j + 1}-${i + 1}`, ref.join('\\'));
});
});
}
</script>
<style scoped>
.row {
display: flex;
}
.ceil {
width: 60px;
width: 120px;
height: 30px;
border: solid 1px red;
margin: 7px;
cursor: pointer;
text-align: center;
line-height: 30px;
word-break: break-all;
overflow: hidden;
}
.changeCellSize {
width: 40px;
}
.heightLight {
background-color: red;
background-color: orange;
}
</style>

View File

@ -1,18 +1,27 @@
<template>
<draggable-dialog seamless title="驱动列表" :width="600" :height="485">
<div class="row" v-for="row in setCellMessage.rows" :key="row">
<draggable-dialog seamless title="驱动列表" :width="865" :height="485">
<div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
<div
class="ceil"
:class="{
heightLight:
!setCellDialog &&
ciQdList?.qdList[col - 1].bitList[row - 1].refRelays.length,
row > 1 &&
col > 1 &&
ciQdList?.qdList[col - 2].bitList[row - 2].refRelays.length,
changeCellSize: col == 1,
}"
v-for="col in setCellMessage.cols"
v-for="col in showSetCellMessage.cols"
:key="col"
@click="handleCellClick(row, col)"
>
{{ row + '-' + col }}
<span v-if="row == 1 && col == 1"> 位置</span>
<span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span
>
<span v-else>
{{ map.get(`${row - 1}-${col - 1}`) }}
</span>
</div>
</div>
<template v-slot:titleButton>
@ -62,11 +71,16 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import DraggableDialog from 'src/components/common/DraggableDialog.vue';
import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
import { loadCiQdList, creatCiQdList } from 'src/drawApp/relayCabinetLayoutApp';
import {
loadCiQdList,
creatCiQdList,
refRelaysListMap,
} from 'src/drawApp/relayCabinetLayoutApp';
import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
import { Relay } from 'src/graphics/relay/Relay';
const relayCabinetStore = useRelayCabinetStore();
const setCellDialog = ref(false);
@ -74,7 +88,15 @@ const setCellMessage = ref<{ rows: number; cols: number }>({
rows: 32,
cols: 4,
});
const showSetCellMessage = computed(() => {
return {
rows: setCellMessage.value.rows + 1,
cols: setCellMessage.value.cols + 1,
};
});
let ciQdList: relayCabinetGraphicData.CiQd | undefined;
const map = new Map<string, string>();
watch(
() => relayCabinetStore.updateCiCjList,
@ -83,6 +105,7 @@ watch(
relayCabinetStore.updateCiCjList = false;
setCellDialog.value = true;
setCellDialog.value = false;
updateMap();
}
}
);
@ -96,12 +119,14 @@ onMounted(() => {
setCellMessage.value.rows = ciQdList.dsCount;
setCellMessage.value.cols = ciQdList.qdList.length;
}
updateMap();
});
function handleCellClick(row: number, col: number) {
if (row == 1 || col == 1) return;
relayCabinetStore.showCiCjConfig = false;
relayCabinetStore.showCiQdConfig = true;
relayCabinetStore.setEditCiCjConfig({ row, col });
relayCabinetStore.setEditCiCjConfig({ row: row - 1, col: col - 1 });
}
function setCellListConfig() {
@ -119,22 +144,39 @@ function cancelSetCellListConfig() {
ciQdList as relayCabinetGraphicData.CiQd
).qdList.length;
}
function updateMap() {
ciQdList?.qdList.forEach((cjDataSet, i) => {
cjDataSet.bitList.forEach((cjData, j) => {
const ref = cjData.refRelays.map((refRelay) => {
const conbinationData = refRelaysListMap.get(refRelay);
const relay = relayCabinetStore
.getDrawApp()
.queryStore.queryById<Relay>(refRelay);
return `${conbinationData?.device}_${conbinationData?.combinationtype}_${relay.datas.code}`;
});
map.set(`${j + 1}-${i + 1}`, ref.join('\\'));
});
});
}
</script>
<style scoped>
.row {
display: flex;
}
.ceil {
width: 60px;
width: 120px;
height: 30px;
border: solid 1px red;
margin: 7px;
cursor: pointer;
text-align: center;
line-height: 30px;
word-break: break-all;
overflow: hidden;
}
.changeCellSize {
width: 40px;
}
.heightLight {
background-color: red;
background-color: orange;
}
</style>

View File

@ -19,18 +19,27 @@
<q-item>
<q-item-section no-wrap class="q-gutter-y-sm column">
<q-item-label> 采集的继电器 </q-item-label>
<div class="q-gutter-sm row">
<div
v-for="(item, index) in collectionConfig.refRelaysCode"
:key="item"
>
<q-chip
v-for="item in collectionConfig.refRelaysCode"
:key="item"
square
color="primary"
text-color="white"
removable
@remove="removeSelect(item)"
@remove="removeSelect(index)"
>
{{ item }}
{{ item.code }}
</q-chip>
<q-select
outlined
v-model="item.pos"
:options="positionOptions"
:map-options="true"
:emit-value="true"
label="位置"
></q-select>
</div>
</q-item-section>
</q-item>
@ -75,12 +84,16 @@ const showCollectionConfig = ref(true);
const collectionConfig = ref<{
code: string;
refRelays: string[];
refRelaysCode: string[];
refRelaysCode: { code: string; pos: number }[];
}>({
code: '',
refRelays: [],
refRelaysCode: [],
});
const positionOptions = [
{ label: 'Q', value: 0 },
{ label: 'H', value: 1 },
];
//
let selectGraphic: JlGraphic[] = [];
@ -94,9 +107,14 @@ watch(
selectGraphic.push(...selectFilter);
selectGraphic = Array.from(new Set(selectGraphic));
relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
collectionConfig.value.refRelaysCode = selectGraphic.map(
(g) => (g as Relay).datas.code
) as string[];
collectionConfig.value.refRelaysCode = selectGraphic.map((g) => {
const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
const hasChoose = map
.get(`${click.row}-${click.col}`)
?.find((cjDataItem) => cjDataItem.relayId == g.id);
const pos = hasChoose?.position || 0;
return { code: (g as Relay).datas.code, pos };
});
collectionConfig.value.refRelays = selectGraphic.map(
(g) => g.id
) as string[];
@ -105,6 +123,7 @@ watch(
);
//
const map = new Map<string, relayCabinetGraphicData.CjDataItem[]>();
watch(
() => relayCabinetStore.editCiCjConfigIndex,
(val) => {
@ -124,21 +143,31 @@ function getEditData() {
const app = relayCabinetStore.getDrawApp();
app.updateSelected();
collectionConfig.value.refRelays = [];
collectionConfig.value.refRelaysCode = [];
const select: JlGraphic[] = [];
const ciCjList = loadCiCjList();
const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
ciCjList.cjList[click.col - 1].bitList[click.row - 1].refRelays.forEach(
(relay) => {
collectionConfig.value.refRelays.push(relay.relayId);
const g = app.queryStore.queryById(relay.relayId) as Relay;
select.push(g);
collectionConfig.value.refRelaysCode.push({
code: g.datas.code,
pos: relay.position,
});
}
);
collectionConfig.value.refRelaysCode = [];
const select: JlGraphic[] = [];
collectionConfig.value.refRelays.forEach((id) => {
const g = app.queryStore.queryById(id) as Relay;
select.push(g);
collectionConfig.value.refRelaysCode.push(g.datas.code);
});
app.updateSelected(...select);
updateMap(ciCjList);
}
function updateMap(ciCjList: relayCabinetGraphicData.CiCj) {
ciCjList.cjList.forEach((cjDataSet, i) => {
cjDataSet.bitList.forEach((cjData, j) => {
map.set(`${j + 1}-${i + 1}`, cjData.refRelays);
});
});
}
const myForm = ref<QForm | null>(null);
@ -147,28 +176,14 @@ async function onSubmit() {
if (res) {
try {
const ciCjList = loadCiCjList();
const map = new Map<string, string>();
ciCjList.cjList.forEach((cjDataSet, i) => {
cjDataSet.bitList.forEach((cjData, j) => {
cjData.refRelays.forEach((refRelay) => {
map.set(refRelay.relayId, `${j + 1}-${i + 1}`);
});
});
});
collectionConfig.value.refRelays.forEach((refRelayId) => {
const hasSet = map.get(refRelayId);
if (hasSet) {
const refRelayCode = relayCabinetStore
.getDrawApp()
.queryStore.queryById<Relay>(refRelayId).datas.code;
throw `在采集列表${hasSet}中已经选择了编号为${refRelayCode}的继电器`;
}
});
const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
ciCjList.cjList[click.col - 1].bitList[click.row - 1].refRelays = [];
collectionConfig.value.refRelays.forEach((relayId) => {
collectionConfig.value.refRelays.forEach((relayId, index) => {
ciCjList.cjList[click.col - 1].bitList[click.row - 1].refRelays.push(
new relayCabinetGraphicData.CjDataItem({ relayId, position: 0 })
new relayCabinetGraphicData.CjDataItem({
relayId,
position: collectionConfig.value.refRelaysCode[index].pos,
})
);
});
relayCabinetStore.updateCiCjList = true;
@ -180,7 +195,7 @@ async function onSubmit() {
} catch (err) {
$q.notify({
type: 'negative',
message: err as string,
message: '更新失败',
});
} finally {
setTimeout(() => {
@ -191,10 +206,7 @@ async function onSubmit() {
});
}
function removeSelect(code: string) {
const removeIndex = collectionConfig.value.refRelaysCode.findIndex(
(item) => item == code
);
function removeSelect(removeIndex: number) {
selectGraphic.splice(removeIndex, 1);
collectionConfig.value.refRelaysCode.splice(removeIndex, 1);
collectionConfig.value.refRelays.splice(removeIndex, 1);

View File

@ -21,13 +21,13 @@
<q-item-label> 驱动的继电器 </q-item-label>
<div class="q-gutter-sm row">
<q-chip
v-for="item in collectionConfig.refRelaysCode"
v-for="(item, index) in collectionConfig.refRelaysCode"
:key="item"
square
color="primary"
text-color="white"
removable
@remove="removeSelect(item)"
@remove="removeSelect(index)"
>
{{ item }}
</q-chip>
@ -142,23 +142,6 @@ async function onSubmit() {
if (res) {
try {
const ciQdList = loadCiQdList();
const map = new Map<string, string>();
ciQdList.qdList.forEach((qdDataSet, i) => {
qdDataSet.bitList.forEach((qdData, j) => {
qdData.refRelays.forEach((refRelay) => {
map.set(refRelay, `${j + 1}-${i + 1}`);
});
});
});
collectionConfig.value.refRelays.forEach((refRelayId) => {
const hasSet = map.get(refRelayId);
if (hasSet) {
const refRelayCode = relayCabinetStore
.getDrawApp()
.queryStore.queryById<Relay>(refRelayId).datas.code;
throw `在驱动列表${hasSet}中已经选择了编号为${refRelayCode}的继电器`;
}
});
const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
ciQdList.qdList[click.col - 1].bitList[click.row - 1].refRelays =
collectionConfig.value.refRelays;
@ -171,7 +154,7 @@ async function onSubmit() {
} catch (err) {
$q.notify({
type: 'negative',
message: err as string,
message: '更新失败',
});
} finally {
setTimeout(() => {
@ -182,10 +165,7 @@ async function onSubmit() {
});
}
function removeSelect(code: string) {
const removeIndex = collectionConfig.value.refRelaysCode.findIndex(
(item) => item == code
);
function removeSelect(removeIndex: number) {
selectGraphic.splice(removeIndex, 1);
collectionConfig.value.refRelaysCode.splice(removeIndex, 1);
collectionConfig.value.refRelays.splice(removeIndex, 1);

View File

@ -75,6 +75,10 @@ export function destroyDrawApp(): void {
}
}
export const refRelaysListMap = new Map<
string,
{ combinationtype: string; device: string }
>();
export function initDrawApp(): IDrawApp {
drawApp = newDrawApp({
dataLoader: loadDrawDatas,
@ -120,31 +124,36 @@ export function initDrawApp(): IDrawApp {
})
);
app.on('postdataloaded', () => {
const map = new Map<string, string>();
refRelaysList.forEach((device) => {
device.combinationtypes.forEach((combinationtype) => {
combinationtype.refRelays.forEach((relayId) => {
map.set(relayId, device.code);
refRelaysListMap.set(relayId, {
combinationtype: combinationtype.code,
device: device.code,
});
});
});
});
const relays = app.queryStore.queryByType<Relay>(Relay.Type);
relays.forEach((relay) => {
relay.refDevice.text = map.get(relay.id)?.replace(/_/g, '\n') as string;
relay.refDevice.text = refRelaysListMap
.get(relay.id)
?.device.replace(/_/g, '\n') as string;
});
const phaseFailureProtectors =
app.queryStore.queryByType<PhaseFailureProtector>(
PhaseFailureProtector.Type
);
phaseFailureProtectors.forEach((phaseFailureProtector) => {
phaseFailureProtector.refDevice.text = map.get(
phaseFailureProtector.refDevice.text = refRelaysListMap.get(
phaseFailureProtector.id
) as string;
)?.device as string;
});
});
app.on('destroy', () => {
refRelaysList = [];
combinationTypeList = [];
refRelaysListMap.clear();
});
return drawApp;
}