简单封装websocket

whyczyk

2021-09-07 69f949b70f1cd2c80a9738afe602905b18e72e0b

 src/components/smallModule/stepList.vue

@@ -10,133 +10,186 @@
        <div class="step-item">
            {{ status.text }}
        </div>
        <div class="step-item">
        <div class="step-item" v-if="startArr.length>0">
            {{ startArr[0] }}<br>{{ startArr[1] }}
        </div>
        <div class="step-item" v-else>
            {{ data.start }}
        </div>
        <div class="step-item">
        <div class="step-item" v-if="endArr.length>0">
            {{ endArr[0] }}<br>{{ endArr[1] }}
        </div>
        <div class="step-item" v-else>
            {{ data.end }}
        </div>
        <div class="step-item" v-if="endTextArr.length>0">
            {{ endTextArr[0] }}<br>{{ endTextArr[1] }}
        </div>
        <div class="step-item" v-else>
            {{ data.endText }}
        </div>
    </div>
</template>

<script>
export default {
    name: "stepList",
    props: {
        end: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default() {
                return {
                    name: '',
                    status: 0,
                    start: '',
                    end: ''
    export default {
        name: "stepList",
        props: {
            end: {
                type: Boolean,
                default: false,
            },
            data: {
                type: Object,
                default () {
                    return {
                        name: '',
                        status: 0,
                        start: '',
                        end: '',
                        endText: ''
                    }
                }
            },
            size: {
                type: String,
                default: ''
            },
        },
        data() {
            return {

            }
        },
        size: {
            type: String,
            default: ''

        computed: {
            status() {
                let data = this.data;
                let result = {
                    class: 'not-start',
                    text: '未开始'
                };
                switch (data.status) {
                    case 1:
                        result.class = 'in-process';
                        result.text = '进行中';
                        break;
                    case 2:
                        result.class = 'complete';
                        result.text = '已完成';
                        break;
                }
                return result;
            },
            sizeClass() {
                let sizeClass = "";
                switch (this.size) {
                    case 'mini':
                        sizeClass = "mini-size";
                        break;
                    case 'small':
                        sizeClass = "small-size";
                        break;
                }
                return sizeClass;
            },
            startArr() {
                let data = this.data;
                if (data.start && data.start.indexOf("&&") != -1) {
                    return data.start.split("&&")
                }
                return []
            },
            endArr() {
                let data = this.data;
                if (data.end && data.end.indexOf("&&") != -1) {
                    return data.end.split("&&")
                }
                return []
            },
            endTextArr() {
                let data = this.data;
                if (data.endText && data.endText.indexOf("&&") != -1) {
                    return data.endText.split("&&")
                }
                return []
            },
        },
    },
    data() {
        return {}
    },
    computed: {
        status() {
            let data = this.data;
            let result = {
                class: 'not-start',
                text: '未开始'
            };
            switch(data.status) {
                case 1:
                    result.class = 'in-process';
                    result.text = '进行中';
                    break;
                case 2:
                    result.class = 'complete';
                    result.text = '已完成';
                    break;
            }
            return result;
        },
        sizeClass() {
            let sizeClass = "";
            switch (this.size) {
                case 'mini':
                    sizeClass = "mini-size";
                    break;
                case 'small':
                    sizeClass = "small-size";
                    break;
            }
            return sizeClass;
        mounted() {

        }
    }
}
</script>

<style scoped>
.step-list {
    display: flex;
    flex-direction: row;
    font-size: 13px;
}
.step-item {
    padding-right: 36px;
}
.mini-size .step-item {
    padding-right: 24px;
}
.mini-size .step-item {
    padding-right: 12px;
}
.step-status-circle {
    background-color: #FFFFFF;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
}
.small-size .step-status-circle {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
.mini-size .step-status-circle {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
.step-status-circle.complete {
    border-color: #666EE8;
}
.step-status-circle.in-process {
    border-color: #82e866;
}
.step-status-circle.not-start {
    border-color: #686868;
}
.step-status-line {
    position: relative;
    width: 2px;
    background-color: #999999;
    background-image: linear-gradient(to right,#999999, #FFFFFF, #999999);
    height: 30px;
    margin-left: 50%;
    left: -1px;
}
.small-size .step-status-line {
    height: 25px;
}
.mini-size .step-status-line {
    height: 20px;
}
    .step-list {
        display: flex;
        flex-direction: row;
        font-size: 13px;
    }

    .step-item {
        padding-right: 36px;
    }

    .small-size .step-item {
        padding-right: 24px;
    }

    .mini-size .step-item {
        padding-right: 12px;
        font-size: 10px;
    }

    .step-status-circle {
        background-color: #FFFFFF;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border-radius: 50%;
        border-width: 3px;
        border-style: solid;
    }

    .small-size .step-status-circle {
        width: 18px;
        height: 18px;
        border-width: 2px;
    }

    .mini-size .step-status-circle {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .step-status-circle.complete {
        border-color: #666EE8;
    }

    .step-status-circle.in-process {
        border-color: #82e866;
    }

    .step-status-circle.not-start {
        border-color: #686868;
    }

    .step-status-line {
        position: relative;
        width: 2px;
        background-color: #999999;
        background-image: linear-gradient(to right, #999999, #FFFFFF, #999999);
        height: 30px;
        margin-left: 50%;
        left: -1px;
    }

    .small-size .step-status-line {
        height: 25px;
    }

    .mini-size .step-status-line {
        height: 20px;
    }
</style>