瑞鹰项目部统计

src/api/pms/stat/index.ts

@@ -38,6 +38,9 @@ export const IotStatApi = {
   getInspectStatuss: async (params: any, dept:any) => {
     return await request.get({ url: `/rq/stat/inspect/statuss/`+dept, params })
   },
+  getProject: async (params: any) => {
+    return await request.get({ url: `/rq/stat/project/`+params })
+  },
   getInspectTodayStatus: async () => {
     return await request.get({ url: `/rq/stat/inspect/today/status` })
   },

src/views/pms/stat/rdkb.vue

@@ -753,21 +753,19 @@ onMounted(async () => {
   padding: 20px;
 }
 
-// 统计卡片区域样式
 .summary {
   margin-bottom: 20px;
 }
 
-// 图表卡片样式优化，增强与背景的对比
 ::v-deep .chart-card {
-  background-color: rgba(0, 0, 0, 0.3); // 半透明白色卡片
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); // 轻微阴影增强层次感
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   transition: all 0.3s ease;
   border: none;
 
   &:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); // 悬停时增强阴影
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   }
 }
 
@@ -810,15 +808,13 @@ onMounted(async () => {
   }
 }
 
-// 响应式调整
 @media (max-width: 768px) {
   .page-container {
     padding: 10px;
   }
 }
-// 去除卡片头部的下边框
 ::v-deep .el-card__header {
   border-bottom: none !important;
-  padding-bottom: 0; // 可选：调整底部内边距
+  padding-bottom: 0;
 }
 </style>

src/views/pms/stat/rhkb.vue

@@ -1064,25 +1064,22 @@ onBeforeUnmount(() => {
   padding: 20px;
 }
 
-// 统计卡片区域样式
 .summary {
   margin-bottom: 20px;
 }
 
-// 图表卡片样式优化，增强与背景的对比
 ::v-deep .chart-card {
-  background-color: rgba(0, 0, 0, 0.3); // 半透明白色卡片
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); // 轻微阴影增强层次感
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   transition: all 0.3s ease;
   border: none;
 
   &:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); // 悬停时增强阴影
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   }
 }
 
-// 安全生产天数卡片样式
 .safety-days-card {
   .safety-days-content {
     display: flex;
@@ -1121,15 +1118,13 @@ onBeforeUnmount(() => {
   }
 }
 
-// 响应式调整
 @media (max-width: 768px) {
   .page-container {
     padding: 10px;
   }
 }
-// 去除卡片头部的下边框
 ::v-deep .el-card__header {
   border-bottom: none !important;
-  padding-bottom: 0; // 可选：调整底部内边距
+  padding-bottom: 0;
 }
 </style>

src/views/pms/stat/rykb.vue

@@ -92,7 +92,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>
+              <span class="text-base font-medium" style="color: #b6c8da">项目部设备数量统计</span>
             </div>
           </template>
           <div ref="topContainer" class="h-[320px]"></div>
@@ -366,6 +366,10 @@ const getStats = () => {
   IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
     fill.value = res.totalList[0] || []
   })
+  IotStatApi.getProject('ry').then((res) => {
+    typeData.value = res;
+    initProjectCharts()
+  })
 }
 
 const initDrillingWorkloadChart = () => {
@@ -549,133 +553,55 @@ const topContainer = ref(null)
 let topInstance = null
 // 响应式容器尺寸
 const { width, height } = useElementSize(topContainer)
-// 处理数据（排序+限制5条）
-const processedData = () => {
-  const data = IotStatApi.getDeviceTypeCount()
-  backendData.value = data
-  return [...backendData.value].sort((a, b) => a.value - b.value)
-}
 
-const fetchTop = () => {
-  IotStatApi.getDeviceTypeCount().then((res) => {
-    backendData.value = res
-  })
-}
-// 初始化图表配置
-const getTopOption = () => {
-  // backendData.value = data
-  const data = backendData.value.sort((a, b) => a.value - b.value)
-  return {
+const initProjectCharts = () => {
+  const chart = echarts.init(topContainer.value);
+  chart.setOption({
     tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-      formatter: (params) => {
-        const item = params[0]
-        return `${item.name}<br/>${item.marker} ${item.value.toLocaleString()}`
-      }
-    },
-    grid: {
-      height: '200px',
-      left: '6%',
-      right: '6%',
-      bottom: '18%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      axisLabel: {
-        color: '#B6C8DA',
-        formatter: (value) => {
-          if (value >= 10000) return `${(value / 10000).toFixed(1)}万`
-          return value.toLocaleString()
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#B6C8DA' // X轴线白色半透明
-        }
-      },
-      splitLine: {
-        show: true, // 显示水平网格线（默认显示）
-        lineStyle: {
-          // 水平网格线颜色（可设置为纯色或带透明度的颜色）
-          color: '#457794', // 浅灰色半透明
-          // 可选：设置线条类型（实线/虚线/点线）
-          type: 'dashed'
-        }
-      }
+      trigger: 'item'
     },
-    yAxis: {
-      type: 'category',
-      data: data.map((item) => item.category),
-      axisTick: { show: false },
-      axisLabel: { color: '#B6C8DA' },
-      axisLine: {
-        lineStyle: {
-          color: '#B6C8DA' // X轴线白色半透明
-        }
+    legend: {
+      // top: '5%',
+      // right: '10%',
+      // align: 'center',
+      orient: 'horizontal',  // 水平排列图例项
+      bottom: '0%',         // 放置在底部
+      icon: 'circle',
+      textStyle: {
+        color:'#B6C8DA'
       }
     },
     series: [
       {
-        type: 'bar',
-        data: data.map((item) => item.value),
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#83bff6' },
-            { offset: 0.7, color: '#188df0' },
-            { offset: 1, color: '#188df0' }
-          ]),
-          borderRadius: [0, 8, 8, 0]
-        },
+        name: '',
+        type: 'pie',
+        radius: ['0%', '70%'],
+        avoidLabelOverlap: false,
+        center: ['50%', '45%'],
         label: {
-          show: true,
-          position: 'right',
-          formatter: '{@value}',
-          color: '#B6C8DA',
-          fontWeight: 'bold'
+          show: false,
+          position: 'outside',
+          color:'#B6C8DA'
         },
         emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          label: {
+            show: true,
+            fontSize: 15,
+            fontWeight: 'bold'
           }
-        }
+        },
+        labelLine: {
+          show: true
+        },
+        data: typeData.value
       }
-    ]
-  }
-}
-
-// 初始化图表
-const initTopChart = async () => {
-  await IotStatApi.getDeviceTypeCount('ry').then((res) => {
-    backendData.value = res
-  })
-  if (!topContainer.value) return
-  topInstance = echarts.init(topContainer.value)
-  updateTopChart()
-}
-
-// 更新图表
-const updateTopChart = () => {
-  if (!topInstance) return
-  topInstance.setOption(getTopOption())
+    ]})
 }
 
 // 自适应调整
 watch([width, height], () => {
   topInstance?.resize()
 })
-
-// 监听数据变化
-watch(
-  backendData,
-  () => {
-    updateTopChart()
-  },
-  { deep: true }
-)
-
 const activeDom = ref(null)
 let activeInstance = null
 
@@ -1056,25 +982,22 @@ onBeforeUnmount(() => {
   padding: 20px;
 }
 
-// 统计卡片区域样式
 .summary {
   margin-bottom: 20px;
 }
 
-// 图表卡片样式优化，增强与背景的对比
 ::v-deep .chart-card {
-  background-color: rgba(0, 0, 0, 0.3); // 半透明白色卡片
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); // 轻微阴影增强层次感
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   transition: all 0.3s ease;
   border: none;
 
   &:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); // 悬停时增强阴影
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   }
 }
 
-// 安全生产天数卡片样式
 .safety-days-card {
   .safety-days-content {
     display: flex;
@@ -1113,15 +1036,13 @@ onBeforeUnmount(() => {
   }
 }
 
-// 响应式调整
 @media (max-width: 768px) {
   .page-container {
     padding: 10px;
   }
 }
-// 去除卡片头部的下边框
 ::v-deep .el-card__header {
   border-bottom: none !important;
-  padding-bottom: 0; // 可选：调整底部内边距
+  padding-bottom: 0;
 }
 </style>