Compare commits

...

2 Commits

Author SHA1 Message Date
kkk-ops 27442f1813 merge 1 week ago
kkk-ops a1707684f1 首页 1 week ago

@ -30,6 +30,18 @@ getPlan: async () => {
getDevice: async () => {
return await request.get({ url: `/mes/dashboard/getDevice` })
},
getMold: async () => {
return await request.get({ url: `/mes/dashboard/getMold` })
},
getTodoList: async () => {
return await request.get({ url: `/mes/dashboard/getTodoList` })
},
getDeviceOperationalStatus: async () => {
return await request.get({ url: `/iot/device/getDeviceOperationalStatus` })
},
getDeviceRepairLineOptions: async () => {
return await request.get({ url: `/mes/dashboard/getDeviceRepairLineOptions` })
},
}

@ -119,10 +119,10 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
<el-col v-for="item in group" :key="item.id" :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<div class="todo-card">
<div class="todo-title">{{ item.name }}</div>
<div class="todo-sub">任务编号{{ item.id }}</div>
<div class="todo-sub">任务类型{{ item.type }}优先级{{ item.priority }}</div>
<div class="todo-sub">计划时间{{ item.planTime }}</div>
<div class="todo-sub">责任部门{{ item.owner }}</div>
<div class="todo-sub">任务编号{{ item.code }}</div>
<div class="todo-sub">任务类型{{ item.type }}</div>
<div class="todo-sub">目标{{ item.deviceName }}</div>
<div class="todo-sub">创建时间{{ formatDate(item.createTime) }}</div>
</div>
</el-col>
</el-row>
@ -155,7 +155,7 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
<div class="section-title">模具</div>
</div>
<el-row :gutter="12" class="mt-16px">
<el-col v-for="item in alarmStatusCards" :key="item.key" :span="8">
<el-col v-for="item in moldStatusCards" :key="item.key" :span="8">
<div class="mini-card" :class="item.level">
<div class="mini-label">{{ item.label }}</div>
<div class="mini-value">{{ item.value }}</div>
@ -174,30 +174,60 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
</div> -->
</div>
<el-row class="device-overview-row" :gutter="0">
<el-col v-for="item in deviceOverviewTop" :key="item.key" :span="2">
<el-row class="device-overview-row" :gutter="0" v-model = "formData">
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">{{ item.label }}</div>
<div class="production-overview-value production-overview-value-primary">{{ item.value }}</div>
<div class="production-overview-label">总设备数</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.totalDevices }}</div>
</div>
</el-col>
<el-col v-for="item in deviceOverviewBottom" :key="item.key" :span="2">
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">{{ item.label }}</div>
<div class="production-overview-value production-overview-value-primary">{{ item.value }}</div>
<div class="production-overview-label">运行</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.runningCount }}</div>
</div>
</el-col>
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">待机中</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.standbyCount }}</div>
</div>
</el-col>
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">故障中</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.faultCount }}</div>
</div>
</el-col>
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">报警中</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.warningCount }}</div>
</div>
</el-col>
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">利用率</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.utilizationRate }}</div>
</div>
</el-col>
<el-col :span="2">
<div class="device-overview-item">
<div class="production-overview-label">故障率</div>
<div class="production-overview-value production-overview-value-primary">{{ formData?.faultRate }}</div>
</div>
</el-col>
</el-row>
</el-card>
<el-row :gutter="16" class="home-section">
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-16px">
<el-col :xl="12" :lg="8" :md="24" :sm="24" :xs="24" class="mb-16px">
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>设备维修数量统计</span>
</div>
</template>
<Echart :options="deviceRepairLineOptionsData" :height="260" />
<Echart :options="deviceRepairLineOptions" :height="260" />
</el-card>
</el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-16px">
@ -298,23 +328,16 @@ import type {
Shortcut,
ProductionOverview,
ProductionProgressItem,
DeviceStatusSummary,
AlarmStatusSummary,
DeviceOverview,
TodoTask
TodoTask,
DeviceOperationStatus
} from './types'
import {
pieOptions,
barOptions,
deviceRepairLineOptions,
deviceCategoryPieOptions,
deviceDistributionBarOptions,
productionOverviewMock,
productionProgressMock,
deviceStatusMock,
alarmStatusMock,
deviceOverviewMock,
todoTasksMock
} from './echarts-data'
import { HomeApi } from '@/api/home/info'
import { WeatherVO } from '@/api/home/info'
@ -330,28 +353,21 @@ const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const deviceRepairLineOptionsData = reactive<EChartsOption>(
deviceRepairLineOptions
) as EChartsOption
const deviceCategoryPieOptionsData = reactive<EChartsOption>(
deviceCategoryPieOptions
) as EChartsOption
const deviceDistributionBarOptionsData = reactive<EChartsOption>(
deviceDistributionBarOptions
) as EChartsOption
const productionOverview = ref<ProductionOverview>(productionOverviewMock)
const productionOverviewRange = ref<string[]>([])
const deviceOverview = ref<DeviceOverview>(deviceOverviewMock)
const deviceOverviewRange = ref<string[]>([])
const productionProgressTab = ref('all')
const productionProgressList = ref<ProductionProgressItem[]>()
const todoTaskList = ref<TodoTask[]>(todoTasksMock)
const deviceStatus = ref<DeviceStatusSummary>(deviceStatusMock)
const alarmStatus = ref<AlarmStatusSummary>(alarmStatusMock)
const filteredProductionProgressList = computed(() => {
return productionProgressList.value
})
const formatPercent = (value: number | undefined | null) => {
if (value === null || value === undefined) return '0%'
if (Number.isNaN(value)) return '0%'
@ -364,6 +380,8 @@ const productionOverviewCenter = ref([])
const plan = ref<ProductionProgressItem[]>([])
const todo = ref<TodoTask[]>([])
// const productionOverviewRight = computed(() => [
// {
// key: 'attendanceCount',
@ -437,46 +455,7 @@ const deviceOverviewBottom = computed(() => [
value: 0
}
])
// const deviceStatusCards = computed(() => [
// {
// key: 'inactive',
// label: '',
// value: deviceStatus.value.inactive,
// level: 'mini-danger'
// },
// {
// key: 'active',
// label: '',
// value: deviceStatus.value.active,
// level: 'mini-normal'
// },
// {
// key: 'total',
// label: '',
// value: deviceStatus.value.total,
// level: 'mini-total'
// }
// ])
const alarmStatusCards = computed(() => [
{
key: 'serious',
label: '严重',
value: alarmStatus.value.serious,
level: 'mini-danger'
},
{
key: 'assignedToMe',
label: '分配给我',
value: alarmStatus.value.assignedToMe,
level: 'mini-normal'
},
{
key: 'total',
label: '总数',
value: alarmStatus.value.total,
level: 'mini-total'
}
])
const groupBySize = <T,>(list: T[], size: number) => {
const result: T[][] = []
for (let i = 0; i < list.length; i += size) {
@ -485,7 +464,7 @@ const groupBySize = <T,>(list: T[], size: number) => {
return result
}
const todoTaskGroups = computed(() => groupBySize(todoTaskList.value, 4))
//
let totalSate = reactive<WorkplaceTotal>({
project: 0,
@ -499,7 +478,42 @@ const todayWeather = ref({} as WeatherVO)
let weatherCity = ""
const production = ref({} as DashboardProductVO)
const productionProgressGroups = computed(() => groupBySize(plan.value, 3))
const todoTaskGroups = computed(() => groupBySize(todo.value, 4))
const deviceStatusCards = ref<DeviceStatusVO[]>([])
const moldStatusCards = ref<DeviceStatusVO[]>([])
const formData = ref<DeviceOperationStatus>()
const deviceRepairLineOptions = ref<EChartsOption>({
title: {
text: '设备维修数量统计',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: 40,
right: 20,
bottom: 30,
top: 60,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '维修数量',
type: 'line',
smooth: true,
data: [3, 5, 4, 6, 8, 7]
}
]
})
/** 初始化 **/
onMounted(async () => {
//
@ -513,6 +527,12 @@ onMounted(async () => {
production.value = await DashboardApi.getProduction(productionOverviewRange)
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
productionOverviewLeft.value = production.value.taskItems
productionOverviewCenter.value = production.value.planItems
@ -521,8 +541,10 @@ onMounted(async () => {
const getPlanStatusLabel = (value: any) => {
const v = value === '' || value === null || value === undefined ? undefined : String(value)
if (v == '1') return '已排产'
if (v == '2') return '试产'
if (v == '3') return '量产'
if (v == '6') return '试产'
if (v == '2') return '量产'
if (v == '3') return '暂停'
if (v == '4') return '待入库'
return '-'
}
const getPlanStatusTagType = (value: any) => {

@ -106,8 +106,19 @@ export type DeviceOverview = {
export type TodoTask = {
id: string
name: string
code: string
type: string
priority: string
planTime: string
owner: string
deviceName: string
createTime: Date
}
export type DeviceOperationStatus = {
totalDevices: number
runningCount: number
standbyCount: number
faultCount: number
warningCount: number
utilizationRate: number
faultRate: number
}

Loading…
Cancel
Save