|
|
@@ -74,10 +74,13 @@
|
|
|
<!-- 第二行：图表行 -->
|
|
|
<el-row :gutter="16" class="mb-4">
|
|
|
<el-col :span="8">
|
|
|
- <el-card shadow="hover" class="mb-8px">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <Echart :options="barOptionsData" :height="280" />
|
|
|
- </el-skeleton>
|
|
|
+ <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>
|
|
|
+ <div ref="typeChartRef" class="h-[220px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
@@ -135,8 +138,6 @@
|
|
|
<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,
|
|
|
@@ -154,7 +155,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 首页 */
|
|
|
@@ -671,37 +672,10 @@ 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()
|
