SafetyScreen-ui/src/components/home/leftSeven.vue

<template>
    <div class="edge-device-page">
        <div class="inner-tit">
            <img src="../../assets/img/lef-badge.png" alt="" />
            <div>基坑检测</div>
            <div class="select">
                <el-select
                    v-model="pitVal"
                    clearable
                    filterable
                    placeholder="请选择"
                    @change="pitChange"
                >
                    <el-option
                        v-for="item in pitRange"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="work-icons">
            <div class="single-icon">
                <span style="color: #3bc7e3"
                    >{{
                        environmentInfoList
                            ? environmentInfoList[0].jcValue
                            : ''
                    }}<span style="font-size: 18px">%VOL</span></span
                >
                <span>含氧量</span>
                <img src="../../assets/img/O2.png" alt="" />
            </div>
            <div class="single-icon">
                <span style="color: #7588ff"
                    >{{
                        environmentInfoList
                            ? environmentInfoList[1].jcValue
                            : ''
                    }}<span style="font-size: 18px">%PPM</span></span
                >
                <span>一氧化碳</span>
                <img src="../../assets/img/CO.png" alt="" />
            </div>
            <div class="single-icon">
                <span style="color: #62c560"
                    >{{
                        environmentInfoList
                            ? environmentInfoList[2].jcValue
                            : ''
                    }}<span style="font-size: 18px">%LEL</span></span
                >
                <span>可燃气体</span>
                <img src="../../assets/img/fire.png" alt="" />
            </div>
            <div class="single-icon">
                <span style="color: #f68f84"
                    >{{
                        environmentInfoList
                            ? environmentInfoList[3].jcValue
                            : ''
                    }}<span style="font-size: 18px">%PPM</span></span
                >
                <span>硫化氢</span>
                <img src="../../assets/img/H2S.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import {
    queryDeviceByProApi,
    queryPitDataApi,
    queryLimitSpaceApi,
    queryNewLimitSpaceApi,
    queryEnvironmentInfoByIdApi,
} from '@/api/substation/substation'

export default {
    props: {
        proId: {
            type: Number,
            default: undefined,
        },
    },
    name: 'LeftSeven',
    components: {},
    data() {
        return {
            environmentInfoList: undefined,
            currentPit: undefined,
            pitVal: undefined,
            pitRange: [],
            // 暂定 0离线 1报警 2在线
            pitList: [],
            todayRecordList: [],
        }
    },
    created() {},
    mounted() {},
    watch: {
        proId: {
            handler: function (val) {
                console.log('🚀 ~ watch--子组件 val:', val)
                if (val) {
                    this.getDeviceData(val)
                } else {
                    this.pitVal = ''
                    this.pitRange = []
                    this.environmentInfoList = undefined
                }
            },
            immediate: true,
        },
    },
    methods: {
        async getDeviceData(proId) {
            let res = await queryDeviceByProApi({
                proId,
                devType: 119,
            })
            if (res.data.data.length> 0) {
                this.pitVal = res.data.data[0].devId
                this.pitList = res.data.data
                this.pitRange = res.data.data.map((item) => {
                    return {
                        label: item.devName,
                        value: item.devId,
                    }
                })
                await this.getEnvironmentData(this.pitVal)
            } else {
                this.pitVal = ''
                this.pitRange = []
                this.environmentInfoList = undefined
            }
        },
        async getEnvironmentData(devId) {
            let res = await queryEnvironmentInfoByIdApi({
                devId,
            })
            if (res.data.data.length > 0) {
                this.environmentInfoList = res.data.data
            } else {
                this.environmentInfoList = undefined
            }
        },
        pitChange(e) {
            console.log(e)
            this.getEnvironmentData(e)
        },
    },
}
</script>

<style lang="scss" scoped>
@font-face {
    font-family: 'YouShe';
    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
}

.edge-device-page {
    height: 100%;
    background-color: #f3f7ff;
    box-sizing: border-box;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #eff2fc;
    box-shadow: 2px 2px 2px #d9e0f3;

    .inner-tit {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        background-color: #eff4fe;
        display: flex;
        align-items: center;
        color: #000;
        font-size: 20px;
        font-family: 'YouShe', sans-serif;
        box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
            -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
        margin-bottom: 15px;

        img {
            margin-right: 10px;
        }
    }
    .select {
        margin-left: 20px;
    }

    .work-icons {
        margin-top: 100px;
        display: flex;
        flex: 1;
        justify-content: space-around;

        .single-icon {
            width: 12%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #000;

            span:first-child {
                font-size: 24px;
                padding-bottom: 3px;
            }

            span:nth-child(2) {
                font-size: 18px;
            }

            img {
                width: 90%;
                height: 90%;
            }
        }
    }
}
</style>