设备利用率

src/config/axios/service.ts

@@ -50,13 +50,13 @@ service.interceptors.request.use(
       }
     })
 
-    debugger
+    // debugger
 
     if (getAccessToken() && !isToken) {
       config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
     }
 
-    debugger
+    // debugger
 
     // 设置租户
     if (tenantEnable && tenantEnable === 'true') {
@@ -64,11 +64,11 @@ service.interceptors.request.use(
       if (tenantId) config.headers['tenant-id'] = tenantId
     }
 
-    debugger
+    // debugger
 
     const method = config.method?.toUpperCase()
 
-    debugger
+    // debugger
     // 防止 GET 请求缓存
     if (method === 'GET') {
       config.headers['Cache-Control'] = 'no-cache'
@@ -85,7 +85,7 @@ service.interceptors.request.use(
       }
     }
 
-    debugger
+    // debugger
     return config
   },
   (error: AxiosError) => {

src/views/pms/stat/rdkb.vue

@@ -241,35 +241,7 @@
           <!--          </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': 'transparent',
-                color: 'white',
-                height: '56px',
-                '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 ref="utilizationRef" style="width: 100%; height: 360px"></div>
           </div>
         </el-card>
       </el-col>
@@ -604,7 +576,7 @@ const handleRowClick = (row, column, event) => {
   // 打开弹窗并加载队伍详情数据
   teamDialogVisible.value = true
   // fetchTeamDetailData(row.deptId, rateQueryParams.createTime)
-  debugger
+  // debugger
   const teamParams = {
     deptId: row.projectDeptId,
     createTime: rateQueryParams.createTime
@@ -796,6 +768,7 @@ const getStats = () => {
 
   rateQueryParams.createTime = [formatDate(start), formatDate(end)]
   IotStatApi.getRdRate(rateQueryParams).then((res) => {
+    console.log('>>>>>>>>>>>>>>>>>>>>', res)
     materialTableData.value = res
   })
 }
@@ -1023,12 +996,88 @@ const initSparePartChart = (count: any, amount: any, spare: {}) => {
   sparePartInstance.setOption(option)
 }
 
+// 设备利用率柱状图
+const utilizationRef = ref(null)
+let utilizationInstance: any = null
+
+const initUtilizationChart = () => {
+  if (!utilizationRef.value) return
+  try {
+    if (utilizationInstance) {
+      utilizationInstance.dispose()
+      utilizationInstance = null
+    }
+  } catch (e) {}
+  utilizationInstance = echarts.init(utilizationRef.value)
+  const xData = materialTableData.value.map((it) => it.projectDeptName || it.dept || it.projectDept)
+  const seriesData = materialTableData.value.map((it) => {
+    const v = it.utilizationRate
+    // 只保留整数部分（百分比的整数），例如 0.528 -> 52
+    return v == null ? 0 : Math.trunc(Number(v) * 100)
+  })
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        const p = params[0] || params
+        return `${p.name}: ${p.data}%`
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: { color: '#B6C8DA', rotate: 20 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: { formatter: '{value}%', color: '#B6C8DA' }
+    },
+    grid: { left: '3%', right: '4%', bottom: '12%', containLabel: true },
+    series: [
+      {
+        type: 'bar',
+        data: seriesData,
+        itemStyle: { color: statusColors[1] },
+        barWidth: '40%',
+        label: { show: true, position: 'top', formatter: '{c}%' }
+      }
+    ]
+  }
+  utilizationInstance.setOption(option)
+  window.addEventListener('resize', () => {
+    try {
+      utilizationInstance && utilizationInstance.resize()
+    } catch (e) {}
+  })
+}
+
+watch(
+  materialTableData,
+  () => {
+    nextTick(() => initUtilizationChart())
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  initUtilizationChart()
+})
+
+onUnmounted(() => {
+  try {
+    if (utilizationInstance) {
+      utilizationInstance.dispose()
+      utilizationInstance = null
+    }
+  } catch (e) {}
+})
+
 const initInspectChart = () => {
   if (!inspectChartRef.value) return
   inspectChartInstance = echarts.init(inspectChartRef.value)
   const completionRate =
     (inspect.value.finished / (inspect.value.finished + inspect.value.todo)) * 100
-  debugger
+  // debugger
   const option = {
     tooltip: {
       trigger: 'item'
@@ -1077,7 +1126,7 @@ const initMaintenanceChart = () => {
   if (!maintenanceChartRef.value) return
   maintenanceChartInstance = echarts.init(maintenanceChartRef.value)
   const completionRate = (by.value.finished / (by.value.finished + by.value.todo)) * 100
-  debugger
+  // debugger
   const option = {
     tooltip: {
       trigger: 'item'