设备利用率提交

src/api/pms/stat/index.ts

@@ -100,6 +100,24 @@ export const IotStatApi = {
   getDeviceCount: async (params: any) => {
     return await request.get({ url: `/rq/stat/home/device/count/`+params })
   },
+  getRhRate: async (params: any) => {
+    return await request.get({ url: `/rq/stat/rh/device/utilizationRate`, params })
+  },
+  getRyRate: async (params: any) => {
+    return await request.get({ url: `/rq/stat/ry/device/utilizationRate`, params })
+  },
+  getRdRate: async (params: any) => {
+    return await request.get({ url: `/rq/stat/rd/device/utilizationRate`, params })
+  },
+  getRhTeamRate: async (params: any) => {
+    return await request.get({ url: `rq/stat/rh/device/teamUtilizationRate`, params })
+  },
+  getRyTeamRate: async (params: any) => {
+    return await request.get({ url: `rq/stat/ry/device/teamUtilizationRate`, params })
+  },
+  getRdTeamRate: async (params: any) => {
+    return await request.get({ url: `rq/stat/rd/device/teamUtilizationRate`, params })
+  },
   getMaintainCount: async (params: any) => {
     return await request.get({ url: `/rq/stat/home/maintain/count/`+params })
   },

src/locales/en.ts

@@ -28,6 +28,8 @@ export default {
     pendingOrder:'pendingOrder',
     operationCost:'O&M costs',
     materialConsumption:'MaterialConsumption Top5',
+    deviceRate:'utilizationRate',
+    teamDetail:'Team Utilization Rate',
     gasWater:'Cumulative Gas Injection Volume',
     dailyGasWater:'Daily Gas Injection Volume',
     projectDevice:'Project Department Device',

src/locales/zh-CN.ts

@@ -28,6 +28,8 @@ export default {
     pendingOrder:'待执行工单数',
     operationCost:'运维成本',
     materialConsumption:'物料消耗Top5',
+    deviceRate:'设备利用率',
+    teamDetail:'队伍设备利用率',
     gasWater:'累计注气量统计',
     dailyGasWater:'当日注气量统计',
     projectDevice:'项目部设备数量',

src/views/pms/iotopeationfill/index1.vue

@@ -384,7 +384,6 @@ const getAttrList = async () => {
 /** 获取填写信息保存到后台*/
 const getFillInfo = async () => {
   try {
-
     if(devName!='生产日报'){
       // 检查必填字段
       const emptyFields = attrList.value.filter(item => {
@@ -392,7 +391,6 @@ const getFillInfo = async () => {
         return !(item.isCollection===1||fillStatus === '1') &&
           (item.fillContent === undefined || item.fillContent === '');
       });
-
       if (emptyFields.length > 0) {
         ElMessage.error(t('operationFillForm.fill'));
         return;

src/views/pms/stat/rdkb.vue

@@ -77,7 +77,7 @@
     </el-row>
     <el-row :gutter="16" class="mb-4">
       <!-- 设备状态统计和工单数量情况图表部分保持不变 -->
-      <el-col :span="8">
+      <el-col :span="10">
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center">
@@ -87,7 +87,7 @@
           <div ref="statusChartRef" class="h-[290px]"></div>
         </el-card>
       </el-col>
-      <el-col :span="16">
+      <el-col :span="14">
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
@@ -100,42 +100,100 @@
     </el-row>
     <el-row :gutter="16" class="mb-4">
       <!-- 备件更换情况部分保持不变 -->
-      <el-col :span="8">
+      <el-col :span="10">
         <el-card class="chart-card" shadow="never">
           <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.sparePartsReplacement')}}</span>
+            <div style="display: flex; flex-direction: row; justify-content: space-between">
+              <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.deviceRate')}}</span>
+              <div>
+                <el-date-picker
+                  v-model="rateQueryParams.createTime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  type="daterange"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+                  class="!w-220px"
+                  @change="handleDateChange"
+                />
+              </div>
             </div>
           </template>
           <!-- 添加两个卡片 -->
-          <div class="flex justify-between mb-2">
-            <el-card class="stat-card">
-              <div class="flex flex-row justify-evenly">
-                <div>
-                  <Icon icon="fa-solid:award" size="30" color="blue" />
-                </div>
-                <div class="flex flex-col items-center">
-                  <span class="text-sm " style="color: #101010">{{t('stat.spareCount')}}</span>
-                  <span class="text-lg font-bold">{{ totalMaterialCount }}</span>
-                </div>
-              </div>
-            </el-card>
-            <el-card class="stat-card">
-              <div class="flex flex-row justify-evenly">
-                <div>
-                  <Icon icon="fa-solid:yen-sign" size="30" color="orange" />
-                </div>
-                <div class="flex flex-col items-center">
-                  <span class="text-sm " style="color: #101010">{{t('stat.spareAmount')}}</span>
-                  <span class="text-lg font-bold">{{ totalMaterialCost }}</span>
-                </div>
-              </div>
-            </el-card>
+<!--          <div class="flex justify-between mb-2">-->
+<!--            <el-card class="stat-card">-->
+<!--              <div class="flex flex-row justify-evenly">-->
+<!--                <div>-->
+<!--                  <Icon icon="fa-solid:award" size="30" color="blue" />-->
+<!--                </div>-->
+<!--                <div class="flex flex-col items-center">-->
+<!--                  <span class="text-sm " style="color: #101010">{{t('stat.spareCount')}}</span>-->
+<!--                  <span class="text-lg font-bold">{{ totalMaterialCount }}</span>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </el-card>-->
+<!--            <el-card class="stat-card">-->
+<!--              <div class="flex flex-row justify-evenly">-->
+<!--                <div>-->
+<!--                  <Icon icon="fa-solid:yen-sign" size="30" color="orange" />-->
+<!--                </div>-->
+<!--                <div class="flex flex-col items-center">-->
+<!--                  <span class="text-sm " style="color: #101010">{{t('stat.spareAmount')}}</span>-->
+<!--                  <span class="text-lg font-bold">{{ totalMaterialCost }}</span>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </el-card>-->
+<!--          </div>-->
+<!--          <div ref="sparePartRef" class="h-[330px]"></div>-->
+          <div class="table-container">
+            <el-table
+              class="custom-table"
+              :data="materialTableData"
+              border
+              @row-click="handleRowClick"
+              style="width: 100%; color: #4c4c4c;"
+              :header-cell-style="{
+                'background-color': '#2196df',
+                'color': 'white',
+                'border-color': '#457794'
+              }"
+              :cell-style="{
+                'border-color': '#457794',
+                'background-color': '#284D72',
+                'color':'#F1D209'
+              }"
+            >
+              <el-table-column
+                prop="projectDeptName"
+                label="项目部"
+                align="center"
+              />
+              <el-table-column
+                prop="teamCount"
+                label="设备总台/套"
+                align="center"
+              />
+              <el-table-column
+                prop="cumulativeDays"
+                label="累计天数"
+                align="center"
+              />
+              <el-table-column
+                prop="constructionDays"
+                label="施工天数"
+                align="center"
+              />
+              <el-table-column
+                prop="utilizationRate"
+                label="设备利用率"
+                align="center"
+                :formatter="formatRate"
+              />
+            </el-table>
           </div>
-          <div ref="sparePartRef" class="h-[330px]"></div>
         </el-card>
       </el-col>
-      <el-col :span="16">
+      <el-col :span="14">
         <div class="flex flex-col justify-between">
           <el-card class="chart-card" shadow="never">
             <template #header>
@@ -199,6 +257,52 @@
       </el-col>
     </el-row>
   </div>
+  <el-dialog
+    v-model="teamDialogVisible"
+    :title="t('stat.teamDetail')"
+    width="80vh"
+    :before-close="handleDialogClose"
+    class="custom-scroll-dialog"
+  >
+    <div class="dialog-scroll-content">
+      <el-table
+        :data="teamTableData"
+        border
+        style="width: 100%;"
+        :header-cell-style="{
+        'background-color': 'rgba(0, 0, 0, 0.2)',
+        'color': 'black',
+        'border-color': '#457794'
+      }"
+        :cell-style="{
+        'border-color': '#457794',
+        'background-color': 'transparent'
+      }"
+      >
+        <el-table-column
+          prop="teamName"
+          label="队伍名称"
+          align="center"
+        />
+        <el-table-column
+          prop="cumulativeDays"
+          label="累计天数"
+          align="center"
+        />
+        <el-table-column
+          prop="constructionDays"
+          label="施工天数"
+          align="center"
+        />
+        <el-table-column
+          prop="utilizationRate"
+          label="设备利用率"
+          align="center"
+          :formatter="formatRate"
+        />
+      </el-table>
+    </div>
+  </el-dialog>
 </template>
 <script lang="ts" setup>
 import { MemberSummaryRespVO } from '@/api/mall/statistics/member'
@@ -237,6 +341,46 @@ echarts.use([
 ])
 
 const loading = ref(true) // 加载中
+const teamDialogVisible = ref(false)
+const teamTableData = ref([])
+const currentDeptId = ref('')
+const currentDateRange = ref([])
+const materialTableData = ref([])
+const handleDateChange = () => {
+  IotStatApi.getRdRate(rateQueryParams).then((res) =>{
+    materialTableData.value = res
+  })
+}
+const rateQueryParams = reactive({
+  createTime: [],
+})
+const handleDialogClose = () => {
+  teamDialogVisible.value = false
+  teamTableData.value = [] // 清空表格数据
+}
+// 格式化利用率为百分比
+const formatRate = (row) => {
+  return (row.utilizationRate * 100).toFixed(2) + '%'
+}
+const handleRowClick = (row, column, event) => {
+  console.log('点击的行数据：', row);
+  currentDeptId.value = row.deptId // 假设行数据中包含deptId字段
+  currentDateRange.value = rateQueryParams.createTime
+
+  // 打开弹窗并加载队伍详情数据
+  teamDialogVisible.value = true
+  // fetchTeamDetailData(row.deptId, rateQueryParams.createTime)
+  debugger
+  const teamParams = {
+    deptId: row.projectDeptId,
+    createTime: rateQueryParams.createTime
+  }
+  IotStatApi.getRdTeamRate(teamParams).then(res => {
+    teamTableData.value = res
+  })
+
+};
+const dateRange = ref<[Date, Date] | null>(null)
 const summary = ref<MemberSummaryRespVO>() // 会员统计数据
 const statusChartRef = ref() // 设备数量统计的图表
 const qxRef = ref(null)
@@ -365,6 +509,33 @@ const getStats = () => {
     initSparePartChart('count','amount', sparePartDataEng)
   }
   initInspectionChart()
+
+  // 计算近一周时间
+  const end = new Date();
+  const start = new Date();
+
+  const now = new Date();
+  // 构造：今年 1 月 1 日 00:00:00
+  const firstDay = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0);
+  // 转时间戳（毫秒），如需秒级时间戳，加 .getTime() / 1000
+
+  start.setTime(firstDay.getTime());
+
+  // 格式化日期为后端需要的格式
+  const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  };
+
+  rateQueryParams.createTime = [formatDate(start), formatDate(end)];
+  IotStatApi.getRdRate(rateQueryParams).then((res) =>{
+    materialTableData.value = res
+  })
 }
 
 const initQxChart = () => {
@@ -834,4 +1005,56 @@ onMounted(async () => {
   border-bottom: none !important;
   padding-bottom: 0;
 }
+.table-container {
+  padding: 16px;
+  height: 420px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  // 滚动条样式优化
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+// 修复表格hover样式
+::v-deep .el-table__row:hover > td {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+.custom-scroll-dialog {
+  /* 可选：限制对话框整体最大高度（避免超出屏幕） */
+  max-height: 90vh;
+  overflow: hidden; /* 隐藏整体溢出，避免出现双重滚动条 */
+}
+/* 滚动内容容器：核心样式 */
+.dialog-scroll-content {
+  max-height: 60vh; /* 固定最大高度（可根据需求调整，如500px） */
+  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
+  padding-right: 8px; /* 避免滚动条遮挡内容（可选） */
+}
+
+/* 优化滚动条样式（可选，提升UI体验） */
+.dialog-scroll-content::-webkit-scrollbar {
+  width: 6px; /* 滚动条宽度 */
+}
+.dialog-scroll-content::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb; /* 滚动条滑块颜色 */
+  border-radius: 3px; /* 滚动条圆角 */
+}
+.dialog-scroll-content::-webkit-scrollbar-thumb:hover {
+  background-color: #d1d5db; /*  hover时滑块颜色 */
+}
+.custom-table :deep .el-table__row {
+  height: 50px !important;  /* 高度根据需求调整 */
+}
 </style>

src/views/pms/stat/rhkb.vue

@@ -112,17 +112,74 @@
 
   <!-- 第三行：消息统计行 -->
   <el-row :gutter="16" class="mb-1">
-    <el-col :span="6">
+    <el-col :span="12">
       <el-card class="chart-card" shadow="never">
         <template #header>
-          <div class="flex items-center">
-            <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.materialConsumption')}}</span>
+          <div style="display: flex; flex-direction: row; justify-content: space-between">
+            <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.deviceRate')}}</span>
+            <div>
+            <el-date-picker
+              v-model="rateQueryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-220px"
+              @change="handleDateChange"
+            />
+            </div>
           </div>
         </template>
-        <div ref="materialChartRef" class="h-[320px]"></div>
+<!--        <div ref="materialChartRef" class="h-[320px]"></div>-->
+        <div class="table-container">
+          <el-table
+            :data="materialTableData"
+            border
+            @row-click="handleRowClick"
+            style="width: 100%"
+            :header-cell-style="{
+                'background-color': '#2196df',
+                'color': 'white',
+                'border-color': '#457794'
+              }"
+            :cell-style="{
+                'border-color': '#457794',
+                'background-color': '#284D72',
+                'color':'#F1D209'
+              }"
+          >
+            <el-table-column
+              prop="projectDeptName"
+              label="项目部"
+              align="center"
+            />
+            <el-table-column
+              prop="teamCount"
+              label="队伍数量"
+              align="center"
+            />
+            <el-table-column
+              prop="cumulativeDays"
+              label="累计天数"
+              align="center"
+            />
+            <el-table-column
+              prop="constructionDays"
+              label="施工天数"
+              align="center"
+            />
+            <el-table-column
+              prop="utilizationRate"
+              label="设备利用率"
+              align="center"
+              :formatter="formatRate"
+            />
+          </el-table>
+        </div>
       </el-card>
     </el-col>
-    <el-col :span="18">
+    <el-col :span="12">
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center justify-between">
@@ -156,6 +213,54 @@
     </el-col>
   </el-row>
   </div>
+
+
+  <el-dialog
+    v-model="teamDialogVisible"
+    :title="t('stat.teamDetail')"
+    width="80vh"
+    :before-close="handleDialogClose"
+    class="custom-scroll-dialog"
+  >
+    <div class="dialog-scroll-content">
+    <el-table
+      :data="teamTableData"
+      border
+      style="width: 100%;"
+      :header-cell-style="{
+        'background-color': 'rgba(0, 0, 0, 0.2)',
+        'color': 'black',
+        'border-color': '#457794'
+      }"
+      :cell-style="{
+        'border-color': '#457794',
+        'background-color': 'transparent'
+      }"
+    >
+      <el-table-column
+        prop="teamName"
+        label="队伍名称"
+        align="center"
+      />
+      <el-table-column
+        prop="cumulativeDays"
+        label="累计天数"
+        align="center"
+      />
+      <el-table-column
+        prop="constructionDays"
+        label="施工天数"
+        align="center"
+      />
+      <el-table-column
+        prop="utilizationRate"
+        label="设备利用率"
+        align="center"
+        :formatter="formatRate"
+      />
+    </el-table>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup lang="ts" name="Index">
@@ -193,6 +298,42 @@ echarts.use([
   BarChart
 ])
 
+const teamDialogVisible = ref(false)
+const teamTableData = ref([])
+const currentDeptId = ref('')
+const currentDateRange = ref([])
+
+const materialTableData = ref([])
+
+const queryParams = reactive({
+  createTime: [],
+})
+const handleRowClick = (row, column, event) => {
+  console.log('点击的行数据：', row);
+  currentDeptId.value = row.deptId // 假设行数据中包含deptId字段
+  currentDateRange.value = rateQueryParams.createTime
+
+  // 打开弹窗并加载队伍详情数据
+  teamDialogVisible.value = true
+  // fetchTeamDetailData(row.deptId, rateQueryParams.createTime)
+  const teamParams = {
+    deptId: row.projectDeptId,
+    createTime: rateQueryParams.createTime
+  }
+  IotStatApi.getRhTeamRate(teamParams).then(res => {
+    teamTableData.value = res
+  })
+
+};
+
+const handleDialogClose = () => {
+  teamDialogVisible.value = false
+  teamTableData.value = [] // 清空表格数据
+}
+// 格式化利用率为百分比
+const formatRate = (row) => {
+  return (row.utilizationRate * 100).toFixed(2) + '%'
+}
 
 const by = ref({
   todo: undefined,
@@ -206,6 +347,9 @@ const inspectt = ref({
   finished: 0,
   todo: 0
 })
+const rateQueryParams = reactive({
+  createTime: [],
+})
 const backendData = ref([])
 const statusChartRef = ref() // 设备数量统计的图表
 const materialChartRef = ref() // 设备数量统计的图表
@@ -237,6 +381,11 @@ const todayStatus = ref({
   finished: 0,
   todo: 0
 })
+const handleDateChange = () => {
+  IotStatApi.getRhRate(rateQueryParams).then((res) =>{
+    materialTableData.value = res
+  })
+}
 const typeData = ref({})
 const materialData = ref({})
 const orderSevenData = ref({})
@@ -326,6 +475,27 @@ const getStats = () => {
   IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
     fill.value = res.totalList[0] || []
   })
+
+  // 计算近一周时间
+  const end = new Date();
+  const start = new Date();
+  start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  // 格式化日期为后端需要的格式
+  const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  };
+
+  rateQueryParams.createTime = [formatDate(start), formatDate(end)];
+  IotStatApi.getRhRate(rateQueryParams).then((res) =>{
+    materialTableData.value = res
+  })
 }
 let materialInstance;
 const initMaterials = () => {
@@ -898,7 +1068,6 @@ const initZqlChart = (gas:any,water:any) => {
 const initQxChart = () => {
   if (!qxRef.value) return
   qxInstance = echarts.init(qxRef.value)
-  debugger
   const option = {
     tooltip: {
       trigger: 'axis',
@@ -1118,4 +1287,54 @@ onBeforeUnmount(() => {
   border-bottom: none !important;
   padding-bottom: 0;
 }
+
+.table-container {
+  padding: 16px;
+  height: 320px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  // 滚动条样式优化
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+// 修复表格hover样式
+::v-deep .el-table__row:hover > td {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+.custom-scroll-dialog {
+  /* 可选：限制对话框整体最大高度（避免超出屏幕） */
+  max-height: 90vh;
+  overflow: hidden; /* 隐藏整体溢出，避免出现双重滚动条 */
+}
+/* 滚动内容容器：核心样式 */
+.dialog-scroll-content {
+  max-height: 60vh; /* 固定最大高度（可根据需求调整，如500px） */
+  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
+  padding-right: 8px; /* 避免滚动条遮挡内容（可选） */
+}
+
+/* 优化滚动条样式（可选，提升UI体验） */
+.dialog-scroll-content::-webkit-scrollbar {
+  width: 6px; /* 滚动条宽度 */
+}
+.dialog-scroll-content::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb; /* 滚动条滑块颜色 */
+  border-radius: 3px; /* 滚动条圆角 */
+}
+.dialog-scroll-content::-webkit-scrollbar-thumb:hover {
+  background-color: #d1d5db; /*  hover时滑块颜色 */
+}
 </style>

src/views/pms/stat/rykb.vue

@@ -88,14 +88,72 @@
           <div ref="statusChartRef" class="h-[320px]"></div>
         </el-card>
       </el-col>
-      <el-col :span="7">
+      <el-col :span="10">
         <el-card class="chart-card" shadow="never">
           <template #header>
-            <div class="flex items-center">
-              <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.projectDevice')}}</span>
+            <div style="display: flex; flex-direction: row; justify-content: space-between">
+              <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.deviceRate')}}</span>
+              <div>
+                <el-date-picker
+                  v-model="rateQueryParams.createTime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  type="daterange"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+                  class="!w-220px"
+                  @change="handleDateChange"
+                />
+              </div>
             </div>
           </template>
-          <div ref="topContainer" class="h-[320px]"></div>
+<!--          <div ref="topContainer" class="h-[320px]"></div>-->
+          <div class="table-container">
+            <el-table
+              class="custom-table"
+              :data="materialTableData"
+              border
+              @row-click="handleRowClick"
+              style="width: 100%; color: #4c4c4c;"
+              :header-cell-style="{
+                'background-color': '#2196df',
+                'color': 'white',
+                'border-color': '#457794'
+              }"
+              :cell-style="{
+                'border-color': '#457794',
+                'background-color': '#284D72',
+                'color':'#F1D209'
+              }"
+            >
+              <el-table-column
+                prop="projectDeptName"
+                label="项目部"
+                align="center"
+              />
+              <el-table-column
+                prop="teamCount"
+                label="队伍数量"
+                align="center"
+              />
+              <el-table-column
+                prop="cumulativeDays"
+                label="累计天数"
+                align="center"
+              />
+              <el-table-column
+                prop="constructionDays"
+                label="施工天数"
+                align="center"
+              />
+              <el-table-column
+                prop="utilizationRate"
+                label="设备利用率"
+                align="center"
+                :formatter="formatRate"
+              />
+            </el-table>
+          </div>
         </el-card>
       </el-col>
 <!--      <el-col :span="7">-->
@@ -108,7 +166,7 @@
 <!--          <div ref="topContainer" class="h-[320px]"></div>-->
 <!--        </el-card>-->
 <!--      </el-col>-->
-      <el-col :span="11">
+      <el-col :span="8">
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
@@ -168,6 +226,53 @@
       </el-col>
     </el-row>
   </div>
+
+  <el-dialog
+    v-model="teamDialogVisible"
+    :title="t('stat.teamDetail')"
+    width="80vh"
+    :before-close="handleDialogClose"
+    class="custom-scroll-dialog"
+  >
+    <div class="dialog-scroll-content">
+      <el-table
+        :data="teamTableData"
+        border
+        style="width: 100%;"
+        :header-cell-style="{
+        'background-color': 'rgba(0, 0, 0, 0.2)',
+        'color': 'black',
+        'border-color': '#457794'
+      }"
+        :cell-style="{
+        'border-color': '#457794',
+        'background-color': 'transparent'
+      }"
+      >
+        <el-table-column
+          prop="teamName"
+          label="队伍名称"
+          align="center"
+        />
+        <el-table-column
+          prop="cumulativeDays"
+          label="累计天数"
+          align="center"
+        />
+        <el-table-column
+          prop="constructionDays"
+          label="施工天数"
+          align="center"
+        />
+        <el-table-column
+          prop="utilizationRate"
+          label="设备利用率"
+          align="center"
+          :formatter="formatRate"
+        />
+      </el-table>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup lang="ts" name="Index">
@@ -209,6 +314,45 @@ echarts.use([
   BarChart
 ])
 const { t } = useI18n() // 国际化
+const teamDialogVisible = ref(false)
+const teamTableData = ref([])
+const currentDeptId = ref('')
+const currentDateRange = ref([])
+const materialTableData = ref([])
+const handleDateChange = () => {
+  IotStatApi.getRyRate(rateQueryParams).then((res) =>{
+    materialTableData.value = res
+  })
+}
+const rateQueryParams = reactive({
+  createTime: [],
+})
+const handleDialogClose = () => {
+  teamDialogVisible.value = false
+  teamTableData.value = [] // 清空表格数据
+}
+// 格式化利用率为百分比
+const formatRate = (row) => {
+  return (row.utilizationRate * 100).toFixed(2) + '%'
+}
+const handleRowClick = (row, column, event) => {
+  console.log('点击的行数据：', row);
+  currentDeptId.value = row.deptId // 假设行数据中包含deptId字段
+  currentDateRange.value = rateQueryParams.createTime
+
+  // 打开弹窗并加载队伍详情数据
+  teamDialogVisible.value = true
+  // fetchTeamDetailData(row.deptId, rateQueryParams.createTime)
+  debugger
+  const teamParams = {
+    deptId: row.projectDeptId,
+    createTime: rateQueryParams.createTime
+  }
+  IotStatApi.getRyTeamRate(teamParams).then(res => {
+    teamTableData.value = res
+  })
+
+};
 const dateRange = ref<[Date, Date] | null>(null)
 const by = ref({
   todo: undefined,
@@ -343,15 +487,16 @@ const getStats = () => {
 
   IotStatApi.getRepairRigWork('repair').then((res) => {
     repairWorkloadData.value = res
-    initRepairWorkloadChart();
+    initRepairWorkloadChart(res);
   })
   IotStatApi.getRepairRigWork('rig').then((res) => {
     drillingWorkloadData.value = res
-    initDrillingWorkloadChart();
+    initDrillingWorkloadChart(res);
   })
   IotStatApi.getRigFinished().then((res) => {
+    debugger
     drillingWellData.value = res
-    initDrillingWellChart();
+    initDrillingWellChart(res);
   })
   const fillQueryParams = reactive({
     startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
@@ -367,13 +512,35 @@ const getStats = () => {
   IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
     fill.value = res.totalList[0] || []
   })
-  IotStatApi.getProject('ry').then((res) => {
-    typeData.value = res;
-    initProjectCharts()
+  // IotStatApi.getProject('ry').then((res) => {
+  //   typeData.value = res;
+  //   initProjectCharts()
+  // })
+
+  // 计算近一周时间
+  const end = new Date();
+  const start = new Date();
+  start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  // 格式化日期为后端需要的格式
+  const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  };
+
+  rateQueryParams.createTime = [formatDate(start), formatDate(end)];
+  IotStatApi.getRyRate(rateQueryParams).then((res) =>{
+    materialTableData.value = res
   })
+
 }
 
-const initDrillingWorkloadChart = () => {
+const initDrillingWorkloadChart = (res) => {
   if (!drillingWorkloadChartRef.value) return
   const chart = echarts.init(drillingWorkloadChartRef.value)
   const option = {
@@ -384,7 +551,7 @@ const initDrillingWorkloadChart = () => {
       }
     },
     legend: {
-      data: drillingWorkloadData.value.series.map((item) => item.name),
+      data: res.series.map((item) => item.name),
       textStyle: {
         color: '#B6C8DA'
       }
@@ -397,7 +564,7 @@ const initDrillingWorkloadChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: drillingWorkloadData.value.xAxis,
+      data: res.xAxis,
       axisLabel: {
         color: '#B6C8DA'
       },
@@ -428,7 +595,7 @@ const initDrillingWorkloadChart = () => {
         }
       }
     },
-    series: drillingWorkloadData.value.series.map((item) => ({
+    series: res.series.map((item) => ({
       name: item.name,
       type: 'bar',
       data: item.data
@@ -438,7 +605,7 @@ const initDrillingWorkloadChart = () => {
 }
 
 // 新增：初始化修井工作量情况图表
-const initRepairWorkloadChart = () => {
+const initRepairWorkloadChart = (res) => {
   if (!repairWorkloadChartRef.value) return
   const chart = echarts.init(repairWorkloadChartRef.value)
   const option = {
@@ -449,7 +616,7 @@ const initRepairWorkloadChart = () => {
       }
     },
     legend: {
-      data: repairWorkloadData.value.series.map((item) => item.name),
+      data: res.series.map((item) => item.name),
       textStyle: {
         color: '#B6C8DA'
       }
@@ -462,7 +629,7 @@ const initRepairWorkloadChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: repairWorkloadData.value.xAxis,
+      data: res.xAxis,
       axisLabel: {
         color: '#B6C8DA'
       },
@@ -493,7 +660,7 @@ const initRepairWorkloadChart = () => {
         }
       }
     },
-    series: repairWorkloadData.value.series.map((item) => ({
+    series: res.series.map((item) => ({
       name: item.name,
       type: 'bar',
       data: item.data
@@ -998,7 +1165,7 @@ const initRepairWellChart = () => {
 }
 
 // 新增：初始化钻井完成情况图表
-const initDrillingWellChart = () => {
+const initDrillingWellChart = (res) => {
   if (!drillingWellChartRef.value) return
   const option = {
     tooltip: {
@@ -1008,7 +1175,7 @@ const initDrillingWellChart = () => {
       }
     },
     legend: {
-      data: drillingWellData.value.series.map((item) => item.name),
+      data: res.series.map((item) => item.name),
       top: 10,
       textStyle: {
         color: '#B6C8DA'
@@ -1022,7 +1189,7 @@ const initDrillingWellChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: drillingWellData.value.xAxis,
+      data: res.xAxis,
       axisLabel: {
         color: '#B6C8DA',
         formatter: (value) => value.split('-').join('/') // 显示为 2023/01
@@ -1055,7 +1222,7 @@ const initDrillingWellChart = () => {
         }
       }
     },
-    series: drillingWellData.value.series.map((item) => ({
+    series: res.series.map((item) => ({
       name: item.name,
       type: 'bar',
       data: item.data
@@ -1077,9 +1244,9 @@ onMounted(() => {
   // fetchTop()
   window.addEventListener('resize', () => topInstance?.resize())
   initRepairWellChart()
-  initDrillingWellChart()
-  initDrillingWorkloadChart()
-  initRepairWorkloadChart()
+  // initDrillingWellChart()
+  //initDrillingWorkloadChart()
+  //initRepairWorkloadChart()
 })
 
 onBeforeUnmount(() => {
@@ -1170,4 +1337,58 @@ onBeforeUnmount(() => {
   border-bottom: none !important;
   padding-bottom: 0;
 }
+
+
+.table-container {
+  padding: 16px;
+  height: 320px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  // 滚动条样式优化
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+// 修复表格hover样式
+::v-deep .el-table__row:hover > td {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+.custom-scroll-dialog {
+  /* 可选：限制对话框整体最大高度（避免超出屏幕） */
+  max-height: 90vh;
+  overflow: hidden; /* 隐藏整体溢出，避免出现双重滚动条 */
+}
+/* 滚动内容容器：核心样式 */
+.dialog-scroll-content {
+  max-height: 60vh; /* 固定最大高度（可根据需求调整，如500px） */
+  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
+  padding-right: 8px; /* 避免滚动条遮挡内容（可选） */
+}
+
+/* 优化滚动条样式（可选，提升UI体验） */
+.dialog-scroll-content::-webkit-scrollbar {
+  width: 6px; /* 滚动条宽度 */
+}
+.dialog-scroll-content::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb; /* 滚动条滑块颜色 */
+  border-radius: 3px; /* 滚动条圆角 */
+}
+.dialog-scroll-content::-webkit-scrollbar-thumb:hover {
+  background-color: #d1d5db; /*  hover时滑块颜色 */
+}
+.custom-table :deep .el-table__row {
+  height: 45px !important;  /* 高度根据需求调整 */
+}
 </style>