settle_down_web/src/views/testProfile/devicedetail.vue

<template>
    <div>
        <my-dialog :dialogVisible="dialogVisible" @closeVideo="dialogVisible = false">
            <template slot="dialogBody">
                <div class="title">
                    <div class="first-title">设备详情</div>
                    <div class="secod-title">监测数据</div>
                </div>
                <div class="form" style="background: #0D2F76">
                    <table border="1" cellpadding="40px" cellspacing="0" width="100%">
                        <tbody>
                        <tr>
                            <td>标识码：</td>
                            <td>{{ ztData.bsm }}</td>
                            <td>设备状态：</td>
                            <td>{{ ztData.sbzt_name }}</td>
                        </tr>
                        <tr>
                            <td>点位标识码：</td>
                            <td>{{ ztData.dwbsm }}</td>
                            <td>厂商名称：</td>
                            <td>{{ ztData.csmc }}</td>
                        </tr>
                        <tr>
                            <td>设备类型：</td>
                            <td>{{ ztData.sblx_name }}</td>
                            <td>相对高度：</td>
                            <td>{{ ztData.xdgd }}</td>
                        </tr>
                        <tr>
                            <td>设备名称：</td>
                            <td>{{ ztData.sbmc }}</td>
                            <td>安装时间：</td>
                            <td>{{ ztData.azsj }}</td>
                        </tr>
                        <tr>
                            <td>监测指标：</td>
                            <td>{{ ztData.jczb_name }}</td>
                            <td>供电方式：</td>
                            <td>{{ ztData.gdfs }}</td>
                        </tr>
                        <tr>
                            <td>采集频率：</td>
                            <td>{{ ztData.cjpl }}</td>
                            <td>备注：</td>
                            <td>{{ ztData.bz }}</td>
                        </tr>
                        <tr>
                            <td>上传频率：</td>
                            <td>{{ ztData.scpl }}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>

                    </table>
                </div>
            </template>
        </my-dialog>
    </div>

</template>

<script>
import myDialog from '@/components/my-dialog/dialogFor.vue'

export default {
    components: {
        myDialog
    },
    name: 'dangerDialog',
    data() {
        return {
            ztData: {},
            dialogVisible: false

        }
    },
    methods: {
        setVisible(item) {
            this.ztData = {}
            this.ztData = item
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 35px;
    color: white;
    display: flex;
    justify-content: center;
    /* margin-top: 60px; */
    font-weight: 400;
    padding-top: 60px;

    .first-title {
        margin-right: 40px;
        color: #FEC12D;
    }

    .secod-title {
        color: #FFFFFF;
    }
}

.form {
    padding: 57px;

    td {
        border: 1px solid white;
        color: white;
        font-size: 30px;
    }
}
</style>