From bd98e9fe7866af872035c9f198786cbbff123275 Mon Sep 17 00:00:00 2001 From: yxFwq <1> Date: 星期日, 24 十一月 2024 15:19:59 +0800 Subject: [PATCH] # --- src/main/webapp/views/deviceOperate/jarOperate.html | 173 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 170 insertions(+), 3 deletions(-) diff --git a/src/main/webapp/views/deviceOperate/jarOperate.html b/src/main/webapp/views/deviceOperate/jarOperate.html index fbbaf9d..5e6ab82 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;"> @@ -33,11 +97,44 @@ <el-table-column property="jarErr" label="寮傚父浠g爜"> </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", -- Gitblit v1.9.1