| | |
| | | <span class="action-btn" :style="{ backgroundColor: item.leaseStatus == 2 ? '#FFB822' : item.leaseStatus == 1 ? '#66BAF8' : '#FF6B6B' }">{{ ['待出租', '已出租', '维修中'][item.leaseStatus - 1] }}</span> |
| | | </div> |
| | | </div> |
| | | <div v-for="(item, index) in realTimeRentData" :key="'duplicate-' + index" class="status-item"> |
| | | <div v-for="(item, index) in realTimeRentData" v-if="realTimeRentData.length>10" :key="'duplicate-' + index" class="status-item"> |
| | | <span class="area-name">{{ item.streetName }}</span> |
| | | <span class="area-name">{{ item.roomName }}</span> |
| | | <div class="status-actions"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getRealTimeRentData } from './service' |
| | | export default { |
| | | name: 'RightPanel', |
| | | props: { |
| | |
| | | type: Object, |
| | | default: () => { } |
| | | }, |
| | | realTimeRentData: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | data() { |
| | | return {} |
| | | return { |
| | | realTimeRentData: [] |
| | | } |
| | | }, |
| | | created() { |
| | | |
| | | getRealTimeRentData().then(res => { |
| | | this.realTimeRentData = res.data |
| | | }) |
| | | setInterval(() => { |
| | | getRealTimeRentData().then(res => { |
| | | this.realTimeRentData = res.data |
| | | }) |
| | | }, 10000) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | .right-panel-top, |
| | | .right-panel-top1 { |
| | | display: flex; |
| | | background: rgba(146, 146, 146, 0.5); |
| | | background: rgba(146, 146, 146, 0.7); |
| | | padding: 15px; |
| | | border-radius: 8px; |
| | | gap: 10px; |
| | |
| | | } |
| | | |
| | | .status-list { |
| | | background: rgba(146, 146, 146, 0.5); |
| | | background: rgba(146, 146, 146, 0.7); |
| | | border-radius: 8px; |
| | | margin-top: 10px; |
| | | padding: 15px; |
| | | max-height: 500px; |
| | | max-height: 600px; |
| | | min-height: 500px; |
| | | overflow: hidden; |
| | | flex: 1; |
| | | } |