fix: 综合看板-维修状态列表自动滚动

src/components/LTable/index.vue

@@ -7,7 +7,7 @@
 
     <el-table
       :key="renderKey"
-      ref="elTablet"
+      :ref="scroll ? 'scroll_Table' : 'elTablet'"
       :row-key="getRowKey"
       v-loading="options.loading"
       :data="dataSource"
@@ -21,6 +21,8 @@
       @selection-change="handleSelectionChange"
       @current-change="handleCurrentChange"
       @header-dragend="handleHeaderDragend"
+      @mouseenter.native="autoScroll(true)"
+      @mouseleave.native="autoScroll(false)"
       highlight-current-row
       default-expand-all
       :cell-style="cellStyle"
@@ -200,6 +202,10 @@ export default {
       type: Boolean,
       default: true
     },
+    scroll: {
+      type: Boolean,
+      default: false
+    },
     RowKey: {
       type: String,
       default: 'id'
@@ -238,6 +244,7 @@ export default {
   },
   data() {
     return {
+      scrolltimer: '',
       oldCellData: null,
       renderKey: Math.random(),
       logo: require('@/assets/logo.png'),
@@ -271,7 +278,45 @@ export default {
     }
     this.initColumnSettings()
   },
+  beforeDestroy() {
+    if (this.scroll) {
+      window.clearInterval(this.scrolltimer)
+    }
+  },
   methods: {
+    autoScroll(stop) {
+      if (!this.scroll) return
+
+      window.clearInterval(this.scrolltimer)
+
+      // 如果 stop 为 true，则停止滚动
+      if (stop) {
+        return
+      }
+      const table = this.$refs.scroll_Table
+      if (!table) return
+
+      // 确保表格 DOM 存在
+      if (!table || !table.$refs.bodyWrapper) {
+        console.warn('表格 DOM 未找到，延迟重试...')
+        setTimeout(() => this.autoScroll(stop), 100)
+        return
+      }
+
+      const divData = table.$refs.bodyWrapper
+      if (!divData) return
+      this.scrolltimer = window.setInterval(() => {
+        // 元素自增距离顶部1像素
+        divData.scrollTop += 1
+        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+          // 重置table距离顶部距离
+          divData.scrollTop = 0
+          // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
+          // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
+        }
+      }, 150)
+    },
     /**
      * 初始化表格ID
      * 使用父组件路由路径和当前组件name生成唯一标识
@@ -644,6 +689,16 @@ export default {
         }))
       },
       deep: true
+    },
+    dataSource: {
+      handler(newVal) {
+        if (newVal && newVal.length > 0 && this.scroll) {
+          this.$nextTick(() => {
+            this.autoScroll(false)
+          })
+        }
+      },
+      immediate: true
     }
   }
 }

src/views/als/faultStatistics/echarts.vue

@@ -4,7 +4,7 @@
       <div class="view-carrierFlightMission-FlightMission-btn-right">
         <div class="input-with-select">
           <span>日期</span>
-          <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="statisticsDate"> </el-date-picker>
+          <el-date-picker type="daterange" placement="bottom-start" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="statisticsDate"> </el-date-picker>
         </div>
         <div class="input-with-select">
           <span>地区</span>

src/views/als/faultStatistics/index.vue

@@ -19,7 +19,7 @@
           <div class="view-carrierFlightMission-FlightMission-btn-right" style="width: 70%; overflow-x: auto">
             <div class="input-with-select">
               <span>日期</span>
-              <el-date-picker style="width: 270px" v-model="statisticsDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"> </el-date-picker>
+              <el-date-picker style="width: 270px" placement="bottom-start" v-model="statisticsDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"> </el-date-picker>
             </div>
             <div class="input-with-select">
               <span>地区</span>

src/views/home/index.scss

@@ -234,6 +234,7 @@
       height: 100%;
       float: right;
       text-align: center;
+      cursor: pointer;
     }
   }
 }

src/views/home/index.vue

@@ -8,21 +8,23 @@
               <div class="firstRow">
                 <div v-for="item of airMap" :key="item.aircaftCatalogId" class="cell">
                   <el-image style="width: 80px; height: 80px; margin-top: 10px" :src="imgUrl"></el-image>
-                  <div class="info">
-                    <p>{{ item.aircaftCatalogCode }}</p>
-                    <span :class="item.healthStatus == '故障' ? 'warning-state' : 'success-state'">{{ item.healthStatus }} </span>
-                  </div>
+                  <el-popover popper-class="popper-class" placement="right-start" width="500" trigger="hover">
+                    <el-descriptions title="飞机信息">
+                      <el-descriptions-item label="故障日期">{{ item.statisticsDate }}</el-descriptions-item>
+                      <el-descriptions-item label="中队">{{ item.squadron }}</el-descriptions-item>
+                      <el-descriptions-item label="飞机号">{{ item.aircaftCatalogCode }}</el-descriptions-item>
+                      <el-descriptions-item label="故障件名称">{{ item.faultyPartsName }}</el-descriptions-item>
+                      <el-descriptions-item label="故障件型别">{{ item.faultyPartsModel }}</el-descriptions-item>
+                      <el-descriptions-item label="故障件号码">{{ item.faultyPartsNum }}</el-descriptions-item>
+                    </el-descriptions>
+
+                    <div slot="reference" class="info">
+                      <p>{{ item.aircaftCatalogCode }}</p>
+                      <span :class="item.healthStatus == '故障' ? 'warning-state' : 'success-state'">{{ item.healthStatus }} </span>
+                    </div>
+                  </el-popover>
                 </div>
               </div>
-              <!-- <div class="firstRow">
-                <div v-for="item of 15" :key="item" class="cell">
-                  <el-image style="width: 80px; height: 80px" :src="imgUrl"></el-image>
-                  <div class="info">
-                    <p>{{ item }}</p>
-                    <span class="success-state">健康 </span>
-                  </div>
-                </div>
-              </div> -->
             </div>
           </template>
         </Card>
@@ -32,7 +34,18 @@
       <el-col :span="24" style="margin-bottom: 65px">
         <Card title="维修状态">
           <template slot="content">
-            <LTable ref="maintainTable" :defaultFetch="true" :columns="maintainColumns" :showColumnSetting="false" :dataSource="maintainTableData" :options="maintainOptions" :fetch="maintainFetchTableData" :pagination="tableRequset" class="tabl-box" />
+            <LTable
+              ref="maintainTable"
+              :scroll="true"
+              :defaultFetch="true"
+              :columns="maintainColumns"
+              :showColumnSetting="false"
+              :dataSource="maintainTableData"
+              :options="maintainOptions"
+              :fetch="maintainFetchTableData"
+              :pagination="tableRequset"
+              class="tabl-box"
+            />
           </template>
         </Card>
       </el-col>
@@ -124,7 +137,7 @@ export default {
       tableRequset: {
         total: 0,
         pageIndex: 1,
-        pageSize: 10,
+        pageSize: 50,
         searchValue: ''
       },
       allFaultRecord: []
@@ -182,7 +195,7 @@ export default {
         } else {
           item.healthStatus = '健康'
         }
-        this.airMap.push({ ...item })
+        this.airMap.push({ ...item, faultyPartsModel: obj.faultyPartsModel, faultyPartsNum: obj.faultyPartsNum, faultyPartsName: obj.faultyPartsName, squadron: obj.squadron, statisticsDate: obj.statisticsDate })
       })
     },
     handleChange(item) {
@@ -328,3 +341,10 @@ export default {
 <style lang="scss" scoped>
 @import './index.scss';
 </style>
+<style lang="scss">
+.popper-class {
+  color: #fff;
+  background-color: rgba(7, 42, 54, 1) !important;
+  border: none;
+}
+</style>