火灾监测首页及粉尘监测首页bug提交

package.json

@@ -74,6 +74,7 @@
     "unocss": "0.53.4",
     "vditor": "^3.9.4",
     "vite-plugin-qiankun": "^1.0.15",
+    "vodal": "^2.4.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.6.4",
     "vue-json-pretty": "^2.2.4",

src/views/vent/dust/dustHome/index.vue

@@ -5,450 +5,525 @@
       <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>
-            </div>
-            <div class="tcontent-c">
-              <div style="color: #1fb3f7; font-size: 20px">低风险</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="color: #1fb3f7; font-size: 20px">低风险</div>
+              </div>
+              <div class="tcontent-r">粉尘灾害</div>
             </div>
-            <div class="tcontent-r">粉尘灾害</div>
+          </div>
+          <!-- 左中区域 -->
+          <div class="left-c">
+            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '645px' }">
+              <workJc :heightT="'22%'" :heightB="'78%'" :cardData="cardData" :echartData="echartDataWork" />
+            </DanelBd>
+          </div>
+          <!-- 左底部区域 -->
+          <div class="left-f">
+            <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
           </div>
         </div>
-        <!-- 左中区域 -->
-        <div class="left-c">
-          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '645px' }">
-            <workJc
-              :heightT="'22%'"
-              :heightB="'78%'"
-              :cardData="cardData"
-              :echartData="echartDataWork"
-            />
-          </DanelBd>
-        </div>
-        <!-- 左底部区域 -->
-        <div class="left-f">
-          <DanelBd
-            :moduleName="'GIS重点区域风险监测'"
-            :contentStyle="{ contentH: '0px' }"
-            commonTitle="switchs"
-          />
-        </div>
-      </div>
-      <div class="center-area">
-        <div class="center-t">
-          <iframe
-            src="http://82.157.13.146:18224/valkyrja/"
-            width="100%"
-            height="100%"
-            frameborder="0"
-          ></iframe>
+      </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="'综放工作面粉尘浓度'"
-            :contentStyle="{ contentH: '288px' }"
-            :commonTitle="'selected'"
-            :selectList="selectListBd"
-            :selectValue="sensorCode"
-            @change-select="changeSelect"
-          >
+        <transition name="fade" mode="out-in">
+          <div class="center-b" v-if="isShow">
+          <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '288px' }" :commonTitle="'selected'"
+            :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect">
             <multipleDust :echartData="echartData" />
           </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: '305px' }">
-            <dustFallDevice
-              :deviceTotal="deviceTotal"
-              :pwTotal="pwTotal"
-              :interTotal="interTotal"
-              :unInterTotal="unInterTotal"
-              :pwData="pwData"
-            />
+            <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
+              :unInterTotal="unInterTotal" :pwData="pwData" />
           </DanelBd>
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd
-            :moduleName="'粉尘关联指标'"
-            :contentStyle="{ contentH: '250px' }"
-            commonTitle="selected"
-            :selectList="selectListBd"
-            :selectValue="sensorCode"
-            @change-select="changeSelect1"
-          >
+          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '250px' }" commonTitle="selected"
+            :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect1">
             <dustGlzb :dustGlzbData="dustGlzbData" />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd
-            :moduleName="'粉尘静态指标'"
-            :contentStyle="{ contentH: '160px' }"
-            commonTitle="selected"
-            :selectList="selectListJt"
-            :selectValue="jtzbCode"
-          >
+          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '160px' }" commonTitle="selected"
+            :selectList="selectListJt" :selectValue="jtzbCode">
             <dustJtzb />
           </DanelBd>
         </div>
       </div>
+      </transition>
+     
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted,onUnmounted } from 'vue';
-  import DanelBd from '../../common/danelBd.vue';
-  import workJc from '../../fire/fireHome/components/workJc.vue';
-  import multipleDust from './components/multipleDust.vue';
-  import dustFallDevice from './components/dustFallDevice.vue';
-  import dustGlzb from './components/dustGlzb.vue';
-  import dustJtzb from './components/dustJtzb.vue';
-  import {
-    getAreaTypeList,
-    getRealSensorDataByType,
-    getDustInfos,
-    historyAndForecast,
-    realData,
-  } from './dustHome.api';
-
-  //工作面风险监测数据
-  let cardData = reactive<any[]>([]);
-  let echartDataWork = reactive<any[]>([]);
-  let areaType = ref('');
-
-  //综放工作面粉尘浓度数据
-  let selectListBd = reactive<any[]>([]);
-  let sensorCode = ref('');
-  let echartData = reactive({
-    xData: [],
-    yData: [],
-    legendName: ['实时值'],
-  });
-
-  //智能喷雾降尘装置数据
-  let deviceTotal = ref(0);
-  let pwTotal = ref(0);
-  let interTotal = ref(0);
-  let unInterTotal = ref(0);
-  let pwData = reactive<any[]>([]);
-
-  //粉尘关联指标数据
-  let dustGlzbData = reactive<any[]>([
-    { label: '最高温度(℃)', val: 0 },
-    { label: '环境湿度(%)', val: 0 },
-    { label: '风速(m/s)', val: 0 },
-    { label: '采煤机', val: 0 },
-    { label: '水压(Mpa)', val: 0 },
-    { label: '水阀', val: 0 },
-  ]);
-
-  //粉尘静态指标数据
-  let selectListJt=reactive<any[]>([
-    {label:'8#煤层',value:'0'},
-    {label:'9#煤层',value:'1'},
-    {label:'10#煤层',value:'2'},
-  ])
-  let jtzbCode=ref('0')
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor() {
-    timer = setTimeout(async () => {
-      await getFireAreaInfoList();
-      await getRealDataList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    }, 5000);
-  }
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import DanelBd from '../../common/danelBd.vue';
+import workJc from '../../fire/fireHome/components/workJc.vue';
+import multipleDust from './components/multipleDust.vue';
+import dustFallDevice from './components/dustFallDevice.vue';
+import dustGlzb from './components/dustGlzb.vue';
+import dustJtzb from './components/dustJtzb.vue';
+import {
+  getAreaTypeList,
+  getRealSensorDataByType,
+  getDustInfos,
+  historyAndForecast,
+  realData,
+} from './dustHome.api';
 
-  //综放工作面下拉选项切换
-  function changeSelect(data) {
-    console.log(data, '下拉选项-----');
-    sensorCode.value = data.value;
-    getDustInfosList();
-  }
-  //粉尘关联指标下拉选项切换
-  function changeSelect1(data) {
-    console.log(data, '下拉选项-----');
-    let param = selectListBd.filter((v) => v.value == data.value)[0];
-    console.log(param, 'param------');
-    dustGlzbData[0].val = param['temperature'] || '--';
-    dustGlzbData[1].val = param['humidity'] || '--';
-    dustGlzbData[2].val = param['windSpeed'] || '--';
-    dustGlzbData[3].val = '--';
-    dustGlzbData[4].val = param['waterPressure'] || '--';
-    dustGlzbData[5].val = '--';
-  }
-  //获取工作面风险监测数据
-  async function getFireAreaInfoList() {
-    let res = await getAreaTypeList();
-    console.log(res, '工作面风险监测数据');
-    if (res.length != 0) {
-      cardData.length = 0;
-      echartDataWork.length = 0;
-      res.forEach((el) => {
-        cardData.push({
-          title: '风险',
-          val:
-            el.warningLevel == 1
-              ? '低'
-              : el.warningLevel == 2
-                ? '中'
-                : el.warningLevel == 3
-                  ? '较大'
-                  : el.warningLevel == 4
-                    ? '重大'
-                    : '--',
-          label: el.typeName,
-          title1: '最大值',
-          val1: el.maxValue,
-        });
-      });
-      areaType.value = res[0]['areaType'];
-      //获取粉尘选项数据
-      getRealSensorDataByTypeList();
+//是否显示左侧区域和右侧区域
+let isShow = ref(true)
+
+//工作面风险监测数据
+let cardData = reactive<any[]>([]);
+let echartDataWork = reactive<any[]>([]);
+let areaType = ref('');
+
+//综放工作面粉尘浓度数据
+let selectListBd = reactive<any[]>([]);
+let sensorCode = ref('');
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  legendName: ['实时值'],
+});
+
+//智能喷雾降尘装置数据
+let deviceTotal = ref(0);
+let pwTotal = ref(0);
+let interTotal = ref(0);
+let unInterTotal = ref(0);
+let pwData = reactive<any[]>([]);
+
+//粉尘关联指标数据
+let dustGlzbData = reactive<any[]>([
+  { label: '最高温度(℃)', val: 0 },
+  { label: '环境湿度(%)', val: 0 },
+  { label: '风速(m/s)', val: 0 },
+  { label: '采煤机', val: 0 },
+  { label: '水压(Mpa)', val: 0 },
+  { label: '水阀', val: 0 },
+]);
+
+//粉尘静态指标数据
+let selectListJt = reactive<any[]>([
+  { label: '8#煤层', value: '0' },
+  { label: '9#煤层', value: '1' },
+  { label: '10#煤层', value: '2' },
+])
+let jtzbCode = ref('0')
+
+//隐藏和显示左右侧区域
+function getScalc() {
+  isShow.value = !isShow.value
+
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(async () => {
+    await getFireAreaInfoList();
+    await getRealDataList();
+    if (timer) {
+      timer = null;
     }
-  }
-  //获取粉尘选项数据
-  async function getRealSensorDataByTypeList() {
-    let res = await getRealSensorDataByType({ areaType: areaType.value });
-    console.log(res, '下拉选项数据---');
-    if (res.length != 0) {
-      selectListBd.length = 0;
-      res.forEach((el) => {
-        selectListBd.push({
-          label: el.name,
-          value: el.code,
-          temperature: el.temperature,
-          humidity: el.humidity,
-          windSpeed: el.windSpeed,
-          waterPressure: el.waterPressure,
-        });
+    getMonitor();
+  }, 5000);
+}
+
+//综放工作面下拉选项切换
+function changeSelect(data) {
+  console.log(data, '下拉选项-----');
+  sensorCode.value = data.value;
+  getDustInfosList();
+}
+//粉尘关联指标下拉选项切换
+function changeSelect1(data) {
+  console.log(data, '下拉选项-----');
+  let param = selectListBd.filter((v) => v.value == data.value)[0];
+  console.log(param, 'param------');
+  dustGlzbData[0].val = param['temperature'] || '--';
+  dustGlzbData[1].val = param['humidity'] || '--';
+  dustGlzbData[2].val = param['windSpeed'] || '--';
+  dustGlzbData[3].val = '--';
+  dustGlzbData[4].val = param['waterPressure'] || '--';
+  dustGlzbData[5].val = '--';
+}
+//获取工作面风险监测数据
+async function getFireAreaInfoList() {
+  let res = await getAreaTypeList();
+  console.log(res, '工作面风险监测数据');
+  if (res.length != 0) {
+    cardData.length = 0;
+    echartDataWork.length = 0;
+    res.forEach((el) => {
+      cardData.push({
+        title: '风险',
+        val:
+          el.warningLevel == 1
+            ? '低'
+            : el.warningLevel == 2
+              ? '中'
+              : el.warningLevel == 3
+                ? '较大'
+                : el.warningLevel == 4
+                  ? '重大'
+                  : '--',
+        label: el.typeName,
+        title1: '最大值',
+        val1: el.maxValue,
       });
-      sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
-      dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
-      dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
-      dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
-      dustGlzbData[3].val = '--';
-      dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
-      dustGlzbData[5].val = '--';
-
-      //获取单项数据
-      getDustInfosList();
-    }
+    });
+    areaType.value = res[0]['areaType'];
+    //获取粉尘选项数据
+    getRealSensorDataByTypeList();
   }
-  //获取单项数据
-  async function getDustInfosList() {
-    let res = await getDustInfos({ sensorCode: sensorCode.value });
-    console.log(res, '单项数据------');
-    //获取粉尘图表数据
-    historyAndForecastList(res.areaCode);
+}
+//获取粉尘选项数据
+async function getRealSensorDataByTypeList() {
+  let res = await getRealSensorDataByType({ areaType: areaType.value });
+  console.log(res, '下拉选项数据---');
+  if (res.length != 0) {
+    selectListBd.length = 0;
+    res.forEach((el) => {
+      selectListBd.push({
+        label: el.name,
+        value: el.code,
+        temperature: el.temperature,
+        humidity: el.humidity,
+        windSpeed: el.windSpeed,
+        waterPressure: el.waterPressure,
+      });
+    });
+    sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
+    dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
+    dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
+    dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
+    dustGlzbData[3].val = '--';
+    dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
+    dustGlzbData[5].val = '--';
+
+    //获取单项数据
+    getDustInfosList();
   }
+}
+//获取单项数据
+async function getDustInfosList() {
+  let res = await getDustInfos({ sensorCode: sensorCode.value });
+  console.log(res, '单项数据------');
   //获取粉尘图表数据
-  async function historyAndForecastList(params) {
-    let res = await historyAndForecast({ areaCode: params });
-    console.log(res, '粉尘图表数据----');
-    if (res.lineData.length != 0) {
-      echartData.xData.length = 0;
-      echartData.yData.length = 0;
-      res.lineData.forEach((el) => {
-        echartData.xData.push(el.time);
-        echartData.yData.push(el.value || 0);
-      });
-    }
+  historyAndForecastList(res.areaCode);
+}
+//获取粉尘图表数据
+async function historyAndForecastList(params) {
+  let res = await historyAndForecast({ areaCode: params });
+  console.log(res, '粉尘图表数据----');
+  if (res.lineData.length != 0) {
+    echartData.xData.length = 0;
+    echartData.yData.length = 0;
+    res.lineData.forEach((el) => {
+      echartData.xData.push(el.time);
+      echartData.yData.push(el.value || 0);
+    });
   }
+}
 
-  //获取智能喷雾降尘装置数据
-  async function getRealDataList() {
-    let res = await realData({ type: 'DustPw' });
-    console.log(res, '智能喷雾降尘装置数据');
-    if (res.length != 0) {
-      pwData.length = 0;
-      deviceTotal.value = res.length;
-      pwTotal.value = res.filter((v) => v.deviceState == '1').length;
-      interTotal.value = res.filter((v) => v.stateConn == '1').length;
-      unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
-      res.forEach((el, index) => {
-        el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
-        el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
-        pwData.push(el);
-      });
-    }
+//获取智能喷雾降尘装置数据
+async function getRealDataList() {
+  let res = await realData({ type: 'DustPw' });
+  console.log(res, '智能喷雾降尘装置数据');
+  if (res.length != 0) {
+    pwData.length = 0;
+    deviceTotal.value = res.length;
+    pwTotal.value = res.filter((v) => v.deviceState == '1').length;
+    interTotal.value = res.filter((v) => v.stateConn == '1').length;
+    unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
+    res.forEach((el, index) => {
+      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
+      el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
+      pwData.push(el);
+    });
   }
+}
 
-  onMounted(() => {
-    getFireAreaInfoList();
-    getRealDataList();
-    getMonitor();
-  });
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-  });
+onMounted(() => {
+  getFireAreaInfoList();
+  getRealDataList();
+  getMonitor();
+});
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+});
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: douyuFont;
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
+@font-face {
+  font-family: douyuFont;
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.dustHome {
+  position: relative;
+  // width: calc(100% - 20px);
+  // height: calc(100vh - 82px);
+  width: 100%;
+  // height: calc(100vh - 70px);
+  height: 875px;
+  margin-top: 50px;
 
-  .dustHome {
-    position: relative;
-    // width: calc(100% - 20px);
-    // height: calc(100vh - 82px);
+  .moduleArea {
     width: 100%;
-    // height: calc(100vh - 70px);
-    height: 875px;
-    margin-top: 50px;
+    height: 100%;
+  }
 
-    .moduleArea {
-      width: 100%;
-      height: 100%;
-    }
+  .main-container {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    padding: 15px 10px;
 
-    .main-container {
+    .left-area {
       display: flex;
-      position: absolute;
-      top: 0;
-      left: 0;
-      box-sizing: border-box;
+      flex-direction: column;
+      align-items: center;
       justify-content: space-between;
-      width: 100%;
+      // width: 30%;
+      width: 392px;
       height: 100%;
-      padding: 15px 10px;
-
-      .left-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        // width: 30%;
-        width: 392px;
-        height: 100%;
-        margin-right: 15px;
+      margin-right: 15px;
+
+      .left-t {
+        position: relative;
+        width: 100%;
+        // height: 121px;
+        height: 100px;
+        background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .left-t {
-          position: relative;
+        .tcontent-area {
+          display: flex;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: space-around;
           width: 100%;
-          // height: 121px;
-          height: 100px;
-          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
-          background-size: 100% 100%;
+          height: 90px;
+          padding: 0 15px;
+          transform: translate(0, -50%);
 
-          .tcontent-area {
+          .tcontent-l {
             display: flex;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            box-sizing: border-box;
+            flex: 1;
+            flex-direction: column;
             align-items: center;
-            justify-content: space-around;
-            width: 100%;
-            height: 90px;
-            padding: 0 15px;
-            transform: translate(0, -50%);
-
-            .tcontent-l {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 14px;
-              letter-spacing: 2px;
-            }
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 14px;
+            letter-spacing: 2px;
+          }
 
-            .tcontent-c {
-              display: flex;
-              flex: 3;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-            }
+          .tcontent-c {
+            display: flex;
+            flex: 3;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          }
 
-            .tcontent-r {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 14px;
-              letter-spacing: 2px;
-            }
+          .tcontent-r {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 14px;
+            letter-spacing: 2px;
           }
         }
+      }
 
-        .left-c {
-          width: 100%;
-        }
+      .left-c {
+        width: 100%;
+      }
 
-        .left-f {
-          width: 100%;
-        }
+      .left-f {
+        width: 100%;
       }
+    }
 
-      .center-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: calc(100% - 814px);
+    .center-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 814px);
 
-        .center-t {
-          width: 100%;
-          height: 60%;
-          margin-bottom: 15px;
-          overflow: hidden;
-        }
+      .center-t {
+        position: relative;
+        width: 100%;
+        height: 60%;
+        margin-bottom: 15px;
+        overflow: hidden;
 
-        .center-b {
-          width: 100%;
-          height: calc(40% - 15px);
+        .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;
-        align-items: center;
-        justify-content: space-between;
-        // width: 30%;
-        width: 392px;
+      .center-b {
+        width: 100%;
+        height: calc(40% - 15px);
+      }
+    }
+
+    .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-left: 15px;
+        margin-bottom: 15px;
+        overflow: hidden;
 
-        .right-t {
-          width: 100%;
-        }
+        .center-scalc {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          width: 50px;
+          height: 50px;
+          background-color: rgb(30 58 117 / 41.8%);
 
-        .right-c {
-          width: 100%;
-        }
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 37px;
+            height: 41px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
 
-        .right-b {
-          width: 100%;
+            &:hover {
+              width: 43px;
+              height: 47px;
+              background-color: rgb(100 228 185 / 6.27%);
+            }
+          }
         }
       }
+
+    
+    }
+
+    .right-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      // width: 30%;
+      width: 392px;
+      height: 100%;
+      margin-left: 15px;
+
+      .right-t {
+        width: 100%;
+      }
+
+      .right-c {
+        width: 100%;
+      }
+
+      .right-b {
+        width: 100%;
+      }
     }
   }
+
+   /* 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>

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

@@ -5,85 +5,102 @@
       <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>
-            </div>
-            <div class="tcontent-c">
-              <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
-              <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</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-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">
-            <fiberBunbleJc :bunbleData="bunbleData" />
-          </DanelBd>
-        </div>
+        <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">
-        <!-- 右上区域 -->
-        <div class="right-t">
-          <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
-            <systemJc />
-          </DanelBd>
-        </div>
-        <!-- 右中区域 -->
-        <div class="right-c">
-          <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
-            :selectList="selectListDs" :selectValue="dsCode" @changeSelect="changeSelect">
-            <outFireJc :outFireData="outFireData" />
-          </DanelBd>
-        </div>
-        <!-- 右下区域 -->
-        <div class="right-b">
-          <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
-            :selectList="selectListBd" :selectValue="pointCodeBd" @changeSelect="changeSelect">
-            <substationJc :echartDatas="echartDatas" />
-          </DanelBd>
-        </div>
-        <!-- 右底部区域 -->
-        <div class="right-f">
-          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
-            :selectList="selectListAq" :selectValue="pointCodeAq" @changeSelect="changeSelect">
-            <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
-          </DanelBd>
+      <transition name="fade" mode="out-in">
+        <div class="right-area" v-if="isShow">
+          <!-- 右上区域 -->
+          <div class="right-t">
+            <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
+              <systemJc />
+            </DanelBd>
+          </div>
+          <!-- 右中区域 -->
+          <div class="right-c">
+            <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+              :selectList="selectListDs" :selectValue="dsCode" @changeSelect="changeSelect">
+              <outFireJc :outFireData="outFireData" />
+            </DanelBd>
+          </div>
+          <!-- 右下区域 -->
+          <div class="right-b">
+            <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+              :selectList="selectListBd" :selectValue="pointCodeBd" @changeSelect="changeSelect">
+              <substationJc :echartDatas="echartDatas" />
+            </DanelBd>
+          </div>
+          <!-- 右底部区域 -->
+          <div class="right-f">
+            <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
+              :selectList="selectListAq" :selectValue="pointCodeAq" @changeSelect="changeSelect">
+              <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
+            </DanelBd>
+          </div>
         </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 Vodal from 'vodal'
 import DanelBd from '../../common/danelBd.vue';
 import workJc from './components/workJc.vue';
 import emptyJc from './components/emptyJc.vue';
@@ -100,6 +117,9 @@ let moduleSelect = reactive([
 
 ])
 
+
+//是否显示左侧区域和右侧区域
+let isShow = ref(true)
 let areaCode = ref('')
 let pointCode = ref('')
 let areaCodeMb = ref('')
@@ -140,6 +160,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 +253,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 +266,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 +301,7 @@ async function getSgjcRealDataByPointCodeList() {
         val1: el.position,
         label2: '时间',
         val2: el.time,
-        unit:el.unit
+        unit: el.unit
       })
     })
   }
@@ -294,16 +320,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 +357,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 +624,82 @@ 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 {
+        width: 100%;
+        height: calc(40% - 15px);
+      }
+    }
+
+    .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%);
+            }
+          }
+        }
       }
 
       .center-b {
@@ -637,5 +735,25 @@ onUnmounted(() => {
       }
     }
   }
+
+  /* fade.css */
+  .fade-enter-active {
+    transition:opacity 2.5s linear;
+
+    /* 设置过渡时间为1秒 */
+  }
+
+  .fade-leave-active {
+    transition:  opacity 0.5s linear;
+
+    /* 设置过渡时间为1秒 */
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+
+    /* 初始状态为不可见 */
+  }
 }
 </style>