mky-vent-5/src/views/vent/monitorManager/fireMonitor/index.vue

<template>
    <div class="vent-home-header">
        <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
        <div class="header-text">皮带机监测</div>
    </div>
    <div class="fire-box">
        <div class="fire-top">
            <div class="top-lr top-left">
                <div class="lr-item">
                    <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
                        <div class="item-top-title">火焰传感器监测</div>
                        <div class="scroll-box">
                            <!-- <ScrollBoard :config="hyConfig" ref="hyScrollBoard" style="width:100%;height:calc(100% - 40px)" @mouseover="mouseoverHandler" @click="clickHandler" /> -->
                        </div>
                    </BorderBox1>
                </div>
                <div class="lr-item">
                
                    <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
                        <div class="item-top-title">烟雾传感器监测</div>
                        <div class="scroll-box">
                            <ScrollBoard :config="ywConfig" ref="ywScrollBoard" style="width:100%;height:calc(100% - 40px)" @mouseover="mouseoverHandler" @click="clickHandler" />
                        </div>
                    </BorderBox1>
                </div>
            </div>
            <div class="top-lr top-right">
                <div class="lr-item">
                    <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
                        <div class="item-top-title">火焰传感器监测</div>
                        <div class="scroll-box">
                            <ScrollBoard :config="hyConfig" ref="hyScrollBoard" style="width:100%;height:calc(100% - 40px)" @mouseover="mouseoverHandler" @click="clickHandler" />
                        </div>
                    </BorderBox1>
                </div>
                <div class="lr-item">
                    
                    <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
                        <div class="item-top-title">喷淋灭火装置监测</div>
                        <div class="scroll-box">
                            <ScrollBoard :config="plConfig" ref="plScrollBoard" style="width:100%;height:calc(100% - 40px)" @mouseover="mouseoverHandler" @click="clickHandler" />
                        </div>
                    </BorderBox1>
                </div>
            </div>
        </div>
        <div class="fire-bottom">
            <BorderBox11 title="光纤测温实时监测" :color="['#00FFFF']">
                <BarAndLine
                xAxisPropType="readTime"
                :dataSource="[]"
                height="100%"
                :chartsColumns="[]"
                chartsType="detail"
                @refresh="refreshEchatrs"
                />
            </BorderBox11>
        </div>
    </div>
</template>
<script setup lang="ts">
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { BorderBox1, ScrollBoard, BorderBox11, Decoration5 } from '@kjgl77/datav-vue3';
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { hyConfigFn, ywConfigFn, plConfigFn } from './fire.data'
import { list } from './fire.api'

const hyScrollBoard = ref()
const ywScrollBoard = ref()
const plScrollBoard = ref()

const hyConfig = hyConfigFn()
const ywConfig = ywConfigFn()
const plConfig = plConfigFn()

const wdOption = reactive(
    {
        legend: '温度',
        seriesName: '(℃)',
        ymax: 50,
        yname: '℃',
        linetype: 'bar',
        yaxispos: 'right',
        color: '#FC4327',
        sort: 2,
        xRotate: 0,
        dataIndex: 'temperature',
    },
)

function mouseoverHandler(e: any) {
    console.log(e)
}

function clickHandler(e: any) {
    console.log(e)
}

let timer: null | NodeJS.Timeout | undefined = null;
async function getMonitor(flag?) {
    if(timer === null){
        timer = setTimeout(async() => {
            const result = await list({ pagetype: "normal", devicetype: "sys", systemID: "1637983899775242242" })
            const hyDatas: any[] = [], ywDatas: any[] = [], plDatas: any[] = [], wdDatas: any[] = [];

            result.forEach(item => {

                if (item.msgTxt.type === 'modelsensor_fire') {
                    item.msgTxt.datalist.forEach((dataObj) => {
                        hyDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)])
                    })
                }
                if (item.msgTxt.type === 'modelsensor_smoke') {
                    item.msgTxt.datalist.forEach((dataObj) => {
                        ywDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)])
                    })
                }
                if (item.msgTxt.type === 'modelsensor_temperature') {
                    item.msgTxt.datalist.forEach((dataObj) => {
                        wdDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)])
                    })
                }
                if (item.msgTxt.type === 'modelsensor_fire') {
                    item.msgTxt.datalist.forEach((dataObj) => {
                        plDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)])
                    })
                }
            })
            hyScrollBoard.value.updateRows(hyDatas)
            ywScrollBoard.value.updateRows(ywDatas)
            plScrollBoard.value.updateRows(plDatas)
            // hyConfig.data = hyDatas
            // ywConfig.data = ywDatas
            // plConfig.data = plDatas

            await getMonitor()
        }, flag ? 0 : 5000)

        if(timer){
            timer = null
        }
    }
}

async function refreshEchatrs() {
    timer = null;
    await getMonitor(true);
    console.log('echarts 刷新');
}

onMounted(async() => {
    await getMonitor(true);
})
onUnmounted(() => {
    timer = undefined
})

</script>

<style lang="less" scoped>
.vent-home-header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    z-index: 99;
    .header-icon{
      margin-top: 45px;
    }
    .header-text{
      position: fixed;
      top: 18px;
      color: #fff;
      font-size: 26px;
    }
  }
.fire-box{
    position: relative;
    z-index: 999;
    width: 100%;
    height: calc(100% - 48px);
    top: 0px;
    pointer-events: none;
    .fire-top{
        height: calc(100% - 300px);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .top-lr{
            width: 400px;
            height: 100%;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            .lr-item{
                flex: 1;
                margin-top: 20px;
                .item-top-title{
                    position: relative;
                    top: -5px;
                    color: #fff;
                }
            }
        }
        .top-right{
            
        }
    }
    
    .fire-bottom{
        height: 300px;
    }
    .scroll-box{
        padding: 0 20px;
        height: 100%;
    }
}
</style>