iot-front-ui/src/components/scene/meeting/config/meetingRoomItem.vue

<template>
  <div class="meetingRoomItem">
    <a-row>
      <a-col :span="24">
        <div class="meetingRoomItem-title">
          {{ obj.name }}
          <span style="font-size: 15px">{{ '[' + obj.timeRange[0] + '-' + obj.timeRange[1] + ']' }}</span>
        </div>
      </a-col>
      <a-col :span="16">
        <div class="meetingRoomItem-devices">
          <div class="meetingRoomItem-device" :style="{backgroundColor: color.light}" v-for="device in obj.devices" :key="device.id">

          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div style="">
          <div class="meetingRoomItem-state" :style="{color: color.primary}">
            <span v-if="obj.status==1">会议中</span>
            <span v-if="obj.status==2">闲置中</span>
            <span v-if="obj.status==3">已预订</span>
          </div>
          <div class="meetingRoomItem-num"  :style="{color: color.primary}">
            {{ obj.time }}
          </div>
        </div>
      </a-col>
      <a-col >
        <div class="meetingRoomItem-opr">
          <a-button class="meetingRoomItem-opr-btn" :style="{backgroundColor: color.dark}" @click="viewDetails">查看信息</a-button>
          <a-button class="meetingRoomItem-opr-btn" :style="{backgroundColor: color.dark}" @click="configMeeting">配置策略</a-button>
        </div>
      </a-col>
    </a-row>

    <a-modal v-if="detailVisible" v-model="detailVisible" title="会议室详情" :width="1000" style="height: 650px;overflow-y: auto"
             :footer="null"
    >
      <MeetingRoomDetails :data="obj" />
    </a-modal>

    <a-modal v-if="configVisible" v-model="configVisible" title="配置策略" :width="1000" style="height: 650px;overflow-y: auto"
             :footer="null"
    >
      <MeetingRoomConfig  />
    </a-modal>


  </div>
</template>

<script>
import MeetingRoomDetails from "@/components/scene/meeting/config/meetingRoomDetails.vue";
import MeetingRoomConfig from "@/components/scene/meeting/config/meetingRoomConfig.vue";

export default {
  data() {
    return {
      detailVisible: false,
      configVisible: false,
      color: {
        primary: '#3CC2AC',
        light: 'rgba(60,194,172,0.5)',
        dark: '#3CC2AC',
      }
    }
  },
  components: {
    MeetingRoomDetails,
    MeetingRoomConfig,
  },
  props: {
    obj: Object,
  },
  mounted() {
    if (this.obj.status==1) {
      this.color={
        primary: '#3CC2AC',
        light: 'rgba(60,194,172,0.5)',
        dark: '#3CC2AC',
      }
    } else if (this.obj.status==2) {
      this.color={
        primary: '#3AA7E6',
        light: 'rgba(58,167,230,0.5)',
        dark: '#3AA7E6',
      }
    } else if (this.obj.status==3) {
      this.color={
        primary: '#EE8242',
        light: 'rgba(238,130,66,0.5)',
        dark: '#EE8242',
      }
    }
  },
  methods: {
    viewDetails() {
      this.detailVisible = true;
    },
    configMeeting() {
      this.configVisible = true;
    },
  }
}
</script>

<style lang="less" scoped>
.meetingRoomItem {
  width: 100%;
  height: 150px;
  padding: 8px 12px 8px 15px;
  border-radius: 8px;
  background-color: #f7fbff;

  .meetingRoomItem-title {
    color: #4D4D4D;
    font-size: 16px;
    padding-left: 3px;
    height: 20%;
  }

  .meetingRoomItem-state {
    margin-top: 5%;
    text-align: center;
  }

  .meetingRoomItem-num {
    text-align: center;
    font-size: 30px;
  }

  .meetingRoomItem-devices {
    margin-top: 5%;
    height: 40%;
    .meetingRoomItem-device {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 5px 3px;
      border-radius: 3px;
    }
  }

  .meetingRoomItem-opr {
    width: 100%;
    height: 40%;
    text-align: center;

    .meetingRoomItem-opr-btn {
      width: 47%;
      height: 30px;
      border-radius: 4px;
      color: #ffffff;
      font-size: 12px;
    }
  }
}
</style>