gas-injection/src/views/vent/monitorManager/alarmMonitor/common/closeWall.copy.vue

<template>
    <div class="closeWall">
      <!-- <div class="top-area">
        <internalFireTop1 :internalFireTopData="internalFireTopData" :temperatureData="temperatureData">
        </internalFireTop1>
      </div>
      <div class="content">
        <internalFireBot1 :internalFireBotData="internalFireBotData"></internalFireBot1>
      </div> -->
    </div>
  </template>
  
  <script lang="ts" setup>
  // import { ref, reactive, watch, defineProps, inject, h } from 'vue';
  // import echartLine1 from './echartLine1.vue';
  // import warnZb from './warnZb.vue';
  // import PredictionCurve from './predictionCurve.vue';
  // import internalFireBot1 from './internal-fire-bot1.vue';
  // import { getMaxY, getMinY } from '../common.data'
  // // import { deviceControlApi } from '/@/api/vent/index';
  // import internalFireTop1 from './internal-fire-top1.vue'
  
  // let props = defineProps({
  //   listData: Object,
  // });
  
  // const globalConfig = inject('globalConfig');
  // const shownChart = ref('default');
  // let maxY = ref<any>(0);
  // let minY = ref<any>(0)
  // // let selectSj = ref<any[]>([]);
  
  // let internalFireTopData = ref<any[]>([])
  // let temperatureData = ref(0)
  // let internalFireBotData = ref<any[]>([])
  // // let selectList = reactive<any[]>([]);
  // let widthV = ref('75%');
  // let heightV = ref('80%');
  // let coordDw = ref<any[]>([31, 62, 110]);
  // let widthCanvas = ref(562);
  // let heightCanvas = ref(316);
  // //设备连接状态
  // let netStatus = ref(0);
  
  
  
  
  // //当前激活密闭参数类型
  // let type = ref('O₂');
  
  // let echartDataSg1 = reactive({
  //   xData: [],
  //   yData: [],
  //   lengedData: 'O₂',
  //   lengedDataName: '(%)',
  // });
  // let echartDataSgList = reactive<any[]>([]);
  
  // function getmax() {
  //   getMaxY(echartDataSg1.yData)
  //   getMinY(echartDataSg1.yData)
  //   // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
  //   //   return acr > cur ? acr : cur;
  //   // });
  //   // maxY.value =
  //   //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
  //   // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
  //   //   maxY.value = 1;
  //   // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
  //   //   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(maxY.value[0]) + 1) * 10000;
  //   // }
  // }
  // //密闭参数选项切换
  // function btnClick(item, ind) {
  //   // debugger;
  //   activeIndex.value = ind;
  //   type.value = item.label;
  //   echartDataSg1.xData.length = 0;
  //   echartDataSg1.yData.length = 0;
  //   echartDataSg1.lengedData = type.value;
  //   echartDataSg1.lengedDataName = item.dw;
  
  //   const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
  //   switch (type.value) {
  //     case 'O₂':
  //       echartDataSgList.forEach((el) => {
  //         echartDataSg1.xData.push(el.time);
  //         echartDataSg1.yData.push(el.o2val);
  //       });
  
  //       curveConfig.value = {
  //         id: 'o2',
  //         label: 'O₂',
  //         time: echartDataSg1.xData,
  //         data: [
  //           // 氧气预测曲线
  //           data.avgParam?.avg_o2_value || 0,
  //           data.avgParam?.max_o2_value || 0,
  //           data.avgParam?.min_o2_value || 0,
  //           // data.readData?.o2val,
  //         ],
  //         monitorData: echartDataSg1.yData,
  //       };
  //       getmax();
  //       break;
  //     case 'C₂H₄':
  //       echartDataSgList.forEach((el) => {
  //         echartDataSg1.xData.push(el.time);
  //         echartDataSg1.yData.push(el.ch2val);
  //       });
  //       curveConfig.value = {
  //         id: 'ch2',
  //         label: 'C₂H₄',
  //         time: echartDataSg1.xData,
  //         data: [
  //           // 预测曲线
  //           data.avgParam?.avg_c2h4_value || 0,
  //           data.avgParam?.max_c2h4_value || 0,
  //           data.avgParam?.min_c2h4_value || 0,
  //           // data.readData?.ch2val,
  //         ],
  //         monitorData: echartDataSg1.yData,
  //       };
  //       getmax();
  //       break;
  //     case 'CO':
  //       echartDataSgList.forEach((el) => {
  //         echartDataSg1.xData.push(el.time);
  //         echartDataSg1.yData.push(el.coval);
  //       });
  //       curveConfig.value = {
  //         id: 'co',
  //         label: 'CO',
  //         time: echartDataSg1.xData,
  //         data: [
  //           // 预测曲线
  //           data.avgParam?.avg_co_value || 0,
  //           data.avgParam?.max_co_value || 0,
  //           data.avgParam?.min_co_value || 0,
  //           // data.readData?.coval,
  //         ],
  //         monitorData: echartDataSg1.yData,
  //       };
  //       getmax();
  //       break;
  //     case 'CH₄':
  //       echartDataSgList.forEach((el) => {
  //         echartDataSg1.xData.push(el.time);
  //         echartDataSg1.yData.push(el.gasval);
  //       });
  //       curveConfig.value = {
  //         id: 'ch',
  //         label: 'CH₄',
  //         time: echartDataSg1.xData,
  //         data: [
  //           // 预测曲线
  //           data.avgParam?.avg_ch4_value || 0,
  //           data.avgParam?.max_ch4_value || 0,
  //           data.avgParam?.min_ch4_value || 0,
  //           // data.readData?.chval,
  //         ],
  //         monitorData: echartDataSg1.yData,
  //       };
  //       getmax();
  //       break;
  //     case 'CO₂':
  //       echartDataSgList.forEach((el) => {
  //         echartDataSg1.xData.push(el.time);
  //         echartDataSg1.yData.push(el.co2val);
  //       });
  //       curveConfig.value = {
  //         id: 'co2',
  //         label: 'CO₂',
  //         time: echartDataSg1.xData,
  //         data: [
  //           // 预测曲线
  //           data.avgParam?.avg_co2_value || 0,
  //           data.avgParam?.max_co2_value || 0,
  //           data.avgParam?.min_co2_value || 0,
  //           // data.readData?.co2val,
  //         ],
  //         monitorData: echartDataSg1.yData,
  //       };
  //       getmax();
  //       break;
  //     case 'C₂H₂':
  //       echartDataSgList.forEach((el) => {
  //         echartDataSg1.xData.push(el.time);
  //         echartDataSg1.yData.push(el.chval);
  //       });
  //       curveConfig.value = {
  //         id: 'gas',
  //         label: 'C₂H₂',
  //         time: echartDataSg1.xData,
  //         data: [
  //           // 预测曲线
  //           data.avgParam?.avg_c2h2_value || 0,
  //           data.avgParam?.max_c2h2_value || 0,
  //           data.avgParam?.min_c2h2_value || 0,
  //           // data.readData?.gasval,
  //         ],
  //         monitorData: echartDataSg1.yData,
  //       };
  //       getmax();
  //       break;
  //   }
  // }
  
  
  
  
  
  // /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
  // const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
  
  // watch(
  //   () => props.listData,
  //   (val: any) => {
  //     echartDataSg1.xData.length = 0;
  //     echartDataSg1.yData.length = 0;
  //     echartDataSgList.length = 0;
  //     // selectList.length = 0;
  
  //     if (JSON.stringify(val) === '{}') return;
  //     internalFireTopData.value = val.bundletube
  //     temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
  //     internalFireBotData.value=val.bundletube
  
  //     if (val.bundletube.length != 0) {
  //       // selectSj.value = val.bundletube;
  
  
  
  
  
      
  //       netStatus.value = dataVal['netStatus'];
  //       echartDataSgList = dataVal.history;
  //       btnClick(
  //         {
  //           label: type.value,
  //           dw: echartDataSg1.lengedDataName,
  //         },
  //         activeIndex.value
  //       );
  //       // 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);
  //       // });
  //       getmax();
  //     } else {
  
  //       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 }
  // );
  </script>
  
  <style lang="less" scoped>
  @import '/@/design/theme.less';
  
  @{theme-deepblue} {
    .closeWall {
      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
    }
  }
  
  .closeWall {
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-pj: url('/@/assets/images/fire/pj.svg');
    --image-1: url('/@/assets/images/fire/1.png');
    --image-contetn: url('/@/assets/images/fire/contetn.png');
    --image-2: url('/@/assets/images/fire/2.png');
    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  
    .top-area {
      width: 100%;
      height: 17%;
      margin-bottom: 20px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
    }
  
  
  
    .content {
      width: 100%;
      height: calc(83% - 20px);
      padding: 10px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;
    }
  }
  
  :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;
  }
  </style>