YZProjectCloud/yanzhu-bigscreen/src/views/check/projectCheckedDetailDialog.vue

<template>
    <MyDialog v-if="show" v-model="show" width="960px" height="650px" class="project-checked-detail-dialog">
        <template slot="title">举牌验收详情</template>
        <div class="detail-content scroll">
            <div class="data-row">
                <div class="data-label">验收时间:</div>
                <div class="data-content">{{ row.checkingDate }}</div>
            </div>
            <div class="data-row">
                <div class="data-label">验收结果:</div>
                <div class="data-content">
                    <span :class="'check-state check-state-' + row.checkResultColor">{{
                        row.checkResultName }}</span>
                </div>
            </div>

            <div class="data-row">
                <div class="data-label">验收图片:</div>
                <div class="data-content data-images">
                    <div class="data-img" v-for="(it, index) in row.images" :key="index">
                        <el-image :src="it" :preview-src-list="row.images" fit="cover" />
                    </div>
                </div>
            </div>

            <div class="data-row">
                <div class="data-label">工序部位:</div>
                <div class="data-content">{{ row.workingPosition }}</div>
            </div>
            <div class="data-row">
                <div class="data-label">验收描述:</div>
                <div class="data-content">{{ row.intro }}</div>
            </div>
            <div class="data-row">
                <div class="data-label">班组长:</div>
                <div class="data-content">{{ row.groupDeptUserName }}({{ row.groupDeptUser }})</div>
            </div>
            <div class="data-row">
                <div class="data-label">技术员:</div>
                <div class="data-content">{{ row.technicianUserName }}({{ row.technicianUserName }})</div>
            </div>

            <div class="data-row">
                <div class="data-label">监理专员:</div>
                <div class="data-content">{{ row.superviseUserName }}({{ row.superviseUserName }})</div>
            </div>

            <div class="data-row">
                <div class="data-label">三方验收照:</div>
                <div class="data-content check-images">
                    <div class="data-img" v-for="(it, index) in row.checkImages" :key="index">
                        <el-image :src="it" :preview-src-list="row.checkImages" fit="cover" />
                    </div>
                </div>
            </div>
        </div>
    </MyDialog>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            show: false,
            row: null
        }
    },

    methods: {
        showDialog(data) {
            this.row = data
            this.show = true
        },
    },
}
</script>

<style lang="less">
.project-checked-detail-dialog {
    .popup-project-introduction-min {
        .detail-content {
            height: 500px;
            overflow-y: auto;

            .data-row {
                display: flex;
                color: #3da2ff;
                line-height: 30px;

                .data-label {
                    min-width: 120px;
                    text-align: right;
                    color: #32e1e4;
                    padding-right: 10px;
                }

                .data-images,
                .check-images {
                    width: 100%;

                    .data-img {
                        margin-right: 1%;
                        width: 32%;
                        display: inline-block;
                    }
                }


                .check-state {
                    display: inline-block;
                    line-height: 20px;
                    padding: 2px 4px;
                    border-radius: 4px;

                    &.check-state-1 {
                        color: #09f509;
                        background: #01b24954;
                    }

                    &.check-state-2 {
                        color: #192c64;
                        background: #6abee9;
                    }
                }


            }
        }
    }
}
</style>