merage
All checks were successful
CI / Docker-Build (push) Successful in 2m45s

This commit is contained in:
joylink_fanyuhong 2024-07-01 14:07:22 +08:00
commit 14d348be07
3 changed files with 88 additions and 49 deletions

View File

@ -7,7 +7,12 @@
resizableWidth
resizableHeight
>
<div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
<div
class="row no-wrap"
v-for="row in showSetCellMessage.rows"
:key="row"
:class="{ stickyRow: row == 1 }"
>
<div
class="ceil"
:class="{
@ -221,8 +226,18 @@ function onMouseOver(e: MouseEvent) {
word-break: break-all;
overflow: hidden;
}
.stickyRow {
position: sticky;
top: 0;
z-index: 11;
background-color: #fff;
}
.changeCellSize {
width: 40px;
position: sticky;
left: 0;
z-index: 10;
background-color: #fff;
}
.heightLight {
background-color: orange;

View File

@ -24,49 +24,52 @@
<q-tab-panels v-model="tab" animated keep-alive>
<template v-for="tabInfo in tabList" :key="tabInfo.label">
<q-tab-panel :name="tabInfo.value">
<div
class="row no-wrap"
v-for="row in showSetCellMessage.rows"
:key="row"
>
<q-scroll-area :style="`width: ${dialogWidth - 32}px;height: 430px`">
<div
class="ceil"
:class="{
CellGreen:
row > 1 &&
col > 1 &&
tabInfo.ListMap.get(`${row - 1}-${col - 1}`),
changeCellSize: col == 1,
CellRed:
row > 1 &&
col > 1 &&
tabInfo.ListMap.get(`${row - 1}-${col - 1}`) &&
tabInfo.stateMap.get(`${row - 1}-${col - 1}`),
}"
v-for="col in showSetCellMessage.cols"
:key="col"
@click="handleCellClick(row, col)"
class="row no-wrap"
v-for="row in showSetCellMessage.rows"
:key="row"
:class="{ stickyRow: row == 1 }"
>
<span v-if="row == 1 && col == 1"> 位置</span>
<span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span
>
<div
v-else
@mouseover="onMouseOver"
@mouseleave="showTooltip = false"
class="ceil"
:class="{
CellGreen:
row > 1 &&
col > 1 &&
tabInfo.ListMap.get(`${row - 1}-${col - 1}`),
changeCellSize: col == 1,
CellRed:
row > 1 &&
col > 1 &&
tabInfo.ListMap.get(`${row - 1}-${col - 1}`) &&
tabInfo.stateMap.get(`${row - 1}-${col - 1}`),
}"
v-for="col in showSetCellMessage.cols"
:key="col"
@click="handleCellClick(row, col)"
>
{{ tabInfo.ListMap.get(`${row - 1}-${col - 1}`) }}
<q-tooltip
anchor="bottom middle"
self="bottom middle"
v-if="showTooltip"
<span v-if="row == 1 && col == 1"> 位置</span>
<span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span
>
<div
v-else
@mouseover="onMouseOver"
@mouseleave="showTooltip = false"
>
{{ tabInfo.ListMap.get(`${row - 1}-${col - 1}`) }}
</q-tooltip>
<q-tooltip
anchor="bottom middle"
self="bottom middle"
v-if="showTooltip"
>
{{ tabInfo.ListMap.get(`${row - 1}-${col - 1}`) }}
</q-tooltip>
</div>
</div>
</div>
</div>
</q-scroll-area>
</q-tab-panel>
</template>
</q-tab-panels>
@ -117,7 +120,11 @@ let ciCjList = sceneCiCjQdListMap.get(
let ciQdList = sceneCiCjQdListMap.get(
`${lineStore.sceneName}+ciQdList`
) as relayCabinetGraphicData.CiQd;
setCellMessage.value.rows = Math.max(ciCjList.dsCount, ciQdList.dsCount);
setCellMessage.value.cols = Math.max(
ciCjList.cjList.length,
ciQdList.qdList.length
);
const dialogWidth = computed(() => {
if (setCellMessage.value.cols * 134 + 85 <= 1157) {
return setCellMessage.value.cols * 134 + 85;
@ -146,11 +153,6 @@ watch(
);
onMounted(() => {
setCellMessage.value.rows = Math.max(ciCjList.dsCount, ciQdList.dsCount);
setCellMessage.value.cols = Math.max(
ciCjList.cjList.length,
ciQdList.qdList.length
);
tabList.value[0].ListMap = updateCiCjListMap();
tabList.value[1].ListMap = updateCiQdListMap();
});
@ -233,7 +235,8 @@ function onMouseOver(e: MouseEvent) {
<style scoped>
.ceil {
width: 120px;
min-width: 120px;
max-width: 120px;
height: 30px;
border: solid 1px red;
margin: 7px;
@ -243,8 +246,18 @@ function onMouseOver(e: MouseEvent) {
word-break: break-all;
overflow: hidden;
}
.stickyRow {
position: sticky;
top: 0;
z-index: 11;
background-color: #fff;
}
.changeCellSize {
width: 40px;
min-width: 40px;
position: sticky;
left: 0;
z-index: 10;
background-color: #fff;
}
.CellGreen {
border: solid 1px green;

View File

@ -7,7 +7,12 @@
resizableWidth
resizableHeight
>
<div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
<div
class="row no-wrap"
v-for="row in showSetCellMessage.rows"
:key="row"
:class="{ stickyRow: row == 1 }"
>
<div
class="ceil"
:class="{
@ -17,10 +22,6 @@
col > 1 &&
ciQdList?.qdList[col - 2].bitList[row - 2].refRelays.length,
changeCellSize: col == 1,
clickHeightLight:
relayCabinetStore.editCiCjConfigIndex &&
relayCabinetStore.editCiCjConfigIndex.row == row - 1 &&
relayCabinetStore.editCiCjConfigIndex.col == col - 1,
}"
v-for="col in showSetCellMessage.cols"
:key="col"
@ -217,8 +218,18 @@ function onMouseOver(e: MouseEvent) {
word-break: break-all;
overflow: hidden;
}
.stickyRow {
position: sticky;
top: 0;
z-index: 11;
background-color: #fff;
}
.changeCellSize {
width: 40px;
position: sticky;
left: 0;
z-index: 10;
background-color: #fff;
}
.heightLight {
background-color: orange;