<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<title>硫化罐设备</title>
|
<link rel="stylesheet" href="../../static/css/element.css">
|
<link rel="stylesheet" href="../../static/css/element-ui.css">
|
<link rel="icon" href="../../static/images/favicon.ico" type="image/x-icon">
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js"></script>
|
<script type="text/javascript" src="../../static/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/js/element.js"></script>
|
</head>
|
<style scoped>
|
.floating-layer {
|
position: fixed;
|
top: 50%; /* 居中显示 */
|
left: 50%; /* 居中显示 */
|
transform: translate(-50%, -50%); /* 居中调整 */
|
background-color: #fff;
|
border: 2px solid #007bff; /* 使用更明显的边框颜色 */
|
padding: 20px;
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
border-radius: 8px;
|
z-index: 1000; /* 确保在其他元素之上 */
|
width: 300px; /* 设置固定宽度以保持整洁 */
|
text-align: center; /* 内容居中 */
|
}
|
|
.layer-title {
|
margin-bottom: 15px;
|
font-size: 18px;
|
font-weight: bold;
|
color: #007bff; /* 与边框颜色相呼应 */
|
}
|
|
.radio-list {
|
display: flex;
|
flex-direction: column;
|
align-items: center; /* 单选按钮居中 */
|
}
|
|
.radio-item {
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center; /* 水平居中 */
|
width: 100%; /* 使每个单选按钮项占据整个宽度 */
|
}
|
|
.radio-button {
|
margin-right: 10px;
|
transform: scale(1.2); /* 放大单选按钮以使其更加明显 */
|
}
|
|
.radio-label {
|
font-size: 16px;
|
cursor: pointer;
|
user-select: none;
|
color: #333; /* 使用深色调以提高可读性 */
|
}
|
|
/* 可选的动画效果 */
|
.floating-layer {
|
opacity: 0;
|
transform: translate(-50%, -50%) scale(0.8);
|
transition: opacity 0.3s, transform 0.3s;
|
}
|
|
.floating-layer.show {
|
opacity: 1;
|
transform: translate(-50%, -50%) scale(1);
|
}
|
/* 您需要在 Vue 中控制 'show' 类的添加和移除 */
|
</style>
|
|
<body>
|
<div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">
|
<div style="width: 100%;">
|
<el-table border ref="singleTable" :data="tableData" highlight-current-row @row-click="handleRowClick"
|
max-height="350" style="width: 100%">
|
<el-table-column property="jarNo" label="硫化罐">
|
</el-table-column>
|
<!-- <el-table-column property="workNo" label="工作号">-->
|
<!-- </el-table-column>-->
|
<el-table-column property="jarStatus" label="状态">
|
</el-table-column>
|
<el-table-column property="jarMode" label="模式">
|
</el-table-column>
|
<el-table-column property="jarTemperature$" label="温度">
|
</el-table-column>
|
<el-table-column property="jarPressure$" label="压力">
|
</el-table-column>
|
<el-table-column property="jarCount$" label="最大储量">
|
</el-table-column>
|
<el-table-column property="jarErr" label="异常代码">
|
</el-table-column>
|
<el-table-column label="操作">
|
<template>
|
<el-popconfirm
|
confirm-button-text="Yes"
|
cancel-button-text="No"
|
title="确定要修改最大储量吗?请确保罐内数量大于等于修改值！！！"
|
@confirm="confirmEvent"
|
@cancel="cancelEvent"
|
>
|
<template #reference>
|
<el-button>修改最大储量</el-button>
|
</template>
|
</el-popconfirm>
|
</template>
|
<!-- <el-button style="" type="primary" plain size="medium" @click="confirmEvent()">修改</el-button>-->
|
</el-table-column>
|
</el-table>
|
</div>
|
<template>
|
<div v-if="valueUpdate" :class="['floating-layer', { show: showLayer }]">
|
<h3 class="layer-title">请选择修改目标值</h3> <!-- 添加标题以提高可读性 -->
|
<div class="radio-list">
|
<div
|
v-for="option in optionsUpdate"
|
:key="option.value"
|
class="radio-item"
|
>
|
<input
|
type="radio"
|
:value="option.value"
|
v-model="selectedOption"
|
@change="handleSubmit"
|
class="radio-button"
|
/>
|
<label class="radio-label">{{ option.text }}</label>
|
</div>
|
</div>
|
</div>
|
</template>
|
<div style="width: 100%;display: flex;justify-content: center;margin-top: 10px;">
|
<div style="width: 55%;margin-right: 10px;">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix" style="display: flex;justify-content: space-between;align-items: center">
|
<span>硫化库位</span>
|
<el-button style="" type="primary" plain size="medium" @click="historicalTasks()">历史任务</el-button>
|
</div>
|
<div v-if="currentIndex == null">
|
<el-empty description="请选择设备"></el-empty>
|
</div>
|
<div v-else>
|
<el-table border :data="itemMast" highlight-current-row max-height="400" style="width: 100%">
|
<el-table-column property="id" label="序号">
|
</el-table-column>
|
<el-table-column property="jarWrkNo" label="工作号">
|
</el-table-column>
|
<el-table-column property="status$" label="状态">
|
</el-table-column>
|
<el-table-column property="matnr" label="物料码">
|
</el-table-column>
|
<el-table-column property="maktx" label="物料名称">
|
</el-table-column>
|
<el-table-column property="weight" label="重量">
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</el-card>
|
</div>
|
<div style="width: 45%;">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>设备状态</span>
|
</div>
|
<div>
|
<div v-if="currentIndex == null">
|
<el-empty description="请选择设备"></el-empty>
|
</div>
|
<div v-else>
|
<el-descriptions :title="currentTitle" direction="vertical" :column="4" border>
|
<!-- <el-descriptions-item label="硫化罐">{{ tableData[currentIndex].jarNo }}-->
|
<!-- </el-descriptions-item>-->
|
<el-descriptions-item label="区域">{{ tableData[currentIndex].region }}
|
</el-descriptions-item>
|
<el-descriptions-item label="代号">{{ tableData[currentIndex].jarCode }}
|
</el-descriptions-item>
|
<!-- <el-descriptions-item label="模式">-->
|
<!-- <el-tag>{{ tableData[currentIndex].jarMode }}</el-tag>-->
|
<!-- </el-descriptions-item>-->
|
<!-- <el-descriptions-item label="设备状态">-->
|
<!-- <el-tag>{{ tableData[currentIndex].jarStatus }}</el-tag>-->
|
<!-- </el-descriptions-item>-->
|
<el-descriptions-item label="左门">{{ tableData[currentIndex].leftDoor }}
|
</el-descriptions-item>
|
<el-descriptions-item label="右门">{{ tableData[currentIndex].rightDoor }}
|
</el-descriptions-item>
|
<el-descriptions-item label="左门可开">{{ tableData[currentIndex].leftInEnable }}
|
</el-descriptions-item>
|
<el-descriptions-item label="右门可开">{{ tableData[currentIndex].leftOutEnable }}
|
</el-descriptions-item>
|
<el-descriptions-item label="左门可关">{{ tableData[currentIndex].rightInEnable }}
|
</el-descriptions-item>
|
<el-descriptions-item label="右门可关">{{ tableData[currentIndex].rightOutEnable }}
|
</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="温度">{{ tableData[currentIndex].jarTemperature$ }}-->
|
<!-- </el-descriptions-item>-->
|
<!-- <el-descriptions-item label="压力">{{ tableData[currentIndex].jarPressure$ }}-->
|
<!-- </el-descriptions-item>-->
|
<!-- <el-descriptions-item label="最大储量">{{ tableData[currentIndex].jarCount$ }}-->
|
<!-- </el-descriptions-item>-->
|
<!-- <el-descriptions-item label="故障代码">{{ tableData[currentIndex].jarErr }}-->
|
<!-- </el-descriptions-item>-->
|
<el-descriptions-item label="左门开门状态">{{ tableData[currentIndex].leftDoorOpen }}
|
</el-descriptions-item>
|
<el-descriptions-item label="左门关门状态">{{ tableData[currentIndex].leftDoorClose }}
|
</el-descriptions-item>
|
<el-descriptions-item label="右门开门状态">{{ tableData[currentIndex].rightDoorOpen }}
|
</el-descriptions-item>
|
<el-descriptions-item label="右门关门状态">{{ tableData[currentIndex].rightDoorClose }}
|
</el-descriptions-item>
|
<el-descriptions-item label="最近一次保温时间">{{ tableData[currentIndex].holdingTime }}
|
</el-descriptions-item>
|
<el-descriptions-item label="最近一次开门时间">{{ tableData[currentIndex].openTime }}
|
</el-descriptions-item>
|
<el-descriptions-item label="最近一次关门时间">{{ tableData[currentIndex].closeTime }}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
|
</div>
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
showLayer: false,
|
valueUpdate: false,
|
selectedOption: null,
|
updateJarNo: null,
|
optionsUpdate: [
|
{ id: '1', value: '1', text: '1托' },
|
{ id: '2', value: '2', text: '2托' },
|
{ id: '3', value: '3', text: '3托' },
|
{ id: '4', value: '4', text: '4托' },
|
{ id: '5', value: '5', text: '5托' },
|
{ id: '6', value: '6', text: '6托' },
|
{ id: '7', value: '7', text: '7托' },
|
{ id: '999', value: '999', text: '取消' },
|
],
|
tableData: [],
|
currentRow: null,
|
currentTitle: "未选择设备",
|
currentIndex: null,
|
formParam: {
|
rgvNo: null,
|
sourceStaNo: null,
|
sourceRow: 1,
|
sourceBay: 0,
|
sourceLev: 1,
|
staNo: null,
|
row: 1,
|
bay: 0,
|
lev: 1,
|
barcode:null,
|
barcodeType:null,
|
emptyContainer:null
|
},
|
formParamD: {
|
rgvNo: null,
|
sourceStaNo: null,
|
sourceRow: 1,
|
sourceBay: 0,
|
sourceLev: 1,
|
staNo: null,
|
row: 1,
|
bay: 0,
|
lev: 1,
|
barcode:null,
|
barcodeType:null,
|
emptyContainer:null
|
},
|
enableIn: false,
|
enableOut: false,
|
options:[
|
{
|
value:'1',
|
label:'是'
|
},
|
{
|
value:'0',
|
label:'否'
|
}
|
],
|
demo: 'X',
|
rgvMode: 0,
|
itemMast: []
|
},
|
created() {
|
this.init()
|
},
|
watch: {
|
valueUpdate(newVal) {
|
if (newVal) {
|
this.showLayer = true;
|
// 可以在这里添加延时关闭层或其他逻辑
|
}
|
},
|
},
|
methods: {
|
historicalTasks(){
|
let that = this
|
that.selectedOption = 0;
|
that.valueUpdate = false;
|
if (that.currentIndex != null){
|
$.ajax({
|
url: baseUrl + "/basJarMastLog/historicalTasks/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data:{
|
id: that.tableData[that.currentIndex].jarNo
|
},
|
success: function (res) {
|
that.itemMast = res.data
|
// console.log(that.itemMast)
|
}
|
});
|
}
|
|
},
|
staTova(sta,end){
|
let that = this
|
that.$confirm('此操作存在风险，是否继续','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(()=>{
|
$.ajax({
|
url: baseUrl + "/rgv/rgvDemoTask",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data:{
|
rgvNo : this.formParam.rgvNo,
|
sta : sta,
|
end : end
|
},
|
method: 'Get',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
})
|
},
|
init() {
|
this.getTableData()
|
|
setInterval(() => {
|
this.getTableData()
|
// this.demoStatus()
|
}, 1000)
|
},
|
confirmEvent() {
|
var that = this
|
that.valueUpdate = true;
|
},
|
cancelEvent() {
|
var that = this
|
that.valueUpdate = false;
|
},
|
handleSubmit() {
|
if ( this.selectedOption > 998 ){
|
this.selectedOption = 0;
|
this.valueUpdate = false;
|
} else if ( this.selectedOption > 0 ){
|
var that = this
|
if (that.updateJarNo == null){
|
console.log("this.updateJarNo;null;null;null;null;null")
|
} else {
|
$.ajax({
|
url: baseUrl + "/basJar/update/uodate/jar/count/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {
|
jarCount: that.selectedOption,
|
jarNo: that.updateJarNo
|
},
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
}
|
this.selectedOption = 0;
|
this.valueUpdate = false;
|
}
|
},
|
handleRowClick(row, col, event) {
|
var that = this
|
const index = that.tableData.indexOf(row)
|
that.currentRow = row;
|
that.currentIndex = index
|
this.updateJarNo = row.jarNo
|
that.currentTitle = row.jarNo + "号硫化罐"
|
that.formParam.rgvNo = row.rgvNo
|
that.enableIn = row.inEnable == "Y" ? true : false
|
that.enableOut = row.outEnable == "Y" ? true : false
|
this.selectedOption = 0;
|
this.valueUpdate = false;
|
|
$.ajax({
|
url: baseUrl + "/basJarMast/JatId/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {
|
id: row.jarNo
|
},
|
success: function (res) {
|
that.itemMast = res.data
|
// console.log(that.itemMast)
|
}
|
});
|
},
|
getTableData() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/table/jar/state",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'post',
|
success: function (res) {
|
that.tableData = res.data
|
}
|
});
|
},
|
demoStatus() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/rgv/demo/status",
|
data:{
|
rgvNo : this.formParam.rgvNo
|
},
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
contentType: 'application/json;charset=UTF-8',
|
method: 'get',
|
success: function (res) {
|
// console.log(res)
|
that.demo = res.data.demo
|
that.rgvMode = res.data.rgvMode
|
}
|
});
|
},
|
initiate(){
|
let that = this
|
that.$confirm('此操作存在风险，是否继续','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(()=>{
|
$.ajax({
|
url: baseUrl + "/rgv/operator/put",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: this.formParam,
|
method: 'POST',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
})
|
},
|
initiateD(method){
|
let urlS = "/rgv/operator/single/step/three/put";
|
if (method===1){
|
urlS = "/rgv/operator/single/step/one/put";
|
}else if (method === 2){
|
urlS = "/rgv/operator/single/step/two/put";
|
}else if (method === 3){
|
urlS = "/rgv/operator/single/step/three/put";
|
}
|
let that = this
|
that.$confirm('此操作存在风险，是否继续','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(()=>{
|
$.ajax({
|
url: baseUrl + urlS,
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: this.formParam,
|
method: 'POST',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
})
|
},
|
demos(method){
|
let that = this
|
that.$confirm('此操作存在风险，是否继续','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(()=>{
|
$.ajax({
|
url: baseUrl + "/rgv/demo/status/" + method,
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data:{
|
rgvNo : this.formParam.rgvNo
|
},
|
method: 'Get',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
})
|
},
|
rgvStatus(method){
|
let that = this
|
that.$confirm('此操作存在风险，是否继续','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(()=>{
|
$.ajax({
|
url: baseUrl + "/rgv/demo/status/rgvStatus",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data:{
|
rgvNo : this.formParam.rgvNo,
|
status : Number(method)
|
},
|
method: 'Get',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
})
|
},
|
requestOperate(method) {
|
let that = this
|
that.$confirm('此操作存在风险，是否继续','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(()=>{
|
$.ajax({
|
url: baseUrl + "/rgv/operator/" + method,
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: this.formParam,
|
method: 'POST',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
})
|
|
},
|
updateEnableInOut(type) {
|
let that = this
|
let param = {}
|
if (type == "in") {
|
param = {
|
inEnable: this.enableIn ? "Y" : "N",
|
rgvNo: this.formParam.rgvNo
|
}
|
} else {
|
param = {
|
outEnable: this.enableOut ? "Y" : "N",
|
rgvNo: this.formParam.rgvNo
|
}
|
}
|
|
$.ajax({
|
url: baseUrl + "/basCrnp/update/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: param,
|
method: 'POST',
|
success: function (res) {
|
if (res.code == 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'error'
|
});
|
}
|
}
|
});
|
}
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
