调整表格生产动态样式

src/views/pms/iotrddailyreport/index.vue

@@ -312,7 +312,7 @@ function handleOpenForm(id: number, type: 'edit' | 'detail' | 'approval' | 'time
                       placement="right"
                       trigger="hover"
                       width="320"
-                      popper-class="!p-3 flex flex-col gap-y-2"
+                      popper-class="!p-0"
                       :disabled="row.reportDetails.length <= 1"
                     >
                       <template #reference>
@@ -360,38 +360,40 @@ function handleOpenForm(id: number, type: 'edit' | 'detail' | 'approval' | 'time
                           </div>
                         </el-badge>
                       </template>
-                      <div
-                        v-for="(item, index) in row.reportDetails"
-                        :key="index"
-                        class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2 max-w-80"
-                      >
-                        <div class="flex items-center gap-x-2">
-                          <div class="flex items-center">
-                            <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
-                            <div class="font-medium mr-2">{{
-                              dayjs(row.createTime).format('YYYY-MM-DD')
-                            }}</div>
+                      <el-scrollbar max-height="480px" view-class="!p-3 flex flex-col gap-y-2">
+                        <div
+                          v-for="(item, index) in row.reportDetails"
+                          :key="index"
+                          class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2 max-w-80"
+                        >
+                          <div class="flex items-center gap-x-2">
                             <div class="flex items-center">
-                              <span>{{ formatT(item.startTime) }}</span>
-                              <span class="mx-1">-</span>
-                              <span>{{ formatT(item.endTime) }}</span>
+                              <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
+                              <div class="font-medium mr-2">{{
+                                dayjs(row.createTime).format('YYYY-MM-DD')
+                              }}</div>
+                              <div class="flex items-center">
+                                <span>{{ formatT(item.startTime) }}</span>
+                                <span class="mx-1">-</span>
+                                <span>{{ formatT(item.endTime) }}</span>
+                              </div>
                             </div>
-                          </div>
 
-                          <div class="ml-auto group-hover:text-blue-600 font-medium">
-                            {{ item.duration }} H
+                            <div class="ml-auto group-hover:text-blue-600 font-medium">
+                              {{ item.duration }} H
+                            </div>
                           </div>
-                        </div>
 
-                        <div class="flex items-center">
-                          <div class="font-medium flex-shrink-0">施工详情：</div>
-                          <span
-                            class="font-medium group-hover:text-blue-600 transition-colors break-all whitespace-pre-wrap"
-                          >
-                            {{ item.constructionDetail || '-' }}
-                          </span>
+                          <div class="flex items-center">
+                            <div class="font-medium flex-shrink-0">施工详情：</div>
+                            <span
+                              class="font-medium group-hover:text-blue-600 transition-colors break-all whitespace-pre-wrap"
+                            >
+                              {{ item.constructionDetail || '-' }}
+                            </span>
+                          </div>
                         </div>
-                      </div>
+                      </el-scrollbar>
                     </el-popover>
                   </div>
                   <span v-else class="text-gray-300">-</span>

src/views/pms/iotrydailyreport/ry-table.vue

@@ -256,7 +256,7 @@ function handleCurrentChange(val: number) {
                     placement="right"
                     trigger="hover"
                     width="320"
-                    popper-class="!p-3 flex flex-col gap-y-2"
+                    popper-class="!p-0"
                     :disabled="row.reportDetails.length <= 1"
                   >
                     <template #reference>
@@ -324,53 +324,55 @@ function handleCurrentChange(val: number) {
                         </div>
                       </el-badge>
                     </template>
-                    <div
-                      v-for="(item, index) in row.reportDetails"
-                      :key="index"
-                      class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
-                    >
-                      <div class="flex items-center gap-x-2">
-                        <div class="flex items-center">
-                          <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
-                          <div class="font-medium mr-2">{{
-                            dayjs(row.createTime).format('YYYY-MM-DD')
-                          }}</div>
+                    <el-scrollbar max-height="480px" view-class="!p-3 flex flex-col gap-y-2">
+                      <div
+                        v-for="(item, index) in row.reportDetails"
+                        :key="index"
+                        class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
+                      >
+                        <div class="flex items-center gap-x-2">
                           <div class="flex items-center">
-                            <span>{{ formatT(item.startTime) }}</span>
-                            <span class="mx-1">-</span>
-                            <span>{{ formatT(item.endTime) }}</span>
+                            <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
+                            <div class="font-medium mr-2">{{
+                              dayjs(row.createTime).format('YYYY-MM-DD')
+                            }}</div>
+                            <div class="flex items-center">
+                              <span>{{ formatT(item.startTime) }}</span>
+                              <span class="mx-1">-</span>
+                              <span>{{ formatT(item.endTime) }}</span>
+                            </div>
                           </div>
-                        </div>
 
-                        <div class="ml-auto group-hover:text-blue-600 font-medium">
-                          {{ item.duration }} H
+                          <div class="ml-auto group-hover:text-blue-600 font-medium">
+                            {{ item.duration }} H
+                          </div>
                         </div>
-                      </div>
 
-                      <div class="flex items-center">
-                        <div class="font-medium flex-shrink-0">结束井深(m)：</div>
-                        <span
-                          class="font-medium truncate group-hover:text-blue-600 transition-colors"
-                          >{{ item.currentDepth || '-' }} m
-                        </span>
-                      </div>
+                        <div class="flex items-center">
+                          <div class="font-medium flex-shrink-0">结束井深(m)：</div>
+                          <span
+                            class="font-medium truncate group-hover:text-blue-600 transition-colors"
+                            >{{ item.currentDepth || '-' }} m
+                          </span>
+                        </div>
 
-                      <div class="flex items-center">
-                        <div class="font-medium flex-shrink-0">工况：</div>
-                        <span class="font-medium group-hover:text-blue-600 transition-colors">
-                          {{ item.currentOperation || '-' }}
-                        </span>
-                      </div>
+                        <div class="flex items-center">
+                          <div class="font-medium flex-shrink-0">工况：</div>
+                          <span class="font-medium group-hover:text-blue-600 transition-colors">
+                            {{ item.currentOperation || '-' }}
+                          </span>
+                        </div>
 
-                      <div class="flex items-center">
-                        <div class="font-medium flex-shrink-0">详细描述：</div>
-                        <span
-                          class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors"
-                        >
-                          {{ item.constructionDetail || '-' }}
-                        </span>
+                        <div class="flex items-center">
+                          <div class="font-medium flex-shrink-0">详细描述：</div>
+                          <span
+                            class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors"
+                          >
+                            {{ item.constructionDetail || '-' }}
+                          </span>
+                        </div>
                       </div>
-                    </div>
+                    </el-scrollbar>
                   </el-popover>
                 </div>
                 <span v-else class="text-gray-300">-</span>

src/views/pms/iotrydailyreport/ry-xj-table.vue

@@ -317,7 +317,7 @@ function handleCurrentChange(val: number) {
                     placement="right"
                     trigger="hover"
                     width="320"
-                    popper-class="!p-3 flex flex-col gap-y-2"
+                    popper-class="p-0!"
                     :disabled="row.reportDetails.length <= 1"
                   >
                     <template #reference>
@@ -353,87 +353,81 @@ function handleCurrentChange(val: number) {
 
                           <div class="flex items-center">
                             <div class="font-medium flex-shrink-0">工况：</div>
-                            <span
-                              class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors"
+                            <el-tooltip
+                              effect="dark"
+                              :content="row.reportDetails[0].currentOperation"
+                              placement="top"
+                              popper-class="max-w-100"
                             >
-                              {{ row.reportDetails[0].currentOperation || '-' }}
-                            </span>
+                              <span
+                                class="font-medium truncate group-hover:text-blue-600 transition-colors"
+                              >
+                                {{ row.reportDetails[0].currentOperation || '-' }}
+                              </span>
+                            </el-tooltip>
                           </div>
 
                           <div class="flex items-center">
                             <div class="font-medium flex-shrink-0">详细描述：</div>
-                            <span
-                              class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors"
+                            <el-tooltip
+                              effect="dark"
+                              :content="row.reportDetails[0].constructionDetail"
+                              placement="top"
+                              popper-class="max-w-100"
                             >
-                              {{ row.reportDetails[0].constructionDetail || '-' }}
-                            </span>
+                              <span
+                                class="font-medium truncate group-hover:text-blue-600 transition-colors"
+                              >
+                                {{ row.reportDetails[0].constructionDetail || '-' }}
+                              </span>
+                            </el-tooltip>
                           </div>
                         </div>
                       </el-badge>
                     </template>
-                    <div
-                      v-for="(item, index) in row.reportDetails"
-                      :key="index"
-                      class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
-                    >
-                      <div class="flex items-center gap-x-2">
-                        <div class="flex items-center">
-                          <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
-                          <div class="font-medium mr-2">{{
-                            dayjs(row.createTime).format('YYYY-MM-DD')
-                          }}</div>
+                    <el-scrollbar max-height="480px" view-class="!p-3 flex flex-col gap-y-2">
+                      <div
+                        v-for="(item, index) in row.reportDetails"
+                        :key="index"
+                        class="flex flex-col bg-gray-200/80 hover:bg-blue-100 transition-colors relative group cursor-pointer p-2 rounded gap-y-2"
+                      >
+                        <div class="flex items-center gap-x-2">
                           <div class="flex items-center">
-                            <span>{{ formatT(item.startTime) }}</span>
-                            <span class="mx-1">-</span>
-                            <span>{{ formatT(item.endTime) }}</span>
+                            <div class="i-carbon-calendar mr-1 -translate-y-[0.5px]"></div>
+                            <div class="font-medium mr-2">{{
+                              dayjs(row.createTime).format('YYYY-MM-DD')
+                            }}</div>
+                            <div class="flex items-center">
+                              <span>{{ formatT(item.startTime) }}</span>
+                              <span class="mx-1">-</span>
+                              <span>{{ formatT(item.endTime) }}</span>
+                            </div>
                           </div>
-                        </div>
 
-                        <div class="ml-auto group-hover:text-blue-600 font-medium">
-                          {{ item.duration }} H
+                          <div class="ml-auto group-hover:text-blue-600 font-medium">
+                            {{ item.duration }} H
+                          </div>
                         </div>
-                      </div>
-
-                      <!-- <div class="flex items-center">
-                        <div class="font-medium flex-shrink-0">结束井深(m)：</div>
-                        <span
-                          class="font-medium truncate group-hover:text-blue-600 transition-colors"
-                          >{{ item.currentDepth || '-' }} m
-                        </span>
-                      </div> -->
 
-                      <div class="flex items-center">
-                        <div class="font-medium flex-shrink-0">工况：</div>
-                        <el-tooltip
-                          effect="dark"
-                          :content="item.currentOperation"
-                          placement="top"
-                          popper-class="max-w-100"
-                        >
+                        <div class="flex items-center">
+                          <div class="font-medium flex-shrink-0">工况：</div>
                           <span
-                            class="font-medium truncate group-hover:text-blue-600 transition-colors"
+                            class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors"
                           >
                             {{ item.currentOperation || '-' }}
                           </span>
-                        </el-tooltip>
-                      </div>
+                        </div>
 
-                      <div class="flex items-center">
-                        <div class="font-medium flex-shrink-0">详细描述：</div>
-                        <el-tooltip
-                          effect="dark"
-                          :content="item.constructionDetail"
-                          placement="top"
-                          popper-class="max-w-100"
-                        >
+                        <div class="flex items-center">
+                          <div class="font-medium flex-shrink-0">详细描述：</div>
                           <span
-                            class="font-medium truncate group-hover:text-blue-600 transition-colors"
+                            class="font-medium break-all whitespace-pre-wrap group-hover:text-blue-600 transition-colors"
                           >
                             {{ item.constructionDetail || '-' }}
                           </span>
-                        </el-tooltip>
+                        </div>
                       </div>
-                    </div>
+                    </el-scrollbar>
                   </el-popover>
                 </div>
                 <span v-else class="text-gray-300">-</span>