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" :echartDw="echartDw" :gridV="gridV" :pointHisWarnData="pointHisWarnData" />
              </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';
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 {}
        }
    },
    //报警历史曲线交点坐标
    pointHisWarnDatas:{
        type:Object,
        default:()=>{
            return {}
        }
    }
})

let formState = reactive({
    ttime_begin: '',
    ttime_end: ''
})
  let maxY=ref(100000)
  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({})
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.pointHisWarnDatas,(newP,oldP)=>{
    pointHisWarnData=Object.assign({},newP)
},{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>