This commit is contained in:
commit
14d348be07
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user