智慧场景-智·会议配置策略会议中状态禁止配置策略

src/components/scene/meeting/config/meetingRoomItem.vue

@@ -3,95 +3,131 @@
     <a-row>
       <a-col :span="24">
         <div class="meetingRoomItem-title">
-          {{ obj.name }}
-          <span style="font-size: 15px">{{ '[' + obj.timeRange[0] + '-' + obj.timeRange[1] + ']' }}</span>
+          {{ 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">
-            <span class="anticon" style="color: white;font-size: 16px;padding: 2px"><a-icon style="color: white" :type="device.icon" /></span>
+          <!-- <a-tooltip placement="bottom" v-for="device in obj.devices" :key="device.id" title="test"> -->
+          <div
+            class="meetingRoomItem-device"
+            v-for="device in obj.devices"
+            :key="device.id"
+            :style="{ backgroundColor: color.light }"
+          >
+            <span class="anticon" style="color: white;font-size: 16px;padding: 2px"
+              ><a-icon style="color: white" :type="device.icon" />
+            </span>
           </div>
+          <!-- </a-tooltip> -->
         </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 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 >
+      <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>
+          <a-button class="meetingRoomItem-opr-btn" :style="{ backgroundColor: color.dark }" @click="viewDetails"
+            >查看信息</a-button
+          >
+          <!-- update-LiuMengxiang:会议中的会议，配置策略不可点击。添加disabled属性 -->
+          <a-button
+            class="meetingRoomItem-opr-btn"
+            :style="{ backgroundColor: color.dark }"
+            :disabled="obj.status == 1"
+            @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"
+    <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"
+    <a-modal
+      v-if="configVisible"
+      v-model="configVisible"
+      title="配置策略"
+      :width="1000"
+      style="height: 650px;overflow-y: auto"
+      :footer="null"
     >
-      <MeetingRoomConfig :close="()=>{this.configVisible=false}" />
+      <MeetingRoomConfig
+        :close="
+          () => {
+            this.configVisible = false;
+          }
+        "
+      />
     </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',
+        primary: "#3CC2AC",
+        light: "rgba(60,194,172,0.5)",
+        dark: "#3CC2AC"
+      },
+      devicesMap: {
+        audio: "麦克风",
+        camera: "摄像头",
+        api: "转换头",
+        control: "门禁",
+        notification: "喇叭",
+        unlock: "门锁",
+        "safety-certificate": "监控"
       }
-    }
+    };
   },
   components: {
     MeetingRoomDetails,
-    MeetingRoomConfig,
+    MeetingRoomConfig
   },
   props: {
-    obj: Object,
+    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',
-      }
+    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: {
@@ -99,10 +135,14 @@ export default {
       this.detailVisible = true;
     },
     configMeeting() {
-      this.configVisible = true;
-    },
+      if (this.obj.status == 1) {
+        this.$message.info("会议中，不可修改策略!");
+      } else {
+        this.configVisible = true;
+      }
+    }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -114,7 +154,7 @@ export default {
   background-color: #f7fbff;
 
   .meetingRoomItem-title {
-    color: #4D4D4D;
+    color: #4d4d4d;
     font-size: 16px;
     padding-left: 3px;
     height: 20%;
@@ -156,4 +196,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/scene/meeting/config/meetingRooms.vue

@@ -1,45 +1,45 @@
 <template>
   <div class="meetingRooms">
-
     <div class="meetingRooms-query">
       <Query :show="['floor']" :query-data.sync="queryData" :reset="reset" :search="search">
         <template #extraItem>
           <a-form-model-item label="会议室状态：" class="formItem">
             <a-select default-value="0" style="width: 120px" v-model="queryData.size">
               <a-select-option value="0"> 全部 </a-select-option>
-              <a-select-option v-for="item in roomStatusData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
+              <a-select-option v-for="item in roomStatusData" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-select-option>
             </a-select>
           </a-form-model-item>
           <a-form-model-item label="会议室人数：" class="formItem">
             <a-select default-value="0" style="width: 120px" v-model="queryData.size">
               <a-select-option value="0"> 全部 </a-select-option>
-              <a-select-option v-for="item in roomSizeData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
+              <a-select-option v-for="item in roomSizeData" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-select-option>
             </a-select>
           </a-form-model-item>
           <a-form-model-item label="日期：" class="formItem">
-            <a-date-picker :default-value="formDateDefaultValue" @change="handleDatePickerChange" format="YYYY/MM/DD"/>
+            <a-date-picker :default-value="formDateDefaultValue" @change="handleDatePickerChange" format="YYYY/MM/DD" />
           </a-form-model-item>
         </template>
       </Query>
     </div>
 
     <div class="meetingRooms-content">
-      <template v-for="(floor, index) in roomData">
-        <div class="meetingRooms-floor" :key="floor.floor">
+      <div v-for="(floor, index) in roomData" :key="floor.floor" :index="index">
+        <div class="meetingRooms-floor">
           <div class="meetingRooms-floor-title">
-            <a-divider orientation="left" :dashed="true" >
-              {{ floor.floor }}
-            </a-divider>
+            <a-divider orientation="left" :dashed="true"> {{ floor.floor }} </a-divider>
           </div>
           <a-row :gutter="12">
-            <a-col :lg="{span: 6}" :sm="{span: 6}" :xxl="{span: 4}"  v-for="room in floor.rooms" :key="room.id">
+            <a-col :lg="{ span: 6 }" :sm="{ span: 6 }" :xxl="{ span: 4 }" v-for="room in floor.rooms" :key="room.id">
               <MeetingRoomItem :obj="room" />
             </a-col>
           </a-row>
         </div>
-      </template>
+      </div>
     </div>
-
   </div>
 </template>
 
@@ -51,139 +51,184 @@ import apiSceneMeeting from "@/api/scene/meeting/apiSceneMeeting";
 export default {
   components: {
     MeetingRoomItem,
-    Query,
+    Query
   },
   data() {
     let timeRange = this.$util.dateUtil.getNearlyMonthRange();
     let now = this.$moment();
-    let nowFormat = now.format('YYYY/MM/DD');
+    let nowFormat = now.format("YYYY/MM/DD");
     return {
       formDateDefaultValue: now,
       queryData: {
-        floorId: '0',
-        size: '0',
+        floorId: "0",
+        size: "0",
         date: nowFormat,
         timeRange: timeRange
       },
       roomSizeData: [
         {
-          label: '3人',
-          value: '3'
-        },{
-          label: '5人',
-          value: '5'
+          label: "3人",
+          value: "3"
         },
+        {
+          label: "5人",
+          value: "5"
+        }
       ],
       roomStatusData: [
         {
-          label: '会议中',
-          value: '1'
-        },{
-          label: '闲置中',
-          value: '2'
-        },{
-          label: '已预订',
-          value: '3'
+          label: "会议中",
+          value: "1"
+        },
+        {
+          label: "闲置中",
+          value: "2"
         },
+        {
+          label: "已预订",
+          value: "3"
+        }
       ],
       roomData: [
         {
-          floor: '3F',
+          floor: "3F",
           rooms: [
             {
               id: 1,
-              name: '301会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '1',
+              name: "301会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "1",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
-            },{
+            },
+            {
               id: 2,
-              name: '301会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '1',
+              name: "301会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "1",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
-            },{
+            },
+            {
               id: 3,
-              name: '301会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '2',
+              name: "301会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "2",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
-            },{
+            },
+            {
               id: 4,
-              name: '301会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '3',
+              name: "301会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "3",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
             }
           ]
         },
         {
-          floor: '4F',
+          floor: "4F",
           rooms: [
             {
               id: 401,
-              name: '401会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '1',
+              name: "401会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "1",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
             },
             {
               id: 402,
-              name: '402会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '1',
+              name: "402会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "1",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
             }
           ]
         },
         {
-          floor: '5F',
+          floor: "5F",
           rooms: [
             {
               id: 501,
-              name: '501会议室',
-              timeRange: ['9:00', '10:00'],
-              status: '1',
+              name: "501会议室",
+              timeRange: ["9:00", "10:00"],
+              status: "1",
               time: 8,
               devices: [
-                {icon: 'audio'},{icon: 'camera'},{icon: 'api'},{icon: 'control'},{icon: 'notification'},{icon: 'unlock'},{icon: 'safety-certificate'},
+                { icon: "audio" },
+                { icon: "camera" },
+                { icon: "api" },
+                { icon: "control" },
+                { icon: "notification" },
+                { icon: "unlock" },
+                { icon: "safety-certificate" }
               ]
             }
           ]
         }
-      ],
-    }
-  },
-  props: {
-
+      ]
+    };
   },
+  props: {},
   mounted() {
-    this.getMeetingRooms()
+    this.getMeetingRooms();
   },
   methods: {
     reset() {},
-    search() {
-    },
+    search() {},
     handleDatePickerChange(val) {
-      this.queryData.date = val.format('YYYY/MM/DD');
+      this.queryData.date = val.format("YYYY/MM/DD");
     },
     getMeetingRooms() {
       //apiSceneMeeting.getMeetingRoomList(this.queryData).then(res=>{
@@ -191,7 +236,7 @@ export default {
       //})
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -203,7 +248,6 @@ export default {
     height: auto;
     margin: 8px;
     .meetingRooms-floor-title {
-
     }
     .meetingRooms-floor-item {
       width: 100%;
@@ -217,4 +261,4 @@ export default {
 .formItem {
   margin: 0px 15px;
 }
-</style>
+</style>