303 lines
11 KiB
Vue
303 lines
11 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="group-section">
|
|
<div class="group-title">四向车</div>
|
|
<el-row :gutter="20">
|
|
<el-col v-for="dev in Sagv" :key="dev.id" :span="12">
|
|
<el-card shadow="always" class="device-card">
|
|
<div slot="header" class="card-header gradient">
|
|
<span class="device-title">{{ dev.name }}</span>
|
|
<div class="header-tags">
|
|
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
|
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-row :gutter="10" class="card-body">
|
|
<el-col :span="16">
|
|
<el-row class="data-grid">
|
|
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
|
<span class="data-label">{{ item.label }}</span>
|
|
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
|
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="8" class="image-wrap">
|
|
<el-image :src="imageUrl2" fit="contain" class="device-image" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="group-section">
|
|
<div class="group-title">输送机</div>
|
|
<el-row :gutter="20">
|
|
<el-col v-for="dev in SSJ" :key="dev.id" :span="12">
|
|
<el-card shadow="always" class="device-card">
|
|
<div slot="header" class="card-header gradient">
|
|
<span class="device-title">{{ dev.name }}</span>
|
|
<div class="header-tags">
|
|
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
|
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-row :gutter="10" class="card-body">
|
|
<el-col :span="16">
|
|
<el-row class="data-grid">
|
|
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
|
<span class="data-label">{{ item.label }}</span>
|
|
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
|
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="8" class="image-wrap">
|
|
<el-image :src="imageUrl1" fit="contain" class="device-image" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="group-section">
|
|
<div class="group-title">提升机</div>
|
|
<el-row :gutter="20">
|
|
<el-col v-for="dev in TSJ" :key="dev.id" :span="12">
|
|
<el-card shadow="always" class="device-card">
|
|
<div slot="header" class="card-header gradient">
|
|
<span class="device-title">{{ dev.name }}</span>
|
|
<div class="header-tags">
|
|
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
|
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-row :gutter="10" class="card-body">
|
|
<el-col :span="16">
|
|
<el-row class="data-grid">
|
|
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
|
<span class="data-label">{{ item.label }}</span>
|
|
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
|
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="8" class="image-wrap">
|
|
<el-image :src="imageUrl3" fit="contain" class="device-image" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import "@/assets/styles/index.scss"
|
|
import ssjImg from "@/assets/images/ssj.png"
|
|
import agvImg from "@/assets/images/agv.png"
|
|
import tsjImg from "@/assets/images/tsj.png"
|
|
import { srgvList, tsjList, listSsj } from "@/api/device/monitor"
|
|
import { selectDictLabel } from "@/utils/ruoyi"
|
|
|
|
export default {
|
|
name: "deviceMonitor",
|
|
dicts: ['srgv_work_phase','srgv_work_mode','srgv_status','srgv_err_msg','srgv_alarm','srgv_task_type','ssj_dw','ssj_kx','ssj_ex','tsj_zxjd','tsj_alarm'],
|
|
data() {
|
|
return {
|
|
imageUrl1: ssjImg,
|
|
imageUrl2: agvImg,
|
|
imageUrl3: tsjImg,
|
|
Sagv: [],
|
|
SSJ: [],
|
|
TSJ: [],
|
|
pollTimer: null
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchAll()
|
|
this.pollTimer = setInterval(() => {
|
|
this.fetchAll()
|
|
}, 3000)
|
|
},
|
|
beforeDestroy() {
|
|
if (this.pollTimer) {
|
|
clearInterval(this.pollTimer)
|
|
this.pollTimer = null
|
|
}
|
|
},
|
|
methods: {
|
|
valueClass(key) {
|
|
if (key === 'rowDistanceKm') return 'value-warn'
|
|
if (key === 'columnDistanceKm') return 'value-accent'
|
|
return ''
|
|
},
|
|
tagLeft(dev) {
|
|
if (dev.kind === 'ssj') return '任务号 ' + (dev.raw.taskNo || '-')
|
|
if (dev.kind === 'srgv') return '任务号 ' + (dev.raw.taskNo || '-')
|
|
if (dev.kind === 'tsj') return '任务号 ' + (dev.raw.rwh || '-')
|
|
return ''
|
|
},
|
|
tagRight(dev) {
|
|
if (dev.kind === 'ssj') return '空闲 ' + (dev.raw.kx+"" || '-')
|
|
if (dev.kind === 'srgv') return '层 ' + (dev.raw.currFloor || '-')
|
|
if (dev.kind === 'tsj') return '层 ' + (dev.raw.dqcs || '-')
|
|
return ''
|
|
},
|
|
dataItems(dev) {
|
|
if (dev.kind === 'ssj') {
|
|
const d = dev.raw
|
|
return [
|
|
{ key: 'deviceCode', label: '设备编码', value: d.deviceCode },
|
|
{ key: 'trayCode', label: '托盘条码', value: d.trayCode },
|
|
{ key: 'taskNo', label: '任务号', value: d.taskNo },
|
|
{ key: 'traySize', label: '托盘尺寸', value: d.traySize },
|
|
{ key: 'allowPut', label: '允许放货', value: d.allowPut },
|
|
{ key: 'kx', label: '空闲', value: d.kx, dict: 'ssj_kx' },
|
|
{ key: 'dw', label: '到位', value: d.dw, dict: 'ssj_dw' },
|
|
{ key: 'exception', label: '异常', value: d.exception, dict: 'ssj_ex'},
|
|
]
|
|
}
|
|
if (dev.kind === 'srgv') {
|
|
const d = dev.raw
|
|
return [
|
|
// { key: 'deviceName', label: '设备名称', value: d.deviceName },
|
|
{ key: 'deviceId', label: '设备编码', value: d.deviceId },
|
|
{ key: 'currSite', label: '当前位置', value: d.currSite },
|
|
{ key: 'srcSite', label: '原位置', value: d.srcSite },
|
|
{ key: 'tarSite', label: '目标位置', value: d.tarSite },
|
|
{ key: 'taskNo', label: '任务号', value: d.taskNo },
|
|
{ key: 'taskType', label: '任务类型', value: d.taskType, dict: 'srgv_task_type' },
|
|
{ key: 'battery', label: '电量', value: d.battery },
|
|
{ key: 'workMode', label: '工作模式', value: d.workMode, dict: 'srgv_work_mode' },
|
|
{ key: 'status', label: '车状态', value: d.status, dict: 'srgv_status' },
|
|
{ key: 'workPhase', label: '执行阶段', value: d.workPhase, dict: 'srgv_work_phase' },
|
|
{ key: 'chargeFlag', label: '充电标志', value: d.chargeFlag },
|
|
{ key: 'alarm', label: '报警信息', value: d.alarm, dict: 'srgv_alarm' },
|
|
{ key: 'errMsg', label: '异常信息', value: d.errMsg, dict: 'srgv_err_msg' },
|
|
{ key: 'currFloor', label: '当前层数', value: d.currFloor }
|
|
]
|
|
}
|
|
if (dev.kind === 'tsj') {
|
|
const d = dev.raw
|
|
return [
|
|
{ key: 'name', label: '设备名称', value: d.name },
|
|
{ key: 'rwh', label: '任务号', value: d.rwh },
|
|
{ key: 'yxxf', label: '允许下发', value: d.yxxf },
|
|
{ key: 'dqcs', label: '当前层数', value: d.dqcs },
|
|
{ key: 'ych', label: '原层', value: d.ych },
|
|
{ key: 'mbch', label: '目标层', value: d.mbch },
|
|
{ key: 'hczt', label: '载货状态', value: d.hczt },
|
|
{ key: 'xtxh', label: '心跳信号', value: d.xtxh },
|
|
{ key: 'sbzt', label: '设备状态', value: d.sbzt, dict: 'tsj_alarm' },
|
|
{ key: 'jdbz', label: '执行阶段', value: d.jdbz, dict: 'tsj_zxjd' }
|
|
]
|
|
}
|
|
return []
|
|
},
|
|
fetchAll() {
|
|
Promise.all([srgvList({}), listSsj({}), tsjList({})]).then(([srgvRes, ssjRes, tsjRes]) => {
|
|
const srgvRows = srgvRes.rows || srgvRes.data || []
|
|
const ssjRows = ssjRes.rows || ssjRes.data || []
|
|
const tsjRows = tsjRes.rows || tsjRes.data || []
|
|
this.Sagv = srgvRows.map(it => ({ id: it.deviceId || it.guid || it.id, name: it.deviceName || it.name, kind: 'srgv', raw: it }))
|
|
this.SSJ = ssjRows.map(it => ({ id: it.id || it.deviceCode, name: it.name, kind: 'ssj', raw: it }))
|
|
this.TSJ = tsjRows.map(it => ({ id: it.id, name: it.name, kind: 'tsj', raw: it }))
|
|
console.log(srgvRows)
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.group-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
.group-title {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 10px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(90deg, rgba(16,108,123,0.12), rgba(255,255,255,0));
|
|
color: #106c7b;
|
|
}
|
|
.device-card {
|
|
margin-bottom: 20px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.card-body {
|
|
padding: 6px 8px;
|
|
}
|
|
.gradient {
|
|
background: linear-gradient(90deg, rgba(16,108,123,0.1), rgba(255,255,255,0));
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.header-tags {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.device-title {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
.stat-bar {
|
|
margin: 4px 0 8px 0;
|
|
}
|
|
.stat-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.stat-label {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: #606266;
|
|
}
|
|
.data-grid {
|
|
margin-top: 6px;
|
|
}
|
|
.data-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px dashed #eee;
|
|
}
|
|
.data-label {
|
|
color: #909399;
|
|
}
|
|
.data-value {
|
|
color: #303133;
|
|
font-weight: 500;
|
|
}
|
|
.value-warn {
|
|
color: #e6a23c;
|
|
}
|
|
.value-accent {
|
|
color: #67c23a;
|
|
}
|
|
.image-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.device-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
|
|
}
|
|
.image-url {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
</style>
|