Web_BLS_Vue_Prod/src/pages/powerlog/index.vue

<template>
  <el-select v-model="roomHotelCode"
             value-key="code"
             filterable
             clearable
             remote
             style="width: 150px; margin-right:7px"
             size="small"
             @focus="hotelChange"
             @change="handleHotelForRooms"
             :remote-method="remoteHotel"
             placeholder="选择酒店">
    <template #prefix>
      <el-text size="small">{{ selectedHotelDisplay }}</el-text>
    </template>
    <el-option v-for="hotel in hotels"
               :key="hotel.code"
               :label="hotel.name"
               :value="hotel.code">
      <span style="float: left">{{ hotel.name }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;Code:{{ hotel.code }}</span>
    </el-option>
  </el-select>


</template>

<script setup>
  import { ref, inject, computed, watch, onMounted, onUnmounted, nextTick, shallowRef } from 'vue';
  import { ElMessage, ElButton, ElTag, ElCheckbox, ElMessageBox, ElLoading } from 'element-plus'
  import { Setting, Refresh, ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import config from '../../../public/config.js'
  import { useRouter, useRoute } from 'vue-router'
  import $ from 'jquery'
  import qs from 'qs'
  import { createAxiosInstance } from '../../axios.js'

  const $http = inject('$http')
  // 注入方法
  const checkLoginStatus = inject('checkLoginStatus');
  const isMobile = inject('isMobile');
  const fullScreen = inject('fullScreen');
  const customHttp = createAxiosInstance(1);
  const rcuHttp = createAxiosInstance(2);
  
  const roomHotelCode = ref(null);
  const currentRoomHotelCode = ref(''); 
  const allHotels = ref([]); // 所有酒店信息
  const allRooms = ref([]); // 当前房间信息
  const hotels = ref([]); // 所有酒店信息
  const hotelRoomCounts = ref({});






  const getPowerLog = async () => {
    const QueryDate = {
      HotelCode: '1003',
      HostNumber: '',
      Mac: '',
      Start_Time: pickerDate.value[0],
      End_Time: pickerDate.value[1],
      PageSize: 1,
      PageIndex: 100000,
    };
    //console.log(QueryDate);
    const rs = await $http.post('Power/GetPowerAnalysis', JSON.stringify(QueryDate));
    console.log(rs.data);
  }

  const getAllHotels = async () => {
    try {
      const rs = await customHttp.post('LowerMachineLog/GetHotelList');
      if (rs.data.isok) {
        allHotels.value = rs.data.response;
        hotels.value = rs.data.response;

        // 新增：获取所有酒店的房间数
        try {
          const roomCountRes = await customHttp.get('BlockIP/GetRoomCount');
          roomCountRes.data.response.forEach(item => {
            // 将房间数存储在hotelRoomCounts中，key为酒店code
            hotelRoomCounts.value[item.hotelID] = item.totalCount;
          });
        } catch (roomError) {
          console.error('获取酒店房间数失败:', roomError);
        }

        // 设置酒店的默认房间数为"-1"（表示未知）
        allHotels.value.forEach(hotel => {
          hotel.count = hotelRoomCounts.value[hotel.id] || "-1";
        });
      }
    } catch (error) {
      // ...错误处理
    }
  };

  // 搜索hotel
  const remoteHotel = (query) => {
    if (query != "" && (hotelCurrent.value == null || hotelCurrent.value == "")) {
      hotels.value = [];
      const nc = allHotels.value.filter(item => item.code.includes(query) || item.name.includes(query));
      if (nc.length > 0) {
        hotels.value = nc;
      } else {
        hotels.value = JSON.parse(JSON.stringify(allHotels.value));
      }
    } else {
      hotels.value = JSON.parse(JSON.stringify(allHotels.value));
    }
  }
  onMounted(() => {
    localStorage.setItem('url', '/home')
    checkLoginStatus()
    // 同时获取所有房间和监控列表
    getAllHotels();
  })
</script>

<style scoped>
  .container {
    padding: 5px;
  }

</style>