kyj-yanglao-web-new/src/views/system/bedManage/bedSetting/index.vue

<template>
  <div class="column">
    <div class="row" style="justify-content: center">
      <div class="content-left">
        <div class="left0">
          <div class="left">
            <div class="scroll-left">
              <el-scrollbar
                v-loading="loading"
              >
              <div
                style="cursor: pointer"
                @click="clickBuildItem(item)"
                v-for="(item, index) in buildingList"
                :key="index"
                :style="{
                  backgroundColor: item.select ? systemTheme : '#e9f1f6',
                  width: item.select ? '140px' : '140px'
                }"
                :class="{ 'building-item-s': item.select, 'building-item': !item.select }"
              >
                <img v-if="item.select" src="@/assets/imgs/bed1.png" style="width: 16px; height: 16px" alt=""/>
                <img v-if="!item.select" src="@/assets/imgs/bed2.png" style="width: 16px; height: 16px" alt=""/>
                <el-text style="font-size: 15px;margin-left: 4px;width: 80px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                  :style="{ color: item.select ? '#ffffff' : '#2A2F42' }">{{ item.buildName }}</el-text>
                <img @click.stop="addBuilding(item.id || 0, true)" src="@/assets/imgs/bad5.png"
                      v-if="item.select" style="width: 20px; height: 20px" class="ml-5px" alt=""/>
              </div>
              </el-scrollbar>
            </div>
            <div
              v-hasPermi="['bedSetting:addBuild']"
              @click="addBuilding(undefined)"
              class="row buttonL mt-4px"
            >
              <img src="@/assets/imgs/bed3.png" style="width: 18px; height: 18px" alt="" />
              <span>添加楼栋</span>
            </div>

            <div @click="importBed" v-hasPermi="['bedSetting:importBuild']" class="row buttonL mt-12px">
              <img src="@/assets/imgs/bed4.png" style="width: 18px; height: 18px" alt="" />
              <span>导入床位</span>
            </div>
          </div>
            <div>
          </div>
          <div class="right">
            <el-scrollbar
                v-loading="loadingF"
                height="72vh"
                wrap-style="padding-left:20px;margin-right: 20px;"
              >
                <div style="padding-top: 12px">
                  <div
                    @click="clickFloorItem(item)"
                    v-for="(item, index) in buildListTemp.floorList"
                    :key="index"
                    :class="{ 'floor-item-s': item.select, 'floor-item': !item.select }"
                    :style="{ backgroundColor: item.select ? systemTheme : '#ffffff' }"
                  >
                    <el-text
                      style="
                        font-size: 15px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 86px;
                        text-align: center;
                      "
                      :style="{ color: item.select ? '#fff' : '#2A2F42' }"
                      >{{ item.floorName }}</el-text
                    >
                  </div>
                </div>
              </el-scrollbar>
          </div>
        </div>
        <div class="bar">
          <TenantSelect v-model="queryParams.tenantIds" single @change="handleChange"/>
        </div>
      </div>




      <div v-show="!isFullscreen" class="rightCard" style="width: 100%">
        <el-row style="margin-bottom: 6px;width: 100%">
          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
            <div style=" display: flex;align-items: center;flex-direction: row;height: 52px;margin-left: 0.4vw;">
              <div
                class="row"
                :style="{ backgroundColor: systemTheme }"
                style="border-radius: 14px 6px 14px 6px;padding: 0 16px;height: 36px;align-items: center; justify-content: center;"
              >
                <span style="font-size: 16px" :style="{ color: '#ffffff' }">{{buildListTemp.floorCount }}</span>
                <span style="color: #fff; font-size: 16px">层</span>
              </div>
              <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">总房间数:</el-text>
              <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.totalRoomCount}}</el-text>
              <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">托养用房数:</el-text>
              <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.daycareRoomCount}}</el-text>
              <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">床位数:</el-text>
              <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.totalBedCount}}</el-text>
              <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">活动室数:</el-text>
              <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.activityRoomCount}}</el-text>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="width: 100%">
            <div style="display: flex;align-items: center;flex-direction: row;justify-content: end;width: 100%;padding-right: 1vw">
              <el-button
                v-hasPermi="['bed-setting:add-room']"
                @click="addRoom"
                class="addButton"
              >
                <template #default>
                  <el-icon :color="systemTheme"><Briefcase /></el-icon>
                  <span style="font-size: 15px; margin-left: 4px; color: #605be2" :style="{ color: systemTheme }">添加</span>
                </template>
              </el-button>

              <el-dropdown>
                <el-button
                  type="primary"
                  v-hasPermi="['bed-setting:export-room']"
                  @click="exportRoom"
                  class="addButton2"
                  style="margin-left: 20px"
                >
                  <template #default>
                    <img src="@/assets/imgs/bed6.png" style="width: 18px; height: 18px" alt="" />
                    <span style="font-size: 15px; margin-left: 4px; color: #ffffff">导出</span>
                  </template>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="exportExp(1)">导出门口屏</el-dropdown-item>
                    <el-dropdown-item @click="exportExp(2)">导出二维码</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>


            </div>
          </el-col>
        </el-row>

        <el-scrollbar v-if="roomList.length > 0" height="78vh" style="margin-left: 0.4vw">
          <Flex wrap="wrap" :gap="16" style="padding-bottom: 36px">
            <div style="position: relative" v-for="(item, index) in roomList" :key="index">
              <!--                       @mouseover="item.showOverlay=true" @mouseleave="item.showOverlay=false">-->
              <div style="position: relative" class="roomBoxItem">
                <div class="roomBoxItem" style="position: absolute">
                  <div style="display: flex;align-items: center;flex-direction: row;padding-right: 10px;">
                    <div class="floor-text-left" :style="{ backgroundColor: systemTheme }">{{item.roomName}}</div>
                    <div style="flex-grow: 1"></div>
                    <img v-show="isShowIcon(item, '女')" src="@/assets/imgs/bed10.png" style="width: 20px; height: 20px; margin-left: 4px"/>
                    <img v-show="isShowIcon(item, '男')" src="@/assets/imgs/bed9.png" style="width: 20px; height: 20px"/>
                    <img v-show="isShowIcon(item, '卫生间')" src="@/assets/imgs/bed8.png" style="width: 20px; height: 20px; margin-left: 3px"/>
                  </div>

                  <div v-if="item.roomUsage === '1'" style="margin-top: 10px; overflow: hidden">
                    <Flex wrap="wrap" :gap="8" style="margin-left: 10px">
                      <div class="roomBoxItemSon" v-for="(itemB, indexB) in item.bedList" :key="indexB">
                        <img src="@/assets/imgs/chuangwei.png" />
                        <span :style="{ color: systemTheme }">{{ itemB.bedName }}</span>
                      </div>
                    </Flex>
                  </div>
                  <div v-else style="width: 278px; height: 234px; justify-content: center" class="row">
                    <img v-show="item.coverImage === 'bed12.png'" src="@/assets/imgs/bed12.png" style="width: 250px; height: 170px; margin-top: 6px"/>
                    <img v-show="item.coverImage === 'bed11.png'" src="@/assets/imgs/bed11.png" style="width: 250px; height: 170px; margin-top: 6px"/>
                  </div>
                  <div style="height: 10px"></div>
                </div>
                <div :style="{ backgroundColor: systemTheme }" style="width: 2px;border-radius: 2px;height: 200px;position: absolute;margin-top: 22px;"></div>
              </div>

              <div class="overlay">
                <div
                  @click="deleteCK(item)"
                  style="padding: 10px;background-color: white;border-radius: 10px;cursor: pointer;">
                  <img src="@/assets/imgs/shanchu.png" style="width: 22px; height: 22px" alt="" />
                </div>
                <div
                  @click="editCK(item)"
                  style="padding: 10px;background-color: white;border-radius: 10px;margin-left: 16px;cursor: pointer;">
                  <img src="@/assets/imgs/bianji.png" style="width: 22px; height: 22px" alt="" />
                </div>
              </div>
            </div>
          </Flex>
          <div style="height: 12px"></div>
        </el-scrollbar>
        <el-empty v-else style="height: 58vh" :image-size="80" description="暂无数据" />
        <div style="height: 10px"></div>
      </div>
    </div>

    <div v-show="isFullscreen" class="rightCard" style="width: 92%; margin-top: 2vh">
      <el-row style="margin-bottom: 6px">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div style=" display: flex;align-items: center;flex-direction: row;height: 52px;margin-left: 0.4vw;">
            <div class="row" :style="{ backgroundColor: systemTheme }" style="border-radius: 14px 6px 14px 6px;padding: 0 16px;height: 36px;align-items: center;justify-content: center;">
              <span style="font-size: 16px" :style="{ color: '#ffffff' }">{{buildListTemp.floorCount}}</span>
              <span style="color: #fff; font-size: 16px">层</span>
            </div>
            <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">总房间数:</el-text>
            <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.totalRoomCount}}</el-text>
            <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">托养用房数:</el-text>
            <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.daycareRoomCount }}</el-text>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div style="display: flex;align-items: center;flex-direction: row;height: 52px;margin-left: 0.4vw;">
            <div class="row" style="border-radius: 14px 6px 14px 6px;padding: 0 16px;height: 36px;align-items: center;justify-content: center;">
              <span style="font-size: 16px" :style="{ color: '#ffffff00' }">2</span>
              <span style="color: #ffff0000; font-size: 16px">层</span>
            </div>
            <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">床位数:</el-text>
            <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.totalBedCount }}</el-text>
            <el-text style="color: #2a2f42; font-size: 16px; margin-left: 20px">活动室数:</el-text>
            <el-text style="font-size: 16px; margin-left: 5px" :style="{ color: systemTheme }">{{resultRoom.activityRoomCount}}</el-text>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div style="display: flex;align-items: center;flex-direction: row;justify-content: start;width: 90%;">
            <el-button
              v-hasPermi="['bed-setting:add-room']"
              @click="addRoom"
              class="addButton"
            >
              <template #default>
                <el-icon :color="systemTheme"><Briefcase /></el-icon>
                <span style="font-size: 15px; margin-left: 4px; color: #605be2" :style="{ color: systemTheme }">添加</span>
              </template>
            </el-button>

            <el-dropdown>
              <el-button
                type="primary"
                v-hasPermi="['bed-setting:export-room']"
                @click="exportRoom"
                class="addButton2"
                style="margin-left: 20px"
              >
                <template #default>
                  <img src="@/assets/imgs/bed6.png" style="width: 18px; height: 18px" alt="" />
                  <span style="font-size: 15px; margin-left: 4px; color: #ffffff">导出</span>
                </template>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="exportExp(1)">导出门口屏</el-dropdown-item>
                  <el-dropdown-item @click="exportExp(2)">导出二维码</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </el-col>
      </el-row>

      <el-scrollbar
        v-if="roomList.length > 0"
        height="78vh"
        style="margin-left: 0.4vw; margin-top: 10px"
      >
        <Flex wrap="wrap" :gap="16" style="padding-bottom: 36px">
          <div style="position: relative" v-for="(item, index) in roomList" :key="index">
            <!--      @mouseover="item.showOverlay=true" @mouseleave="item.showOverlay=false">-->
            <div style="position: relative" class="roomBoxItem">
              <div class="roomBoxItem" style="position: absolute">
                <div style="display: flex;align-items: center;flex-direction: row;padding-right: 10px;">
                  <div class="floor-text-left" :style="{ backgroundColor: systemTheme }">{{item.roomName}}</div>
                  <div style="flex-grow: 1"></div>
                  <img v-show="isShowIcon(item, '女')" src="@/assets/imgs/bed10.png" style="width: 20px; height: 20px; margin-left: 4px" alt=""/>
                  <img v-show="isShowIcon(item, '男')" src="@/assets/imgs/bed9.png" style="width: 20px; height: 20px" alt=""/>
                  <img v-show="isShowIcon(item, '卫生间')" src="@/assets/imgs/bed8.png" style="width: 20px; height: 20px; margin-left: 3px" alt=""/>
                </div>

                <div v-if="item.roomUsage === '1'" style="margin-top: 10px; overflow: hidden">
                  <Flex wrap="wrap" :gap="8" style="margin-left: 10px">
                    <div class="roomBoxItemSon" v-for="(itemB, indexB) in item.bedList" :key="indexB">
                      <img src="@/assets/imgs/chuangwei.png"  alt=""/>
                      <span :style="{ color: systemTheme }">
                        {{ itemB.bedName }}
                      </span>
                    </div>
                  </Flex>
                </div>
                <div v-else style="width: 278px; height: 234px; justify-content: center" class="row">
                  <img v-show="item.coverImage === 'bed12.png'" src="@/assets/imgs/bed12.png" style="width: 250px; height: 170px; margin-top: 6px" alt=""/>
                  <img v-show="item.coverImage === 'bed11.png'" src="@/assets/imgs/bed11.png" style="width: 250px; height: 170px; margin-top: 6px" alt=""/>
                </div>
                <div style="height: 10px"></div>
              </div>
              <div :style="{ backgroundColor: systemTheme }" style="width: 2px;border-radius: 2px;height: 200px;position: absolute;margin-top: 22px;"></div>
            </div>

            <div class="overlay">
              <div @click="deleteCK(item)" style="padding: 10px; background-color: white; border-radius: 10px; cursor: pointer">
                <img src="@/assets/imgs/shanchu.png" style="width: 22px; height: 22px" alt="" />
              </div>
              <div @click="editCK(item)" style="padding: 10px;background-color: white;border-radius: 10px;margin-left: 16px;cursor: pointer;">
                <img src="@/assets/imgs/bianji.png" style="width: 22px; height: 22px" alt="" />
              </div>
            </div>
          </div>
        </Flex>
        <div style="height: 12px"></div>
      </el-scrollbar>
      <el-empty v-else style="height: 58vh" :image-size="80" description="暂无数据" />
      <div style="height: 10px"></div>
    </div>
    <Form ref="formRefAddBuild" @success="getList" />
    <RoomForm ref="roomFormRefAddBuild" @success="successAddBuildRoom" />

    <Import
      ref="importRef"
      @success="getList"
      :config="{
      title: '导入',
      downloadUrl: 'build/downloadExcel',
      excelTempName: '房源配置-[导入床位]模板',
      importUrl: '/build/importBuildExcel',
      failExportUrl: ''
    }"
    />


  </div>
</template>

<script setup lang="ts">
import { Flex } from 'ant-design-vue'
import { UploadFilled, CirclePlus, OfficeBuilding, Edit, Briefcase } from '@element-plus/icons-vue'
import Form from '@/views/system/bedManage/bedSetting/Form.vue'
import RoomForm from '@/views/system/bedManage/bedSetting/RoomForm.vue'
import {
  deleteRoom,
  getBuildList,
  getRoom,
  buildStatistic,
  exportScreenExcel
} from '@/api/system/badManage'
const message = useMessage() // 消息弹窗
import { useAppStore } from '@/store/modules/app'
import { propTypes } from '@/utils/propTypes'
import { watchArray } from '@vueuse/core'
import { onMounted } from 'vue'
import download from "@/utils/download";
import Import from "@/components/ImportFile/index.vue";
import { useUserStore } from '@/store/modules/user'
const appStore = useAppStore()
const userStore = useUserStore()
const systemTheme = ref(appStore.getTheme.elColorPrimary)
let buildListTemp = ref({}) //当前选中楼栋
let floorListTemp = ref({}) //当前选中楼层
const widthScreen = ref(0)
const heightScreen = ref(0)
const loading = ref(false)
const loadingF = ref(false)
const buildingList = ref([])
const resultRoom = ref({})
const importRef = ref()
const showBottom = ref(false)
const isFullscreen = ref(false)
const queryParams = reactive({
  tenantIds: userStore.orgTenantId && userStore.orgTenantId.length ? [userStore.orgTenantId[0]] : []
})

const importBed = () => {
  importRef.value.open()
}

//房间
const roomList = ref([])

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const formRefAddBuild = ref()
const roomFormRefAddBuild = ref()

const addRoom = () => {
  roomFormRefAddBuild.value.open(queryParams.tenantIds[0], floorListTemp.value.id, undefined, false)
}

const exportRoom = () => {}

watch(
  () => appStore.getTheme.elColorPrimary,
  (n, e) => {
    console.log('颜色改变:', e, n)
    systemTheme.value = n
  }
)

const addBuilding = (id?: number, isDetail: boolean = false) => {
  formRefAddBuild.value.open(queryParams.tenantIds[0], id, isDetail)
}
const successAddBuild = () => {}
const successAddBuildRoom = () => {
  getRoomList(floorListTemp.value.id)
}

function clickBuildIcon(item) {
  console.log(item)
}

const isShowIcon = (item, type) => {
  if (item === undefined) {
    return false
  } else
    return (
      item.roomSettings !== undefined &&
      item.roomSettings !== null &&
      item.roomSettings.indexOf(type) !== -1
    )
}

//删除房间
const deleteCK = async (item) => {
  console.log('删除', item)
  try {
    // 二次确认
    await message.delConfirm()
    const res = await deleteRoom(item.id)
    console.log('ssss', res)
    if (res) {
      message.success('删除成功')
      await getRoomList(floorListTemp.value.id)
    }
  } catch (e) {
    //message.error(e)
    console.log('取消', item)
  }
}

//导出
const exportExp =  (item) => {
    console.log(item,buildListTemp.value)
    if(item===1){
      //download.excel()
      exportScreenExcel(buildListTemp.value.id).then((res)=>{
        download.excel(res, '门口屏.xls')

      }).catch((err)=>{})
    }


}

function handleResize() {
  // 获取当前窗口的宽度
  const windowWidth = window.innerWidth
  // 在控制台输出窗口宽度
  //console.log('新的窗口宽度为2：', windowWidth);
  if (windowWidth < widthScreen.value / 2.0) {
    isFullscreen.value = true
    console.log('新的')
  } else {
    isFullscreen.value = false
  }
  // 这里可以添加更多基于窗口宽度的逻辑
}


//编辑房间
const editCK = (item) => {
  console.log('编辑', item,floorListTemp.value.id)
  roomFormRefAddBuild.value.open(queryParams.tenantIds[0],floorListTemp.value.id, item, true)
}


function clickAllIcon() {
  console.log('点击icon')
}

function clickBuildItem(item) {
  console.log(item)
  floorListTemp.value = {}
  roomList.value = []
  buildListTemp.value = item
  buildListTemp.value.floorList.reverse()
  try {
    for (const itemElement of item.floorList) {
      itemElement.select = false
    }
    item.floorList[item.floorList.length - 1].select = true
    floorListTemp.value = item.floorList[item.floorList.length - 1]
  } catch (e) {}

  for (let buildingListKey of buildingList.value) {
    buildingListKey.select = false
  }
  item.select = true
  if (floorListTemp.value.id != undefined) {
    getRoomList(floorListTemp.value.id)
  }
  buildStatisticFun(item.id)
}
function clickFloorItem(item) {
  console.log(item.id)
  floorListTemp.value = item
  for (let buildingListKey of buildListTemp.value.floorList) {
    buildingListKey.select = false
  }
  item.select = true
  getRoomList(item.id)
}

/** 查询列表 */
const getList = async () => {
  buildingList.value = []
  loading.value = true
  try {
    const params = {...queryParams}
    params.tenantIds = queryParams.tenantIds[0]
    const data = await getBuildList(params)
    for (const datum of data) {
      datum.select = false
      buildingList.value.push(datum)
    }
    if(buildingList.value.length){
      buildingList.value[0].select = true

      try {
        buildListTemp.value = buildingList.value[0]

        buildListTemp.value.floorList = buildListTemp.value.floorList.reverse()
        for (const itemElement of buildListTemp.value.floorList) {
          itemElement.select = false
        }
        buildListTemp.value.floorList[buildListTemp.value.floorList.length - 1].select = true
        floorListTemp.value = buildListTemp.value.floorList[buildListTemp.value.floorList.length - 1]
        await getRoomList(buildListTemp.value.floorList[buildListTemp.value.floorList.length - 1].id)
        await buildStatisticFun(buildListTemp.value.id)
      } catch (e) {}
    }
  } finally {
    loading.value = false
  }
}

/** 查询房间 */
const getRoomList = async (id) => {
  loadingF.value = true
  roomList.value = []
  try {
    const data = await getRoom({floorId: id})
    console.log('查询房间', data, id)
    if (data !== undefined && data.length > 0) {
      for (const datum of data) {
        datum.showOverlay = false
        roomList.value.push(datum)
      }
    }
  } catch (e) {
  } finally {
    loadingF.value = false
  }
}

const buildStatisticFun = async (buildId) => {
  try {
    const res = await buildStatistic(buildId)
    console.log('查询统计', res)
    resultRoom.value = res
  } catch (e) {}
}

const handleChange = (val) => {
  buildListTemp.value = []
  roomList.value = []
  resultRoom.value = {}
  queryParams.tenantIds = [val]
  getList()
  // console.log("ddd", , val)
}
onMounted(() => {
  getList()
  window.addEventListener('resize', handleResize)
  widthScreen.value =
    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  heightScreen.value =
    window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  if (widthScreen.value < 860) {
    isFullscreen.value = true
  }
})
</script>
<style scoped lang="scss">
//.bgView{
//  background-image: url('../../../../assets/imgs/allbg.png');
//  background-size: 100% 100%;
//
//}


.content-left{
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f2f6fc 0%, #f2f6fc 100%);
  box-shadow:
    2px 2px 2px rgba(255, 255, 255, 0),
    -1px -1px 1px rgba(255, 255, 255, 1),
    1px -1px 1px rgba(255, 255, 255, 1),
    -2px 2px 2px rgba(255, 255, 255, 0);
  height: 81vh;

  .left0 {
    height: 75vh;
    display: flex;
    width: 290px;
    .left {
      flex: 2;
      // justify-content: center;
      // overflow: hidden;
      border-radius: 12px;
      margin-top: 15px;
      margin-left: 15px;
      .scroll-left{
        height: 62vh;
      }
  }
    .right{
      flex: 1;
    }
    //box-shadow: 2px 2px 2px rgba(255, 255, 255, 0),
    //-1px -1px 1px rgba(255, 255, 255, 0.5),
    //1px -1px 1px rgba(255, 255, 255, 0.5),
    //-2px 2px 2px rgba(255, 255, 255, 0);
    // border: 0.2px solid white;
    //border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
  }
  .bar{
    padding: 0 10px;
    .el-form-item{
      margin-bottom: 0 !important;
    }
  }
}

.row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.column {
  display: flex;
  flex-direction: column;
}

.building-item {
  align-items: center;
  width: 160px;
  display: flex;
  flex-direction: row;
  margin: 0 0 16px 0;
  padding: 0 10px;
  height: 36px;
  border-radius: 10px;
}

.building-item-s {
  align-items: center;
  display: flex;
  width: 160px;
  flex-direction: row;
  margin: 0 0 16px 0;
  padding: 0 10px;
  height: 36px;
  border-radius: 10px;
}

.building-item:hover {
  background-color: #ffffff66 !important;
}

.floor-item {
  background-color: #ffffff;
  align-items: center;
  width: 86px;
  height: 57px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin: 0 0 20px 0;
  border-radius: 8px;
}

.floor-item-s {
  background-color: #e9edfa;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 86px;
  height: 57px;
  cursor: pointer;
  margin: 0 0 20px 0;
  flex-direction: row;
  border-radius: 8px;
}

.floor-item:hover {
  background-color: #ffffffaa !important;
}

.el-button {
  margin: 10px 0 0 0;
}

.roomBoxItem {
  max-width: 15vw;
  min-width: 278px;
  height: 234px;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.roomBoxItemSon {
  width: 124px;
  height: 88px;
  background-color: #f2f6fc;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.roomBoxItemSon img {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 10px;
  margin-bottom: 10px;
}

.roomBoxItemSon span {
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 8px;
  margin-left: 8px;
}

.floor-text-left {
  padding: 0 10px;
  background-color: #768bdf;
  border-radius: 11px 8px 18px 8px;
  display: flex;
  height: 28px;
  margin-right: 4px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
  color: white;
  display: flex;
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.overlay:hover {
  opacity: 1;
}

.rightCard {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  background-color: #f2f6fc;
  border-radius: 12px;
  margin-left: 16px;
  height: 81vh;

  box-shadow:
    2px 2px 2px rgba(255, 255, 255, 0),
    -1px -1px 1px rgba(255, 255, 255, 1),
    1px -1px 1px rgba(255, 255, 255, 1),
    -2px 2px 2px rgba(255, 255, 255, 0);
}

.addButton {
  width: 86px;
  height: 38px;
  border-radius: 8px;
}

.addButton:hover {
  //transform: scale(1.01);
}

.addButton2 {
  width: 84px;
  height: 36px;
  border-radius: 8px;
}

.addButton2:hover {
  //transform: scale(1.01);
}

.buttonL {
  background-color: white;
  border: none;
  color: #333333;
  border-radius: 10px;
  width: 140px;
  height: 36px;
  justify-content: center;
  cursor: pointer;
}

.buttonL:hover {
  background-color: #ffffffaa;
}

.buttonL span {
  color: #2a2f42;
  font-size: 15px;
  margin-left: 4px;
  line-height: 20px;
}

.el-button:focus {
  outline: none !important;
  box-shadow: none !important;
}
</style>