mky-vent-base/src/views/vent/monitorManager/comment/gasInspectDialog.vue

<template>
    <div class="gasInspectDialog">
        <div class="info-xj-title">
            <span>当前巡检进度</span>
            <span style="margin-left: 10px">{{ inspectJd || '' }}</span>
        </div>
        <div class="info-xj-content">
            <div class="xj-content-item" v-for="(item, index) in inspectList" :key="index">
                <div class="content-item-title">{{ item.label }}</div>
                <div class="content-item-val">{{ item.val }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted, watch, onUnmounted, } from 'vue';
import {queryNowGasSta} from '../deviceMonitor/components/device/device.api';
import {  message,} from 'ant-design-vue';
let props = defineProps({
    gasSearch: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const inspectJd = ref<any>('');
    const inspectList = reactive<any[]>([
    { label: '第一次巡检已检数', val: 0 },
    { label: '第一次巡检未检数', val: 0 },
    { label: '第二次巡检已检数', val: 0 },
    { label: '第二次巡检未检数', val: 0 },
]);

async function getGasSta(param){
    if (!param.insType) {
        message.warning('请选择巡检类型!');
    } else if (!param.class) {
        message.warning('请选择巡检班次!');
    } else {
        let res = await queryNowGasSta({ insType: param.insType, class: param.class });
        console.log(res, '巡检弹窗信息');
        if (res) {
            inspectJd.value = res.comRate || 0;
            inspectList[0].val = res.finishNum1 || 0;
            inspectList[1].val = res.missNum1 || 0;
            inspectList[2].val = res.finishNum2 || 0;
            inspectList[3].val = res.missNum2 || 0;
        }
    }
}
watch(()=>props.gasSearch,(newG,oldG)=>{
    console.log(newG,'nreG--------')
    getGasSta(newG)
},{immediate:true,deep:true})
onMounted(() => { });
</script>

<style lang="less" scoped>
.gasInspectDialog {
    width: 100%;
    height: 100%;

    .info-xj-title {
        width: 230px;
        height: 36px;
        line-height: 36px;
        padding-left: 50px;
        margin: 10px 0px;
        color: #fff;
        background: url('@/assets/images/inspect-title.png') no-repeat center;
        background-size: 100% 100%;
    }

    .info-xj-content {
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 56px);
        padding: 10px 0px;
        box-sizing: border-box;

        .xj-content-item {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 126px;
            height: 67px;
            margin: 7px;
            color: #fff;
            padding-bottom: 5px;
            background: url('@/assets/images/inspect-item.png') no-repeat center;

            .content-item-val {
                font-family: 'douyuFont';
                color: #74e9fe;
            }
        }
    }
}
</style>