jhbigscreen/src/pages/progress/nodeItem.vue

<template>
    <div class="build-node-item" style="position: relative;">
        <span class="lbl-title" v-show="showLabel" @click="doHeaderClick">
            <i class="el-icon-caret" :class="item.expend ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
            {{ item.nodeText }}</span>
        <div class="date-info">
            <el-col :span="6">
                <span class="sp-label">计划开始时间:</span>
                <span class="sp-date">{{ formatDate(item.planStartDate) }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">计划完成时间:</span>
                <span class="sp-date">{{ formatDate(item.planEndDate) }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">实际开始时间:</span>
                <span class="sp-date">{{ formatDate(item.startDate) }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">实际完成时间:</span>
                <span class="sp-date">{{ formatDate(item.endDate) }}</span>
            </el-col>
        </div>
        <span :class="'finish-' + item.finishState" class="sp-state">{{ item.finish }}</span>
    </div>
</template>

<script>
export default {
    name: 'JhbigscreenNodeItem',
    props: {
        showLabel: {
            type: Boolean,
            default: true
        },
        item: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        formatDate(dt) {
            if (dt) {
                return this.$dt(dt).format("YYYY-MM-DD");
            }
            return "暂无";
        },
        doHeaderClick() {
            this.$emit("header-click");
        }
    },
};
</script>

<style lang="less" scoped>
.build-node-item {
    .lbl-title {
        cursor: pointer;
        display: block;
    }

    .sp-label {
        color: #d6f10a;
    }

    .sp-state {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 170px;
        line-height: 32px;
        text-align: right;
    }
}
</style>