mspp4.vue

<template>
    <div class="mspp4-bg">
        <div class="port-wrapper">
            <div class="port-container part1">
                <div class="port-area">
                    <interface v-for="item in ifList1"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
            <div class="port-container part2">
                <div class="port-area">
                    <interface v-for="item in ifList2"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
            <div class="port-container part3">
                <div class="port-area">
                    <interface v-for="item in ifList3"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
            <div class="port-container part4">
                <div class="port-area">
                    <interface v-for="item in ifList4"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Interface from '../../interface/interface'
export default {
    name: "mspp4",
    props: {
        ifList: {
            type: Array,
            required: true
        },
        ifType: {
            type: String
        },
        dataSet:{
            type: Object,
            default: function () {
                return {devId: '',ifType:'',vpnName:'' }
            }
        }
    },
    methods: {
        rightClick(item) {
            this.$emit('right-click',item)
        },
        handlePopUp(item,event){
            this.$emit('pop-up-click',item,event)
        }
    },
    components:{Interface},
    computed: {
        ifList1() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 0)
        },
        ifList2() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 1)
        },
        ifList3() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 2)
        },
        ifList4() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 3)
        }
    }
}
</script>

<style lang="scss">
.mspp4-bg {
    height: 76px;
    width: 280px;
    background: url("../../../../assets/actualView/HIM-MSP4P.png");
    position: absolute;
    .port-wrapper {
        height: 100%;
        display: flex;
        padding-left: 32px;
        padding-top: 45px;
        .port-container {
            height: 23px;
            width: 32px;
            background: #ffffff;
            border: 1px solid #8b8b8b;
            padding: 1px 2px;
            margin-top: 2px;
            &.part1,&.part3 {
                margin-right: 24px;
            }
            &.part2 {
                margin-right: 26px;
            }
            .port-area {
                display: flex;
                .port-item {
                    display: block;
                    height: 19px;
                    width: 26px;
                    background: #9e9e9d;
                    border: 1px solid #17191b;
                }
            }
        }
    }
}
</style>