407 lines
13 KiB
Vue
407 lines
13 KiB
Vue
<script setup lang="ts">
|
||
|
||
|
||
|
||
import HomeApi from "@/api/home.ts";
|
||
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
|
||
import type {ISystemInfoVo} from "@/interface/page/home/ISystemInfoVo.ts";
|
||
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
|
||
import {computed, onMounted, onUnmounted, ref} from "vue";
|
||
import {AlarmClock, Coin, Cpu, Location, Monitor, SetUp, Stopwatch, Tickets} from "@element-plus/icons-vue";
|
||
import type {ISystemEventVo} from "@/interface/page/home/ISystemEventVo.ts";
|
||
import MessageUtils from "@/utils/MessageUtils.ts";
|
||
import type {ISystemNotificationVo} from "@/interface/page/home/ISystemNotificationVo.ts";
|
||
import {useI18n} from "vue-i18n";
|
||
import ChartPie from "@/components/charts/ChartPie.vue";
|
||
import ChartBar from "@/components/charts/ChartBar.vue";
|
||
import type {IBarPieLineDataItem} from "@/model/charts/IBarPieLineDataItem.ts";
|
||
import ChartLine from "@/components/charts/ChartLine.vue";
|
||
import type {IMultilineLineDataItem} from "@/model/charts/IMultilineLineDataItem.ts";
|
||
|
||
const { t } = useI18n();
|
||
const props = defineProps(['isFull']);
|
||
const isFull = computed(() => {
|
||
return props.isFull ?? false;
|
||
});
|
||
|
||
let interval: number | undefined = undefined;
|
||
let eventSource: EventSource | undefined = undefined;
|
||
const systemInfo = ref<ISystemInfoVo>();
|
||
const eventInfo = ref<ISystemEventVo[]>([{
|
||
eventTime: '-',
|
||
eventMsg: '欢迎使用仓库控制系统'
|
||
}]); // 事件日志显示
|
||
|
||
const queryData = () => {
|
||
querySystemInfo(); // 查询系统信息
|
||
queryStockUsage(); // 查询库存使用率
|
||
queryStockInOut(); // 获取今日出入库数量
|
||
queryStockErrorDay7(); // 查询近七天设备故障数量
|
||
queryStockInOutDay7(); // 获取近七天出入库数量
|
||
};
|
||
|
||
// 查询系统信息
|
||
const querySystemInfo = () => {
|
||
HomeApi.queryServeData().then(res => {
|
||
const stringify = JSON.stringify(res.data);
|
||
const response = JSON.parse(stringify) as AppServeDataResponse<ISystemInfoVo>;
|
||
if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
|
||
systemInfo.value = response.data;
|
||
return;
|
||
}
|
||
console.log(res);
|
||
}).catch(() => {});
|
||
};
|
||
|
||
// 查询库存占用率
|
||
const queryStockUsage = () => {
|
||
HomeApi.queryStockOccupancyRate().then(res => {
|
||
const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBarPieLineDataItem[]>;
|
||
if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
|
||
setStockUsageChartOptionData(response.data);
|
||
return;
|
||
}
|
||
console.log(res);
|
||
}).catch(() => {});
|
||
};
|
||
|
||
// 查询库存出入库数量
|
||
const queryStockInOut = () => {
|
||
HomeApi.queryTodayInOutStock().then(res => {
|
||
const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBarPieLineDataItem[]>;
|
||
if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
|
||
setTodayStockInOutChartOptionData(response.data);
|
||
return;
|
||
}
|
||
console.log(res);
|
||
}).catch(() => {});
|
||
};
|
||
|
||
// 查询七日设备故障数量
|
||
const queryStockErrorDay7 = () => {
|
||
HomeApi.querySevenDaysDeviceFailure().then(res => {
|
||
const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IBarPieLineDataItem[]>;
|
||
if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
|
||
setStockErrorLineChartOptionData(response.data);
|
||
return;
|
||
}
|
||
console.log(res);
|
||
}).catch(() => {});
|
||
};
|
||
|
||
// 查询近七日出入库数量
|
||
const queryStockInOutDay7 = () => {
|
||
HomeApi.querySevenDaysInOutStock().then(res => {
|
||
const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IMultilineLineDataItem>;
|
||
if(response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
|
||
setStockInOutLineChartOptionData(response.data);
|
||
return;
|
||
}
|
||
console.log(res);
|
||
}).catch(() => {});
|
||
}
|
||
|
||
|
||
// 创建连接 --- 已经弃用
|
||
const createConnect = () => {
|
||
if(eventSource) {
|
||
eventSource.close();
|
||
}
|
||
eventSource = HomeApi.createNoticeConnect();
|
||
eventSource.onmessage = (event) => {
|
||
console.log('SSE接收到数据：' + event.data);
|
||
};
|
||
eventSource.onopen = () => {
|
||
console.log('SSE连接成功');
|
||
};
|
||
eventSource.onerror = () => {
|
||
console.log('SSE连接失败或者断开连接');
|
||
};
|
||
eventSource.addEventListener('RUNNING_INFO', (event) => {
|
||
const response = JSON.parse(event.data) as ISystemEventVo;
|
||
if(eventInfo.value.length > 500) {
|
||
eventInfo.value.pop();
|
||
}
|
||
eventInfo.value.unshift({
|
||
eventTime: response.eventTime ?? '-',
|
||
eventMsg: response.eventMsg ?? '-'
|
||
});
|
||
});
|
||
eventSource.addEventListener('SYSTEM_INFO', (event) => {
|
||
const response = JSON.parse(event.data) as ISystemNotificationVo;
|
||
MessageUtils.showNotification(response.title ?? '-', response.message ?? '-', response.type ?? 'info', response.duration ?? 3000);
|
||
});
|
||
}
|
||
|
||
|
||
onMounted(() => {
|
||
queryData();
|
||
interval = setInterval(() => {
|
||
queryData();
|
||
}, 3000);
|
||
//createConnect(); // 创建SSE连接
|
||
console.log('主页组件已经挂载');
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if(interval) {
|
||
clearInterval(interval);
|
||
}
|
||
// eventSource?.close();
|
||
});
|
||
|
||
// 设置仓库利用率饼图数据
|
||
const setStockUsageChartOptionData = (data: IBarPieLineDataItem[]) => {
|
||
stockUsageChartOption.value.series[0].data = data;
|
||
};
|
||
// 设置今日出入库数量柱状图数据
|
||
const setTodayStockInOutChartOptionData = (data: IBarPieLineDataItem[]) => {
|
||
let xName = [];
|
||
let yData = [];
|
||
for (let i = 0; i < data.length; i++) {
|
||
xName.push(data[i].name);
|
||
yData.push(data[i].value);
|
||
}
|
||
stockInOutChartOption.value.xAxis.data = xName;
|
||
stockInOutChartOption.value.series[0].data = yData;
|
||
};
|
||
// 设置近七日设备故障折线图数据
|
||
const setStockErrorLineChartOptionData = (data: IBarPieLineDataItem[]) => {
|
||
let xName = [];
|
||
let yData = [];
|
||
for (let i = 0; i < data.length; i++) {
|
||
xName.push(data[i].name);
|
||
yData.push(data[i].value);
|
||
}
|
||
stockErrorLineChartOption.value.xAxis.data = xName.reverse();
|
||
stockErrorLineChartOption.value.series[0].data = yData.reverse();
|
||
};
|
||
// 设置近七天出入库数量折线图数据
|
||
const setStockInOutLineChartOptionData = (data: IMultilineLineDataItem) => {
|
||
let xName = [];
|
||
for (let i = 0; i < data.xDataList.length; i++) {
|
||
xName.push(data.xDataList[i]);
|
||
}
|
||
const yDataList = data.yDataList;
|
||
let yData = [];
|
||
for (let i = 0; i < yDataList.length; i++) {
|
||
const item = {
|
||
name: yDataList[i].name,
|
||
data: yDataList[i].data.reverse(),
|
||
type: 'line',
|
||
smooth: true,
|
||
};
|
||
yData.push(item);
|
||
}
|
||
stockInOutLineChartOptionDays7.value.xAxis.data = xName.reverse();
|
||
stockInOutLineChartOptionDays7.value.series = yData;
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// 仓库使用率配置
|
||
const stockUsageChartOption = ref({
|
||
title: {
|
||
text: '仓库使用率',
|
||
textStyle: {fontSize: 12}
|
||
},
|
||
color: ['#67c817', '#f5a407'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/> {b}: {c} ({d}%)'
|
||
},
|
||
legend: {orient: 'vertical', left: 'left'},
|
||
label: {
|
||
show: true,
|
||
formatter: '{b} \n{d}%'
|
||
},
|
||
series: [
|
||
{
|
||
name: '仓库使用率', type: 'pie', radius: '50%',
|
||
labelLine: {
|
||
length: 5, // 第一段指示线长度
|
||
length2: 8 // 第二段指示线长度
|
||
},
|
||
data: [
|
||
{name: '占用', value: 1000 },
|
||
{name: '空闲', value: 800 },
|
||
]
|
||
}
|
||
]
|
||
});
|
||
// 今日出入库数量柱状图配置
|
||
const stockInOutChartOption = ref({
|
||
title: {
|
||
text: '今日出入库数量',
|
||
textStyle: {fontSize: 12}
|
||
},
|
||
tooltip: {trigger: 'item'},
|
||
legend: {orient: 'vertical', left: 'left'},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['入库', '出库', "移库"]
|
||
},
|
||
yAxis: {type: 'value'},
|
||
series: [
|
||
{
|
||
data: [1000, 800, 400],
|
||
type: 'bar'
|
||
}
|
||
]
|
||
});
|
||
// 近七日设备故障折线图配置
|
||
const stockErrorLineChartOption = ref({
|
||
title: {
|
||
text: '近七日设备故障数量折线图',
|
||
textStyle: {fontSize: 12}
|
||
},
|
||
tooltip: {formatter: '({b}) {c}'},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {type: 'value'},
|
||
series: [
|
||
{
|
||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
type: 'line',
|
||
smooth: true
|
||
}
|
||
]
|
||
});
|
||
// 七日出入库数量
|
||
const stockInOutLineChartOptionDays7 = ref({
|
||
title: {
|
||
text: '近七日出入库数量折线图',
|
||
textStyle: {fontSize: 12}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {orient: 'horizontal', left: 'left'},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']
|
||
},
|
||
yAxis: {type: 'value'},
|
||
series: [
|
||
{
|
||
data: [82, 93, 90, 93, 129, 133, 132],
|
||
type: 'line',
|
||
smooth: true,
|
||
name: '入库数量'
|
||
},
|
||
{
|
||
data: [92, 69, 70, 102, 89, 120, 170],
|
||
type: 'line',
|
||
smooth: true,
|
||
name: '出库数量'
|
||
},
|
||
{
|
||
data: [24, 12, 13, 32, 11, 21, 32],
|
||
type: 'line',
|
||
smooth: true,
|
||
name: '移库数量'
|
||
}
|
||
]
|
||
});
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div :style="{marginLeft: '10px',marginTop: '10px', width: isFull ? 'calc(100vw - 20px)' : 'calc(100vw - 280px)' }">
|
||
<!-- 系统基本资料-->
|
||
<el-card style="margin-top: 10px">
|
||
<el-descriptions class="margin-top" :column="3" size="default" border>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><AlarmClock /></el-icon>{{ t('mainPage.systemRunningTime') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.systemRunningTime ?? "-"}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Cpu /></el-icon>{{ t('mainPage.cpuUsage') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.cpuData?.totalUseRatio ?? "-"}}%
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Coin /></el-icon>{{ t('mainPage.memoryUsageSize') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.memoryData?.used ?? "-"}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Stopwatch /></el-icon>{{ t('mainPage.memoryUsage') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.memoryData?.usage ?? "-"}}%
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Monitor /></el-icon>{{ t('mainPage.serverName') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.serveData?.serveName ?? "-"}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Tickets /></el-icon>{{ t('mainPage.serverSystemName') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.serveData?.systemName ?? "-"}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><Location /></el-icon>{{ t('mainPage.serverIp') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.serveData?.serveIp ?? "-"}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item"><el-icon style="translate: 0 2px; margin-right: 5px"><SetUp /></el-icon>{{ t('mainPage.serverSystemVersion') + ':'}}</div>
|
||
</template>
|
||
{{systemInfo?.serveData?.systemVersion ?? "-"}}
|
||
</el-descriptions-item>
|
||
|
||
</el-descriptions>
|
||
</el-card>
|
||
<el-card style="margin-top: 10px;">
|
||
<el-scrollbar>
|
||
<el-row style="width: calc(100vw - 330px)">
|
||
<el-col :span="6">
|
||
<el-scrollbar>
|
||
<ChartPie style="width: 300px; height: calc(300px - 40px)" :option="stockUsageChartOption" />
|
||
</el-scrollbar>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-scrollbar>
|
||
<ChartBar style="width: 300px; height: calc(300px - 40px)" :option="stockInOutChartOption" />
|
||
</el-scrollbar>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-scrollbar>
|
||
<ChartLine :key="1" style="width: 350px; height: calc(300px - 40px)" :option="stockErrorLineChartOption" />
|
||
</el-scrollbar>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-scrollbar>
|
||
<ChartLine :key="2" style="width: 300px; height: calc(300px - 40px)" :option="stockInOutLineChartOptionDays7" />
|
||
</el-scrollbar>
|
||
</el-col>
|
||
</el-row>
|
||
</el-scrollbar>
|
||
</el-card>
|
||
<!-- <el-card style="margin-top: 10px; height: calc(100vh - 200px)">-->
|
||
<!-- <el-table :data="eventInfo" stripe border style="width: 100%" height="calc(100vh - 240px)">-->
|
||
<!-- <el-table-column prop="eventTime" label="时间" width="180" align="center"/>-->
|
||
<!-- <el-table-column prop="eventMsg" label="内容" show-overflow-tooltip/>-->
|
||
<!-- </el-table>-->
|
||
<!-- </el-card>-->
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style> |