add:通风系统功能

hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue

@@ -65,6 +65,196 @@
         </template>
       </div>
     </transition>
+    <!-- 右侧抽屉的触发按钮 -->
+    <div
+      class="drawer-box-in"
+      v-if="!visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+      @click="toggleDrawer">
+      <double-left-outlined class="drawer-icon" style="color: white" />
+    </div>
+    <!-- 排风扇 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 4">
+        <template v-for="(item, index) in fanData" :key="index">
+          <!-- 朝左边 -->
+          <template v-if="item.lineType === '1'">
+            <div
+              style="position: absolute"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' - 10.6%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+              }">
+              <boxModel :dataSource="item" />
+            </div>
+            <img
+              style="width: 50px; height: 75px; position: absolute; z-index: 1"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' - 1.5%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+                transform: 'rotateY(180deg)',
+              }"
+              src="../image/liftState/lift/line.png" />
+          </template>
+          <!-- 朝右边 -->
+          <template v-if="item.lineType === '2'">
+            <div
+              style="position: absolute"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' + 4.3%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+              }">
+              <boxModel :dataSource="item" />
+            </div>
+            <img
+              style="width: 50px; height: 75px; position: absolute; z-index: 1"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' + 1.5%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+                transform: 'rotate(90deg,180deg)',
+              }"
+              src="../image/liftState/lift/line.png" />
+          </template>
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/ventilationSystem/fan.png" />
+        </template>
+      </div>
+    </transition>
+    <!-- 弹窗操控 -->
+    <a-drawer
+      v-if="selectIndex === 4 && visible"
+      :visible="selectIndex === 4"
+      class="drawer-fan"
+      :width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <!-- 左侧抽屉的关闭按钮 -->
+      <div
+        class="drawer-box-out"
+        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+        @click="toggleDrawer">
+        <double-right-outlined class="drawer-icon" style="color: white" />
+      </div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <fanPlant />
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+    <!-- 风幕机 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 5">
+        <template v-for="(item, index) in airCurtainData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 15.1%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+            }">
+            <boxModel :dataSource="item" />
+          </div>
+          <img
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 1.5%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+              transform: 'rotateY(180deg)',
+            }"
+            src="../image/liftState/lift/line.png" />
+
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/ventilationSystem/airCurtain.png" />
+        </template>
+      </div>
+    </transition>
+    <!-- 弹窗操控 -->
+    <a-drawer
+      v-if="selectIndex === 5 && visible"
+      :visible="selectIndex === 5"
+      class="drawer-fan"
+      :width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
+      :mask="false">
+      <!-- 左侧抽屉的关闭按钮 -->
+      <div
+        class="drawer-box-out"
+        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+        @click="toggleDrawer">
+        <double-right-outlined class="drawer-icon" style="color: white" />
+      </div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
+        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+    <transition name="zep">
+      <div v-if="selectIndex === 6">
+        <template v-for="(item, index) in windowData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 10.6%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+            }">
+            <boxModel :dataSource="item" />
+          </div>
+          <img
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 1.5%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+              transform: 'rotateY(180deg)',
+            }"
+            src="../image/liftState/lift/line.png" />
+
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/ventilationSystem/windowIcon.png" />
+        </template>
+      </div>
+    </transition>
+    <!-- 弹窗操控 -->
+    <a-drawer
+      v-if="selectIndex === 6 && visible"
+      :visible="selectIndex === 6"
+      class="drawer-fan"
+      :width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
+      :mask="false">
+      <!-- 左侧抽屉的关闭按钮 -->
+      <div
+        class="drawer-box-out"
+        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+        @click="toggleDrawer">
+        <double-right-outlined class="drawer-icon" style="color: white" />
+      </div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
+        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
   </div>
 </template>
 <script lang="ts" setup>
@@ -76,13 +266,17 @@
   import CO2 from '../image/ventilationSystem/CO2.png';
   import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
   import window from '../image/ventilationSystem/window.png';
-  import fanMachine from '../image/ventilationSystem/fanMachine.png';
+  import airCurtain from '../image/ventilationSystem/fanMachine.png';
   import selectImg from '../image/airConditioningSystem/selectImg.png';
   import sunRed from '../image/airConditioningSystem/sunRed.png';
   import sunYellow from '../image/airConditioningSystem/sunYellow.png';
   import sunBlue from '../image/airConditioningSystem/sunBlue.png';
 
+  import boxModel from './components/boxModel.vue';
   import singleModel from '../components/singleModel.vue';
+  import fanControl from './components/fanControl.vue';
+  import fanPlant from './components/fanPlant.vue';
+  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
   //图例
   const legend = ref([
@@ -91,11 +285,22 @@
     { url: PM25, name: 'PM2.5' },
     { url: CO2, name: 'CO2浓度' },
     { url: ventilatingFan, name: '排风扇' },
-    { url: fanMachine, name: '风幕机' },
+    { url: airCurtain, name: '风幕机' },
     { url: window, name: '电动窗' },
   ]);
   // 选择的图例
   const selectIndex = ref(0);
+  //选择table
+  const activeKey = ref('1');
+  // 展示
+  const visible = ref(true);
+  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+  const preload = ref(true);
+  // 抽屉 - 开关事件
+  const toggleDrawer = () => {
+    console.log('xxxx');
+    visible.value = !visible.value;
+  };
   //选择方法
   const selectLegend = (item: any, index: any) => {
     if (selectIndex.value !== index) {
@@ -178,6 +383,94 @@
       url: CO2,
     },
   ]);
+  //排风扇
+  const fanData = ref([
+    {
+      title: '排风扇',
+      styleText: { left: '43.2%', bottom: '77.8%' },
+      type: 'fan',
+      lineType: '1',
+    },
+    {
+      title: '排风扇',
+      styleText: { left: '50%', bottom: '77.8%' },
+      type: 'fan',
+      lineType: '2',
+    },
+    {
+      title: '排风扇',
+      styleText: { left: '41.2%', bottom: '27.8%' },
+      type: 'fan',
+      lineType: '1',
+    },
+    {
+      title: '排风扇',
+      styleText: { left: '51.2%', bottom: '27.8%' },
+      type: 'fan',
+      lineType: '2',
+    },
+  ]);
+  // 风幕机
+  const airCurtainData = ref([
+    {
+      title: '风幕机',
+      styleText: { left: '38%', bottom: '57.8%' },
+      type: 'airCurtain',
+    },
+    {
+      title: '风幕机',
+      styleText: { left: '58.5%', bottom: '57.3%' },
+      type: 'airCurtain',
+    },
+    {
+      title: '风幕机',
+      styleText: { left: '64.2%', bottom: '22.8%' },
+      type: 'airCurtain',
+    },
+  ]);
+  // 电动窗
+  const windowData = ref([
+    {
+      title: '电动窗1',
+      styleText: { left: '32%', bottom: '28%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗2',
+      styleText: { left: '33.5%', bottom: '42.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗3',
+      styleText: { left: '35%', bottom: '57.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗4',
+      styleText: { left: '36.5%', bottom: '72.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗5',
+      styleText: { left: '66%', bottom: '28%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗6',
+      styleText: { left: '64%', bottom: '42.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗7',
+      styleText: { left: '62%', bottom: '57.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗8',
+      styleText: { left: '60%', bottom: '72.8%' },
+      type: 'window',
+    },
+  ]);
   onMounted(() => {});
   onUnmounted(() => {});
 </script>
@@ -257,4 +550,44 @@
       opacity: 0; /* 结束时完全透明 */
     }
   }
+  .drawer-fan {
+    width: 496px;
+    // 抽屉关闭按钮
+    .drawer-box-out {
+      width: 30px;
+      height: 40px;
+      border-radius: 2px;
+      position: fixed;
+      right: 466px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    .ant-tabs-tab-btn {
+      color: white;
+    }
+    .ant-tabs-tabpane {
+      color: white;
+    }
+  }
+  .drawer-box-in {
+    width: 30px;
+    height: 40px;
+    border-radius: 2px;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
 </style>