[Feat 0000] 为可配置首页常用模块添加隐藏功能与动画

src/views/vent/home/configurable/components/ModuleCommon.vue

@@ -1,16 +1,21 @@
 <template>
   <!-- 常用模块 -->
-  <ventBox1 :class="getModuleClass(showStyle)" :style="style">
-    <template v-if="moduleName" #title>
-      <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
-    </template>
-    <template #container>
-      <slot>
-        <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-        <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
-      </slot>
-    </template>
-  </ventBox1>
+  <Transition
+    :enter-active-class="`animate__animated  animate__fadeIn${capitalizedPosition}`"
+    :leave-active-class="`animate__animated  animate__fadeOut${capitalizedPosition}`"
+  >
+    <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style">
+      <template v-if="moduleName" #title>
+        <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
+      </template>
+      <template #container>
+        <slot>
+          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+          <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+        </slot>
+      </template>
+    </ventBox1>
+  </Transition>
 </template>
 <script lang="ts" setup>
   import Header from './header.vue';
@@ -46,6 +51,10 @@
     return size + position + 'position: absolute; pointer-events: auto;';
   });
 
+  const capitalizedPosition = computed(() => {
+    return props.showStyle.position.includes('left') ? 'Left' : 'Right';
+  });
+
   // 根据配置里的定位判断应该使用哪个class
   function getModuleClass({ size, position }) {
     const [_, width] = size.match(/width:([0-9]+)px/) || [];

src/views/vent/monitorManager/balancePressMonitor/balancePress.data.ts

@@ -206,12 +206,12 @@ export const settingParam4 = [
     title: '氧气上限',
     code: 'o2MaxVal',
     value: '',
-    unit: 'm³/min',
+    unit: '%',
   },
   {
     title: '氧气下限',
     code: 'o2MinVal',
     value: '',
-    unit: 'm³/min',
+    unit: '%',
   },
 ];

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHomeBD.vue

@@ -2,97 +2,91 @@
   <a-spin tip="Loading..." :spinning="loading">
     <div class="monitor-container">
       <div class="lr left-box">
-        <ventBox1>
-          <template #title>
-            <div>均压与低氧参数监测与设置</div>
-          </template>
-          <template #container>
-            <div class="vent-flex-row-between auto-control mt-10px mb-10px">
-              <div class="title">自动调节：</div>
-              <a-radio-group :value="avePressSetting.isAuto" name="radioGroup" @change="changeAvePressState($event, 'isAuto')">
-                <a-radio :value="false">关闭</a-radio>
-                <a-radio :value="true">开启</a-radio>
-              </a-radio-group>
-            </div>
-            <div class="vent-flex-row-between auto-control mt-10px mb-10px">
-              <div class="title">调节类型：</div>
-              <a-radio-group :value="avePressSetting.controlType" name="radioGroup" @change="changeAvePressState($event, 'controlType')">
-                <a-radio value="o2">氧气</a-radio>
-                <a-radio value="pressure">压差</a-radio>
-              </a-radio-group>
-            </div>
-            <div class="input-box">
-              <!-- <div class="divider-line">开始条件</div>
+        <Transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
+          <ventBox1 v-if="showModules">
+            <template #title>
+              <div>均压与低氧参数监测与设置</div>
+            </template>
+            <template #container>
+              <div class="vent-flex-row-between auto-control mt-10px mb-10px">
+                <div class="title">自动调节：</div>
+                <a-radio-group :value="avePressSetting.isAuto" name="radioGroup" @change="changeAvePressState($event, 'isAuto')">
+                  <a-radio :value="false">关闭</a-radio>
+                  <a-radio :value="true">开启</a-radio>
+                </a-radio-group>
+              </div>
+              <div class="vent-flex-row-between auto-control mt-10px mb-10px">
+                <div class="title">调节类型：</div>
+                <a-radio-group :value="avePressSetting.controlType" name="radioGroup" @change="changeAvePressState($event, 'controlType')">
+                  <a-radio value="o2">氧气</a-radio>
+                  <a-radio value="pressure">压差</a-radio>
+                </a-radio-group>
+              </div>
+              <div>
+                <!-- <div class="divider-line">开始条件</div>
               <div v-for="(item, index) in settingParam1" class="input-item" :key="index">
                 <div class="title">{{ item.title }}：</div>
                 <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                 <div class="unit">{{ item.unit }}</div>
               </div> -->
-              <div class="divider-line">调节参数</div>
-              <div v-for="(item, index) in settingParam4" class="input-item" :key="index">
-                <div class="title">{{ item.title }}：</div>
-                <a-input-number class="input-value" v-model:value="avePressSetting[item.code]" placeholder="" :disabled="settingFormDisabled" />
-                <div class="unit">{{ item.unit }}</div>
-              </div>
-              <!-- <div class="divider-line">结束时间</div>
+                <div class="divider-line"></div>
+                <div v-for="(item, index) in settingParam4" class="input-item" :key="index">
+                  <div class="title">{{ item.title }}：</div>
+                  <a-input-number class="input-value" v-model:value="avePressSetting[item.code]" placeholder="" :disabled="settingFormDisabled" />
+                  <div class="unit">&nbsp;{{ item.unit }}</div>
+                </div>
+                <!-- <div class="divider-line">结束时间</div>
               <div v-for="(item, index) in settingParam3" class="input-item" :key="index">
                 <div class="title">{{ item.title }}：</div>
                 <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                 <div class="unit">{{ item.unit }}</div>
               </div> -->
-            </div>
-            <div class="btn-box flex" style="text-align: center">
-              <div class="btn btn1 flex-1" @click="editSettingForm">{{ settingFormDisabled ? '编辑' : '取消' }}</div>
-              <div class="btn btn1 flex-1" @click="submitSettingForm">提交</div>
-            </div>
-          </template>
-        </ventBox1>
-      </div>
-      <div style="pointer-events: auto" class="flex mt-10px h-100% w-770px">
-        <ventBox1 class="mr-10px">
-          <template #title>
-            <div>均压工作面风门与风门联动</div>
-          </template>
-          <template #container>
-            <div class="vent-flex-row-between auto-control mt-10px mb-10px">
-              <div class="title">自动调节：</div>
-              <a-radio-group :value="gateLinkage.isAuto" name="radioGroup" @change="changeIsAuto($event, gateLinkage.id)">
-                <a-radio :value="false">关闭</a-radio>
-                <a-radio :value="true">开启</a-radio>
-              </a-radio-group>
-            </div>
-            <div class="btn-box" style="text-align: center">
-              <div class="btn btn1" @click="() => openModal(false, { id: gateLinkage.id })">控制密码修改</div>
-            </div>
-          </template>
-        </ventBox1>
-        <ventBox1>
-          <template #title>
-            <div>均压工作面风机与风门联动</div>
-          </template>
-          <template #container>
-            <div class="vent-flex-row-between auto-control mt-10px mb-10px">
-              <div class="title">自动调节：</div>
-              <a-radio-group :value="avePressLinkage.isAuto" name="radioGroup" @change="changeIsAuto($event, avePressLinkage.id)">
-                <a-radio :value="false">关闭</a-radio>
-                <a-radio :value="true">开启</a-radio>
-              </a-radio-group>
-            </div>
-            <div class="btn-box" style="text-align: center">
-              <div class="btn btn1" @click="() => openModal(false, { id: avePressLinkage.id })">控制密码修改</div>
-            </div>
-          </template>
-        </ventBox1>
+              </div>
+              <div class="btn-box flex" style="text-align: center">
+                <div class="btn btn1 flex-1" @click="editSettingForm">{{ settingFormDisabled ? '编辑' : '取消' }}</div>
+                <div class="btn btn1 flex-1" @click="submitSettingForm">提交</div>
+              </div>
+            </template>
+          </ventBox1>
+        </Transition>
+        <Transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
+          <ventBox1 v-if="showModules" class="mt-10px">
+            <template #title>
+              <div>均压工作面联动控制</div>
+            </template>
+            <template #container>
+              <div class="vent-flex-row-between auto-control mt-10px mb-10px">
+                <div class="title">风门与风门自动调节：</div>
+                <a-radio-group :value="gateLinkage.isAuto" name="radioGroup" @change="changeIsAuto($event, gateLinkage.id)">
+                  <a-radio :value="false">关闭</a-radio>
+                  <a-radio :value="true">开启</a-radio>
+                </a-radio-group>
+                <div class="btn btn1" @click="() => openModal(false, { id: gateLinkage.id })">密码修改</div>
+              </div>
+              <div class="vent-flex-row-between auto-control mt-10px mb-10px">
+                <div class="title">风机与风门自动调节：</div>
+                <a-radio-group :value="avePressLinkage.isAuto" name="radioGroup" @change="changeIsAuto($event, avePressLinkage.id)">
+                  <a-radio :value="false">关闭</a-radio>
+                  <a-radio :value="true">开启</a-radio>
+                </a-radio-group>
+                <div class="btn btn1" @click="() => openModal(false, { id: avePressLinkage.id })">密码修改</div>
+              </div>
+              <!-- <div class="btn-box" style="text-align: center">
+            </div> -->
+            </template>
+          </ventBox1>
+        </Transition>
       </div>
+
       <ModuleCommon
-        v-for="cfg in configs"
-        :key="cfg.deviceType"
+        v-for="(cfg, index) in configs"
+        :key="`svvmbcb${index}`"
         :show-style="cfg.showStyle"
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
         :data="selectData"
-        :visible="true"
+        :visible="showModules"
       />
     </div>
     <PasswordModal :modal-is-show="modalVisible" modal-title="提交" @handle-ok="handleResolve" @handle-cancel="handleReject" />
@@ -114,6 +108,9 @@
     <BasicModal title="局扇状态监测" :mask="false" :bodyStyle="{ height: '50px' }" style="top: 420px" :show-ok-btn="false" @register="warnRegister3">
       {{ warnModalText3 }}
     </BasicModal> -->
+
+    <div class="switch-button icon-goto right-10px top-70px" :class="{ 'right-390px': showModules }" @click="showModules = !showModules"></div>
+    <!-- <div v-else class="switch-button icon-goto right-10px top-70px" @click="showModules = true"></div> -->
   </a-spin>
 </template>
 <script setup lang="ts">
@@ -145,6 +142,7 @@
   const { sysOrgCode } = useGlobSetting();
 
   const loading = ref(false);
+  const showModules = ref(true);
 
   // 监测数据
   const selectData = ref();
@@ -425,6 +423,27 @@
   .monitor-container {
     margin-top: 60px;
   }
+
+  .switch-button {
+    width: 34px;
+    height: 34px;
+    position: fixed;
+    // right: 5px;
+    // bottom: 300px;
+    z-index: 1000;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    pointer-events: auto;
+    transition: right 1s;
+  }
+  .icon-goto {
+    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
+    background-image: var(--image-monitor-goto);
+  }
+
+  .divider-line {
+    border-bottom: 1px solid white;
+  }
 </style>
 <style>
   /* .balancePress .zxm-modal-confirm-title {