mky-vent-base/src/views/vent/monitorManager/alarmMonitor/common/internal-fire-bot.vue

<template>
    <div class="internal-fire-bot">
        <div class="title">
            <div class="text">束管系统监测</div>
            <div class="select-box flex">
                <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
                    <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
                        }}</a-select-option>
                </a-select>
            </div>
        </div>
        <div class="content">
            <div class="content-box">
                <div class="box-item" @click="getSgClick('O₂','(%)')">
                    <div class="content-title">
                        <span>O₂</span>
                        <span> (%)</span>
                    </div>
                    <div class="content-item">
                        <span>浓度 : </span>
                        <span class="bolds">{{ bunData.o2 }}</span>
                    </div>
                    <div class="content-item">
                        <span>时间 :</span>
                        <span class="bolds">{{ bunData.o2time }}</span>
                    </div>
                </div>
                <div class="box-item"  @click="getSgClick('C₂H₄','(ppm)')">
                    <div class="content-title">
                        <span> C₂H₄</span>
                        <span>(ppm)</span>
                    </div>
                    <div class="content-item">
                        <span>浓度 :</span>
                        <span class="bolds">{{ bunData.c2h4 }}</span>
                    </div>
                    <div class="content-item">
                        <span>时间 :</span>
                        <span class="bolds">{{ bunData.c2h4time }}</span>
                    </div>
                </div>
            </div>
            <div class="content-box">
                <div class="box-item" @click="getSgClick('CO','(ppm)')" >
                    <div class="content-title">
                        <span>CO</span>
                        <span> (ppm)</span>
                    </div>
                    <div class="content-item">
                        <span>浓度 : </span>
                        <span class="bolds">{{ bunData.co }}</span>
                    </div>
                    <div class="content-item">
                        <span>时间 :</span>
                        <span class="bolds">{{ bunData.cotime }}</span>
                    </div>
                </div>
                <div class="box-item" @click="getSgClick('CH₄','(ppm)')">
                    <div class="content-title">
                        <span> CH₄</span>
                        <span>(ppm)</span>
                    </div>
                    <div class="content-item">
                        <span>浓度 :</span>
                        <span class="bolds">{{ bunData.ch4 }}</span>
                    </div>
                    <div class="content-item">
                        <span>时间 :</span>
                        <span class="bolds">{{ bunData.ch4time }}</span>
                    </div>
                </div>
            </div>
            <div class="content-box">
                <div class="box-item" @click="getSgClick('CO₂','(%)')">
                    <div class="content-title">
                        <span>CO₂</span>
                        <span> (%)</span>
                    </div>
                    <div class="content-item">
                        <span>浓度 : </span>
                        <span class="bolds">{{ bunData.co2 }}</span>
                    </div>
                    <div class="content-item">
                        <span>时间 :</span>
                        <span class="bolds">{{ bunData.co2time }}</span>
                    </div>
                </div>
                <div class="box-item" @click="getSgClick('C₂H₂','(ppm)')">
                    <div class="content-title">
                        <span> C₂H₂</span>
                        <span>(ppm)</span>
                    </div>
                    <div class="content-item">
                        <span>浓度 :</span>
                        <span class="bolds">{{ bunData.c2h2 }}</span>
                    </div>
                    <div class="content-item">
                        <span>时间 :</span>
                        <span class="bolds">{{ bunData.c2h2time }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="echart-box">
            <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1"
                :lengedDataName="echartDataSg.lengedDataName" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import echartLine1 from './echartLine1.vue';
import PredictionCurve from './predictionCurve.vue';

let props = defineProps({
    internalFireBotData: {
        type: Array,
        default: () => {
            return []
        }
    }
})
const shownChart = ref('default');
let selectData = ref('');//下拉选项数据
let selectList = ref<any[]>([]);//下拉选项列表

let bundletubeData = ref<any[]>([]);

let bunData = reactive({
    o2: '--',
    o2time: '--',
    c2h4: '--',
    c2h4time: '--',
    co: '--',
    cotime: '--',
    ch4: '--',
    ch4time: '--',
    co2: '--',
    co2time: '--',
    c2h2: '--',
    c2h2time: '--',
})

//束管图表数据
let echartDataSgList = ref<any[]>([]);
//束管监测-图表数据
let echartDataSg = reactive({
  xData: [],
  lengedDataName: '(%)',
  yData: [],
  lengedData: 'O₂',
});

let maxY1 = ref<any>(0);

/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });

//下拉选项切换
function changeSelect(val) {
    selectData.value = val;
    let data = bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0];
    let time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
    bunData.o2 = data.readData.o2val
    bunData.o2time = time;
    bunData.c2h4 = data.readData.ch2val
    bunData.c2h4time = time;
    bunData.co = data.readData.coval;
    bunData.cotime = time;
    bunData.ch4 = data.readData.gasval;
    bunData.ch4time = time;
    bunData.co2 = data.readData.co2val;
    bunData.co2time = time;
    bunData.c2h2 = data.readData.chval;
    bunData.c2h2time = time;
}

//束管实时数据选项点击
function getSgClick(title,dw) {
  echartDataSg.xData.length = 0;
  echartDataSg.yData.length = 0;
  echartDataSg.lengedData = title;
  echartDataSg.lengedDataName = dw;

  const data = bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0];
  switch (title) {
    case 'O₂':
      echartDataSgList.value.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.o2val);
      });

      curveConfig.value = {
        id: 'o2',
        label: 'O₂',
        time: echartDataSg.xData,
        data: [
          // 氧气预测曲线
          data.avgParam?.avg_o2_value || 0,
          data.avgParam?.max_o2_value || 0,
          data.avgParam?.min_o2_value || 0,
          // data.readData?.o2val,
        ],
        monitorData: echartDataSg.yData,
      };
      getmaxY();
      break;
    case 'C₂H₄':
      echartDataSgList.value.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.ch2val);
      });
      curveConfig.value = {
        id: 'ch2',
        label: 'C₂H₄',
        time: echartDataSg.xData,
        data: [
          // 预测曲线
          data.avgParam?.avg_c2h4_value || 0,
          data.avgParam?.max_c2h4_value || 0,
          data.avgParam?.min_c2h4_value || 0,
          // data.readData?.ch2val,
        ],
        monitorData: echartDataSg.yData,
      };
      getmaxY();
      break;
    case 'CO':
      echartDataSgList.value.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.coval);
      });
      curveConfig.value = {
        id: 'co',
        label: 'CO',
        time: echartDataSg.xData,
        data: [
          // 预测曲线
          data.avgParam?.avg_co_value || 0,
          data.avgParam?.max_co_value || 0,
          data.avgParam?.min_co_value || 0,
          // data.readData?.coval,
        ],
        monitorData: echartDataSg.yData,
      };
      getmaxY();
      break;
    case 'CH₄':
      echartDataSgList.value.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.gasval);
      });
      curveConfig.value = {
        id: 'ch4',
        label: 'CH₄',
        time: echartDataSg.xData,
        data: [
          // 预测曲线
          data.avgParam?.avg_ch4_value || 0,
          data.avgParam?.max_ch4_value || 0,
          data.avgParam?.min_ch4_value || 0,
          // data.readData?.chval,
        ],
        monitorData: echartDataSg.yData,
      };
      getmaxY();
      break;
    case 'CO₂':
      echartDataSgList.value.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.co2val);
      });
      curveConfig.value = {
        id: 'co2',
        label: 'CO₂',
        time: echartDataSg.xData,
        data: [
          // 预测曲线
          data.avgParam?.avg_co2_value || 0,
          data.avgParam?.max_co2_value || 0,
          data.avgParam?.min_co2_value || 0,
          // data.readData?.co2val,
        ],
        monitorData: echartDataSg.yData,
      };
      getmaxY();
      break;
    case 'C₂H₂':
      echartDataSgList.value.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.chval);
      });
      curveConfig.value = {
        id: 'gas',
        label: 'C₂H₂',
        time: echartDataSg.xData,
        data: [
          // 预测曲线
          data.avgParam?.avg_c2h2_value || 0,
          data.avgParam?.max_c2h2_value || 0,
          data.avgParam?.min_c2h2_value || 0,
          // data.readData?.gasval,
        ],
        monitorData: echartDataSg.yData,
      };
      getmaxY();
      break;
  }
}

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 && Number(maxY1.value) < 1) {
    maxY1.value = 1;
  } else if (maxY1.value.length < 2 && Number(maxY1.value) >= 1) {
    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;
  }
}

watch(() => props.internalFireBotData, (newV, oldV) => {
    echartDataSg.xData.length = 0;
    echartDataSg.yData.length = 0;
    if (newV.length != 0) {
        bundletubeData.value = newV;
        //下拉选项列表
        selectList.value = bundletubeData.value.map((el) => {
            return { label: el.strinstallpos, value: el.strinstallpos };
        });
        //默认选中
        selectData.value = selectData.value ? selectData.value : selectList.value[0].value;
        let choiceData = selectData.value ? bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletubeData.value[0];

        let time = choiceData.readTime.substring(0, choiceData.readTime.lastIndexOf(':'));
        bunData.o2 = choiceData.readData.o2val
        bunData.o2time = time;
        bunData.c2h4 = choiceData.readData.ch2val
        bunData.c2h4time = time;
        bunData.co = choiceData.readData.coval;
        bunData.cotime = time;
        bunData.ch4 = choiceData.readData.gasval;
        bunData.ch4time = time;
        bunData.co2 = choiceData.readData.co2val;
        bunData.co2time = time;
        bunData.c2h2 = choiceData.readData.chval;
        bunData.c2h2time = time;

        echartDataSgList.value = choiceData.history;

        getSgClick(echartDataSg.lengedData,echartDataSg.lengedDataName);
        getmaxY();
    }
}, { immediate: true })
</script>

<style lang="less" scoped>
.internal-fire-bot {
    position: relative;
    width: 100%;
    height: 100%;

    .title {
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .text {
            // height: 30px;
            // line-height: 30px;
            font-family: 'douyuFont';
            font-size: 14px;
            color: #fff;
        }
    }

    .content {
        height: calc(100% - 45px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .content-box {
            width: 100%;
            height: 29%;
            display: flex;
            justify-content: space-between;
            margin-top: 0px !important;

            .box-item {
                position: relative;
                width: 16%;
                height: 100%;
                background: var(--image-14174) no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .content-title {
                    position: absolute;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%);
                    color: #fff;
                    font-size: 14px;
                }

                .content-item {
                    position: absolute;
                    width: 93%;
                    height: 27%;
                    display: flex;
                    align-items: center;
                    padding: 0px 10px;
                    box-sizing: border-box;
                    background: var(--image-contetn) no-repeat center;
                    background-size: 100% 100%;
                    color: #fff;
                    font-size: 14px;

                    &:nth-child(2) {
                        left: 50%;
                        top: 28%;
                        transform: translate(-50%);
                        display: flex;
                        justify-content: space-between;
                    }

                    &:nth-child(3) {
                        left: 50%;
                        top: 62%;
                        transform: translate(-50%);
                        display: flex;
                        justify-content: space-between;
                    }

                    .bolds {
                        font-family: 'douyuFont';
                        color: var(--vent-table-action-link);
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .echart-box {
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translate(-50%, 0);
        width: 66%;
        height: calc(100% - 50px);
    }
}
</style>