bonus-ui/src/views/screen/cityScreen/index.vue

<template>
    <div style="width: 100%">
        <div style="width: 100%; padding: 10px">
            <div class="item-box">
                <div>设备类型:</div>
                <div style="margin-left: 10px; color: blue">{{
                    queryParams.deviceType
                }}</div>
            </div>
            <div class="item-box">
                <div>规格型号:</div>
                <div style="margin-left: 10px">
                    {{ queryParams.specificationType }}</div
                >
            </div>
            <div class="item-box">
                <div>二维码编码:</div>
                <div style="margin-left: 10px">{{ queryParams.qrCode }}</div>
            </div>
            <div class="item-box">
                <div>设备编码:</div>
                <div style="margin-left: 10px">{{ queryParams.maCode }}</div>
            </div>
            <div class="item-box">
                <div>设备状态:</div>
                <div style="margin-left: 10px">{{
                    queryParams.maStatusName
                }}</div>
            </div>
            <!-- <div class="item-box">
            <div >本次检修人员:</div>
            <div style="margin-left: 10px;">{{queryParams.checkMan}}</div>
          </div>   -->
            <div class="item-box">
                <div>本次检修时间:</div>
                <div style="margin-left: 10px; color: blue">{{
                    queryParams.thisCheckTime
                }}</div>
            </div>
            <div class="item-box">
                <div>下次检修时间:</div>
                <div style="margin-left: 10px; color: blue">{{
                    queryParams.nextCheckTime
                }}</div>
            </div>
            <div class="item-box">
                <div>检验人员:</div>
                <div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
            </div>
            <div class="item-box">
                <div>检验结论:</div>
                <div style="margin-left: 10px; color: blue">{{
                    queryParams.inspectStatus || '合格'
                }}</div>
            </div>
            <div class="item-box">
                <div>联系电话:</div>
                <div style="margin-left: 10px">{{ queryParams.phone }}</div>
            </div>
            <div class="item-box">
                <div>生产厂家:</div>
                <div style="margin-left: 10px">{{ queryParams.maVender }}</div>
            </div>
            <div class="item-box">
                <div>出厂日期:</div>
                <div style="margin-left: 10px">{{
                    queryParams.outFacTime
                }}</div>
            </div>
            <div class="item-box">
                <div>出入库次数:</div>
                <div style="margin-left: 10px">{{ queryParams.inOutNum }}</div>
            </div>
            <div class="item-box">
                <div>领料单位:</div>
                <div style="margin-left: 10px"
                    >{{ queryParams.leaseUnit }}
                </div>
            </div>
            <div class="item-box">
                <div>领料工程:</div>
                <div style="margin-left: 10px">{{ queryParams.leasePro }} </div>
            </div>
            <div class="item-box">
                <div>领料时间:</div>
                <div style="margin-left: 10px"
                    >{{ queryParams.leaseTime }}
                </div>
            </div>
            <div class="item-box">
                <div>退料单位:</div>
                <div style="margin-left: 10px">{{ queryParams.backUnit }} </div>
            </div>
            <div class="item-box">
                <div>退料工程:</div>
                <div style="margin-left: 10px">{{ queryParams.backPro }} </div>
            </div>
            <div class="item-box">
                <div>退料时间:</div>
                <div style="margin-left: 10px">{{ queryParams.backTime }} </div>
            </div>
        </div>
        <div class="bottom-box">
            <div
                style="
                    width: 100%;
                    text-align: center;
                    margin-bottom: 20px;
                    color: green;
                    margin-top: 10px;
                "
            >
                检 验 合 格 证
            </div>
            <div style="width: 50%; display: flex; margin-bottom: 10px">
                <div style="color: green">名 称：</div>
                <div style="border-bottom: 1px solid green">{{
                    queryParams.deviceType
                }}</div>
            </div>
            <div style="width: 50%; display: flex; margin-bottom: 10px">
                <div style="color: green">检验结论：</div>
                <div style="color: red; font-size: 18px; font-weight: 600">{{
                    queryParams.inspectStatus || '合格'
                }}</div>
            </div>
            <div style="width: 100%; display: flex; margin-bottom: 10px">
                <div style="color: green">型 号：</div>
                <div style="border-bottom: 1px solid green">{{
                    queryParams.specificationType
                }}</div>
            </div>
            <div style="width: 100%; display: flex; margin-bottom: 10px">
                <div style="color: green">编 号：</div>
                <div style="border-bottom: 1px solid green">{{
                    queryParams.maCode
                }}</div>
            </div>
            <div style="width: 100%; display: flex; margin-bottom: 10px">
                <div style="color: green">本次检验日期：</div>
                <div style="border-bottom: 1px solid green">{{
                    queryParams.thisCheckTime
                }}</div>
            </div>
            <div style="width: 100%; display: flex; margin-bottom: 10px">
                <div style="color: green">下次检验日期：：</div>
                <div style="border-bottom: 1px solid green">{{
                    queryParams.nextCheckTime
                }}</div>
            </div>
            <div style="position: absolute; top: 0%; left: 25%">
                <canvas id="canvas" width="180" height="180"></canvas>
            </div>
        </div>
    </div>
</template>

<script> 
export default {
    data() {
        return {
            qrCode: '',
            queryParams: {
                deviceType: '', //设备类型
                specificationType: '', //规格型号
                qrCode: '', //二维码
                maCode: '', //设备编码
                maStatusName: '', //设备状态
                checkMan: '', //本次检验人
                thisCheckTime: '', //本次检验日期
                nextCheckTime: '', //下次检验日期
                // maStatusName:'',//设备状态
                inspectMan: '', //检验人员
                inspectStatus: '', //检验结论
                phone: '', //联系电话
                maVender: '', //厂家名称
                outFacTime: '', //出厂日期
                inOutNum: '', //出入库次数
                leaseUnit: '', // 领料单位
                leasePro: '', // 领料工程
                leaseTime: '', // 领料时间
                backUnit: '', //  退料单位
                backPro: '', // 退料工程
                backTime: '', // 退料时间
            },
        }
    },
    created() { 
    },
    mounted() { 
    },
    methods: {
    },
}
</script>
<style lang="scss" scoped>
.item-box {
    display: flex;
    width: 100%;
    border-bottom: 1px solid green;
    margin-bottom: 10px;
}
.bottom-box {
    display: flex;
    width: 99%;
    border: 4px solid rgb(2, 196, 2);
    flex-wrap: wrap;
    margin: auto;
    position: relative;
}
</style>