From 74fd6eb7fb0322078f7946f51073f20e90231df1 Mon Sep 17 00:00:00 2001 From: yxFwq <1> Date: 星期二, 01 四月 2025 11:54:00 +0800 Subject: [PATCH] # --- src/main/webapp/views/deviceOperate/jarOperate.html | 251 +++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 228 insertions(+), 23 deletions(-) diff --git a/src/main/webapp/views/deviceOperate/jarOperate.html b/src/main/webapp/views/deviceOperate/jarOperate.html index fb8b24d..2733b32 100644 --- a/src/main/webapp/views/deviceOperate/jarOperate.html +++ b/src/main/webapp/views/deviceOperate/jarOperate.html @@ -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;"> @@ -24,15 +88,53 @@ </el-table-column> <el-table-column property="jarMode" label="妯″紡"> </el-table-column> - <el-table-column property="region" label="鍖哄煙"> + <el-table-column property="jarTemperature$" label="娓╁害"> </el-table-column> - <el-table-column property="jarCode" label="浠e彿"> + <el-table-column property="jarPressure$" label="鍘嬪姏"> + </el-table-column> + <el-table-column property="jarCount$" label="鏈�澶у偍閲�"> </el-table-column> <el-table-column property="jarErr" label="寮傚父浠g爜"> </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"> @@ -44,8 +146,8 @@ <el-empty description="璇烽�夋嫨璁惧"></el-empty> </div> <div v-else> - <el-table border :data="item" highlight-current-row max-height="350" style="width: 100%"> - <el-table-column property="jarId" label="纭寲缃�"> + <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> @@ -73,20 +175,53 @@ </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="妯″紡"> - <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="鏁呴殰浠g爜">{{ tableData[currentIndex].jarErr }} - </el-descriptions-item> -<!-- <el-descriptions-item label="婧愮珯">{{ tableData[currentIndex].staNo }}--> +<!-- <el-descriptions-item label="纭寲缃�">{{ tableData[currentIndex].jarNo }}--> <!-- </el-descriptions-item>--> -<!-- <el-descriptions-item label="鐩爣绔�">{{ tableData[currentIndex].sourceStaNo }}--> + <el-descriptions-item label="鍖哄煙">{{ tableData[currentIndex].region }} + </el-descriptions-item> + <el-descriptions-item label="浠e彿">{{ 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="鏁呴殰浠g爜">{{ 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> @@ -94,11 +229,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: "鏈�夋嫨璁惧", @@ -145,17 +295,24 @@ ], demo: 'X', rgvMode: 0, - item: [] + 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", @@ -166,8 +323,8 @@ id: that.tableData[that.currentIndex].jarNo }, success: function (res) { - that.item = res.data - console.log(that.item) + that.itemMast = res.data + // console.log(that.itemMast) } }); } @@ -215,15 +372,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", @@ -234,8 +439,8 @@ id: row.jarNo }, success: function (res) { - that.item = res.data - console.log(that.item) + that.itemMast = res.data + // console.log(that.itemMast) } }); }, -- Gitblit v1.9.1