|
|
<!--
|
|
|
TODO: 字典和统计接口待完善
|
|
|
|
|
|
需要引入的字典：
|
|
|
1. active_flag - 激活标识字典
|
|
|
2. maint_type - 保养类型字典
|
|
|
3. alarm_level - 报警级别字典
|
|
|
4. handle_status - 处理状态字典
|
|
|
5. bills_status - 工单状态字典
|
|
|
6. device_status - 设备状态字典
|
|
|
|
|
|
需要创建的统计接口：
|
|
|
1. getDmsDeviceStatistics() - 设备统计接口
|
|
|
返回：{ totalCount, runningCount, maintenanceCount, alarmCount, faultCount }
|
|
|
2. getDmsDeviceMaintenanceStats(machineId) - 设备维护统计接口
|
|
|
返回：{ plannedCount, temporaryCount, avgInterval, nextMaintenanceDate }
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="dms-machine-ledger">
|
|
|
<!-- 工厂背景装饰 -->
|
|
|
<div class="factory-bg-decoration">
|
|
|
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
|
|
|
<path d="M0,0 L0,60 L50,60 L50,30 L100,30 L100,50 L150,50 L150,20 L200,20 L200,60 L1200,60 L1200,0 Z"
|
|
|
fill="url(#factory-gradient)" opacity="0.1"/>
|
|
|
<defs>
|
|
|
<linearGradient id="factory-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
|
<stop offset="0%" style="stop-color:#409EFF;stop-opacity:1" />
|
|
|
<stop offset="100%" style="stop-color:#667eea;stop-opacity:1" />
|
|
|
</linearGradient>
|
|
|
</defs>
|
|
|
</svg>
|
|
|
</div>
|
|
|
|
|
|
<!-- 顶部信息面板 -->
|
|
|
<div class="top-info-panel">
|
|
|
<div class="panel-left">
|
|
|
<h1 class="page-title">
|
|
|
<el-icon><Monitor /></el-icon>
|
|
|
设备台账管理
|
|
|
</h1>
|
|
|
<p class="page-subtitle">设备全生命周期管理与履历追踪</p>
|
|
|
</div>
|
|
|
<div class="panel-right">
|
|
|
<div class="current-time">
|
|
|
<el-icon><Clock /></el-icon>
|
|
|
{{ currentTime }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 功能操作区 -->
|
|
|
<div class="action-toolbar">
|
|
|
<div class="toolbar-left">
|
|
|
<el-button-group>
|
|
|
<el-button :type="viewMode === 'grid' ? 'primary' : 'default'"
|
|
|
@click="viewMode = 'grid'">
|
|
|
<el-icon><Grid /></el-icon>
|
|
|
网格视图
|
|
|
</el-button>
|
|
|
<el-button :type="viewMode === 'list' ? 'primary' : 'default'"
|
|
|
@click="viewMode = 'list'">
|
|
|
<el-icon><List /></el-icon>
|
|
|
列表视图
|
|
|
</el-button>
|
|
|
</el-button-group>
|
|
|
</div>
|
|
|
<div class="toolbar-right">
|
|
|
<el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['dms:dmsBaseMachineInfo:add']">
|
|
|
新增设备
|
|
|
</el-button>
|
|
|
<el-button type="success" icon="Edit" :disabled="single" @click="handleUpdate()"
|
|
|
v-hasPermi="['dms:dmsBaseMachineInfo:edit']">
|
|
|
修改设备
|
|
|
</el-button>
|
|
|
<el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()"
|
|
|
v-hasPermi="['dms:dmsBaseMachineInfo:remove']">
|
|
|
删除设备
|
|
|
</el-button>
|
|
|
<el-button type="warning" icon="Download" @click="handleExport"
|
|
|
v-hasPermi="['dms:dmsBaseMachineInfo:export']">
|
|
|
导出数据
|
|
|
</el-button>
|
|
|
<el-button text @click="showSearch = !showSearch">
|
|
|
<el-icon><Filter /></el-icon>
|
|
|
{{ showSearch ? '隐藏' : '显示' }}筛选
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 查询过滤器 -->
|
|
|
<el-card class="search-filter-card" v-show="showSearch">
|
|
|
<template #header>
|
|
|
<div class="filter-header">
|
|
|
<div class="filter-title">
|
|
|
<el-icon><Filter /></el-icon>
|
|
|
筛选条件
|
|
|
</div>
|
|
|
<el-button text @click="showSearch = false">
|
|
|
<el-icon><ArrowUp /></el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
|
|
|
<el-form-item label="设备编号" prop="machineCode">
|
|
|
<el-input v-model="queryParams.machineCode" placeholder="请输入设备编号" clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="设备名称" prop="machineName">
|
|
|
<el-input v-model="queryParams.machineName" placeholder="请输入设备名称" clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="设备位置" prop="machineLocation">
|
|
|
<el-input v-model="queryParams.machineLocation" placeholder="请输入设备位置" clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="设备状态" prop="machineStatus">
|
|
|
<el-select v-model="queryParams.machineStatus" placeholder="请选择设备状态" clearable>
|
|
|
<el-option v-for="dict in machine_status" :key="dict.value"
|
|
|
:label="dict.label" :value="dict.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="设备类型" prop="machineType">
|
|
|
<el-select v-model="queryParams.machineType" placeholder="请选择设备类型" clearable>
|
|
|
<el-option v-for="type in deviceTypes" :key="type.deviceTypeId"
|
|
|
:label="type.deviceTypeName" :value="type.deviceTypeId" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery" class="filter-btn-primary">搜索</el-button>
|
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 主内容区 -->
|
|
|
<div class="main-content">
|
|
|
<!-- 网格视图 -->
|
|
|
<div v-if="viewMode === 'grid'" class="grid-view" v-loading="loading">
|
|
|
<transition-group name="fade-transform" tag="div" class="machine-grid">
|
|
|
<div v-for="machine in machineList" :key="machine.machineId"
|
|
|
class="machine-card-wrapper" @click="selectMachine(machine)">
|
|
|
<div :class="['machine-card', { selected: selectedMachine?.machineId === machine.machineId }]">
|
|
|
<!-- 状态指示灯 -->
|
|
|
<div :class="['status-indicator', `status-${machine.machineStatus}`]">
|
|
|
<span class="status-dot"></span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设备图标区 -->
|
|
|
<div class="machine-visual">
|
|
|
<div class="machine-icon-bg" v-if="!machine.photoAddress">
|
|
|
<el-icon :size="40">
|
|
|
<component :is="getMachineIcon(machine.machineType)" />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<div class="machine-photo" v-else>
|
|
|
<ImagePreview
|
|
|
:width="40"
|
|
|
:height="40"
|
|
|
:src="machine.photoAddress"
|
|
|
:preview-src-list="[machine.photoAddress]"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="machine-number">{{ machine.machineCode }}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设备信息 -->
|
|
|
<div class="machine-details">
|
|
|
<h3 class="machine-name">{{ machine.machineName }}</h3>
|
|
|
<div class="machine-meta">
|
|
|
<div class="meta-item">
|
|
|
<el-icon><Location /></el-icon>
|
|
|
<span>{{ machine.machineLocation || '-' }}</span>
|
|
|
</div>
|
|
|
<div class="meta-item">
|
|
|
<el-icon><Memo /></el-icon>
|
|
|
<span>{{ getDeviceTypeName(machine.machineType) }}</span>
|
|
|
</div>
|
|
|
<div class="meta-item">
|
|
|
<el-icon><Timer /></el-icon>
|
|
|
<span>运行 {{ calculateRunDays(machine.createTime) }} 天</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 快捷操作 -->
|
|
|
<div class="quick-actions">
|
|
|
<el-button size="small" @click.stop="handleUpdate(machine)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button>
|
|
|
<el-button size="small" @click.stop="viewLifecycle(machine)">生命周期</el-button>
|
|
|
<el-button size="small" @click.stop="viewDetails(machine)">详情</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition-group>
|
|
|
|
|
|
<!-- 网格视图分页 -->
|
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
</div>
|
|
|
|
|
|
<!-- 列表视图 -->
|
|
|
<div v-else-if="viewMode === 'list'" class="list-view">
|
|
|
<el-table v-loading="loading" :data="machineList" :row-class-name="tableRowClassName"
|
|
|
@selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
<el-table-column label="设备编号" align="center" prop="machineCode" />
|
|
|
<el-table-column label="设备名称" align="center" prop="machineName" />
|
|
|
<el-table-column label="设备类型" align="center" prop="machineType">
|
|
|
<template #default="scope">
|
|
|
{{ getDeviceTypeName(scope.row.machineType) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="设备位置" align="center" prop="machineLocation" />
|
|
|
<el-table-column label="设备状态" align="center" prop="machineStatus">
|
|
|
<template #default="scope">
|
|
|
<div class="status-cell">
|
|
|
<span :class="['status-badge', `status-${scope.row.machineStatus}`]"></span>
|
|
|
<dict-tag :options="machine_status" :value="String(scope.row.machineStatus)" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="设备图片" align="center" prop="photoAddress" width="100">
|
|
|
<template #default="scope">
|
|
|
<ImagePreview
|
|
|
v-if="scope.row.photoAddress && checkFileSuffix(scope.row.photoAddress)"
|
|
|
:width="50"
|
|
|
:height="50"
|
|
|
:src="scope.row.photoAddress"
|
|
|
:preview-src-list="[scope.row.photoAddress]"
|
|
|
/>
|
|
|
<span v-else>无图片</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
|
<template #default="scope">
|
|
|
<span class="date-text">{{ formatDate(scope.row.createTime) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" align="center" width="240">
|
|
|
<template #default="scope">
|
|
|
<el-button type="primary" size="small" @click="handleUpdate(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button>
|
|
|
<el-button size="small" @click="viewLifecycle(scope.row)">生命周期</el-button>
|
|
|
<el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
|
|
|
<el-button type="danger" size="small" @click="handleDelete(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:remove']">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 添加或修改设备信息对话框 -->
|
|
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="900px" append-to-body>
|
|
|
<el-form ref="machineFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备编号" prop="machineCode">
|
|
|
<el-input v-model="form.machineCode" placeholder="请输入设备编号" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备名称" prop="machineName">
|
|
|
<el-input v-model="form.machineName" placeholder="请输入设备名称" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="资产编号" prop="assetNumber">
|
|
|
<el-input v-model="form.assetNumber" placeholder="请输入资产编号" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备位置" prop="machineLocation">
|
|
|
<el-input v-model="form.machineLocation" placeholder="请输入设备位置" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row> -->
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备类型" prop="machineType">
|
|
|
<el-select v-model="form.machineType" placeholder="请选择设备类型" style="width: 100%;">
|
|
|
<el-option
|
|
|
v-for="item in deviceTypes"
|
|
|
:key="item.deviceTypeId"
|
|
|
:label="item.deviceTypeName"
|
|
|
:value="item.deviceTypeId"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备规格" prop="machineSpec">
|
|
|
<el-input v-model="form.machineSpec" placeholder="请输入设备规格" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="供应商" prop="supplierId">
|
|
|
<el-input v-model="form.supplierId" placeholder="请输入供应商" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备状态" prop="machineStatus">
|
|
|
<el-select v-model="form.machineStatus" placeholder="请选择设备状态" style="width: 100%;">
|
|
|
<el-option
|
|
|
v-for="dict in machine_status"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
:value="dict.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="所属车间" prop="workshopId">
|
|
|
<el-select v-model="form.workshopId" placeholder="请选择所属车间" style="width: 100%;">
|
|
|
<el-option
|
|
|
v-for="item in workshopInfoList"
|
|
|
:key="item.workshopId"
|
|
|
:label="item.workshopName"
|
|
|
:value="item.workshopId"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备模型" prop="deviceModeId">
|
|
|
<el-select v-model="form.deviceModeId" placeholder="请选择设备模型" style="width: 100%;">
|
|
|
<el-option
|
|
|
v-for="item in deviceModeList"
|
|
|
:key="item.deviceModeId"
|
|
|
:label="item.deviceModeName"
|
|
|
:value="item.deviceModeId"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row> -->
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备IP地址" prop="machineIp">
|
|
|
<el-input v-model="form.machineIp" placeholder="请输入设备IP地址" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备端口" prop="machinePort">
|
|
|
<el-input v-model="form.machinePort" placeholder="请输入设备端口" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>-->
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设备协议" prop="accessProtocol">
|
|
|
<el-input v-model="form.accessProtocol" placeholder="请输入设备协议" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="寄存器地址" prop="registerAddress">
|
|
|
<el-input v-model="form.registerAddress" placeholder="请输入寄存器地址" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>-->
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="数据类型" prop="dataType">
|
|
|
<el-select v-model="form.dataType" placeholder="请选择数据类型" style="width: 100%;">
|
|
|
<el-option
|
|
|
v-for="dict in machine_data_type"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
:value="dict.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="数据长度" prop="dataLength">
|
|
|
<el-input-number v-model="form.dataLength" placeholder="请输入数据长度" style="width: 100%;" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>-->
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="数据编码格式" prop="dataEncoding">
|
|
|
<el-select v-model="form.dataEncoding" placeholder="请选择数据编码格式" style="width: 100%;">
|
|
|
<el-option
|
|
|
v-for="dict in machine_data_encoding"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
:value="dict.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="请求间隔(毫秒)" prop="requestInterval">
|
|
|
<el-input-number v-model="form.requestInterval" placeholder="请输入请求间隔" style="width: 100%;" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>-->
|
|
|
<!-- <el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="班制类型" prop="classType">
|
|
|
<el-radio-group v-model="form.classType">
|
|
|
<el-radio
|
|
|
v-for="dict in mes_class_type"
|
|
|
:key="dict.value"
|
|
|
:value="dict.value"
|
|
|
>{{ dict.label }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="入库类型" prop="instockType">
|
|
|
<el-radio-group v-model="form.instockType">
|
|
|
<el-radio
|
|
|
v-for="dict in mes_instock_type"
|
|
|
:key="dict.value"
|
|
|
:value="dict.value"
|
|
|
>{{ dict.label }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row> -->
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="设备图片" prop="photoAddress">
|
|
|
<imageUpload v-model="form.file" :limit="1" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 生命周期抽屉 -->
|
|
|
<el-drawer v-model="lifecycleDrawer" :title="`设备生命周期 - ${selectedMachine?.machineName || ''}`"
|
|
|
size="60%" class="lifecycle-drawer">
|
|
|
<div class="lifecycle-container" v-loading="lifecycleLoading">
|
|
|
<!-- 设备概览卡片 -->
|
|
|
<div class="device-overview-card" v-if="selectedMachine">
|
|
|
<div class="overview-header">
|
|
|
<div class="device-avatar">
|
|
|
<el-icon :size="40">
|
|
|
<component :is="getMachineIcon(selectedMachine.machineType)" />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<div class="device-basic">
|
|
|
<h2>{{ selectedMachine.machineName }}</h2>
|
|
|
<p>编号：{{ selectedMachine.machineCode }} | 位置：{{ selectedMachine.machineLocation || '-' }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="overview-stats">
|
|
|
<div class="stat">
|
|
|
<span class="stat-label">运行天数</span>
|
|
|
<span class="stat-value">{{ calculateRunDays(selectedMachine.createTime) }}</span>
|
|
|
</div>
|
|
|
<div class="stat">
|
|
|
<span class="stat-label">故障次数</span>
|
|
|
<span class="stat-value">{{ lifecycleStats.faultCount }}</span>
|
|
|
</div>
|
|
|
<div class="stat">
|
|
|
<span class="stat-label">保养次数</span>
|
|
|
<span class="stat-value">{{ lifecycleStats.maintCount }}</span>
|
|
|
</div>
|
|
|
<div class="stat">
|
|
|
<span class="stat-label">报警次数</span>
|
|
|
<span class="stat-value">{{ lifecycleStats.alarmCount }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 生命周期类型选择 -->
|
|
|
<div class="lifecycle-type-selector">
|
|
|
<h3>选择查看的生命周期类型</h3>
|
|
|
<div class="type-cards">
|
|
|
<div v-for="type in lifecycleTypes" :key="type.value"
|
|
|
:class="['type-card', { active: selectedLifecycleTypes.includes(type.value) }]"
|
|
|
@click="toggleLifecycleType(type.value)">
|
|
|
<div class="type-icon" :style="{ background: type.gradient }">
|
|
|
<el-icon :size="24">
|
|
|
<component :is="type.icon" />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<span class="type-name">{{ type.label }}</span>
|
|
|
<span v-if="type.count > 0" class="type-count">{{ type.count }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 生命周期时间轴 -->
|
|
|
<div class="lifecycle-timeline-container" v-if="lifecycleEvents.length > 0">
|
|
|
<h3>设备履历时间轴</h3>
|
|
|
<div class="timeline-wrapper">
|
|
|
<div v-for="event in lifecycleEvents" :key="event.id" class="timeline-item">
|
|
|
<div class="timeline-marker" :style="{ backgroundColor: event.color }">
|
|
|
<el-icon :size="20">
|
|
|
<component :is="event.icon" />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<div class="timeline-content">
|
|
|
<div class="event-header">
|
|
|
<h4>{{ event.title }}</h4>
|
|
|
<span class="event-time">{{ formatDateTime(event.time) }}</span>
|
|
|
</div>
|
|
|
<p class="event-description">{{ event.description }}</p>
|
|
|
<div class="event-tags">
|
|
|
<el-tag v-for="tag in event.tags" :key="tag" size="small">{{ tag }}</el-tag>
|
|
|
</div>
|
|
|
<div class="event-details" v-if="event.details && event.details.length">
|
|
|
<el-collapse>
|
|
|
<el-collapse-item title="查看详情">
|
|
|
<el-descriptions :column="2" border>
|
|
|
<el-descriptions-item v-for="item in event.details"
|
|
|
:key="item.label" :label="item.label">
|
|
|
<template v-if="item.dictOptions">
|
|
|
<dict-tag :options="item.dictOptions" :value="String(item.value)" />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
{{ item.value ?? '-' }}
|
|
|
</template>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="timeline-line"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 空状态 -->
|
|
|
<el-empty v-else-if="selectedLifecycleTypes.length > 0"
|
|
|
description="暂无相关生命周期数据" />
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
|
|
|
<!-- 设备详情对话框 -->
|
|
|
<el-dialog v-model="detailDialog" :title="`设备详情 - ${selectedMachine?.machineName || ''}`"
|
|
|
width="80%" top="5vh">
|
|
|
<el-tabs v-model="activeTab">
|
|
|
<el-tab-pane label="基本信息" name="basic">
|
|
|
<div class="detail-section">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-card>
|
|
|
<template #header>
|
|
|
<span class="card-header-title">设备基础信息</span>
|
|
|
</template>
|
|
|
<el-descriptions :column="1" border>
|
|
|
<el-descriptions-item label="设备编号">{{ selectedMachine?.machineCode }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备名称">{{ selectedMachine?.machineName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备类型">{{ getDeviceTypeName(selectedMachine?.machineType) }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备位置">{{ selectedMachine?.machineLocation || '-' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备状态">
|
|
|
<dict-tag :options="machine_status" :value="String(selectedMachine?.machineStatus ?? '')" />
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="创建时间">{{ formatDateTime(selectedMachine?.createTime) }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card>
|
|
|
<template #header>
|
|
|
<span class="card-header-title">技术参数</span>
|
|
|
</template>
|
|
|
<el-table :data="technicalParams" max-height="300">
|
|
|
<el-table-column prop="paramName" label="参数名称" />
|
|
|
<el-table-column prop="paramValue" label="参数值" />
|
|
|
<el-table-column prop="unit" label="单位" />
|
|
|
<el-table-column prop="remark" label="备注" />
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="维护信息" name="maintenance">
|
|
|
<div class="detail-section maintenance-section">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
|
<el-card class="maintenance-summary">
|
|
|
<template #header>
|
|
|
<span class="card-header-title">维护统计</span>
|
|
|
</template>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="6">
|
|
|
<el-statistic title="计划保养次数" :value="maintenanceStats.planned" />
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
<el-statistic title="临时保养次数" :value="maintenanceStats.temporary" />
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
<el-statistic title="平均间隔(天)" :value="maintenanceStats.avgInterval" />
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
<el-statistic title="下次保养日期" :value="maintenanceStats.nextDate || '-'" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-card>
|
|
|
<template #header>
|
|
|
<span class="card-header-title">维护记录</span>
|
|
|
</template>
|
|
|
<el-table :data="maintenanceRecords" max-height="400">
|
|
|
<el-table-column prop="maintCode" label="保养单号" />
|
|
|
<el-table-column prop="maintType" label="保养类型">
|
|
|
<template #default="scope">
|
|
|
<dict-tag :options="maint_type" :value="String(scope.row.maintType)" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="maintDate" label="保养日期" />
|
|
|
<el-table-column prop="maintPerson" label="保养人员" />
|
|
|
<el-table-column prop="maintContent" label="保养内容" show-overflow-tooltip />
|
|
|
<el-table-column prop="maintStatus" label="保养结果">
|
|
|
<template #default="scope">
|
|
|
<dict-tag :options="maint_status" :value="String(scope.row.maintStatus)" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="ProdBaseMachineInfo" lang="ts">
|
|
|
import { ref, reactive, toRefs, getCurrentInstance, onMounted, onUnmounted, shallowRef, markRaw, watch } from 'vue';
|
|
|
import type { ComponentInternalInstance } from 'vue';
|
|
|
import {
|
|
|
listDmsBaseMachineInfo,
|
|
|
getDmsBaseMachineInfo,
|
|
|
addProdBaseMachineInfo,
|
|
|
updateProdBaseMachineInfo,
|
|
|
delDmsBaseMachineInfo
|
|
|
} from '@/api/dms/dmsBaseMachineInfo';
|
|
|
import { getBaseDeviceTypeList } from '@/api/dms/baseDeviceType';
|
|
|
import { getDmsBaseDevicePurchaseList, getPurchaseCount } from '@/api/dms/dmsBaseDevicePurchase';
|
|
|
import { getDmsBaseDeviceInstallList, getInstallCount } from '@/api/dms/dmsBaseDeviceInstall';
|
|
|
import { getDmsBaseDeviceDebuggingList, getDebuggingCount } from '@/api/dms/dmsBaseDeviceDebugging';
|
|
|
import { getDmsBillsFaultInstanceList, getFaultInstanceCount } from '@/api/dms/dmsBillsFaultInstance';
|
|
|
import { getDmsBillsMaintDetailList, getMaintInstancesByMachineId, countMaintInstancesByMachineId } from '@/api/dms/dmsBillsMaintDetail';
|
|
|
import { getDmsInspectInstanceDetailList, getInspectInstancesByMachineId, countInspectInstancesByMachineId } from '@/api/dms/dmsInspectInstanceDetail';
|
|
|
import { getBaseAlarmInfoList, getAlarmInfoCount } from '@/api/dms/baseAlarmInfo';
|
|
|
import { getDmsBaseSpecialdeviceParamList } from '@/api/dms/dmsBaseSpecialdeviceParam';
|
|
|
import { getWorkshopList } from '@/api/mes/baseWorkshopInfo';
|
|
|
import { getDmsDeviceModeList } from '@/api/dms/deviceMode';
|
|
|
import { ProdBaseMachineInfoVO, ProdBaseMachineInfoForm } from '@/api/dms/dmsBaseMachineInfo/types';
|
|
|
import imageUpload from '@/components/ImageUpload/index.vue';
|
|
|
import ImagePreview from '@/components/ImagePreview/index.vue';
|
|
|
import request from '@/utils/request';
|
|
|
|
|
|
// 图标导入
|
|
|
import {
|
|
|
Monitor, Clock, Grid, List, Connection, Filter, ArrowUp, ArrowDown,
|
|
|
Location, Memo, Timer, InfoFilled, Calendar, DataAnalysis, TrendCharts,
|
|
|
Download, Search, Refresh, Document, Files, Box, Setting,
|
|
|
Tools, Notification, TurnOff, Warning, Money, Switch, View,
|
|
|
ShoppingCart, CircleCheck, Position, MagicStick, Plus, Edit, Delete
|
|
|
} from '@element-plus/icons-vue';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
|
|
// 设备台账页面实际使用到的核心字典集合
|
|
|
const {
|
|
|
machine_status,
|
|
|
debug_status,
|
|
|
fault_status,
|
|
|
maint_level,
|
|
|
maint_status,
|
|
|
handle_status,
|
|
|
bills_status,
|
|
|
active_flag,
|
|
|
machine_data_type,
|
|
|
machine_data_encoding,
|
|
|
mes_class_type,
|
|
|
mes_instock_type
|
|
|
} = toRefs<any>(proxy?.useDict(
|
|
|
'machine_status',
|
|
|
'debug_status',
|
|
|
'fault_status',
|
|
|
'maint_level',
|
|
|
'maint_status',
|
|
|
'handle_status',
|
|
|
'bills_status',
|
|
|
'active_flag',
|
|
|
'machine_data_type',
|
|
|
'machine_data_encoding',
|
|
|
'mes_class_type',
|
|
|
'mes_instock_type'
|
|
|
));
|
|
|
// 本页还需要的其它字典（用于详情/统计处标签显示）
|
|
|
const { maint_type, alarm_level } = toRefs<any>(proxy?.useDict('maint_type', 'alarm_level'));
|
|
|
|
|
|
// 响应式数据
|
|
|
const loading = ref(false);
|
|
|
const buttonLoading = ref(false);
|
|
|
const showSearch = ref(true);
|
|
|
const machineList = ref([]);
|
|
|
const total = ref(0);
|
|
|
const viewMode = ref('grid');
|
|
|
const selectedMachine = ref(null);
|
|
|
const lifecycleDrawer = ref(false);
|
|
|
const detailDialog = ref(false);
|
|
|
const activeTab = ref('basic');
|
|
|
const lifecycleLoading = ref(false);
|
|
|
const selectedLifecycleTypes = ref([]);
|
|
|
const lifecycleEvents = ref([]);
|
|
|
// 防抖/竞态控制：仅应用最近一次生命周期数据请求的结果
|
|
|
const lifecycleRequestId = ref(0);
|
|
|
const currentTime = ref('');
|
|
|
const deviceTypes = ref([]);
|
|
|
const workshopInfoList = ref([]);
|
|
|
const deviceModeList = ref([]);
|
|
|
|
|
|
// 表单相关
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
const machineFormRef = ref<ElFormInstance>();
|
|
|
const ids = ref<Array<string | number>>([]);
|
|
|
const single = ref(true);
|
|
|
const multiple = ref(true);
|
|
|
|
|
|
const dialog = reactive<DialogOption>({
|
|
|
visible: false,
|
|
|
title: ''
|
|
|
});
|
|
|
|
|
|
// 查询参数
|
|
|
const queryParams = ref({
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
machineCode: undefined,
|
|
|
machineName: undefined,
|
|
|
machineLocation: undefined,
|
|
|
machineStatus: undefined,
|
|
|
machineType: undefined
|
|
|
});
|
|
|
|
|
|
// 表单数据
|
|
|
const initFormData: ProdBaseMachineInfoForm = {
|
|
|
machineId: undefined,
|
|
|
machineCode: undefined,
|
|
|
machineName: undefined,
|
|
|
assetNumber: undefined,
|
|
|
machineLocation: undefined,
|
|
|
machineType: undefined,
|
|
|
machineSpec: undefined,
|
|
|
supplierId: undefined,
|
|
|
machineStatus: '1',
|
|
|
remark: undefined,
|
|
|
photoAddress: undefined,
|
|
|
ossId: undefined,
|
|
|
// workshopId: undefined,
|
|
|
// deviceModeId: undefined,
|
|
|
// machineIp: undefined,
|
|
|
// machinePort: undefined,
|
|
|
// accessProtocol: undefined,
|
|
|
// registerAddress: undefined,
|
|
|
// dataType: undefined,
|
|
|
// dataLength: undefined,
|
|
|
// dataEncoding: undefined,
|
|
|
// requestInterval: undefined,
|
|
|
// classType: undefined,
|
|
|
// instockType: undefined,
|
|
|
file: undefined
|
|
|
};
|
|
|
|
|
|
const form = ref<ProdBaseMachineInfoForm>({ ...initFormData });
|
|
|
|
|
|
// 表单验证规则
|
|
|
const rules = reactive({
|
|
|
machineCode: [
|
|
|
{ required: true, message: '设备编号不能为空', trigger: 'blur' }
|
|
|
],
|
|
|
machineName: [
|
|
|
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
|
|
|
],
|
|
|
machineStatus: [
|
|
|
{ required: true, message: '设备状态不能为空', trigger: 'change' }
|
|
|
]
|
|
|
});
|
|
|
|
|
|
// 生命周期类型配置
|
|
|
const lifecycleTypes = ref([
|
|
|
{
|
|
|
label: '采购信息',
|
|
|
value: 'purchase',
|
|
|
icon: shallowRef(ShoppingCart),
|
|
|
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
|
count: 0
|
|
|
},
|
|
|
{
|
|
|
label: '安装调试',
|
|
|
value: 'install',
|
|
|
icon: shallowRef(Setting),
|
|
|
gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
|
|
count: 0
|
|
|
},
|
|
|
{
|
|
|
label: '维保记录',
|
|
|
value: 'maintenance',
|
|
|
icon: shallowRef(Tools),
|
|
|
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
|
|
count: 0
|
|
|
},
|
|
|
{
|
|
|
label: '故障维修',
|
|
|
value: 'fault',
|
|
|
icon: shallowRef(Warning),
|
|
|
gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
|
|
count: 0
|
|
|
},
|
|
|
{
|
|
|
label: '巡检记录',
|
|
|
value: 'inspection',
|
|
|
icon: shallowRef(View),
|
|
|
gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
|
|
|
count: 0
|
|
|
},
|
|
|
{
|
|
|
label: '报警信息',
|
|
|
value: 'alarm',
|
|
|
icon: shallowRef(Notification),
|
|
|
gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
|
|
|
count: 0
|
|
|
}
|
|
|
]);
|
|
|
|
|
|
// 生命周期统计
|
|
|
const lifecycleStats = ref({
|
|
|
faultCount: 0,
|
|
|
maintCount: 0,
|
|
|
alarmCount: 0
|
|
|
});
|
|
|
|
|
|
// 技术参数
|
|
|
const technicalParams = ref([]);
|
|
|
|
|
|
// 维护统计
|
|
|
const maintenanceStats = ref({
|
|
|
planned: 0,
|
|
|
temporary: 0,
|
|
|
avgInterval: 0,
|
|
|
nextDate: null
|
|
|
});
|
|
|
|
|
|
// 维护记录
|
|
|
const maintenanceRecords = ref([]);
|
|
|
|
|
|
// 检查文件后缀是否为图片
|
|
|
const checkFileSuffix = (fileSuffix: string | string[]) => {
|
|
|
if (!fileSuffix) return false;
|
|
|
const arr = ['.png', '.jpg', '.jpeg', '.gif'];
|
|
|
const suffix = typeof fileSuffix === 'string' ? fileSuffix.toLowerCase() : '';
|
|
|
return arr.some(item => suffix.endsWith(item));
|
|
|
};
|
|
|
|
|
|
// 更新时间
|
|
|
const updateCurrentTime = () => {
|
|
|
const now = new Date();
|
|
|
currentTime.value = now.toLocaleString('zh-CN', {
|
|
|
year: 'numeric',
|
|
|
month: '2-digit',
|
|
|
day: '2-digit',
|
|
|
hour: '2-digit',
|
|
|
minute: '2-digit',
|
|
|
second: '2-digit',
|
|
|
hour12: false
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 获取设备列表
|
|
|
const getList = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
const res = await listDmsBaseMachineInfo(queryParams.value);
|
|
|
machineList.value = res.rows || [];
|
|
|
total.value = res.total || 0;
|
|
|
} catch (error) {
|
|
|
console.error('获取设备列表失败:', error);
|
|
|
proxy?.$modal.msgError('获取设备列表失败');
|
|
|
machineList.value = [];
|
|
|
total.value = 0;
|
|
|
} finally {
|
|
|
loading.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 获取设备类型列表
|
|
|
const getDeviceTypes = async () => {
|
|
|
try {
|
|
|
const res = await getBaseDeviceTypeList(null);
|
|
|
deviceTypes.value = res.data;
|
|
|
} catch (error) {
|
|
|
console.error('获取设备类型失败:', error);
|
|
|
proxy?.$modal.msgError('获取设备类型失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 获取车间列表
|
|
|
// const getWorkshopListSelect = async () => {
|
|
|
// try {
|
|
|
// const res = await getWorkshopList(null);
|
|
|
// workshopInfoList.value = res.data;
|
|
|
// } catch (error) {
|
|
|
// console.error('获取车间列表失败:', error);
|
|
|
// proxy?.$modal.msgError('获取车间列表失败');
|
|
|
// }
|
|
|
// };
|
|
|
|
|
|
// 获取设备模型列表
|
|
|
const getDmsDeviceModeListSelect = async () => {
|
|
|
try {
|
|
|
const res = await getDmsDeviceModeList(null);
|
|
|
deviceModeList.value = res.data;
|
|
|
} catch (error) {
|
|
|
console.error('获取设备模型列表失败:', error);
|
|
|
proxy?.$modal.msgError('获取设备模型列表失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 获取设备图标
|
|
|
const getMachineIcon = (type) => {
|
|
|
const iconMap = {
|
|
|
'1': markRaw(Monitor),
|
|
|
'2': markRaw(Setting),
|
|
|
'3': markRaw(Tools),
|
|
|
'4': markRaw(Tools)
|
|
|
};
|
|
|
return iconMap[type] || markRaw(Monitor);
|
|
|
};
|
|
|
|
|
|
// 获取设备类型名称
|
|
|
const getDeviceTypeName = (typeId) => {
|
|
|
const type = deviceTypes.value.find(t => t.deviceTypeId === typeId);
|
|
|
return type?.deviceTypeName || '-';
|
|
|
};
|
|
|
|
|
|
// 获取保养级别标签
|
|
|
const getMaintLevelLabel = (level) => {
|
|
|
const dict = maint_level?.value?.find(d => d.value === level);
|
|
|
return dict?.label || level;
|
|
|
};
|
|
|
|
|
|
// 获取故障状态标签
|
|
|
const getFaultStatusLabel = (status) => {
|
|
|
const dict = bills_status?.value?.find(d => d.value === status);
|
|
|
return dict?.label || status;
|
|
|
};
|
|
|
|
|
|
// 表格行样式
|
|
|
const tableRowClassName = ({ row }) => {
|
|
|
if (row.machineStatus === '0') return 'danger-row';
|
|
|
if (row.machineStatus === '2') return 'warning-row';
|
|
|
return '';
|
|
|
};
|
|
|
|
|
|
// 格式化日期
|
|
|
const formatDate = (date) => {
|
|
|
if (!date) return null;
|
|
|
return proxy.parseTime(date, '{y}-{m}-{d}');
|
|
|
};
|
|
|
|
|
|
// 格式化日期时间
|
|
|
const formatDateTime = (date) => {
|
|
|
if (!date) return null;
|
|
|
return proxy.parseTime(date, '{y}-{m}-{d} {h}:{i}');
|
|
|
};
|
|
|
|
|
|
// 计算运行天数
|
|
|
const calculateRunDays = (startDate) => {
|
|
|
if (!startDate) return 0;
|
|
|
const start = new Date(startDate);
|
|
|
const now = new Date();
|
|
|
const diff = now.getTime() - start.getTime();
|
|
|
return Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
|
};
|
|
|
|
|
|
// 搜索
|
|
|
const handleQuery = () => {
|
|
|
queryParams.value.pageNum = 1;
|
|
|
getList();
|
|
|
};
|
|
|
|
|
|
// 重置
|
|
|
const resetQuery = () => {
|
|
|
(proxy as any)?.resetForm?.("queryFormRef");
|
|
|
handleQuery();
|
|
|
};
|
|
|
|
|
|
// 选择设备
|
|
|
const selectMachine = (machine) => {
|
|
|
selectedMachine.value = machine;
|
|
|
};
|
|
|
|
|
|
// 多选框选中数据
|
|
|
const handleSelectionChange = (selection: ProdBaseMachineInfoVO[]) => {
|
|
|
ids.value = selection.map(item => item.machineId);
|
|
|
single.value = selection.length != 1;
|
|
|
multiple.value = !selection.length;
|
|
|
};
|
|
|
|
|
|
// 新增按钮操作
|
|
|
const handleAdd = () => {
|
|
|
reset();
|
|
|
dialog.visible = true;
|
|
|
dialog.title = '添加设备信息';
|
|
|
};
|
|
|
|
|
|
// 修改按钮操作
|
|
|
const handleUpdate = async (row?: ProdBaseMachineInfoVO) => {
|
|
|
reset();
|
|
|
const _machineId = row?.machineId || ids.value[0];
|
|
|
try {
|
|
|
const res = await getDmsBaseMachineInfo(_machineId);
|
|
|
Object.assign(form.value, res.data);
|
|
|
|
|
|
// 处理图片数据 - 只取第一张图片
|
|
|
if (res.data.ossId && res.data.photoAddress) {
|
|
|
const ossIdArray = res.data.ossId.split(',');
|
|
|
const urlArray = res.data.photoAddress.split(',');
|
|
|
if (ossIdArray.length > 0 && urlArray.length > 0) {
|
|
|
form.value.file = [{
|
|
|
ossId: ossIdArray[0].trim(),
|
|
|
url: urlArray[0].trim()
|
|
|
}];
|
|
|
}
|
|
|
}
|
|
|
|
|
|
dialog.visible = true;
|
|
|
dialog.title = '修改设备信息';
|
|
|
} catch (error) {
|
|
|
console.error('获取设备信息失败:', error);
|
|
|
proxy?.$modal.msgError('获取设备信息失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 提交按钮
|
|
|
const submitForm = () => {
|
|
|
machineFormRef.value?.validate(async (valid: boolean) => {
|
|
|
if (valid) {
|
|
|
buttonLoading.value = true;
|
|
|
try {
|
|
|
// 处理图片上传 - 只处理第一张图片
|
|
|
if (form.value.file && form.value.file.length > 0) {
|
|
|
form.value.ossId = form.value.file[0].ossId;
|
|
|
form.value.photoAddress = form.value.file[0].url;
|
|
|
} else {
|
|
|
form.value.ossId = undefined;
|
|
|
form.value.photoAddress = undefined;
|
|
|
}
|
|
|
|
|
|
if (form.value.machineId) {
|
|
|
await updateProdBaseMachineInfo(form.value);
|
|
|
} else {
|
|
|
await addProdBaseMachineInfo(form.value);
|
|
|
}
|
|
|
proxy?.$modal.msgSuccess('操作成功');
|
|
|
dialog.visible = false;
|
|
|
await getList();
|
|
|
} catch (error) {
|
|
|
console.error('保存设备信息失败:', error);
|
|
|
proxy?.$modal.msgError('保存设备信息失败');
|
|
|
} finally {
|
|
|
buttonLoading.value = false;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 删除按钮操作
|
|
|
const handleDelete = async (row?: ProdBaseMachineInfoVO) => {
|
|
|
const _machineIds = row?.machineId || ids.value;
|
|
|
try {
|
|
|
await proxy?.$modal.confirm('是否确认删除设备信息编号为"' + _machineIds + '"的数据项？');
|
|
|
await delDmsBaseMachineInfo(_machineIds);
|
|
|
proxy?.$modal.msgSuccess('删除成功');
|
|
|
await getList();
|
|
|
} catch (error) {
|
|
|
console.error('删除设备信息失败:', error);
|
|
|
if (error !== 'cancel') {
|
|
|
proxy?.$modal.msgError('删除设备信息失败');
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 导出按钮操作
|
|
|
const handleExport = () => {
|
|
|
proxy?.download('dms/dmsBaseMachineInfo/export', {
|
|
|
...queryParams.value
|
|
|
}, `machineInfo_${new Date().getTime()}.xlsx`);
|
|
|
};
|
|
|
|
|
|
// 取消按钮
|
|
|
const cancel = () => {
|
|
|
reset();
|
|
|
dialog.visible = false;
|
|
|
};
|
|
|
|
|
|
// 表单重置
|
|
|
const reset = () => {
|
|
|
form.value = { ...initFormData };
|
|
|
machineFormRef.value?.resetFields();
|
|
|
};
|
|
|
|
|
|
// 切换生命周期类型
|
|
|
const toggleLifecycleType = (type) => {
|
|
|
const index = selectedLifecycleTypes.value.indexOf(type);
|
|
|
if (index > -1) {
|
|
|
selectedLifecycleTypes.value.splice(index, 1);
|
|
|
} else {
|
|
|
selectedLifecycleTypes.value.push(type);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 查看生命周期
|
|
|
const viewLifecycle = async (machine) => {
|
|
|
selectedMachine.value = machine;
|
|
|
lifecycleDrawer.value = true;
|
|
|
selectedLifecycleTypes.value = [];
|
|
|
lifecycleEvents.value = [];
|
|
|
|
|
|
// 预加载统计数据
|
|
|
await loadLifecycleTypes();
|
|
|
};
|
|
|
|
|
|
// 加载生命周期数据
|
|
|
const loadLifecycleData = async () => {
|
|
|
if (!selectedMachine.value || selectedLifecycleTypes.value.length === 0) {
|
|
|
lifecycleEvents.value = [];
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 标记本次请求序列，后续仅应用最后一次请求的结果
|
|
|
const reqId = ++lifecycleRequestId.value;
|
|
|
lifecycleLoading.value = true;
|
|
|
const events = [];
|
|
|
const machineId = selectedMachine.value.machineId;
|
|
|
|
|
|
// 兼容不同接口返回结构（data 或 rows）
|
|
|
const getListData = (res) => (res && (res.data ?? res.rows)) || [];
|
|
|
|
|
|
try {
|
|
|
const promises = selectedLifecycleTypes.value.map(async (type) => {
|
|
|
switch (type) {
|
|
|
case 'purchase':
|
|
|
try {
|
|
|
const purchaseRes = await getDmsBaseDevicePurchaseList({ machineId:machineId });
|
|
|
const purchases = getListData(purchaseRes);
|
|
|
if (purchases.length > 0) {
|
|
|
purchases.forEach(purchase => {
|
|
|
events.push({
|
|
|
id: `purchase-${purchase.devicePurchaseId}`,
|
|
|
type: 'purchase',
|
|
|
title: '设备采购',
|
|
|
description: `采购人: ${purchase.purchasePerson || '-'}`,
|
|
|
time: purchase.purchaseTime,
|
|
|
icon: markRaw(ShoppingCart),
|
|
|
color: '#667eea',
|
|
|
tags: ['采购'],
|
|
|
details: [
|
|
|
{ label: '计划编号', value: purchase.workOrder },
|
|
|
{ label: '采购地点', value: purchase.purchasePosition },
|
|
|
{ label: '采购价格', value: purchase.purchasePrice || '-' },
|
|
|
{ label: '备注', value: purchase.remark || '-' }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取采购信息失败:', error);
|
|
|
proxy?.$modal.msgError('获取采购信息失败');
|
|
|
}
|
|
|
break;
|
|
|
|
|
|
case 'install':
|
|
|
try {
|
|
|
const installRes = await getDmsBaseDeviceInstallList({ machineId:machineId });
|
|
|
const installs = getListData(installRes);
|
|
|
if (installs.length > 0) {
|
|
|
installs.forEach(install => {
|
|
|
events.push({
|
|
|
id: `install-${install.deviceInstallId}`,
|
|
|
type: 'install',
|
|
|
title: '设备安装',
|
|
|
description: `安装人员: ${install.installPerson || '-'}`,
|
|
|
time: install.installTime,
|
|
|
icon: markRaw(Setting),
|
|
|
color: '#f093fb',
|
|
|
tags: ['安装'],
|
|
|
details: [
|
|
|
{ label: '安装地点', value: install.installPosition },
|
|
|
{ label: '状态', value: install.activeFlag, dictOptions: active_flag?.value }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const debugRes = await getDmsBaseDeviceDebuggingList({ machineId:machineId });
|
|
|
const debugs = getListData(debugRes);
|
|
|
if (debugs.length > 0) {
|
|
|
debugs.forEach(debug => {
|
|
|
events.push({
|
|
|
id: `debug-${debug.deviceDebuggingId}`,
|
|
|
type: 'debugging',
|
|
|
title: '设备调试',
|
|
|
description: `调试人员: ${debug.debugPerson || '-'}`,
|
|
|
time: debug.debugTime,
|
|
|
icon: markRaw(Tools),
|
|
|
color: '#f5576c',
|
|
|
tags: ['调试'],
|
|
|
details: [
|
|
|
{ label: '调试单号', value: debug.workOrder },
|
|
|
{ label: '调试状态', value: debug.status, dictOptions: debug_status?.value },
|
|
|
{ label: '备注', value: debug.remark || '-' }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取安装调试信息失败:', error);
|
|
|
proxy?.$modal.msgError('获取安装调试信息失败');
|
|
|
}
|
|
|
break;
|
|
|
|
|
|
case 'maintenance':
|
|
|
try {
|
|
|
// 使用新的后端接口，直接获取维保工单列表
|
|
|
const res = await getMaintInstancesByMachineId(machineId);
|
|
|
const maintInstances = getListData(res);
|
|
|
|
|
|
maintInstances.forEach(maint => {
|
|
|
events.push({
|
|
|
id: `maint-${maint.maintInstanceId}`,
|
|
|
type: 'maintenance',
|
|
|
title: '保养记录',
|
|
|
description: `保养单号: ${maint.billsMaintCode}`,
|
|
|
time: maint.planBeginTime || maint.createTime,
|
|
|
icon: markRaw(Tools),
|
|
|
color: '#4facfe',
|
|
|
tags: ['保养', getMaintLevelLabel(maint.maintLevel)],
|
|
|
details: [
|
|
|
{ label: '保养单号', value: maint.billsMaintCode },
|
|
|
{ label: '保养级别', value: maint.maintLevel, dictOptions: maint_level?.value },
|
|
|
{ label: '保养状态', value: maint.maintStatus, dictOptions: maint_status?.value },
|
|
|
{ label: '计划开始时间', value: formatDateTime(maint.planBeginTime) },
|
|
|
// { label: '计划结束时间', value: formatDateTime(maint.planEndTime) }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
} catch (error) {
|
|
|
console.error('获取保养记录失败:', error);
|
|
|
proxy?.$modal.msgError('获取保养记录失败');
|
|
|
}
|
|
|
break;
|
|
|
|
|
|
case 'fault':
|
|
|
try {
|
|
|
const res = await getDmsBillsFaultInstanceList({ machineId:machineId });
|
|
|
const faults = getListData(res);
|
|
|
if (faults.length > 0) {
|
|
|
faults.forEach(fault => {
|
|
|
events.push({
|
|
|
id: `fault-${fault.repairInstanceId}`,
|
|
|
type: 'fault',
|
|
|
title: '故障报修',
|
|
|
description: `故障单号: ${fault.billsFaultCode}`,
|
|
|
time: fault.applyTime,
|
|
|
icon: markRaw(Warning),
|
|
|
color: '#fa709a',
|
|
|
tags: ['故障', getFaultStatusLabel(fault.billsStatus)],
|
|
|
details: [
|
|
|
{ label: '申请人', value: fault.applyUser },
|
|
|
{ label: '工单状态', value: fault.billsStatus, dictOptions: bills_status?.value },
|
|
|
{ label: '故障描述', value: fault.faultDescription || '-' },
|
|
|
{ label: '备注', value: fault.remark || '-' }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取故障记录失败:', error);
|
|
|
proxy?.$modal.msgError('获取故障记录失败');
|
|
|
}
|
|
|
break;
|
|
|
|
|
|
case 'inspection':
|
|
|
try {
|
|
|
// 使用新的后端接口，直接获取巡检工单列表
|
|
|
const res = await getInspectInstancesByMachineId(machineId);
|
|
|
const inspectInstances = getListData(res);
|
|
|
|
|
|
inspectInstances.forEach(inspect => {
|
|
|
events.push({
|
|
|
id: `inspect-${inspect.inspectInstanceId}`,
|
|
|
type: 'inspection',
|
|
|
title: '巡检记录',
|
|
|
description: `巡检单号: ${inspect.billsInspectCode}`,
|
|
|
time: inspect.planBeginTime || inspect.createTime,
|
|
|
icon: markRaw(View),
|
|
|
color: '#30cfd0',
|
|
|
tags: ['巡检'],
|
|
|
details: [
|
|
|
{ label: '巡检单号', value: inspect.billsInspectCode },
|
|
|
{ label: '巡检类型', value: inspect.inspectType === '1' ? '巡检' : '点检' },
|
|
|
{ label: '巡检状态', value: inspect.inspectStatus || '-' },
|
|
|
{ label: '计划开始时间', value: formatDateTime(inspect.planBeginTime) },
|
|
|
// { label: '计划结束时间', value: formatDateTime(inspect.planEndTime) }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
} catch (error) {
|
|
|
console.error('获取巡检记录失败:', error);
|
|
|
proxy?.$modal.msgError('获取巡检记录失败');
|
|
|
}
|
|
|
break;
|
|
|
|
|
|
case 'alarm':
|
|
|
try {
|
|
|
const res = await getBaseAlarmInfoList({ machineId:machineId });
|
|
|
const alarms = getListData(res);
|
|
|
if (alarms.length > 0) {
|
|
|
alarms.slice(0, 10).forEach(alarm => {
|
|
|
events.push({
|
|
|
id: `alarm-${alarm.alarmId}`,
|
|
|
type: 'alarm',
|
|
|
title: '设备报警',
|
|
|
description: `报警类型: ${alarm.alarmTypeName || '-'}`,
|
|
|
time: alarm.alarmTime,
|
|
|
icon: markRaw(Notification),
|
|
|
color: '#a8edea',
|
|
|
tags: ['报警', alarm.alarmLevelName],
|
|
|
details: [
|
|
|
{ label: '报警级别', value: alarm.alarmLevel ?? alarm.alarmLevelName, dictOptions: alarm_level?.value },
|
|
|
{ label: '报警内容', value: alarm.alarmContent },
|
|
|
{ label: '处理状态', value: alarm.handleStatus, dictOptions: handle_status?.value }
|
|
|
]
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取报警信息失败:', error);
|
|
|
proxy?.$modal.msgError('获取报警信息失败');
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
await Promise.all(promises);
|
|
|
|
|
|
// 仅当本次请求仍是最新请求时，应用结果
|
|
|
if (reqId === lifecycleRequestId.value) {
|
|
|
lifecycleEvents.value = events.sort((a, b) => {
|
|
|
const timeA = new Date(a.time).getTime();
|
|
|
const timeB = new Date(b.time).getTime();
|
|
|
return timeB - timeA;
|
|
|
});
|
|
|
lifecycleLoading.value = false;
|
|
|
}
|
|
|
} catch (e) {
|
|
|
if (reqId === lifecycleRequestId.value) {
|
|
|
lifecycleLoading.value = false;
|
|
|
}
|
|
|
proxy?.$modal.msgError('加载生命周期数据失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 查看详情
|
|
|
const viewDetails = async (machine) => {
|
|
|
selectedMachine.value = machine;
|
|
|
detailDialog.value = true;
|
|
|
activeTab.value = 'basic';
|
|
|
|
|
|
// 加载详情数据
|
|
|
await Promise.all([
|
|
|
loadTechnicalParams(machine.machineId),
|
|
|
loadMaintenanceStats(machine.machineId)
|
|
|
]);
|
|
|
};
|
|
|
|
|
|
// 加载技术参数
|
|
|
const loadTechnicalParams = async (machineId) => {
|
|
|
try {
|
|
|
const paramRes = await getDmsBaseSpecialdeviceParamList({ machineId });
|
|
|
|
|
|
technicalParams.value = paramRes.data?.map(param => ({
|
|
|
paramName: param.paramName,
|
|
|
paramValue: param.paramValue,
|
|
|
unit: param.paramUnit || '-',
|
|
|
remark: param.remark || '-'
|
|
|
})) || [];
|
|
|
} catch (error) {
|
|
|
console.error('获取技术参数失败:', error);
|
|
|
technicalParams.value = [];
|
|
|
proxy?.$modal.msgError('获取技术参数失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 加载维护统计
|
|
|
const loadMaintenanceStats = async (machineId) => {
|
|
|
try {
|
|
|
const statsRes = await getDmsDeviceMaintenanceStats({ machineId });
|
|
|
const statsData = statsRes.data || {};
|
|
|
|
|
|
maintenanceStats.value = {
|
|
|
planned: statsData.plannedCount || 0,
|
|
|
temporary: statsData.temporaryCount || 0,
|
|
|
avgInterval: statsData.avgInterval || 0,
|
|
|
nextDate: statsData.nextMaintenanceDate ? formatDate(statsData.nextMaintenanceDate) : null
|
|
|
};
|
|
|
|
|
|
// 修复：通过维保明细表查询维护记录
|
|
|
const maintDetailRes = await getDmsBillsMaintDetailList({ machineId, pageNum: 1, pageSize: 10 });
|
|
|
const maintDetails = (maintDetailRes.data || maintDetailRes.rows || []);
|
|
|
|
|
|
// 从维保明细中提取维护记录，按工单去重处理
|
|
|
const maintInstanceMap = new Map();
|
|
|
maintDetails.forEach(detail => {
|
|
|
const maintInstanceId = detail.maintInstanceId;
|
|
|
if (!maintInstanceMap.has(maintInstanceId)) {
|
|
|
maintInstanceMap.set(maintInstanceId, {
|
|
|
maintCode: detail.billsMaintCode || `MAINT-${detail.maintInstanceId}`,
|
|
|
maintType: detail.maintLevel || 1, // 保养级别对应保养类型
|
|
|
maintDate: formatDate(detail.beginTime || detail.createTime),
|
|
|
maintPerson: detail.maintSupervisor || '-',
|
|
|
maintContent: detail.operationDescription || '-',
|
|
|
maintStatus: detail.maintStatus || 1
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
maintenanceRecords.value = Array.from(maintInstanceMap.values());
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('获取维护统计失败:', error);
|
|
|
maintenanceStats.value = { planned: 0, temporary: 0, avgInterval: 0, nextDate: null };
|
|
|
maintenanceRecords.value = [];
|
|
|
proxy?.$modal.msgError('获取维护统计失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 加载生命周期类型统计
|
|
|
const loadLifecycleTypes = async () => {
|
|
|
if (!selectedMachine.value) return;
|
|
|
|
|
|
const machineId = selectedMachine.value.machineId;
|
|
|
|
|
|
try {
|
|
|
const [
|
|
|
purchaseCount,
|
|
|
installCount,
|
|
|
debuggingCount,
|
|
|
maintCount, // 使用新的后端接口
|
|
|
faultCount,
|
|
|
inspectCount, // 使用新的后端接口
|
|
|
alarmCount
|
|
|
] = await Promise.all([
|
|
|
getPurchaseCount({ machineId }).catch(() => ({ data: 0 })),
|
|
|
getInstallCount({ machineId }).catch(() => ({ data: 0 })),
|
|
|
getDebuggingCount({ machineId }).catch(() => ({ data: 0 })),
|
|
|
countMaintInstancesByMachineId(machineId).catch(() => ({ data: 0 })),
|
|
|
getFaultInstanceCount({ machineId }).catch(() => ({ data: 0 })),
|
|
|
countInspectInstancesByMachineId(machineId).catch(() => ({ data: 0 })),
|
|
|
getAlarmInfoCount({ machineId }).catch(() => ({ data: 0 }))
|
|
|
]);
|
|
|
|
|
|
// 更新类型计数
|
|
|
lifecycleTypes.value.forEach(type => {
|
|
|
switch (type.value) {
|
|
|
case 'purchase':
|
|
|
type.count = purchaseCount.data || 0;
|
|
|
break;
|
|
|
case 'install':
|
|
|
type.count = (installCount.data || 0) + (debuggingCount.data || 0);
|
|
|
break;
|
|
|
case 'maintenance':
|
|
|
type.count = maintCount.data || 0;
|
|
|
break;
|
|
|
case 'fault':
|
|
|
type.count = faultCount.data || 0;
|
|
|
break;
|
|
|
case 'inspection':
|
|
|
type.count = inspectCount.data || 0;
|
|
|
break;
|
|
|
case 'alarm':
|
|
|
type.count = alarmCount.data || 0;
|
|
|
break;
|
|
|
default:
|
|
|
type.count = 0;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('加载生命周期类型统计失败:', error);
|
|
|
proxy?.$modal.msgError('加载生命周期类型统计失败');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 定时更新
|
|
|
let timer = null;
|
|
|
onMounted(() => {
|
|
|
getList();
|
|
|
getDeviceTypes();
|
|
|
// getWorkshopListSelect();
|
|
|
getDmsDeviceModeListSelect();
|
|
|
updateCurrentTime();
|
|
|
timer = setInterval(updateCurrentTime, 1000);
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
clearInterval(timer);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 监听生命周期类型变化，自动加载数据
|
|
|
watch(selectedLifecycleTypes, (newTypes) => {
|
|
|
if (newTypes.length > 0 && selectedMachine.value) {
|
|
|
loadLifecycleData();
|
|
|
} else {
|
|
|
// 作废在途请求，防止已发起的请求在清空选择后回填数据
|
|
|
lifecycleRequestId.value++;
|
|
|
lifecycleEvents.value = [];
|
|
|
lifecycleLoading.value = false;
|
|
|
}
|
|
|
}, { deep: true });
|
|
|
|
|
|
// 监听选中设备变化，重置生命周期选择和数据
|
|
|
watch(selectedMachine, (newMachine) => {
|
|
|
if (newMachine) {
|
|
|
selectedLifecycleTypes.value = [];
|
|
|
lifecycleEvents.value = [];
|
|
|
loadLifecycleTypes();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.dms-machine-ledger {
|
|
|
min-height: 100vh;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
padding: 6px;
|
|
|
}
|
|
|
|
|
|
.factory-bg-decoration {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 60px;
|
|
|
z-index: 0;
|
|
|
|
|
|
svg {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.top-info-panel {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 8px 16px;
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 8px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.panel-left {
|
|
|
.page-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin: 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
}
|
|
|
|
|
|
.page-subtitle {
|
|
|
font-size: 11px;
|
|
|
color: #7f8c8d;
|
|
|
margin: 1px 0 0 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.panel-right {
|
|
|
.current-time {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 3px;
|
|
|
font-size: 12px;
|
|
|
color: #34495e;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.action-toolbar {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
.toolbar-left, .toolbar-right {
|
|
|
display: flex;
|
|
|
gap: 6px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search-filter-card {
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
.filter-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.filter-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
:deep(.el-card__body) {
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
.el-form {
|
|
|
.el-form-item {
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
.grid-view {
|
|
|
.machine-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(5, 1fr); // 修改为一行5个
|
|
|
gap: 8px;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.machine-card-wrapper {
|
|
|
cursor: pointer;
|
|
|
|
|
|
.machine-card {
|
|
|
background: #fff;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px;
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
|
|
|
&:hover {
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
&.selected {
|
|
|
border: 2px solid #409EFF;
|
|
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.status-indicator {
|
|
|
position: absolute;
|
|
|
top: 6px;
|
|
|
right: 6px;
|
|
|
|
|
|
.status-dot {
|
|
|
display: inline-block;
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
|
border-radius: 50%;
|
|
|
animation: pulse 2s infinite;
|
|
|
}
|
|
|
|
|
|
&.status-0 .status-dot { background: #f56c6c; }
|
|
|
&.status-1 .status-dot { background: #67c23a; }
|
|
|
&.status-2 .status-dot { background: #e6a23c; }
|
|
|
&.status-3 .status-dot { background: #909399; }
|
|
|
}
|
|
|
|
|
|
.machine-visual {
|
|
|
text-align: center;
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
.machine-icon-bg {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
|
border-radius: 6px;
|
|
|
color: #fff;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.machine-photo {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
margin-bottom: 4px;
|
|
|
border-radius: 6px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.machine-number {
|
|
|
font-size: 11px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.machine-details {
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
.machine-name {
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin: 0 0 4px 0;
|
|
|
text-align: center;
|
|
|
line-height: 1.2;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.machine-meta {
|
|
|
.meta-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 2px;
|
|
|
font-size: 10px;
|
|
|
color: #7f8c8d;
|
|
|
margin-bottom: 2px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.quick-actions {
|
|
|
display: flex;
|
|
|
gap: 4px;
|
|
|
justify-content: center;
|
|
|
|
|
|
.el-button {
|
|
|
padding: 2px 6px;
|
|
|
font-size: 10px;
|
|
|
min-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.list-view {
|
|
|
.status-cell {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
|
|
|
.status-badge {
|
|
|
display: inline-block;
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
|
border-radius: 50%;
|
|
|
|
|
|
&.status-0 { background: #f56c6c; }
|
|
|
&.status-1 { background: #67c23a; }
|
|
|
&.status-2 { background: #e6a23c; }
|
|
|
&.status-3 { background: #909399; }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.date-text {
|
|
|
font-size: 12px;
|
|
|
color: #606266;
|
|
|
}
|
|
|
|
|
|
:deep(.danger-row) {
|
|
|
background-color: rgba(245, 108, 108, 0.05);
|
|
|
}
|
|
|
|
|
|
:deep(.warning-row) {
|
|
|
background-color: rgba(230, 162, 60, 0.05);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.lifecycle-drawer {
|
|
|
:deep(.el-drawer__body) {
|
|
|
padding: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.lifecycle-container {
|
|
|
.device-overview-card {
|
|
|
background: #fff;
|
|
|
border-radius: 6px;
|
|
|
padding: 12px;
|
|
|
margin-bottom: 12px;
|
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.overview-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
|
|
|
.device-avatar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
|
border-radius: 10px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.device-basic {
|
|
|
h2 {
|
|
|
margin: 0 0 3px 0;
|
|
|
font-size: 16px;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
margin: 0;
|
|
|
font-size: 12px;
|
|
|
color: #7f8c8d;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.overview-stats {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
|
|
gap: 10px;
|
|
|
|
|
|
.stat {
|
|
|
text-align: center;
|
|
|
|
|
|
.stat-label {
|
|
|
display: block;
|
|
|
font-size: 11px;
|
|
|
color: #7f8c8d;
|
|
|
margin-bottom: 3px;
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
display: block;
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.lifecycle-type-selector {
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
h3 {
|
|
|
margin: 0 0 10px 0;
|
|
|
font-size: 15px;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
|
|
|
.type-cards {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
|
gap: 6px;
|
|
|
|
|
|
.type-card {
|
|
|
background: #fff;
|
|
|
border: 2px solid #e1e6f0;
|
|
|
border-radius: 6px;
|
|
|
padding: 10px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #409EFF;
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
border-color: #409EFF;
|
|
|
background: #f0f9ff;
|
|
|
}
|
|
|
|
|
|
.type-icon {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 5px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.type-name {
|
|
|
display: block;
|
|
|
font-size: 11px;
|
|
|
color: #2c3e50;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.type-count {
|
|
|
position: absolute;
|
|
|
top: -3px;
|
|
|
right: -3px;
|
|
|
background: #409EFF;
|
|
|
color: #fff;
|
|
|
border-radius: 8px;
|
|
|
padding: 1px 5px;
|
|
|
font-size: 9px;
|
|
|
min-width: 14px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.lifecycle-timeline-container {
|
|
|
h3 {
|
|
|
margin: 0 0 10px 0;
|
|
|
font-size: 15px;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
|
|
|
.timeline-wrapper {
|
|
|
position: relative;
|
|
|
|
|
|
.timeline-item {
|
|
|
position: relative;
|
|
|
padding-left: 35px;
|
|
|
padding-bottom: 16px;
|
|
|
|
|
|
&:last-child {
|
|
|
.timeline-line {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.timeline-marker {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 28px;
|
|
|
height: 28px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: #fff;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
.timeline-content {
|
|
|
background: #fff;
|
|
|
border-radius: 6px;
|
|
|
padding: 10px;
|
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.event-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
h4 {
|
|
|
margin: 0;
|
|
|
font-size: 13px;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
|
|
|
.event-time {
|
|
|
font-size: 11px;
|
|
|
color: #7f8c8d;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.event-description {
|
|
|
font-size: 12px;
|
|
|
color: #606266;
|
|
|
margin: 0 0 6px 0;
|
|
|
}
|
|
|
|
|
|
.event-tags {
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
.el-tag {
|
|
|
margin-right: 3px;
|
|
|
margin-bottom: 3px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.timeline-line {
|
|
|
position: absolute;
|
|
|
left: 13px;
|
|
|
top: 28px;
|
|
|
width: 2px;
|
|
|
height: 100%;
|
|
|
background: #e1e6f0;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.detail-section {
|
|
|
.card-header-title {
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
|
|
|
.maintenance-section {
|
|
|
.maintenance-summary {
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.filter-btn-primary {
|
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
|
border: none;
|
|
|
|
|
|
&:hover {
|
|
|
background: linear-gradient(45deg, #5a6fd8, #6a4190);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
|
0% {
|
|
|
transform: scale(0.95);
|
|
|
box-shadow: 0 0 0 0 currentColor;
|
|
|
}
|
|
|
|
|
|
70% {
|
|
|
transform: scale(1);
|
|
|
box-shadow: 0 0 0 10px transparent;
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: scale(0.95);
|
|
|
box-shadow: 0 0 0 0 transparent;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fade-transform-enter-active,
|
|
|
.fade-transform-leave-active {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.fade-transform-enter-from {
|
|
|
opacity: 0;
|
|
|
transform: translateY(20px);
|
|
|
}
|
|
|
|
|
|
.fade-transform-leave-to {
|
|
|
opacity: 0;
|
|
|
transform: translateY(-20px);
|
|
|
}
|
|
|
</style>
|