关联继电器增加组合类型

This commit is contained in:
joylink_zhaoerwei 2023-09-13 17:28:57 +08:00
parent 4d31604015
commit 616b75805f
6 changed files with 285 additions and 99 deletions

View File

@ -54,7 +54,6 @@ import {
RelateRelaylistItem,
} from 'src/drawApp/relayCabinetLayoutApp';
import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
import { Relay } from 'src/graphics/relay/Relay';
const relayCabinetStore = useRelayCabinetStore();
const $q = useQuasar();
@ -72,17 +71,13 @@ const columns: QTable['columns'] = [
},
{ name: 'code', label: '设备编号', field: 'code', align: 'center' },
{
name: 'refRelay',
label: '关联的继电器',
field: (row) => {
if (row.refRelay) {
const ref: string[] = [];
row.refRelay.forEach((id: string) => {
const g = useRelayCabinetStore()
.getDrawApp()
.queryStore.queryById(id);
ref.push((g as Relay).datas.code);
});
name: 'combinationtypes',
label: '关联的组合类型',
field: (row: RelateRelaylistItem) => {
if (row.combinationtypes) {
const ref = row.combinationtypes.map(
(combinationtype) => combinationtype.code
);
return ref.join('\\');
}
},

View File

@ -22,32 +22,56 @@
:rules="[(val) => val.trim() != '' || '名称不能为空']"
/>
<q-list bordered separator class="rounded-borders">
<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">
<q-chip
v-for="item in device"
:key="item"
square
color="primary"
text-color="white"
removable
@remove="removeSelect(item)"
>
{{ item }}
</q-chip>
</div>
<q-btn
v-show="device.length > 0"
style="width: 130px"
label="清空框选的继电器"
color="red"
@click="clearSelect"
/>
</q-item-section>
</q-item>
<q-expansion-item
expand-separator
v-for="(
combinationtype, index
) in relateRelayConfig.combinationtypes"
:key="combinationtype"
v-model="combinationtype.expanded"
:label="combinationtype.code"
@click="toggleItem(index)"
>
<q-card>
<q-item>
<q-item-section no-wrap class="q-gutter-y-sm column">
<q-input
outlined
v-model="combinationtype.code"
label="组合类型"
lazy-rules
/>
<div class="q-gutter-sm row">
<q-chip
v-for="item in combinationtype.refRelaysCode"
:key="item"
square
color="primary"
text-color="white"
removable
@remove="removeSelect(item)"
>
{{ item }}
</q-chip>
</div>
<q-btn
v-show="combinationtype.refRelaysCode.length > 0"
style="width: 130px"
label="清空框选的继电器"
color="red"
@click="clearAllSelect(index)"
/>
</q-item-section>
</q-item>
</q-card>
</q-expansion-item>
</q-list>
<q-btn
class="q-mt-md"
label="增加组合类型"
color="secondary"
@click="addCombinationtype"
/>
<div class="q-gutter-sm q-pa-md row justify-center">
<q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
<q-btn label="重置" type="reset" color="primary" class="q-mr-md" />
@ -59,7 +83,7 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { onMounted, ref, watch } from 'vue';
import { QForm, useQuasar } from 'quasar';
import { JlGraphic } from 'src/jl-graphic';
import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
@ -78,16 +102,22 @@ defineExpose({ editRelateRelays });
const relayCabinetStore = useRelayCabinetStore();
const $q = useQuasar();
const showRangeConfig = ref(true);
const relateRelayConfig = reactive<{
const relateRelayConfig = ref<{
type: string;
code: string;
refRelay: string[];
combinationtypes: {
code: string;
refRelays: string[];
refRelaysCode: string[];
expanded: boolean;
}[];
}>({
type: '',
code: '',
refRelay: [],
combinationtypes: [
{ code: '组合类型', refRelays: [], refRelaysCode: [], expanded: false },
],
});
const device = ref<string[]>([]);
const handleState = ref('新建设备关联继电器');
const optionsType = [
@ -99,17 +129,17 @@ let selectGraphic: JlGraphic[] = [];
watch(
() => relayCabinetStore.selectedGraphics,
(val) => {
if (val && val.length > 0) {
if (val && val.length > 0 && clickIndex !== null) {
const selectFilter = relayCabinetStore.selectedGraphics?.filter(
(g) => g.type == Relay.Type
) as JlGraphic[];
selectGraphic.push(...selectFilter);
selectGraphic = Array.from(new Set(selectGraphic));
relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
device.value = selectGraphic.map(
(g) => (g as Relay).datas.code
) as string[];
relateRelayConfig.refRelay = selectGraphic.map((g) => g.id) as string[];
relateRelayConfig.value.combinationtypes[clickIndex].refRelaysCode =
selectGraphic.map((g) => (g as Relay).datas.code) as string[];
relateRelayConfig.value.combinationtypes[clickIndex].refRelays =
selectGraphic.map((g) => g.id) as string[];
}
}
);
@ -126,11 +156,20 @@ async function onSubmit() {
myForm.value?.validate().then(async (res) => {
if (res) {
try {
const combinationtypes: relayCabinetGraphicData.Combinationtype[] = [];
relateRelayConfig.value.combinationtypes.forEach((combinationtype) => {
combinationtypes.push(
new relayCabinetGraphicData.Combinationtype({
code: combinationtype.code,
refRelays: combinationtype.refRelays,
})
);
});
const deviceRelateRelay = new relayCabinetGraphicData.DeviceRelateRelay(
{
type: relateRelayConfig.type,
code: relateRelayConfig.code,
refRelay: [...relateRelayConfig.refRelay],
type: relateRelayConfig.value.type,
code: relateRelayConfig.value.code,
combinationtypes: combinationtypes,
}
);
if (handleState.value == '新建设备关联继电器') {
@ -162,23 +201,30 @@ async function onSubmit() {
}
});
}
async function editRelateRelays(row: RelateRelaylistItem) {
try {
handleState.value = '编辑设备关联继电器';
clearSelect();
editRow = row;
relateRelayConfig.type = row.type;
relateRelayConfig.code = row.code;
relateRelayConfig.refRelay = row.refRelay;
const select: JlGraphic[] = [];
const drawApp = relayCabinetStore.getDrawApp();
relateRelayConfig.refRelay.forEach((id: string) => {
const g = drawApp.queryStore.queryById(id);
select.push(g);
device.value.push(g.code);
handleState.value = '编辑设备关联继电器';
selectGraphic = [];
drawApp.updateSelected();
editRow = row;
relateRelayConfig.value.type = row.type;
relateRelayConfig.value.code = row.code;
row.combinationtypes.forEach((combinationtype) => {
const refCode: string[] = [];
combinationtype.refRelays.forEach((id) => {
const g = drawApp.queryStore.queryById(id);
refCode.push(g.code);
});
combinationtype.refRelaysCode = refCode;
combinationtype.expanded = false;
});
drawApp.updateSelected(...select);
relateRelayConfig.value.combinationtypes = row.combinationtypes as {
code: string;
refRelays: string[];
refRelaysCode: string[];
expanded: boolean;
}[];
} catch (err) {
$q.notify({
type: 'negative',
@ -187,30 +233,70 @@ async function editRelateRelays(row: RelateRelaylistItem) {
}
}
function goBack() {
clearSelect();
relayCabinetStore.showRelateRelayConfig = false;
let clickIndex: null | number = null;
function toggleItem(index: number) {
const drawApp = relayCabinetStore.getDrawApp();
selectGraphic = [];
drawApp.updateSelected();
const combinationtypes = relateRelayConfig.value.combinationtypes;
if (combinationtypes[index].expanded == true) {
clickIndex = index;
const select: JlGraphic[] = [];
combinationtypes[index].refRelays.forEach((id: string) => {
const g = drawApp.queryStore.queryById(id);
select.push(g);
});
drawApp.updateSelected(...select);
} else {
clickIndex = null;
}
}
function removeSelect(code: string) {
const removeIndex = device.value.findIndex((item) => item == code);
const clickTarget =
relateRelayConfig.value.combinationtypes[clickIndex as number];
const removeIndex = clickTarget.refRelaysCode.findIndex(
(item) => item == code
);
selectGraphic.splice(removeIndex, 1);
device.value.splice(removeIndex, 1);
relateRelayConfig.refRelay.splice(removeIndex, 1);
clickTarget.refRelaysCode.splice(removeIndex, 1);
clickTarget.refRelays.splice(removeIndex, 1);
relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
relayCabinetStore.getDrawApp()?.emit('postdataloaded');
}
function clearSelect() {
device.value = [];
function clearAllSelect(index: number) {
relateRelayConfig.value.combinationtypes[index].refRelays = [];
relateRelayConfig.value.combinationtypes[index].refRelaysCode = [];
selectGraphic = [];
relayCabinetStore.getDrawApp().updateSelected();
}
function addCombinationtype() {
relateRelayConfig.value.combinationtypes.push({
code: '组合类型',
refRelays: [],
refRelaysCode: [],
expanded: false,
});
}
function onReset() {
clickIndex = null;
handleState.value = '新建设备关联继电器';
relateRelayConfig.type = '';
relateRelayConfig.code = '';
relateRelayConfig.refRelay = [];
clearSelect();
relateRelayConfig.value = {
type: '',
code: '',
combinationtypes: [
{ code: '组合类型', refRelays: [], refRelaysCode: [], expanded: false },
],
};
selectGraphic = [];
relayCabinetStore.getDrawApp().updateSelected();
}
function goBack() {
onReset();
relayCabinetStore.showRelateRelayConfig = false;
}
</script>

View File

@ -4,7 +4,8 @@
<q-input
outlined
v-model="relayCabinetModel.code"
@blur="onUpdate"
:emit-value="true"
@update:model-value="onUpdate"
label="编号"
lazy-rules
/>

View File

@ -5,14 +5,18 @@
outlined
v-model="relayModel.code"
@blur="onUpdate"
:emit-value="true"
@update:model-value="onUpdate"
label="编号"
lazy-rules
/>
<q-select
outlined
@blur="onUpdate"
v-model="relayModel.model"
:options="optionsModel"
:map-options="true"
:emit-value="true"
@update:model-value="onUpdate"
label="型号"
/>
</q-form>

View File

@ -102,8 +102,10 @@ export function initDrawApp(): IDrawApp {
app.on('postdataloaded', async () => {
const map = new Map<string, string>();
refRelaysList.forEach((device) => {
device.refRelay.forEach((relayId) => {
map.set(relayId, device.code);
device.combinationtypes.forEach((combinationtype) => {
combinationtype.refRelays.forEach((relayId) => {
map.set(relayId, device.code);
});
});
});
const relays = app.queryStore.queryByType<Relay>(Relay.Type);
@ -111,6 +113,9 @@ export function initDrawApp(): IDrawApp {
relay.refDevice.text = map.get(relay.id) as string;
});
});
app.on('destroy', async () => {
refRelaysList = [];
});
return drawApp;
}
@ -221,11 +226,16 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
export interface RelateRelaylistItem {
type: string;
code: string;
refRelay: string[];
combinationtypes: {
code: string;
refRelays: string[];
refRelaysCode?: string[];
expanded?: boolean;
}[];
}
//关联继电器列表的增删改查
const refRelaysList: relayCabinetGraphicData.DeviceRelateRelay[] = [];
let refRelaysList: relayCabinetGraphicData.DeviceRelateRelay[] = [];
export function loadDeviceRelateRelayList() {
return refRelaysList;
}

View File

@ -382,10 +382,10 @@ export namespace relayCabinetGraphicData {
constructor(data?: any[] | {
type?: string;
code?: string;
refRelay?: string[];
combinationtypes?: Combinationtype[];
}) {
super();
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4], this.#one_of_decls);
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [5], this.#one_of_decls);
if (!Array.isArray(data) && typeof data == "object") {
if ("type" in data && data.type != undefined) {
this.type = data.type;
@ -393,8 +393,8 @@ export namespace relayCabinetGraphicData {
if ("code" in data && data.code != undefined) {
this.code = data.code;
}
if ("refRelay" in data && data.refRelay != undefined) {
this.refRelay = data.refRelay;
if ("combinationtypes" in data && data.combinationtypes != undefined) {
this.combinationtypes = data.combinationtypes;
}
}
}
@ -410,16 +410,16 @@ export namespace relayCabinetGraphicData {
set code(value: string) {
pb_1.Message.setField(this, 3, value);
}
get refRelay() {
return pb_1.Message.getFieldWithDefault(this, 4, []) as string[];
get combinationtypes() {
return pb_1.Message.getRepeatedWrapperField(this, Combinationtype, 5) as Combinationtype[];
}
set refRelay(value: string[]) {
pb_1.Message.setField(this, 4, value);
set combinationtypes(value: Combinationtype[]) {
pb_1.Message.setRepeatedWrapperField(this, 5, value);
}
static fromObject(data: {
type?: string;
code?: string;
refRelay?: string[];
combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
}): DeviceRelateRelay {
const message = new DeviceRelateRelay({});
if (data.type != null) {
@ -428,8 +428,8 @@ export namespace relayCabinetGraphicData {
if (data.code != null) {
message.code = data.code;
}
if (data.refRelay != null) {
message.refRelay = data.refRelay;
if (data.combinationtypes != null) {
message.combinationtypes = data.combinationtypes.map(item => Combinationtype.fromObject(item));
}
return message;
}
@ -437,7 +437,7 @@ export namespace relayCabinetGraphicData {
const data: {
type?: string;
code?: string;
refRelay?: string[];
combinationtypes?: ReturnType<typeof Combinationtype.prototype.toObject>[];
} = {};
if (this.type != null) {
data.type = this.type;
@ -445,8 +445,8 @@ export namespace relayCabinetGraphicData {
if (this.code != null) {
data.code = this.code;
}
if (this.refRelay != null) {
data.refRelay = this.refRelay;
if (this.combinationtypes != null) {
data.combinationtypes = this.combinationtypes.map((item: Combinationtype) => item.toObject());
}
return data;
}
@ -458,8 +458,8 @@ export namespace relayCabinetGraphicData {
writer.writeString(2, this.type);
if (this.code.length)
writer.writeString(3, this.code);
if (this.refRelay.length)
writer.writeRepeatedString(4, this.refRelay);
if (this.combinationtypes.length)
writer.writeRepeatedMessage(5, this.combinationtypes, (item: Combinationtype) => item.serialize(writer));
if (!w)
return writer.getResultBuffer();
}
@ -475,8 +475,8 @@ export namespace relayCabinetGraphicData {
case 3:
message.code = reader.readString();
break;
case 4:
pb_1.Message.addToRepeatedField(message, 4, reader.readString());
case 5:
reader.readMessage(message.combinationtypes, () => pb_1.Message.addToRepeatedWrapperField(message, 5, Combinationtype.deserialize(reader), Combinationtype));
break;
default: reader.skipField();
}
@ -490,4 +490,94 @@ export namespace relayCabinetGraphicData {
return DeviceRelateRelay.deserialize(bytes);
}
}
export class Combinationtype extends pb_1.Message {
#one_of_decls: number[][] = [];
constructor(data?: any[] | {
code?: string;
refRelays?: string[];
}) {
super();
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
if (!Array.isArray(data) && typeof data == "object") {
if ("code" in data && data.code != undefined) {
this.code = data.code;
}
if ("refRelays" in data && data.refRelays != undefined) {
this.refRelays = data.refRelays;
}
}
}
get code() {
return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
}
set code(value: string) {
pb_1.Message.setField(this, 1, value);
}
get refRelays() {
return pb_1.Message.getFieldWithDefault(this, 2, []) as string[];
}
set refRelays(value: string[]) {
pb_1.Message.setField(this, 2, value);
}
static fromObject(data: {
code?: string;
refRelays?: string[];
}): Combinationtype {
const message = new Combinationtype({});
if (data.code != null) {
message.code = data.code;
}
if (data.refRelays != null) {
message.refRelays = data.refRelays;
}
return message;
}
toObject() {
const data: {
code?: string;
refRelays?: string[];
} = {};
if (this.code != null) {
data.code = this.code;
}
if (this.refRelays != null) {
data.refRelays = this.refRelays;
}
return data;
}
serialize(): Uint8Array;
serialize(w: pb_1.BinaryWriter): void;
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
const writer = w || new pb_1.BinaryWriter();
if (this.code.length)
writer.writeString(1, this.code);
if (this.refRelays.length)
writer.writeRepeatedString(2, this.refRelays);
if (!w)
return writer.getResultBuffer();
}
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Combinationtype {
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Combinationtype();
while (reader.nextField()) {
if (reader.isEndGroup())
break;
switch (reader.getFieldNumber()) {
case 1:
message.code = reader.readString();
break;
case 2:
pb_1.Message.addToRepeatedField(message, 2, reader.readString());
break;
default: reader.skipField();
}
}
return message;
}
serializeBinary(): Uint8Array {
return this.serialize();
}
static deserializeBinary(bytes: Uint8Array): Combinationtype {
return Combinationtype.deserialize(bytes);
}
}
}