gasInjection-project/src/views/vent/monitorManager/nitrogen/components/nitrogenHome2.vue

<template>
    <div class="monitor-container">
        <template v-for="(sysItem, sysIndex) in deviceProperty.monitorDataGroupArr" :key="sysIndex">
            <div :id="`compressorCss3D${sysIndex + 1}`" class="threejs-Object-CSS compressorCss3D-box"
                style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0px; left: 0px">
            </div>
        </template>
        <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
        <div v-for="(sysItem, sysIndex) in deviceProperty.monitorDataGroupArr" :key="sysIndex"
            style="position: absolute; z-index: -1">
            <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
                <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
                    <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
                        <div class="title">{{ deviceProperty.modelMonitor[0].title + (index + 1) }} </div>
                        <template v-for="(preMonitor, preMonitorIndex) in deviceProperty.modelMonitor[0].list"
                            :key="preMonitorIndex">
                            <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
                                <span class="monitor-title">{{ preMonitor.title }}:</span>
                                <span class="monitor-val"><span class="val">{{
                                    selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`]
                                        ?
                                        formatNum(selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`])
                                        : '-'
                                        }}</span><span class="unit">{{ preMonitor.unit }}</span></span>
                            </div>
                            <div v-else class="signal-item">
                                <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
                                    <span class="monitor-title">{{ signal.title }}</span>
                                    <span :class="{
                                        'signal-round': true,
                                        'signal-round-run':
                                            signal.title != '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
                                        'signal-round-warning':
                                            signal.title == '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
                                        'signal-round-gry': selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] != '1',
                                    }"></span>
                                </div>
                            </div>
                        </template>
                    </fourBorderBg>
                    <fourBorderBg v-if="getShowModelMonitor(deviceProperty.modelMonitor[1], groupNum)"
                        :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
                        <div class="title">{{ deviceProperty.modelMonitor[1].title + (index + 1) }}</div>
                        <template v-for="(cqgMonitor, cqgMonitorIndex) in deviceProperty.modelMonitor[1].list"
                            :key="cqgMonitorIndex">
                            <div class="monitor-item">
                                <span class="monitor-title">{{ cqgMonitor.title }}:</span>
                                <span class="monitor-val"><span class="val">{{
                                    selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`]
                                        ?
                                        formatNum(selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`])
                                        : '-'
                                        }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
                            </div>
                        </template>
                    </fourBorderBg>
                </div>
            </div>
        </div>


        <div class="total-data">
            <div class="vent-flex-row">
                <div class="item" v-for="(data, index) in deviceProperty.totalData" :key="index">{{ data.title + '(' +
                    data.unit
                    + ')' }}：<span class="val">{{
                        selectData[data.code] ? formatNum(selectData[data.code]) : '-'
                        }}</span></div>
            </div>
        </div>
        <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
        <div class="nitrogen-home">
            <div class="lr left-box">
                <div class="left-container">
                    <div class="monitor-box">
                        <template v-for="(device, leftIndex) in deviceProperty.leftMonitor" :key="leftIndex">
                            <ventBox1 :class="{ 'vent-margin-t-10': leftIndex > 0 }">
                                <template #title>
                                    <div>{{ device.title }}</div>
                                </template>
                                <template #container>
                                    <template v-for="(deviceChild, deviceChildIndex) in device.children"
                                        :key="deviceChildIndex">
                                        <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
                                            <div v-if="deviceChild.key.length > 1"
                                                class="parameter-title group-parameter-title">
                                                <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{
                                                    deviceChild.childTitle[deviceIndex] }}</span>
                                            </div>
                                            <div class="input-box">
                                                <div v-for="(item, index) in deviceChild.list" class="input-item"
                                                    :key="index">
                                                    <div :class="{
                                                        'w-280px': item.type == 'sign' || item.type == 'warning',
                                                        title: item.type !== 'sign' && item.type !== 'warning',
                                                    }">{{ item.title }}：</div>
                                                    <template v-if="item.type !== 'sign' && item.type !== 'warning'">
                                                        <div class="value">{{
                                                            selectData && selectData[deviceKey + item.code] ?
                                                            formatNum(selectData[deviceKey + item.code], 1) : '-'
                                                            }}</div>
                                                    </template>
                                                    <template v-else>
                                                        <div class="value">
                                                            <span :class="{
                                                                'signal-round': true,
                                                                'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
                                                                'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
                                                                'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
                                                            }"></span>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </template>
                            </ventBox1>
                        </template>
                    </div>
                </div>
            </div>
            <div class="lr right-box">
                <div class="item-box" :class="{ 'mt-50px': deviceProperty.totalData.length > 0 }">
                    <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex"
                        class="vent-margin-t-10">
                        <template #title>
                            <div>{{ device.title }}</div>
                        </template>
                        <template #container>
                            <div>
                                <template v-for="(deviceChild, deviceChildIndex) in device.children"
                                    :key="deviceChildIndex">
                                    <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
                                        <div v-if="deviceChild.key.length > 1"
                                            class="parameter-title group-parameter-title">
                                            <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{
                                                deviceChild.childTitle[deviceIndex] }}</span>
                                        </div>
                                        <div class="input-box">
                                            <div v-for="(item, index) in deviceChild.list" class="input-item"
                                                :key="index">
                                                <div :class="{
                                                    'w-280px': item.type == 'sign' || item.type == 'warning',
                                                    title: item.type !== 'sign' && item.type !== 'warning',
                                                }">{{ item.title }}：</div>
                                                <template v-if="item.type !== 'sign' && item.type !== 'warning'">
                                                    <div class="value">{{
                                                        selectData && selectData[deviceKey + item.code] ?
                                                        formatNum(selectData[deviceKey + item.code], 1) : '-'
                                                        }}</div>
                                                </template>
                                                <template v-else>
                                                    <div class="value">
                                                        <span :class="{
                                                            'signal-round': true,
                                                            'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
                                                            'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
                                                            'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
                                                        }"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </ventBox1>
                </div>
            </div>
        </div>
        <div ref="playerRef" class="player-box" :class="{ 'sw-player': sysOrgCode == 'sdmtjtswmk' }"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, defineProps, inject, onBeforeUnmount } from 'vue';
import { devicePropertyType, propertyListType, getMonitorData } from '../nitrogen.data.1';
import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
import { list } from '../nitrogen.api';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import { formatNum } from '/@/utils/ventutil';
import { useCamera } from '/@/hooks/system/useCamera';
import { useGlobSetting } from '/@/hooks/setting';

const props = defineProps({
    deviceId: {
        type: String,
        require: true,
    },
    deviceType: {
        type: String,
        require: true,
    },
});
const { sysOrgCode } = useGlobSetting();
// const sysOrgCode = 'sdmtjtswmk';
const loading = ref(false);
const monitorDataGroup = ref<Number[]>([]);
const monitorDataGroupFlag = ref(1);
const playerRef = ref();
const deviceProperty = ref({
    leftMonitor: [] as devicePropertyType[],
    rightMonitor: [] as devicePropertyType[],
    modelMonitor: [] as devicePropertyType[],
    detailCtrl: [] as devicePropertyType[],
    monitorDataGroupArr: [],
    totalData: [] as propertyListType[],
});
deviceProperty.value = await getMonitorData(props.deviceType);

// 监测数据
// const selectData = reactive({});
const selectData = ref<Object | []>({});
const { getCamera, removeCamera } = useCamera();

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
async function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
        return new Promise(async (resolve) => {
            timer = await setTimeout(
                async () => {
                    await getDataSource();
                    if (timer) {
                        timer = null;
                    }
                    resolve(null);
                    await getMonitor(false);
                },
                flag ? 0 : 1000
            );
        });
    }
}

async function getDataSource() {
    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
    let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];
    // dataSource = {
    //   msgType: null,
    //   deviceID: '1781605808973565954',
    //   strname: '压风机',
    //   strinstallpos: '压风机',
    //   fsectarea: 'null',
    //   stationname: '压风机',
    //   stationtype: 'redis',
    //   deviceType: 'forcFan_normal',
    //   typeName: '压风机',
    //   netStatus: 1,
    //   warnFlag: 0,
    //   warnLevel: 0,
    //   warnLevel_str: '正常',
    //   warnTime: null,
    //   readTime: '2024-04-23 08:23:49',
    //   warnDes: '',
    //   frontGateOpenCtrl: null,
    //   rearGateOpenCtrl: null,
    //   readData: {
    //     PRE3_CPR_CoolantTemp: '62.0',
    //     PRE1_MOT_PhaseATemp: '59.0',
    //     PRE3_MOT_PhaseCTemp: '56.02',
    //     PRE2_CPR_HeadTemp: '81.0',
    //     sign: '0',
    //     PRE1_CPR_UnLoadPre: '6.0',
    //     PRE3_CPR_ExhaustPre: '5.7',
    //     PRE1_CPR_LoadorUnload: '0',
    //     PRE2_MOT_PhaseATempAlarm: '0',
    //     PRE2_CPR_ExhaustTemp: '18.01',
    //     PRE1_MOT_StopFail: '0',
    //     PRE3_MOT_StopFail: '0',
    //     PRE1_HMIReset: '0',
    //     PRE2_HMIStop: '0',
    //     PRE1_MOT_Ready: '1',
    //     PRE2_CPR_LoadorUnload: '0',
    //     PRE3_MOT_PhaseBTemp: '66.0',
    //     Reset: '0',
    //     PRE1_CPR_ExhaustPre: '5.3',
    //     PRE3_FaultSignal: '0',
    //     PRE1_MOT_PhaseATempAlarm: '0',
    //     PRE2_MOT_PhaseBTempAlarm: '0',
    //     PRE3_MOT_PhaseCTempAlarm: '0',
    //     PRE2_HMIStart: '0',
    //     PRE1_MOT_StartFail: '0',
    //     PRE3_MOT_PhaseATemp: '66.0',
    //     PRE2_CPR_CoolantTemp: '53.0',
    //     PRE3_HostorLoc: '0',
    //     PRE1_FaultSignal: '0',
    //     PRE2_FaultSignal: '0',
    //     PRE3_MOT_RunReturn: '1',
    //     PRE1_HMIStart: '0',
    //     PRE1_MOT_TotalRunTime: '6313.0',
    //     'PRE1_MOT_Pha seBTempAlarm': '0',
    //     PRE1_CPR_LoadTime: '5184.0',
    //     PRE2_MOT_PhaseCTempAlarm: '0',
    //     PRE2_CPR_LoadTime: '3328.0',
    //     PRE1_CPR_HeadTemp: '73.0',
    //     PRE3_CPR_LoadTime: '5920.0',
    //     PRE2_MOT_StartFail: '0',
    //     PRE2_MOT_PhaseBTemp: '61.0',
    //     PRE2_HostorLoc: '0',
    //     PRE3_HMIStop: '0',
    //     PRE3_CPR_HeadTemp: '84.0',
    //     PRE2_MOT_TotalRunTime: '4272.0',
    //     PRE3_HMIReset: '0',
    //     PRE2_MOT_Ready: '1',
    //     PRE2_MOT_RunReturn: '1',
    //     PRE3_MOT_PhaseBTempAlarm: '0',
    //     PRE2_MOT_StopFail: '0',
    //     PRE3_CPR_UnLoadPre: '6.0',
    //     PRE2_CPR_ExhaustPre: '5.7',
    //     PRE3_CPR_ExhaustTemp: '18.09',
    //     PRE3_MOT_StartFail: '0',
    //     PRE3_MOT_TotalRunTime: '8474.0',
    //     PRE2_MOT_PhaseATemp: '60.0',
    //     PRE1_MOT_PhaseCTempAlarm: '0',
    //     PRE3_HMIStart: '0',
    //     PRE1_HMIStop: '0',
    //     PRE3_MOT_Ready: '0',
    //     PRE1_HostorLoc: '0',
    //     PRE1_CPR_LoadPre: '5.0',
    //     PRE1_MOT_RunReturn: '0',
    //     PRE2_MOT_CtrlMode: '0',
    //     PRE2_HMIReset: '0',
    //     PRE1_MOT_CtrlMode: '0',
    //     PRE3_CPR_LoadPre: '5.0',
    //     PRE2_CPR_LoadPre: '5.0',
    //     PRE3_MOT_CtrlMode: '0',
    //     PRE1_MOT_PhaseCTemp: '58.0',
    //     PRE3_CPR_LoadorUnload: '1',
    //     TotalOutPipePre: '5.85',
    //     PRE1_MOT_PhaseBTemp: '60.0',
    //     PRE2_MOT_PhaseCTemp: '55.02',
    //     PRE1_CPR_CoolantTemp: '55.0',
    //     PRE3_MOT_PhaseATempAlarm: '0',
    //     PRE2_CPR_UnLoadPre: '6.0',
    //     isRun: '-2',
    //     PRE1_CPR_ExhaustTemp: '16.12',
    //     TotalOutPipeFlow: '884.0',
    //   },
    //   readDataDes: null,
    //   summaryHour: [],
    //   summaryDay: [],
    //   history: [],
    //   dayhistory: [],
    //   totalInfo: null,
    //   sign: null,
    //   cameras: [],
    //   links: [],
    //   other1: null,
    //   other2: null,
    //   other3: null,
    //   remarkInfo: null,
    //   linkInfo: null,
    // };
    if (dataSource) {
        Object.assign(selectData.value, dataSource, dataSource.readData);
    }
    loading.value = false;
}

function setMonitorGroupNum(flag) {
    if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
    const monitorGroup = deviceProperty.value.monitorDataGroupArr[flag - 1];
    setModelType('compressor' + (flag - 1));
    monitorDataGroup.value = monitorGroup;
}

function handleOK() { }

function handleCancel() { }

// 判断是否应该在某套件（组别）下展示监测数据详情
function getShowModelMonitor(config: devicePropertyType, groupNum: number) {
    if (config.hideInGroup) {
        return !config.hideInGroup.includes(groupNum);
    }
    return !!config.list.length;
}

onMounted(async () => {
    setTimeout(() => {
        mountedThree(deviceProperty.value.monitorDataGroupArr).then(async () => {
            setMonitorGroupNum(1);
            getMonitor(true).then(async () => {
                if (selectData.value && selectData.value['deviceID']) await getCamera(selectData.value['deviceID'], playerRef.value);
            });
        });
    }, 0);
});
onBeforeUnmount(() => {
    removeCamera();
});
onUnmounted(() => {
    destroy();
    removeCamera();
    if (timer) {
        clearTimeout(timer);
        timer = undefined;
    }
});
</script>
<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@import '../../comment/less/workFace.less';
@ventSpace: zxm;

.monitor-container {
    position: fixed;
    width: 100%;
}

.compressorCss3D-box {
    pointer-events: auto;

    .modal-monitor {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    &:deep(.win) {
        margin: 0 !important;
        background: #00000044;
    }

    &:deep(.main) {
        .title {
            height: 34px;
            text-align: center;
            font-weight: 600;
            color: #7af5ff;
            // background-image: url('../../../assets/img/yfj/light.png');
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: 100%;
            background-size: 80%;
            font-size: 16px;
        }

        .monitor-item {
            display: flex;
            flex-direction: row;
            width: auto;
            margin-bottom: 3px;

            .monitor-val {
                color: #ffb700;
                display: flex;
                width: auto;

                .val {
                    width: 80px;
                    font-size: 14px;
                }

                .unit {
                    color: #ffffffbb;
                    font-size: 14px;
                }
            }
        }

        .monitor-title {
            width: 100px;
            color: #7af5ff;
            font-weight: 400;
            font-size: 14px;
        }

        .signal-item {
            display: flex;
            justify-content: space-between;

            // margin-bottom: 5px;
            .signal-round {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin: 0 10px;
                position: relative;

                &::after {
                    display: block;
                    content: '';
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    top: -2px;
                    left: -2px;
                    border-radius: 50%;
                }
            }

            .signal-round-gry {
                background-color: #858585;

                &::after {
                    background-color: #85858544;
                    box-shadow: 0 0 1px 1px #85858599;
                }
            }

            .signal-round-run {
                background-color: #67fc00;

                &::after {
                    background-color: #67fc0044;
                    box-shadow: 0 0 1px 1px #c6ff77;
                }
            }

            .signal-round-warning {
                background-color: #e9170b;

                &::after {
                    background-color: #e9170b44;
                    box-shadow: 0 0 1px 1px #e9170b;
                }
            }
        }
    }
}

.total-data {
    position: absolute;
    top: 40px;
    right: 100px;
    z-index: 999;
    color: #e4cd00;

    .item {
        width: 200px;
        margin-left: 30px;

        .val {
            color: #00d8ff;
        }
    }
}

.nitrogen-home {
    width: 100%;
    height: calc(100%);
    position: fixed;
    z-index: 0;
    height: calc(100%);
    display: flex;
    justify-content: space-between;
    position: relative;
    top: 20px;
    pointer-events: none;

    .lr {
        margin-top: 0 !important;
    }

    .left-box {
        width: 360px !important;
        direction: rtl;
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100% - 60px);
        margin-top: 30px !important;

        .left-container {
            direction: ltr;

            :deep(.input-item .title) {
                width: 220px !important;
            }
        }
    }

    .right-box {
        width: 360px !important;
        overflow-y: auto;
        overflow-x: hidden;

        .environment-monitor {
            .item {
                flex: 1;
                margin: 0 5px;

                .title {
                    color: #7ae5ff;
                    text-align: center;
                    margin-bottom: 2px;
                }

                .num {
                    width: 100%;
                    height: 30px;
                    text-align: center;
                    border-top: 2px solid #50c8fc;
                    border-radius: 4px;
                    background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
                }
            }
        }

        .pool-box {
            width: 327px;
            height: 65px;
            padding: 0 5px;
            background: url('/@/assets/images/vent/pump1.png') no-repeat;
            background-size: cover;
            background-origin: content-box;
            margin-top: 2px;

            .num {
                color: aqua;
            }

            .center {
                padding-right: 5px;
            }
        }
    }
}

.device-state {
    width: 100%;
    position: absolute;
    top: 30px;
    color: #e90000;
    display: flex;
    justify-content: center;
    font-size: 20px;
}

.player-box {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0 20px 0 20px;
    z-index: 9999;
    display: flex;
    align-items: end;
    bottom: 80px;
    pointer-events: none;

    :deep(#LivePlayerBox) {
        display: flex;
        justify-content: end;
    }
}

//**上湾视频样式 */
.sw-player {
    right: 350px;
    bottom: 130px;
    display: flex;
    flex-direction: row;
}

.input-box {
    width: calc(100%);
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    .input-item {
        width: calc(50% - 8px);
        padding: 0 2px;

        &:nth-child(2n) {
            margin-left: 4px;
        }
    }
}

.btn-group {
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: end;
    right: 380px;
    top: 85px;
    pointer-events: auto;

    .btn-item {
        width: auto;
        text-align: center;
    }
}

.state-header {
    display: flex;
    color: #73e8fe;

    .header-item {
        width: 25%;
        text-align: center;
    }
}

.device-row {
    display: flex;
    margin-top: 10px;

    .state {
        width: 25%;
        text-align: center;
        font-size: 13px;
    }
}

:deep(.@{ventSpace}-tabs-tabpane-active) {
    overflow: auto;
}
</style>