网格绘制

zhanghua

2023-01-30 5173f8e31d106abd003e123c8679cf53c7940b33

 src/components/solveProblem/index.vue

@@ -1,60 +1,106 @@
<template>
    <div class="sovle-problem">
        <div class="sovle-header">
            <div class="sovle-limit">处理时限:{{}}</div>
            <div class="sovle-limit">剩余时间:23小时</div>
            <div class="sovle-limit">处理时限:{{dispatchInfo.disposeDate}}</div>
            <div class="sovle-limit">剩余时间:{{getRestTime(dispatchInfo.disposeDate)}}</div>
        </div>
        <div class="sovle-timeline">
            <el-timeline>
                <el-timeline-item :color="mycolor" v-for="item in list" :key="item.id">
                    <div class="title">
                        <div class="title-left">【{{item.name}}】{{item.name === '派遣' ? '派遣员':item.name === '处理' ? '处理人':'评定人'}}:{{item.disposeRecords.length !==0 ? item.disposeRecords[0].handleId : ''}}</div>
                        <div class="title-right">{{item.disposeRecords.length !==0 ? item.disposeRecords[0].endTime:''}}</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">【{{item.name === '派遣' ? '派遣意见':item.name === '处理' ? '处理结果':'评定结果'}}】请相关执法队员及时前往现场进行处置</div>
                </el-timeline-item> 
                    <div class="message">{{filterPerson(item.name)}} {{item.disposeRecords && item.disposeRecords.length !=0 ? item.disposeRecords[0].result:''}}</div>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>
</template> 
<script>
    export default{
        data(){
            return{
                mycolor:'#02a7f0',
                list:[]
import helper from '@/utils/mydate'
import { computeTime } from '@/utils/helper'
export default {
    data() {
        return {
            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;
        }
    },
    methods: {
        // 获得意见
        filterPerson(name) {
            const { dispatchInfo } = this;
            if (name === '调度') {
                return '【派遣意见】' 
            } else if (name === '处理') {
                return '【处理结果】'
            }else if (name === '核查') {
                return '【核查结果】'
            }  else if (name === '结案') {
                return '【评定结果】'
            }
            return
        },
        props:['problemProVo'],
        created(){
            const {problemProVo:{workflowConfigSteps:mylist}} = this;
            console.log(mylist);
            this.list = mylist;
        }   
        // 处理时间
        filterTime(time) {
            if (time) {
                return helper(time)
            } else {
                return
            }

        },
        // 获得剩余时间
        getRestTime(limitTime) {
            if (limitTime) {
                return computeTime(limitTime)
            }
            return
        }
    }
}
</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;
        }
.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;
    }
}
</style>