|
|
|
|
@ -220,7 +220,7 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-row :gutter="16" class="home-section">
|
|
|
|
|
<el-col :xl="12" :lg="8" :md="24" :sm="24" :xs="24" class="mb-16px">
|
|
|
|
|
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-16px">
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="h-3 flex justify-between">
|
|
|
|
|
@ -244,10 +244,10 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="h-3 flex justify-between">
|
|
|
|
|
<span>设备分布统计</span>
|
|
|
|
|
<span>模具分类统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<Echart :options="deviceDistributionBarOptionsData" :height="260" />
|
|
|
|
|
<Echart :options="moldTypeBarOptionsData" :height="260" />
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -318,7 +318,6 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { set } from 'lodash-es'
|
|
|
|
|
import { EChartsOption } from 'echarts'
|
|
|
|
|
import { formatTime } from '@/utils'
|
|
|
|
|
import { useUserStore } from '@/store/modules/user'
|
|
|
|
|
import { useWatermark } from '@/hooks/web/useWatermark'
|
|
|
|
|
import type {
|
|
|
|
|
@ -326,20 +325,15 @@ import type {
|
|
|
|
|
Project,
|
|
|
|
|
Notice,
|
|
|
|
|
Shortcut,
|
|
|
|
|
ProductionOverview,
|
|
|
|
|
ProductionProgressItem,
|
|
|
|
|
DeviceOverview,
|
|
|
|
|
TodoTask,
|
|
|
|
|
DeviceOperationStatus
|
|
|
|
|
} from './types'
|
|
|
|
|
import {
|
|
|
|
|
pieOptions,
|
|
|
|
|
barOptions,
|
|
|
|
|
deviceCategoryPieOptions,
|
|
|
|
|
deviceDistributionBarOptions,
|
|
|
|
|
deviceOverviewMock,
|
|
|
|
|
} from './echarts-data'
|
|
|
|
|
import { HomeApi } from '@/api/home/info'
|
|
|
|
|
|
|
|
|
|
import { WeatherVO } from '@/api/home/info'
|
|
|
|
|
import bannerImg from '@/assets/imgs/banner.png'
|
|
|
|
|
import { DashboardApi,DashboardProductVO,DeviceStatusVO } from '@/api/dashboard'
|
|
|
|
|
@ -352,21 +346,10 @@ const { setWatermark } = useWatermark()
|
|
|
|
|
const loading = ref(true)
|
|
|
|
|
const avatar = userStore.getUser.avatar
|
|
|
|
|
const username = userStore.getUser.nickname
|
|
|
|
|
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const deviceCategoryPieOptionsData = reactive<EChartsOption>(
|
|
|
|
|
deviceCategoryPieOptions
|
|
|
|
|
) as EChartsOption
|
|
|
|
|
const deviceDistributionBarOptionsData = reactive<EChartsOption>(
|
|
|
|
|
deviceDistributionBarOptions
|
|
|
|
|
) as EChartsOption
|
|
|
|
|
|
|
|
|
|
const productionOverviewRange = ref<string[]>([])
|
|
|
|
|
const deviceOverview = ref<DeviceOverview>(deviceOverviewMock)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const formatPercent = (value: number | undefined | null) => {
|
|
|
|
|
if (value === null || value === undefined) return '0%'
|
|
|
|
|
@ -374,87 +357,14 @@ const formatPercent = (value: number | undefined | null) => {
|
|
|
|
|
return `${value}%`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const productionOverviewLeft = ref([])
|
|
|
|
|
const productionOverviewLeft = ref<{ key: string; label: string; value: number; }[]>([])
|
|
|
|
|
|
|
|
|
|
const productionOverviewCenter = ref([])
|
|
|
|
|
const productionOverviewCenter = ref<{ key: string; label: string; value: number; }[]>([])
|
|
|
|
|
|
|
|
|
|
const plan = ref<ProductionProgressItem[]>([])
|
|
|
|
|
|
|
|
|
|
const todo = ref<TodoTask[]>([])
|
|
|
|
|
|
|
|
|
|
// const productionOverviewRight = computed(() => [
|
|
|
|
|
// {
|
|
|
|
|
// key: 'attendanceCount',
|
|
|
|
|
// label: '出勤人数',
|
|
|
|
|
// value: productionOverview.value.onTimeRate ?? 0
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// key: 'attendanceRate',
|
|
|
|
|
// label: '出勤率',
|
|
|
|
|
// value: formatPercent(productionOverview.value.onTimeRate)
|
|
|
|
|
// }
|
|
|
|
|
// ])
|
|
|
|
|
|
|
|
|
|
const deviceOverviewTop = computed(() => [
|
|
|
|
|
{
|
|
|
|
|
key: 'deviceTotal',
|
|
|
|
|
label: '总设备数',
|
|
|
|
|
value: deviceOverview.value.deviceTotal?.toLocaleString()
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'realtimeAlarm',
|
|
|
|
|
label: '实时告警',
|
|
|
|
|
value: deviceOverview.value.needRepair ?? 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'running',
|
|
|
|
|
label: '运行',
|
|
|
|
|
value: deviceOverview.value.running ?? 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'stop',
|
|
|
|
|
label: '停机',
|
|
|
|
|
value: deviceOverview.value.stop ?? 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'standby',
|
|
|
|
|
label: '待机',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'utilization',
|
|
|
|
|
label: '利用率',
|
|
|
|
|
value: formatPercent(deviceOverview.value.utilization)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'faultRate',
|
|
|
|
|
label: '故障率',
|
|
|
|
|
value: formatPercent(deviceOverview.value.alarmRate)
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
const deviceOverviewBottom = computed(() => [
|
|
|
|
|
{
|
|
|
|
|
key: 'faultCount',
|
|
|
|
|
label: '设备故障台数',
|
|
|
|
|
value: deviceOverview.value.needRepair ?? 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'faultTime',
|
|
|
|
|
label: '设备故障时间',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'mtbf',
|
|
|
|
|
label: '平均故障间隔时间',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'mttr',
|
|
|
|
|
label: '平均故障时间',
|
|
|
|
|
value: 0
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
const groupBySize = <T,>(list: T[], size: number) => {
|
|
|
|
|
const result: T[][] = []
|
|
|
|
|
@ -492,15 +402,15 @@ const deviceRepairLineOptions = ref<EChartsOption>({
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: 40,
|
|
|
|
|
right: 20,
|
|
|
|
|
bottom: 30,
|
|
|
|
|
right: 30,
|
|
|
|
|
bottom: 50,
|
|
|
|
|
top: 60,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: ['一月', '二月', '三月', '四月', '五月', '六月']
|
|
|
|
|
data: []
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
@ -510,29 +420,96 @@ const deviceRepairLineOptions = ref<EChartsOption>({
|
|
|
|
|
name: '维修数量',
|
|
|
|
|
type: 'line',
|
|
|
|
|
smooth: true,
|
|
|
|
|
data: [3, 5, 4, 6, 8, 7]
|
|
|
|
|
// data: [3, 5, 4, 6, 8, 7]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
const deviceCategoryPieOptionsData = ref<EChartsOption>(
|
|
|
|
|
{title: {
|
|
|
|
|
text: '设备分类统计',
|
|
|
|
|
left: 'center'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
left: 'left'
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '设备类别',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: '55%',
|
|
|
|
|
center: ['50%', '60%'],
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const moldTypeBarOptionsData = ref<EChartsOption>({
|
|
|
|
|
title: {
|
|
|
|
|
text: '模具分类统计',
|
|
|
|
|
left: 'center'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: 40,
|
|
|
|
|
right: 20,
|
|
|
|
|
bottom: 30,
|
|
|
|
|
top: 60,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
// data: ['一车间', '二车间', '三车间', '四车间', '五车间'],
|
|
|
|
|
axisTick: {
|
|
|
|
|
alignWithLabel: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '模具数量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
// data: [10, 8, 6, 5, 4]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
|
|
/** 初始化 **/
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
// 加载
|
|
|
|
|
const data = await HomeApi.getWeatherInfo()
|
|
|
|
|
weatherEnable.value = data.isEnable
|
|
|
|
|
if (data.isEnable && weatherList) {
|
|
|
|
|
weatherList.value = data.casts
|
|
|
|
|
todayWeather.value = weatherList.value[0]
|
|
|
|
|
weatherCity = data.city
|
|
|
|
|
}
|
|
|
|
|
production.value = await DashboardApi.getProduction(productionOverviewRange.value)
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
// 加载
|
|
|
|
|
// const data = await HomeApi.getWeatherInfo()
|
|
|
|
|
// weatherEnable.value = data.isEnable
|
|
|
|
|
// if (data.isEnable && weatherList) {
|
|
|
|
|
// weatherList.value = data.casts
|
|
|
|
|
// todayWeather.value = weatherList.value[0]
|
|
|
|
|
// weatherCity = data.city
|
|
|
|
|
// }
|
|
|
|
|
production.value = await DashboardApi.getProduction(productionOverviewRange.value)
|
|
|
|
|
plan.value = await DashboardApi.getPlan()
|
|
|
|
|
deviceStatusCards.value = await DashboardApi.getDevice()
|
|
|
|
|
moldStatusCards.value = await DashboardApi.getMold()
|
|
|
|
|
todo.value = await DashboardApi.getTodoList()
|
|
|
|
|
formData.value = await DashboardApi.getDeviceOperationalStatus()
|
|
|
|
|
const Options = await DashboardApi.getDeviceRepairLineOptions()
|
|
|
|
|
deviceRepairLineOptions.value.xAxis.data = Options.xaxis
|
|
|
|
|
deviceRepairLineOptions.value.series[0].data = Options.series
|
|
|
|
|
deviceRepairLineOptions.value.xAxis!.data = Options.xaxis
|
|
|
|
|
deviceRepairLineOptions.value.series![0].data = Options.series
|
|
|
|
|
const deviceTypeOptions = await DashboardApi.getDeviceTypePieOptions()
|
|
|
|
|
deviceCategoryPieOptionsData.value.series![0].data = deviceTypeOptions
|
|
|
|
|
const moldTypeOptions = await DashboardApi.getMoldTypeBarOptions()
|
|
|
|
|
console.log(moldTypeOptions)
|
|
|
|
|
moldTypeBarOptionsData.value.xAxis!.data = moldTypeOptions.xaxis
|
|
|
|
|
moldTypeBarOptionsData.value.series![0].data = moldTypeOptions.series
|
|
|
|
|
productionOverviewLeft.value = production.value.taskItems
|
|
|
|
|
productionOverviewCenter.value = production.value.planItems
|
|
|
|
|
|
|
|
|
|
|
