SmartCommunity/operationSupport/src/views/patrolManagement/popups/patrolDetails.vue

<template>
    <div class="patrolDetails">
        <div class="search" v-if="!this.params">
            <span>巡更详情</span>
            <div class="search-icon">
                <el-tooltip effect="light" placement="bottom" content="返回">
                    <i class="zoniot_font zoniot-icon-fanhui" @click="goback()"></i>
                </el-tooltip>
            </div>
        </div>
        <div class="contentText">
            <div class="leftMap">
                <map-value :point="thisItem" :line="targetData" ref="mapVal" :isStart="true" :height="400"></map-value>
                <div class="formLabel">
                    <div class="formLabelList">
                        <div class="label">所属社区</div>
                        <div class="text">{{ thisObj.communityName }}</div>
                    </div>
                    <div class="formLabelList">
                        <div class="label">巡更路线</div>
                        <div class="text">{{ thisObj.routeName }}</div>
                    </div>
                    <div class="formLabelList">
                        <div class="label">巡更人员</div>
                        <div class="text">{{ thisObj.partolName }}</div>
                    </div>
                    <div class="formLabelList">
                        <div class="label">巡更日期</div>
                        <div class="text">{{ !!thisObj.patrolDate ? $moment(thisObj.patrolDate).format('YYYY-MM-DD') : '' }}</div>
                    </div>
                    <div class="formLabelList">
                        <div class="label">巡更时间</div>
                        <div class="text">{{ thisObj.patrolTime }}</div>
                    </div>
                </div>
            </div>
            <div class="rightList">
                <template v-for="(item, index) in leftItem">
                    <div class="steps" :key="index">
                        <div class="steps-left">
                            <img v-if="!!leftItem[1].id" src="@assets/img/point_yiwancheng@2x.png" alt />
                            <img
                                v-else-if="!leftItem[1].id && index !== leftItem.length - 1"
                                src="@assets/img/point_weiwancheng@2x.png"
                                alt
                            />
                            <div class="steps-left-line" v-if="index !== leftItem.length - 1 && !!leftItem[leftItem.length - 2].id"></div>
                            <div class="steps-left-line" v-else-if="index !== leftItem.length - 2"></div>
                        </div>
                        <div class="steps-right">
                            <!-- 待开始 开始 -->
                            <div class="steps-right-title" v-if="index == 0">
                                <span>{{ !!leftItem[1].id ? '开始任务 ' : '待执行' }}</span>
                            </div>
                            <!-- 点位状态 -->
                            <div class="steps-right-title" v-else-if="index !== 0 && index !== leftItem.length - 1">
                                <span>{{ item.pointName }}</span>
                                <span class="status" :class="!!item.id ? '' : 'grad'">{{ !!item.id ? '已完成' : '未完成' }}</span>
                            </div>
                            <div class="steps-right-title" v-else>
                                <span>{{ !!leftItem[leftItem.length - 2].id ? '结束任务 ' : '' }}</span>
                            </div>

                            <div class="steps-right-content" v-if="index == 0">{{ leftItem[1].startTime }}</div>
                            <template v-else-if="index !== 0 && index !== leftItem.length - 1">
                                <div class="steps-right-content">{{ item.checkTime }}</div>
                                <div class="steps-right-content">
                                    <span>巡更结果:</span>
                                    <span>{{ item.result || '-' }}</span>
                                </div>
                                <div class="steps-right-content">
                                    <span>图片/视频:</span>
                                    <template v-if="!!item.picturePath">
                                        <div class="imgVdio" v-for="items in item.picturePath.split(',')" :key="items">
                                            <video v-if="typeVideo(items)" :src="items" @click="lookVideos(items)"></video>
                                            <el-image class="imgs" v-else :src="items" :preview-src-list="[items]">
                                                <div slot="error" class="image-slot">--</div>
                                            </el-image>
                                        </div>
                                    </template>
                                </div>
                            </template>
                            <div class="steps-right-content" v-else>
                                {{ leftItem[1].endTime }}
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import mapValue from './mapValue.vue';
export default {
    props: ['thisObj', 'params'],
    components: { mapValue },
    data() {
        return {
            thisItem: [],
            leftItem: [],
            targetData: []
        };
    },
    filters: {
        statusType(val) {
            let name = '-';
            switch (val) {
                case 1:
                    name = '待执行';
                    break;
                case 2:
                    name = '执行中';
                    break;
                case 3:
                    name = '已完成';
                    break;
                case 4:
                    name = '已完成(超时)';
                    break;
                case 5:
                    name = '已逾期';
                    break;
            }
            return name;
        }
    },
    methods: {
        goback() {
            this.$emit('initPage');
        },
        getDetail(id) {
            this.$http.get('/sc-community/patrolRecord/findRecordDtail', { id: id }).then(({ data, status, msg }) => {
                this.thisItem = data;
                this.leftItem = [
                    [
                        {
                            checkTime: null,
                            id: null,
                            picturePath: null,
                            pointId: null,
                            pointStatus: null,
                            recordId: null,
                            result: null
                        }
                    ],
                    ...data,
                    [
                        {
                            checkTime: null,
                            id: null,
                            picturePath: null,
                            pointId: null,
                            pointStatus: null,
                            recordId: null,
                            result: null
                        }
                    ]
                ];
            });
        },
        getTrack(id) {
            this.$http.get('/sc-community/patrolRecord/getUserPatrolTrack', { recordId: id }).then(({ data, status, msg }) => {
                if (!!data) {
                    this.targetData = data;
                }
            });
        },
        typeVideo(str) {
            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
            let videoType = ['mp4'];
            return videoType.includes(type);
        },
        lookVideos(src) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/lookVideo.vue',
                    width: '600px',
                    height: '500px',
                    props: {
                        src: src,
                        callback: resolve
                    },
                    showConfirmButton: true,
                    showCancelButton: true,
                    hideStar: true,
                    title: '查看视频'
                });
            }).then(() => {
                this.mixins_search();
            });
        }
    },
    created() {
        if (!!this.params) {
            this.thisObj = this.params.thisObj;
            this.getDetail(this.params.thisObj.id);
            this.getTrack(this.params.thisObj.id);
        } else {
            this.getDetail(this.thisObj.id);
            this.getTrack(this.thisObj.id);
        }
    }
};
</script>>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.border20 {
    padding: 20px;
    box-sizing: border-box;
}
.patrolDetails {
    // @extend .height100;

    .search > span {
        font-size: 16px;
        line-height: 30px;
    }
    .contentText {
        height: calc(100% - 100px);
        display: flex;
        justify-content: space-between;
        .leftMap {
            width: calc(100% - 420px);
            background: white;
            @extend .border20;
            .formLabel {
                box-shadow: 0px 2px 4px 0px rgba(236, 236, 236, 0.5);
                border-radius: 4px;
                border: 1px solid #eeeeee;
                padding: 20px;
                margin-top: 20px;
                .formLabelList {
                    display: flex;
                    line-height: 30px;
                    .label {
                        width: 70px;
                    }
                    .text {
                        color: #424656;
                    }
                }
            }
        }
        .rightList {
            width: 400px;
            background: white;
            @extend .border20;
            .steps {
                display: flex;
                img {
                    width: 20px;
                    vertical-align: -webkit-baseline-middle;
                    &.grad {
                        -webkit-filter: grayscale(100%);
                        -moz-filter: grayscale(100%);
                        -ms-filter: grayscale(100%);
                        -o-filter: grayscale(100%);
                        filter: grayscale(100%);
                        filter: gray;
                    }
                }
                .steps-left {
                    margin-right: 10px;
                    .steps-left-line {
                        width: 2px;
                        height: calc(100% - 40px);
                        min-height: 20px;
                        margin: 10px auto;
                        background-color: $mainBgColor;
                    }
                }
                &:last-child {
                    .steps-left-line {
                        display: none;
                    }
                }
                .steps-right {
                    width: calc(100% - 15px);
                    line-height: 30px;
                    margin-bottom: 10px;
                    .steps-right-title {
                        font-weight: 600;
                        display: flex;
                        justify-content: space-between;
                        .status {
                            color: $mainBgColor;
                            font-weight: 400;
                            &.grad {
                                color: gray;
                            }
                        }
                    }
                    .steps-right-content {
                        font-size: 12px;
                        color: #303133;
                        display: flex;
                        span:first-child {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
.imgVdio {
    display: inline-block;
    margin-right: 10px;
    .imgs,
    video {
        width: 64px;
        cursor: pointer;
    }
}
</style>