zy-asrs.git - Gitblit

			@@ -5,11 +5,75 @@
			<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;">
			@@ -33,11 +97,44 @@
			<el-table-column property="jarErr" label="异常代码">
			</el-table-column>
			<el-table-column label="操作">
			<el-button style="" type="primary" plain size="medium" @click="updateJarCount()">修改</el-button>
			<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">
			@@ -111,11 +208,26 @@
			</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: "未选择设备",
			@@ -168,11 +280,18 @@
			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",
			@@ -232,15 +351,63 @@
			// 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",