src/views/room/roomList.vue

<template>
  <div class="room-container">
    <div class="bg-white padding-sm text-left">
      <el-button type="primary" size="small" @click="openAddRoomFloorModal">
        <i class="el-icon-plus"></i>{{ $t('roomList.addBuilding') }}
      </el-button>
      <el-button type="primary" size="small" @click="openUpdateRoomFloorModal" v-if="roomInfo.conditions.floorId">
        <i class="el-icon-edit"></i>{{ $t('roomList.editBuilding') }}
      </el-button>
      <el-button type="primary" size="small" @click="openDeleteRoomFloorModal" v-if="roomInfo.conditions.floorId">
        <i class="el-icon-close"></i>{{ $t('roomList.deleteBuilding') }}
      </el-button>
      <el-button type="primary" size="small" class="margin-left-sm" @click="openAddRoomUnitModal"
        v-if="roomInfo.conditions.floorId">
        <i class="el-icon-plus"></i>{{ $t('roomList.addUnit') }}
      </el-button>
      <el-button type="primary" size="small" class="margin-left-sm" @click="openUpdateRoomUnitModal"
        v-if="roomInfo.conditions.unitId">
        <i class="el-icon-edit"></i>{{ $t('roomList.editUnit') }}
      </el-button>
      <el-button type="primary" size="small" class="margin-left-sm" @click="openDeleteRoomUnitModal"
        v-if="roomInfo.conditions.unitId">
        <i class="el-icon-close"></i>{{ $t('roomList.deleteUnit') }}
      </el-button>
      <el-button type="primary" size="small" class="margin-left-sm" @click="openAddRoom"
        v-if="hasPrivilege('502020082453087940')">
        <i class="el-icon-plus"></i>
        <span>{{ $t('roomList.addRoom') }}</span>
      </el-button>
      <el-button type="primary" size="small" class="margin-left-sm" @click="openImportRoomInfo">
        <i class="el-icon-plus"></i>
        <span>{{ $t('roomList.importRoom') }}</span>
      </el-button>
      <el-button type="primary" size="small" @click="showMarkdown">
        <i class="el-icon-document"></i>
        <span>{{ $t('roomList.document') }}</span>
      </el-button>
    </div>
    <el-row class="flex justify-start">
      <el-col :span="4" class="room-floor-unit-tree">
        <floor-unit-tree ref="floorUnitTree" @switchFloorUnit="switchFloorUnit" />
      </el-col>
      <el-col :span="20" class="margin-top-xs margin-left-sm">
        <el-card class="ibox">
          <div slot="header" class="clearfix flex justify-between">
            <span>{{ $t('roomList.queryCondition') }}</span>
          </div>
          <el-form :inline="true" class="text-left">
            <el-form-item>
              <el-input :placeholder="$t('roomList.roomIdPlaceholder')" size="small" v-model="roomInfo.conditions.roomId"
                class="form-control form-control-sm"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="roomInfo.conditions.state" size="small" :placeholder="$t('roomList.selectState')">
                <el-option v-for="(item, index) in roomInfo.states" :key="index" :label="item.name"
                  :value="item.statusCd"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="roomInfo.conditions.roomSubType" size="small"
                :placeholder="$t('roomList.selectRoomType')">
                <el-option v-for="(item, index) in roomInfo.roomSubTypes" :key="index" :label="item.name"
                  :value="item.statusCd"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="roomInfo.isAll" size="small" @change="changeIsAll">
                <el-option label="当前楼栋单元" value="N"></el-option>
                <el-option label="全部楼栋单元" value="Y"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="queryRoomMethod">
                <i class="el-icon-search"></i>{{ $t('roomList.query') }}
              </el-button>
              <el-button type="info" size="small" @click="resetRoomInfo">
                <i class="el-icon-refresh"></i>{{ $t('roomList.reset') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="">
          <div class=" border-radius">
            <div>
              <el-table :data="roomInfo.rooms" style="width: 100%" border stripe>
                <el-table-column prop="roomId" :label="$t('roomList.room')" width="120" fixed="left"
                  class-name="text-center hc-table-fix-left-td">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      {{ scope.row.floorNum }}-{{ scope.row.unitNum }}-{{ scope.row.roomNum }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="layer" :label="$t('roomList.floor')" width="100" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      {{ scope.row.layer }}{{ $t('roomList.layer') }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="ownerName" :label="$t('roomList.owner')" width="150" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.ownerName" class="hc-td hand">
                      <a target="_blank" :href="'/#/pages/owner/ownerDetail?ownerId=' + scope.row.ownerId">
                        {{ scope.row.ownerName }}({{ scope.row.link }})
                      </a>
                    </div>
                    <div v-else class="hc-td textAuto">-</div>
                  </template>
                </el-table-column>
                <el-table-column prop="roomSubTypeName" :label="$t('roomList.type')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">{{ scope.row.roomSubTypeName }}</div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.area')" width="150" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      {{ scope.row.builtUpArea }}/{{ scope.row.roomArea }}
                      {{ $t('roomList.squareMeter') }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="roomRent" :label="$t('roomList.rent')" width="100" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">{{ scope.row.roomRent }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="stateName" :label="$t('roomList.roomStatus')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">{{ scope.row.stateName }}</div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.validity')" width="150" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      {{ scope.row.startTime }}<br>
                      ~{{ scope.row.endTime }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.ownerMembers')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewOwnerMembers(scope.row)">
                        {{ scope.row.memberCount || 0 }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.ownerCars')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewOwnerCars(scope.row)">
                        {{ scope.row.carCount || 0 }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.ownerRooms')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewOwnerRooms(scope.row)">
                        {{ scope.row.roomCount || 0 }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.complaints')" width="100" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewComplaints(scope.row)">
                        {{ scope.row.complaintCount || 0 }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.repairs')" width="100" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewRepairs(scope.row)">
                        {{ scope.row.repairCount || 0 }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.roomOweFee')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewRoomOweFees(scope.row)">
                        {{ scope.row.roomOweFee || '0.00' }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.ownerOweFee')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewOweFees(scope.row)">
                        {{ scope.row.oweFee || '0.00' }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.roomContracts')" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">
                      <a href="javascript:void(0)" @click="viewRoomContracts(scope.row)">
                        {{ scope.row.contractCount || 0 }}
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item, index) in roomInfo.listColumns" :key="index" :label="item" width="120"
                  align="center">
                  <template slot-scope="scope">
                    <div class="hc-td">{{ scope.row.listValues[index] || '' }}</div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('roomList.operation')" fixed="right" width="300" align="center"
                  class-name="text-center hc-table-fix-right-td">
                  <template slot-scope="scope">
                    <el-button-group>
                      <el-button v-if="hasPrivilege('502020082493857941')" size="mini"
                        @click="openEditRoomModel(scope.row)">
                        {{ $t('roomList.edit') }}
                      </el-button>
                      <el-button v-if="hasPrivilege('502020082417457942')" size="mini"
                        @click="openDelRoomModel(scope.row)">
                        {{ $t('roomList.delete') }}
                      </el-button>
                      <el-button v-if="scope.row.state == '2002' && hasPrivilege('502023021978930012')" size="mini"
                        @click="toRoomBindOwner(scope.row)">
                        {{ $t('roomList.handOver') }}
                      </el-button>
                      <el-button
                        v-if="scope.row.state != '2002' && scope.row.ownerId && hasPrivilege('502023021973760015')"
                        size="mini" @click="toRoomUnBindOwner(scope.row)">
                        {{ $t('roomList.checkOut') }}
                      </el-button>
                      <el-button v-if="scope.row.state != '2002'" size="mini" @click="toSimplifyAcceptance(scope.row)">
                        {{ $t('roomList.businessAcceptance') }}
                      </el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-row class="margin-top">
              <el-col :span="14" class="text-left">
                <div>{{ $t('roomList.roomStatusDesc1') }}</div>
                <div>{{ $t('roomList.roomStatusDesc2') }}</div>
                <div>{{ $t('roomList.roomStatusDesc3') }}</div>
                <div>{{ $t('roomList.rentDesc') }}</div>
              </el-col>
              <el-col :span="10" class="float-right">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="roomInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="DEFAULT_ROW"
                  layout="total, sizes, prev, pager, next, jumper" :total="roomInfo.total"></el-pagination>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 子组件 -->
    <add-floor ref="addFloor" @handleRefreshTree="floorUnitTree" />
    <edit-floor ref="editFloor" @handleRefreshTree="floorUnitTree" />
    <delete-floor ref="deleteFloor" @handleRefreshTree="floorUnitTree" />
    <add-unit ref="addUnit" @handleRefreshTree="floorUnitTree" />
    <edit-unit ref="editUnit" @handleRefreshTree="floorUnitTree" />
    <delete-unit ref="deleteUnit" @handleRefreshTree="floorUnitTree" />
    <search-floor ref="searchFloor" emit-choose-floor="room" emit-load-data="room" />
    <edit-room ref="editRoom" @handleRefreshRoom="handleRefreshRoom" />
    <delete-room ref="deleteRoom" @handleRefreshRoom="handleRefreshRoom" />
    <import-owner-room ref="importOwnerRoom" />
    <owner-rooms ref="ownerRooms" />
    <owner-members ref="ownerMembers" />
    <owner-cars ref="ownerCars" />
    <owner-complaints ref="ownerComplaints" />
    <owner-repairs ref="ownerRepairs" />
    <owner-owe-fees ref="ownerOweFees" />
    <room-owe-fees ref="roomOweFees" />
    <room-contracts ref="roomContracts" />
  </div>
</template>
<script>
import { getDict } from '@/api/community/communityApi'
import { queryRooms, getFloors, getUnits } from '@/api/room/roomApi'
import FloorUnitTree from '@/components/room/floorUnitTree'
import SearchFloor from '@/components/room/searchFloor'
import EditRoom from '@/components/room/editRoom'
import DeleteRoom from '@/components/room/deleteRoom'
import ImportOwnerRoom from '@/components/room/importOwnerRoom'
import AddFloor from '@/components/room/addFloor'
import EditFloor from '@/components/room/editFloor'
import DeleteFloor from '@/components/room/deleteFloor'
import AddUnit from '@/components/room/addUnit'
import EditUnit from '@/components/room/editUnit'
import DeleteUnit from '@/components/room/deleteUnit'
import OwnerRooms from '@/components/owner/ownerRooms'
import OwnerMembers from '@/components/owner/ownerMembers'
import OwnerCars from '@/components/owner/ownerCars'
import OwnerComplaints from '@/components/owner/ownerComplaints'
import OwnerRepairs from '@/components/owner/ownerRepairs'
import OwnerOweFees from '@/components/owner/ownerOweFees'
import RoomOweFees from '@/components/room/roomOweFees'
import RoomContracts from '@/components/room/roomContracts'
import { getAttrSpecList } from '@/api/dev/attrSpecApi'
// import { getAttrValueList } from '@/api/dev/attrValueApi'
const DEFAULT_PAGE = 1
const DEFAULT_ROW = 10
export default {
  name: 'RoomList',
  components: {
    FloorUnitTree,
    SearchFloor,
    EditRoom,
    DeleteRoom,
    ImportOwnerRoom,
    AddFloor,
    EditFloor,
    DeleteFloor,
    AddUnit,
    EditUnit,
    DeleteUnit,
    OwnerRooms,
    OwnerMembers,
    OwnerCars,
    OwnerComplaints,
    OwnerRepairs,
    OwnerOweFees,
    RoomOweFees,
    RoomContracts
  },
  data() {
    return {
      DEFAULT_PAGE,
      DEFAULT_ROW,
      callbackListener: 'room',
      roomInfo: {
        rooms: [],
        total: 0,
        records: 1,
        floorId: '',
        unitId: '',
        states: [],
        roomNum: '',
        isAll: 'N',
        moreCondition: false,
        conditions: {
          floorId: '',
          floorName: '',
          unitId: '',
          roomNum: '',
          roomId: '',
          state: '',
          section: '',
          roomType: '1010301',
          roomSubType: '',
          flag: ''
        },
        currentPage: DEFAULT_PAGE,
        listColumns: [],
        roomSubTypes: []
      }
    }
  },
  mounted() {
    this.initData()
    // window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    async initData() {
      this.roomInfo.conditions.floorId = this.$route.query.floorId || ''
      this.roomInfo.conditions.floorName = this.$route.query.floorName || ''
      try {
        // 获取房屋状态字典
        const stateData = await getDict('building_room', 'state')
        this.roomInfo.states = stateData
        // 获取房屋类型字典
        const roomTypeData = await getDict('building_room', 'room_sub_type')
        this.roomInfo.roomSubTypes = roomTypeData
        this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
      } catch (error) {
        console.error('初始化数据失败:', error)
      }
    },
    handleRefreshRoom(){
      this.listRoom(this.roomInfo.conditions.page,this.roomInfo.conditions.row)
    },
    async listRoom(page, row) {
      this.roomInfo.conditions.page = page
      this.roomInfo.conditions.row = row
      this.roomInfo.conditions.communityId = this.getCommunityId()
      const params = { ...this.roomInfo.conditions }
      // 处理房间号格式
      const allNum = params.roomId || ''
      const allNums = allNum.split('-')
      if (allNums.length >= 3) {
        params.floorNum = allNums[0].trim()
        params.unitNum = allNums[1].trim()
        params.roomNum = allNums.slice(2).join('-').trim()
        params.roomId = ''
        params.unitId = ''
        params.floorId = ''
      }
      try {
        const res = await queryRooms(params)
        this.roomInfo.total = res.total
        this.roomInfo.records = res.records
        this.roomInfo.rooms = res.rooms
        this.dealRoomAttr(res.rooms)
      } catch (error) {
        console.error('获取房间列表失败:', error)
        this.$message.error('获取房间列表失败')
      }
    },
    dealRoomAttr(rooms) {
      if (!rooms || !rooms.length) return
      // 获取表格列配置
      this.getColumns(rooms, () => {
        rooms.forEach(item => {
          this.getColumnsValue(item)
        })
      })
    },
    getColumnsValue(room) {
      room.listValues = []
      if (!room.roomAttrDto || !room.roomAttrDto.length) {
        this.roomInfo.listColumns.forEach(() => {
          room.listValues.push('')
        })
        return
      }
      this.roomInfo.listColumns.forEach(column => {
        const attr = room.roomAttrDto.find(dto => dto.specName === column)
        room.listValues.push(attr ? attr.valueName : '')
      })
    },
    async getColumns(rooms, callback) {
      try {
        const { data } = await getAttrSpecList({
          page: 1,
          row: 100,
          tableName: 'building_room_attr'
        })
        this.roomInfo.listColumns = data
          .filter(item => item.listShow === 'Y')
          .map(item => item.specName)
        callback()
      } catch (error) {
        console.error('获取房屋属性失败:', error)
      }
    },
    switchFloorUnit(data) {
      this.roomInfo.conditions.floorId = data.floorId
      this.roomInfo.conditions.unitId = data.unitId
      this.roomInfo.conditions.flag = 1
      this.roomInfo.isAll = 'N'
      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
    },
    handleSizeChange(val) {
      this.listRoom(this.roomInfo.currentPage, val)
    },
    handleCurrentChange(val) {
      this.roomInfo.currentPage = val
      this.listRoom(val, DEFAULT_ROW)
    },
    handleResize() {
      this.$forceUpdate()
    },
    floorUnitTree(param) {
      this.$refs.floorUnitTree.refreshTree(param)
    },
    // 按钮操作相关方法
    openAddRoom() {
      this.$router.push('/pages/property/addRoomView')
    },
    openEditRoomModel(room) {
      this.$refs.editRoom.open(room)
    },
    openDelRoomModel(room) {
      this.$refs.deleteRoom.open(room)
    },
    queryRoomMethod() {
      this.roomInfo.conditions.flag = 0
      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
    },
    resetRoomInfo() {
      this.roomInfo.conditions = {
        floorId: '',
        floorName: '',
        unitId: '',
        roomNum: '',
        roomId: '',
        state: '',
        section: '',
        roomType: '1010301',
        roomSubType: '',
        flag: ''
      }
      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
    },
    openImportRoomInfo() {
      this.$refs.importOwnerRoom.open()
    },
    openAddRoomFloorModal() {
      this.$refs.addFloor.open()
    },
    async openUpdateRoomFloorModal() {
      if (!this.roomInfo.conditions.floorId) {
        this.$message.warning('请先选择楼栋')
        return
      }
      try {
        const floorData = await this.loadFloor(this.roomInfo.conditions.floorId)
        this.$refs.editFloor.open(floorData)
      } catch (error) {
        console.error('加载楼栋信息失败:', error)
      }
    },
    async openDeleteRoomFloorModal() {
      if (!this.roomInfo.conditions.floorId) {
        this.$message.warning('请先选择楼栋')
        return
      }
      try {
        const floorData = await this.loadFloor(this.roomInfo.conditions.floorId)
        this.$refs.deleteFloor.open(floorData)
      } catch (error) {
        console.error('加载楼栋信息失败:', error)
      }
    },
    openAddRoomUnitModal() {
      if (!this.roomInfo.conditions.floorId) {
        this.$message.warning('请先选择楼栋')
        return
      }
      this.$refs.addUnit.open({ floorId: this.roomInfo.conditions.floorId })
    },
    async openUpdateRoomUnitModal() {
      if (!this.roomInfo.conditions.unitId) {
        this.$message.warning('请先选择单元')
        return
      }
      try {
        const unitData = await this.loadUnits(this.roomInfo.conditions.unitId)
        this.$refs.editUnit.open(unitData)
      } catch (error) {
        console.error('加载单元信息失败:', error)
      }
    },
    async openDeleteRoomUnitModal() {
      if (!this.roomInfo.conditions.unitId) {
        this.$message.warning('请先选择单元')
        return
      }
      try {
        const unitData = await this.loadUnits(this.roomInfo.conditions.unitId)
        this.$refs.deleteUnit.open(unitData)
      } catch (error) {
        console.error('加载单元信息失败:', error)
      }
    },
    changeIsAll() {
      if (this.roomInfo.isAll === 'Y') {
        this.roomInfo.conditions.floorId = ''
        this.roomInfo.conditions.unitId = ''
      }
      this.listRoom(this.roomInfo.currentPage, DEFAULT_ROW)
    },
    toSimplifyAcceptance(room) {
      const date = new Date()
      localStorage.setItem('JAVA110_IS_BACK', date.getTime())
      localStorage.setItem('simplifyAcceptanceSearch', JSON.stringify({
        searchType: '1',
        searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
        searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1',
      }))
      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理')
    },
    viewOwnerRooms(room) {
      this.$refs.ownerRooms.open(room)
    },
    viewOwnerMembers(room) {
      this.$refs.ownerMembers.open(room.ownerId)
    },
    viewOwnerCars(room) {
      this.$refs.ownerCars.open(room.ownerId)
    },
    viewComplaints(room) {
      this.$refs.ownerComplaints.open(room.ownerId)
    },
    viewRepairs(room) {
      this.$refs.ownerRepairs.open(room.ownerId)
    },
    viewOweFees(room) {
      this.$refs.ownerOweFees.open(room.ownerId)
    },
    viewRoomOweFees(room) {
      this.$refs.roomOweFees.open(room.roomId)
    },
    viewRoomContracts(room) {
      this.$refs.roomContracts.open({ roomId: room.roomId })
    },
    toRoomBindOwner(room) {
      this.$router.push(`/pages/owner/roomBindOwner?roomId=${room.roomId}`)
    },
    toRoomUnBindOwner(room) {
      this.$router.push(`/pages/property/deleteOwnerRoom?ownerId=${room.ownerId}`)
    },
    showMarkdown() {
      this.$router.push('/pages/property/room')
    },
    async loadFloor(floorId) {
      const params = {
        page: 1,
        row: 1,
        communityId: this.getCommunityId(),
        floorId: floorId
      }
      const res = await getFloors(params)
      return res.apiFloorDataVoList[0]
    },
    async loadUnits(unitId) {
      const params = {
        unitId: unitId,
        communityId: this.getCommunityId(),
      }
      const res = await getUnits(params)
      return res[0]
    }
  }
}
</script>
<style scoped>
.room-container {
  padding: 15px;
}
.bg-white {
  background-color: #fff;
}
.padding-sm {
  padding: 10px;
}
.margin-left-sm {
  margin-left: 10px;
}
.margin-top-xs {
  margin-top: 5px;
}
.ibox {
  margin-bottom: 15px;
}
.ibox-title {
  border-color: #e7eaec;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e7eaec;
  padding: 10px 15px;
}
.ibox-content {
  padding: 15px;
}
.hc-table-div {
  overflow-x: auto;
}
.hc-td {
  padding: 5px;
  text-align: center;
}
.text-center {
  text-align: center;
}
.hand {
  cursor: pointer;
}
.textAuto {
  text-align: center;
}
.float-right {
  float: right;
}
.border-radius {
  border-radius: 4px;
}
</style>