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

<template>
    <div class="internal-fire-bot1">
        <div class="title-b">采空区密闭参数</div>
        <div class="card-btn">
            <div :class="activeIndex == 0 ? 'box-container1' : 'box-container'"
                @click="btnClick({ label: 'O₂', dw: '(%)' }, 0)">
                <div class="box-label">
                    <span> O₂</span>
                    <span>(%)</span>
                </div>
                <div class="box-item box-item1">
                    <span class="text-t">浓度:</span>
                    <span class="text-v">{{ bundleD.o2 }}</span>
                </div>
                <div class="box-item box-item2">
                    <span class="text-t">时间:</span>
                    <span class="text-v">{{ bundleD.o2time }}</span>
                </div>
                <div class="box-item box-item3">
                    <span class="text-t">位置:</span>
                    <span class="text-v">{{ bundleD.o2address }}</span>
                </div>
            </div>
            <div :class="activeIndex == 1 ? 'box-container1' : 'box-container'"
                @click="btnClick({ label: 'CO', dw: '(ppm)' }, 1)">
                <div class="box-label">
                    <span> CO</span>
                    <span>(ppm)</span>
                </div>
                <div class="box-item box-item1">
                    <span class="text-t">浓度:</span>
                    <span class="text-v">{{ bundleD.co }}</span>
                </div>
                <div class="box-item box-item2">
                    <span class="text-t">时间:</span>
                    <span class="text-v">{{ bundleD.cotime }}</span>
                </div>
                <div class="box-item box-item3">
                    <span class="text-t">位置:</span>
                    <span class="text-v">{{ bundleD.coaddress }}</span>
                </div>
            </div>
            <div :class="activeIndex == 2 ? 'box-container1' : 'box-container'"
                @click="btnClick({ label: 'CO₂', dw: '(%)' }, 2)">
                <div class="box-label">
                    <span> CO₂</span>
                    <span>(%)</span>
                </div>
                <div class="box-item box-item1">
                    <span class="text-t">浓度:</span>
                    <span class="text-v">{{ bundleD.co2 }}</span>
                </div>
                <div class="box-item box-item2">
                    <span class="text-t">时间:</span>
                    <span class="text-v">{{ bundleD.co2time }}</span>
                </div>
                <div class="box-item box-item3">
                    <span class="text-t">位置:</span>
                    <span class="text-v">{{ bundleD.co2address }}</span>
                </div>
            </div>
            <div :class="activeIndex == 3 ? 'box-container1' : 'box-container'"
                @click="btnClick({ label: 'CH₄', dw: '(%)' }, 3)">
                <div class="box-label">
                    <span> CH₄</span>
                    <span>(%)</span>
                </div>
                <div class="box-item box-item1">
                    <span class="text-t">浓度:</span>
                    <span class="text-v">{{ bundleD.ch4 }}</span>
                </div>
                <div class="box-item box-item2">
                    <span class="text-t">时间:</span>
                    <span class="text-v">{{ bundleD.ch4time }}</span>
                </div>
                <div class="box-item box-item3">
                    <span class="text-t">位置:</span>
                    <span class="text-v">{{ bundleD.ch4address }}</span>
                </div>
            </div>
            <div :class="activeIndex == 4 ? 'box-container1' : 'box-container'"
                @click="btnClick({ label: 'C₂H₂', dw: '(ppm)' }, 4)">
                <div class="box-label">
                    <span> C₂H₂</span>
                    <span>(ppm)</span>
                </div>
                <div class="box-item box-item1">
                    <span class="text-t">浓度:</span>
                    <span class="text-v">{{ bundleD.c2h2 }}</span>
                </div>
                <div class="box-item box-item2">
                    <span class="text-t">时间:</span>
                    <span class="text-v">{{ bundleD.c2h2time }}</span>
                </div>
                <div class="box-item box-item3">
                    <span class="text-t">位置:</span>
                    <span class="text-v">{{ bundleD.c2h2address }}</span>
                </div>
            </div>
            <div :class="activeIndex == 5 ? 'box-container1' : 'box-container'"
                @click="btnClick({ label: 'C₂H₄', dw: '(ppm)' }, 5)">
                <div class="box-label">
                    <span> C₂H₄</span>
                    <span>(ppm)</span>
                </div>
                <div class="box-item box-item1">
                    <span class="text-t">浓度:</span>
                    <span class="text-v">{{ bundleD.c2h4 }}</span>
                </div>
                <div class="box-item box-item2">
                    <span class="text-t">时间:</span>
                    <span class="text-v">{{ bundleD.c2h4time }}</span>
                </div>
                <div class="box-item box-item3">
                    <span class="text-t">位置:</span>
                    <span class="text-v">{{ bundleD.c2h4address }}</span>
                </div>
            </div>
        </div>
        <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>
                <div class="echarts-box">
                    <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
                    <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1"
                        :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" :minY="minY" />
                </div>
            </div>
            <div class="right-echartbox">
                <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
                    :heightCanvas="heightCanvas" :warnLevel="warnLevel" />
            </div>
        </div>
    </div>
</template>

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

let props = defineProps({
    internalFireBotData: {
        type: Array,
        default: () => {
            return []
        }
    },
    selectData: {
        type: String,
        default: ''
    },
    warnLevel:{
        type:String,
        default:''
    }
})

let bundletube = ref<any[]>([])
//当前密闭参数激活选项
let activeIndex = ref(0);
//密闭参数列表
let bundleD = reactive({
    o2: '',
    o2time: '',
    o2address: '',
    co: '',
    cotime: '',
    coaddress: '',
    co2: '',
    co2time: '',
    co2address: '',
    ch4: '',
    ch4time: '',
    ch4address: '',
    c2h2: '',
    c2h2time: '',
    c2h2address: '',
    c2h4: '',
    c2h4time: '',
    c2h4address: '',
})
//当前激活密闭参数类型
let type = ref('O₂');
let echartDataSg1 = reactive({
    xData: [],
    yData: [],
    lengedData: 'O₂',
    lengedDataName: '(%)',
});
let echartDataSgList = ref<any[]>([]);
//设备连接状态
let netStatus = ref(0);
const shownChart = ref('default');
/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
let maxY = ref<any>(0);
let minY = ref<any>(0)
    let widthV = ref('75%');
  let heightV = ref('80%');
  let coordDw = ref<any[]>([31, 62, 110]);
  let widthCanvas = ref(562);
  let heightCanvas = ref(316);

//密闭参数选项切换
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;
    const data = bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0];
    switch (type.value) {
        case 'O₂':
            echartDataSgList.value.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?  data.avgParam.avg_o2_value : 0,
                    data.avgParam.max_o2_value ? data.avgParam.max_o2_value : 0,
                    data.avgParam.min_o2_value ? data.avgParam.min_o2_value : 0,
                    // data.readData?.o2val,
                ],
                monitorData: echartDataSg1.yData,
            };
            getmax();
            break;
        case 'C₂H₄':
            echartDataSgList.value.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.value.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.value.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.value.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.value.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;
    }
}
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;
    // }
}

watch(() => props.internalFireBotData, (newV, oldV) => {
    echartDataSg1.xData.length = 0;
    echartDataSg1.yData.length = 0;
    if (newV.length != 0 && props.selectData) {
        bundletube.value = newV
     
        let dataVal =bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0] 
        let times = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) || '--';
        let address = dataVal.strinstallpos || '--';
        bundleD.o2 = dataVal.readData.o2val || '--';
        bundleD.o2time = times
        bundleD.o2address = address
        bundleD.co = dataVal.readData.coval || '--';
        bundleD.cotime = times
        bundleD.coaddress = address;
        bundleD.co2 = dataVal.readData.co2val || '--';
        bundleD.co2time = times
        bundleD.co2address = address;
        bundleD.ch4 = dataVal.readData.gasval || '--';
        bundleD.ch4time =times
        bundleD.ch4address = address;
        bundleD.c2h2 = dataVal.readData.chval || '--';
        bundleD.c2h2time = times
        bundleD.c2h2address = address;
        bundleD.c2h4 = dataVal.readData.ch2val || '--';
        bundleD.c2h4time = times
        bundleD.c2h4address = address;

        echartDataSgList.value = dataVal.history;
        netStatus.value = dataVal['netStatus'];
        btnClick(
            {
                label: type.value,
                dw: echartDataSg1.lengedDataName,
            },
            activeIndex.value
        );
        getmax();
    }
}, { immediate: true })

</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
    .internal-fire-bot1 {
        --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');
    }
}

.internal-fire-bot1 {
    --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);
    position: relative;
    width: 100%;
    height: 100%;

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

    .card-btn {
        height: 28%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

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

            .box-label {
                position: absolute;
                left: 50%;
                top: 2px;
                transform: translate(-50%);
                color: #fff;
            }

            .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: var(--image-contetn) no-repeat center;
                background-size: 100% 100%;

                .text-t {
                    width: 17%;
                    color: #fff;
                    font-size: 12px;
                }

                .text-v {
                    width: 83%;
                    font-family: 'douyuFont';
                    font-size: 10px;
                    color: var(--vent-table-action-link);
                    display: flex;
                    justify-content: flex-end;
                }
            }

            .box-item1 {
                top: 24%;
            }

            .box-item2 {
                top: 50%;
            }

            .box-item3 {
                top: 75%;
            }
        }

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

            .box-label {
                position: absolute;
                left: 50%;
                top: 2px;
                transform: translate(-50%);
                color: #fff;
            }

            .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: var(--image-contetn) no-repeat center;
                background-size: 100% 100%;

                .text-t {
                    width: 17%;
                    color: #fff;
                    font-size: 12px;
                }

                .text-v {
                    width: 83%;
                    font-family: 'douyuFont';
                    font-size: 10px;
                    color: var(--vent-table-action-link);
                    display: flex;
                    justify-content: flex-end;
                }
            }

            .box-item1 {
                top: 19%;
            }

            .box-item2 {
                top: 41%;
            }

            .box-item3 {
                top: 63%;
            }
        }
    }

    .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;

                .title-text {
                    font-family: 'douyuFont';
                    font-size: 14px;
                    color: #fff;
                    // color: var(--vent-table-action-link);
                }
            }

            .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;
        }
    }
}
</style>