@ebiz/designer-components 0.1.124 → 0.1.126

package/src/components/EbizDormDashboard.vue

@@ -1,314 +1,314 @@
-<template>
-  <div class="ebiz-dorm-dashboard">
-    <div class="dashboard-header">
-    <t-radio-group v-model="innerArea" variant="default-filled" @change="onAreaChange">
-        <t-radio-button v-for="ele in areaList" :key="ele.value" :value="ele.value">{{ ele.label }}</t-radio-button>
-      </t-radio-group>
-      <!-- <t-tabs v-model="innerArea" :list="areaList" @change="onAreaChange" theme="card" /> -->
-      <t-select v-model="innerBuilding" :options="buildingOptions" @change="onBuildingChange" class="building-select" />
-    </div>
-    <div class="dashboard-grid">
-      <div v-for="floor in currentFloors" :key="floorKey(floor)" class="floor-block">
-        <div class="floor-title">{{ floorLabel(floor) }}</div>
-        <div class="rooms-grid">
-          <t-tooltip v-for="room in floor.rooms" :key="roomKey(room)" :content="roomTooltip(room)" placement="top">
-            <div class="room-item" @click="emitRoomClick(room, floor)">
-              <div class="room-card">
-                <div class="room-card-fill" :style="roomFillStyle(room)"></div>
-                <div class="room-percent">{{ roomPercent(room) }}%</div>
-              </div>
-              <div class="room-no">{{ room.roomNo }}</div>
-              <div class="room-type">{{ room.roomType }}{{ room.roomDormType ? `(${room.roomDormType})` : ''}}</div>
-            </div>
-          </t-tooltip>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EbizDormDashboard'
-}
-</script>
-
-<script setup>
-import { computed, ref, watch, onMounted } from 'vue'
-import dataService from '../apiService/simpleDataService'
-import { Tabs as TTabs, Select as TSelect, Tooltip as TTooltip, RadioGroup as TRadioGroup, RadioButton as TRadioButton } from 'tdesign-vue-next'
-
-// 外部可双向绑定的当前区域值
-const props = defineProps({
-  areaValue: {
-    type: [String, Number],
-    default: undefined
-  },
-  buildingValue: {
-    type: [String, Number],
-    default: undefined
-  }
-})
-
-const emit = defineEmits(['update:areaValue', 'update:buildingValue', 'roomClick'])
-
-// 内部当前区域与楼栋（受控于 v-model）
-const innerArea = ref(props.areaValue)
-const innerBuilding = ref(props.buildingValue)
-const regionList = ref([])
-const buildingList = ref([])
-
-watch(
-  () => props.areaValue,
-  (v) => {
-    innerArea.value = v
-  }
-)
-watch(
-  () => props.buildingValue,
-  (v) => {
-    innerBuilding.value = v
-  }
-)
-
-// 区域列表：直接使用接口返回的数据
-const areaList = computed(() => regionList.value)
-
-// 楼栋列表：直接使用接口返回的数据（已按区域过滤）
-const buildingOptions = computed(() => buildingList.value)
-
-watch(
-  buildingOptions,
-  (options) => {
-    if (!innerBuilding.value || !options.some((o) => o.value === innerBuilding.value)) {
-      if (options.length) innerBuilding.value = options[0].value
-    }
-  },
-  { immediate: true }
-)
-
-// 当前楼层与房间数据（接口返回）
-const floors = ref([])
-const currentFloors = computed(() => floors.value)
-
-const roomPercent = (room) => {
-  const total = Number(room.totalBeds || 0)
-  const occ = Number(room.occupiedBeds || 0)
-  if (!total) return 0
-  return Math.round((occ / total) * 100)
-}
-
-const roomColor = (room) => {
-  const p = roomPercent(room)
-  if (p <= 0) return '#c2c2c2'
-  if (p < 40) return '#2b71ff'
-  if (p < 80) return '#f5a623'
-  return '#ff4d4f'
-}
-
-const roomFillStyle = (room) => ({
-  height: roomPercent(room) + '%',
-  backgroundColor: roomColor(room)
-})
-
-const roomTooltip = (room) => {
-  const total = Number(room.totalBeds || 0)
-  const occ = Number(room.occupiedBeds || 0)
-  return `房间: ${room.roomNo} | 床位: ${total} | 已入住: ${occ}`
-}
-
-const floorKey = (floor) => String(floor.name ?? floor.floor ?? '')
-const floorLabel = (floor) => String(floor.name ?? floor.floor ?? '') + ' 楼'
-const roomKey = (room) => String(room.roomNo)
-
-const emitRoomClick = (room, floor) => {
-  emit('roomClick', {
-    area: innerArea.value,
-    building: innerBuilding.value,
-    floor: floor.name ?? floor.floor,
-    roomNo: room.roomNo,
-    roomType: room.roomType,
-    roomDormType: room.roomDormType,
-    totalBeds: Number(room.totalBeds || 0),
-    occupiedBeds: Number(room.occupiedBeds || 0),
-    percent: roomPercent(room)
-  })
-}
-
-// 获取楼层与房间列表（按楼栋）
-const getFloors = () => {
-  if (!innerBuilding.value) {
-    floors.value = []
-    return
-  }
-  dataService
-    .fetch(
-      {
-        queryParams: { buildings: innerBuilding.value }
-      },
-      { key: 'dormitory_list_remote', apiId: 2655, apiType: 0 }
-    )
-    .then((res) => {
-      const data = res.data || []
-      const dataGroup = {}
-      data.forEach((f) => {
-        const floor = f.floor ?? ''
-        if (!dataGroup[floor]) dataGroup[floor] = []
-        dataGroup[floor].push(f)
-      })
-      floors.value = Object.entries(dataGroup).map(([name, rooms]) => ({
-        name,
-        rooms: rooms.map((r) => ({
-          roomNo: String(r.room_no ?? r.name ?? ''),
-          roomType: r.type_desc ?? '',
-          roomDormType: r.dorm_type_desc ?? '',
-          totalBeds: Number(r.occupant_max_num ?? r.bed_num ?? 0),
-          occupiedBeds: Number(r.occupant_num ?? 0)
-        }))
-      }))
-    })
-}
-
-// 获取楼栋列表（按区域）
-const getBuildings = () => {
-  if (!innerArea.value) {
-    buildingList.value = []
-    return
-  }
-  dataService
-    .fetch(
-      {
-        queryParams: { region_id: innerArea.value }
-      },
-      { key: 'dormitory_remote_buildings', apiId: 2617, apiType: 0 }
-    )
-    .then((res) => {
-      buildingList.value = (res.data || [])
-        .sort((a, b) => a.id - b.id)
-        .map((item) => ({ label: item.name, value: item.id }))
-      if (!innerBuilding.value || !buildingList.value.some((b) => b.value === innerBuilding.value)) {
-        innerBuilding.value = buildingList.value[0]?.value
-      }
-      getFloors()
-    })
-}
-
-// 获取区域列表
-const getRegion = () => {
-  dataService.fetch({}, { key: 'dormitory_buildings_remote_region', apiId: 2596, apiType: 0 }).then((res) => {
-    regionList.value = (res.data || [])
-      .sort((a, b) => a.id - b.id)
-      .map((item) => ({ label: item.name, value: item.id }))
-    if (!innerArea.value && regionList.value.length) innerArea.value = regionList.value[0].value
-    getBuildings()
-  })
-}
-
-const onAreaChange = (v) => {
-    console.log('onAreaChange', v)
-  innerArea.value = v
-  emit('update:areaValue', v)
-  getBuildings()
-}
-
-const onBuildingChange = (v) => {
-  innerBuilding.value = v
-  emit('update:buildingValue', v)
-  getFloors()
-}
-
-// 初始化：拉取区域 → 楼栋 → 楼层
-onMounted(() => {
-  getRegion()
-})
-</script>
-
-<style lang="less" scoped>
-.ebiz-dorm-dashboard {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.dashboard-header {
-  display: flex;
-  align-items: flex-end;
-  gap: 20px;
-}
-.building-select {
-  width: 150px;
-}
-.dashboard-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-.floor-block {
-  display: flex;
-  gap: 8px;
-  border: 1px solid #eee;
-  border-radius: 12px;
-  background: #fff;
-  padding: 12px;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-.floor-block:hover {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-}
-.floor-title {
-  font-weight: 500;
-      white-space: nowrap;
-    margin-top: 10px;
-}
-.rooms-grid {
-  width: calc(100% - 30px);
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50px);
-  gap: 28px;
-}
-.room-item {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-}
-.room-card {
-  position: relative;
-  height: 80px;
-  border-radius: 8px;
-  background: #f0f0f0;
-  overflow: hidden;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-}
-.room-card-fill {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.room-percent {
-  position: relative;
-  bottom: 8px;
-  z-index: 1;
-  color: #fff;
-  font-weight: 600;
-  display: none;
-}
-.room-no {
-  margin-top: 4px;
-  font-size: 13px;
-  line-height: 1;
-  font-weight: 600;
-  color: #333;
-  text-align: center;
-}
-.room-type {
-  margin-top: 2px;
-  font-size: 10px;
-  line-height: 1;
-  color: #666;
-  text-align: center;
-  white-space: nowrap;
-}
-</style>
+<template>
+  <div class="ebiz-dorm-dashboard">
+    <div class="dashboard-header">
+    <t-radio-group v-model="innerArea" variant="default-filled" @change="onAreaChange">
+        <t-radio-button v-for="ele in areaList" :key="ele.value" :value="ele.value">{{ ele.label }}</t-radio-button>
+      </t-radio-group>
+      <!-- <t-tabs v-model="innerArea" :list="areaList" @change="onAreaChange" theme="card" /> -->
+      <t-select v-model="innerBuilding" :options="buildingOptions" @change="onBuildingChange" class="building-select" />
+    </div>
+    <div class="dashboard-grid">
+      <div v-for="floor in currentFloors" :key="floorKey(floor)" class="floor-block">
+        <div class="floor-title">{{ floorLabel(floor) }}</div>
+        <div class="rooms-grid">
+          <t-tooltip v-for="room in floor.rooms" :key="roomKey(room)" :content="roomTooltip(room)" placement="top">
+            <div class="room-item" @click="emitRoomClick(room, floor)">
+              <div class="room-card">
+                <div class="room-card-fill" :style="roomFillStyle(room)"></div>
+                <div class="room-percent">{{ roomPercent(room) }}%</div>
+              </div>
+              <div class="room-no">{{ room.roomNo }}</div>
+              <div class="room-type">{{ room.roomType }}{{ room.roomDormType ? `(${room.roomDormType})` : ''}}</div>
+            </div>
+          </t-tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EbizDormDashboard'
+}
+</script>
+
+<script setup>
+import { computed, ref, watch, onMounted } from 'vue'
+import dataService from '../apiService/simpleDataService'
+import { Tabs as TTabs, Select as TSelect, Tooltip as TTooltip, RadioGroup as TRadioGroup, RadioButton as TRadioButton } from 'tdesign-vue-next'
+
+// 外部可双向绑定的当前区域值
+const props = defineProps({
+  areaValue: {
+    type: [String, Number],
+    default: undefined
+  },
+  buildingValue: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const emit = defineEmits(['update:areaValue', 'update:buildingValue', 'roomClick'])
+
+// 内部当前区域与楼栋（受控于 v-model）
+const innerArea = ref(props.areaValue)
+const innerBuilding = ref(props.buildingValue)
+const regionList = ref([])
+const buildingList = ref([])
+
+watch(
+  () => props.areaValue,
+  (v) => {
+    innerArea.value = v
+  }
+)
+watch(
+  () => props.buildingValue,
+  (v) => {
+    innerBuilding.value = v
+  }
+)
+
+// 区域列表：直接使用接口返回的数据
+const areaList = computed(() => regionList.value)
+
+// 楼栋列表：直接使用接口返回的数据（已按区域过滤）
+const buildingOptions = computed(() => buildingList.value)
+
+watch(
+  buildingOptions,
+  (options) => {
+    if (!innerBuilding.value || !options.some((o) => o.value === innerBuilding.value)) {
+      if (options.length) innerBuilding.value = options[0].value
+    }
+  },
+  { immediate: true }
+)
+
+// 当前楼层与房间数据（接口返回）
+const floors = ref([])
+const currentFloors = computed(() => floors.value)
+
+const roomPercent = (room) => {
+  const total = Number(room.totalBeds || 0)
+  const occ = Number(room.occupiedBeds || 0)
+  if (!total) return 0
+  return Math.round((occ / total) * 100)
+}
+
+const roomColor = (room) => {
+  const p = roomPercent(room)
+  if (p <= 0) return '#c2c2c2'
+  if (p < 40) return '#2b71ff'
+  if (p < 80) return '#f5a623'
+  return '#ff4d4f'
+}
+
+const roomFillStyle = (room) => ({
+  height: roomPercent(room) + '%',
+  backgroundColor: roomColor(room)
+})
+
+const roomTooltip = (room) => {
+  const total = Number(room.totalBeds || 0)
+  const occ = Number(room.occupiedBeds || 0)
+  return `房间: ${room.roomNo} | 床位: ${total} | 已入住: ${occ}`
+}
+
+const floorKey = (floor) => String(floor.name ?? floor.floor ?? '')
+const floorLabel = (floor) => String(floor.name ?? floor.floor ?? '') + ' 楼'
+const roomKey = (room) => String(room.roomNo)
+
+const emitRoomClick = (room, floor) => {
+  emit('roomClick', {
+    area: innerArea.value,
+    building: innerBuilding.value,
+    floor: floor.name ?? floor.floor,
+    roomNo: room.roomNo,
+    roomType: room.roomType,
+    roomDormType: room.roomDormType,
+    totalBeds: Number(room.totalBeds || 0),
+    occupiedBeds: Number(room.occupiedBeds || 0),
+    percent: roomPercent(room)
+  })
+}
+
+// 获取楼层与房间列表（按楼栋）
+const getFloors = () => {
+  if (!innerBuilding.value) {
+    floors.value = []
+    return
+  }
+  dataService
+    .fetch(
+      {
+        queryParams: { buildings: innerBuilding.value }
+      },
+      { key: 'dormitory_list_remote', apiId: 2655, apiType: 0 }
+    )
+    .then((res) => {
+      const data = res.data || []
+      const dataGroup = {}
+      data.forEach((f) => {
+        const floor = f.floor ?? ''
+        if (!dataGroup[floor]) dataGroup[floor] = []
+        dataGroup[floor].push(f)
+      })
+      floors.value = Object.entries(dataGroup).map(([name, rooms]) => ({
+        name,
+        rooms: rooms.map((r) => ({
+          roomNo: String(r.room_no ?? r.name ?? ''),
+          roomType: r.type_desc ?? '',
+          roomDormType: r.dorm_type_desc ?? '',
+          totalBeds: Number(r.occupant_max_num ?? r.bed_num ?? 0),
+          occupiedBeds: Number(r.occupant_num ?? 0)
+        }))
+      }))
+    })
+}
+
+// 获取楼栋列表（按区域）
+const getBuildings = () => {
+  if (!innerArea.value) {
+    buildingList.value = []
+    return
+  }
+  dataService
+    .fetch(
+      {
+        queryParams: { region_id: innerArea.value }
+      },
+      { key: 'dormitory_remote_buildings', apiId: 2617, apiType: 0 }
+    )
+    .then((res) => {
+      buildingList.value = (res.data || [])
+        .sort((a, b) => a.id - b.id)
+        .map((item) => ({ label: item.name, value: item.id }))
+      if (!innerBuilding.value || !buildingList.value.some((b) => b.value === innerBuilding.value)) {
+        innerBuilding.value = buildingList.value[0]?.value
+      }
+      getFloors()
+    })
+}
+
+// 获取区域列表
+const getRegion = () => {
+  dataService.fetch({}, { key: 'dormitory_buildings_remote_region', apiId: 2596, apiType: 0 }).then((res) => {
+    regionList.value = (res.data || [])
+      .sort((a, b) => a.id - b.id)
+      .map((item) => ({ label: item.name, value: item.id }))
+    if (!innerArea.value && regionList.value.length) innerArea.value = regionList.value[0].value
+    getBuildings()
+  })
+}
+
+const onAreaChange = (v) => {
+    console.log('onAreaChange', v)
+  innerArea.value = v
+  emit('update:areaValue', v)
+  getBuildings()
+}
+
+const onBuildingChange = (v) => {
+  innerBuilding.value = v
+  emit('update:buildingValue', v)
+  getFloors()
+}
+
+// 初始化：拉取区域 → 楼栋 → 楼层
+onMounted(() => {
+  getRegion()
+})
+</script>
+
+<style lang="less" scoped>
+.ebiz-dorm-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dashboard-header {
+  display: flex;
+  align-items: flex-end;
+  gap: 20px;
+}
+.building-select {
+  width: 150px;
+}
+.dashboard-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.floor-block {
+  display: flex;
+  gap: 8px;
+  border: 1px solid #eee;
+  border-radius: 12px;
+  background: #fff;
+  padding: 12px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.floor-block:hover {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+.floor-title {
+  font-weight: 500;
+      white-space: nowrap;
+    margin-top: 10px;
+}
+.rooms-grid {
+  width: calc(100% - 30px);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+  gap: 28px;
+}
+.room-item {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+.room-card {
+  position: relative;
+  height: 80px;
+  border-radius: 8px;
+  background: #f0f0f0;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.room-card-fill {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.room-percent {
+  position: relative;
+  bottom: 8px;
+  z-index: 1;
+  color: #fff;
+  font-weight: 600;
+  display: none;
+}
+.room-no {
+  margin-top: 4px;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+.room-type {
+  margin-top: 2px;
+  font-size: 10px;
+  line-height: 1;
+  color: #666;
+  text-align: center;
+  white-space: nowrap;
+}
+</style>