|
|
@@ -1,227 +1,249 @@
|
|
|
<template>
|
|
|
<!-- 第一行：统计卡片行 -->
|
|
|
<div class="page-container">
|
|
|
- <el-row :gutter="16" class="summary">
|
|
|
- <!-- 原有的统计卡片部分保持不变 -->
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <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')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <SummaryCard
|
|
|
- :value="maintain.total || 0"
|
|
|
- icon="fa-solid:list"
|
|
|
- icon-bg-color="text-pink-500"
|
|
|
- icon-color="bg-blue-100"
|
|
|
- :title="t('stat.maintenanceOrder')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <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')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <SummaryCard
|
|
|
- :value="fill.filledCount || 0"
|
|
|
- icon="fa-solid:award"
|
|
|
- icon-bg-color="text-purple-500"
|
|
|
- icon-color="bg-purple-100"
|
|
|
- :title="t('stat.operationFilled')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <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')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <SummaryCard
|
|
|
- :value="by.finished || 0"
|
|
|
- icon="fa-solid:award"
|
|
|
- icon-bg-color="text-green-500"
|
|
|
- icon-color="bg-green-100"
|
|
|
- :title="t('stat.maintained')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <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')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :sm="3" :xs="12">
|
|
|
- <SummaryCard
|
|
|
- :value="inspectt.finished || 0"
|
|
|
- icon="fa-solid:award"
|
|
|
- icon-bg-color="text-yellow-500"
|
|
|
- icon-color="bg-yellow-100"
|
|
|
- :title="t('stat.inspected')"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <!-- 其他统计卡片... -->
|
|
|
- </el-row>
|
|
|
-<!-- <el-row :gutter="16" class="mb-4">-->
|
|
|
-<!-- <el-col :span="6">-->
|
|
|
-<!-- <el-card class="stat-card" shadow="never">-->
|
|
|
-<!-- <div class="flex flex-col">-->
|
|
|
-<!-- <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>-->
|
|
|
-<!-- <span class="text-3xl font-bold text-gray-700">-->
|
|
|
-<!-- {{ device.total }}-->
|
|
|
-<!-- </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">+{{ device.today }}</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 mb-1">-->
|
|
|
-<!-- <span class="text-gray-500 text-base font-medium">维修工单数量</span>-->
|
|
|
-<!-- <Icon icon="ep:box" class="text-[32px] text-orange-400" />-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <span class="text-3xl font-bold text-gray-700">{{ maintain.total }}</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">+{{ maintain.today }}</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 mb-1">-->
|
|
|
-<!-- <span class="text-gray-500 text-base font-medium">保养工单数量</span>-->
|
|
|
-<!-- <Icon icon="ep:cpu" class="text-[32px] text-purple-400" />-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <span class="text-3xl font-bold text-gray-700">{{ work.total }}</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">+{{ work.today }}</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 mb-1">-->
|
|
|
-<!-- <span class="text-gray-500 text-base font-medium">巡检工单数量</span>-->
|
|
|
-<!-- <Icon icon="ep:camera" class="text-[32px] text-teal-400" />-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <span class="text-3xl font-bold text-gray-700">-->
|
|
|
-<!-- {{ inspect.total }}-->
|
|
|
-<!-- </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">+{{ inspect.today }}</span>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </el-card>-->
|
|
|
-<!-- </el-col>-->
|
|
|
-<!-- </el-row>-->
|
|
|
-
|
|
|
- <!-- 第二行：图表行 -->
|
|
|
- <el-row :gutter="16" class="mb-4">
|
|
|
- <el-col :span="6">
|
|
|
- <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.mttr')}}</span>
|
|
|
- <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.materialsUnderInventory')}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="flex flex-col h-[250px]">
|
|
|
- <!-- <div class="flex justify-between items-center text-gray-400">-->
|
|
|
- <!-- <span>MTTR</span>-->
|
|
|
-
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <el-divider />-->
|
|
|
- <div class="flex justify-between items-center mb-1 mt-15">
|
|
|
- <!-- <span class="text-gray-500 text-base font-medium">平均解决时间</span>-->
|
|
|
- <!-- <Icon icon="ep:menu" class="text-[32px] text-blue-400" />-->
|
|
|
- <span class="text-5xl font-bold text-gray-700" style="color: lightseagreen">
|
|
|
- {{ mttr+'h' }}
|
|
|
- </span>
|
|
|
- <span class="text-5xl font-bold text-gray-700" style="color: indianred">
|
|
|
- {{ safe }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="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.deviceStatus')}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div ref="statusChartRef" class="h-[250px]"></div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="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.deviceClassifyTop5')}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div ref="topContainer" class="h-[250px]"></div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 第三行：消息统计行 -->
|
|
|
- <el-row :gutter="16" class="mb-4">
|
|
|
- <el-col :span="6">
|
|
|
- <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.lastWeekActivity')}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div ref="activeDom" class="h-[320px]"></div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="18">
|
|
|
- <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>
|
|
|
+ <el-row :gutter="16" class="summary">
|
|
|
+ <!-- 原有的统计卡片部分保持不变 -->
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <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')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <SummaryCard
|
|
|
+ :value="maintain.total || 0"
|
|
|
+ icon="fa-solid:list"
|
|
|
+ icon-bg-color="text-pink-500"
|
|
|
+ icon-color="bg-blue-100"
|
|
|
+ :title="t('stat.maintenanceOrder')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <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')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <SummaryCard
|
|
|
+ :value="fill.filledCount || 0"
|
|
|
+ icon="fa-solid:award"
|
|
|
+ icon-bg-color="text-purple-500"
|
|
|
+ icon-color="bg-purple-100"
|
|
|
+ :title="t('stat.operationFilled')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <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')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <SummaryCard
|
|
|
+ :value="by.finished || 0"
|
|
|
+ icon="fa-solid:award"
|
|
|
+ icon-bg-color="text-green-500"
|
|
|
+ icon-color="bg-green-100"
|
|
|
+ :title="t('stat.maintained')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <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')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="3" :xs="12">
|
|
|
+ <SummaryCard
|
|
|
+ :value="inspectt.finished || 0"
|
|
|
+ icon="fa-solid:award"
|
|
|
+ icon-bg-color="text-yellow-500"
|
|
|
+ icon-color="bg-yellow-100"
|
|
|
+ :title="t('stat.inspected')"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <!-- 其他统计卡片... -->
|
|
|
+ </el-row>
|
|
|
+ <!-- <el-row :gutter="16" class="mb-4">-->
|
|
|
+ <!-- <el-col :span="6">-->
|
|
|
+ <!-- <el-card class="stat-card" shadow="never">-->
|
|
|
+ <!-- <div class="flex flex-col">-->
|
|
|
+ <!-- <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>-->
|
|
|
+ <!-- <span class="text-3xl font-bold text-gray-700">-->
|
|
|
+ <!-- {{ device.total }}-->
|
|
|
+ <!-- </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">+{{ device.today }}</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 mb-1">-->
|
|
|
+ <!-- <span class="text-gray-500 text-base font-medium">维修工单数量</span>-->
|
|
|
+ <!-- <Icon icon="ep:box" class="text-[32px] text-orange-400" />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <span class="text-3xl font-bold text-gray-700">{{ maintain.total }}</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">+{{ maintain.today }}</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 mb-1">-->
|
|
|
+ <!-- <span class="text-gray-500 text-base font-medium">保养工单数量</span>-->
|
|
|
+ <!-- <Icon icon="ep:cpu" class="text-[32px] text-purple-400" />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <span class="text-3xl font-bold text-gray-700">{{ work.total }}</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">+{{ work.today }}</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 mb-1">-->
|
|
|
+ <!-- <span class="text-gray-500 text-base font-medium">巡检工单数量</span>-->
|
|
|
+ <!-- <Icon icon="ep:camera" class="text-[32px] text-teal-400" />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <span class="text-3xl font-bold text-gray-700">-->
|
|
|
+ <!-- {{ inspect.total }}-->
|
|
|
+ <!-- </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">+{{ inspect.today }}</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </el-card>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- </el-row>-->
|
|
|
+
|
|
|
+ <!-- 第二行：图表行 -->
|
|
|
+ <el-row :gutter="16" class="mb-4">
|
|
|
+ <el-col :span="6">
|
|
|
+ <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.mttr') }}</span>
|
|
|
+ <span class="text-base font-medium" style="color: #b6c8da">{{
|
|
|
+ t('stat.materialsUnderInventory')
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex flex-col h-[250px]">
|
|
|
+ <!-- <div class="flex justify-between items-center text-gray-400">-->
|
|
|
+ <!-- <span>MTTR</span>-->
|
|
|
+
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <el-divider />-->
|
|
|
+ <div class="flex justify-between items-center mb-1 mt-15">
|
|
|
+ <!-- <span class="text-gray-500 text-base font-medium">平均解决时间</span>-->
|
|
|
+ <!-- <Icon icon="ep:menu" class="text-[32px] text-blue-400" />-->
|
|
|
+ <span class="text-5xl font-bold text-gray-700" style="color: lightseagreen">
|
|
|
+ {{ mttr + 'h' }}
|
|
|
+ </span>
|
|
|
+ <span class="text-5xl font-bold text-gray-700" style="color: indianred">
|
|
|
+ {{ safe }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <div ref="qxRef" class="h-[320px]"></div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="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.deviceStatus')
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div ref="statusChartRef" class="h-[250px]"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="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.deviceClassifyTop5')
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div ref="topContainer" class="h-[250px]"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第三行：消息统计行 -->
|
|
|
+ <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 justify-between">
|
|
|
+ <span class="text-base font-medium" style="color: #b6c8da">日报完成率</span>
|
|
|
+ <div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="completeRateParams.createTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
+ class="!w-200px"
|
|
|
+ @change="handleDateChange"
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- <div ref="activeDom" class="h-[320px]"></div> -->
|
|
|
+ <Echart :options="myoption" :height="320" />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div ref="qxRef" class="h-[320px]"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -242,11 +264,12 @@ import {
|
|
|
IotStatisticsDeviceMessageSummaryRespVO,
|
|
|
IotStatisticsSummaryRespVO
|
|
|
} from '@/api/iot/statistics'
|
|
|
-import { formatDate } from '@/utils/formatTime'
|
|
|
+
|
|
|
import { IotStatApi } from '@/api/pms/stat'
|
|
|
-import SummaryCard from "@/components/SummaryCard/index.vue";
|
|
|
-import {reactive, ref} from "vue";
|
|
|
+import SummaryCard from '@/components/SummaryCard/index.vue'
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
import { useLocaleStore } from '@/store/modules/locale'
|
|
|
+import Echart from '@/components/Echart/src/Echart.vue'
|
|
|
|
|
|
// TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
|
|
|
|
|
|
@@ -269,6 +292,105 @@ echarts.use([
|
|
|
BarChart
|
|
|
])
|
|
|
|
|
|
+const myoption = ref<any>({
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['四川瑞都', '瑞恒兴域', '瑞鹰国际'],
|
|
|
+ // 文字颜色
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter: function (params: any) {
|
|
|
+ const p = params && params[0] ? params[0] : params
|
|
|
+ return `${p.name}: ${p.data}%`
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ right: '10%',
|
|
|
+ align: 'left',
|
|
|
+ orient: 'vertical',
|
|
|
+ icon: 'circle',
|
|
|
+ textStyle: {
|
|
|
+ color: 'white'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ formatter: '{value}%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [],
|
|
|
+ type: 'bar'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+const completeRateParams = reactive({
|
|
|
+ createTime: []
|
|
|
+})
|
|
|
+
|
|
|
+// 计算近一周时间
|
|
|
+const end = new Date()
|
|
|
+const start = new Date()
|
|
|
+
|
|
|
+const now = new Date()
|
|
|
+// 构造：今年 1 月 1 日 00:00:00
|
|
|
+const firstDay = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0)
|
|
|
+// 转时间戳（毫秒），如需秒级时间戳，加 .getTime() / 1000
|
|
|
+
|
|
|
+start.setTime(firstDay.getTime())
|
|
|
+
|
|
|
+// 格式化日期为后端需要的格式
|
|
|
+const formatDate = (date): string => {
|
|
|
+ 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}`
|
|
|
+}
|
|
|
+const initMyoption = async () => {
|
|
|
+ // 只在初始化时设置默认值，不覆盖已有值
|
|
|
+ if (!completeRateParams.createTime || completeRateParams.createTime.length === 0) {
|
|
|
+ completeRateParams.createTime = [formatDate(start), formatDate(end)]
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await IotStatApi.getCompleteRate(completeRateParams)
|
|
|
+
|
|
|
+ const list = []
|
|
|
+ res.forEach((item) => {
|
|
|
+ // 后端返回 rate 为小数（如 0.85），这里转换为整数百分比（如 85）以便图表显示
|
|
|
+ if (item.department === '瑞恒兴域') {
|
|
|
+ list.push(Math.trunc(Number(item['瑞恒兴域']) * 100))
|
|
|
+ } else {
|
|
|
+ list.push(Math.trunc(Number(item.rate) * 100))
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ myoption.value.series[0].data = list
|
|
|
+}
|
|
|
+
|
|
|
+const handleDateChange = (val) => {
|
|
|
+ console.log('handleDateChange', val)
|
|
|
+ completeRateParams.createTime = [val[0], val[1]]
|
|
|
+ initMyoption()
|
|
|
+}
|
|
|
+
|
|
|
const timeRange = ref('7d') // 修改默认选择为近一周
|
|
|
const dateRange = ref<[Date, Date] | null>(null)
|
|
|
|
|
|
@@ -882,7 +1004,7 @@ let activeInstance = null
|
|
|
// { department: '运营中心', total: 157, active: 89 }
|
|
|
// ])
|
|
|
const activeData = ref([])
|
|
|
-const initActiveChart = async (total:any, active:any,people:any) => {
|
|
|
+const initActiveChart = async (total: any, active: any, people: any) => {
|
|
|
if (!activeDom.value) return
|
|
|
activeData.value = await IotStatApi.getDeptCount()
|
|
|
activeInstance = echarts.init(activeDom.value)
|
|
|
@@ -901,7 +1023,7 @@ const initActiveChart = async (total:any, active:any,people:any) => {
|
|
|
data: [total, active],
|
|
|
top: 30,
|
|
|
textStyle: {
|
|
|
- color: '#B6C8DA',
|
|
|
+ color: '#B6C8DA'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
@@ -928,7 +1050,7 @@ const initActiveChart = async (total:any, active:any,people:any) => {
|
|
|
type: 'value',
|
|
|
name: people,
|
|
|
axisLabel: {
|
|
|
- color: '#B6C8DA',
|
|
|
+ color: '#B6C8DA'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true, // 显示水平网格线（默认显示）
|
|
|
@@ -1107,11 +1229,12 @@ onMounted(() => {
|
|
|
initTopChart()
|
|
|
const localeStore = useLocaleStore()
|
|
|
const lang = localeStore.getCurrentLocale.lang
|
|
|
- if (lang==='zh-CN') {
|
|
|
- initActiveChart('总人数','活跃人数','人数')
|
|
|
- } else if (lang==='en') {
|
|
|
- initActiveChart('totalPeople','activePeople','count')
|
|
|
+ if (lang === 'zh-CN') {
|
|
|
+ initActiveChart('总人数', '活跃人数', '人数')
|
|
|
+ } else if (lang === 'en') {
|
|
|
+ initActiveChart('totalPeople', 'activePeople', 'count')
|
|
|
}
|
|
|
+ initMyoption()
|
|
|
|
|
|
// initQxChart()
|
|
|
window.addEventListener('resize', resizeQxChart)
|
