From 1b483dc0ff1f9fd0ec8af5e445b8ccd31cc3dfd6 Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期四, 20 十一月 2025 16:17:12 +0800
Subject: [PATCH] 调试
---
components/EquipmentInspection.vue | 614 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 396 insertions(+), 218 deletions(-)
diff --git a/components/EquipmentInspection.vue b/components/EquipmentInspection.vue
index c56e5c7..acdeceb 100644
--- a/components/EquipmentInspection.vue
+++ b/components/EquipmentInspection.vue
@@ -1,58 +1,79 @@
<template>
<view class="inspection-page">
- <!-- 椤堕儴鏄剧ず鏈哄彴淇℃伅涓庡勾浠介�夋嫨 -->
+ <!-- 椤堕儴鏍囬鍜屾満鍙颁俊鎭� -->
+ <!--璁惧鐐规-->
<view class="header">
- <view class="machine-info">
- <text>褰撳墠鏈哄彴锛�</text>
- <text class="machine-text">{{ machineNo || '鏈粦瀹�' }}</text>
+ <view class="title-row">
+ <text class="page-title">璁惧鐐规琛�</text>
</view>
- <view class="year-picker">
- <text class="year-label">鐐规骞翠唤</text>
- <picker mode="selector"
- :range="yearOptions"
- :value="yearPickerIndex"
- @change="handleYearChange">
- <view class="picker-trigger">{{ currentYear }} 骞�</view>
- </picker>
- </view>
- </view>
-
- <view class="section">
- <view class="section-title">鏃ョ偣妫�锛�31 澶╋級</view>
- <view class="grid days-grid">
- <view v-for="(day, index) in days"
- :key="`day-${day}`"
- class="grid-cell"
- :class="{ checked: dailyChecks[index] }"
- @click="toggleDay(index)">
- <text class="grid-text">{{ day }}鏃�</text>
+ <view class="info-row">
+ <view class="info-item">
+ <text class="info-label">璁惧鍚嶇О锛�</text>
+ <text class="info-value">{{ machineNo || '鏈粦瀹�' }}鍙烽娇杞満</text>
+ </view>
+ <view class="info-item">
+ <text class="info-label">鏃ユ湡锛�</text>
+ <picker mode="date" fields="month" :value="currentDate" @change="handleDateChange">
+ <view class="date-picker">{{ displayDate }}</view>
+ </picker>
</view>
</view>
- <view class="summary">宸茬偣妫�锛歿{ checkedDaysCount }}/31</view>
</view>
- <view class="section">
- <view class="section-title">鏈堢偣妫�锛�12 鏈堬級</view>
- <view class="grid months-grid">
- <view v-for="(month, index) in months"
- :key="`month-${month}`"
- class="grid-cell"
- :class="{ checked: monthlyChecks[index] }"
- @click="toggleMonth(index)">
- <text class="grid-text">{{ month }}鏈�</text>
- </view>
- </view>
- <view class="summary">宸茬偣妫�锛歿{ checkedMonthsCount }}/12</view>
+ <!-- 鐐规琛ㄦ牸 -->
+ <view class="table-container">
+ <table class="inspection-table">
+ <thead>
+ <tr>
+ <th class="col-category" rowspan="2">绫诲埆</th>
+ <th class="col-item" rowspan="2">鐐规銆佷繚鍏婚」鐩唴瀹�</th>
+ <th class="col-cycle" rowspan="2">鍛ㄦ湡</th>
+ <th class="col-days" colspan="31">鏃ユ湡</th>
+ </tr>
+ <tr>
+ <th v-for="day in 31" :key="`day-${day}`" class="day-header">{{ day }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- 鏃ュ父鐐规椤圭洰 -->
+ <tr v-for="(item, idx) in dailyItems" :key="`daily-${idx}`">
+ <td v-if="idx === 0" :rowspan="dailyItems.length" class="category-cell">鏃ュ父鐐规</td>
+ <td class="item-cell">{{ item.name }}</td>
+ <td class="cycle-cell">{{ item.cycle }}</td>
+ <td v-for="day in 31"
+ :key="`daily-${idx}-${day}`"
+ class="check-cell"
+ :class="{ checked: dailyChecks[idx][day - 1] }"
+ @click="toggleCheck('daily', idx, day - 1)">
+ <text v-if="dailyChecks[idx][day - 1]">鈼�</text>
+ </td>
+ </tr>
+ <!-- 鏈堝害鐐规椤圭洰 -->
+ <tr v-for="(item, idx) in monthlyItems" :key="`monthly-${idx}`">
+ <td v-if="idx === 0" :rowspan="monthlyItems.length" class="category-cell">鏈堝害鐐规</td>
+ <td class="item-cell">{{ item.name }}</td>
+ <td class="cycle-cell">{{ item.cycle }}</td>
+ <td v-for="day in 31"
+ :key="`monthly-${idx}-${day}`"
+ class="check-cell"
+ :class="{ checked: monthlyChecks[idx][day - 1] }"
+ @click="toggleCheck('monthly', idx, day - 1)">
+ <text v-if="monthlyChecks[idx][day - 1]">鈼�</text>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</view>
+ <!-- 搴曢儴鎸夐挳 -->
<view class="actions">
- <button class="btn-primary"
+ <button class="btn-save"
:loading="saving"
:disabled="saving || !machineNo"
@click="handleSave">
- 淇濆瓨
+ 鎻愪氦
</button>
- <button class="btn-secondary"
+ <button class="btn-clear"
:disabled="saving"
@click="resetChecks">
娓呯┖
@@ -73,35 +94,40 @@
}
},
data() {
- const currentYear = new Date().getFullYear()
+ const now = new Date()
+ const year = now.getFullYear()
+ const month = String(now.getMonth() + 1).padStart(2, '0')
return {
- // 褰撳墠骞翠唤鐢ㄤ簬鍖哄垎涓嶅悓骞村害鐨勭偣妫�琛�
- currentYear,
- yearOptions: this.buildYearOptions(currentYear),
- dailyChecks: Array(31).fill(false),
- monthlyChecks: Array(12).fill(false),
+ currentDate: `${year}-${month}`,
+ dailyItems: [
+ { name: '鏈鸿姱鏄惁娓呮磥', cycle: '鈼�' },
+ { name: '璁惧寮�鍏�', cycle: '鈼�' },
+ { name: '鏀瑰杽杩愯', cycle: '鈼�' },
+ { name: '娓呯悊娓呮磥鎴栬皟璇曟槸鍚︽湁寮傚父', cycle: '鈼�' },
+ { name: '宸ヨ壓鍙傛暟', cycle: '鈼�' },
+ { name: '鏈烘补杩愯鏄惁鏈夊紓甯�', cycle: '鈼�' }
+ ],
+ monthlyItems: [
+ { name: '鐢佃〃娌归潰鏄惁姝ｅ父鏄惁鏈夋笚婕�', cycle: '鈼�' },
+ { name: '涓囧悜鎺ュご澶嶆煡骞跺姞娌�', cycle: '鈼�' }
+ ],
+ dailyChecks: [],
+ monthlyChecks: [],
saving: false,
loading: false,
dirty: false
}
},
computed: {
- yearPickerIndex() {
- const index = this.yearOptions.indexOf(this.currentYear)
- return index >= 0 ? index : 0
- },
- days() {
- return Array.from({ length: 31 }, (_, idx) => idx + 1)
- },
- months() {
- return Array.from({ length: 12 }, (_, idx) => idx + 1)
- },
- checkedDaysCount() {
- return this.dailyChecks.filter(Boolean).length
- },
- checkedMonthsCount() {
- return this.monthlyChecks.filter(Boolean).length
+ displayDate() {
+ // 鏍煎紡鍖栨樉绀轰负 "2025骞�11鏈�"
+ if (!this.currentDate) return ''
+ const [year, month] = this.currentDate.split('-')
+ return `${year}骞�${month}鏈坄
}
+ },
+ created() {
+ this.initChecks()
},
watch: {
machineNo: {
@@ -116,77 +142,101 @@
}
},
methods: {
- buildYearOptions(baseYear) {
- // 鐢熸垚鍓嶅悗鍚勪袱骞寸殑骞翠唤鍒楄〃锛屾柟渚垮垏鎹㈠巻鍙茶褰�
- const range = []
- for (let offset = -2; offset <= 2; offset += 1) {
- range.push(baseYear + offset)
- }
- return range
+ initChecks() {
+ // 鍒濆鍖栫偣妫�鏁扮粍锛氭瘡涓」鐩搴�31澶╃殑鍕鹃�夌姸鎬�
+ this.dailyChecks = this.dailyItems.map(() => Array(31).fill(false))
+ this.monthlyChecks = this.monthlyItems.map(() => Array(31).fill(false))
},
- handleYearChange(event) {
- // 鍒囨崲骞翠唤鍚庤鍙栧搴旂殑鐐规鏁版嵁
- const index = Number(event.detail.value || 0)
- const selected = this.yearOptions[index]
- if (selected === this.currentYear) {
- return
- }
- this.currentYear = selected
+ handleDateChange(event) {
+ this.currentDate = event.detail.value
this.loadInspectionData()
},
async loadInspectionData() {
- // 浠庡悗鍙版垨鏈湴缂撳瓨鍔犺浇鐐规璁板綍
- if (!this.machineNo) {
- return
- }
+ if (!this.machineNo) return
+
this.loading = true
try {
const record = await queryEquipmentInspection(this, {
machineNo: this.machineNo,
- year: this.currentYear
+ date: this.currentDate
}, { mock: true, showLoading: true })
- this.dailyChecks = record.dailyChecks || Array(31).fill(false)
- this.monthlyChecks = record.monthlyChecks || Array(12).fill(false)
+
+ // 楠岃瘉骞惰缃棩甯哥偣妫�鏁版嵁
+ if (record && Array.isArray(record.dailyChecks) && record.dailyChecks.length === 6) {
+ // 纭繚姣忎釜瀛愭暟缁勯兘鏄湁鏁堢殑鏁扮粍
+ const isValid = record.dailyChecks.every(arr => Array.isArray(arr) && arr.length === 31)
+ if (isValid) {
+ // 浣跨敤 $set 纭繚 Vue 鑳藉妫�娴嬪埌宓屽鏁扮粍鐨勫彉鍖�
+ this.$set(this, 'dailyChecks', record.dailyChecks.map(arr => [...arr]))
+ } else {
+ console.warn('鏃ュ父鐐规鏁版嵁鏍煎紡涓嶆纭紝浣跨敤榛樿鍊�')
+ this.$set(this, 'dailyChecks', this.dailyItems.map(() => Array(31).fill(false)))
+ }
+ } else {
+ this.$set(this, 'dailyChecks', this.dailyItems.map(() => Array(31).fill(false)))
+ }
+
+ // 楠岃瘉骞惰缃湀搴︾偣妫�鏁版嵁
+ if (record && Array.isArray(record.monthlyChecks) && record.monthlyChecks.length === 2) {
+ // 纭繚姣忎釜瀛愭暟缁勯兘鏄湁鏁堢殑鏁扮粍
+ const isValid = record.monthlyChecks.every(arr => Array.isArray(arr) && arr.length === 31)
+ if (isValid) {
+ // 浣跨敤 $set 纭繚 Vue 鑳藉妫�娴嬪埌宓屽鏁扮粍鐨勫彉鍖�
+ this.$set(this, 'monthlyChecks', record.monthlyChecks.map(arr => [...arr]))
+ } else {
+ console.warn('鏈堝害鐐规鏁版嵁鏍煎紡涓嶆纭紝浣跨敤榛樿鍊�')
+ this.$set(this, 'monthlyChecks', this.monthlyItems.map(() => Array(31).fill(false)))
+ }
+ } else {
+ this.$set(this, 'monthlyChecks', this.monthlyItems.map(() => Array(31).fill(false)))
+ }
+
this.dirty = false
} catch (error) {
console.error('鍔犺浇璁惧鐐规淇℃伅澶辫触', error)
this.$showMessage('鐐规璁板綍鍔犺浇澶辫触')
+ this.initChecks()
} finally {
this.loading = false
}
},
- toggleDay(index) {
- // 鍒囨崲鏃ョ偣妫�鐨勫嬀閫夌姸鎬�
+ toggleCheck(type, itemIdx, dayIdx) {
if (!this.machineNo) {
this.$showMessage('璇峰厛缁戝畾鏈哄彴')
return
}
- this.$set(this.dailyChecks, index, !this.dailyChecks[index])
- this.dirty = true
- },
- toggleMonth(index) {
- // 鍒囨崲鏈堢偣妫�鐨勫嬀閫夌姸鎬�
- if (!this.machineNo) {
- this.$showMessage('璇峰厛缁戝畾鏈哄彴')
- return
+
+ if (type === 'daily') {
+ // 瀹夊叏妫�鏌ワ細纭繚鏁扮粍鍜岀储寮曟湁鏁�
+ if (!Array.isArray(this.dailyChecks) || !Array.isArray(this.dailyChecks[itemIdx])) {
+ console.error('鏃ュ父鐐规鏁版嵁缁撴瀯寮傚父锛岄噸鏂板垵濮嬪寲')
+ this.initChecks()
+ return
+ }
+ this.$set(this.dailyChecks[itemIdx], dayIdx, !this.dailyChecks[itemIdx][dayIdx])
+ } else {
+ // 瀹夊叏妫�鏌ワ細纭繚鏁扮粍鍜岀储寮曟湁鏁�
+ if (!Array.isArray(this.monthlyChecks) || !Array.isArray(this.monthlyChecks[itemIdx])) {
+ console.error('鏈堝害鐐规鏁版嵁缁撴瀯寮傚父锛岄噸鏂板垵濮嬪寲')
+ this.initChecks()
+ return
+ }
+ this.$set(this.monthlyChecks[itemIdx], dayIdx, !this.monthlyChecks[itemIdx][dayIdx])
}
- this.$set(this.monthlyChecks, index, !this.monthlyChecks[index])
this.dirty = true
},
async handleSave() {
- // 淇濆瓨褰撳墠鐐规琛紝棰勭暀鍚庡彴 POST 鎺ュ彛
if (!this.machineNo) {
this.$showMessage('璇峰厛缁戝畾鏈哄彴')
return
}
- if (this.saving) {
- return
- }
+ if (this.saving) return
+
this.saving = true
try {
const response = await saveEquipmentInspection(this, {
machineNo: this.machineNo,
- year: this.currentYear,
+ date: this.currentDate,
dailyChecks: this.dailyChecks,
monthlyChecks: this.monthlyChecks
}, { mock: true, showLoading: true })
@@ -205,151 +255,279 @@
}
},
resetChecks() {
- // 涓�閿竻绌哄嬀閫夌姸鎬侊紝渚夸簬閲嶆柊褰曞叆
- this.dailyChecks = Array(31).fill(false)
- this.monthlyChecks = Array(12).fill(false)
+ this.initChecks()
this.dirty = true
+ this.$showMessage('宸叉竻绌烘墍鏈夌偣妫�璁板綍')
}
}
}
</script>
<style scoped>
-.inspection-page {
- display: flex;
- flex-direction: column;
- padding: 2vh 2vw;
- font-size: 1.4vw;
- color: #333333;
-}
+ .inspection-page {
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ font-size: 18px; /* 鍘�14px锛屾暣浣撴彁鍗� */
+ color: #333;
+ background: #f5f5f5;
+ height: 100%;
+ overflow: hidden;
+ }
-.header {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 2vh;
-}
+ .header {
+ background: #fff;
+ border-radius: 8px;
+ padding: 12px 16px;
+ margin-bottom: 10px;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+ }
-.machine-info {
- display: flex;
- flex-direction: row;
- align-items: center;
- font-size: 1.6vw;
-}
+ .title-row {
+ text-align: center;
+ margin-bottom: 8px;
+ }
-.machine-text {
- font-weight: bold;
- margin-left: 0.5vw;
-}
+ .page-title {
+ font-size: 28px; /* 鍘�20px */
+ font-weight: bold;
+ color: #333;
+ }
-.year-picker {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
+ .info-row {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 60px;
+ }
-.year-label {
- margin-right: 1vw;
-}
+ .info-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
-.picker-trigger {
- border: 1px solid #d8d8d8;
- border-radius: 0.8vw;
- padding: 0.6vh 1.4vw;
- background-color: #ffffff;
- font-size: 1.4vw;
-}
+ .info-label {
+ font-size: 18px; /* 鍘�14px */
+ color: #666;
+ }
-.section {
- margin-bottom: 3vh;
- background-color: #ffffff;
- border-radius: 1vw;
- padding: 2vh 1.5vw;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-}
+ .info-value {
+ font-size: 18px; /* 鍘�14px */
+ font-weight: 600;
+ color: #333;
+ }
-.section-title {
- font-size: 1.8vw;
- font-weight: bold;
- margin-bottom: 1.5vh;
-}
+ .date-picker {
+ padding: 4px 12px;
+ background: #f0f0f0;
+ border-radius: 4px;
+ font-size: 18px; /* 鍘�14px */
+ cursor: pointer;
+ min-width: 100px;
+ text-align: center;
+ }
-.grid {
- display: grid;
- grid-gap: 1vh;
-}
+ .table-container {
+ flex: 1;
+ overflow: auto;
+ background: #fff;
+ border-radius: 8px;
+ padding: 8px;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+ }
-.days-grid {
- grid-template-columns: repeat(7, 1fr);
-}
+ .inspection-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 16px; /* 鍘�12px */
+ min-width: 1400px;
+ }
-.months-grid {
- grid-template-columns: repeat(4, 1fr);
-}
+ .inspection-table th,
+ .inspection-table td {
+ border: 1px solid #666;
+ padding: 6px 10px; /* 鍘�4px 6px */
+ text-align: center;
+ white-space: nowrap;
+ }
-.grid-cell {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 6vh;
- background-color: #f5f7fa;
- border-radius: 0.8vw;
- border: 1px solid #dcdfe6;
- color: #606266;
- transition: all 0.2s ease-in-out;
-}
+ .inspection-table thead {
+ background: #e8e8e8;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ }
-.grid-cell.checked {
- background-color: #0faeff;
- color: #ffffff;
- border-color: transparent;
-}
+ .inspection-table th {
+ font-weight: bold;
+ font-size: 18px; /* 鍘�13px */
+ background: #e8e8e8;
+ }
-.grid-cell:active {
- transform: scale(0.98);
-}
+ .col-category {
+ min-width: 80px;
+ width: 80px;
+ }
-.grid-text {
- font-size: 1.4vw;
-}
+ .col-item {
+ min-width: 180px;
+ width: 180px;
+ text-align: left;
+ }
-.summary {
- margin-top: 1.5vh;
- font-size: 1.3vw;
- color: #909399;
-}
+ .col-cycle {
+ min-width: 50px;
+ width: 50px;
+ }
-.actions {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- gap: 1vw;
-}
+ .col-days {
+ background: #d0d0d0;
+ }
-.btn-primary,
-.btn-secondary {
- min-width: 12vw;
- padding: 1.2vh 1vw;
- font-size: 1.4vw;
- border-radius: 0.8vw;
- border: none;
- text-align: center;
-}
+ .day-header {
+ width: 36px; /* 鍘�30px */
+ min-width: 36px;
+ font-size: 15px; /* 鍘�11px */
+ padding: 4px;
+ }
-.btn-primary {
- background-color: #0faeff;
- color: #ffffff;
-}
+ .category-cell {
+ background: #f5f5f5;
+ font-weight: bold;
+ vertical-align: middle;
+ }
-.btn-secondary {
- background-color: #ffffff;
- color: #0faeff;
- border: 1px solid #0faeff;
-}
+ .item-cell {
+ text-align: left;
+ padding-left: 12px; /* 鍘�8px */
+ font-size: 16px; /* 鍘�12px */
+ }
-.btn-secondary:active,
-.btn-primary:active {
- opacity: 0.8;
-}
+ .cycle-cell {
+ font-size: 20px; /* 鍘�16px */
+ color: #333;
+ }
+
+ .check-cell {
+ width: 36px; /* 鍘�30px */
+ min-width: 36px;
+ height: 32px; /* 鍘�28px */
+ cursor: pointer;
+ background: #fff;
+ transition: background 0.2s;
+ font-size: 22px; /* 鍘�18px */
+ color: #0faeff;
+ }
+
+ .check-cell:hover {
+ background: #f0f8ff;
+ }
+
+ .check-cell.checked {
+ background: #e6f7ff;
+ }
+
+ .actions {
+ display: flex;
+ justify-content: center;
+ gap: 24px; /* 鍘�16px */
+ margin-top: 10px;
+ padding: 10px 0;
+ }
+
+ .btn-save,
+ .btn-clear {
+ min-width: 140px; /* 鍘�120px */
+ padding: 14px 32px; /* 鍘�10px 24px */
+ font-size: 20px; /* 鍘�16px */
+ border-radius: 6px;
+ border: none;
+ cursor: pointer;
+ transition: all 0.2s;
+ }
+
+ .btn-save {
+ background: #00a2e9;
+ color: #fff;
+ }
+
+ .btn-save:hover {
+ background: #0086c0;
+ }
+
+ .btn-save:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+ }
+
+ .btn-clear {
+ background: #fff;
+ color: #333;
+ border: 1px solid #d0d0d0;
+ }
+
+ .btn-clear:hover {
+ background: #f5f5f5;
+ }
+
+ /* 閽堝1280*717灞忓箷浼樺寲 */
+ @media screen and (max-width: 1280px) and (max-height: 800px) {
+ .inspection-page {
+ padding: 6px;
+ font-size: 15px;
+ }
+
+ .header {
+ padding: 8px 12px;
+ margin-bottom: 6px;
+ }
+
+ .page-title {
+ font-size: 22px;
+ }
+
+ .info-label,
+ .info-value,
+ .date-picker {
+ font-size: 15px;
+ }
+
+ .inspection-table {
+ font-size: 13px;
+ }
+
+ .inspection-table th {
+ font-size: 15px;
+ padding: 4px 6px;
+ }
+
+ .inspection-table td {
+ padding: 4px 6px;
+ }
+
+ .day-header {
+ width: 28px;
+ min-width: 28px;
+ font-size: 12px;
+ }
+
+ .check-cell {
+ width: 28px;
+ min-width: 28px;
+ height: 24px;
+ font-size: 16px;
+ }
+
+ .item-cell {
+ font-size: 13px;
+ }
+
+ .btn-save,
+ .btn-clear {
+ min-width: 110px;
+ padding: 10px 20px;
+ font-size: 16px;
+ }
+ }
</style>
--
Gitblit v1.9.3