|
|
|
@ -2,9 +2,9 @@
|
|
|
|
<div class="home-page">
|
|
|
|
<div class="home-page">
|
|
|
|
<div class="home-welcome">
|
|
|
|
<div class="home-welcome">
|
|
|
|
<div class="home-welcome-left">
|
|
|
|
<div class="home-welcome-left">
|
|
|
|
<div class="home-welcome-title text-white!">欢迎使用您的云上数字工厂</div>
|
|
|
|
<div class="home-welcome-title text-white!">欢迎您使用必硕数字化智能中控平台</div>
|
|
|
|
<div class="home-welcome-desc text-white! opacity-80">
|
|
|
|
<div class="home-welcome-desc text-white! opacity-80">
|
|
|
|
云上数字工厂可以整合您工厂所有设备、自动化、信息化的教据,帮助您对工厂和生产进行建模管理,统一主教报及应用集成,打造您工厂的教字中心和业务中心,并且与产业链相关系统协同,不断提升您的智能制造能力。
|
|
|
|
必硕数字化智能中控平台以生产运营为核心,统一整合生产计划、数据采集、仓储、设备、能源、模具、质量、配方及报表分析等关键业务模块,实现从计划到执行、从设备到制品、从数据到决策的全流程数字化管理。
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="home-welcome-right">
|
|
|
|
<div class="home-welcome-right">
|
|
|
|
@ -35,12 +35,12 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
|
|
|
|
<div class="production-overview-value production-overview-value-primary">{{ item.value }}</div>
|
|
|
|
<div class="production-overview-value production-overview-value-primary">{{ item.value }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="4" class="production-overview-group production-overview-group-right">
|
|
|
|
<!-- <el-col :span="4" class="production-overview-group production-overview-group-right">
|
|
|
|
<div v-for="item in productionOverviewRight" :key="item.key" class="production-overview-item">
|
|
|
|
<div v-for="item in productionOverviewRight" :key="item.key" class="production-overview-item">
|
|
|
|
<div class="production-overview-label">{{ item.label }}</div>
|
|
|
|
<div class="production-overview-label">{{ item.label }}</div>
|
|
|
|
<div class="production-overview-value">{{ item.value }}</div>
|
|
|
|
<div class="production-overview-value">{{ item.value }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col> -->
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="home-section">
|
|
|
|
<el-card shadow="never" class="home-section">
|
|
|
|
@ -50,9 +50,13 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
|
|
|
|
<el-carousel height="190px" arrow="always" indicator-position="none" :interval="15000" class="progress-carousel">
|
|
|
|
<el-carousel height="190px" arrow="always" indicator-position="none" :interval="15000" class="progress-carousel">
|
|
|
|
<el-carousel-item v-for="(group, index) in productionProgressGroups" :key="index">
|
|
|
|
<el-carousel-item v-for="(group, index) in productionProgressGroups" :key="index">
|
|
|
|
<el-row :gutter="16">
|
|
|
|
<el-row :gutter="16">
|
|
|
|
<el-col v-for="item in group" :key="item.id" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
|
|
|
|
<el-col v-for="item in group" :key="item.id" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
|
|
|
|
<div class="progress-card">
|
|
|
|
<div class="progress-card">
|
|
|
|
<div class="progress-card-header">生产工单 {{ item.orderNo }}</div>
|
|
|
|
<div class="progress-card-header">生产计划 {{ item.code }}
|
|
|
|
|
|
|
|
<el-tag :type="getPlanStatusTagType(item.status)" effect="light">
|
|
|
|
|
|
|
|
{{ getPlanStatusLabel(item.status) }}
|
|
|
|
|
|
|
|
</el-tag>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="progress-card-body">
|
|
|
|
<div class="progress-card-body">
|
|
|
|
<div class="progress-col">
|
|
|
|
<div class="progress-col">
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
@ -60,46 +64,66 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
|
|
|
|
<span class="progress-value">{{ item.productName }}</span>
|
|
|
|
<span class="progress-value">{{ item.productName }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">任务数量</span>
|
|
|
|
<span class="progress-label">计划数量</span>
|
|
|
|
<span class="progress-value">-</span>
|
|
|
|
<span class="progress-value">{{ item.planNumber }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">客户简称</span>
|
|
|
|
<span class="progress-label">生产线</span>
|
|
|
|
<span class="progress-value">-</span>
|
|
|
|
<span class="progress-value">{{ item.feedingPipelineName }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">交货时间</span>
|
|
|
|
<span class="progress-label">计划开始时间</span>
|
|
|
|
<span class="progress-value">{{ item.planEndTime }}</span>
|
|
|
|
<span class="progress-value">{{ formatDate(item.planStartTime) }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">投产时间</span>
|
|
|
|
<span class="progress-label">计划结束时间</span>
|
|
|
|
<span class="progress-value">{{ item.planStartTime }}</span>
|
|
|
|
<span class="progress-value">{{ formatDate(item.planEndTime) }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-col">
|
|
|
|
<div class="progress-col">
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">产品型号</span>
|
|
|
|
<span class="progress-label">完工数量</span>
|
|
|
|
<span class="progress-value">-</span>
|
|
|
|
<span class="progress-value">{{ item.wangongNumber }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">完成数量</span>
|
|
|
|
<span class="progress-label">合格数量</span>
|
|
|
|
<span class="progress-value">-</span>
|
|
|
|
<span class="progress-value">{{ item.passNumber }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">完成进度</span>
|
|
|
|
<span class="progress-label">不合格数量</span>
|
|
|
|
<span class="progress-value">{{ item.completeRate }}%</span>
|
|
|
|
<span class="progress-value">{{ item.noPassNumber }}%</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">工单状态</span>
|
|
|
|
<span class="progress-label">合格率</span>
|
|
|
|
<span class="progress-value">{{ item.statusText }}</span>
|
|
|
|
<span class="progress-value">{{ item.passRate }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-row">
|
|
|
|
<div class="progress-row">
|
|
|
|
<span class="progress-label">完工时间</span>
|
|
|
|
<span class="progress-label">实际结束时间</span>
|
|
|
|
<span class="progress-value">-</span>
|
|
|
|
<span class="progress-value">{{ formatDate(item.endTime) }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
</el-carousel-item>
|
|
|
|
|
|
|
|
</el-carousel>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
<el-card shadow="never" class="home-section">
|
|
|
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
|
|
|
<div class="section-title">待办任务</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-carousel height="160px" arrow="always" indicator-position="none" class="todo-carousel" :interval="15000">
|
|
|
|
|
|
|
|
<el-carousel-item v-for="(group, index) in todoTaskGroups" :key="index">
|
|
|
|
|
|
|
|
<el-row :gutter="16">
|
|
|
|
|
|
|
|
<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>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
</el-carousel-item>
|
|
|
|
</el-carousel-item>
|
|
|
|
@ -110,10 +134,10 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
|
|
|
|
<el-card shadow="never" class="device-alarm-card">
|
|
|
|
<el-card shadow="never" class="device-alarm-card">
|
|
|
|
<div class="section-header">
|
|
|
|
<div class="section-header">
|
|
|
|
<div class="section-title">设备</div>
|
|
|
|
<div class="section-title">设备</div>
|
|
|
|
<div class="section-actions">
|
|
|
|
<!-- <div class="section-actions">
|
|
|
|
<el-button type="default" size="small">查看文档</el-button>
|
|
|
|
<el-button type="default" size="small">查看文档</el-button>
|
|
|
|
<el-button type="primary" size="small">添加设备</el-button>
|
|
|
|
<el-button type="primary" size="small">添加设备</el-button>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-row :gutter="12" class="mt-16px">
|
|
|
|
<el-row :gutter="12" class="mt-16px">
|
|
|
|
<el-col v-for="item in deviceStatusCards" :key="item.key" :span="8">
|
|
|
|
<el-col v-for="item in deviceStatusCards" :key="item.key" :span="8">
|
|
|
|
@ -128,7 +152,7 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
|
|
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="device-alarm-col mt-16px xl:mt-0 lg:mt-0">
|
|
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="device-alarm-col mt-16px xl:mt-0 lg:mt-0">
|
|
|
|
<el-card shadow="never" class="device-alarm-card">
|
|
|
|
<el-card shadow="never" class="device-alarm-card">
|
|
|
|
<div class="section-header">
|
|
|
|
<div class="section-header">
|
|
|
|
<div class="section-title">告警</div>
|
|
|
|
<div class="section-title">模具</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-row :gutter="12" class="mt-16px">
|
|
|
|
<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 alarmStatusCards" :key="item.key" :span="8">
|
|
|
|
@ -143,12 +167,12 @@ v-model="productionOverviewRange" type="daterange" unlink-panels value-format="Y
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-card shadow="never" class="home-section">
|
|
|
|
<el-card shadow="never" class="home-section">
|
|
|
|
<div class="section-header">
|
|
|
|
<div class="section-header">
|
|
|
|
<div class="section-title">设备整体情况</div>
|
|
|
|
<div class="section-title">采集设备整体情况</div>
|
|
|
|
<div>
|
|
|
|
<!-- <div>
|
|
|
|
<el-date-picker
|
|
|
|
<el-date-picker
|
|
|
|
v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-MM-DD"
|
|
|
|
v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-MM-DD"
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-row class="device-overview-row" :gutter="0">
|
|
|
|
<el-row class="device-overview-row" :gutter="0">
|
|
|
|
<el-col v-for="item in deviceOverviewTop" :key="item.key" :span="2">
|
|
|
|
<el-col v-for="item in deviceOverviewTop" :key="item.key" :span="2">
|
|
|
|
@ -165,26 +189,6 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="home-section">
|
|
|
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
|
|
|
<div class="section-title">待办任务</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-carousel height="160px" arrow="always" indicator-position="none" class="todo-carousel" :interval="15000">
|
|
|
|
|
|
|
|
<el-carousel-item v-for="(group, index) in todoTaskGroups" :key="index">
|
|
|
|
|
|
|
|
<el-row :gutter="16">
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
</el-carousel-item>
|
|
|
|
|
|
|
|
</el-carousel>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
<el-row :gutter="16" class="home-section">
|
|
|
|
<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="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-16px">
|
|
|
|
<el-card shadow="never">
|
|
|
|
<el-card shadow="never">
|
|
|
|
@ -217,7 +221,7 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" class="home-section" justify="space-between">
|
|
|
|
<!-- <el-row :gutter="16" class="home-section" justify="space-between">
|
|
|
|
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-16px">
|
|
|
|
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-16px">
|
|
|
|
<el-card shadow="never">
|
|
|
|
<el-card shadow="never">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
@ -227,8 +231,8 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<Echart :options="barOptionsData" :height="260" />
|
|
|
|
<Echart :options="barOptionsData" :height="260" />
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col> -->
|
|
|
|
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
|
|
|
|
<!-- <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
|
|
|
|
<el-card shadow="never" class="mb-16px">
|
|
|
|
<el-card shadow="never" class="mb-16px">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
<div class="h-3 flex justify-between">
|
|
|
|
<div class="h-3 flex justify-between">
|
|
|
|
@ -276,8 +280,8 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-skeleton>
|
|
|
|
</el-skeleton>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col> -->
|
|
|
|
</el-row>
|
|
|
|
<!-- </el-row> -->
|
|
|
|
<!-- 旧首页布局保留,已通过新模块替代展示 -->
|
|
|
|
<!-- 旧首页布局保留,已通过新模块替代展示 -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -315,7 +319,8 @@ import {
|
|
|
|
import { HomeApi } from '@/api/home/info'
|
|
|
|
import { HomeApi } from '@/api/home/info'
|
|
|
|
import { WeatherVO } from '@/api/home/info'
|
|
|
|
import { WeatherVO } from '@/api/home/info'
|
|
|
|
import bannerImg from '@/assets/imgs/banner.png'
|
|
|
|
import bannerImg from '@/assets/imgs/banner.png'
|
|
|
|
|
|
|
|
import { DashboardApi,DashboardProductVO,DeviceStatusVO } from '@/api/dashboard'
|
|
|
|
|
|
|
|
import { formatDate } from '@/utils/formatTime'
|
|
|
|
defineOptions({ name: 'Home' })
|
|
|
|
defineOptions({ name: 'Home' })
|
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
const { t } = useI18n()
|
|
|
|
@ -339,7 +344,8 @@ const productionOverviewRange = ref<string[]>([])
|
|
|
|
const deviceOverview = ref<DeviceOverview>(deviceOverviewMock)
|
|
|
|
const deviceOverview = ref<DeviceOverview>(deviceOverviewMock)
|
|
|
|
const deviceOverviewRange = ref<string[]>([])
|
|
|
|
const deviceOverviewRange = ref<string[]>([])
|
|
|
|
const productionProgressTab = ref('all')
|
|
|
|
const productionProgressTab = ref('all')
|
|
|
|
const productionProgressList = ref<ProductionProgressItem[]>(productionProgressMock)
|
|
|
|
const productionProgressList = ref<ProductionProgressItem[]>()
|
|
|
|
|
|
|
|
|
|
|
|
const todoTaskList = ref<TodoTask[]>(todoTasksMock)
|
|
|
|
const todoTaskList = ref<TodoTask[]>(todoTasksMock)
|
|
|
|
const deviceStatus = ref<DeviceStatusSummary>(deviceStatusMock)
|
|
|
|
const deviceStatus = ref<DeviceStatusSummary>(deviceStatusMock)
|
|
|
|
const alarmStatus = ref<AlarmStatusSummary>(alarmStatusMock)
|
|
|
|
const alarmStatus = ref<AlarmStatusSummary>(alarmStatusMock)
|
|
|
|
@ -352,64 +358,24 @@ const formatPercent = (value: number | undefined | null) => {
|
|
|
|
return `${value}%`
|
|
|
|
return `${value}%`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const productionOverviewLeft = computed(() => [
|
|
|
|
const productionOverviewLeft = ref([])
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'orderCount',
|
|
|
|
|
|
|
|
label: '生产订单数',
|
|
|
|
|
|
|
|
value: productionOverview.value.orderCount
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'runningOrderCount',
|
|
|
|
|
|
|
|
label: '生产工单数',
|
|
|
|
|
|
|
|
value: productionOverview.value.runningOrderCount
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'startedOrderCount',
|
|
|
|
|
|
|
|
label: '开工工单数',
|
|
|
|
|
|
|
|
value: productionOverview.value.startedOrderCount
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'shutdownOrderCount',
|
|
|
|
|
|
|
|
label: '完工工单数',
|
|
|
|
|
|
|
|
value: productionOverview.value.shutdownOrderCount
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const productionOverviewCenter = computed(() => [
|
|
|
|
const productionOverviewCenter = ref([])
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'plannedOutput',
|
|
|
|
|
|
|
|
label: '计划生产数量',
|
|
|
|
|
|
|
|
value: productionOverview.value.plannedOutput?.toLocaleString()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'completedOutput',
|
|
|
|
|
|
|
|
label: '完成生产数量',
|
|
|
|
|
|
|
|
value: productionOverview.value.completedOutput?.toLocaleString()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'completionRate',
|
|
|
|
|
|
|
|
label: '完工率',
|
|
|
|
|
|
|
|
value: formatPercent(productionOverview.value.qualifiedRate)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'qualifiedRate',
|
|
|
|
|
|
|
|
label: '合格率',
|
|
|
|
|
|
|
|
value: formatPercent(productionOverview.value.alarmRate)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const productionOverviewRight = computed(() => [
|
|
|
|
const plan = ref<ProductionProgressItem[]>([])
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'attendanceCount',
|
|
|
|
// const productionOverviewRight = computed(() => [
|
|
|
|
label: '出勤人数',
|
|
|
|
// {
|
|
|
|
value: productionOverview.value.onTimeRate ?? 0
|
|
|
|
// key: 'attendanceCount',
|
|
|
|
},
|
|
|
|
// label: '出勤人数',
|
|
|
|
{
|
|
|
|
// value: productionOverview.value.onTimeRate ?? 0
|
|
|
|
key: 'attendanceRate',
|
|
|
|
// },
|
|
|
|
label: '出勤率',
|
|
|
|
// {
|
|
|
|
value: formatPercent(productionOverview.value.onTimeRate)
|
|
|
|
// key: 'attendanceRate',
|
|
|
|
}
|
|
|
|
// label: '出勤率',
|
|
|
|
])
|
|
|
|
// value: formatPercent(productionOverview.value.onTimeRate)
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// ])
|
|
|
|
|
|
|
|
|
|
|
|
const deviceOverviewTop = computed(() => [
|
|
|
|
const deviceOverviewTop = computed(() => [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
@ -471,26 +437,26 @@ const deviceOverviewBottom = computed(() => [
|
|
|
|
value: 0
|
|
|
|
value: 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
])
|
|
|
|
])
|
|
|
|
const deviceStatusCards = computed(() => [
|
|
|
|
// const deviceStatusCards = computed(() => [
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
key: 'inactive',
|
|
|
|
// key: 'inactive',
|
|
|
|
label: '非活动',
|
|
|
|
// label: '非活动',
|
|
|
|
value: deviceStatus.value.inactive,
|
|
|
|
// value: deviceStatus.value.inactive,
|
|
|
|
level: 'mini-danger'
|
|
|
|
// level: 'mini-danger'
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
key: 'active',
|
|
|
|
// key: 'active',
|
|
|
|
label: '活动',
|
|
|
|
// label: '活动',
|
|
|
|
value: deviceStatus.value.active,
|
|
|
|
// value: deviceStatus.value.active,
|
|
|
|
level: 'mini-normal'
|
|
|
|
// level: 'mini-normal'
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
key: 'total',
|
|
|
|
// key: 'total',
|
|
|
|
label: '总数',
|
|
|
|
// label: '总数',
|
|
|
|
value: deviceStatus.value.total,
|
|
|
|
// value: deviceStatus.value.total,
|
|
|
|
level: 'mini-total'
|
|
|
|
// level: 'mini-total'
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
])
|
|
|
|
// ])
|
|
|
|
const alarmStatusCards = computed(() => [
|
|
|
|
const alarmStatusCards = computed(() => [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: 'serious',
|
|
|
|
key: 'serious',
|
|
|
|
@ -518,7 +484,7 @@ const groupBySize = <T,>(list: T[], size: number) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return result
|
|
|
|
return result
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const productionProgressGroups = computed(() => groupBySize(filteredProductionProgressList.value, 3))
|
|
|
|
|
|
|
|
const todoTaskGroups = computed(() => groupBySize(todoTaskList.value, 4))
|
|
|
|
const todoTaskGroups = computed(() => groupBySize(todoTaskList.value, 4))
|
|
|
|
// 获取统计数
|
|
|
|
// 获取统计数
|
|
|
|
let totalSate = reactive<WorkplaceTotal>({
|
|
|
|
let totalSate = reactive<WorkplaceTotal>({
|
|
|
|
@ -531,6 +497,9 @@ const weatherList = ref<WeatherVO[]>([])
|
|
|
|
const weatherEnable = ref(false)
|
|
|
|
const weatherEnable = ref(false)
|
|
|
|
const todayWeather = ref({} as WeatherVO)
|
|
|
|
const todayWeather = ref({} as WeatherVO)
|
|
|
|
let weatherCity = ""
|
|
|
|
let weatherCity = ""
|
|
|
|
|
|
|
|
const production = ref({} as DashboardProductVO)
|
|
|
|
|
|
|
|
const productionProgressGroups = computed(() => groupBySize(plan.value, 3))
|
|
|
|
|
|
|
|
const deviceStatusCards = ref<DeviceStatusVO[]>([])
|
|
|
|
/** 初始化 **/
|
|
|
|
/** 初始化 **/
|
|
|
|
onMounted(async () => {
|
|
|
|
onMounted(async () => {
|
|
|
|
// 加载
|
|
|
|
// 加载
|
|
|
|
@ -541,9 +510,28 @@ onMounted(async () => {
|
|
|
|
todayWeather.value = weatherList.value[0]
|
|
|
|
todayWeather.value = weatherList.value[0]
|
|
|
|
weatherCity = data.city
|
|
|
|
weatherCity = data.city
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
production.value = await DashboardApi.getProduction(productionOverviewRange)
|
|
|
|
|
|
|
|
plan.value = await DashboardApi.getPlan()
|
|
|
|
|
|
|
|
deviceStatusCards.value = await DashboardApi.getDevice()
|
|
|
|
|
|
|
|
productionOverviewLeft.value = production.value.taskItems
|
|
|
|
|
|
|
|
productionOverviewCenter.value = production.value.planItems
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 '量产'
|
|
|
|
|
|
|
|
return '-'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const getPlanStatusTagType = (value: any) => {
|
|
|
|
|
|
|
|
const v = value === '' || value === null || value === undefined ? undefined : String(value)
|
|
|
|
|
|
|
|
if (v === '1') return 'success'
|
|
|
|
|
|
|
|
if (v === '0') return 'warning'
|
|
|
|
|
|
|
|
return 'info'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getCount = async () => {
|
|
|
|
const getCount = async () => {
|
|
|
|
const data = {
|
|
|
|
const data = {
|
|
|
|
project: 40,
|
|
|
|
project: 40,
|
|
|
|
@ -879,7 +867,6 @@ getAllApi()
|
|
|
|
|
|
|
|
|
|
|
|
.production-overview-group-center {
|
|
|
|
.production-overview-group-center {
|
|
|
|
border-left: 1px solid var(--el-border-color-lighter);
|
|
|
|
border-left: 1px solid var(--el-border-color-lighter);
|
|
|
|
border-right: 1px solid var(--el-border-color-lighter);
|
|
|
|
|
|
|
|
padding: 0 48px;
|
|
|
|
padding: 0 48px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -958,6 +945,14 @@ getAllApi()
|
|
|
|
top: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
transform: translateY(-50%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 左箭头往右移动 */
|
|
|
|
|
|
|
|
.progress-carousel :deep(.el-carousel__arrow--left) {
|
|
|
|
|
|
|
|
transform: translate(30px, -50%); /* X轴移动30px,Y轴居中 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 右箭头往左移动 */
|
|
|
|
|
|
|
|
.progress-carousel :deep(.el-carousel__arrow--right) {
|
|
|
|
|
|
|
|
transform: translate(-30px, -50%); /* X轴移动-30px,Y轴居中 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-carousel :deep(.el-carousel__arrow--left) {
|
|
|
|
.progress-carousel :deep(.el-carousel__arrow--left) {
|
|
|
|
left: -8px;
|
|
|
|
left: -8px;
|
|
|
|
@ -971,7 +966,7 @@ getAllApi()
|
|
|
|
padding: 12px 16px;
|
|
|
|
padding: 12px 16px;
|
|
|
|
border-radius: 6px;
|
|
|
|
border-radius: 6px;
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
height: 180px;
|
|
|
|
height: 190px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|