CZC/operationSupport/src/views/facilityInspections/popups/details.vue

<template>
    <div class="lookDetail">
        <div class="list-item">
            <div class="formContent-item_title">工单信息</div>
            <el-form ref="form" label-width="110px">
                <template v-for="(item, index) in formLook">
                    <el-col :span="!!item.span ? item.span : 12" :key="index">
                        <el-form-item :label="item.label">
                            <template v-if="item.slot">
                                <template v-if="item.slot === 'inspectionStatus'">
                                    <span v-if="thisItem['inspectionStatus'] == 1">待执行</span>
                                    <span v-else-if="thisItem['inspectionStatus'] == 2">执行中</span>
                                    <span v-else-if="thisItem['inspectionStatus'] == 3">已完成</span>
                                    <span v-else-if="thisItem['inspectionStatus'] == 4">已完成(超时)</span>
                                    <span v-else-if="thisItem['inspectionStatus'] == 5">已逾期</span>
                                    <span v-else>--</span>
                                </template>
                            </template>
                            <template v-else>
                                {{ thisItem[item.prop] || '--' }}
                            </template>
                        </el-form-item>
                    </el-col>
                </template>
            </el-form>
        </div>
        <div class="list-item">
            <div class="formContent-item_title">设备巡检信息</div>
            <zz-table
                :cols="cols"
                :settings="{ showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
            >
                <template slot="picturePath" slot-scope="scope">
                    <div v-if="!!scope.row.picturePath">
                        <div class="imgVdio" v-for="item in scope.row.picturePath.split(',')" :key="item">
                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
                        </div>
                    </div>
                </template>
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip effect="light" placement="bottom" content="详情" v-if="!!scope.row.id">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>
<script >
import list from '@utils/list.js';
export default {
    props: ['params'],
    mixins: [list],
    data() {
        return {
            formLook: [
                {
                    label: '所属社区:',
                    prop: 'communityName'
                },
                {
                    label: '任务名称:',
                    prop: 'inspectionName'
                },
                {
                    label: '设备/设施类型:',
                    prop: 'typeValue'
                },
                {
                    label: '巡检人员:',
                    prop: 'peopleName'
                },
                {
                    label: '计划开始时间:',
                    prop: 'startDate'
                },
                {
                    label: '计划结束时间:',
                    prop: 'endDate'
                },
                {
                    label: '实际开始时间:',
                    prop: 'startTime'
                },
                {
                    label: '实际结束时间:',
                    prop: 'endTime'
                },
                {
                    label: '状态:',
                    prop: 'inspectionStatus',
                    slot: 'inspectionStatus'
                }
            ],
            cols: [
                {
                    label: '设备编号',
                    prop: 'no'
                },
                {
                    label: '设备名称',
                    prop: 'name'
                },
                {
                    label: '地址',
                    prop: 'address'
                },
                {
                    label: '巡检时间',
                    prop: 'checkTime'
                },
                {
                    label: '巡检结果',
                    prop: 'result'
                },
                {
                    label: '图片/视频',
                    prop: 'picturePath',
                    slot: 'picturePath'
                },
                {
                    label: '操作',
                    prop: 'opt',
                    slot: 'opt'
                }
            ],
            thisItem: {},
            mixins_post: 'post'
        };
    },

    methods: {
        lookDetails(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/facilityInspections/popups/itemDetails.vue',
                    width: '500px',
                    height: '500px',
                    props: {
                        data: row,
                        callback: resolve
                    },
                    showConfirmButton: true,
                    showCancelButton: true,
                    hideStar: true,
                    title: '巡检项详情'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        getDatali(id) {
            this.mixins_dataUrl = '/czc-community/inspectionRecord/findDetail';
            this.mixins_query = {
                id: id,
                type: this.params.data.type
            };
            this.mixins_search();
        },
        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() {
        this.thisItem = this.params.data;
        this.getDatali(this.params.data.id);
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.formContent-item_title {
    clear: both;
}
.imgVdio {
    display: inline-block;
    margin-right: 10px;
    .imgs,
    video {
        width: 64px;
        cursor: pointer;
    }
}
</style>