| | |
| | | el: '#app', |
| | | data: function () { |
| | | return { |
| | | tableData: [], // 生成的表格数据 |
| | | formData: { // 表单数据 |
| | | temperatureData: {} // 存储温度数据 |
| | | tableTbData: [], // "制热性能"生成的表格数据 |
| | | formTbData: { // 表单数据 |
| | | temperatureData: {} // 存储的实际温度、实际流量数据 |
| | | }, |
| | | headers: [], |
| | | showZr: false, |
| | | waterOptions: [ |
| | | { value: '100℃', text: '100℃' }, |
| | | { value: '99℃', text: '99℃' }, |
| | | { value: '90℃', text: '90℃' }, |
| | | { value: '85℃', text: '85℃' }, |
| | | { value: '80℃', text: '80℃' }, |
| | | { value: '75℃', text: '75℃' }, |
| | | { value: '65℃', text: '65℃' }, |
| | | { value: '60℃', text: '60℃' }, |
| | | { value: '55℃', text: '55℃' }, |
| | | { value: '45℃', text: '45℃' }, |
| | | { value: '42℃', text: '42℃' }, |
| | | { value: '常温水', text: '常温水' }, |
| | | { value: '0℃', text: '0℃' }, |
| | | { value: '5℃', text: '5℃' }, |
| | | { value: '15℃', text: '15℃' }, |
| | | { value: '35℃', text: '35℃' }, |
| | | { value: '55℃', text: '55℃' }, |
| | | { value: '75℃', text: '75℃' }, |
| | | { value: '100℃', text: '100℃' } |
| | | ], |
| | | { value: '冰水', text: '冰水' }, |
| | | { value: '70℃', text: '70℃' }, |
| | | { value: '50℃', text: '50℃' }, |
| | | { value: '微冷', text: '微冷' } |
| | | ],//水温选项 |
| | | flowOptions: [ |
| | | { value: '100ml', text: '100ml' }, |
| | | { value: '200ml', text: '200ml' }, |
| | | { value: '300ml', text: '300ml' }, |
| | | { value: '400ml', text: '400ml' }, |
| | | { value: '500ml', text: '500ml' }, |
| | | { value: '600ml', text: '600ml' }, |
| | | { value: '700ml', text: '700ml' }, |
| | | { value: '800ml', text: '800ml' }, |
| | | { value: '900ml', text: '900ml' }, |
| | | { value: '1000ml', text: '1000ml' } |
| | | ], |
| | | { value: '50ml', text: '50ml' }, |
| | | { value: '120ml', text: '120ml' }, |
| | | { value: '150ml', text: '150ml' }, |
| | | { value: '160ml', text: '160ml' }, |
| | | { value: '250ml', text: '250ml' }, |
| | | { value: '260ml', text: '260ml' }, |
| | | { value: '350ml', text: '350ml' }, |
| | | { value: '360ml', text: '360ml' }, |
| | | { value: '450ml', text: '450ml' }, |
| | | { value: '550ml', text: '550ml' }, |
| | | { value: '750ml', text: '750ml' }, |
| | | { value: '999ml', text: '999ml' }, |
| | | { value: '1min', text: '一分钟流量' }, |
| | | { value: '3min', text: '三分钟流量' } |
| | | ],//流量选项 |
| | | selectedWater: [],// 已选水温值 |
| | | selectedFlow: [], // 已选流量值 |
| | | isLoading: false, |
| | |
| | | }, |
| | | createTb() { |
| | | // 清空旧数据 |
| | | this.tableData = []; |
| | | this.formData.temperatureData = {}; |
| | | this.tableTbData = []; |
| | | this.formTbData.temperatureData = {}; |
| | | |
| | | // 校验选择 |
| | | if (this.selectedWater.length === 0 || this.selectedFlow.length === 0) { |
| | |
| | | } |
| | | |
| | | // 生成表头 |
| | | const headers = ['设定温度','实际温度', ...this.selectedFlow.sort().map(f => f )]; |
| | | // 修改headers生成逻辑 ↓ |
| | | const headers = [ |
| | | '设定温度', |
| | | '实际温度', |
| | | ...this.selectedFlow.sort().map(f => `流量${f}`) |
| | | ]; |
| | | this.headers = headers; |
| | | |
| | | console.log(this.headers); |
| | | // 生成行数据 |
| | | this.tableData = this.selectedWater.sort((a,b) => a - b).map(water => { |
| | | this.tableTbData = this.selectedWater.sort((a,b) => a - b).map(water => { |
| | | const row = { |
| | | temperature: water === '常温水' ? water : water, |
| | | values: this.selectedFlow.map(flow => ({ |
| | | flow: flow, |
| | | value: '' // 初始空值 |
| | | })) |
| | | values: Object.fromEntries([ |
| | | ['temp', ''], // 固定温度字段 |
| | | ...this.selectedFlow.map(flow => [flow, '']) |
| | | ]) |
| | | }; |
| | | |
| | | // 初始化表单数据 |
| | | this.formData.temperatureData[water] = {}; |
| | | // 初始化表单数据结构 |
| | | this.$set(this.formTbData.temperatureData, water, {}); |
| | | // 添加固定字段”实际温度“初始化 |
| | | this.$set(this.formTbData.temperatureData[water], 'temp', ''); |
| | | this.selectedFlow.forEach(flow => { |
| | | this.formData.temperatureData[water][flow] = ''; |
| | | this.$set(this.formTbData.temperatureData[water], flow, ''); |
| | | }); |
| | | |
| | | return row; |
| | |
| | | const tableEl = document.getElementById('temperature-table'); |
| | | if (tableEl) tableEl.scrollIntoView({ behavior: 'smooth' }); |
| | | }, 100); |
| | | console.log(this.formTbData); |
| | | }, |
| | | } |
| | | }) |