MrShi
2025-02-12 3e4625e7951cb6dcfab077e535782eee7b0b70fb
admin/src/views/roomStatus/index.vue
@@ -194,10 +194,6 @@
                        </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>
                                    <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>
@@ -216,8 +212,13 @@
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="renterName"
                                                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="租赁单价">
@@ -260,7 +261,6 @@
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </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">
                                            <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>{{child.roomCode}}</span>
                                                    <span>({{child.roomRentArea}}㎡)</span>
                                                        <span>{{childThree.roomCode}}</span>
                                                        <span>({{childThree.roomRentArea}}㎡)</span>
                                                </div>
                                                <div class="xm_house_list_right_row_info" v-if="child.roomStatus !== 0">
                                                    <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;">{{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" />
                                                            <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(child.overData.substring(0, 10)) ? 'red' : '' }">{{child.overData.substring(0, 10)}}{{returnColor(child.overData.substring(0, 10)) ? '已' : ''}}到期</span>
                                                        <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="child.roomStatus === 0">未出租|空置{{child.freeDayAmount}}天</div>
                                                    <div class="xm_house_list_right_row_day" v-if="childThree.roomStatus === 0">未出租|空置{{childThree.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)
            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)
            item.ywRoomStatusDataVOList.forEach(child => {
              // let percentage = (child.roomRentArea / total) * 100; // 计算每个值的占比
              child.width = (child.roomRentArea / total) * 854
              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: '正常' },
                { 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;