temDetail.vue

<template>
    <div class="tpl-detail-modal">
        <el-dialog title="算法模板详情" :visible.sync="dialogVisable" class="detail-modal"  width="80%">
            <div class="tpl-tbody">
                <ul class="input-warp">
                    <li>
                        <span>模板编号:{{tplData.unid}}</span>
                    </li>
                    <li>
                        <span>模板名称:{{tplData.name}}</span>
                    </li>
                </ul>
                <div class="tpl-group-warp">
                    <h5>算法模板</h5>
                    <ul class="tpl-group">
                        <li v-for="(item, index) in algoData" :key="index">
                            <div class="algo-item scrollbar">
                                <span v-for="(algoItem, algoIndex) in item.list" :key="algoIndex" :title="algoItem.algid">{{ algoItem.algid }}</span>
                            </div>
                            <p>
                                <i>{{ item.name }}</i>
                                <b></b>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="hideModal">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            algoData: [{
                name: '公约束',
                list: []
            },{
                name: '目标检测',
                list: []
            },{
                name: '目标跟踪',
                list: []
            },{
                name: '业务逻辑',
                list: []
            },{
                name: '图像增强',
                list: []
            },{
                name: '目标属性',
                list: []
            }],
            dialogVisable: false
        }
    },
    props: ['tplData'],
    methods: {
        init: function () {
            debugger
            this.algoData.forEach((element) => {
                element.list = [];
            });
            // console.log('父组件传的模板详情数据:', this.tplData[0])
            let groups = [];
            console.log(this.tplData)
            if(this.tplData.algo_set === "picture") {
                groups = this.tplData.algo_groups;
                groups.length = 3;
                this.algoData = [{
                    name: '公约束',
                    list: []
                },{
                    name: '目标检测',
                    list: []
                },{
                    name: '目标跟踪',
                    list: []
                }]
            } else {
                groups = this.tplData.algo_groups;
                this.algoData = [{
                    name: '公约束',
                    list: []
                },{
                    name: '目标检测',
                    list: []
                },{
                    name: '目标跟踪',
                    list: []
                },{
                    name: '业务逻辑',
                    list: []
                },{
                    name: '图像增强',
                    list: []
                },{
                    name: '目标属性',
                    list: []
                }]
            }
            this.buildData(groups);
            this.dialogVisable = true;
        },
        buildData: function (data) {
            for(var i = 0; i < data.length; i++) {
                if(data[i].algos.length > 0) {
                    for(var j = 0; j < data[i].algos.length; j++) {
                        var key = parseInt(data[i].algos[j].comb_pos - 1);
                        var objVal = data[i].algos[j];
                        this.algoData[key].list.push(objVal);
                    }
                } else {
                    this.algoData[i].list = [];
                }
            }
        },
        hideModal: function () {
            this.dialogVisable = false;
        }
    }
}
</script>

<style lang="scss" scoped>

    .detail-modal {
         width: 100%; 
    }

    .input-warp {
        overflow: hidden;
        margin-bottom: 0;
    }

    .input-warp li {
        float: left;
        width: 40%;
        height: 36px;
        line-height: 36px;
        padding-right: 2%; 
        overflow: hidden;
    }

    .input-warp li span {
        float: left;
        padding-right: 2%; 
        overflow: hidden;
    }

    .input-warp li input {
        float: left;
        padding-right: 10px;
    }

    .tpl-group-warp h5 {
        text-align: left;
    }

    .tpl-group {
        overflow: hidden;
        padding-left: 64px;
        margin-bottom: 0;
    }

    .tpl-group li {
        float: left;
        width: 14%;
        margin-right: 2%;
    }

    .tpl-group li:last-child {
        margin-right: 0px;
    }

    .algo-item {
        background: rgba(23,39,68,.6);
        border-radius: 5px;
        padding: 10px 20px 0;
        height: 260px;
        box-shadow: 3px 0 10px rgba(0, 0, 0, .5);
        overflow: hidden;
    }

    .algo-item:hover {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .algo-item span {
        display: block;
        width: 100%;
        background: linear-gradient(to bottom, #1043d1, #2c5986);
        border: 2px solid #2e4e81;
        font-size: 16px;
        padding-top: 6px;
        padding-bottom: 6px;
        border-radius: 3px;
        cursor: pointer;
        margin-bottom: 10%;
        text-align: center;
        overflow: hidden;
    }

    .tpl-group li > p {
        margin-bottom: 0;
        font-size: 16px;
        display: block;
        height: 36px;
        line-height: 36px;
        position: relative;
        text-align: center;
    }
    .tpl-group li i{
        list-style: none;
        font-style: inherit;
        font-size: 14px;
    }

    .tpl-group li:not(:last-child) > p b {
        border-left: 2px solid transparent;
        border-bottom: 2px solid transparent;
        border-right: 2px solid #fff;
		border-top: 2px solid #fff;
		height: 6px;
		width: 6px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
        cursor: pointer;
        position: absolute;
        top: 14px;
        right: -14px;
    }
    button {
        width: 10%;
    }
</style>