From 3e4625e7951cb6dcfab077e535782eee7b0b70fb Mon Sep 17 00:00:00 2001 From: MrShi <1878285526@qq.com> Date: 星期三, 12 二月 2025 09:46:13 +0800 Subject: [PATCH] 改bug --- admin/src/views/roomStatus/index.vue | 235 ++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 138 insertions(+), 97 deletions(-) diff --git a/admin/src/views/roomStatus/index.vue b/admin/src/views/roomStatus/index.vue index 2af5abd..ebcc6ef 100644 --- a/admin/src/views/roomStatus/index.vue +++ b/admin/src/views/roomStatus/index.vue @@ -194,73 +194,73 @@ </el-tab-pane> <el-tab-pane label="绉熷鍚堝悓" name="project" v-if="[3].includes(lv)"> <div class="xm"> - <el-card style="margin-top: 20px;"> - <div slot="header" class="clearfix"> - <span>褰撳墠鍦ㄧ鍚堝悓</span> + <div class="xm_table"> + <div style="display: flex; align-items: center; margin-bottom: 15px;"> + <el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="璇疯緭鍏ュ悎鍚岀紪鍙�"></el-input> + <el-button type="primary" @click="getFetchList">鎼滅储</el-button> + <el-button @click="clear">閲嶇疆</el-button> </div> - <div class="xm_table"> - <div style="display: flex; align-items: center; margin-bottom: 15px;"> - <el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="璇疯緭鍏ュ悎鍚岀紪鍙�"></el-input> - <el-button type="primary" @click="getFetchList">鎼滅储</el-button> - <el-button @click="clear">閲嶇疆</el-button> - </div> - <el-table - :data="tableData" - border - v-loading="loading" - style="width: 100%"> - <el-table-column - label="鍚堝悓缂栧彿"> - <template slot-scope="{row}"> - <el-button type="text" @click="$refs.ContractDetailRef.open('鍚堝悓璇︽儏', row.id)">{{row.code}}</el-button> - </template> - </el-table-column> - <el-table-column - prop="renterName" - label="绉熷"> - </el-table-column> - <el-table-column - label="绉熻祦鍗曚环"> - <template slot-scope="{row}"> - <div style="display: flex; align-items: center;"> - <span>{{row.leasePrice || 0}}鍏�/銕÷峰ぉ</span> - </div> - </template> - </el-table-column> - <el-table-column - prop="leaseDays" - label="绉熻祦澶╂暟"> - </el-table-column> - <el-table-column - label="绉熻祦闈㈢Н"> - <template slot-scope="{row}"> - {{row.totalArea}}銕� - </template> - </el-table-column> - <el-table-column - label="鎴挎簮"> - <template slot-scope="{row}"> - <div style="display: flex; flex-direction: column;"> - <span v-for="(item, index) in row.roomList" :key="index"> - {{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}} - </span> - </div> - </template> - </el-table-column> - </el-table> - <div class="xm_table_f"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="page" - :page-sizes="[10, 20, 30, 40]" - :page-size="pageTotal" - layout="total, sizes, prev, pager, next, jumper" - :total="total"> - </el-pagination> - </div> + <el-table + :data="tableData" + border + v-loading="loading" + style="width: 100%"> + <el-table-column + label="鍚堝悓缂栧彿"> + <template slot-scope="{row}"> + <el-button type="text" @click="$refs.ContractDetailRef.open('鍚堝悓璇︽儏', row.id)">{{row.code}}</el-button> + </template> + </el-table-column> + <el-table-column + label="绉熷"> + <template slot-scope="{row}"> + <div style="display: flex; align-items: center;"> + {{row.renterName}} + <el-tag type="success" v-if="[1,2,3].includes(row.status)">褰撳墠绉熸埛</el-tag> + </div> + </template> + </el-table-column> + <el-table-column + label="绉熻祦鍗曚环"> + <template slot-scope="{row}"> + <div style="display: flex; align-items: center;"> + <span>{{row.leasePrice || 0}}鍏�/銕÷峰ぉ</span> + </div> + </template> + </el-table-column> + <el-table-column + prop="leaseDays" + label="绉熻祦澶╂暟"> + </el-table-column> + <el-table-column + label="绉熻祦闈㈢Н"> + <template slot-scope="{row}"> + {{row.totalArea}}銕� + </template> + </el-table-column> + <el-table-column + label="鎴挎簮"> + <template slot-scope="{row}"> + <div style="display: flex; flex-direction: column;"> + <span v-for="(item, index) in row.roomList" :key="index"> + {{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}} + </span> + </div> + </template> + </el-table-column> + </el-table> + <div class="xm_table_f"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="page" + :page-sizes="[10, 20, 30, 40]" + :page-size="pageTotal" + layout="total, sizes, prev, pager, next, jumper" + :total="total"> + </el-pagination> </div> - </el-card> + </div> </div> </el-tab-pane> <el-tab-pane label="鎴挎�佺鐞�" name="house" v-if="[1,2].includes(lv)"> @@ -282,27 +282,30 @@ </div> <div class="xm_house_list" v-for="(item, index) in roomStatus" :key="index"> <div class="xm_house_list_left"> - <div class="xm_house_list_left_row"> + <div class="xm_house_list_left_row" :style="{ height: (item.roomsList.length * 100) + ((item.roomsList.length - 1) * 10) + 'px' }"> <span>{{item.floorName}}</span> <span>{{item.floorArea}}銕�</span> </div> </div> <div class="xm_house_list_right"> - <div class="xm_house_list_right_row" :style="{ width: child.width + 'px', backgroundColor: ifBackground(child.roomStatus) }" v-for="(child, i) in item.ywRoomStatusDataVOList" :key="i"> - <div class="ft"> - <span>{{child.roomCode}}</span> - <span>锛坽{child.roomRentArea}}銕★級</span> - </div> - <div class="xm_house_list_right_row_info" v-if="child.roomStatus !== 0"> - <div style="display: flex; align-items: center;"> - <span style="margin-right: 5px;">{{child.customerName}}</span> - <img src="@/assets/icons/ic_key_green.png" style="width: 16px; height: 16px;" v-if="child.roomStatus === 1" /> - <img src="@/assets/icons/ic_key_yellow.png" style="width: 16px; height: 16px;" v-else-if="child.roomStatus === 2" /> + <template v-for="(child, i) in item.roomsList" :key="i"> + <div class="xm_house_list_right_row" v-for="(childThree, a) in child" :key="a" :style="{ width: childThree.width + 'px', backgroundColor: ifBackground(childThree.roomStatus) }"> + <div class="ft"> + <span>{{childThree.roomCode}}</span> + <span>锛坽{childThree.roomRentArea}}銕★級</span> </div> - <span :style="{ color: returnColor(child.overData.substring(0, 10)) ? 'red' : '' }">{{child.overData.substring(0, 10)}}{{returnColor(child.overData.substring(0, 10)) ? '宸�' : ''}}鍒版湡</span> + <div class="xm_house_list_right_row_info" v-if="childThree.roomStatus !== 0"> + <div style="display: flex; align-items: center;"> + <span style="margin-right: 5px;">{{childThree.customerName}}</span> + <img src="@/assets/icons/ic_key_green.png" style="width: 16px; height: 16px;" v-if="childThree.roomStatus === 1" /> + <img src="@/assets/icons/ic_key_yellow.png" style="width: 16px; height: 16px;" v-else-if="childThree.roomStatus === 2" /> + </div> + <span :style="{ color: returnColor(childThree.overData.substring(0, 10)) ? 'red' : '' }">{{childThree.overData.substring(0, 10)}}{{returnColor(childThree.overData.substring(0, 10)) ? '宸�' : ''}}鍒版湡</span> + </div> + <div class="xm_house_list_right_row_day" v-if="childThree.roomStatus === 0">鏈嚭绉燂綔绌虹疆{{childThree.freeDayAmount}}澶�</div> </div> - <div class="xm_house_list_right_row_day" v-if="child.roomStatus === 0">鏈嚭绉燂綔绌虹疆{{child.freeDayAmount}}澶�</div> - </div> + </template> + </div> </div> </div> @@ -710,7 +713,8 @@ lv: 0, leaseStatus: '', amount: 0, - project: '' + project: '', + widthNum: '' } }, created () { @@ -829,12 +833,48 @@ buildingId: this.form.buildingId, floor: this.form.floorId }).then(res => { + // 鏁扮粍鍒嗗壊 res.forEach(item => { - let num = item.ywRoomStatusDataVOList.map(item => item.roomRentArea) - let total = num.reduce((sum, value) => sum + value, 0) - item.ywRoomStatusDataVOList.forEach(child => { - // let percentage = (child.roomRentArea / total) * 100; // 璁$畻姣忎釜鍊肩殑鍗犳瘮 - child.width = (child.roomRentArea / total) * 854 + item.ywRoomStatusDataVOList = item.ywRoomStatusDataVOList ? item.ywRoomStatusDataVOList : [] + const chunkedArray = []; + for (let i = 0; i < item.ywRoomStatusDataVOList.length; i += 4) { + chunkedArray.push(item.ywRoomStatusDataVOList.slice(i, i + 4)); + } + item.roomsList = chunkedArray + }) + // 璁$畻瀹藉害 + res.forEach(item => { + item.roomsList.forEach(one => { + let num = one.map(three => three.roomRentArea) + let total = num.reduce((sum, value) => sum + value, 0) + let width = 950 + if (one.length > 1) { + width = 950 - ((one.length - 1) * 10) + } + one.forEach(two => { + two.width = Number(Math.max((two.roomRentArea / total) * width, 150).toFixed(0)) + }) + }) + }) + // 鍑忓幓骞冲潎澶氫綑鐨勫搴� + res.forEach(item => { + item.roomsList.forEach(one => { + let num = one.map(three => three.width) + let total = num.reduce((sum, value) => sum + value, 0) + let countGreaterThan150 = one.filter(num => num.width > 150).length; + let width = 950 + if (one.length > 1) { + width = 950 - ((one.length - 1) * 10) + } + if (total > width) { + let cha = total - width + let deleNum = Math.floor(cha / countGreaterThan150) + one.forEach(two => { + if (two.width > 150) { + two.width = two.width - deleNum + } + }) + } }) }) this.roomStatus = res @@ -853,7 +893,7 @@ this.$nextTick(() => { this.deviceList = [ { value: res.workAmount || 0, name: '姝e父' }, - { value: res.exceptionAmount || 0, name: '寮傚父' }, + { value: res.exceptionAmount || 0, name: '鎹熷潖' }, { value: res.errAmount || 0, name: '鎶ュ簾' } ] this.amount = res.amount @@ -880,6 +920,7 @@ this.$nextTick(() => { this.$refs.EditRef.param.projectId = this.project this.$refs.EditRef.isShowModal = true + this.$refs.EditRef.changeProject() }) }, // 鑾峰彇璁惧鍒嗛〉 @@ -1016,7 +1057,7 @@ floorId: this.form.floorId, roomId: this.form.roomId, code: this.form.code, - statusList: [0,1,2,3] + statusList: this.lv !== 3 ? [0,1,2,3] : null } }).then(res => { this.tableData = res.records @@ -1144,7 +1185,7 @@ this.getFetchList() } else if (this.activeName === 'second') { this.getWorkOrderList() - } else if (tab.name === 'third') { + } else if (this.activeName === 'third') { this.getDevicePage() } }, @@ -1245,17 +1286,17 @@ .xm_house_list { width: 100%; display: flex; - align-items: center; - margin-top: 10px; + align-items: self-start; .xm_house_list_left { flex-shrink: 0; width: 100px; display: flex; margin-right: 15px; flex-direction: column; + margin-bottom: 10px; .xm_house_list_left_row { width: 100px; - height: 100px; + /*height: 100px;*/ background: #F4F7FC; padding: 20px 0; box-sizing: border-box; @@ -1263,7 +1304,7 @@ display: flex; align-items: center; flex-direction: column; - justify-content: space-between; + justify-content: center; &:last-child { margin-bottom: 0; } @@ -1283,9 +1324,11 @@ } } .xm_house_list_right { - width: 854px; + width: 950px; display: flex; align-items: center; + justify-content: space-between; + flex-wrap: wrap; .xm_house_list_right_row { height: 100px; padding: 12px 15px; @@ -1293,10 +1336,7 @@ display: flex; flex-direction: column; justify-content: space-between; - margin-right: 10px; - &:last-child { - margin: 0 !important; - } + margin-bottom: 10px; .ft { display: flex; align-items: center; @@ -1339,6 +1379,7 @@ .xm_house_tips { display: flex; align-items: center; + margin-bottom: 10px; .xm_house_tips_row { display: flex; align-items: center; -- Gitblit v1.9.3