图表

src/views/Home/Index.vue

@@ -4,58 +4,33 @@
     <el-col :span="6">
       <el-card class="stat-card" shadow="never">
         <div class="flex flex-col">
-          <div class="flex justify-between items-center text-gray-400">
-            <span>昨日工单数量</span>
+          <div class="flex justify-between items-center mb-1">
+            <span class="text-gray-500 text-base font-medium">设备数量</span>
             <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
           </div>
-          <el-divider />
-          <div class="flex justify-between items-center mb-1">
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >总数量</span
-            >
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >未完成</span
-            >
+          <span class="text-3xl font-bold text-gray-700">
+            {{ statsData.productCategoryCount }}
+          </span>
+          <el-divider class="my-2" />
+          <div class="flex justify-between items-center text-gray-400 text-sm">
+            <span>今日新增</span>
+            <span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>
           </div>
-          <div class="flex justify-between items-center mb-1">
-            <span class="text-3xl font-bold text-gray-700">
-              {{ day.total }}
-            </span>
-            <span class="text-3xl font-bold text-gray-700">
-              {{ day.todo }}
-            </span>
-          </div>
-          <!--          <el-divider class="my-2" />-->
-          <!--          <div class="flex justify-between items-center text-gray-400 text-sm">-->
-          <!--            <span>今日新增</span>-->
-          <!--            <span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>-->
-          <!--          </div>-->
         </div>
       </el-card>
     </el-col>
     <el-col :span="6">
       <el-card class="stat-card" shadow="never">
         <div class="flex flex-col">
-          <div class="flex justify-between items-center text-gray-400">
-            <span>近一周工单数量</span>
-            <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
-          </div>
-          <el-divider />
           <div class="flex justify-between items-center mb-1">
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >总数量</span
-            >
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >未完成</span
-            >
+            <span class="text-gray-500 text-base font-medium">维修数量</span>
+            <Icon icon="ep:box" class="text-[32px] text-orange-400" />
           </div>
-          <div class="flex justify-between items-center mb-1">
-            <span class="text-3xl font-bold text-gray-700">
-              {{ week.total }}
-            </span>
-            <span class="text-3xl font-bold text-gray-700">
-              {{ week.todo }}
-            </span>
+          <span class="text-3xl font-bold text-gray-700">{{ statsData.productCount }}</span>
+          <el-divider class="my-2" />
+          <div class="flex justify-between items-center text-gray-400 text-sm">
+            <span>今日新增</span>
+            <span class="text-green-500">+{{ statsData.productTodayCount }}</span>
           </div>
         </div>
       </el-card>
@@ -63,26 +38,15 @@
     <el-col :span="6">
       <el-card class="stat-card" shadow="never">
         <div class="flex flex-col">
-          <div class="flex justify-between items-center text-gray-400">
-            <span>近一月工单数量</span>
-            <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
-          </div>
-          <el-divider />
           <div class="flex justify-between items-center mb-1">
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >总数量</span
-            >
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >未完成</span
-            >
+            <span class="text-gray-500 text-base font-medium">保养数量</span>
+            <Icon icon="ep:cpu" class="text-[32px] text-purple-400" />
           </div>
-          <div class="flex justify-between items-center mb-1">
-            <span class="text-3xl font-bold text-gray-700">
-              {{ month.total }}
-            </span>
-            <span class="text-3xl font-bold text-gray-700">
-              {{ month.todo }}
-            </span>
+          <span class="text-3xl font-bold text-gray-700">{{ statsData.deviceCount }}</span>
+          <el-divider class="my-2" />
+          <div class="flex justify-between items-center text-gray-400 text-sm">
+            <span>今日新增</span>
+            <span class="text-green-500">+{{ statsData.deviceTodayCount }}</span>
           </div>
         </div>
       </el-card>
@@ -90,32 +54,18 @@
     <el-col :span="6">
       <el-card class="stat-card" shadow="never">
         <div class="flex flex-col">
-          <div class="flex justify-between items-center text-gray-400">
-            <span>工单数量</span>
-            <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
-          </div>
-          <el-divider />
           <div class="flex justify-between items-center mb-1">
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >总数量</span
-            >
-            <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
-            >未完成</span
-            >
+            <span class="text-gray-500 text-base font-medium">巡检数量</span>
+            <Icon icon="ep:message" class="text-[32px] text-teal-400" />
           </div>
-          <div class="flex justify-between items-center mb-1">
-            <span class="text-3xl font-bold text-gray-700">
-              {{ total.total }}
-            </span>
-            <span class="text-3xl font-bold text-gray-700">
-              {{ total.todo }}
-            </span>
+          <span class="text-3xl font-bold text-gray-700">
+            {{ statsData.deviceMessageCount }}
+          </span>
+          <el-divider class="my-2" />
+          <div class="flex justify-between items-center text-gray-400 text-sm">
+            <span>今日新增</span>
+            <span class="text-green-500">+{{ statsData.deviceMessageTodayCount }}</span>
           </div>
-          <!--          <el-divider class="my-2" />-->
-          <!--          <div class="flex justify-between items-center text-gray-400 text-sm">-->
-          <!--            <span>今日新增</span>-->
-          <!--            <span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>-->
-          <!--          </div>-->
         </div>
       </el-card>
     </el-col>
@@ -124,33 +74,17 @@
   <!-- 第二行：图表行 -->
   <el-row :gutter="16" class="mb-4">
     <el-col :span="8">
-      <el-card class="chart-card" shadow="never">
-        <template #header>
-          <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">保养工单状态统计</span>
-          </div>
-        </template>
-        <el-row class="h-[220px]">
-          <el-col :span="12" class="flex flex-col items-center">
-            <div ref="writeChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">待执行</span>
-            </div>
-          </el-col>
-          <el-col :span="12" class="flex flex-col items-center">
-            <div ref="finishedChartRef" class="h-[160px] w-full"></div>
-            <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">已执行</span>
-            </div>
-          </el-col>
-        </el-row>
+      <el-card shadow="hover" class="mb-8px">
+        <el-skeleton :loading="loading" animated>
+          <Echart :options="barOptionsData" :height="280" />
+        </el-skeleton>
       </el-card>
     </el-col>
     <el-col :span="8">
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">工单类型统计</span>
+            <span class="text-base font-medium text-gray-600">设备状态统计</span>
           </div>
         </template>
         <div ref="typeChartRef" class="h-[220px]"></div>
@@ -201,6 +135,8 @@
 <script setup lang="ts" name="Index">
 import * as echarts from 'echarts/core'
 import { BarChart } from 'echarts/charts'; // 显式导入柱状图模块
+import { set } from 'lodash-es'
+const { t } = useI18n() // 国际化
 
 import {
   GridComponent,
@@ -218,7 +154,7 @@ import {
 } from '@/api/iot/statistics'
 import { formatDate } from '@/utils/formatTime'
 import { IotStatApi } from '@/api/pms/stat'
-
+import { pieOptions, barOptions } from './echarts-data'
 // TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
 
 /** IoT 首页 */
@@ -735,10 +671,37 @@ const initChart = async () => {
 const handleResize = () => {
   chartInstance?.resize()
 }
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+
+// 周活跃量
+const getWeeklyUserActivity = async () => {
+  const data = [
+    { value: 13253, name: 'analysis.monday' },
+    { value: 34235, name: 'analysis.tuesday' },
+    { value: 26321, name: 'analysis.wednesday' },
+    { value: 12340, name: 'analysis.thursday' },
+    { value: 24643, name: 'analysis.friday' },
+    { value: 1322, name: 'analysis.saturday' },
+    { value: 1324, name: 'analysis.sunday' }
+  ]
+  set(
+    barOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(barOptionsData, 'series', [
+    {
+      name: t('analysis.activeQuantity'),
+      data: data.map((v) => v.value),
+      type: 'bar'
+    }
+  ])
+}
 /** 初始化 */
 onMounted(() => {
   getStats()
   initChart()
+  //getWeeklyUserActivity()
 })
 onUnmounted(() => {
   chartInstance?.dispose()