灾害预警基金系统页面布局样式修改-提交

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

@@ -234,8 +234,8 @@ onUnmounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
 

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

@@ -333,7 +333,7 @@
     width: 100%;
     // height: calc(100vh - 70px);
     height: 875px;
-    margin-top: 50px;
+    // margin-top: 50px;
 
     .moduleArea {
       width: 100%;

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

@@ -180,8 +180,8 @@ onUnmounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
   .dustWarn-left-box {

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

@@ -302,8 +302,8 @@ onUnmounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px ;
   background: #282828;
 
   .composite-left-box {

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

@@ -154,8 +154,8 @@ onUnmounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
   

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

@@ -165,8 +165,8 @@ onUnmounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
   .composite-left-box {

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

@@ -24,34 +24,19 @@
           <!-- 左中区域 -->
           <div class="left-c">
             <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
-              <workJc
-                :heightT="'30%'"
-                :heightB="'70%'"
-                :echartData="echartDataWork"
-                :cardData="cardData"
-              />
+              <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"
-              @change-select="changeSelect"
-            >
+            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
+              :selectValue="areaCodeMb" :selectList="selectListMb" @change-select="changeSelect">
               <emptyJc :emptyData="emptyData" />
             </DanelBd>
           </div>
           <!-- 左底部区域 -->
           <div class="left-f">
-            <DanelBd
-              :moduleName="'GIS重点区域风险监测'"
-              :contentStyle="{ contentH: '0px' }"
-              commonTitle="switchs"
-            />
+            <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
           </div>
         </div>
       </transition>
@@ -61,24 +46,13 @@
           <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>
+          <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
         </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"
-              @change-select="changeSelect"
-            >
+            <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect"
+              :contentStyle="{ contentH: '289px' }" commonTitle="selected" :selectList="selectList"
+              @change-select="changeSelect">
               <fiberBunbleJc :bunbleData="bunbleData" />
             </DanelBd>
           </div>
@@ -95,40 +69,22 @@
           </div>
           <!-- 右中区域 -->
           <div class="right-c">
-            <DanelBd
-              :moduleName="'带式输送机防灭火监控系统'"
-              :contentStyle="{ contentH: '180px' }"
-              commonTitle="selected"
-              :selectList="selectListDs"
-              :selectValue="dsCode"
-              @change-select="changeSelect"
-            >
+            <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+              :selectList="selectListDs" :selectValue="dsCode" @change-select="changeSelect">
               <outFireJc :outFireData="outFireData" />
             </DanelBd>
           </div>
           <!-- 右下区域 -->
           <div class="right-b">
-            <DanelBd
-              :moduleName="'变电硐室防灭火监控系统'"
-              :contentStyle="{ contentH: '180px' }"
-              commonTitle="selected"
-              :selectList="selectListBd"
-              :selectValue="pointCodeBd"
-              @change-select="changeSelect"
-            >
+            <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+              :selectList="selectListBd" :selectValue="pointCodeBd" @change-select="changeSelect">
               <substationJc :echartDatas="echartDatas" />
             </DanelBd>
           </div>
           <!-- 右底部区域 -->
           <div class="right-f">
-            <DanelBd
-              :moduleName="'安全监控系统'"
-              :contentStyle="{ contentH: '215px' }"
-              commonTitle="selected"
-              :selectList="selectListAq"
-              :selectValue="pointCodeAq"
-              @change-select="changeSelect"
-            >
+            <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
+              :selectList="selectListAq" :selectValue="pointCodeAq" @change-select="changeSelect">
               <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
             </DanelBd>
           </div>
@@ -139,680 +95,680 @@
 </template>
 
 <script setup lang="ts">
-  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';
-  import fiberBunbleJc from './components/fiberBunbleJc.vue';
-  import systemJc from './components/systemJc.vue';
-  import outFireJc from './components/outFireJc.vue';
-  import substationJc from './components/substationJc.vue';
-  import safetyJc from './components/safetyJc.vue';
-  import {
-    getFireAreaInfo,
-    getMbRealData,
-    getSgjcPointInfo,
-    getSgjcRealDataByPointCode,
-    getInfosByAreaCode,
-    getGxcwHistoryDataByPointCode,
-    getZcHfWd,
-    getHeadingFace,
-    getMainTrafficYw,
-    getDsWd,
-  } from './firehome.api';
-
-  let moduleSelect = reactive([
-    { label: '工作面束管监测' },
-    // { label: '工作面光钎监测' },
-  ]);
-
-  //是否显示左侧区域和右侧区域
-  let isShow = ref(true);
-
-  let areaCode = ref('');
-  let pointCode = ref('');
-  let areaCodeMb = ref('');
-  let dsCode = ref('');
-  let areaCodeBd = ref('');
-  let pointCodeBd = ref('');
-  let pointCodeAq = ref('one');
-
-  //工作面风险监测数据
-  let echartDataWork = reactive<any[]>([]);
-  let cardData = reactive<any[]>([]);
-  let selectList = reactive<any[]>([]);
-  let bunbleData = reactive<any[]>([]);
-
-  //密闭采空区数据
-  let selectListMb = reactive<any[]>([]);
-  let emptyData = reactive<any>([]);
-
-  //带式输送机防灭火监控系统
-  let selectListDs = reactive<any[]>([]);
-  let outFireData = reactive<any[]>([]);
-
-  //变电硐室
-  let selectListBd = reactive<any[]>([]);
-  let echartDatas = reactive({
-    xData: [],
-    yData: [],
-    yData1: [],
-  });
-
-  //安全监控
-  let selectListAq = reactive<any[]>([
-    { label: '综放工作面传感器监测', value: 'one' },
-    { label: '掘进工作面传感器监测', value: 'two' },
-    { label: '主运输系统传感器监测', value: 'three' },
-    { label: '机电硐室及配电点传感器监测', value: 'four' },
-  ]);
-  let safetyHead = reactive<any[]>([]);
-  let safetyList = reactive<any[]>([]);
-
-  //隐藏和显示左右侧区域
-  function getScalc() {
-    isShow.value = !isShow.value;
-  }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor() {
-    timer = setTimeout(async () => {
-      //工作面
-      await getFireAreaInfoList();
-      //密闭
-      await getFireAreaInfoListMb();
-      //带式
-      await getFireAreaInfoListDs();
-      //变电硐室
-      await getFireAreaInfoListBd();
-      //安全监控
-      await getTableList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    }, 5000);
-  }
-
-  //下拉选项切换
-  function changeSelect(data) {
-    console.log(data, '下拉------');
-    switch (data.label) {
-      case '密闭采空区监测系统':
-        areaCodeMb.value = data.value;
-        getMbRealDataList();
-        break;
-      case '工作面束管监测':
-        pointCode.value = data.value;
-        getSgjcRealDataByPointCodeList();
-        break;
-      case '带式输送机防灭火监控系统':
-        dsCode.value = data.value;
-        getFireAreaInfoListDs();
-        break;
-      case '变电硐室防灭火监控系统':
-        pointCodeBd.value = data.value;
-        getGxcwHistoryDataByPointCodeList();
-        break;
-      case '安全监控系统':
-        pointCodeAq.value = data.value;
-        getTableList();
-        break;
+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';
+import fiberBunbleJc from './components/fiberBunbleJc.vue';
+import systemJc from './components/systemJc.vue';
+import outFireJc from './components/outFireJc.vue';
+import substationJc from './components/substationJc.vue';
+import safetyJc from './components/safetyJc.vue';
+import {
+  getFireAreaInfo,
+  getMbRealData,
+  getSgjcPointInfo,
+  getSgjcRealDataByPointCode,
+  getInfosByAreaCode,
+  getGxcwHistoryDataByPointCode,
+  getZcHfWd,
+  getHeadingFace,
+  getMainTrafficYw,
+  getDsWd,
+} from './firehome.api';
+
+let moduleSelect = reactive([
+  { label: '工作面束管监测' },
+  // { label: '工作面光钎监测' },
+]);
+
+//是否显示左侧区域和右侧区域
+let isShow = ref(true);
+
+let areaCode = ref('');
+let pointCode = ref('');
+let areaCodeMb = ref('');
+let dsCode = ref('');
+let areaCodeBd = ref('');
+let pointCodeBd = ref('');
+let pointCodeAq = ref('one');
+
+//工作面风险监测数据
+let echartDataWork = reactive<any[]>([]);
+let cardData = reactive<any[]>([]);
+let selectList = reactive<any[]>([]);
+let bunbleData = reactive<any[]>([]);
+
+//密闭采空区数据
+let selectListMb = reactive<any[]>([]);
+let emptyData = reactive<any>([]);
+
+//带式输送机防灭火监控系统
+let selectListDs = reactive<any[]>([]);
+let outFireData = reactive<any[]>([]);
+
+//变电硐室
+let selectListBd = reactive<any[]>([]);
+let echartDatas = reactive({
+  xData: [],
+  yData: [],
+  yData1: [],
+});
+
+//安全监控
+let selectListAq = reactive<any[]>([
+  { label: '综放工作面传感器监测', value: 'one' },
+  { label: '掘进工作面传感器监测', value: 'two' },
+  { label: '主运输系统传感器监测', value: 'three' },
+  { label: '机电硐室及配电点传感器监测', value: 'four' },
+]);
+let safetyHead = reactive<any[]>([]);
+let safetyList = reactive<any[]>([]);
+
+//隐藏和显示左右侧区域
+function getScalc() {
+  isShow.value = !isShow.value;
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(async () => {
+    //工作面
+    await getFireAreaInfoList();
+    //密闭
+    await getFireAreaInfoListMb();
+    //带式
+    await getFireAreaInfoListDs();
+    //变电硐室
+    await getFireAreaInfoListBd();
+    //安全监控
+    await getTableList();
+    if (timer) {
+      timer = null;
     }
+    getMonitor();
+  }, 5000);
+}
+
+//下拉选项切换
+function changeSelect(data) {
+  console.log(data, '下拉------');
+  switch (data.label) {
+    case '密闭采空区监测系统':
+      areaCodeMb.value = data.value;
+      getMbRealDataList();
+      break;
+    case '工作面束管监测':
+      pointCode.value = data.value;
+      getSgjcRealDataByPointCodeList();
+      break;
+    case '带式输送机防灭火监控系统':
+      dsCode.value = data.value;
+      getFireAreaInfoListDs();
+      break;
+    case '变电硐室防灭火监控系统':
+      pointCodeBd.value = data.value;
+      getGxcwHistoryDataByPointCodeList();
+      break;
+    case '安全监控系统':
+      pointCodeAq.value = data.value;
+      getTableList();
+      break;
   }
-
-  //获取工作面风险监测数据
-  async function getFireAreaInfoList() {
-    let res = await getFireAreaInfo({ fireCauseType: 2 });
-
-    if (res.length != 0) {
-      echartDataWork.length = 0;
-      cardData.length = 0;
-      let data = res.filter((v) => v.areaType == 2);
-      data.forEach((el) => {
-        cardData.push({
-          title: '风险',
-          val:
-            el.warningLevel == 1
-              ? '低'
-              : el.warningLevel == 2
-                ? '中'
-                : el.warningLevel == 3
-                  ? '较大'
-                  : el.warningLevel == 4
-                    ? '重大'
-                    : '--',
-          label: el.areaName,
-          title1: '温度最大值',
-          val1: el.infoTypeTwo.maxTemperature,
-        });
+}
+
+//获取工作面风险监测数据
+async function getFireAreaInfoList() {
+  let res = await getFireAreaInfo({ fireCauseType: 2 });
+
+  if (res.length != 0) {
+    echartDataWork.length = 0;
+    cardData.length = 0;
+    let data = res.filter((v) => v.areaType == 2);
+    data.forEach((el) => {
+      cardData.push({
+        title: '风险',
+        val:
+          el.warningLevel == 1
+            ? '低'
+            : el.warningLevel == 2
+              ? '中'
+              : el.warningLevel == 3
+                ? '较大'
+                : el.warningLevel == 4
+                  ? '重大'
+                  : '--',
+        label: el.areaName,
+        title1: '温度最大值',
+        val1: el.infoTypeTwo.maxTemperature,
       });
-      areaCode.value = data[0].areaCode;
-      //工作面束管监测
-      getSgjcPointInfoList();
-    }
+    });
+    areaCode.value = data[0].areaCode;
+    //工作面束管监测
+    getSgjcPointInfoList();
   }
+}
+
+//获取密闭下拉列表
+async function getFireAreaInfoListMb() {
+  let res = await getFireAreaInfo({ fireCauseType: 2 });
+  console.log(res, '密闭数据');
+  if (res.length != 0) {
+    selectListMb.length = 0;
+    let dataMb = res.filter((m) => m.areaType == 1);
+    dataMb.forEach((m) => {
+      selectListMb.push({ label: m.areaName, value: m.areaCode });
+    });
 
-  //获取密闭下拉列表
-  async function getFireAreaInfoListMb() {
-    let res = await getFireAreaInfo({ fireCauseType: 2 });
-    console.log(res, '密闭数据');
-    if (res.length != 0) {
-      selectListMb.length = 0;
-      let dataMb = res.filter((m) => m.areaType == 1);
-      dataMb.forEach((m) => {
-        selectListMb.push({ label: m.areaName, value: m.areaCode });
-      });
-
-      areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value'];
-      //获取密闭监测实时信息
-      getMbRealDataList();
-    }
+    areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value'];
+    //获取密闭监测实时信息
+    getMbRealDataList();
   }
-  //获取密闭监测实时信息
-  async function getMbRealDataList() {
-    let res = await getMbRealData({ areaCode: areaCodeMb.value });
-    console.log(res, '密闭监测实时信息');
-    emptyData.length = 0;
+}
+//获取密闭监测实时信息
+async function getMbRealDataList() {
+  let res = await getMbRealData({ areaCode: areaCodeMb.value });
+  console.log(res, '密闭监测实时信息');
+  emptyData.length = 0;
+  res.forEach((el) => {
+    emptyData.push({ label: el.name, val: el.currentValue, unit: el.unit });
+  });
+}
+
+//工作面束管监测
+async function getSgjcPointInfoList() {
+  let res = await getSgjcPointInfo({ areaCode: areaCode.value });
+  console.log(res, '工作面束管列表---');
+  if (res.length != 0) {
+    selectList.length = 0;
     res.forEach((el) => {
-      emptyData.push({ label: el.name, val: el.currentValue, unit: el.unit });
+      selectList.push({ label: el.pointName, value: el.pointCode });
     });
+    pointCode.value = pointCode.value ? pointCode.value : selectList[0]['value'];
+    //获取工作面束管测点实时数据
+    getSgjcRealDataByPointCodeList();
   }
-
-  //工作面束管监测
-  async function getSgjcPointInfoList() {
-    let res = await getSgjcPointInfo({ areaCode: areaCode.value });
-    console.log(res, '工作面束管列表---');
-    if (res.length != 0) {
-      selectList.length = 0;
-      res.forEach((el) => {
-        selectList.push({ label: el.pointName, value: el.pointCode });
-      });
-      pointCode.value = pointCode.value ? pointCode.value : selectList[0]['value'];
-      //获取工作面束管测点实时数据
-      getSgjcRealDataByPointCodeList();
-    }
-  }
-  //获取工作面束管测点实时数据
-  async function getSgjcRealDataByPointCodeList() {
-    let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value });
-    console.log(res, '束管测点实时数据---');
-    if (res.length != 0) {
-      bunbleData.length = 0;
-      res.forEach((el) => {
-        bunbleData.push({
-          type: el.name,
-          label: '最大浓度',
-          val: el.currentValue,
-          label1: '位置',
-          val1: el.position,
-          label2: '时间',
-          val2: el.time,
-          unit: el.unit,
-        });
+}
+//获取工作面束管测点实时数据
+async function getSgjcRealDataByPointCodeList() {
+  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value });
+  console.log(res, '束管测点实时数据---');
+  if (res.length != 0) {
+    bunbleData.length = 0;
+    res.forEach((el) => {
+      bunbleData.push({
+        type: el.name,
+        label: '最大浓度',
+        val: el.currentValue,
+        label1: '位置',
+        val1: el.position,
+        label2: '时间',
+        val2: el.time,
+        unit: el.unit,
       });
-    }
+    });
   }
+}
+
+//带式输送机防灭火监控系统
+async function getFireAreaInfoListDs() {
+  const res = await getFireAreaInfo({});
+  if (res.length != 0) {
+    selectListDs.length = 0;
+    outFireData.length = 0;
+    let dataDs = res.filter((m) => m.areaType == 4);
+    console.log(dataDs, '带式输送机防灭火');
+    dataDs.forEach((el) => {
+      selectListDs.push({ label: el.areaName, value: el.areaName });
+    });
 
-  //带式输送机防灭火监控系统
-  async function getFireAreaInfoListDs() {
-    const res = await getFireAreaInfo({});
-    if (res.length != 0) {
-      selectListDs.length = 0;
-      outFireData.length = 0;
-      let dataDs = res.filter((m) => m.areaType == 4);
-      console.log(dataDs, '带式输送机防灭火');
-      dataDs.forEach((el) => {
-        selectListDs.push({ label: el.areaName, value: el.areaName });
-      });
-
-      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: '开关量' },
-      );
-    }
+    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: '开关量' },
+    );
   }
-
-  //变电硐室防灭火监控系统
-  async function getFireAreaInfoListBd() {
-    const res = await getFireAreaInfo({});
-    if (res.length != 0) {
-      let dataBd = res.filter((m) => m.areaType == 5);
-      console.log(dataBd, '变电硐室-----');
-      areaCodeBd.value = dataBd[0].areaCode;
-      //获取光钎条数及测点编号
-      getInfosByAreaCodeList();
-    }
+}
+
+//变电硐室防灭火监控系统
+async function getFireAreaInfoListBd() {
+  const res = await getFireAreaInfo({});
+  if (res.length != 0) {
+    let dataBd = res.filter((m) => m.areaType == 5);
+    console.log(dataBd, '变电硐室-----');
+    areaCodeBd.value = dataBd[0].areaCode;
+    //获取光钎条数及测点编号
+    getInfosByAreaCodeList();
   }
-  //获取光钎条数及测点编号
-  async function getInfosByAreaCodeList() {
-    let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value });
-    console.log(res, 'res000999');
-    if (res.length != 0) {
-      selectListBd.length = 0;
-      res.forEach((el) => {
-        selectListBd.push({
-          label: el.pointName,
-          value: el.pointCode,
-        });
+}
+//获取光钎条数及测点编号
+async function getInfosByAreaCodeList() {
+  let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value });
+  console.log(res, 'res000999');
+  if (res.length != 0) {
+    selectListBd.length = 0;
+    res.forEach((el) => {
+      selectListBd.push({
+        label: el.pointName,
+        value: el.pointCode,
       });
-      pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value;
-      //获取光钎测温图表数据
-      getGxcwHistoryDataByPointCodeList();
-    }
-  }
-
-  //获取光钎测温图表数据
-  async function getGxcwHistoryDataByPointCodeList() {
-    let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value });
-    console.log(res, '光钎测温图表数据-------');
-    echartDatas.xData.length = 0;
-    echartDatas.yData.length = 0;
-    echartDatas.yData1.length = 0;
-    res.time.forEach((el) => {
-      echartDatas.xData.push(el);
-    });
-    res.maxValue.forEach((el) => {
-      echartDatas.yData.push(el);
-    });
-    res.minValue.forEach((el) => {
-      echartDatas.yData1.push(el);
     });
+    pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value;
+    //获取光钎测温图表数据
+    getGxcwHistoryDataByPointCodeList();
   }
-
-  //获取安全监控列表数据
-  function getTableList() {
-    switch (pointCodeAq.value) {
-      case 'one':
-        getZcHfWdList();
-        break;
-      case 'two':
-        getHeadingFaceList();
-        break;
-      case 'three':
-        getMainTrafficYwList();
-        break;
-      case 'four':
-        getDsWdList();
-        break;
-      default:
-        getZcHfWdList();
-        break;
-    }
+}
+
+//获取光钎测温图表数据
+async function getGxcwHistoryDataByPointCodeList() {
+  let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value });
+  console.log(res, '光钎测温图表数据-------');
+  echartDatas.xData.length = 0;
+  echartDatas.yData.length = 0;
+  echartDatas.yData1.length = 0;
+  res.time.forEach((el) => {
+    echartDatas.xData.push(el);
+  });
+  res.maxValue.forEach((el) => {
+    echartDatas.yData.push(el);
+  });
+  res.minValue.forEach((el) => {
+    echartDatas.yData1.push(el);
+  });
+}
+
+//获取安全监控列表数据
+function getTableList() {
+  switch (pointCodeAq.value) {
+    case 'one':
+      getZcHfWdList();
+      break;
+    case 'two':
+      getHeadingFaceList();
+      break;
+    case 'three':
+      getMainTrafficYwList();
+      break;
+    case 'four':
+      getDsWdList();
+      break;
+    default:
+      getZcHfWdList();
+      break;
   }
-  //获取综放工作面传感器监测数据
-  async function getZcHfWdList() {
-    let res = await getZcHfWd();
-    console.log(res, '综放工作面传感器监测数据');
-    safetyHead.length = 0;
-    safetyList.length = 0;
-    safetyHead.push(
-      { label: '测点位置' },
-      { label: '温度(°C)' },
-      { label: '预警级别' },
-      { label: '时间' },
-    );
-    if (res.length != 0) {
-      res.forEach((el) => {
-        safetyList.push({
-          address: el.nodePlacement,
-          temp: el.detectValue + '',
-          grade: el.warningMsg,
-          time: el.dateTime,
-        });
+}
+//获取综放工作面传感器监测数据
+async function getZcHfWdList() {
+  let res = await getZcHfWd();
+  console.log(res, '综放工作面传感器监测数据');
+  safetyHead.length = 0;
+  safetyList.length = 0;
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' },
+  );
+  if (res.length != 0) {
+    res.forEach((el) => {
+      safetyList.push({
+        address: el.nodePlacement,
+        temp: el.detectValue + '',
+        grade: el.warningMsg,
+        time: el.dateTime,
       });
-    }
+    });
   }
-
-  //获取掘进工作面传感器监测数据
-  async function getHeadingFaceList() {
-    let res = await getHeadingFace();
-    safetyHead.length = 0;
-    safetyList.length = 0;
-    safetyHead.push(
-      { label: '测点位置' },
-      { label: 'CO浓度(%)' },
-      { label: '温度' },
-      { label: '预警级别' },
-      { label: '时间' },
-    );
-    console.log(res, '掘进工作面传感器监测数据');
-    if (res.length != 0) {
-      res.forEach((el) => {
-        safetyList.push({
-          address: el.name,
-          nd: el.co + '',
-          temp: el.wd + '',
-          grade: el.warningMsg,
-          time: el.dateTime,
-        });
+}
+
+//获取掘进工作面传感器监测数据
+async function getHeadingFaceList() {
+  let res = await getHeadingFace();
+  safetyHead.length = 0;
+  safetyList.length = 0;
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: 'CO浓度(%)' },
+    { label: '温度' },
+    { label: '预警级别' },
+    { label: '时间' },
+  );
+  console.log(res, '掘进工作面传感器监测数据');
+  if (res.length != 0) {
+    res.forEach((el) => {
+      safetyList.push({
+        address: el.name,
+        nd: el.co + '',
+        temp: el.wd + '',
+        grade: el.warningMsg,
+        time: el.dateTime,
       });
-    }
+    });
   }
-  //获取运输系统烟雾传感器数据
-  async function getMainTrafficYwList() {
-    let res = await getMainTrafficYw();
-    safetyHead.length = 0;
-    safetyList.length = 0;
-    safetyHead.push(
-      { label: '测点位置' },
-      { label: '温度(°C)' },
-      { label: '预警级别' },
-      { label: '时间' },
-    );
-    console.log(res, '运输系统烟雾传感器数据');
-    if (res.length != 0) {
-      res.forEach((el) => {
-        safetyList.push({
-          address: el.nodePlacement,
-          temp: el.detectValue + '',
-          grade: el.warningMsg,
-          time: el.dateTime,
-        });
+}
+//获取运输系统烟雾传感器数据
+async function getMainTrafficYwList() {
+  let res = await getMainTrafficYw();
+  safetyHead.length = 0;
+  safetyList.length = 0;
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' },
+  );
+  console.log(res, '运输系统烟雾传感器数据');
+  if (res.length != 0) {
+    res.forEach((el) => {
+      safetyList.push({
+        address: el.nodePlacement,
+        temp: el.detectValue + '',
+        grade: el.warningMsg,
+        time: el.dateTime,
       });
-    }
+    });
   }
-
-  //获取机电硐室传感器数据
-  async function getDsWdList() {
-    let res = await getDsWd();
-    console.log(res, '机电硐室传感器数据');
-    safetyHead.length = 0;
-    safetyList.length = 0;
-    safetyHead.push(
-      { label: '测点位置' },
-      { label: '温度(°C)' },
-      { label: '预警级别' },
-      { label: '时间' },
-    );
-    if (res.length != 0) {
-      res.forEach((el) => {
-        safetyList.push({
-          address: el.nodePlacement,
-          temp: el.detectValue + '',
-          grade: el.warningMsg,
-          time: el.dateTime,
-        });
+}
+
+//获取机电硐室传感器数据
+async function getDsWdList() {
+  let res = await getDsWd();
+  console.log(res, '机电硐室传感器数据');
+  safetyHead.length = 0;
+  safetyList.length = 0;
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' },
+  );
+  if (res.length != 0) {
+    res.forEach((el) => {
+      safetyList.push({
+        address: el.nodePlacement,
+        temp: el.detectValue + '',
+        grade: el.warningMsg,
+        time: el.dateTime,
       });
-    }
+    });
   }
-
-  onMounted(() => {
-    //工作面
-    getFireAreaInfoList();
-    //密闭
-    getFireAreaInfoListMb();
-    //带式
-    getFireAreaInfoListDs();
-    //变电硐室
-    getFireAreaInfoListBd();
-    //安全监控
-    getTableList();
-    getMonitor();
-  });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-  });
+}
+
+onMounted(() => {
+  //工作面
+  getFireAreaInfoList();
+  //密闭
+  getFireAreaInfoListMb();
+  //带式
+  getFireAreaInfoListDs();
+  //变电硐室
+  getFireAreaInfoListBd();
+  //安全监控
+  getTableList();
+  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');
+}
+
+.fireHome {
+  position: relative;
+  // width: calc(100% - 20px);
+  // height: calc(100vh - 82px);
+  width: 100%;
+  // height: calc(100vh - 70px);
+  height: 875px;
+  // margin-top: 50px;
+
+  .moduleArea {
+    width: 100%;
+    height: 100%;
   }
 
-  .fireHome {
-    position: relative;
-    // width: calc(100% - 20px);
-    // height: calc(100vh - 82px);
+  .main-container {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    justify-content: space-between;
     width: 100%;
-    // height: calc(100vh - 70px);
-    height: 875px;
-    margin-top: 50px;
+    height: 100%;
+    padding: 15px 10px;
 
-    .moduleArea {
-      width: 100%;
-      height: 100%;
-    }
-
-    .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;
+      .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%;
+
+        .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;
-            }
-
-            .tcontent-c {
-              display: flex;
-              flex: 3;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-            }
+            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;
-            }
+          .tcontent-c {
+            display: flex;
+            flex: 3;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
           }
-        }
 
-        .left-c {
-          width: 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;
+          }
         }
+      }
 
-        .left-b {
-          width: 100%;
-        }
+      .left-c {
+        width: 100%;
+      }
 
-        .left-f {
-          width: 100%;
-        }
+      .left-b {
+        width: 100%;
       }
 
-      .center-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: calc(100% - 814px);
+      .left-f {
+        width: 100%;
+      }
+    }
 
-        .center-t {
-          position: relative;
-          width: 100%;
-          height: 60%;
-          margin-bottom: 15px;
-          overflow: hidden;
+    .center-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 814px);
 
-          .center-scalc {
+      .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: 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%);
-              }
+            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;
+      .center-b {
         width: 100%;
+        height: calc(40% - 15px);
+      }
+    }
 
-        .center-t1 {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          margin-bottom: 15px;
-          overflow: hidden;
+    .center-area1 {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
 
-          .center-scalc {
+      .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: 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%);
-              }
+            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;
-        height: 100%;
-        margin-left: 15px;
+    .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-t {
+        width: 100%;
+      }
 
-        .right-c {
-          width: 100%;
-        }
+      .right-c {
+        width: 100%;
+      }
 
-        .right-b {
-          width: 100%;
-        }
+      .right-b {
+        width: 100%;
+      }
 
-        .right-f {
-          width: 100%;
-        }
+      .right-f {
+        width: 100%;
       }
     }
+  }
 
-    /* fade.css */
-    .fade-enter-active {
-      transition: opacity 2.5s ease;
+  /* fade.css */
+  .fade-enter-active {
+    transition: opacity 2.5s ease;
 
-      /* 设置过渡时间为1秒 */
-    }
+    /* 设置过渡时间为1秒 */
+  }
 
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
+  .fade-leave-active {
+    transition: opacity 0.5s ease;
 
-      /* 设置过渡时间为1秒 */
-    }
+    /* 设置过渡时间为1秒 */
+  }
 
-    .fade-enter,
-    .fade-leave-to {
-      opacity: 0;
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
 
-      /* 初始状态为不可见 */
-    }
+    /* 初始状态为不可见 */
   }
+}
 </style>

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

@@ -301,8 +301,8 @@ onMounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
   .fireMon-left-box {

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

@@ -89,8 +89,8 @@ onUnmounted(() => {
   justify-content: center;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
   .zhud-content {

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

@@ -18,8 +18,8 @@
     position: relative;
     width: calc(100% - 20px);
     // height: calc(100vh - 82px);
-    height: 863px;
-    margin: 50px 10px 15px;
+    height: 880px;
+    margin: 0 10px;
     background: #282828;
   }
 </style>

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

@@ -375,8 +375,8 @@ onMounted(() => {
   justify-content: space-between;
   width: calc(100% - 20px);
   // height: calc(100vh - 82px);
-  height: 863px;
-  margin: 50px 10px 15px;
+  height: 880px;
+  margin: 0 10px;
   background: #282828;
 
   .workPlace-left-box {