FE-V2-XCX/pages_manage/workbench/plan/planInfo.vue

<template>
    <view id="planInfo">
        <view class="planInfo-big-box">
            <view class="title-box">
				<view :style="'background:'+itemData.subDiyVo.fiedColor+';'">{{itemData.subDiyVo.levelName}}</view>
                <view>{{itemData.name}}</view>
            </view>
            <view class="address-box"><span>{{itemData.subDiyVo.typeName}}</span>{{itemData.deptName}}</view>
            <view class="address-box-two">
                <img src="@/images/icon_14.png">
                <view>{{itemData.subAddrrStr}}</view>
            </view>
        </view>
        <view class="planInfo-big-box">
            <view class="flex-box">
                <view>预案名称</view>
                <view>{{itemData.riskPlanAbnormalLogVo.riskPlanName}}</view>
            </view>
            <view class="flex-box">
                <view>执行时间</view>
                <view>{{itemData.riskPlanAbnormalLogVo.createTime}}</view>
            </view>
        </view>
        <view class="planInfo-big-box">
            <view class="title-max-box">
                <view class="left-view"></view>
                <view class="right-view">监测预警</view>
            </view>
            <view class="flex-box-one" v-for="(item,index) in itemData.riskPlanAbnormalLogVo.sensorJson" :key="index">
                <view>{{item.describe}}</view>
                <view class="flex-box-colorA">{{item.value}}{{item.unit}}</view>
            </view>
        </view>
        <view class="planInfo-big-box">
            <view class="title-max-box">
                <view class="left-view"></view>
                <view class="right-view">执行操作</view>
            </view>
            <view class="flex-box-two" v-for="(item,index) in itemData.hardwareOpreteActList" :key="index">
                <view class="top-text-box">
                    <view>{{item.hardWareName}}</view>
                    <view :class="item.opreteFlag?'flex-box-colorC':'flex-box-colorA'">{{item.opreteFlag?'执行成功':'执行失败'}}</view>
                </view>
                <view v-if="item.opreteFlag" class="bottom-text-box">{{item.hardWareOpreteAct}}</view>
            </view>
            <view class="flex-box-two" v-for="(item,index) in itemData.voiceOpreteActList" :key="index">
                <view class="top-text-box">
                    <view>{{item.hardWareName}}</view>
                    <view :class="item.opreteFlag?'flex-box-colorC':'flex-box-colorA'">{{item.opreteFlag?'执行成功':'执行失败'}}</view>
                </view>
                <view v-if="item.opreteFlag" class="bottom-text-box">{{item.hardWareOpreteAct}}</view>
            </view>
            <view class="flex-box-one" v-for="(item,index) in itemData.phoneOpreteActList" :key="index">
                <view>{{item.hardWareName}}</view>
                <view :class="item.opreteFlag?'flex-box-colorC':'flex-box-colorA'">{{item.opreteFlag?'执行成功':'执行失败'}}</view>
            </view>
            <view class="flex-box-two" v-for="(item,index) in itemData.messageOpreteActList" :key="index">
                <view class="top-text-box">
                    <view>{{item.hardWareName}}</view>
                    <view :class="item.opreteFlag?'flex-box-colorC':'flex-box-colorA'">{{item.opreteFlag?'执行成功':'执行失败'}}</view>
                </view>
                <view v-if="item.opreteFlag" class="bottom-text-box">{{item.hardWareOpreteAct}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { laboratoryInfo } from '@/api/index.js'
    export default {
        name: "planInfo",
        data() {
            return {
                itemData:{},
            }
        },

        onLoad(option){
            this.itemData = JSON.parse(decodeURIComponent(option.item));
            this.itemData.riskPlanAbnormalLogVo.sensorJson = JSON.parse(this.itemData.riskPlanAbnormalLogVo.sensorJson);
        },
        onShow(){

        },
        methods:{
            async laboratoryInfo(){
                const {data} = await laboratoryInfo(this.itemData.subDiyVo.id);
                if(data.code == 200){
                    let obj = data.data[0];
                    obj.subClassVO = this.itemData.subClassVO;
                    obj.name = this.itemData.name;
                    obj.subTypeLable = this.itemData.subTypeLable;
                    obj.deptName = this.itemData.deptName;
                    obj.subAddrrStr = this.itemData.subAddrrStr;
                    uni.navigateTo({
                        url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))
                    });
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #planInfo{
        .planInfo-big-box{
            background #fff
            overflow: hidden
            margin-bottom:20rpx;
            .title-max-box{
                display flex
                height:80rpx;
                border-bottom:1rpx solid #E0E0E0;
                .left-view{
                    width: 4rpx;
                    height: 34rpx;
                    margin:25rpx 24rpx 0 20rpx;
                    background:#0D97EB;
                }
                .right-view{
                    line-height:80rpx;
                    font-size: 30rpx;
                    color: #333333;
                    flex:1;
                }
                .click-view{
                    display flex
                    padding:0 20rpx;
                    view{
                        line-height:80rpx;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    img{
                        width:20rpx;
                        height:10rpx;
                        margin:35rpx 0 0 20rpx;
                    }
                }
            }
            .title-box{
                margin:20rpx 20rpx 0;
                display flex
                view:nth-child(1){
                    height:42rpx;
                    line-height:42rpx;
                    font-size:20rpx;
                    border-radius:10rpx;
                    padding:0 10rpx;
                    color:#fff;
                    margin-right:20rpx;
                }
                view:nth-child(2){
                    line-height:42rpx;
                    font-size:30rpx;
                    color:#333;
                    max-width:600rpx;
                    flex:1;
                }
                img{
                    width:12rpx;
                    height:20rpx;
                    margin-top:11rpx;
                }
                .colorA{
                    background:#aa2315;
                }
                .colorB{
                    background:#ff9b09;
                }
                .colorC{
                    background:#3ea3e9;
                }
                .colorD{
                    background:#3ea34c;
                }

            }
            .address-box{
                margin:20rpx 20rpx;
                font-size:26rpx;
                color:#999999;
                span{
                    margin-right:60rpx;
                }
            }
            .address-box-two{
                display flex
                margin:0 20rpx 20rpx 20rpx;
                img{
                    width:28rpx;
                    height:30rpx;
                    margin-right:18rpx;
                }
                view{
                    line-height:30rpx;
                    font-size:24rpx;
                    color:#999999;
                }
            }
            .button-box{
                line-height 100rpx
                font-size:30rpx;
                color:#0183FA;
                margin:0 20rpx;
                border-top:1rpx dashed #e0e0e0;
                text-align center;
            }
            .flex-box:nth-child(1){
                border:none!important;
            }
            .flex-box{
                display flex;
                height:80rpx;
                margin:0 20rpx;
                border-top:1rpx solid #e0e0e0;
                view:nth-child(1){
                    line-height:80rpx;
                    font-size:28rpx;
                    color:#333;
                }
                view:nth-child(2){
                    flex:1;
                    line-height:80rpx;
                    font-size:24rpx;
                    color:#999;
                    text-align right
                }
            }
            .flex-box-one:nth-child(2){
                border:none!important;
            }
            .flex-box-one{
                display flex;
                /*min-height:80rpx;*/
                margin:0 20rpx;
                border-top:1rpx solid #e0e0e0;
                view:nth-child(1){
                    line-height:80rpx;
                    font-size:28rpx;
                    color:#333;
                }
                view:nth-child(2){
                    flex:1;
                    line-height:80rpx;
                    font-size:28rpx;
                    color:#999;
                    text-align right
                }
            }
            .flex-box-two:nth-child(2){
                border:none!important;
            }
            .flex-box-two{
                /*min-height:120rpx;*/
                margin:0 20rpx;
                border-top:1rpx solid #e0e0e0;
                .top-text-box{
                    height:74rpx;
                    display flex
                    view:nth-child(1){
                        line-height:74rpx;
                        font-size:28rpx;
                        color:#333;
                    }
                    view:nth-child(2){
                        flex:1;
                        line-height:80rpx;
                        font-size:28rpx;
                        color:#999;
                        text-align right
                    }
                }
                .bottom-text-box{
                    /*min-height:40rpx;*/
                    padding-bottom:25rpx;
                    font-size:24rpx;
                    line-height:24rpx;
                    color:#999;
                }
            }
            .flex-box-colorA{
                color:#FF4552!important;
            }
            .flex-box-colorB{
                color:#FFA518!important;
            }
            .flex-box-colorC{
                color:#0D97EB!important;
            }
            .flex-box-colorD{
                color:#35D850!important;
            }
        }
    }
</style>