v3-lab-xcx/pages_manage/laboratory/safetyCard.vue

<!-- 安全信息牌 -->
<template>
    <view id="safetyCard">
        <view class="top-name-max-box">
            <view class="name-box back-ff">
                <view v-for="(minItem,index1) in subject" :key="index1" v-if="minItem.dictValue === itemData.subDept">{{minItem.dictLabel}}</view>
                <view class="color-33">{{itemData.name}}</view>
            </view>
            <view class="address-box color-99">{{itemData.address}}</view>
        </view>
        <view class="text-max-box">
            <view class="text-min-box">
                <view>责任单位：</view>
                <view>{{itemData.deptName}}</view>
            </view>
            <view class="text-min-box">
                <view>实验室负责人：</view>
                <view>{{itemData.adminName}}</view>
            </view>
            <view class="text-min-box">
                <view>联系方式：</view>
                <view>{{itemData.adminPhone}}</view>
            </view>
            <view class="text-min-box">
                <view>安全负责人：</view>
                <view>{{itemData.safeUserName?itemData.safeUserName:'无'}}</view>
            </view>
            <view class="text-min-box">
                <view>联系方式：</view>
                <view>{{itemData.safeUserPhone?itemData.safeUserPhone:'无'}}</view>
            </view>
        </view>
        <view class="safety-max-box" v-if="itemData.hazardCategory[0]||itemData.riskMeasure[0]||itemData.outfire[0]">
            <view class="max-for-box" v-if="itemData.hazardCategory[0]">
                <view class="title-box">主要危险类别</view>
                <view class="for-box" v-for="(item,index1) in itemData.hazardCategory" :key="index1">
                    <view v-for="(minItem,index2) in hazardCategory" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</view>
                </view>
            </view>
            <view class="max-for-box" v-if="itemData.riskMeasure[0]">
                <view class="title-box">风控防控措施</view>
                <view class="for-box" v-for="(item,index1) in itemData.riskMeasure" :key="index1">
                    <view v-for="(minItem,index2) in riskMeasure" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</view>
                </view>
            </view>
            <view class="max-for-box" v-if="itemData.outfire[0]">
                <view class="title-box">灭火要点</view>
                <view class="for-box" v-for="(item,index1) in itemData.outfire" :key="index1">
                    <view v-for="(minItem,index2) in extinguishingKeyPoints" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</view>
                </view>
            </view>
        </view>
        <view class="img-bottom-box" v-if="itemData.safeSigns[0]||itemData.qrCode">
            <view class="title-box">安全警示标识</view>
            <view class="for-box" :key="index1">
                <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in itemData.safeSigns" :key="index">
                <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in itemData.safeSigns" :key="index">
                <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in itemData.safeSigns" :key="index">
                <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in itemData.safeSigns" :key="index">
                <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in itemData.safeSigns" :key="index">
                <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in itemData.safeSigns" :key="index">
                <img v-if="itemData.qrCode" class="code-img" :src="itemData.qrCode">
            </view>
        </view>
    </view>
</template>

<script>
    import { getDicts } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
                itemData:{},
                text:"",
                subject:[],
                safetyWarning:[],
                hazardCategory:[],
                riskMeasure:[],
                extinguishingKeyPoints:[]
            }
        },
        onLoad(option) {
            this.getSafetyWarning();
            this.getHazardCategory();
            this.getRiskMeasure();
            this.getExtinguishingKeyPoints();
            this.itemData = JSON.parse(decodeURIComponent(option.item));
            if(this.itemData.safeUserName){
                this.itemData.safeUserName = this.itemData.safeUserName.replace(/,/,'、');
            }
            if(this.itemData.safeUserPhone){
                this.itemData.safeUserPhone = this.itemData.safeUserPhone.replace(/,/,'、');
            }
            if(this.itemData.hazardCategory){
                this.itemData.hazardCategory = this.itemData.hazardCategory.split(',')
            }
            if(this.itemData.riskMeasure){
                this.itemData.riskMeasure = this.itemData.riskMeasure.split(',')
            }
            if(this.itemData.safeSigns){
                this.itemData.safeSigns = this.itemData.safeSigns.split(',')
            }
            if(this.itemData.outfire){
                this.itemData.outfire = this.itemData.outfire.split(',')
            }
            this.subject = JSON.parse(decodeURIComponent(option.subject));
        },
        methods: {
            async getSafetyWarning(){
                const {data} = await getDicts('sys_safety_warning');
                if(data.code == 200){
                    this.safetyWarning = data.data;
                }
            },
            async getHazardCategory(){
                const {data} = await getDicts('sys_hazard_category');
                if(data.code == 200){
                    this.hazardCategory = data.data;
                }
            },
            async getRiskMeasure(){
                const {data} = await getDicts('sys_risk_measure');
                if(data.code == 200){
                    this.riskMeasure = data.data;
                }
            },
            async getExtinguishingKeyPoints(){
                const {data} = await getDicts('sys_extinguishing_key_points');
                if(data.code == 200){
                    this.extinguishingKeyPoints = data.data;
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #safetyCard{
        height:100%;
        overflow-y:scroll;
        overflow-x hidden
        .top-name-max-box{
            background #fff
            overflow hidden
            .name-box{
                margin:27rpx 20rpx 0;
                display:flex;
                view:nth-child(1){
                    background:#f95f5f;
                    color:#fff;
                    border-radius:6rpx;
                    font-size:20rpx;
                    padding:0 10rpx;
					height:42rpx;
					line-height:42rpx;
                }
                view:nth-child(2){
                    color:#333;
                    margin-left:20rpx;
                    font-size:28rpx;
                    height:30rpx;
					line-height:42rpx;
                    font-weight:700;
                }
            }
            .address-box{
                margin:22rpx 20rpx;
                font-size:26rpx;
            }
        }
        .text-max-box{
            margin-top:20rpx;
            background #fff
            padding:8rpx 20rpx;
            .text-min-box{
                display:flex;
                view{
                    line-height:66rpx;
                    height:66rpx;
                    font-size:28rpx;
                }
                view:nth-child(1){
                    width:220rpx;
                    color:#333;
                }
                view:nth-child(2){
                    flex:1;
                    color:#999;
                    text-align:right;
                }
            }
        }
        .safety-max-box{
            margin-top:20rpx;
            background #fff
            padding:8rpx 20rpx;
            .max-for-box{
                .title-box{
                    line-height:76rpx;
                    font-size:28rpx;
                    color:#333;
                }
                .for-box{
                    line-height:48rpx;
                    font-size:26rpx;
                    color:#999;
                }
            }
        }
        .img-bottom-box{
            margin-top:20rpx;
            background #fff
            padding:8rpx 20rpx 20rpx;
            .title-box{
                line-height:76rpx;
                font-size:28rpx;
                color:#333;
            }
            .for-box{
                line-height:48rpx;
                font-size:26rpx;
                color:#999;
                .img-ojb{
                    display inline-block
                    width:86rpx;
                    height:114rpx;
                    margin-right:20rpx;
                }
                .code-img{
                    width:200rpx;
                    height:200rpx;
                    margin:20rpx auto 40rpx;
                }
            }
        }
    }
</style>