merage

src/components/draw-app/dialogs/CiCjList.vue

@@ -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;

src/components/draw-app/dialogs/CiCjQdListStateDialog.vue

@@ -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
+          <q-scroll-area :style="`width: ${dialogWidth - 32}px;height: 430px`">
-            class="row no-wrap"
-            v-for="row in showSetCellMessage.rows"
-            :key="row"
-          >
             <div
-              class="ceil"
+              class="row no-wrap"
-              :class="{
+              v-for="row in showSetCellMessage.rows"
-                CellGreen:
+              :key="row"
-                  row > 1 &&
+              :class="{ stickyRow: 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)"
             >
-              <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
+                class="ceil"
-                @mouseover="onMouseOver"
+                :class="{
-                @mouseleave="showTooltip = false"
+                  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}`) }}
+                <span v-if="row == 1 && col == 1"> 位置</span>
-                <q-tooltip
+                <span v-else-if="row == 1 || col == 1">
-                  anchor="bottom middle"
+                  {{ row == 1 ? col - 1 : row - 1 }}</span
-                  self="bottom middle"
+                >
-                  v-if="showTooltip"
+                <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;

src/components/draw-app/dialogs/CiQdList.vue

@@ -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;