修改监控页面

This commit is contained in:
liuhanqing
2025-11-06 16:59:43 +08:00
parent 17ce7a54de
commit 341f21fa0e
2 changed files with 477 additions and 550 deletions

View File

@@ -1,483 +1,436 @@
<template>
<div class="app-container">
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
<!--&lt;!&ndash; <el-form-item label="堆垛机名称" prop="name">-->
<!-- <el-input-->
<!-- v-model="queryParams.name"-->
<!-- placeholder="请输入堆垛机名称"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>&ndash;&gt;-->
<!-- <el-form-item label="任务号" prop="rwh">-->
<!-- <el-input-->
<!-- v-model="queryParams.rwh"-->
<!-- placeholder="请输入任务号"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="阶段标志" prop="jdbz">-->
<!-- <el-input-->
<!-- v-model="queryParams.jdbz"-->
<!-- placeholder="请输入阶段标志"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态" prop="sbzt">-->
<!-- <el-input-->
<!-- v-model="queryParams.sbzt"-->
<!-- placeholder="请输入状态"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="操作方式" prop="czfs">-->
<!-- <el-input-->
<!-- v-model="queryParams.czfs"-->
<!-- placeholder="请输入操作方式"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!--&lt;!&ndash; <el-form-item label="允许下发" prop="yxxf">-->
<!-- <el-input-->
<!-- v-model="queryParams.yxxf"-->
<!-- placeholder="请输入允许下发"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item label="原排" prop="yph">-->
<!-- <el-input-->
<!-- v-model="queryParams.yph"-->
<!-- placeholder="请输入原排"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="原列" prop="ylh">-->
<!-- <el-input-->
<!-- v-model="queryParams.ylh"-->
<!-- placeholder="请输入原列"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="原层" prop="ych">-->
<!-- <el-input-->
<!-- v-model="queryParams.ych"-->
<!-- placeholder="请输入原层"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="目标排" prop="mbph">-->
<!-- <el-input-->
<!-- v-model="queryParams.mbph"-->
<!-- placeholder="请输入目标排"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="目标列" prop="mblh">-->
<!-- <el-input-->
<!-- v-model="queryParams.mblh"-->
<!-- placeholder="请输入目标列"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="目标层" prop="mbch">-->
<!-- <el-input-->
<!-- v-model="queryParams.mbch"-->
<!-- placeholder="请输入目标层"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="心跳信号" prop="xtxh">-->
<!-- <el-input-->
<!-- v-model="queryParams.xtxh"-->
<!-- placeholder="请输入心跳信号"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="当前巷道" prop="dqxd">-->
<!-- <el-input-->
<!-- v-model="queryParams.dqxd"-->
<!-- placeholder="请输入当前巷道"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>&ndash;&gt;-->
<!-- <el-form-item label="货叉状态" prop="hczt">-->
<!-- <el-input-->
<!-- v-model="queryParams.hczt"-->
<!-- placeholder="请输入货叉状态"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!--&lt;!&ndash; <el-form-item label="备用字段1" prop="spare1">-->
<!-- <el-input-->
<!-- v-model="queryParams.spare1"-->
<!-- placeholder="请输入备用字段1"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备用字段2" prop="spare2">-->
<!-- <el-input-->
<!-- v-model="queryParams.spare2"-->
<!-- placeholder="请输入备用字段2"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备用字段3" prop="spare3">-->
<!-- <el-input-->
<!-- v-model="queryParams.spare3"-->
<!-- placeholder="请输入备用字段3"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>&ndash;&gt;-->
<!-- <el-form-item>-->
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- 搜索和操作区域 -->
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['device:ddj:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['device:ddj:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['device:ddj:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['device:ddj:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>-->
<el-table v-loading="loading" :data="ddjList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="堆垛机名称" align="center" prop="name" />
<el-table-column label="任务号" align="center" prop="rwh" />
<el-table-column label="阶段标志" align="center" prop="jdbz" />
<el-table-column label="状态" align="center" prop="sbzt" />
<el-table-column label="操作方式" align="center" prop="czfs" />
<el-table-column label="允许下发" align="center" prop="yxxf" />
<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-column label="当前巷道" align="center" prop="dqxd" />
<el-table-column label="货叉状态" align="center" prop="hczt" />
<el-table-column label="备用字段1" align="center" prop="spare1" />
<el-table-column label="备用字段2" align="center" prop="spare2" />
<el-table-column label="备用字段3" align="center" prop="spare3" />
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['device:ddj:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['device:ddj:remove']"
>删除</el-button>
</template>
</el-table-column>-->
</el-table>
<!-- 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>
<el-col :span="24">
<div class="floor-title">一层</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">产线输送机</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.tray_size" :value="scope.row.traySize"/>
</template>
</el-table-column>
<el-table-column label="托盘码" prop="trayCode" width="600" />
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</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">入出库口输送机</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="allowPut" >
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_allow_put" :value="scope.row.allowPut"/>
</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">巷道口输送机</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>
</div>
</el-col>
</el-row>
<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">AGV</span>
<el-tag type="success" size="mini">{{ agvData.length }}台</el-tag>
</div>
<el-table :data="agvData" size="mini" style="width: 100%">
<el-table-column label="设备编码" align="center" prop="deviceCode" />
<el-table-column label="设备名称" align="center" prop="name" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="起点" align="center" prop="spare1" />
<el-table-column label="终点" align="center" prop="spare2" />
<el-table-column label="任务号" align="center" prop="taskNo" />
<el-table-column label="执行阶段" align="center" prop="zxjd" />
</el-table>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="floor-title">二层</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">入出库输送机</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="trayCode" width="600"/>
</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">出库输送机</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>
</div>
</el-col>
<!-- 表格6:旋转台 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道口输送机</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>
</div>
</el-col>
</el-row>
<!-- 添加或修改堆垛机监控对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="堆垛机名称" prop="name">
<el-input v-model="form.name" placeholder="请输入堆垛机名称" />
</el-form-item>
<el-form-item label="任务号" prop="rwh">
<el-input v-model="form.rwh" placeholder="请输入任务号" />
</el-form-item>
<el-form-item label="阶段标志" prop="jdbz">
<el-input v-model="form.jdbz" placeholder="请输入阶段标志" />
</el-form-item>
<el-form-item label="状态" prop="sbzt">
<el-input v-model="form.sbzt" placeholder="请输入状态" />
</el-form-item>
<el-form-item label="操作方式" prop="czfs">
<el-input v-model="form.czfs" placeholder="请输入操作方式" />
</el-form-item>
<el-form-item label="允许下发" prop="yxxf">
<el-input v-model="form.yxxf" placeholder="请输入允许下发" />
</el-form-item>
<el-form-item label="原排" prop="yph">
<el-input v-model="form.yph" placeholder="请输入原排" />
</el-form-item>
<el-form-item label="原列" prop="ylh">
<el-input v-model="form.ylh" placeholder="请输入原列" />
</el-form-item>
<el-form-item label="原层" prop="ych">
<el-input v-model="form.ych" placeholder="请输入原层" />
</el-form-item>
<el-form-item label="目标排" prop="mbph">
<el-input v-model="form.mbph" placeholder="请输入目标排" />
</el-form-item>
<el-form-item label="目标列" prop="mblh">
<el-input v-model="form.mblh" placeholder="请输入目标列" />
</el-form-item>
<el-form-item label="目标层" prop="mbch">
<el-input v-model="form.mbch" placeholder="请输入目标层" />
</el-form-item>
<el-form-item label="心跳信号" prop="xtxh">
<el-input v-model="form.xtxh" placeholder="请输入心跳信号" />
</el-form-item>
<el-form-item label="当前巷道" prop="dqxd">
<el-input v-model="form.dqxd" placeholder="请输入当前巷道" />
</el-form-item>
<el-form-item label="货叉状态" prop="hczt">
<el-input v-model="form.hczt" placeholder="请输入货叉状态" />
</el-form-item>
<el-form-item label="备用字段1" prop="spare1">
<el-input v-model="form.spare1" placeholder="请输入备用字段1" />
</el-form-item>
<el-form-item label="备用字段2" prop="spare2">
<el-input v-model="form.spare2" placeholder="请输入备用字段2" />
</el-form-item>
<el-form-item label="备用字段3" prop="spare3">
<el-input v-model="form.spare3" placeholder="请输入备用字段3" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listDdj, getDdj, delDdj, addDdj, updateDdj } from "@/api/device/ddj"
import {listSsj} from "@/api/device/ssj";
import "@/assets/styles/index.scss";
import {listDdj} from "@/api/device/ddj"
import { listDeviceCar, getDeviceCar, delDeviceCar, addDeviceCar, updateDeviceCar } from "@/api/device/DeviceCar"
export default {
name: "Ddj",
name: "deviceMonitor",
dicts: ['ddj_task_status', 'ddj_sbzt', 'ddj_czfs', 'ddj_yxxf', 'ddj_hczt', 'ssj_dw', 'ssj_kx', 'ssj_ex','ssj_allow_put','tray_size'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 堆垛机监控表格数据
ddjList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
rwh: null,
jdbz: null,
sbzt: null,
czfs: null,
yxxf: null,
yph: null,
ylh: null,
ych: null,
mbph: null,
mblh: null,
mbch: null,
xtxh: null,
dqxd: null,
hczt: null,
spare1: null,
spare2: null,
spare3: null
pageSize: 99
},
// 表单参数
form: {},
// 表单校验
rules: {
}
}
// 7个表格的模拟数据
table1Data: [], // 入库输送机
table2Data: [], // 出库输送机
table3Data: [], // 分拣输送机
table4Data: [], // 提升机
table5Data: [], // 移载机
table6Data: [], // 旋转台
ddjData: [], // 汇总统计
agvData: [], // AGV
timer: null
};
},
created() {
this.getList()
this.initMockData()
},
mounted() {
this.timer = setInterval(() => {
this.initMockData();
}, 1000); // 每1秒刷新一次
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
},
methods: {
/** 查询堆垛机监控列表 */
getList() {
this.loading = true
listDdj(this.queryParams).then(response => {
this.ddjList = response.rows
this.total = response.total
this.loading = false
/** 初始化模拟数据 */
initMockData() {
listDdj().then(response => {
this.ddjData = response.rows
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
rwh: null,
jdbz: null,
sbzt: null,
czfs: null,
yxxf: null,
yph: null,
ylh: null,
ych: null,
mbph: null,
mblh: null,
mbch: null,
xtxh: null,
dqxd: null,
hczt: null,
spare1: null,
spare2: null,
spare3: null
}
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = "添加堆垛机监控"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getDdj(id).then(response => {
this.form = response.data
this.open = true
this.title = "修改堆垛机监控"
listSsj(this.queryParams).then(response => {
this.table1Data = response.rows.filter(item => item.deviceCode === 'G1005')
this.table2Data = response.rows.filter(item => item.deviceCode === 'L1011' || item.deviceCode === 'L1012')
this.table3Data = response.rows.filter(item => item.deviceCode === 'L1002' || item.deviceCode === 'L1004')
this.table4Data = response.rows.filter(item => item.deviceCode === 'L2012' || item.deviceCode === 'L2013')
this.table5Data = response.rows.filter(item => item.deviceCode === 'L2002' || item.deviceCode === 'L2008')
this.table6Data = response.rows.filter(item => item.deviceCode === 'L2001' || item.deviceCode === 'L2003' || item.deviceCode === 'L2005' || item.deviceCode === 'L2007')
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateDdj(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addDdj(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
listDeviceCar(this.queryParams).then(response => {
this.agvData = response.rows;
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除堆垛机监控编号为"' + ids + '"的数据项?').then(function() {
return delDdj(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download('device/ddj/export', {
...this.queryParams
}, `ddj_${new Date().getTime()}.xlsx`)
}
}
}
</script>
<style scoped>
.floor-title {
font-size: 20px;
font-weight: bold;
margin: 20px 0;
}
.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: 4px;
border: 1px solid #e6ebf5;
overflow: hidden;
transition: .3s;
}
.table-card:hover {
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
/* 表格头部样式 */
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: #f8f8f9;
border-bottom: 1px solid #e6ebf5;
}
.table-title {
font-size: 14px;
font-weight: 600;
}
/* 表格样式调整 */
.el-table--mini {
font-size: 13px;
}
.el-table th, .el-table td {
padding: 8px 0;
}
/* 响应式布局 */
@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>

View File

@@ -1,102 +1,89 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="'设备编码'" prop="deviceCode">
<el-form-item label="设备编码" prop="deviceCode">
<el-input
v-model="queryParams.deviceCode"
:placeholder="'请输入设备唯一编码'"
placeholder="请输入设备编码"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'设备名称'" prop="name">
<el-form-item label="设备名称" prop="name">
<el-input
v-model="queryParams.name"
:placeholder="'请输入设备名称'"
placeholder="请输入设备名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'设备IP'" prop="ipAddress">
<el-form-item label="IP地址" prop="ipAddress">
<el-input
v-model="queryParams.ipAddress"
:placeholder="'请输入设备IP'"
placeholder="请输入IP地址"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'PLC读取地址'" prop="plcDbReadAddress">
<el-form-item label="PLC读地址" prop="plcDbReadAddress">
<el-input
v-model="queryParams.plcDbReadAddress"
:placeholder="'请输入PLC读取地址'"
placeholder="请输入PLC读地址"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'PLC写入地址'" prop="plcDbWriteAddress">
<el-form-item label="PLC写地址" prop="plcDbWriteAddress">
<el-input
v-model="queryParams.plcDbWriteAddress"
:placeholder="'请输入PLC写入地址'"
placeholder="请输入PLC写地址"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'是否可用'" prop="isActive">
<el-input
v-model="queryParams.isActive"
:placeholder="'请输入0-F 1-T'"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
<el-form-item label="是否启用" prop="isActive">
<el-select v-model="queryParams.isActive" placeholder="请选择是否启用" clearable>
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
<el-form-item :label="'入库请求'" prop="rkqq">
<el-form-item label="入口请求" prop="rkqq">
<el-input
v-model="queryParams.rkqq"
:placeholder="'请输入入库请求'"
placeholder="请输入入口请求"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'空闲'" prop="kx">
<el-form-item label="空闲" prop="kx">
<el-input
v-model="queryParams.kx"
:placeholder="'请输入空闲'"
placeholder="请输入空闲"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'到位'" prop="dw">
<el-form-item label="定位" prop="dw">
<el-input
v-model="queryParams.dw"
:placeholder="'请输入到位'"
placeholder="请输入定位"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'条码'" prop="trayCode">
<el-form-item label="托盘码" prop="trayCode">
<el-input
v-model="queryParams.trayCode"
:placeholder="'请输入条码'"
placeholder="请输入托盘码"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'任务号'" prop="taskNo">
<el-form-item label="任务号" prop="taskNo">
<el-input
v-model="queryParams.taskNo"
:placeholder="'请输入任务号'"
placeholder="请输入任务号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
@@ -123,6 +110,7 @@
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['device:ssj:edit']"
>修改</el-button>
@@ -133,6 +121,7 @@
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['device:ssj:remove']"
>删除</el-button>
@@ -147,20 +136,29 @@
v-hasPermi="['device:ssj:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="ssjList">
<el-table v-loading="loading" :data="ssjList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="设备编码" align="center" prop="deviceCode" />
<el-table-column label="设备名称" align="center" prop="name" />
<el-table-column label="类型" align="center" prop="type" />
<el-table-column label="设备IP" align="center" prop="ipAddress" />
<el-table-column label="PLC读取地址" align="center" prop="plcDbReadAddress" />
<el-table-column label="PLC写入地址" align="center" prop="plcDbWriteAddress" />
<el-table-column label="是否可用" align="center" prop="isActive" />
<el-table-column label="入库请求" align="center" prop="rkqq" />
<el-table-column label="设备类型" align="center" prop="type" />
<el-table-column label="IP地址" align="center" prop="ipAddress" />
<el-table-column label="PLC读地址" align="center" prop="plcDbReadAddress" />
<el-table-column label="PLC写地址" align="center" prop="plcDbWriteAddress" />
<el-table-column label="是否启用" align="center" prop="isActive">
<template slot-scope="scope">
<el-tag :type="scope.row.isActive ? 'success' : 'info'" size="small">
{{ scope.row.isActive ? '是' : '否' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="入口请求" align="center" prop="rkqq" />
<el-table-column label="空闲" align="center" prop="kx" />
<el-table-column label="到位" align="center" prop="dw" />
<el-table-column label="条码" align="center" prop="trayCode" />
<el-table-column label="定位" align="center" prop="dw" />
<el-table-column label="托盘码" align="center" prop="trayCode" />
<el-table-column label="任务号" align="center" prop="taskNo" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@@ -181,7 +179,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@@ -194,41 +192,11 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="设备编码" prop="deviceCode">
<el-input v-model="form.deviceCode" placeholder="请输入设备唯一编码" />
<el-input v-model="form.deviceCode" placeholder="请输入设备编码" />
</el-form-item>
<el-form-item label="设备名称" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="form.type" placeholder="请输入类型" />
</el-form-item>
<el-form-item label="设备IP" prop="ipAddress">
<el-input v-model="form.ipAddress" placeholder="请输入设备IP" />
</el-form-item>
<el-form-item label="PLC读取地址" prop="plcDbReadAddress">
<el-input v-model="form.plcDbReadAddress" placeholder="请输入PLC读取地址" />
</el-form-item>
<el-form-item label="PLC写入地址" prop="plcDbWriteAddress">
<el-input v-model="form.plcDbWriteAddress" placeholder="请输入PLC写入地址" />
</el-form-item>
<el-form-item label="是否可用" prop="isActive">
<el-input v-model="form.isActive" placeholder="请输入0-F 1-T" />
</el-form-item>
<el-form-item label="入库请求" prop="rkqq">
<el-input v-model="form.rkqq" placeholder="请输入入库请求" />
</el-form-item>
<el-form-item label="空闲" prop="kx">
<el-input v-model="form.kx" placeholder="请输入空闲" />
</el-form-item>
<el-form-item label="到位" prop="dw">
<el-input v-model="form.dw" placeholder="请输入到位" />
</el-form-item>
<el-form-item label="条码" prop="trayCode">
<el-input v-model="form.trayCode" placeholder="请输入条码" />
</el-form-item>
<el-form-item label="任务号" prop="taskNo">
<el-input v-model="form.taskNo" placeholder="请输入任务号" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@@ -240,7 +208,6 @@
<script>
import { listSsj, getSsj, delSsj, addSsj, updateSsj } from "@/api/device/ssj";
import "@/assets/styles/index.scss";
export default {
name: "Ssj",
@@ -261,7 +228,7 @@ export default {
// 输送机表格数据
ssjList: [],
// 弹出层标题
title: '',
title: "",
// 是否显示弹出层
open: false,
// 查询参数
@@ -270,7 +237,6 @@ export default {
pageSize: 10,
deviceCode: null,
name: null,
type: null,
ipAddress: null,
plcDbReadAddress: null,
plcDbWriteAddress: null,
@@ -279,23 +245,23 @@ export default {
kx: null,
dw: null,
trayCode: null,
taskNo: null
taskNo: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
deviceCode: [
{ required: true, message: '设备编码不能为空', trigger: 'blur' }
{ required: true, message: "设备编码不能为空", trigger: "blur" }
],
name: [
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
]
{ required: true, message: "设备名称不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList()
this.getList();
},
methods: {
/** 查询输送机列表 */
@@ -327,7 +293,12 @@ export default {
kx: null,
dw: null,
trayCode: null,
taskNo: null
taskNo: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
@@ -341,6 +312,12 @@ export default {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
@@ -350,7 +327,7 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
const id = row.id || this.ids
getSsj(id).then(response => {
this.form = response.data;
this.open = true;
@@ -391,15 +368,12 @@ export default {
handleExport() {
this.download('device/ssj/export', {
...this.queryParams
}, `输送机_${new Date().getTime()}.xlsx`);
}, `ssj_${new Date().getTime()}.xlsx`)
}
}
}
</script>
<style scoped>
.el-form-item >>> .el-form-item__label {
white-space: nowrap;
width: auto;
min-width: fit-content;
}
<style lang="scss" scoped>
/* 输送机管理页面样式 */
</style>