✨ feat: 瑞都看板

src/components/ZmTable/ZmTableColumn.vue

@@ -117,19 +117,17 @@ 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)
+  const maxWidth = Math.min(
+    Math.max(...values.map((value) => getTextWidth(value) + 38), labelWidth),
+    360
+  )
 
   defaultOptions.value.minWidth = maxWidth
 }
 
 watch(
   () => tableContext.loading.value,
-  (loading) => {
-    console.log('loading :>> ', loading)
+  () => {
     nextTick(() => {
       calculativeWidth()
     })

src/components/ZmTable/index.vue

@@ -8,6 +8,7 @@ interface Props extends /* @vue-ignore */ Partial<Omit<TableProps<T>, 'data'>> {
   handleQuery?: (payload?: FilterPayload) => void
   sortingFields?: SortField[]
   sortFn?: (prop: string, order: SortOrder | null) => void
+  customClass?: boolean
 }
 
 const props = defineProps<Props>()
@@ -25,7 +26,8 @@ const defaultOptions: Partial<Props> = {
   border: true,
   highlightCurrentRow: true,
   showOverflowTooltip: true,
-  scrollbarAlwaysOn: false
+  scrollbarAlwaysOn: false,
+  customClass: false
 }
 
 const bindProps = computed(() => {
@@ -85,7 +87,13 @@ defineExpose({
 </script>
 
 <template>
-  <el-table ref="tableRef" v-loading="loading" class="zm-table" v-bind="bindProps" :data="data">
+  <el-table
+    ref="tableRef"
+    v-loading="loading"
+    :class="{ 'zm-table': !customClass }"
+    v-bind="bindProps"
+    :data="data"
+  >
     <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData || {}"></slot>
     </template>

src/views/pms/stat/rdkb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="min-h-screen p-4 bg-[#3a6fa3] flex flex-col">
     <el-row :gutter="16" class="summary">
       <!-- 原有的统计卡片部分保持不变 -->
       <el-col v-loading="loading" :sm="3" :xs="24">
@@ -360,9 +360,10 @@
       </el-col>
       <!-- 月度工作量表结束 -->
     </el-row>
+    <ConstructionBriefing />
     <!-- <el-row :gutter="16" class="mb-4">
       <el-col :span="24" :xs="24">
-        <ConstructionBriefing />
+
       </el-col>
     </el-row> -->
   </div>
@@ -527,6 +528,7 @@ import WorkloadChart from './rdkb/workload.vue'
 import UtilizationChart from './rdkb/utilization.vue'
 import AvailabilityChart from './rdkb/availability.vue'
 import ExceptionChart from './rdkb/exception.vue'
+import ConstructionBriefing from './rdkb/constructionBriefing.vue'
 
 /** 会员统计 */
 defineOptions({ name: 'IotRdStat' })

src/views/pms/stat/rdkb/availability.vue

@@ -26,9 +26,9 @@ const loading = ref(false)
 // 配置项：定义每一项的名称、颜色和对应接口的key
 // 你可以在这里修改 name 为实际业务名称
 const config = [
-  { key: 'a', name: '压裂设备', color: '#00E5FF' }, // 亮青
-  { key: 'b', name: '连油设备', color: '#FFD740' }, // 亮黄
-  { key: 'c', name: '辅助设备', color: '#69F0AE' } // 荧光绿
+  { key: 'a', name: 'A(关键)', color: '#00E5FF' }, // 亮青
+  { key: 'b', name: 'B(重要)', color: '#FFD740' }, // 亮黄
+  { key: 'c', name: 'C(一般)', color: '#69F0AE' } // 荧光绿
 ] as const
 
 const fetchData = async () => {
@@ -94,7 +94,7 @@ onMounted(() => {
 
         <!-- 底部文字：总数 -->
         <div class="mt-2 text-center">
-          <div class="text-[#b6c8da] text-sm">在线总数</div>
+          <!-- <div class="text-[#b6c8da] text-sm">在线总数</div> -->
           <div class="text-xl font-bold text-white mt-1">
             {{ stats[item.key]?.total || 0 }}
             <span class="text-xs text-[#6b7280] font-normal">台</span>

src/views/pms/stat/rdkb/constructionBriefing.vue

@@ -39,10 +39,7 @@ onMounted(() => {
 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="card min-h-80 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">
         <!-- 红色装饰条，代表异常/警示 -->
@@ -50,35 +47,33 @@ const { ZmTable, ZmTableColumn } = useTableComponents<ConstructionBriefing>()
         <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 class="flex-1 relative w-full">
+      <el-auto-resizer class="absolute">
+        <template #default="{ width, height }">
+          <ZmTable
+            class="custom-dark-table"
+            :data="list"
+            :loading="loading"
+            :width="width"
+            :max-height="height"
+            custom-class
+          >
+            <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>
 </template>
@@ -93,12 +88,57 @@ const { ZmTable, ZmTableColumn } = useTableComponents<ConstructionBriefing>()
   }
 }
 
-:deep(.table) {
-  --el-table-text-color: #fff;
-  --el-table-header-text-color: #fff;
+/* --- 表格深度定制 --- */
+:deep(.custom-dark-table) {
+  --el-table-border-color: rgb(255 255 255 / 5%);
+  --el-table-header-bg-color: rgb(0 229 255 / 8%);
+  --el-table-row-hover-bg-color: rgb(0 229 255 / 10%);
+  --el-table-tr-bg-color: transparent;
+
+  color: #e5e7eb; /* 文字颜色：灰白 */
+  background-color: transparent !important;
+}
+
+/* 移除表格底部和周围的白线 */
+:deep(.el-table__inner-wrapper::before),
+:deep(.el-table__border-left-patch) {
+  display: none;
+}
+
+/* 表头样式 */
+:deep(.el-table th.el-table__cell) {
+  font-weight: 600;
+  color: #00e5ff; /* 表头文字荧光色 */
+  background-color: var(--el-table-header-bg-color) !important;
+  border-bottom: 1px solid rgb(0 229 255 / 20%);
+}
+
+/* 单元格样式 */
+:deep(.el-table td.el-table__cell) {
+  border-bottom: 1px solid rgb(255 255 255 / 5%);
+}
+
+/* 斑马纹 - 偶数行稍微亮一点点 */
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+  background-color: rgb(255 255 255 / 2%);
+}
 
-  .el-table__cell {
-    background-color: rgb(0 0 0 / 30%) !important;
+/* Hover 效果 - 这一行亮起 */
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
+  background-color: var(--el-table-row-hover-bg-color) !important;
+}
+
+/* 滚动条美化 */
+:deep(.el-scrollbar__bar.is-horizontal),
+:deep(.el-scrollbar__bar.is-vertical) {
+  background-color: rgb(0 0 0 / 30%);
+}
+
+:deep(.el-scrollbar__thumb) {
+  background-color: rgb(0 229 255 / 20%);
+
+  &:hover {
+    background-color: rgb(0 229 255 / 40%);
   }
 }
 </style>

src/views/pms/stat/rdkb/exception.vue

@@ -5,7 +5,7 @@ import CountTo from '@/components/count-to1.vue'
 import { IotStatApi } from '@/api/pms/stat'
 
 // --- 类型定义 ---
-type TimeType = 'day' | 'month' | 'year'
+type TimeType = 'quarter' | 'month' | 'year'
 
 // 模拟的生产异常数据接口
 interface ProductionExceptions {
@@ -14,10 +14,6 @@ interface ProductionExceptions {
   exception: number // 异常/复杂
   material: number // 物资影响
   noWorkload: number // 无工作量
-  // weather: number // 天气
-  // thirdParty: number // 三方
-  // client: number // 甲方
-  // wellhead: number // 井口
 }
 
 // 模拟的巡检异常数据接口
@@ -32,8 +28,8 @@ const loading = ref(false)
 
 // 时间选项：日、月、年
 const timeOptions = [
-  { label: '今日', value: 'day' },
   { label: '本月', value: 'month' },
+  { label: '本季度', value: 'quarter' },
   { label: '本年', value: 'year' }
 ]
 
@@ -44,10 +40,6 @@ const productionData = ref<ProductionExceptions>({
   exception: 0,
   material: 0,
   noWorkload: 0
-  // weather: 0,
-  // thirdParty: 0,
-  // client: 0,
-  // wellhead: 0
 })
 
 const inspectionData = ref<InspectionExceptions>({
@@ -62,10 +54,6 @@ const productionConfig = [
   { key: 'noWorkload', name: '无工作量' },
   { key: 'material', name: '物资影响' },
   { key: 'exception', name: '异常/复杂' }
-  // { key: 'weather', name: '天气' },
-  // { key: 'thirdParty', name: '三方' },
-  // { key: 'client', name: '甲方' },
-  // { key: 'wellhead', name: '井口' }
 ]
 
 const inspectionConfig = [
@@ -73,26 +61,33 @@ const inspectionConfig = [
   { key: 'point', name: '异常点' }
 ]
 
+const getDateRange = (type: 'year' | 'quarter' | 'month') => {
+  const now = dayjs()
+  let start: dayjs.Dayjs, end: dayjs.Dayjs
+
+  if (type === 'year') {
+    start = now.startOf('year')
+    end = now.endOf('year')
+  } else if (type === 'quarter') {
+    start = now.startOf('quarter')
+    end = now.endOf('quarter')
+  } else {
+    start = now.startOf('month')
+    end = now.endOf('month')
+  }
+
+  return {
+    start: start.format('YYYY-MM-DD HH:mm:ss'),
+    end: end.format('YYYY-MM-DD HH:mm:ss')
+  }
+}
+
 // --- 模拟 API 请求 ---
 const fetchData = async () => {
   loading.value = true
 
   // 模拟获取时间范围
-  const now = dayjs()
-  let start = '',
-    end = ''
-  if (currentTimeType.value === 'day') {
-    start = now.startOf('day').format('YYYY-MM-DD HH:mm:ss')
-    end = now.endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (currentTimeType.value === 'month') {
-    start = now.startOf('month').format('YYYY-MM-DD HH:mm:ss')
-    end = now.endOf('month').format('YYYY-MM-DD HH:mm:ss')
-  } else {
-    start = now.startOf('year').format('YYYY-MM-DD HH:mm:ss')
-    end = now.endOf('year').format('YYYY-MM-DD HH:mm:ss')
-  }
-
-  console.log(`查询时间范围: ${start} - ${end}`)
+  const { start, end } = getDateRange(currentTimeType.value as 'year' | 'quarter' | 'month')
 
   const params = {
     'createTime[0]': start,

src/views/pms/stat/rdkb/workload.vue

@@ -314,7 +314,7 @@ onUnmounted(() => {
     <div class="flex justify-between items-center mb-4">
       <div class="flex items-center gap-2 items-center">
         <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 class="text-[#e0e0e0] text-lg font-bold">工作量汇总</div>
       </div>
       <el-segmented
         size="default"