添加时间筛选

zhanghua

7 天以前 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/components/solveProblem/index.vue

@@ -1,67 +1,255 @@
<template>
    <div class="sovle-problem">
        <div class="sovle-header">
            <div class="sovle-limit">处理时限:1工作日</div>
            <div class="sovle-limit">剩余时间:23小时</div>
            <div class="sovle-limit">
                处理时间:{{ dispatchInfo.createTime }}
            </div>
            <div class="sovle-limit">
                剩余时间:{{ getRestTime(dispatchInfo.disposeDate) || '未限制' }}
            </div>
        </div>
        <div class="sovle-timeline">
            <el-timeline>
                <el-timeline-item :color="mycolor">
        <div class="my-process">
            <div class="my-pro-header">
                <el-steps :space="260" :active="active" align-center>
                    <el-step v-for="item in list" :key="item.name">
                        <template slot="title">
                            <div>
                                【{{ item.name }}】
                                {{
                                    item.disposeRecords &&
                                    item.disposeRecords.length != 0
                                        ? item.disposeRecords[0].handlerText
                                        : ''
                                }}
                            </div>
                        </template>
                        <template slot="description">
                            <div>
                                {{
                                    item.disposeRecords &&
                                    item.disposeRecords.length != 0
                                        ? item.disposeRecords[0].result
                                        : ''
                                }}
                            </div>
                        </template>
                    </el-step>
                </el-steps>

                <!-- <el-timeline >
                <el-timeline-item :color="mycolor" v-for="item in list" :key="item.id">
                    <div class="title">
                        <div class="title-left">【派遣】派遣员:xxx</div>
                        <div class="title-right">22.09.06 16:40</div>
                        <div class="title-left">【{{item.name}}】处理人: {{item.disposeRecords && item.disposeRecords.length
                        != 0 ? item.disposeRecords[0].handlerText:''}}
                        </div>
                        <div class="title-right">{{item.disposeRecords.length !==0 ?
                        filterTime(item.disposeRecords[0].endTime):''}}
                        </div>
                    </div>
                    <div class="message">【派遣意见】请相关执法队员及时前往现场进行处置</div>
                    <div class="message">{{filterPerson(item.name)}} {{item.disposeRecords && item.disposeRecords.length !=0 ? item.disposeRecords[0].result:''}}</div>
                </el-timeline-item>
                <el-timeline-item :color="mycolor">
                    <div class="title">
                        <div class="title-left">【处理】处理人:xxx</div>
                        <div class="title-right">22.09.06 16:40</div>
                    </div>
                    <div class="message">【处理结果】请相关执法队员及时前往现场进行处置</div>
                </el-timeline-item>
                <el-timeline-item :color="mycolor">
                    <div class="title">
                        <div class="title-left">【评定】评定人:xxx</div>
                        <div class="title-right">22.09.06 16:40</div>
                    </div>
                    <div class="message">【评定结果】请相关执法队员及时前往现场进行处置</div>
                </el-timeline-item>
            </el-timeline>
            </el-timeline> -->
            </div>
        </div>
    </div>
</template>
</template> 
<script>
    export default{
        data(){
            return{
                mycolor:'#02a7f0'
import helper from '@/utils/mydate'
import { computeTime } from '@/utils/helper'
export default {
    data() {
        return {
            active: 0,
            mycolor: '#02a7f0',
            list: [],
            dispatchInfo: {},
        }
    },
    props: ['handlePassVo', 'baseCase'],
    created() {
        const { handlePassVo: mylist, baseCase } = this;
        console.log(baseCase, mylist);
        if (mylist) {
            this.list = mylist.workflowConfigSteps;
        }
        if (baseCase.dispatchInfo) {
            this.dispatchInfo = baseCase.dispatchInfo;
        }
        if (baseCase.state === 6) {
            this.active = 1;
        } else if (baseCase.state === 7) {
            this.active = 2;
        } else if (baseCase.state === 8) {
            this.active = 3;
        } else if (baseCase.state === 9) {
            this.active = 4;
        } else {
            this.active = 0;
        }
    },
    methods: {
        // 获得意见
        filterPerson(name) {
            const { dispatchInfo } = this;
            if (name === '调度') {
                return '【派遣意见】'
            } else if (name === '处理') {
                return '【处理结果】'
            } else if (name === '核查') {
                return '【核查结果】'
            } else if (name === '结案') {
                return '【评定结果】'
            }
            return
        },
        // 处理时间
        filterTime(time) {
            if (time) {
                return helper(time)
            } else {
                return
            }

        },
        // 获得剩余时间
        getRestTime(limitTime) {
            if (limitTime) {
                return computeTime(limitTime)
            }
            return
        }
    }
}
</script>
<style lang="scss" scoped>
.sovle-problem {
    
    padding-top: 20px;
    .sovle-header {
        padding: 0 40px;
        display: flex;
        line-height: 60px;
        justify-content: space-between;
    }

    .title {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        padding: 0 20px;
        color: #4b9bb7;
        font-size: 16px;
    }

    .message {
        padding: 20px;
        color: #666;
        line-height: 20px;
        font-size: 12px;
    }
}
.my-process {
    padding-top: 20px;
    .my-pro-header {
        padding: 0 30px;
        line-height: 1;

        .pro-step {
            flex: 1;

            .pro-step-top {
                display: flex;
                align-items: center;

                .line {
                    flex: 1;
                    height: 2px;
                }
            }

            .pro-step-name {
                line-height: 20px;
            }
        }

        
    }

    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
            .line {
                width: 2px;
                height: 100px;
            }
        }
        .pro-step-top {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc {
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime {
                display: flex;
                justify-content: flex-end;
                padding-right: 50px;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .sovle-problem{
        .sovle-header{
            padding: 0 200px;
            display: flex;
            line-height: 60px;
            justify-content: space-between;
        }
        .title{
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            padding: 0 20px;
            color: #4b9bb7;
            font-size: 16px;
        }
        .message{
            padding: 20px;
            background-color: #070f22;
            color: #4b9bb7;
            line-height: 20px;
            font-size: 10px;
        }

    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #808080;
    }

    .line {
        background-color: #c0c4cc;
    }
    .in-process {
        color: #0079fe;
    }
    .in-process__circle {
        border: 2px solid #0079fe;
    }
    .finish-line {
        background-color: #0079fe;
    }
    .finish {
        border: 2px solid #4b9bb7;
    }
    .finish-name {
        color: #4b9bb7;
    }
    .desc-content-message {
        color: #666;
    }
}
::v-deep .el-step__title {
    font-size: 18px;
    padding: 10px 0;
}
::v-deep .el-step__title.is-process {
    color: #5388f1;
}

::v-deep .el-step__description{
    font-size: 14px;
}

</style>