|
@@ -234,8 +234,18 @@
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
|
<!-- 第三行:消息统计行 -->
|
|
<!-- 第三行:消息统计行 -->
|
|
- <el-row>
|
|
|
|
- <el-col :span="24">
|
|
|
|
|
|
+ <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>
|
|
|
|
+ <div ref="statusChartRef" class="h-[300px]"></div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="16">
|
|
<el-card class="chart-card" shadow="never">
|
|
<el-card class="chart-card" shadow="never">
|
|
<template #header>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-between">
|
|
@@ -277,6 +287,7 @@ import {DeptTreeItem} from "@/api/system/dept";
|
|
import * as DeptApi from "@/api/system/dept";
|
|
import * as DeptApi from "@/api/system/dept";
|
|
import {useUserStore} from "@/store/modules/user";
|
|
import {useUserStore} from "@/store/modules/user";
|
|
|
|
|
|
|
|
+
|
|
// TODO @super:参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue,拆一拆组件
|
|
// TODO @super:参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue,拆一拆组件
|
|
|
|
|
|
/** IoT 首页 */
|
|
/** IoT 首页 */
|
|
@@ -319,6 +330,7 @@ const writeChartRef = ref() // 上下行消息量统计的图表
|
|
const finishedChartRef = ref() // 上下行消息量统计的图表
|
|
const finishedChartRef = ref() // 上下行消息量统计的图表
|
|
const writeTodayChartRef = ref() // 上下行消息量统计的图表
|
|
const writeTodayChartRef = ref() // 上下行消息量统计的图表
|
|
const finishedTodayChartRef = ref() // 上下行消息量统计的图表
|
|
const finishedTodayChartRef = ref() // 上下行消息量统计的图表
|
|
|
|
+const statusChartRef = ref() // 设备数量统计的图表
|
|
// 基础统计数据
|
|
// 基础统计数据
|
|
// TODO @super:初始为 -1,然后界面展示先是加载中?试试用 cursor 改哈
|
|
// TODO @super:初始为 -1,然后界面展示先是加载中?试试用 cursor 改哈
|
|
const statsData = ref<IotStatisticsSummaryRespVO>({
|
|
const statsData = ref<IotStatisticsSummaryRespVO>({
|
|
@@ -398,6 +410,7 @@ const todayStatus = ref({
|
|
finished: 0,
|
|
finished: 0,
|
|
todo: 0
|
|
todo: 0
|
|
})
|
|
})
|
|
|
|
+const typeData = ref({})
|
|
// 消息统计数据
|
|
// 消息统计数据
|
|
const messageStats = ref<IotStatisticsDeviceMessageSummaryRespVO>({
|
|
const messageStats = ref<IotStatisticsDeviceMessageSummaryRespVO>({
|
|
upstreamCounts: {},
|
|
upstreamCounts: {},
|
|
@@ -475,6 +488,11 @@ const getStats = async () => {
|
|
initChart()
|
|
initChart()
|
|
initCharts()
|
|
initCharts()
|
|
})
|
|
})
|
|
|
|
+ IotStatApi.getInspectItemStatus(queryParams).then((res) =>{
|
|
|
|
+ typeData.value = res
|
|
|
|
+ initChart()
|
|
|
|
+ initCharts()
|
|
|
|
+ })
|
|
// statsData.value = await ProductCategoryApi.getIotStatisticsSummary()
|
|
// statsData.value = await ProductCategoryApi.getIotStatisticsSummary()
|
|
|
|
|
|
//
|
|
//
|
|
@@ -486,6 +504,54 @@ const getStats = async () => {
|
|
|
|
|
|
/** 初始化图表 */
|
|
/** 初始化图表 */
|
|
const initCharts = () => {
|
|
const initCharts = () => {
|
|
|
|
+ const chart = echarts.init(statusChartRef.value);
|
|
|
|
+ chart.setOption({
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'item'
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ // top: '5%',
|
|
|
|
+ // right: '10%',
|
|
|
|
+ // align: 'center',
|
|
|
|
+ orient: 'horizontal', // 水平排列图例项
|
|
|
|
+ bottom: '0%', // 放置在底部
|
|
|
|
+ icon: 'circle'
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '',
|
|
|
|
+ type: 'pie',
|
|
|
|
+ radius: ['0%', '70%'],
|
|
|
|
+ avoidLabelOverlap: false,
|
|
|
|
+ center: ['50%', '45%'],
|
|
|
|
+ label: {
|
|
|
|
+ show: false,
|
|
|
|
+ position: 'outside'
|
|
|
|
+ },
|
|
|
|
+ emphasis: {
|
|
|
|
+ label: {
|
|
|
|
+ show: true,
|
|
|
|
+ fontSize: 15,
|
|
|
|
+ fontWeight: 'bold'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ labelLine: {
|
|
|
|
+ show: true
|
|
|
|
+ },
|
|
|
|
+ data: typeData.value
|
|
|
|
+ }
|
|
|
|
+ ]})
|
|
|
|
+ chart.on('click', (params) => {
|
|
|
|
+ console.log('点击的数据值为:', params.value);
|
|
|
|
+ console.log('点击的数据类型为:', params.data.type);
|
|
|
|
+ debugger
|
|
|
|
+ const createTime = queryParams.createTime;
|
|
|
|
+ const deptId = queryParams.deptId;
|
|
|
|
+ const status = params.data.name
|
|
|
|
+ push({ name: 'IotInspectItemStat', params:{deptId,status,createTime}})
|
|
|
|
+ });
|
|
|
|
+ // echarts.init(statusChartRef.value).setOption({
|
|
|
|
+ // })
|
|
//待执行
|
|
//待执行
|
|
initGaugeChart(
|
|
initGaugeChart(
|
|
writeTodayChartRef.value,
|
|
writeTodayChartRef.value,
|