✨ feat: 瑞鹰看板，单井队单位

src/api/pms/stat/index.ts

@@ -57,6 +57,9 @@ export const IotStatApi = {
   getInspectStatuss: async (params: any, dept: any) => {
     return await request.get({ url: `/rq/stat/inspect/statuss/` + dept, params })
   },
+  getInspectZjxjCount: async () => {
+    return await request.get({ url: `/rq/stat/home/ry/count/zjxj` })
+  },
   getProject: async (params: any) => {
     return await request.get({ url: `/rq/stat/project/` + params })
   },

src/components/SummaryCard/index.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4" style="background-color: rgba(0, 0, 0, 0.3);">
+  <div
+    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
+    style="background-color: rgba(0, 0, 0, 0.3)"
+  >
     <div
-      class="h-9 w-9 flex flex-shrink-0 items-center justify-center rounded-1"
+      class="h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-1"
       :class="`${iconColor} ${iconBgColor}`"
     >
       <Icon :icon="icon" class="!text-5" />
     </div>
     <div class="flex flex-col gap-1">
       <div class="flex items-center gap-1 text-gray-500">
-        <span class="text-3.5" style="color: #B6C8DA">{{ title }}</span>
+        <span class="text-3.5" style="color: #b6c8da">{{ title }}</span>
         <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip">
           <Icon icon="ep:warning" class="item-center flex !text-3" />
         </el-tooltip>

src/locales/zh-CN.ts

@@ -8,6 +8,8 @@ export default {
     maintained: '已保养',
     notInspected: '未巡检',
     inspected: '已巡检',
+    zj: '总进尺',
+    xj: '总完成井数',
     mttr: 'MTTR(平均解决时间)',
     materialsUnderInventory: '库存预警物料数量',
     deviceStatus: '设备状态统计',

src/views/pms/stat/rykb.vue

@@ -1,7 +1,78 @@
 <template>
   <div class="page-container">
-    <el-row :gutter="16" class="summary">
-      <!-- 原有的统计卡片部分保持不变 -->
+    <div class="grid mb-5 2xl:grid-cols-10 2xl:grid-rows-1 gap-4 xl:grid-cols-5 xl:grid-rows-2">
+      <SummaryCard
+        :value="device.total || 0"
+        icon="fa-solid:project-diagram"
+        icon-bg-color="text-blue-500"
+        icon-color="bg-blue-100"
+        :title="t('stat.deviceCount')"
+      />
+      <SummaryCard
+        :value="maintain.total || 0"
+        icon="fa-solid:list"
+        icon-bg-color="text-pink-500"
+        icon-color="bg-blue-100"
+        :title="t('stat.repairOrder')"
+      />
+      <SummaryCard
+        :value="fill.unfilledCount || 0"
+        icon="fa-solid:times-circle"
+        icon-bg-color="text-purple-500"
+        icon-color="bg-purple-100"
+        :title="t('stat.operationNotFilled')"
+      />
+      <SummaryCard
+        :value="fill.filledCount || 0"
+        icon="fa-solid:award"
+        icon-bg-color="text-purple-500"
+        icon-color="bg-purple-100"
+        :title="t('stat.operationFilled')"
+      />
+      <SummaryCard
+        :value="by.todo || 0"
+        icon="fa-solid:times-circle"
+        icon-bg-color="text-green-500"
+        icon-color="bg-green-100"
+        :title="t('stat.notMaintained')"
+      />
+      <SummaryCard
+        :value="by.finished || 0"
+        icon="fa-solid:award"
+        icon-bg-color="text-green-500"
+        icon-color="bg-green-100"
+        :title="t('stat.maintained')"
+      />
+      <SummaryCard
+        :value="inspectt.todo || 0"
+        icon="fa-solid:times-circle"
+        icon-bg-color="text-yellow-500"
+        icon-color="bg-yellow-100"
+        :title="t('stat.notInspected')"
+      />
+      <SummaryCard
+        :value="inspectt.finished || 0"
+        icon="fa-solid:award"
+        icon-bg-color="text-yellow-500"
+        icon-color="bg-yellow-100"
+        :title="t('stat.inspected')"
+      />
+      <SummaryCard
+        :value="inspectZjxjCount.zj || 0"
+        icon="solar:ruler-bold"
+        icon-bg-color="text-yellow-500"
+        icon-color="bg-yellow-100"
+        :title="t('stat.zj')"
+      />
+      <SummaryCard
+        :value="inspectZjxjCount.xj || 0"
+        icon="mdi:wrench-check-outline"
+        icon-bg-color="text-yellow-500"
+        icon-color="bg-yellow-100"
+        :title="t('stat.xj')"
+      />
+    </div>
+    <!-- <el-row :gutter="16" class="mb-5">
       <el-col :sm="3" :xs="12">
         <SummaryCard
           :value="device.total || 0"
@@ -74,15 +145,34 @@
           :title="t('stat.inspected')"
         />
       </el-col>
-      <!-- 其他统计卡片... -->
-    </el-row>
+      <el-col :sm="3" :xs="12">
+        <SummaryCard
+          :value="inspectZjxjCount.zj || 0"
+          icon="solar:ruler-bold"
+          icon-bg-color="text-yellow-500"
+          icon-color="bg-yellow-100"
+          :title="t('stat.zj')"
+        />
+      </el-col>
+      <el-col :sm="3" :xs="12">
+        <SummaryCard
+          :value="inspectZjxjCount.xj || 0"
+          icon="mdi:wrench-check-outline"
+          icon-bg-color="text-yellow-500"
+          icon-color="bg-yellow-100"
+          :title="t('stat.xj')"
+        />
+      </el-col>
+    </el-row> -->
     <!-- 第二行：图表行 -->
     <el-row :gutter="16" class="mb-4 mt-3">
       <el-col :span="6">
         <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.deviceStatus')}}</span>
+              <span class="text-base font-medium" style="color: #b6c8da">{{
+                t('stat.deviceStatus')
+              }}</span>
             </div>
           </template>
           <div ref="statusChartRef" class="h-[320px]"></div>
@@ -92,7 +182,9 @@
         <el-card class="chart-card" shadow="never">
           <template #header>
             <div style="display: flex; flex-direction: row; justify-content: space-between">
-              <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.deviceRate')}}</span>
+              <span class="text-base font-medium" style="color: #b6c8da">{{
+                t('stat.deviceRate')
+              }}</span>
               <div>
                 <el-date-picker
                   v-model="rateQueryParams.createTime"
@@ -107,45 +199,29 @@
               </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;"
+              style="width: 100%; color: #4c4c4c"
               :header-cell-style="{
                 'background-color': '#2196df',
-                'color': 'white',
+                color: 'white',
                 'border-color': '#457794'
               }"
               :cell-style="{
                 'border-color': '#457794',
                 'background-color': '#284D72',
-                'color':'#F1D209'
+                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="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="设备利用率"
@@ -156,21 +232,23 @@
           </div>
         </el-card>
       </el-col>
-<!--      <el-col :span="7">-->
-<!--        <el-card class="chart-card" shadow="never">-->
-<!--          <template #header>-->
-<!--            <div class="flex items-center">-->
-<!--              <span class="text-base font-medium" style="color: #b6c8da">设备类别TOP5数量</span>-->
-<!--            </div>-->
-<!--          </template>-->
-<!--          <div ref="topContainer" class="h-[320px]"></div>-->
-<!--        </el-card>-->
-<!--      </el-col>-->
+      <!--      <el-col :span="7">-->
+      <!--        <el-card class="chart-card" shadow="never">-->
+      <!--          <template #header>-->
+      <!--            <div class="flex items-center">-->
+      <!--              <span class="text-base font-medium" style="color: #b6c8da">设备类别TOP5数量</span>-->
+      <!--            </div>-->
+      <!--          </template>-->
+      <!--          <div ref="topContainer" class="h-[320px]"></div>-->
+      <!--        </el-card>-->
+      <!--      </el-col>-->
       <el-col :span="8">
         <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.orderCount')}}</span>
+              <span class="text-base font-medium" style="color: #b6c8da">{{
+                t('stat.orderCount')
+              }}</span>
             </div>
           </template>
           <div ref="qxRef" class="h-[320px]"></div>
@@ -185,19 +263,23 @@
           <el-card class="safety-days-card chart-card h-[230px]" shadow="never">
             <template #header>
               <div class="flex items-center">
-                <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.safeProduction')}}</span>
+                <span class="text-base font-medium" style="color: #b6c8da">{{
+                  t('stat.safeProduction')
+                }}</span>
               </div>
             </template>
             <div class="safety-days-content">
               <div class="days-number">{{ 165 }}</div>
               <div class="days-label">天</div>
-              <div class="safety-desc">{{t('stat.daysToDate')}}</div>
+              <div class="safety-desc">{{ t('stat.daysToDate') }}</div>
             </div>
           </el-card>
           <el-card class="chart-card mt-1" shadow="never">
             <template #header>
               <div class="flex items-center">
-                <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.drillingCompletion')}}</span>
+                <span class="text-base font-medium" style="color: #b6c8da">{{
+                  t('stat.drillingCompletion')
+                }}</span>
               </div>
             </template>
             <div ref="drillingWellChartRef" class="h-[170px]"></div>
@@ -208,7 +290,9 @@
         <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.drillingWork')}}</span>
+              <span class="text-base font-medium" style="color: #b6c8da">{{
+                t('stat.drillingWork')
+              }}</span>
             </div>
           </template>
           <div ref="drillingWorkloadChartRef" class="h-[405px]"></div>
@@ -218,7 +302,9 @@
         <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.wellWorkoverWorkload')}}</span>
+              <span class="text-base font-medium" style="color: #b6c8da">{{
+                t('stat.wellWorkoverWorkload')
+              }}</span>
             </div>
           </template>
           <div ref="repairWorkloadChartRef" class="h-[405px]"></div>
@@ -238,32 +324,20 @@
       <el-table
         :data="teamTableData"
         border
-        style="width: 100%;"
+        style="width: 100%"
         :header-cell-style="{
-        'background-color': 'rgba(0, 0, 0, 0.2)',
-        'color': 'black',
-        'border-color': '#457794'
-      }"
+          'background-color': 'rgba(0, 0, 0, 0.2)',
+          color: 'black',
+          'border-color': '#457794'
+        }"
         :cell-style="{
-        'border-color': '#457794',
-        'background-color': 'transparent'
-      }"
+          '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="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="设备利用率"
@@ -290,7 +364,6 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { useElementSize } from '@vueuse/core'
 import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
 import { IotStatApi } from '@/api/pms/stat'
-import SummaryCard from '@/components/SummaryCard/index.vue'
 import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 
 // TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
@@ -320,12 +393,12 @@ const currentDeptId = ref('')
 const currentDateRange = ref([])
 const materialTableData = ref([])
 const handleDateChange = () => {
-  IotStatApi.getRyRate(rateQueryParams).then((res) =>{
+  IotStatApi.getRyRate(rateQueryParams).then((res) => {
     materialTableData.value = res
   })
 }
 const rateQueryParams = reactive({
-  createTime: [],
+  createTime: []
 })
 const handleDialogClose = () => {
   teamDialogVisible.value = false
@@ -336,7 +409,7 @@ const formatRate = (row) => {
   return (row.utilizationRate * 100).toFixed(2) + '%'
 }
 const handleRowClick = (row, column, event) => {
-  console.log('点击的行数据：', row);
+  console.log('点击的行数据：', row)
   currentDeptId.value = row.deptId // 假设行数据中包含deptId字段
   currentDateRange.value = rateQueryParams.createTime
 
@@ -348,11 +421,10 @@ const handleRowClick = (row, column, event) => {
     deptId: row.projectDeptId,
     createTime: rateQueryParams.createTime
   }
-  IotStatApi.getRyTeamRate(teamParams).then(res => {
+  IotStatApi.getRyTeamRate(teamParams).then((res) => {
     teamTableData.value = res
   })
-
-};
+}
 const dateRange = ref<[Date, Date] | null>(null)
 const by = ref({
   todo: undefined,
@@ -441,6 +513,8 @@ const repairWorkloadData = ref({})
 const repairWellChartRef = ref()
 const drillingWellChartRef = ref()
 
+const inspectZjxjCount = ref<any>({})
+
 /** 获取统计数据 */
 const getStats = () => {
   // 获取基础统计数据
@@ -487,16 +561,16 @@ const getStats = () => {
 
   IotStatApi.getRepairRigWork('repair').then((res) => {
     repairWorkloadData.value = res
-    initRepairWorkloadChart(res);
+    initRepairWorkloadChart(res)
   })
   IotStatApi.getRepairRigWork('rig').then((res) => {
     drillingWorkloadData.value = res
-    initDrillingWorkloadChart(res);
+    initDrillingWorkloadChart(res)
   })
   IotStatApi.getRigFinished().then((res) => {
     debugger
     drillingWellData.value = res
-    initDrillingWellChart(res);
+    initDrillingWellChart(res)
   })
   const fillQueryParams = reactive({
     startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
@@ -508,6 +582,12 @@ const getStats = () => {
   IotStatApi.getInspectStatuss(fillQueryParams, 'ry').then((res) => {
     inspectt.value = res
   })
+
+  IotStatApi.getInspectZjxjCount().then((res) => {
+    inspectZjxjCount.value = res
+
+    console.log('inspectZjxjCount.value :>> ', inspectZjxjCount.value)
+  })
   fillQueryParams.deptId = '158'
   IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
     fill.value = res.totalList[0] || []
@@ -518,26 +598,25 @@ const getStats = () => {
   // })
 
   // 计算近一周时间
-  const end = new Date();
-  const start = new Date();
-  start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000);
+  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) =>{
+    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 = (res) => {
@@ -722,7 +801,6 @@ let topInstance = null
 // 响应式容器尺寸
 const { width, height } = useElementSize(topContainer)
 
-
 // 处理数据（排序+限制5条）
 const processedData = () => {
   const data = IotStatApi.getDeviceTypeCount()
@@ -736,7 +814,6 @@ const fetchTop = () => {
   })
 }
 
-
 watch(
   backendData,
   () => {
@@ -847,7 +924,7 @@ const getTopOption = () => {
 // }
 
 const initProjectCharts = () => {
-  const chart = echarts.init(topContainer.value);
+  const chart = echarts.init(topContainer.value)
   chart.setOption({
     tooltip: {
       trigger: 'item'
@@ -856,11 +933,11 @@ const initProjectCharts = () => {
       // top: '5%',
       // right: '10%',
       // align: 'center',
-      orient: 'horizontal',  // 水平排列图例项
-      bottom: '0%',         // 放置在底部
+      orient: 'horizontal', // 水平排列图例项
+      bottom: '0%', // 放置在底部
       icon: 'circle',
       textStyle: {
-        color:'#B6C8DA'
+        color: '#B6C8DA'
       }
     },
     series: [
@@ -873,7 +950,7 @@ const initProjectCharts = () => {
         label: {
           show: false,
           position: 'outside',
-          color:'#B6C8DA'
+          color: '#B6C8DA'
         },
         emphasis: {
           label: {
@@ -887,7 +964,8 @@ const initProjectCharts = () => {
         },
         data: typeData.value
       }
-    ]})
+    ]
+  })
 }
 
 // 自适应调整
@@ -1338,7 +1416,6 @@ onBeforeUnmount(() => {
   padding-bottom: 0;
 }
 
-
 .table-container {
   padding: 16px;
   height: 320px;
@@ -1389,6 +1466,6 @@ onBeforeUnmount(() => {
   background-color: #d1d5db; /*  hover时滑块颜色 */
 }
 .custom-table :deep .el-table__row {
-  height: 45px !important;  /* 高度根据需求调整 */
+  height: 45px !important; /* 高度根据需求调整 */
 }
 </style>

src/views/report-statistics/daily-report.vue

@@ -149,7 +149,7 @@ const columns = ref<Column[]>([
         'min-width': '120px'
       },
       {
-        label: '用电量(kWh)',
+        label: '用电量(MWh)',
         prop: 'dailyPowerUsage',
         'min-width': '120px'
       },
@@ -526,9 +526,9 @@ const expandRowKeys = computed(() => {
                   <div
                     class="flex items-center gap-8 h-10 px-14 sticky left-0 w-fit box-border bg-[var(--el-bg-color)]"
                   >
-                    <el-tag size="default">累计注气量(方): {{ row.groupIdGasInjection }} </el-tag>
+                    <el-tag size="default">累计注气量(万方): {{ row.groupIdGasInjection }} </el-tag>
                     <el-tag size="default">累计注水量(方): {{ row.groupIdWaterInjection }} </el-tag>
-                    <el-tag size="default">累计用电量(kWh) : {{ row.groupIdPower }} </el-tag>
+                    <el-tag size="default">累计用电量(MWh) : {{ row.groupIdPower }} </el-tag>
                     <el-tag size="default">累计油耗(L) : {{ row.groupIdFuel }} </el-tag>
                     <el-tag size="default">累计注气时间(H) : {{ row.groupIdGasTime }} </el-tag>
                     <el-tag size="default">

uno.config.ts

@@ -7,6 +7,15 @@ export default defineConfig({
       include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, 'src/**/*.{js,ts}']
     }
   },
+  theme: {
+    breakpoints: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1920px'
+    }
+  },
   // ...UnoCSS options
   rules: [
     [