mky-vent-base/src/views/vent/monitorManager/alarmMonitor/common/faultDiagnose.vue

<template>
    <div class="faultDiagnose">
        <div class="top-box">
            <div class="nav" v-for="(item, index) in topList" :key="index">
                <div class="pic" v-if="item.imgSrc">
                    <img :src="imgUrl" alt="" />
                    <SvgIcon class="icon-style" :name="item.icon"
                        style=" position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%); width: 60px; height: 38px" />
                </div>
                <div class="content" v-if="item.label && item.value">
                    <span>{{ item.label }}</span>
                    <span>{{ item.value }}</span>
                </div>
                <!-- <div class="text" v-if="item.text">{{ item.text }}</div> -->
                <!-- <div class="percent" v-if="item.list.length != 0">
                    <div class="title">{{ item.label }}</div>
                    <div class="value">
                        <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
                            <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
                            <span style="color: var(--vent-table-action-link); margin-left: 10px">{{ `${items.value}%`
                                }}</span>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="bot-box">
            <div class="left-area-box">
                <div class="title-t">
                    <div class="text-t">历史数据图表</div>
                </div>
                <a-form :model="formState" layout="inline" :label-col="{ style: { width: '80px' } }"
                    :wrapper-col="{ span: 8 }">
                    <a-form-item label="开始时间：">
                        <a-date-picker v-model:value="formState.ttime_begin" style="width:220px" show-time
                            valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
                    </a-form-item>
                    <a-form-item label="结束时间：">
                        <a-date-picker v-model:value="formState.ttime_end" style="width:220px" show-time
                            valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" />
                    </a-form-item>
                    <a-form-item label="">
                        <a-button type="primary" @click="getSearchHis">查询</a-button>
                    </a-form-item>
                </a-form>
                <div class="echart-area-box">
                    <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="hisEchartData"
                        height="100%" width="100%" :chartsColumns="chartsColumnList" :option="echatsOption" />
                </div>
            </div>
            <div class="right-area-box">
                <div class="title-t">
                    <div class="text-t">瓦斯抽采泵信息</div>
                </div>
                <div class="echart-area-box">
                    <echartLine :echartDataGq="echartData" :maxY="maxY" :minY="minY" :echartDw="echartDw"
                        :gridV="gridV" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import dayjs from 'dayjs';
import imgUrl from '/@/assets/images/fire/pie.png';
import { SvgIcon } from '/@/components/Icon';
import echartLine from './echartLine.vue';
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { getMaxY, getMinY } from '../common.data'
let props = defineProps({
    timeData: {
        type: String,
        default: ''
    },
    //顶部区域数据
    topData: {
        type: Array,
        default: () => {
            return []
        }
    },
    //历史数据图表
    xAxisPropType: {
        type: String,
        default: ''
    },
    hisEchartData: {
        type: Array,
        default: () => {
            return []
        }
    },
    //报警历史数据曲线
    echartData: {
        type: Object,
        default: () => {
            return {}
        }
    },
})

let formState = reactive({
    ttime_begin: '',
    ttime_end: ''
})
let maxY = ref<any>(0)
let minY = ref<any>(0)
let echartDw = ref('(m³/min)');
let chartsColumnList = reactive([
    {
        legend: '流量',
        seriesName: '(m³/min)',
        ymax: 15,
        yname: 'ppm',
        linetype: 'line',
        yaxispos: 'left',
        color: '#FDB146',
        sort: 1,
        xRotate: 0,
        dataIndex: 'gdlyVal',
    },
    {
        legend: '负压',
        seriesName: '(Pa)',
        ymax: 20,
        yname: '%',
        linetype: 'line',
        yaxispos: 'right',
        color: '#9C83D9',
        sort: 2,
        xRotate: 0,
        dataIndex: 'fyVal',
    },
])
let echatsOption = reactive({
    grid: {
        top: '10%',
        left: '4',
        right: '18',
        bottom: '2%',
        containLabel: true,
    },
    toolbox: {
        feature: null,
    },
})

let gridV = reactive({
    top: '5%',
    left: '2%',
    bottom: '2%',
    right: '2%',
    containLabel: true,
})
let pointHisWarnData = reactive({
    x: 0,
    y: 0,
})
let $emit = defineEmits(['getSearchHis'])
const topList = ref<any[]>()


const getSearchHis = () => {
    $emit('getSearchHis', formState)
}

watch(() => props.timeData, (newV, oldV) => {
    if (newV) {
        let index = newV.indexOf(' ')
        let specificTime = dayjs(`${newV.substring(0, index)}T${newV.substring(index + 1)}`)
        formState.ttime_begin = specificTime.subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
        formState.ttime_end = specificTime.add(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
    }
}, {
    immediate: true
})
watch(() => props.topData, (newT, oldT) => {
    if (newT) {
        topList.value = newT
    }
}, {
    immediate: true
})
watch(() => props.echartData, (newE, oldE) => {
    if (newE.maxData.data.length != 0 && newE.xData.length != 0) {
        let echartD = [newE.maxData.data, newE.minData.data]
        maxY.value = getMaxY(echartD)
        minY.value = getMinY(echartD)
        // let max1 = newE.maxData.data.reduce((acr, cur) => {
        //     return acr > cur ? acr : cur;
        // });
        // let max2 = newE.minData.data.reduce((acr1, cur1) => {
        //     return acr1 > cur1 ? acr1 : cur1;
        // });
        // maxY.value = max1 >= max2 ? max1 : max2;
        // 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;
        // }
    }
}, { immediate: true, deep: true })
</script>

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

@{theme-deepblue} {
    .faultDiagnose {
        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
        --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
    }
}

.faultDiagnose {
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-max: url('/@/assets/images/fire/max.svg');
    --image-min: url('/@/assets/images/fire/min.svg');
    --image-pj: url('/@/assets/images/fire/pj.svg');
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-14174: url('/@/assets/images/fire/14174.png');
    --image-contetn: url('/@/assets/images/fire/contetn.png');
    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
    width: 100%;
    height: 100%;

    .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 120px;
        margin-bottom: 10px;
        padding: 10px;
        background: var(--image-bj1) no-repeat center;
        background-size: 100% 100%;
        box-sizing: border-box;

        .nav {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            height: 100%;
            border-right: 2px solid;
            border-image: var(--border-image-2) 1 1 1;
            // &:nth-child(1) {
            //     flex: 1;
            //     height: 100%;
            //     border-right: 2px solid;
            //     border-image: var(--border-image-2) 1 1 1;
            // }

            // &:nth-child(2) {
            //     flex: 1;
            //     height: 100%;
            //     border-right: 2px solid;
            //     border-image: var(--border-image-2) 1 1 1;
            // }

            // &:nth-child(3) {
            //     flex: 1;
            //     height: 100%;
            //     border-right: 2px solid;
            //     border-image: var(--border-image-2) 1 1 1;
            // }

            // &:nth-child(4) {
            //     flex: 0.6;
            //     color: #b3b8cc;
            //     font-size: 16px;
            //     height: 100%;
            //     border-right: 2px solid;
            //     border-image: var(--border-image-2) 1 1 1;
            // }

            // &:nth-child(5) {
            //     flex: 1.4;
            //     height: 100%;


            // }

            .pic {
                position: relative;
                width: 30%;
                height: 82%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                height: 82%;
                margin-left: 15px;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                span {
                    font-size: 14px;

                    &:nth-child(1) {
                        padding: 5px 0px;
                        color: #b3b8cc;
                    }

                    &:nth-child(2) {
                        font-family: 'douyuFont';
                        font-size: 16px;
                        color: var(--vent-table-action-link);
                    }
                }
            }
        }

        // .nav:nth-child(1) .pic {
        //     background: var(--image-max) no-repeat center;
        //     background-size: 50% 50%;
        // }

        // .nav:nth-child(2) .pic {
        //     background: var(--image-min) no-repeat center;
        //     background-size: 50% 50%;
        // }

        // .nav:nth-child(3) .pic {
        //     background: var(--image-pj) no-repeat center;
        //     background-size: 50% 50%;
        // }
    }

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

        .text-t {
            font-family: 'douyuFont';
            font-size: 14px;
            color: #fff;
        }
    }

    .bot-box {
        display: flex;
        justify-content: space-between;
        height: calc(100% - 130px);

        .left-area-box {
            width: calc(50% - 5px);
            height: 100%;
            padding: 10px;
            background: var(--image-bj1) no-repeat center;
            background-size: 100% 100%;
            box-sizing: border-box;

            .echart-area-box {
                height: calc(100% - 75px)
            }
        }

        .right-area-box {
            width: calc(50% - 5px);
            height: 100%;
            padding: 10px;
            background: var(--image-bj1) no-repeat center;
            background-size: 100% 100%;
            box-sizing: border-box;

            .echart-area-box {
                height: calc(100% - 40px)
            }
        }
    }

}

::v-deep .zxm-form-item-label>label {
    color: #ccc
}

:deep(.zxm-picker-input > input) {
    color: #fff;
}

:deep(.zxm-picker) {
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
    color: #fff !important;
}

:deep(.zxm-picker-suffix) {
    color: #fff;
}
</style>