DX-LargeScreen/src/components2/SpringFrame/xfgj.vue

<template>
    <el-row class="video commonWidth" v-if="state">
        <el-col class="top">
            <el-col class="title">
                <span>消防告警信息</span>
            </el-col>
            <el-image @click="close2" class="close"
            :src="close"
            ></el-image>
        </el-col>
        <el-col class="contain">
            <el-col class="data">
                <el-col class="title" :span="8">
                    设备所属单位：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].companyName || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    安装位置：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].unitInfo || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    设备ID：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].deviceId || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    设备名称：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].deviceName || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    设备类型：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].deviceTypeName || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    告警时间：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].alarmTime || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    告警内容：
                </el-col>
                <el-col class="content" :span="16">
                    {{data[0].property || '--'}}
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    处理状态：
                </el-col>
                <el-col class="content" :span="16">
                  <span :class="data[0].clzt == '0' ? 'color3' : data[0].clzt == '1' ? 'color4' : 'color2'">{{data[0].clzt == '0' ? "未处理" : data[0].clzt == '1' ? "已处理:通过" :  data[0].clzt == '2' ? "已处理:未通过" : "--"}}</span>
                </el-col>
            </el-col>
            <el-col class="data">
                <el-col class="title" :span="8">
                    处置时间：
                </el-col>
                <el-col class="content" :span="16">
                 {{data[0].czTime || '--'}}
                </el-col>
            </el-col>
        </el-col>
    </el-row>
</template>
<script>
import close from "@/assets/images2/close.png";
export default {
    name:"xfgj",
    props:['resInfo'],
    data() {
        return {
            state:false,
            close:close,
            data:[],
        }
    },
    mounted(){
        this.getData()
    },
    methods: {
        getData(){
            this.data.push(this.resInfo)
            this.state = true
        },

        close2(){//关闭
            this.state = false
            this.$emit("close")
        },
    },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
.commonWidth{
    width:950px;
    height:760px;
    background-color: rgba(40,40,40,0.5);
    margin:0 auto;
    border-radius: 20px;
    padding:20px;
    color:$white;
    .top{
        .title{
            width:100%;
            margin-top:-2px;
            margin-left:16px;
            display: inline-block;
            font-size:30px;
        }
        .close{
            width:40px;
            height:40px;
            float:right;
            margin-top:-40px;
            image{
                width:100%;
            }
        }
    }
    .contain{
        .data{
            margin-top:30px;
            font-size: 28px;
            .title{
                text-align: right;
            }
            .content{
                text-align: left;
            }
        }
        .data:nth-child(1){
            margin-top:80px;
        }

    }
}



</style>
<style >
.color1 {
    color: #6F99FA!important;
}

.color2 {
    color: #DE8C54!important
}

.color3 {
    color: #FF5801!important
}

.color4 {
    color: #37FF01!important
}

</style>