vue 鱼骨图,时间线组件

image.png

<template>
    <div class="fishbone">
        <div class="content">
            <el-row type="flex" class="top-bone" align="bottom">
                <div class="item-bone" v-for="(item, index) in _value" :key="index">
                    <ul class="item-bone-children" v-if="index % 2 == 0">
                        <li v-for="(ele, i) in item.children" class="children-item" :key="i">
                            <div v-if="ele.title" class="title"> {{ ele.title }}</div>
                            <div class="text" v-else>{{ ele.label }}</div>
                        </li>
                    </ul>
                </div>
            </el-row>
            <div class="center-line"></div>
            <el-row type="flex" class="bottom-bone">
                <div class="item-bone" v-for="(item, index) in _value" :key="index">
                    <ul class="item-bone-children" v-if="index % 2 != 0">
                        <li v-for="(ele, i) in item.children" :key="i" class="children-item">
                            <div v-if="ele.title" class="title">
                                {{ ele.title }}
                            </div>
                            <div class="text" v-else>{{ ele.label }}</div>
                        </li>
                    </ul>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: "_value",
        event: "change"
    },
    props: {
        _value: {
            type: Array,
            default: () => [
                {
                    label: "",
                    children: [{
                        title: "测试标题111",
                    }, {
                        label: "测试labeldsfdsdf",
                    }, {
                        label: "测试labelfghgh",
                    }, {
                        label: "测试labelfdf",
                    }, {
                        label: "测试label",
                    }]
                },
                {
                    label: "",
                    children: [{
                        title: "测试标题222",
                    }, {
                        label: "测试label",
                    }, {
                        label: "测试label",
                    }, {
                        label: "测试labelfdgghhfdfg ",
                    }, {
                        label: "测试label",
                    }]
                }, {
                    label: "",
                    children: [{
                        title: "测试标题333",
                    }, {
                        label: "测试label",
                    }, {
                        label: "测试label",
                    }, {
                        label: "测试label",
                    }]
                }, {
                    label: "",
                    children: [{
                        title: "测试标题444",
                    }, {
                        label: "测试label",
                    }, {
                        label: "测试label",
                    }]
                }
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
.fishbone {
    min-height: 300px;
    height: 100%;
    position: relative;
    width: 900px;
    $bnoe-color: #002766;

    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .center-line {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(50%);
        width: 100%;
        height: 1px;
        background-color: $bnoe-color;
    }

    .top-bone,
    .bottom-bone {
        position: absolute;
        height: 50%;
        width: 100%;
        padding-right: 100px;
        left: 0;

        .item-bone {
            float: left;
            min-width: 150px;
            // width: 150px;
            margin: 0 10px;
        }

        .item-bone-children {
            border-right: 2px solid $bnoe-color;
            transform: skewX(45deg);
            margin: 0 20px;

            .children-item {
                &:not(:last-child) {
                    border-bottom: 1px dashed $bnoe-color;
                }

                .text {
                    text-align: right;
                    padding-right: 20px;
                    transform: skewx(-45deg);
                    font-size: 13px;
                    width: 100%;
                    line-height: 30px;
                    white-space: nowrap;
                    color: #434343;
                }

                .title {
                    text-align: center;
                    transform: skewX(-45deg);
                    font-size: 16px;
                    font-weight: bolder;
                    line-height: 35px;
                    color: #002766;
                }
            }
        }
    }

    .bottom-bone {
        bottom: 0;

        .item-bone-children {
            transform: skewX(-45deg);

            .children-item {
                &:not(:first-child) {
                    border-bottom: 1px dashed $bnoe-color;
                }

                .text {
                    transform: skewX(45deg);
                }

                .title {
                    transform: skewX(45deg);
                }
            }
        }
    }
}
</style>