初始化
This commit is contained in:
liuhanqing
420
ruoyi-ui/src/views/device/ssj/index.vue
Normal file
420
ruoyi-ui/src/views/device/ssj/index.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索和操作区域 -->
|
||||
|
||||
|
||||
<!-- 7个表格区域 -->
|
||||
<el-row :gutter="20" class="table-container">
|
||||
<el-col :span="24" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">堆垛机监控</span>
|
||||
<el-tag type="success" size="mini">总计: 6 台</el-tag>
|
||||
</div>
|
||||
<el-table :data="ddjData" size="mini" style="width: 100%">
|
||||
<el-table-column label="id" align="center" prop="id"/>
|
||||
<el-table-column label="堆垛机名称" align="center" prop="name"/>
|
||||
<el-table-column label="当前巷道" align="center" prop="dqxd"/>
|
||||
<el-table-column label="任务号" align="center" prop="rwh"/>
|
||||
<el-table-column label="阶段标志" align="center" prop="jdbz">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_task_status" :value="scope.row.jdbz"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" prop="sbzt">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_sbzt" :value="scope.row.sbzt"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作方式" align="center" prop="czfs">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_czfs" :value="scope.row.czfs"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="允许下发" align="center" prop="yxxf">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_yxxf" :value="scope.row.yxxf"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原排" align="center" prop="yph"/>
|
||||
<el-table-column label="原列" align="center" prop="ylh"/>
|
||||
<el-table-column label="原层" align="center" prop="ych"/>
|
||||
<el-table-column label="目标排" align="center" prop="mbph"/>
|
||||
<el-table-column label="目标列" align="center" prop="mblh"/>
|
||||
<el-table-column label="目标层" align="center" prop="mbch"/>
|
||||
<el-table-column label="心跳信号" align="center" prop="xtxh"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="table-container">
|
||||
<!-- 表格1：入库输送机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道1输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table1Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table1Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格2：出库输送机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道2输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table2Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table2Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格3：分拣输送机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道3输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table3Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table3Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="table-container">
|
||||
<!-- 表格4：提升机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道4输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table4Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table4Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格5：移载机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道5输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table5Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table5Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格6：旋转台 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道6输送机</span>
|
||||
<el-tag size="success">{{ table6Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table6Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listSsj} from "@/api/device/ssj";
|
||||
import "@/assets/styles/index.scss";
|
||||
import {listDdj} from "@/api/device/ddj"
|
||||
|
||||
|
||||
export default {
|
||||
name: "deviceMonitor",
|
||||
dicts: ['ddj_task_status', 'ddj_sbzt', 'ddj_czfs', 'ddj_yxxf', 'ddj_hczt', 'ssj_dw', 'ssj_kx', 'ssj_model', 'ssj_ex'],
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 99
|
||||
},
|
||||
// 7个表格的模拟数据
|
||||
table1Data: [], // 入库输送机
|
||||
table2Data: [], // 出库输送机
|
||||
table3Data: [], // 分拣输送机
|
||||
table4Data: [], // 提升机
|
||||
table5Data: [], // 移载机
|
||||
table6Data: [], // 旋转台
|
||||
ddjData: [], // 汇总统计
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initMockData()
|
||||
},
|
||||
mounted() {
|
||||
this.timer = setInterval(() => {
|
||||
this.initMockData();
|
||||
}, 1000); // 每1秒刷新一次
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
methods: {
|
||||
/** 初始化模拟数据 */
|
||||
initMockData() {
|
||||
listDdj().then(response => {
|
||||
this.ddjData = response.rows
|
||||
})
|
||||
listSsj(this.queryParams).then(response => {
|
||||
this.table1Data = response.rows.filter(item => item.deviceCode === 'L2001' || item.deviceCode === 'L2002' || item.deviceCode === 'L2007' || item.deviceCode === 'L2008')
|
||||
this.table2Data = response.rows.filter(item => item.deviceCode === 'L2003' || item.deviceCode === 'L2004' || item.deviceCode === 'L2009' || item.deviceCode === 'L2010')
|
||||
this.table3Data = response.rows.filter(item => item.deviceCode === 'L2005' || item.deviceCode === 'L2006' || item.deviceCode === 'L2011' || item.deviceCode === 'L2012')
|
||||
this.table4Data = response.rows.filter(item => item.deviceCode === 'L1001' || item.deviceCode === 'L1002')
|
||||
this.table5Data = response.rows.filter(item => item.deviceCode === 'L1003' || item.deviceCode === 'L1004')
|
||||
this.table6Data = response.rows.filter(item => item.deviceCode === 'L1005' || item.deviceCode === 'L1006')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-form-item >>> .el-form-item__label {
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
/* 表格容器样式 */
|
||||
.table-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 表格卡片样式 */
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-card:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 表格头部样式 */
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
background: #ffffff; /* Element UI 主题蓝 */
|
||||
color: rgb(0, 0, 0);
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 表格样式调整 */
|
||||
.el-table {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.el-table--mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1200px) {
|
||||
.el-col-8 {
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.el-col-8 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签样式优化 */
|
||||
.el-tag {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.el-progress {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user