deviceurationAdd1.vue

<template>
    <div class="equipmentList-box">
        <div class="equipmentList">
            <el-input v-model="formadd1.sceneName" placeholder="请输入场景名称"></el-input>
            <button class="vpnButton primary " @click.prevent="init" >查询</button>
        </div>
        <div class="ceneSelection">
            <el-scrollbar>
                <div class="ceneSelection-box"  v-for="(item,index) in formadd1.ceneSelectionList" :key="index">
                    <div class="ceneSelection-box-name">
                        <p>{{item.sceneName}}</p>
                        <el-radio v-model="formadd1.sceneCode" :label="item.sceneCode" @change='sceneCodefun'></el-radio>
                    </div>
                    <el-tooltip class="item" effect="dark" :content='item.excelName' placement="top-start">
                        <h6>
                            <!-- <span>{{item.excelName}}</span> -->
                        </h6>
                    </el-tooltip>
                    <!-- <img :src="item.sceneImage" /> -->
                    <img v-if="item.sceneImage" :src="objurl+item.sceneImage" />
                    <img v-else :src="objurl+'scene00.jpg'" />
                </div>
            </el-scrollbar>
        </div>
    </div>

</template>

<script>
import deviceConfigOnline from '../../services/deviceConfigOnline.service';
let ConfigHttps = new deviceConfigOnline()
export default {
    name: "deviceurationAdd1",
    data(){
        return{
            objurl:'',
            formadd1:{
                sceneName:'',
                sceneCode:'', //新增 场景选择
                ceneSelectionList:[],
            }

        }
    },
    filters:{
        statusFilter:function(val){
            let text="";
            switch (val) {
                case "1":
                    text='完成'
                    break;
                case "2":
                    text='执行中'
                    break
                default:
                    text=""
            }
            return text
        },
    },
    components:{},
    mounted(){

    },
    methods:{
        init(){
            let requestObj = {}
            requestObj.page = 1;
            requestObj.sceneName = this.formadd1.sceneName;
            requestObj.sceneType = '00';
            ConfigHttps.getdeviceAutolistScene(requestObj).then((res)=>{
                if(res.code==0){
                    this.formadd1.ceneSelectionList=res.data.list
                    this.objurl=res.obj
                    // vm.listData = res.result.list;
                }else {
                    _toast(res.msg)
                }
            }).catch((err=>{
                console.log(err)
            }))
        },
        sceneCodefun(){
            this.$emit('deviceurationadd1', this.formadd1.sceneCode)
        }

    }
}
</script>

<style lang="scss">
    .equipmentList-box{
        height:calc(100%);
        .equipmentList{
            padding:20px 0 0 20px;
            .el-input{
                width: 280px;
                margin-right: 20px;
                .el-input__inner{
                    width: 280px;
                }

            }

        }
        .ceneSelection{
            height:calc(100% - 20px);
            padding: 10px;
            .ceneSelection-box{
                width: 280px;
                height: 220px;
                padding: 10px;
                border: 1px solid #c6c6c6;
                display: inline-block;
                margin: 10px;
                .ceneSelection-box-name{
                    height: 28px;
                    line-height: 28px;
                    p{
                        float: left;
                        font-size: 14px;
                        color: #333333;
                    }

                }
                h6{
                    height: 19px;
                    font-size: 12px;
                    color: #666666;
                    width: 250px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 500;
                }
                img{
                    width: 100%;
                    height: 150px;
                }
                &:hover{
                    .ceneSelection-box-name{
                        p{
                            color: #0091ea;
                        }
                    }
                    // transform: translateY(-5px);transition:0.1s;
                    box-shadow:8px 8px 10px #cccccc;
                }
            }
        }
    }

</style>