style：能源报表-时间范围样式定位修复

src/views/mes/energydevicecheck/index.vue

@@ -1,14 +1,19 @@
 <template>
   <ContentWrap>
-    <el-form class="-mb-15px energy-device-check-filter-form" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
+    <el-form
+class="-mb-15px energy-device-check-filter-form" :model="queryParams" ref="queryFormRef" :inline="true"
+      label-width="auto">
       <el-form-item :label="t('EnergyManagement.EnergyDeviceCheck.searchNameLabel')" prop="name">
         <el-input
-          v-model="queryParams.name" :placeholder="t('EnergyManagement.EnergyDeviceCheck.searchNamePlaceholder')" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
+v-model="queryParams.name"
+          :placeholder="t('EnergyManagement.EnergyDeviceCheck.searchNamePlaceholder')" clearable
+          @keyup.enter="handleQuery" class="!w-240px" />
       </el-form-item>
 
       <el-form-item :label="t('EnergyManagement.EnergyDeviceCheck.searchOrgLabel')" prop="orgId">
-        <el-select v-model="queryParams.orgId" filterable clearable :placeholder="t('EnergyManagement.EnergyDeviceCheck.searchOrgPlaceholder')" class="!w-240px">
+        <el-select
+v-model="queryParams.orgId" filterable clearable
+          :placeholder="t('EnergyManagement.EnergyDeviceCheck.searchOrgPlaceholder')" class="!w-240px">
           <el-option v-for="opt in orgOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
         </el-select>
       </el-form-item>
@@ -16,10 +21,11 @@
       <el-form-item :label="t('EnergyManagement.EnergyDeviceCheck.searchTimeRangeLabel')" prop="timeRange">
         <el-date-picker
 v-model="queryParams.timeRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
-          format="YYYY-MM-DD HH" :start-placeholder="t('EnergyManagement.EnergyDeviceCheck.searchTimeRangeStartPlaceholder')" :end-placeholder="t('EnergyManagement.EnergyDeviceCheck.searchTimeRangeEndPlaceholder')"
+          format="YYYY-MM-DD HH"
+          :start-placeholder="t('EnergyManagement.EnergyDeviceCheck.searchTimeRangeStartPlaceholder')"
+          :end-placeholder="t('EnergyManagement.EnergyDeviceCheck.searchTimeRangeEndPlaceholder')"
           :default-time="[new Date('2000-01-01 00:00:00'), new Date('2000-01-01 23:00:00')]"
-          :disabled-time="getDisabledTime" class="!w-360px " popper-class="energydevicecheckPicker"
-          :teleported="false" />
+          :disabled-time="getDisabledTime" class="!w-360px " popper-class="energydevicecheckPicker" />
       </el-form-item>
 
       <el-form-item>
@@ -34,7 +40,8 @@
         </el-button>
       </el-form-item>
     </el-form>
-
+  </ContentWrap>
+  <ContentWrap>
     <el-table
 ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
       :expand-row-keys="expandRowKeys" :row-class-name="getRowClassName" style=" min-height: 50vh;margin-top: 20px"
@@ -44,13 +51,26 @@ ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-to
         <template #default="scope">
           <el-table
 v-if="getPointDetailsRows(scope.row).length" :data="getPointDetailsRows(scope.row)"
-            :show-overflow-tooltip="true" size="small" border :header-cell-style="{ background: '#f5f7fa', color: '#909399' }">
-            <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableExpandPointNameColumn')" prop="pointName" min-width="140" />
-            <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableExpandEarliestValueColumn')" prop="earliestValue" min-width="120" />
-            <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableExpandEarliestTimeColumn')" prop="earliestTime" min-width="170" />
-            <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableExpandLatestValueColumn')" prop="latestValue" min-width="120" />
-            <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableExpandLatestTimeColumn')" prop="latestTime" min-width="170" />
-            <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableExpandDifferenceColumn')" prop="difference" min-width="120" />
+            :show-overflow-tooltip="true" size="small" border
+            :header-cell-style="{ background: '#f5f7fa', color: '#909399' }">
+            <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableExpandPointNameColumn')"
+              prop="pointName" min-width="140" />
+            <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableExpandEarliestValueColumn')"
+              prop="earliestValue" min-width="120" />
+            <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableExpandEarliestTimeColumn')"
+              prop="earliestTime" min-width="170" />
+            <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableExpandLatestValueColumn')"
+              prop="latestValue" min-width="120" />
+            <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableExpandLatestTimeColumn')"
+              prop="latestTime" min-width="170" />
+            <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableExpandDifferenceColumn')"
+              prop="difference" min-width="120" />
           </el-table>
         </template>
       </el-table-column>
@@ -59,21 +79,33 @@ v-if="getPointDetailsRows(scope.row).length" :data="getPointDetailsRows(scope.ro
           {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
         </template>
       </el-table-column> -->
-      <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableNameColumn')" align="center" prop="name" min-width="120" />
-      <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableEnergyTypeColumn')" align="center" prop="deviceTypeName" min-width="100" />
-      <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableOrgColumn')" align="center" prop="orgName" min-width="100" />
-      <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableEnergyConsumptionColumn')" align="center" prop="energyConsumption" min-width="120" />
+      <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableNameColumn')" align="center" prop="name"
+        min-width="120" />
+      <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableEnergyTypeColumn')" align="center"
+        prop="deviceTypeName" min-width="100" />
+      <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableOrgColumn')" align="center" prop="orgName"
+        min-width="100" />
+      <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableEnergyConsumptionColumn')" align="center"
+        prop="energyConsumption" min-width="120" />
       <!-- <el-table-column label="班次" align="center" min-width="90">
         <template #default>
           <el-tag type="success">早班</el-tag>
         </template>
       </el-table-column> -->
-      <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableStartTimeColumn')" align="center" min-width="170">
+      <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableStartTimeColumn')" align="center"
+        min-width="170">
         <template #default="scope">
           {{ scope.row.startTime ?? scope.row.earliestDataTime ?? '-' }}
         </template>
       </el-table-column>
-      <el-table-column :label="t('EnergyManagement.EnergyDeviceCheck.tableEndTimeColumn')" align="center" min-width="170">
+      <el-table-column
+:label="t('EnergyManagement.EnergyDeviceCheck.tableEndTimeColumn')" align="center"
+        min-width="170">
         <template #default="scope">
           {{ scope.row.endTime ?? scope.row.latestDataTime ?? '-' }}
         </template>
@@ -257,6 +289,10 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
+:global(.energydevicecheckPicker) {
+  z-index: 3000 !important;
+}
+
 :deep(.el-time-spinner__wrapper:nth-child(1)) {
   width: 100%;
 }