Browse Source

echarts预警管控最大值修改-提交

lxh 4 tháng trước cách đây
mục cha
commit
9cabb552f4

+ 538 - 525
src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -8,7 +8,8 @@
             <!-- <div class="text-value">{{ topContent.position }}</div> -->
             <div class="text-value">
               <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
-                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
+                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
+                  }}</a-select-option>
               </a-select>
             </div>
           </div>
@@ -26,14 +27,11 @@
       <div class="box-container">
         <div class="text1">
           <span>预警等级 : </span>
-          <span
-            :class="{
-              value1: topContent.warnLevel == '绿色预警',
-              value2: topContent.warnLevel == '黄色预警',
-              value3: topContent.warnLevel == '红色预警',
-            }"
-            >{{ topContent.warnLevel || '-' }}</span
-          >
+          <span :class="{
+            value1: topContent.warnLevel == '绿色预警',
+            value2: topContent.warnLevel == '黄色预警',
+            value3: topContent.warnLevel == '红色预警',
+          }">{{ topContent.warnLevel || '-' }}</span>
         </div>
         <div class="text1">
           <span>煤自燃阶段 : </span>
@@ -44,12 +42,8 @@
     <div class="content">
       <div class="title-b">采空区密闭参数</div>
       <div class="card-btn">
-        <div
-          :class="activeIndex == index ? 'box-container1' : 'box-container'"
-          v-for="(item, index) in mbList"
-          :key="index"
-          @click="btnClick(item, index)"
-        >
+        <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
+          :key="index" @click="btnClick(item, index)">
           <div class="box-label">
             <span> {{ item.label }}</span>
             <span>{{ item.dw }}</span>
@@ -71,23 +65,16 @@
       <div class="echart-box">
         <div class="left-echartbox">
           <div class="title-f">
-            <div class="title-text"
-              >{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span></div
-            >
+            <div class="title-text">{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : ''
+                }}</span></div>
           </div>
           <div class="echarts-box">
-            <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+            <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" />
           </div>
         </div>
         <div class="right-echartbox">
-          <warnZb
-            :widthV="widthV"
-            :heightV="heightV"
-            :coordDw="coordDw"
-            :widthCanvas="widthCanvas"
-            :heightCanvas="heightCanvas"
-            :warnLevel="topContent.warnLevel"
-          />
+          <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
+            :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel" />
         </div>
       </div>
     </div>
@@ -95,587 +82,613 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-  import echartLine1 from './echartLine1.vue';
-  import warnZb from './warnZb.vue';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  let selectSj = ref<any[]>([]);
-  let selectData = ref('');
-  let selectList = reactive<any[]>([]);
-  let widthV = ref('75%');
-  let heightV = ref('80%');
-  let coordDw = ref<any[]>([47, 95]);
-  let widthCanvas = ref(562);
-  let heightCanvas = ref(316);
-  //设备连接状态
-  let netStatus = ref(0);
-  //密闭-顶部区域数据
-  let topContent = reactive({
-    temperature: 0,
-    position: '',
-    time: '',
-    warnLevel: '',
-    smokeJd: '',
+import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+import echartLine1 from './echartLine1.vue';
+import warnZb from './warnZb.vue';
+
+let props = defineProps({
+  listData: Object,
+});
+
+let maxY = ref<any>(0)
+let selectSj = ref<any[]>([]);
+let selectData = ref('');
+let selectList = reactive<any[]>([]);
+let widthV = ref('75%');
+let heightV = ref('80%');
+let coordDw = ref<any[]>([47, 95]);
+let widthCanvas = ref(562);
+let heightCanvas = ref(316);
+//设备连接状态
+let netStatus = ref(0);
+//密闭-顶部区域数据
+let topContent = reactive({
+  temperature: 0,
+  position: '',
+  time: '',
+  warnLevel: '',
+  smokeJd: '',
+});
+//密闭参数列表
+let mbList = reactive([
+  {
+    label: 'O₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CO₂',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'CH₄',
+    dw: '(%)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₂',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+  {
+    label: 'C₂H₄',
+    dw: '(ppm)',
+    label1: '浓度',
+    label2: '时间',
+    label3: '位置',
+    nd: '0',
+    time1: '',
+    address: '',
+  },
+]);
+
+//当前密闭参数激活选项
+let activeIndex = ref(0);
+//当前激活密闭参数类型
+let type = ref('O₂');
+
+let echartDataSg1 = reactive({
+  xData: [],
+  yData: [],
+  lengedData: 'O₂',
+  lengedDataName: '(%)',
+});
+let echartDataSgList = reactive<any[]>([]);
+
+function getmaxY() {
+  maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
+    return acr > cur ? acr : cur;
   });
-  //密闭参数列表
-  let mbList = reactive([
-    {
-      label: 'O₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CH₄',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₂',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₄',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-  ]);
-
-  //当前密闭参数激活选项
-  let activeIndex = ref(0);
-  //当前激活密闭参数类型
-  let type = ref('O₂');
-
-  let echartDataSg1 = reactive({
-    xData: [],
-    yData: [],
-    lengedData: 'O₂',
-    lengedDataName: '(%)',
+  maxY.value = maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'))
+  if (maxY.value.length < 2) {
+    maxY.value = 10
+  } else if (maxY.value.length < 3) {
+    maxY.value = (Number(maxY.value[0]) + 1) * 10
+  } else if (maxY.value.length < 4) {
+    maxY.value = (Number(maxY.value[0]) + 1) * 100
+  } else if (maxY.value.length < 5) {
+    maxY.value = (Number(maxY.value[0]) + 1) * 1000
+  } else if (maxY.value.length < 6) {
+    maxY.value = (Number(maxYq.value[0]) + 1) * 10000
+  }
+}
+//密闭参数选项切换
+function btnClick(item, ind) {
+  activeIndex.value = ind;
+  type.value = item.label;
+  echartDataSg1.xData.length = 0;
+  echartDataSg1.yData.length = 0;
+  echartDataSg1.lengedData = type.value;
+  echartDataSg1.lengedDataName = item.dw;
+
+  switch (type.value) {
+    case 'O₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.o2val);
+      });
+      getmaxY()
+      break;
+    case 'C₂H₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.ch2val);
+      });
+      getmaxY()
+      break;
+    case 'CO':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.coval);
+      });
+      getmaxY()
+      break;
+    case 'CH₄':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.chval);
+      });
+      getmaxY()
+      break;
+    case 'CO₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.co2val);
+      });
+      getmaxY()
+      break;
+    case 'C₂H₂':
+      echartDataSgList.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.gasval);
+      });
+      getmaxY()
+      break;
+  }
+}
+
+function changeSelect(val) {
+  selectData.value = val;
+  let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
+  topContent.time = data.readTime || '--';
+  topContent.warnLevel = data.syswarnLevel_str;
+  topContent.smokeJd = data.syswarnLevel_des;
+
+  mbList[0].nd = data.readData.o2val || '--';
+  mbList[1].nd = data.readData.coval || '--';
+  mbList[2].nd = data.readData.co2val || '--';
+  mbList[3].nd = data.readData.chval || '--';
+  mbList[4].nd = data.readData.ch2val || '--';
+  mbList[5].nd = data.readData.gasval || '--';
+  mbList.forEach((el) => {
+    el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
+    el.address = data ? data.strinstallpos : '--';
   });
-  let echartDataSgList = reactive<any[]>([]);
+  netStatus.value = data['netStatus'];
+}
 
-  //密闭参数选项切换
-  function btnClick(item, ind) {
-    activeIndex.value = ind;
-    type.value = item.label;
+watch(
+  () => props.listData,
+  (val) => {
+    console.log(val, 'val---');
     echartDataSg1.xData.length = 0;
     echartDataSg1.yData.length = 0;
-    echartDataSg1.lengedData = type.value;
-    echartDataSg1.lengedDataName = item.dw;
-
-    switch (type.value) {
-      case 'O₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.o2val);
+    echartDataSgList.length = 0;
+    selectList.length = 0;
+    if (JSON.stringify(val) != '{}') {
+      if (val.bundletube.length != 0) {
+        selectSj.value = val.bundletube;
+        selectSj.value.forEach((el) => {
+          selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
         });
-        break;
-      case 'C₂H₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.ch2val);
+        selectData.value = selectData.value ? selectData.value : selectList[0].value;
+        let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
+        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+        // topContent.position = dataVal.strinstallpos || '--';
+        topContent.time = dataVal.readTime || '--';
+        topContent.warnLevel = dataVal.syswarnLevel_str;
+        topContent.smokeJd = dataVal.syswarnLevel_des;
+
+        mbList[0].nd = dataVal.readData.o2val || '--';
+        mbList[1].nd = dataVal.readData.coval || '--';
+        mbList[2].nd = dataVal.readData.co2val || '--';
+        mbList[3].nd = dataVal.readData.chval || '--';
+        mbList[4].nd = dataVal.readData.ch2val || '--';
+        mbList[5].nd = dataVal.readData.gasval || '--';
+        mbList.forEach((el) => {
+          el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
+          el.address = dataVal ? dataVal.strinstallpos : '--';
         });
-        break;
-      case 'CO':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.coval);
-        });
-        break;
-      case 'CH₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.chval);
-        });
-        break;
-      case 'CO₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.co2val);
+        netStatus.value = dataVal['netStatus'];
+        dataVal.history.forEach((v) => {
+          echartDataSg1.xData.push(v.time);
+          if (echartDataSg1.lengedData == 'O₂') {
+            echartDataSg1.yData.push(v.o2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₄') {
+            echartDataSg1.yData.push(v.ch2val);
+          } else if (echartDataSg1.lengedData == 'CO') {
+            echartDataSg1.yData.push(v.coval);
+          } else if (echartDataSg1.lengedData == 'CH₄') {
+            echartDataSg1.yData.push(v.chval);
+          } else if (echartDataSg1.lengedData == 'CO₂') {
+            echartDataSg1.yData.push(v.co2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₂') {
+            echartDataSg1.yData.push(v.gasval);
+          }
+          echartDataSgList.push(v);
         });
-        break;
-      case 'C₂H₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.gasval);
+        getmaxY()
+      } else {
+        topContent.temperature = 0;
+        // topContent.position = '--';
+        topContent.time = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd = '--';
+        mbList[0].nd = '--';
+        mbList[1].nd = '--';
+        mbList[2].nd = '--';
+        mbList[3].nd = '--';
+        mbList[4].nd = '--';
+        mbList[5].nd = '--';
+        mbList.forEach((el) => {
+          el.time1 = '--';
+          el.address = '--';
         });
-        break;
-    }
-  }
-
-  function changeSelect(val) {
-    selectData.value = val;
-    let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-    topContent.time = data.readTime || '--';
-    topContent.warnLevel = data.syswarnLevel_str;
-    topContent.smokeJd = data.syswarnLevel_des;
-
-    mbList[0].nd = data.readData.o2val || '--';
-    mbList[1].nd = data.readData.coval || '--';
-    mbList[2].nd = data.readData.co2val || '--';
-    mbList[3].nd = data.readData.chval || '--';
-    mbList[4].nd = data.readData.ch2val || '--';
-    mbList[5].nd = data.readData.gasval || '--';
-    mbList.forEach((el) => {
-      el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
-      el.address = data ? data.strinstallpos : '--';
-    });
-    netStatus.value = data['netStatus'];
-  }
-
-  watch(
-    () => props.listData,
-    (val) => {
-      console.log(val, 'val---');
-      echartDataSg1.xData.length = 0;
-      echartDataSg1.yData.length = 0;
-      echartDataSgList.length = 0;
-      selectList.length = 0;
-      if (JSON.stringify(val) != '{}') {
-        if (val.bundletube.length != 0) {
-          selectSj.value = val.bundletube;
-          selectSj.value.forEach((el) => {
-            selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
-          });
-          selectData.value = selectData.value ? selectData.value : selectList[0].value;
-          let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
-          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-          // topContent.position = dataVal.strinstallpos || '--';
-          topContent.time = dataVal.readTime || '--';
-          topContent.warnLevel = dataVal.syswarnLevel_str;
-          topContent.smokeJd = dataVal.syswarnLevel_des;
-
-          mbList[0].nd = dataVal.readData.o2val || '--';
-          mbList[1].nd = dataVal.readData.coval || '--';
-          mbList[2].nd = dataVal.readData.co2val || '--';
-          mbList[3].nd = dataVal.readData.chval || '--';
-          mbList[4].nd = dataVal.readData.ch2val || '--';
-          mbList[5].nd = dataVal.readData.gasval || '--';
-          mbList.forEach((el) => {
-            el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
-            el.address = dataVal ? dataVal.strinstallpos : '--';
-          });
-          netStatus.value = dataVal['netStatus'];
-          dataVal.history.forEach((v) => {
-            echartDataSg1.xData.push(v.time);
-            if (echartDataSg1.lengedData == 'O₂') {
-              echartDataSg1.yData.push(v.o2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₄') {
-              echartDataSg1.yData.push(v.ch2val);
-            } else if (echartDataSg1.lengedData == 'CO') {
-              echartDataSg1.yData.push(v.coval);
-            } else if (echartDataSg1.lengedData == 'CH₄') {
-              echartDataSg1.yData.push(v.chval);
-            } else if (echartDataSg1.lengedData == 'CO₂') {
-              echartDataSg1.yData.push(v.co2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₂') {
-              echartDataSg1.yData.push(v.gasval);
-            }
-            echartDataSgList.push(v);
-          });
-        } else {
-          topContent.temperature = 0;
-          // topContent.position = '--';
-          topContent.time = '--';
-          topContent.warnLevel = '--';
-          topContent.smokeJd = '--';
-          mbList[0].nd = '--';
-          mbList[1].nd = '--';
-          mbList[2].nd = '--';
-          mbList[3].nd = '--';
-          mbList[4].nd = '--';
-          mbList[5].nd = '--';
-          mbList.forEach((el) => {
-            el.time1 = '--';
-            el.address = '--';
-          });
-        }
       }
-    },
-    { immediate: true, deep: true }
-  );
+    }
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <style lang="less" scoped>
-  .closeWall {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
+.closeWall {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
 
-    .title {
-      width: 100%;
-      height: 17%;
-      margin-bottom: 20px;
+  .title {
+    width: 100%;
+    height: 17%;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    align-items: center;
+
+    .box-container {
       display: flex;
-      justify-content: space-between;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      align-items: center;
 
-      .box-container {
-        display: flex;
+      &:nth-child(1) {
+        justify-content: space-around;
+        align-items: center;
+        flex: 2;
+        height: 100%;
+        border-right: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+      }
 
-        &:nth-child(1) {
-          justify-content: space-around;
-          align-items: center;
-          flex: 2;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
+      &:nth-child(2) {
+        flex-direction: column;
+        flex: 1;
+        justify-content: space-around;
+        align-items: center;
+        height: 73%;
+      }
 
-        &:nth-child(2) {
+      .contents {
+        height: 73%;
+
+        &:nth-child(1) {
+          width: 40%;
+          display: flex;
           flex-direction: column;
-          flex: 1;
           justify-content: space-around;
-          align-items: center;
-          height: 73%;
-        }
-
-        .contents {
-          height: 73%;
 
-          &:nth-child(1) {
-            width: 40%;
+          .text {
+            font-size: 14px;
             display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .text {
-              font-size: 14px;
-              display: flex;
-              align-items: center;
-
-              .text-label {
-                color: #b3b8cc;
-                font-weight: bold;
-              }
-
-              .text-value {
-                font-family: 'douyuFont';
-                color: #3df6ff;
-                margin-left: 10px;
-              }
-            }
-          }
-
-          &:nth-child(2) {
-            width: 40%;
-            display: flex;
-            justify-content: center;
             align-items: center;
 
-            img {
-              position: relative;
-              width: 23%;
-              height: 100%;
-              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-              background-size: 50% 50%;
+            .text-label {
+              color: #b3b8cc;
+              font-weight: bold;
             }
 
-            .text {
+            .text-value {
               font-family: 'douyuFont';
-              font-size: 28px;
-              margin: 0px 15px;
               color: #3df6ff;
-            }
-
-            .dw {
-              font-size: 14px;
-              color: #b3b8cc;
+              margin-left: 10px;
             }
           }
         }
 
-        .text1 {
-          width: 90%;
-          height: 30px;
-          line-height: 30px;
-          font-size: 14px;
-          color: #b3b8cc;
-          font-weight: bold;
-
-          span {
-            display: inline-block;
-
-            &:nth-child(1) {
-              width: 160px;
-              text-align: right;
-            }
+        &:nth-child(2) {
+          width: 40%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
-            &:nth-child(2) {
-              font-family: 'douyuFont';
-              color: #3df6ff;
-              margin-left: 10px;
-            }
+          img {
+            position: relative;
+            width: 23%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
           }
 
-          .value1 {
-            color: rgb(145, 230, 9) !important;
+          .text {
+            font-family: 'douyuFont';
+            font-size: 28px;
+            margin: 0px 15px;
+            color: #3df6ff;
           }
 
-          .value2 {
-            // color: rgb(0, 242, 255) !important;
-            color: #ffff35 !important;
+          .dw {
+            font-size: 14px;
+            color: #b3b8cc;
           }
+        }
+      }
 
-          .value3 {
-            // color: #ffff35 !important;
-            color: #ff0000 !important;
-          }
+      .text1 {
+        width: 90%;
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        color: #b3b8cc;
+        font-weight: bold;
 
-          .value4 {
-            color: #ffbe69 !important;
-          }
+        span {
+          display: inline-block;
 
-          .value5 {
-            color: #ff6f00 !important;
+          &:nth-child(1) {
+            width: 160px;
+            text-align: right;
           }
 
-          .value6 {
-            color: #ff0000 !important;
+          &:nth-child(2) {
+            font-family: 'douyuFont';
+            color: #3df6ff;
+            margin-left: 10px;
           }
         }
-      }
-    }
 
-    .content {
-      width: 100%;
-      height: calc(83% - 20px);
-      padding: 10px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+        .value1 {
+          color: rgb(145, 230, 9) !important;
+        }
 
-      .title-b {
-        height: 30px;
-        line-height: 30px;
-        font-family: 'douyuFont';
-        font-size: 14px;
-        color: #fff;
-        // color: #3df6ff;
-      }
+        .value2 {
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
+        }
 
-      .card-btn {
-        height: 28%;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: space-between;
-
-        .box-container {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-          background-size: 100% 100%;
-          cursor: pointer;
+        .value3 {
+          // color: #ffff35 !important;
+          color: #ff0000 !important;
+        }
 
-          .box-label {
-            position: absolute;
-            left: 50%;
-            top: 2px;
-            transform: translate(-50%);
-            color: #fff;
-          }
+        .value4 {
+          color: #ffbe69 !important;
+        }
 
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
+        .value5 {
+          color: #ff6f00 !important;
+        }
 
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
+        .value6 {
+          color: #ff0000 !important;
+        }
+      }
+    }
+  }
 
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
-          }
+  .content {
+    width: 100%;
+    height: calc(83% - 20px);
+    padding: 10px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
 
-          .box-item1 {
-            top: 24%;
-          }
+    .title-b {
+      height: 30px;
+      line-height: 30px;
+      font-family: 'douyuFont';
+      font-size: 14px;
+      color: #fff;
+      // color: #3df6ff;
+    }
 
-          .box-item2 {
-            top: 50%;
-          }
+    .card-btn {
+      height: 28%;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
 
-          .box-item3 {
-            top: 75%;
-          }
+      .box-container {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .box-label {
+          position: absolute;
+          left: 50%;
+          top: 2px;
+          transform: translate(-50%);
+          color: #fff;
         }
 
-        .box-container1 {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
           background-size: 100% 100%;
-          cursor: pointer;
 
-          .box-label {
-            position: absolute;
-            left: 50%;
-            top: 2px;
-            transform: translate(-50%);
+          .text-t {
+            width: 17%;
             color: #fff;
+            font-size: 12px;
           }
 
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
+            justify-content: flex-end;
+          }
+        }
 
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
+        .box-item1 {
+          top: 24%;
+        }
 
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
-          }
+        .box-item2 {
+          top: 50%;
+        }
 
-          .box-item1 {
-            top: 19%;
-          }
+        .box-item3 {
+          top: 75%;
+        }
+      }
+
+      .box-container1 {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .box-label {
+          position: absolute;
+          left: 50%;
+          top: 2px;
+          transform: translate(-50%);
+          color: #fff;
+        }
 
-          .box-item2 {
-            top: 41%;
+        .box-item {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 89%;
+          height: 16%;
+          padding: 0px 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .text-t {
+            width: 17%;
+            color: #fff;
+            font-size: 12px;
           }
 
-          .box-item3 {
-            top: 63%;
+          .text-v {
+            width: 83%;
+            font-family: 'douyuFont';
+            font-size: 10px;
+            color: #3df6ff;
+            display: flex;
+            justify-content: flex-end;
           }
         }
-      }
 
-      .echart-box {
-        display: flex;
-        height: calc(72% - 41px);
+        .box-item1 {
+          top: 19%;
+        }
 
-        .left-echartbox {
-          width: calc(50% - 6px);
-          margin-right: 6px;
-          border: 1px solid #114aac;
-          border-radius: 5px;
+        .box-item2 {
+          top: 41%;
+        }
 
-          .title-f {
-            height: 40px;
-            padding: 0px 10px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        .box-item3 {
+          top: 63%;
+        }
+      }
+    }
 
-            .title-text {
-              font-family: 'douyuFont';
-              font-size: 14px;
-              color: #fff;
-              // color: #3df6ff;
-            }
-          }
+    .echart-box {
+      display: flex;
+      height: calc(72% - 41px);
+
+      .left-echartbox {
+        width: calc(50% - 6px);
+        margin-right: 6px;
+        border: 1px solid #114aac;
+        border-radius: 5px;
+
+        .title-f {
+          height: 40px;
+          padding: 0px 10px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-          .echarts-box {
-            height: calc(100% - 40px);
-            padding: 0px 10px;
-            box-sizing: border-box;
+          .title-text {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+            // color: #3df6ff;
           }
         }
 
-        .right-echartbox {
-          width: calc(50% - 6px);
-          margin-left: 6px;
-          border: 1px solid #114aac;
-          border-radius: 5px;
+        .echarts-box {
+          height: calc(100% - 40px);
+          padding: 0px 10px;
+          box-sizing: border-box;
         }
       }
+
+      .right-echartbox {
+        width: calc(50% - 6px);
+        margin-left: 6px;
+        border: 1px solid #114aac;
+        border-radius: 5px;
+      }
     }
   }
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff00 !important;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 </style>

+ 199 - 196
src/views/vent/monitorManager/alarmMonitor/common/echartLine1.vue

@@ -5,226 +5,229 @@
 </template>
 
 <script lang="ts" setup>
-  import * as echarts from 'echarts';
-  import { ref, nextTick, reactive, watch, defineProps } from 'vue';
-  let props = defineProps({
-    echartDataSg: {
-      type: Object,
-    },
-    lengedDataName: {
-      type: String,
-    },
-  });
+import * as echarts from 'echarts';
+import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+let props = defineProps({
+  echartDataSg: {
+    type: Object,
+  },
+  lengedDataName: {
+    type: String,
+  },
+  maxY: {
+    type: Number,
+  },
+});
 
-  //获取dom元素节点
-  let line = ref<any>();
-  let echartDataSgs = reactive({});
-  watch(
-    () => props.echartDataSg,
-    (data) => {
-      echartDataSgs = Object.assign({}, data);
-      getOption();
-    },
-    { immediate: true, deep: true }
-  );
+//获取dom元素节点
+let line = ref<any>();
+let echartDataSgs = reactive({});
+watch(
+  () => props.echartDataSg,
+  (data) => {
+    echartDataSgs = Object.assign({}, data);
+    getOption();
+  },
+  { immediate: true, deep: true }
+);
 
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(line.value);
-      let option = {
-        grid: {
-          top: '8%',
-          left: '5%',
-          bottom: '14%',
-          right: '5%',
-          //   containLabel: true,
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(line.value);
+    let option = {
+      grid: {
+        top: '8%',
+        left: '5%',
+        bottom: '14%',
+        right: '5%',
+        //   containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
         },
-        tooltip: {
-          trigger: 'axis',
-          backgroundColor: 'rgba(0, 0, 0, .6)',
-          textStyle: {
-            color: '#fff',
-            fontSize: 12,
-          },
+      },
+      legend: {
+        align: 'left',
+        right: '50%',
+        top: '0%',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 14,
         },
-        legend: {
-          align: 'left',
-          right: '50%',
-          top: '0%',
-          type: 'plain',
-          textStyle: {
-            color: '#7ec7ff',
-            fontSize: 14,
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
+          {
+            name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
           },
-          // icon:'rect',
-          itemGap: 25,
-          itemWidth: 18,
-          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-          data: [
-            {
-              name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
+        ],
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            // formatter: '{value}',
+            fontSize: 14,
+            margin: 10,
+            textStyle: {
+              color: '#b3b8cc',
             },
-          ],
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLabel: {
-              // formatter: '{value}',
-              fontSize: 14,
-              margin: 10,
-              textStyle: {
-                color: '#b3b8cc',
-              },
-              // interval: 0,
-              formatter: function (params) {
-                let newParamsName = ref(''); // 最终拼接成的字符串
-                let paramsNameNumber = ref(params.length); // 实际标签的个数
-                let provideNumber = ref(10); // 每行能显示的字的个数
-                let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话,需要显示几行,向上取整
-                /**
-                 * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
-                 */
-                // 条件等同于rowNumber>1
-                if (paramsNameNumber.value > provideNumber.value) {
-                  /** 循环每一行,p表示行 */
-                  for (var p = 0; p < rowNumber; p++) {
-                    var tempStr = ''; // 表示每一次截取的字符串
-                    var start = p * provideNumber.value; // 开始截取的位置
-                    var end = start + provideNumber.value; // 结束截取的位置
-                    // 此处特殊处理最后一行的索引值
-                    if (p == rowNumber - 1) {
-                      // 最后一次不换行
-                      tempStr = params.substring(start, paramsNameNumber.value);
-                    } else {
-                      // 每一次拼接字符串并换行
-                      tempStr = params.substring(start, end) + '\n';
-                    }
-                    newParamsName.value += tempStr; // 最终拼成的字符串
+            // interval: 0,
+            formatter: function (params) {
+              let newParamsName = ref(''); // 最终拼接成的字符串
+              let paramsNameNumber = ref(params.length); // 实际标签的个数
+              let provideNumber = ref(10); // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话,需要显示几行,向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber.value > provideNumber.value) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = ''; // 表示每一次截取的字符串
+                  var start = p * provideNumber.value; // 开始截取的位置
+                  var end = start + provideNumber.value; // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber.value);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n';
                   }
-                } else {
-                  // 将旧标签的值赋给新标签
-                  newParamsName.value = params;
+                  newParamsName.value += tempStr; // 最终拼成的字符串
                 }
-                //将最终的字符串返回
-                return newParamsName.value;
-              },
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName.value = params;
+              }
+              //将最终的字符串返回
+              return newParamsName.value;
             },
-            axisLine: {
-              lineStyle: {
-                color: '#244a94',
-              },
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#0d2973',
-                type: 'dashed',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            data: echartDataSgs.xData,
           },
-        ],
-        yAxis: [
-          {
-            boundaryGap: false,
-            name: props.lengedDataName ? props.lengedDataName : '',
-            type: 'value',
-            max: 50,
-            axisLabel: {
-              textStyle: {
-                color: '#b3b8cc',
-              },
+          axisLine: {
+            lineStyle: {
+              color: '#244a94',
             },
-            nameTextStyle: {
-              color: '#fff',
-              fontSize: 12,
-              lineHeight: 5,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#0d2973',
+              type: 'dashed',
             },
-            splitLine: {
-              lineStyle: {
-                color: '#0d2973',
-                type: 'dashed',
-              },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: echartDataSgs.xData,
+        },
+      ],
+      yAxis: [
+        {
+          boundaryGap: false,
+          name: props.lengedDataName ? props.lengedDataName : '',
+          type: 'value',
+          max: props.maxY,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#244a94',
-              },
+          },
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 5,
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#0d2973',
+              type: 'dashed',
             },
-            axisTick: {
-              show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#244a94',
             },
           },
-        ],
-        series: [
-          {
-            name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
-            type: 'line',
-            smooth: false,
-            showSymbol: false,
-            symbolSize: 8,
-            zlevel: 3,
-            itemStyle: {
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
+          type: 'line',
+          smooth: false,
+          showSymbol: false,
+          symbolSize: 8,
+          zlevel: 3,
+          itemStyle: {
+            color: '#02f2de',
+            borderColor: '#a3c8d8',
+          },
+          lineStyle: {
+            normal: {
+              width: 3,
               color: '#02f2de',
-              borderColor: '#a3c8d8',
-            },
-            lineStyle: {
-              normal: {
-                width: 3,
-                color: '#02f2de',
-              },
             },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(2, 242, 222,0.8)',
-                    },
-                    {
-                      offset: 0.5,
-                      color: 'rgba(2, 242, 222,0.4)',
-                    },
-                    {
-                      offset: 0.9,
-                      color: 'rgba(2, 242, 222,0)',
-                    },
-                  ],
-                  false
-                ),
-              },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(2, 242, 222,0.8)',
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(2, 242, 222,0.4)',
+                  },
+                  {
+                    offset: 0.9,
+                    color: 'rgba(2, 242, 222,0)',
+                  },
+                ],
+                false
+              ),
             },
-            data: echartDataSgs.yData,
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+          data: echartDataSgs.yData,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 </script>
 
 <style scoped lang="less">
-  .echartLine {
+.echartLine {
+  width: 100%;
+  height: 100%;
+
+  .line {
     width: 100%;
     height: 100%;
-
-    .line {
-      width: 100%;
-      height: 100%;
-    }
   }
+}
 </style>

+ 30 - 4
src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -61,7 +61,7 @@
         </div>
       </div>
       <div class="echart-box">
-        <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName" />
+        <echartLine1 :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
       </div>
     </div>
   </div>
@@ -77,10 +77,10 @@ import { topList, contentList } from '../common.data';
 let props = defineProps({
   listData: Object,
 });
-
 let selectSj = ref<any[]>([])
 let selectData = ref('')
 let selectList = reactive<any[]>([])
+let maxY1 = ref<any>(0)
 let maxY = ref(100);
 let echartDw = ref('(­°C)');
 //光钎测温-图表数据
@@ -99,6 +99,24 @@ let echartDataSg = reactive({
   lengedDataName: '(%)',
 });
 let echartDataSgList = reactive<any[]>([]);
+
+function getmaxY() {
+  maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
+    return acr > cur ? acr : cur;
+  });
+  maxY1.value = maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'))
+  if (maxY1.value.length < 2) {
+    maxY1.value = 10
+  } else if (maxY1.value.length < 3) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 10
+  } else if (maxY1.value.length < 4) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 100
+  } else if (maxY1.value.length < 5) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 1000
+  } else if (maxY1.value.length < 6) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 10000
+  }
+}
 //束管实时数据选项点击
 function getSgClick(items) {
   echartDataSg.xData.length = 0;
@@ -112,36 +130,42 @@ function getSgClick(items) {
         echartDataSg.xData.push(el.time);
         echartDataSg.yData.push(el.o2val);
       });
+      getmaxY()
       break;
     case 'C₂H₄':
       echartDataSgList.forEach((el) => {
         echartDataSg.xData.push(el.time);
         echartDataSg.yData.push(el.ch2val);
       });
+      getmaxY()
       break;
     case 'CO':
       echartDataSgList.forEach((el) => {
         echartDataSg.xData.push(el.time);
         echartDataSg.yData.push(el.coval);
       });
+      getmaxY()
       break;
     case 'CH₄':
       echartDataSgList.forEach((el) => {
         echartDataSg.xData.push(el.time);
         echartDataSg.yData.push(el.chval);
       });
+      getmaxY()
       break;
     case 'CO₂':
       echartDataSgList.forEach((el) => {
         echartDataSg.xData.push(el.time);
         echartDataSg.yData.push(el.co2val);
       });
+      getmaxY()
       break;
     case 'C₂H₂':
       echartDataSgList.forEach((el) => {
         echartDataSg.xData.push(el.time);
         echartDataSg.yData.push(el.gasval);
       });
+      getmaxY()
       break;
   }
 }
@@ -192,7 +216,7 @@ watch(
         selectSj.value.forEach(el => {
           selectList.push({ label: el.strinstallpos, value: el.strinstallpos })
         })
-        selectData.value=  selectData.value ?  selectData.value : selectList[0].value
+        selectData.value = selectData.value ? selectData.value : selectList[0].value
         let dataVal = selectData.value ? selectSj.value.filter(v => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
         contentList[0].list[0].value = dataVal.readData.o2val;
         contentList[0].list[1].value = dataVal.readData.ch2val;
@@ -223,6 +247,7 @@ watch(
           }
           echartDataSgList.push(el);
         });
+        getmaxY()
       } else {
         contentList[0].list[0].value = '--';
         contentList[0].list[1].value = '--';
@@ -519,7 +544,8 @@ watch(
 :deep(.zxm-select-selection-item) {
   color: #fff !important;
 }
-:deep(.zxm-select-arrow){
+
+:deep(.zxm-select-arrow) {
   color: #fff;
 }
 </style>