更新

src/views/vent/fire/fireHome/index.vue

@@ -5,51 +5,63 @@
       <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
     </div> -->
     <div class="main-container">
-      <div class="left-area">
-        <!-- 左上区域 -->
-        <div class="left-t">
-          <div class="tcontent-area">
-            <div class="tcontent-l">
-              <div>全矿井</div>
-              <div>监测区域</div>
+      <transition name="fade" mode="out-in">
+        <div class="left-area" v-if="isShow">
+          <!-- 左上区域 -->
+          <div class="left-t">
+            <div class="tcontent-area">
+              <div class="tcontent-l">
+                <div>全矿井</div>
+                <div>监测区域</div>
+              </div>
+              <div class="tcontent-c">
+                <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
+                <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
+              </div>
+              <div class="tcontent-r">火灾风险</div>
             </div>
-            <div class="tcontent-c">
-              <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
-              <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
-            </div>
-            <div class="tcontent-r">火灾风险</div>
+          </div>
+          <!-- 左中区域 -->
+          <div class="left-c">
+            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
+              <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
+            </DanelBd>
+          </div>
+          <!-- 左下区域 -->
+          <div class="left-b">
+            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
+              :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
+              <emptyJc :emptyData="emptyData" />
+            </DanelBd>
+          </div>
+          <!-- 左底部区域 -->
+          <div class="left-f">
+            <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
           </div>
         </div>
-        <!-- 左中区域 -->
-        <div class="left-c">
-          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
-            <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
-          </DanelBd>
-        </div>
-        <!-- 左下区域 -->
-        <div class="left-b">
-          <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
-           :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
-            <emptyJc :emptyData="emptyData" />
-          </DanelBd>
-        </div>
-        <!-- 左底部区域 -->
-        <div class="left-f">
-          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
-        </div>
-      </div>
-      <div class="center-area">
-        <div class="center-t">
+      </transition>
+
+      <div :class="isShow ? 'center-area' : 'center-area1'">
+        <div :class="isShow ? 'center-t' : 'center-t1'">
+          <div class="center-scalc" @click="getScalc">
+            <img src="../../../../assets/images/scalc.png" alt="">
+          </div>
           <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
         </div>
-        <div class="center-b">
-          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '289px' }"
-            commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
+        <transition name="fade" mode="out-in">
+          <div class="center-b" v-if="isShow">
+          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect"
+            :contentStyle="{ contentH: '289px' }" commonTitle="selected" :selectList="selectList"
+            @changeSelect="changeSelect">
             <fiberBunbleJc :bunbleData="bunbleData" />
           </DanelBd>
         </div>
+        </transition>
+       
       </div>
-      <div class="right-area">
+
+      <transition name="fade" mode="out-in">
+        <div class="right-area" v-if="isShow">
         <!-- 右上区域 -->
         <div class="right-t">
           <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
@@ -78,12 +90,14 @@
           </DanelBd>
         </div>
       </div>
+      </transition>
+     
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted,onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import DanelBd from '../../common/danelBd.vue';
 import workJc from './components/workJc.vue';
 import emptyJc from './components/emptyJc.vue';
@@ -100,6 +114,9 @@ let moduleSelect = reactive([
 
 ])
 
+//是否显示左侧区域和右侧区域
+let isShow = ref(true)
+
 let areaCode = ref('')
 let pointCode = ref('')
 let areaCodeMb = ref('')
@@ -140,6 +157,12 @@ let selectListAq = reactive<any[]>([
 let safetyHead = reactive<any[]>([])
 let safetyList = reactive<any[]>([])
 
+//隐藏和显示左右侧区域
+function getScalc() {
+  isShow.value = !isShow.value
+
+}
+
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor() {
@@ -227,8 +250,8 @@ async function getFireAreaInfoListMb() {
     dataMb.forEach(m => {
       selectListMb.push({ label: m.areaName, value: m.areaCode })
     })
-   
-    areaCodeMb.value =areaCodeMb.value ?  areaCodeMb.value : selectListMb[0]['value']
+
+    areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value']
     //获取密闭监测实时信息
     getMbRealDataList()
   }
@@ -240,7 +263,7 @@ async function getMbRealDataList() {
   console.log(res, '密闭监测实时信息')
   emptyData.length = 0
   res.forEach(el => {
-    emptyData.push({ label: el.name, val: el.currentValue,unit:el.unit },)
+    emptyData.push({ label: el.name, val: el.currentValue, unit: el.unit },)
   })
 }
 
@@ -275,7 +298,7 @@ async function getSgjcRealDataByPointCodeList() {
         val1: el.position,
         label2: '时间',
         val2: el.time,
-        unit:el.unit
+        unit: el.unit
       })
     })
   }
@@ -294,16 +317,16 @@ async function getFireAreaInfoListDs() {
       selectListDs.push({ label: el.areaName, value: el.areaName })
     })
 
-    dsCode.value=dsCode.value ? dsCode.value : selectListDs[0].value
+    dsCode.value = dsCode.value ? dsCode.value : selectListDs[0].value
     let dataName = dataDs.filter(v => v.areaName == dsCode.value)[0]
     outFireData.push(
-        { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
-        { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
-        { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
-        { title: '火焰预警', val: '--', dw: '', label: '状态' },
-        { title: '喷粉阀门', val: '--', dw: '', label: '开关量' },
-      )
-   
+      { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
+      { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
+      { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
+      { title: '火焰预警', val: '--', dw: '', label: '状态' },
+      { title: '喷粉阀门', val: '--', dw: '', label: '开关量' },
+    )
+
   }
 }
 
@@ -331,7 +354,7 @@ async function getInfosByAreaCodeList() {
         value: el.pointCode
       })
     })
-    pointCodeBd.value =pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
+    pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
     //获取光钎测温图表数据
     getGxcwHistoryDataByPointCodeList()
   }
@@ -598,10 +621,36 @@ onUnmounted(() => {
       width: calc(100% - 814px);
 
       .center-t {
+        position: relative;
         width: 100%;
         height: 60%;
         margin-bottom: 15px;
         overflow: hidden;
+
+        .center-scalc {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          width: 50px;
+          height: 50px;
+          background-color: rgb(30 58 117 / 41.8%);
+
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 37px;
+            height: 41px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+
+            &:hover {
+              width: 43px;
+              height: 47px;
+              background-color: rgb(100 228 185 / 6.27%);
+            }
+          }
+        }
       }
 
       .center-b {
@@ -610,6 +659,49 @@ onUnmounted(() => {
       }
     }
 
+    .center-area1 {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      .center-t1 {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        margin-bottom: 15px;
+        overflow: hidden;
+
+        .center-scalc {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          width: 50px;
+          height: 50px;
+          background-color: rgb(30 58 117 / 41.8%);
+
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 37px;
+            height: 41px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+
+            &:hover {
+              width: 43px;
+              height: 47px;
+              background-color: rgb(100 228 185 / 6.27%);
+            }
+          }
+        }
+      }
+
+    
+    }
+
     .right-area {
       display: flex;
       flex-direction: column;
@@ -637,5 +729,25 @@ onUnmounted(() => {
       }
     }
   }
+
+   /* fade.css */
+   .fade-enter-active {
+    transition:opacity 2.5s ease;
+
+    /* 设置过渡时间为1秒 */
+  }
+
+  .fade-leave-active {  
+    transition:  opacity 0.5s ease;
+
+    /* 设置过渡时间为1秒 */
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+
+    /* 初始状态为不可见 */
+  }
 }
 </style>