Explorar el Código

✨ feat(瑞都看板): 调整

Zimo hace 1 día
padre
commit
96820fac03

+ 12 - 0
src/api/pms/stat/index.ts

@@ -192,5 +192,17 @@ export const IotStatApi = {
   },
   getWhl: async () => {
     return await request.get({ url: `/rq/report/rd/whl` })
+  },
+  getDeviceException: async (params: any) => {
+    return await request.get({ url: `/rq/stat/inspect/exception/device`, params })
+  },
+  getStatusException: async (params: any) => {
+    return await request.get({ url: `/rq/iot-inspect-order-detail/report/status`, params })
+  },
+  getProductionException: async (params: any) => {
+    return await request.get({ url: `/pms/iot-rd-daily-report/abnormalAlert`, params })
+  },
+  getConstructionBriefing: async () => {
+    return await request.get({ url: `/pms/iot-rd-daily-report/constructionBriefing` })
   }
 }

+ 8 - 5
src/components/ZmTable/ZmTableColumn.vue

@@ -117,6 +117,10 @@ const calculativeWidth = () => {
   if (props.zmFilterable) labelWidth += 22
   if (props.zmSortable) labelWidth += 22
 
+  console.log('values :>> ', values)
+
+  console.log(values.map((value) => getTextWidth(value) + 38))
+
   const maxWidth = Math.max(...values.map((value) => getTextWidth(value) + 38), labelWidth)
 
   defaultOptions.value.minWidth = maxWidth
@@ -125,11 +129,10 @@ const calculativeWidth = () => {
 watch(
   () => tableContext.loading.value,
   (loading) => {
-    if (!loading) {
-      nextTick(() => {
-        calculativeWidth()
-      })
-    }
+    console.log('loading :>> ', loading)
+    nextTick(() => {
+      calculativeWidth()
+    })
   },
   { immediate: true }
 )

+ 1 - 1
src/components/count-to1.vue

@@ -88,7 +88,7 @@ defineExpose({
 
 <template>
   <span class="flex">
-    <span v-if="endVal">{{ value }}</span>
+    <span v-if="endVal !== null && endVal !== undefined">{{ value }}</span>
     <slot v-else></slot>
   </span>
 </template>

+ 5 - 0
src/views/pms/stat/rdkb.vue

@@ -360,6 +360,11 @@
       </el-col>
       <!-- 月度工作量表结束 -->
     </el-row>
+    <!-- <el-row :gutter="16" class="mb-4">
+      <el-col :span="24" :xs="24">
+        <ConstructionBriefing />
+      </el-col>
+    </el-row> -->
   </div>
   <el-dialog
     v-model="teamDialogVisible"

+ 0 - 5
src/views/pms/stat/rdkb/availability.vue

@@ -34,15 +34,10 @@ const config = [
 const fetchData = async () => {
   loading.value = true
   try {
-    // 假设接口直接返回 data 对象,或者是 res.data
-    // 请根据实际 axios 拦截器的封装情况调整
     const res = await IotStatApi.getWhl()
 
-    // 容错处理,防止接口返回空
     if (res) {
-      // 如果拦截器直接返回了 data 下面的内容
       stats.value = res
-      // 如果拦截器没拆包,可能是 stats.value = res.data
     }
   } catch (error) {
     console.error('Whl API Error:', error)

+ 104 - 0
src/views/pms/stat/rdkb/constructionBriefing.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { IotStatApi } from '@/api/pms/stat'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
+
+const loading = ref(false)
+
+interface ConstructionBriefing {
+  projectDeptName: string // 项目部
+  deptName: string // 队伍
+  rdStatus: string // 状态
+  wellName: string // 井号
+  techniques: string //  工艺
+  deviceNames: string // 使用设备
+  cumulativeWorkingLayers: number // 当日施工层
+  cumulativeWorkingWell: string // 当日施工井
+  productionBrief: string //  当日施工简要
+  yesterdayStatus: string //   上一天状态
+  yesterdayWorkingLayers: number // 上一天施工层
+  yesterdayWorkingWell: string //   上一天施工井
+  yesterdayProduct: string //  上一天施工简要
+}
+
+const list = ref<ConstructionBriefing[]>([])
+
+const loadList = async () => {
+  try {
+    loading.value = true
+    const res = await IotStatApi.getConstructionBriefing()
+    list.value = res.list ?? []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadList()
+})
+
+const { ZmTable, ZmTableColumn } = useTableComponents<ConstructionBriefing>()
+</script>
+<template>
+  <div
+    class="card max-w-250 h-130 rounded-lg p-4 flex flex-col overflow-hidden"
+    v-loading="loading"
+  >
+    <div class="flex justify-between items-center mb-4">
+      <div class="flex items-center gap-2">
+        <!-- 红色装饰条,代表异常/警示 -->
+        <div class="w-1 h-4 bg-[#00E5FF] rounded-full shadow-[0_0_8px_#00E5FF]"></div>
+        <div class="text-[#e0e0e0] text-lg font-bold">施工简报</div>
+      </div>
+    </div>
+    <div class="flex-1 relative flex">
+      <div class="flex-1 relative">
+        <el-auto-resizer class="absolute">
+          <template #default="{ height, width }">
+            {{ height }}, {{ width }}
+            <ZmTable
+              class="table"
+              :data="list"
+              :loading="loading"
+              :max-height="height"
+              :max-width="width"
+            >
+              <ZmTableColumn prop="projectDeptName" label="项目部" />
+              <ZmTableColumn prop="deptName" label="队伍" />
+              <ZmTableColumn prop="rdStatus" label="状态" />
+              <ZmTableColumn prop="wellName" label="井号" />
+              <ZmTableColumn prop="techniques" label="工艺" />
+              <ZmTableColumn prop="deviceNames" label="使用设备" />
+              <ZmTableColumn prop="cumulativeWorkingLayers" label="当日施工层" />
+              <ZmTableColumn prop="cumulativeWorkingWell" label="当日施工井" />
+              <ZmTableColumn prop="productionBrief" label="当日施工简要" />
+              <ZmTableColumn prop="yesterdayStatus" label="上一天状态" />
+              <ZmTableColumn prop="yesterdayWorkingLayers" label="上一天施工层" />
+              <ZmTableColumn prop="yesterdayWorkingWell" label="上一天施工井" />
+              <ZmTableColumn prop="yesterdayProduct" label="上一天施工简要" />
+            </ZmTable>
+          </template>
+        </el-auto-resizer>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.card {
+  background-color: rgb(0 0 0 / 30%);
+  box-shadow: 0 2px 12px rgb(0 0 0 / 50%);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+  }
+}
+
+:deep(.table) {
+  --el-table-text-color: #fff;
+  --el-table-header-text-color: #fff;
+
+  .el-table__cell {
+    background-color: rgb(0 0 0 / 30%) !important;
+  }
+}
+</style>

+ 48 - 51
src/views/pms/stat/rdkb/exception.vue

@@ -2,21 +2,22 @@
 import { ref, onMounted } from 'vue'
 import dayjs from 'dayjs'
 import CountTo from '@/components/count-to1.vue'
+import { IotStatApi } from '@/api/pms/stat'
 
 // --- 类型定义 ---
 type TimeType = 'day' | 'month' | 'year'
 
 // 模拟的生产异常数据接口
 interface ProductionExceptions {
-  standby: number // 待命
-  maintenance: number // 维修
-  exception: number // 异常
-  material: number // 物资
-  personnel: number // 人员
-  weather: number // 天气
-  thirdParty: number // 三方
-  client: number // 甲方
-  wellhead: number // 井口
+  standby: number // 井场待命
+  maintenance: number // 维修设备
+  exception: number // 异常/复杂
+  material: number // 物资影响
+  noWorkload: number // 无工作量
+  // weather: number // 天气
+  // thirdParty: number // 三方
+  // client: number // 甲方
+  // wellhead: number // 井口
 }
 
 // 模拟的巡检异常数据接口
@@ -42,11 +43,11 @@ const productionData = ref<ProductionExceptions>({
   maintenance: 0,
   exception: 0,
   material: 0,
-  personnel: 0,
-  weather: 0,
-  thirdParty: 0,
-  client: 0,
-  wellhead: 0
+  noWorkload: 0
+  // weather: 0,
+  // thirdParty: 0,
+  // client: 0,
+  // wellhead: 0
 })
 
 const inspectionData = ref<InspectionExceptions>({
@@ -56,15 +57,15 @@ const inspectionData = ref<InspectionExceptions>({
 
 // --- 配置项:用于 v-for 循环渲染 ---
 const productionConfig = [
-  { key: 'standby', name: '待命' },
-  { key: 'maintenance', name: '维修' },
-  { key: 'exception', name: '异常' },
-  { key: 'material', name: '物资' },
-  { key: 'personnel', name: '人员' },
-  { key: 'weather', name: '天气' },
-  { key: 'thirdParty', name: '三方' },
-  { key: 'client', name: '甲方' },
-  { key: 'wellhead', name: '井口' }
+  { key: 'standby', name: '井场待命' },
+  { key: 'maintenance', name: '维修设备' },
+  { key: 'noWorkload', name: '无工作量' },
+  { key: 'material', name: '物资影响' },
+  { key: 'exception', name: '异常/复杂' }
+  // { key: 'weather', name: '天气' },
+  // { key: 'thirdParty', name: '三方' },
+  // { key: 'client', name: '甲方' },
+  // { key: 'wellhead', name: '井口' }
 ]
 
 const inspectionConfig = [
@@ -93,32 +94,28 @@ const fetchData = async () => {
 
   console.log(`查询时间范围: ${start} - ${end}`)
 
-  // 模拟网络延迟
-  setTimeout(() => {
-    // 生成随机数模拟数据
-    const random = (max: number) => Math.floor(Math.random() * max)
-
-    // 假设这是 API 1: 获取生产异常
-    productionData.value = {
-      standby: random(20),
-      maintenance: random(10),
-      exception: random(5),
-      material: random(15),
-      personnel: random(5),
-      weather: random(8),
-      thirdParty: random(3),
-      client: random(5),
-      wellhead: random(10)
-    }
-
-    // 假设这是 API 2: 获取巡检异常
-    inspectionData.value = {
-      equipment: random(50),
-      point: random(100)
-    }
-
-    loading.value = false
-  }, 500)
+  const params = {
+    'createTime[0]': start,
+    'createTime[1]': end
+  }
+
+  const equipmentRes = await IotStatApi.getDeviceException(params)
+  const pointRes = await IotStatApi.getStatusException(params)
+
+  const productionRes = await IotStatApi.getProductionException(params)
+
+  inspectionData.value.equipment = equipmentRes.exceptionNum || 0
+  inspectionData.value.point = pointRes.value || 0
+
+  productionConfig.forEach((item) => {
+    productionData.value[item.key] =
+      productionRes.find((resItem) => resItem.name === item.name)?.count ?? 0
+  })
+
+  console.log('inspectionData :>> ', inspectionData)
+  console.log('productionData :>> ', productionData)
+
+  loading.value = false
 }
 
 const handleTimeChange = () => {
@@ -172,7 +169,7 @@ onMounted(() => {
               :start-val="0"
               :end-val="productionData[item.key as keyof ProductionExceptions]"
             >
-              <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
+              <!-- <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span> -->
             </CountTo>
             <!-- <div
               class="text-xl font-bold font-mono text-white group-hover:text-[#FFD740] transition-colors"
@@ -208,7 +205,7 @@ onMounted(() => {
               :start-val="0"
               :end-val="inspectionData[item.key as keyof InspectionExceptions]"
             >
-              <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
+              <!-- <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span> -->
             </CountTo>
             <!-- <div
               class="text-2xl font-bold font-mono text-white mt-1 group-hover:text-[#00E5FF] transition-colors"