From 97af26e2ad64d7974367df80a900c1f680bd19c5 Mon Sep 17 00:00:00 2001 From: 啊鑫 <t2856754968@163.com> Date: 星期三, 23 七月 2025 10:38:08 +0800 Subject: [PATCH] 首检,巡检,入库检 --- pages/QC/RKJ/detail.vue | 1341 ++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 1,161 insertions(+), 180 deletions(-) diff --git a/pages/QC/RKJ/detail.vue b/pages/QC/RKJ/detail.vue index 60a1bf8..09257d2 100644 --- a/pages/QC/RKJ/detail.vue +++ b/pages/QC/RKJ/detail.vue @@ -1,147 +1,254 @@ <template> - <view> - <view class="form-container"> - <form :modelValue="formData"> - <view class="form-group"> - <label class="form-label">椤圭洰鍚嶇О:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.projName"/> - </view> - <view class="form-group"> - <label class="form-label">璐ㄩ噺瑕佹眰:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.itemMod"/> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾柟娉�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod"/> - </view> - <view class="form-group"> - <label class="form-label">浣跨敤浠〃:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments"/> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾暟:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.levelNum"/> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾爣鍑嗙紪鐮�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.qsCode"/> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾爣鍑嗗悕绉�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.qsName"/> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾按骞�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel"/> - </view> - <view class="form-group"> - <label class="form-label">鎺ユ敹姘村钩:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.facLevel"/> - </view> - <view class="form-group"> - <label class="form-label">涓嬮檺:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.minValue"/> - </view> - <view class="form-group"> - <label class="form-label">鏍囧噯鍊�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.standardValue"/> - </view> - <view class="form-group"> - <label class="form-label">涓婇檺:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.maxValue"/> - </view> - <view class="form-group"> - <label class="form-label">AC鏁�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.freQty - 1"/> - </view> - <view class="form-group"> - <label class="form-label">RE鏁�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.freQty"/> - </view> - <view class="form-group"> - <label class="form-label">涓嶅悎鏍兼暟:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.unqualified"/> - </view> - <view class="form-group"> - <label class="form-label">棰勮缁撴灉:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.result"/> - </view> - <view class="form-group"> - <label class="form-label">涓嶅悎鏍兼弿杩�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/> - </view> - <view class="form-group edit"> - <input class="form-input" style="color: red" disabled="true" type="text" - value="娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級"/> - </view> - <view class="form-group edit"> - <label class="form-label">妫�娴嬬粨鏋�:</label> - <input class="form-input" type="number" v-model="formData.fcheckResu"/> - </view> - <button type="primary" v-if="tableData.length < formData.levelNum" @click="submit">淇濆瓨</button> - </form> + <view class="container"> + <!-- 澶撮儴 --> + <view class="header"> + <view class="title">鍏ュ簱妫�楠岄」鐩槑缁�</view> + <view class="order-number">褰撳墠妫�楠屽崟鍙�: {{ formData.billNo }}</view> </view> - <view> - <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/> + + <!-- 鏍囩鏍� --> + <view class="tabs-container"> + <scroll-view :show-scrollbar="false" class="tabs-scroll" scroll-x="true"> + <view class="tabs"> + <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab" + @tap="switchTab(index, tab.id)"> + <view class="tab-text">{{ tab.projName || tab.fcheckItem || '椤圭洰' + (index + 1) }}</view> + </view> + </view> + </scroll-view> </view> - <view class="list-container"> - <uni-table ref="table" border emptyText="鏆傛棤鏇村鏁版嵁"> - <uni-tr> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">缂栧彿</uni-th> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">鍒ゅ畾鏍囪瘑</uni-th> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">妫�楠岀粨鏋�</uni-th> - <uni-th width="150" align="center" - style="color: #FFFFFF;background-color: lightskyblue;">淇敼 - </uni-th> - </uni-tr> - <uni-tr v-for="(item, index) in tableData" :key="index"> - <uni-td align="center"> - {{ index + 1 }} - </uni-td> - <uni-td align="center"> - <input class="form-input" disabled="true" type="text" v-model="item.fstand"/> - </uni-td> - <uni-td align="center"> - <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/> - </uni-td> - <uni-td> - <view class="uni-group"> - <button type="warn" v-if="isNumber" @click="toDetail(item)">淇敼</button> - <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button> + + <view class="tab-content"> + <!-- 鍩烘湰淇℃伅 --> + <view class="section"> + <view class="section-header">椤圭洰淇℃伅</view> + <view class="section-body"> + <view class="info-grid"> + <view class="info-item"> + <view class="info-label">椤圭洰鍚嶇О</view> + <view class="info-value">{{ formData.projName }}</view> </view> - </uni-td> - </uni-tr> - </uni-table> + <view class="info-item"> + <view class="info-label">璐ㄩ噺瑕佹眰</view> + <view class="info-value">{{ formData.itemMod }}</view> + </view> + <view class="info-item"> + <view class="info-label">妫�楠屾柟娉�</view> + <view class="info-value">{{ formData.inspectionMethod }}</view> + </view> + <view class="info-item"> + <view class="info-label">浣跨敤浠〃</view> + <view class="info-value">{{ formData.usingInstruments }}</view> + </view> + <view class="info-item"> + <view class="info-label">妫�楠屾暟</view> + <view class="info-value">{{ formData.levelNum }}</view> + </view> + <view class="info-item"> + <view class="info-label">妫�楠屾爣鍑嗙紪鐮�</view> + <view class="info-value">{{ formData.qsCode }}</view> + </view> + </view> + </view> + </view> + + <!-- 妫�楠屾爣鍑� --> + <view class="section"> + <view class="section-header">妫�楠屾爣鍑�</view> + <view class="section-body"> + <view class="info-grid"> + <view class="info-item"> + <view class="info-label">妫�楠屾爣鍑嗗悕绉�</view> + <view class="info-value">{{ formData.qsName }}</view> + </view> + <view class="info-item"> + <view class="info-label">妫�楠屾按骞�</view> + <view class="info-value">{{ formData.fcheckLevel }}</view> + </view> + <view class="info-item"> + <view class="info-label">鎺ユ敹姘村钩</view> + <view class="info-value">{{ formData.facLevel }}</view> + </view> + <view v-if="formData.minValue" class="info-item"> + <view class="info-label">涓嬮檺</view> + <view class="info-value">{{ formData.minValue }}</view> + </view> + <view v-if="formData.standardValue" class="info-item"> + <view class="info-label">鏍囧噯鍊�</view> + <view class="info-value">{{ formData.standardValue }}</view> + </view> + <view v-if="formData.maxValue" class="info-item"> + <view class="info-label">涓婇檺</view> + <view class="info-value">{{ formData.maxValue }}</view> + </view> + </view> + </view> + </view> + + <!-- 缁撴灉淇℃伅 --> + <view class="section"> + <view class="section-header">缁撴灉淇℃伅</view> + <view class="section-body"> + <view class="info-grid"> + <view class="info-item"> + <view class="info-label">AC鏁�</view> + <view class="info-value">{{ formData.freQty ? (formData.freQty - 1) : '' }}</view> + </view> + <view class="info-item"> + <view class="info-label">RE鏁�</view> + <view class="info-value">{{ formData.freQty }}</view> + </view> + <view class="info-item"> + <view class="info-label">涓嶅悎鏍兼暟</view> + <view class="info-value">{{ formData.unqualified }}</view> + </view> + <view class="info-item"> + <view class="info-label">棰勮缁撴灉</view> + <view :class="{danger: formData.result === '涓嶅悎鏍�'}" class="info-value">{{ formData.result }}</view> + </view> + </view> + + <view v-if="formData.remarks" class="result-remarks"> + <view class="info-label">涓嶅悎鏍兼弿杩�</view> + <view class="info-value danger">{{ formData.remarks }}</view> + </view> + + <view v-if="!formData.maxValue || !formData.minValue" class="hint-text"> + <view class="danger">娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級</view> + </view> + </view> + </view> + + <!-- 妫�楠岀粨鏋滃綍鍏� --> + <view class="section"> + <view class="section-header">妫�楠岀粨鏋滃綍鍏�</view> + <view class="section-body"> + <view class="input-group input1"> + <view class="input-wrapper"> + <button class="btn upload-btn" @tap="chooseImage"> + <uni-icons color="#fff" size="16" type="upload"></uni-icons> + 涓婁紶/鏌ョ湅鍥剧墖 + </button> + <button v-if="this.current" class="btn upload-btn" @tap="saveRemarks"> + <uni-icons color="#fff" size="16" type="compose"></uni-icons> + 涓嶅悎鏍兼弿杩� + </button> + <input v-if="(tableData.length < formData.levelNum)" + v-model="formData.fcheckResu" class="result-input" placeholder="璇疯緭鍏ユ楠岀粨鏋�..." + type="text"/> + <button v-if="(tableData.length < formData.levelNum)" + class="btn primary-btn" + style="margin: 0px;background-color: #3498db;color:#ffffff ;" @tap="submit">淇濆瓨缁撴灉 + </button> + </view> + </view> + + <!-- 绉诲姩绔�傞厤鐨勮緭鍏ュ尯 --> + <view class="input-group input2"> + <view class="input-wrapper"> + <button class="btn upload-btn" @tap="chooseImage"> + <uni-icons color="#fff" size="16" type="upload"></uni-icons> + 涓婁紶/鏌ョ湅鍥剧墖 + </button> + <button v-if="this.current" class="btn upload-btn" @tap="saveRemarks"> + <uni-icons color="#fff" size="16" type="compose"></uni-icons> + 涓嶅悎鏍兼弿杩� + </button> + </view> + <view class="input-wrapper" style="margin-top: 15px;"> + <input v-if="(tableData.length < formData.levelNum)" + v-model="formData.fcheckResu" class="result-input" placeholder="璇疯緭鍏ユ楠岀粨鏋�..." + type="text"/> + <button v-if="(tableData.length < formData.levelNum)" + class="btn primary-btn" + style="margin: 0px;background-color: #3498db;color:#ffffff ;" @tap="submit">淇濆瓨缁撴灉 + </button> + </view> + </view> + </view> + </view> + + <!-- 缁撴灉琛ㄦ牸 --> + <view v-if="tableData.length>0" class="simple-table-container"> + <view class="simple-table-header"> + <view class="simple-title">妫�楠岃褰� ({{ tableData.length }}/{{ formData.levelNum }})</view> + <view :class="{'completed': !(tableData.length < formData.levelNum)}" class="simple-status"> + {{ tableData.length < formData.levelNum ? '杩涜涓�' : '宸插畬鎴�' }} + </view> + </view> + + <view class="simple-table"> + <view class="simple-header-row"> + <view class="simple-header-cell">缂栧彿</view> + <view class="simple-header-cell">妫�楠岀粨鏋�</view> + <view v-if="current" class="simple-header-cell">鎿嶄綔</view> + </view> + + <view v-for="(item, index) in tableData" :key="index" class="simple-data-row"> + <view class="simple-data-cell simple-index"> + {{ index + 1 }} + </view> + <view class="simple-data-cell simple-result"> + <!-- 鏁板瓧缁撴灉鏍峰紡 --> + <view v-if="isNumber && !isNaN(parseFloat(item.fstand))" class="simple-number-result"> + <view class="result-value">{{ item.fstand }}</view> + <view v-if="formData.unitName" class="result-unit">{{ formData.unitName }}</view> + <view :class="{'pass': isInRange(item.fstand), 'fail': !isInRange(item.fstand)}" class="result-status"> + {{ isInRange(item.fstand) ? '鍚堟牸' : '涓嶅悎鏍�' }} + </view> + </view> + + <!-- NG/OK鐘舵�佹牱寮� --> + <view v-else class="simple-status-result"> + <view :class="{'pass': item.fcheckResu === '1', 'fail': item.fcheckResu !== '1'}" class="simple-status"> + {{ item.fcheckResu === '1' ? '鍚堟牸' : '涓嶅悎鏍�' }} + </view> + </view> + </view> + <view v-if="current" class="simple-data-cell simple-action"> + <button v-if="!isNumber" class="simple-btn" @tap="numberEdit(item)"> + {{ editResult(item.fcheckResu) }} + </button> + <button v-if="isNumber" class="simple-btn" @tap="toDetail(item)"> + 淇敼 + </button> + </view> + </view> + </view> + </view> + </view> - <view class="plus-button"> - <button type="warn" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button> - </view> - + <!-- 寮瑰嚭灞� - 淇敼妫�楠岀粨鏋� --> <view v-if="showPopup" class="overlay"> <view class="popup"> <h3>淇敼妫�楠岀粨鏋�</h3> <form :modelValue="editData"> <view class="form-group"> <label class="form-label">妫�楠岀粨鏋�:</label> - <input class="form-input" type="text" v-model="editData.fcheckResu"/> + <input v-model="editData.fcheckResu" class="form-input" type="text"/> </view> - <button type="warn" @click="eidt">淇敼</button> - <button @click="showPopup = !showPopup">鍙栨秷</button> + <view class="popup-buttons"> + <button class="btn primary-btn" @click="eidt">淇敼</button> + <button class="btn cancel-btn" @click="showPopup = !showPopup">鍙栨秷</button> + </view> </form> </view> </view> + <!-- 寮瑰嚭灞� - 涓嶅悎鏍兼弿杩� --> <view v-if="remarksPopup" class="overlay"> <view class="popup"> <h3>淇敼涓嶅悎鏍兼弿杩�</h3> <form> <view class="form-group"> <label class="form-label">涓嶅悎鏍兼弿杩�:</label> - <input class="form-input" type="text" v-model="remarks"/> + <input v-model="remarks" class="form-input" type="text"/> </view> - <button type="warn" @click="editRemarks">淇敼</button> - <button @click="remarksPopup = !remarksPopup">鍙栨秷</button> + <view class="popup-buttons"> + <button class="btn primary-btn" @click="editRemarks">淇敼</button> + <button class="btn cancel-btn" @click="remarksPopup = !remarksPopup">鍙栨秷</button> + </view> </form> </view> </view> @@ -158,7 +265,6 @@ checkItem: "", id: 0, gid: 0, - itemInId: 0, billNo: "", showPopup: false, editData: {}, @@ -167,10 +273,17 @@ base64Image: "", remarks: "", remarksPopup: false, - fcheckResu: null + currentTab: 0, + tabs: [], + current: true // 娣诲姞current灞炴�э紝榛樿涓簍rue } }, methods: { + switchTab(index, id) { + this.currentTab = index; + this.id = id; + this.refreshResult(); + }, previewImage() { uni.previewImage({ @@ -265,7 +378,6 @@ toDetail(item) { this.showPopup = !this.showPopup; this.editData = item; - this.fcheckResu = this.editData.fcheckResu; }, eidt() { @@ -279,7 +391,7 @@ } let fstand = "鈭�"; - + if (this.formData.maxValue && this.formData.minValue) { if (!this.editData.fcheckResu) { @@ -318,20 +430,14 @@ id: this.editData.id, pid: this.id, gid: this.gid, - itemInId: this.itemInId, fstand: fstand, fcheckResu: this.editData.fcheckResu, updateBy: this.editData.updater, } }).then(res => { this.showPopup = !this.showPopup; - if(res.status == 0){ - this.$showMessage("淇敼鎴愬姛"); - this.refreshResult(); //鍒锋柊椤甸潰 - }else{ - this.$showMessage(res.message); - this.editData.fcheckResu = this.fcheckResu; - } + this.$showMessage("淇敼鎴愬姛"); + this.refreshResult(); //鍒锋柊椤甸潰 }) }, @@ -351,18 +457,13 @@ id: item.id, pid: item.pid, gid: item.gid, - itemInId: this.itemInId, fstand: fstand, fcheckResu: fcheckResu, updateBy: this.$loginInfo.account, } }).then(res => { - if(res.status == 0){ - this.$showMessage("淇敼鎴愬姛"); - this.refreshResult(); //鍒锋柊椤甸潰 - }else{ - this.$showMessage(res.message); - } + this.$showMessage("淇敼鎴愬姛"); + this.refreshResult(); //鍒锋柊椤甸潰 }) }, saveRemarks() { @@ -386,6 +487,55 @@ } }) } + }, + // 鍔犺浇妫�楠岄」鐩垪琛� + loadTabItems() { + this.$post({ + url: "/RKJ/getItems", + data: { + pid: this.gid, + } + }).then(res => { + if (res.data && res.data.tbBillList) { + this.tabs = res.data.tbBillList; + // 鎸夋娴嬬粨鏋滄帓搴忥紝鏈畬鎴愮殑鎺掑湪鍓嶉潰 + this.tabs.sort((a, b) => { + if (a.result === '鏈畬鎴�' && b.result !== '鏈畬鎴�') { + return -1; + } else if (a.result !== '鏈畬鎴�' && b.result === '鏈畬鎴�') { + return 1; + } else { + return 0; + } + }); + } else { + // 娌℃湁椤圭洰鏃惰嚦灏戞坊鍔犲綋鍓嶉」鐩埌鏍囩 + this.tabs = [{id: this.id, projName: this.formData.projName || '褰撳墠椤圭洰'}]; + } + }) + }, + // 鍒ゆ柇鏁板瓧鏄惁鍦ㄨ寖鍥村唴 + isInRange(value) { + if (!this.formData.maxValue || !this.formData.minValue) return true; + const numValue = parseFloat(value); + return numValue >= parseFloat(this.formData.minValue) && + numValue <= parseFloat(this.formData.maxValue); + }, + // 鑾峰彇鏁板瓧缁撴灉鐨勬牱寮忕被 + getNumberResultClass(value) { + if (!this.formData.maxValue || !this.formData.minValue) return 'number-normal'; + return this.isInRange(value) ? 'number-pass' : 'number-fail'; + }, + // 鑾峰彇鐘舵�佺粨鏋滅殑鏍峰紡绫� + getStatusClass(status) { + return status === '1' ? 'status-pass' : 'status-fail'; + }, + + // 鍥剧墖鏌ョ湅 + chooseImage() { + uni.navigateTo({ + url: 'ImageItem?id=' + this.formData.id + }); } }, onLoad(options) { @@ -395,57 +545,539 @@ this.id = params["id"]; this.billNo = params["billNo"]; this.gid = params["gid"]; - this.itemInId = params["itemInId"]; + this.currentTab = parseInt(params["index"] || 0); + + // 澶勭悊鏉冮檺鍙傛暟 + if (params["current"] === 'true' || params["current"] === true) { + this.current = true; + } else if (params["current"] === 'false' || params["current"] === false) { + this.current = false; + } this.refreshResult(); + this.loadTabItems(); } } </script> -<style> -.form-group { - display: flex; - align-items: center; - border: 1px solid #c9c9c9; - background-color: #d4d4d4; +<style lang="scss"> +$primary-color: #409EFF; +$success-color: #67C23A; +$danger-color: #F56C6C; +$border-color: #DCDFE6; +$bg-color: #f5f7fa; + +.container { + padding: 20px; + background-color: #fff; } -.form-label { - margin-bottom: 0; - padding: 5px; -} +.header { + padding: 20px; + border-bottom: 1px solid $border-color; + background: linear-gradient(90deg, #f0f7ff, #e1f0ff); -.form-input { - flex: 1; - margin-bottom: 0; - padding: 5px; -} + .title { + font-size: 24px; + color: #333; + margin-bottom: 10px; + } -/* 榛樿鏍峰紡 */ -.list-container { - height: calc(100vh - 750px); - /* 璁剧疆鍒楄〃瀹瑰櫒鐨勯珮搴︿负鍓╀綑绌洪棿锛屽苟鍑忓幓琛ㄥ崟瀹瑰櫒鐨勯珮搴� */ - overflow-y: auto; - /* 鍏佽鍒楄〃瀹瑰櫒鍨傜洿婊氬姩 */ - padding: 10px; - /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇鍒楄〃鍐呭鏇寸編瑙� */ -} - -/* 鍦ㄥ皬灞忓箷璁惧涓婏紝閲嶇疆楂樺害涓洪�傚簲灞忓箷 */ -@media (max-width: 768px) { - .list-container { - height: calc(100vh - 485px); - /* 閫傚綋璋冩暣楂樺害 */ + .order-number { + color: #666; + font-size: 14px; } } -.form-container { - /* 璁剧疆琛ㄥ崟瀹瑰櫒鐨勯珮搴︼紝浣垮叾鍙互婊氬姩 */ - overflow-y: auto; - /* 鍏佽琛ㄥ崟瀹瑰櫒鍨傜洿婊氬姩 */ - padding: 10px; - /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */ +.tabs-container { + background-color: $bg-color; + border-bottom: 1px solid $border-color; + position: relative; } + +.tabs-scroll { + width: 100%; + white-space: nowrap; +} + +.tabs { + display: flex; + background-color: $bg-color; + min-width: 100%; + width: max-content; + + .tab { + flex-shrink: 0; + min-width: 120px; + max-width: 200px; + display: flex; + align-items: center; + justify-content: center; + padding: 12px 16px; + border-right: 1px solid $border-color; + color: #666; + transition: all 0.3s; + cursor: pointer; + position: relative; + + &:last-child { + border-right: none; + } + + &:hover { + background-color: rgba($primary-color, 0.05); + } + + &.active { + background-color: #fff; + color: $primary-color; + font-weight: bold; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60%; + height: 3px; + background: linear-gradient(90deg, transparent, $primary-color, transparent); + border-radius: 2px; + } + } + + .tab-text { + text-align: center; + line-height: 1.4; + word-break: break-word; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 14px; + z-index: 1; + position: relative; + } + } +} + + +.section { + margin: 20px 0; + border: 1px solid $border-color; + border-radius: 4px; + + &-header { + padding: 12px 16px; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + font-weight: bold; + } + + &-body { + padding: 16px; + } +} + +.info-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + + .info-item { + margin-bottom: 12px; + + .info-label { + color: #909399; + font-size: 14px; + margin-bottom: 4px; + } + + .info-value { + color: #333; + font-weight: 500; + } + } +} + +.hint-text { + margin-top: 16px; + padding: 8px; + background-color: rgba(231, 76, 60, 0.1); + border-radius: 4px; +} + +.result-remarks { + margin-top: 16px; + padding: 12px; + background-color: rgba(231, 76, 60, 0.05); + border-radius: 4px; +} + +.input-group { + margin: 16px 0; +} + +.input-wrapper { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.result-input { + flex: 1; + height: 45px; + padding: 0 12px; + border: 1px solid var(--border-color); + border-radius: 6px; + font-size: 14px; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + min-width: 0; /* 闃叉flex瀛愰」婧㈠嚭 */ +} + +.result-input:focus { + outline: none; + border-color: #409EFF; + box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); +} + +.btn { + padding: 8px 20px; + border-radius: 6px; + margin: 0; + font-size: 14px; + border: none; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + touch-action: manipulation; + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +.btn:active { + transform: translateY(1px); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.primary-btn { + background-color: var(--primary-color); + color: #000000; + min-width: 80px; + white-space: nowrap; +} + +.secondary-btn { + background-color: #909399; + color: #fff; +} + +.danger-btn { + background-color: $danger-color; + color: #fff; + padding: 6px 12px; + font-size: 12px; + line-height: 1.5; + text-align: center; + min-width: 60px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + border-radius: 4px; +} + +/* 绉诲姩绔崱鐗囨牱寮� */ +.result-card { + background: #fff; + border: 1px solid #e4e7ed; + border-radius: 8px; + margin-bottom: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 15px; + background: linear-gradient(135deg, #f8f9fa, #e9ecef); + border-bottom: 1px solid #e4e7ed; +} + +.card-title { + font-size: 14px; + font-weight: 600; + color: #303133; +} + +.card-action { + padding: 4px 8px; + font-size: 11px; + min-width: 50px; +} + +.card-body { + padding: 15px; + display: flex; + justify-content: center; + align-items: center; +} + +.upload-btn { + background-color: #909399; + color: #fff; +} + +.table-container { + border: 1px solid $border-color; + border-radius: 4px; + margin-top: 20px; + + .table-header { + display: flex; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + + .th { + flex: 1; + padding: 12px; + font-weight: bold; + } + } + + .table-row { + display: flex; + border-bottom: 1px solid $border-color; + padding: 12px; + + &:last-child { + border-bottom: none; + } + + .td { + flex: 1; + display: flex; + align-items: center; + } + } +} + +.table-header { + display: flex; + background: linear-gradient(135deg, #f8f9fa, #e9ecef); + border-bottom: 1px solid var(--border-color); + position: sticky; + top: 0; + z-index: 10; +} + +.th { + flex: 1; + padding: 12px 8px; + font-weight: bold; + text-align: center; + font-size: 14px; + color: #606266; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.table-row { + display: flex; + border-bottom: 1px solid var(--border-color); + transition: background-color 0.2s ease; +} + +.table-row:hover { + background-color: rgba(64, 158, 255, 0.05); +} + +.table-row:nth-child(even) { + background-color: rgba(248, 249, 250, 0.5); +} + +.table-row:last-child { + border-bottom: none; +} + +.td { + flex: 1; + padding: 12px 8px; + display: flex; + justify-content: center; + align-items: center; + word-break: break-word; + min-width: 0; +} + +.result-badge { + display: inline-block; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: bold; +} + +.result-badge.OK { + background-color: rgba(46, 204, 113, 0.1); + color: var(--success-color); +} + +.result-badge.NG { + background-color: rgba(231, 76, 60, 0.1); + color: var(--danger-color); +} + +// 鏂扮殑缁撴灉鏄剧ず鏍峰紡 +.result-display { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + min-height: 40px; +} + +// 鏁板瓧缁撴灉鏍峰紡 +.number-result { + display: flex; + flex-direction: column; + align-items: center; + padding: 8px 12px; + border-radius: 8px; + min-width: 60px; + position: relative; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + + &.number-pass { + background: linear-gradient(135deg, #e8f5e8, #f0f9f0); + border: 2px solid #67C23A; + } + + &.number-fail { + background: linear-gradient(135deg, #fdeaea, #fef0f0); + border: 2px solid #F56C6C; + } + + &.number-normal { + background: linear-gradient(135deg, #f5f7fa, #fafbfc); + border: 2px solid #909399; + } + + .number-value { + font-size: 16px; + font-weight: bold; + color: #333; + margin-bottom: 2px; + } + + .number-unit { + font-size: 10px; + color: #666; + margin-bottom: 4px; + } + + .number-status { + position: absolute; + top: -4px; + right: -4px; + background: white; + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + } +} + +// 鐘舵�佺粨鏋滄牱寮� +.status-result { + display: flex; + align-items: center; + padding: 8px 16px; + border-radius: 20px; + font-weight: bold; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; + backdrop-filter: blur(10px); + + &.status-pass { + background: linear-gradient(135deg, #67C23A, #85ce61); + color: white; + } + + &.status-fail { + background: linear-gradient(135deg, #F56C6C, #f78989); + color: white; + } + + .status-icon { + margin-right: 6px; + display: flex; + align-items: center; + } + + .status-text { + font-size: 14px; + letter-spacing: 0.5px; + } + + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + } +} + +// 淇濈暀鍘熸湁鏍峰紡浣滀负澶囩敤 +.result-badge { + display: inline-block; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: bold; + + &.OK { + background-color: rgba($success-color, 0.1); + color: $success-color; + } + + &.NG { + background-color: rgba($danger-color, 0.1); + color: $danger-color; + } +} + +.danger { + color: var(--danger-color); +} + +.image-preview { + width: 120px; + height: 120px; + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; + margin-bottom: 10px; + cursor: pointer; + transition: all 0.3s ease; +} + +.image-preview:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.image-preview image { + width: 100%; + height: 100%; + object-fit: cover; +} + .overlay { position: fixed; @@ -465,12 +1097,361 @@ border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 68vw; - /* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */ height: 25vh; - /* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */ } -.edit { - background-color: white; +.form-group { + margin-bottom: 16px; + + .form-label { + display: block; + margin-bottom: 8px; + font-weight: bold; + color: #333; + } + + .form-input { + width: 100%; + height: 40px; + padding: 0 12px; + border: 1px solid $border-color; + border-radius: 4px; + font-size: 14px; + box-sizing: border-box; + + &:focus { + border-color: $primary-color; + outline: none; + } + } } + +.input1 { + display: block; +} + +.input2 { + display: none; +} + +.input-group { + margin: 16px 0; + + .input-wrapper { + display: flex; + gap: 12px; + + .result-input { + flex: 1; + height: 45px; + padding: 0 12px; + border: 1px solid $border-color; + border-radius: 4px; + font-size: 14px; + } + + .upload-btn { + background-color: #909399; + color: #fff; + padding: 0 10px; + margin: 0; + } + } +} + +.result-preview { + .info-label { + font-weight: bold; + color: #333; + } + + .info-value { + color: #333; + font-weight: 500; + } +} + +.result-ng { + .info-label { + font-weight: bold; + color: #333; + } + + .info-value { + color: $danger-color; + font-weight: 500; + } +} + +.danger { + color: $danger-color; +} + +/* 绠�娲佽〃鏍兼牱寮� - 閫傚悎骞撮暱鐢ㄦ埛 */ +.simple-table-container { + margin: 20px 0; + border: 2px solid #ddd; + border-radius: 8px; + background: #fff; +} + +.simple-table-header { + padding: 15px 20px; + background: #f5f7fa; + border-bottom: 2px solid #ddd; + display: flex; + justify-content: space-between; + align-items: center; +} + +.simple-title { + font-size: 18px; + font-weight: bold; + color: #333; +} + +.simple-status { + padding: 8px 16px; + border-radius: 6px; + font-size: 14px; + font-weight: bold; + background: #ffc107; + color: #333; +} + +.simple-status.completed { + background: #28a745; + color: #fff; +} + +.simple-table { + width: 100%; +} + +.simple-header-row { + display: flex; + background: #e9ecef; + border-bottom: 2px solid #ddd; +} + +.simple-header-cell { + flex: 1; + padding: 15px 20px; + font-size: 16px; + font-weight: bold; + color: #333; + text-align: center; + border-right: 1px solid #ddd; +} + +.simple-header-cell:first-child { + flex: 0 0 80px; +} + +.simple-header-cell:last-child { + border-right: none; + flex: 0 0 120px; +} + +.simple-data-row { + display: flex; + border-bottom: 1px solid #ddd; +} + +.simple-data-row:nth-child(even) { + background: #f8f9fa; +} + +.simple-data-cell { + flex: 1; + padding: 15px 20px; + text-align: center; + border-right: 1px solid #ddd; + display: flex; + align-items: center; + justify-content: center; +} + +.simple-index { + flex: 0 0 80px; + font-size: 18px; + font-weight: bold; + color: #333; +} + +.simple-result { + text-align: left; + justify-content: flex-start; +} + +.simple-action { + border-right: none; + flex: 0 0 120px; +} + +.simple-number-result { + display: flex; + align-items: center; + gap: 12px; + width: 100%; +} + +.result-value { + font-size: 20px; + font-weight: bold; + color: #333; +} + +.result-unit { + font-size: 14px; + color: #666; +} + +.result-status { + padding: 6px 12px; + border-radius: 4px; + font-size: 14px; + font-weight: bold; + margin-left: auto; +} + +.result-status.pass { + background: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.result-status.fail { + background: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +.simple-status-result { + width: 100%; +} + +.simple-status { + padding: 10px 20px; + border-radius: 6px; + font-size: 16px; + font-weight: bold; + text-align: center; + display: inline-block; +} + +.simple-status.pass { + background: #28a745; + color: #fff; +} + +.simple-status.fail { + background: #dc3545; + color: #fff; +} + +.simple-btn { + padding: 10px 16px; + background: #007bff; + color: #fff; + border: none; + border-radius: 6px; + font-size: 14px; + font-weight: bold; + cursor: pointer; + min-width: 80px; +} + +.simple-btn:active { + background: #0056b3; +} + +/* 鍝嶅簲寮忚璁� */ +@media (max-width: 768px) { + .simple-table-header { + padding: 12px 16px; + } + + .simple-title { + font-size: 16px; + } + + .simple-header-cell, + .simple-data-cell { + padding: 12px 16px; + font-size: 14px; + } + + .simple-index { + flex: 0 0 60px; + } + + .simple-action { + flex: 0 0 100px; + } + + .result-value { + font-size: 18px; + } +} + +@media (max-width: 500px) { + .input1 { + display: none; + } + + .input2 { + display: block; + } + + .simple-table-container { + margin: 16px -10px; + border-radius: 0; + } + + .simple-table-header { + padding: 10px 12px; + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .simple-title { + font-size: 14px; + } + + .simple-status { + font-size: 12px; + padding: 6px 12px; + } + + .simple-header-cell, + .simple-data-cell { + padding: 10px 8px; + font-size: 12px; + } + + .simple-index { + flex: 0 0 50px; + } + + .simple-action { + flex: 0 0 80px; + } + + .simple-btn { + padding: 8px 10px; + font-size: 12px; + min-width: 60px; + } + + .result-value { + font-size: 16px; + } + + .simple-status { + font-size: 14px; + } +} + </style> \ No newline at end of file -- Gitblit v1.9.3