YZProjectCloud/yanzhu-bigscreen/src/views/safety/dialog/safetyCheckDialog.vue

<template>
    <MyDialog v-if="show" v-model="show" width="60vw" height="75vh" class="safety-check-dialog">
        <template slot="title">{{ title }}</template>
        <div class="head-title-tab" style="padding: 10px 0px;">
            <div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">待整改{{ counts[0] }}</div>
            <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">待复检{{ counts[1] }}</div>
            <div :class="nav == 7 ? 'head-nav active' : 'head-nav'" @click="doNav(7)">复检驳回{{ counts[2] }}</div>
            <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">复检通过{{ counts[3] }}</div>
            <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">整改超时{{ counts[4] }}</div>
        </div>
        <div class="scroll data-list" :key="dataKey">
            <div v-if="rows.length == 0" style="text-align: center;" class="div-no-data">
                <img src="images/nodata.png" style="width: 120px;" />
                <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
            </div>
            <div v-for="(it, idx) in rows" :key="idx" class="data-item">
                <div class="left-image">
                    <div class="left-header">
                        <span class="sp-nav" :class="it.imgSel == 0 ? 'active' : ''" @click="it.imgSel = 0">整改前</span>
                        <span class="sp-nav" :class="it.imgSel == 1 ? 'active' : ''" v-if="it.checkState == 4" @click="it.imgSel = 1">整改后</span>
                    </div>
                    <el-image class="img-sm" fit="scale-down" :src="it.smarkUrl" v-if="it.imgSel == 0" :preview-src-list="[it.smarkUrl]"></el-image>
                    <el-image class="img-sm" fit="scale-down" :src="it.marksPicture" v-if="it.imgSel == 1" :preview-src-list="[it.marksPicture]"></el-image>
                </div>
                <div class="right-data">
                    <el-col :span="12">
                        <span class="sp-label">隐串类型:</span>
                        <span class="sp-value">{{ getDict(it.dangerType) }}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="sp-label">提交时间:</span>
                        <span class="sp-value">{{ it.createTime }}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="sp-label">提交人:</span>
                        <span class="sp-value">{{ it.createUser }}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="sp-label">整改人:</span>
                        <span class="sp-value">{{ it.lordSentUser }}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="sp-label">抄送人:</span>
                        <span class="sp-value">{{ it.copySendUser }}</span>
                    </el-col>
                    <el-col :span="12">
                        <span class="sp-label">截止时间:</span>
                        <span class="sp-value">{{ it.nickedTime }}</span>
                    </el-col>
                    <el-col :span="24">
                        <span class="sp-label">隐患描述:</span>
                        <span class="sp-value">{{ it.workParts }}</span>
                    </el-col>
                    <el-col :span="24">
                        <span class="sp-label">整改要求:</span>
                        <span class="sp-value">{{ it.changeInfo }}</span>
                    </el-col>
                </div>
            </div>
        </div>
        <el-pagination
            v-if="rows.length > 0"
            layout="total,prev, pager, next"
            @current-change="handleCurrentChange"
            :total="total"
            :page-size="pageSize"
            :current-page.sync="pageNum"
            class="bg-pagination"
        ></el-pagination>
    </MyDialog>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            title: '安全隐患排查',
            prjInfo: {},
            nav: 6,
            problemType: null,
            counts: [],
            pageNum: 0,
            pageSize: 10,
            total: 0,
            rows: [],
            dataKey: 0,
            dangerTypeDict: [],
        }
    },
    methods: {
        handleCurrentChange(n) {
            this.pageNum = n
            this.loadData()
        },
        getDict(n) {
            let tmps = this.dangerTypeDict.filter((d) => d.value == n)
            return tmps.length > 0 ? tmps[0].label : ''
        },
        doNav(n) {
            this.nav = n
            this.loadData()
        },
        showDialog(prj, n, dangerTypeDict) {
            this.dangerTypeDict = dangerTypeDict
            this.problemType = n == 0 ? null : n
            this.prjInfo = prj
            this.title = ['安全隐患排查', '日常巡检', '周检', '月检', '专项检查'][n]
            this.pageNum = 0
            this.show = true
            this.getCount(n)
            this.loadData()
        },
        getCount(n) {
            let postData = {
                projectId: this.prjInfo.id,
                comId: this.prjInfo.comId,
                infoType: 0,
            }
            if (n > 0) {
                postData.problemType = n
            }
            this.$api.safety.listCountForBG(postData).then((d) => {
                this.counts = d.data.filter((it) => it.projectName != 'a').map((it) => it.id)
            })
        },
        loadData() {
            let postData = {
                projectId: this.prjInfo.id,
                comId: this.prjInfo.comId,
                infoType: 0,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                problemType: this.problemType,
                checkState: this.nav,
            }
            this.$api.safety.listForBG(postData).then((d) => {
                this.total = d.total
                this.rows = (d.rows || []).map((it) => {
                    it.imgSel = 0
                    return it
                })
                this.dataKey++
            })
        },
    },
}
</script>

<style lang="less">
.safety-check-dialog {
    .popup-project-introduction-min {
        transform: translateY(20%);
    }

    .bg-pagination {
        margin-top: 5px;
    }

    .data-list {
        max-height: calc(75vh - 150px);
        overflow-y: auto;

        .div-no-data {
            margin-top: 10vh;
        }

        .data-item {
            display: flex;
            background: #060f239d;
            padding: 10px;
            border: solid 1px #cccccc33;
            margin-top: 20px;

            &:first-child {
                margin-top: 0;
            }

            .left-image {
                width: 160px;
                box-shadow: 1px 1px 10px 1px #ffffff3b;

                .left-header {
                    margin-bottom: 8px;
                    background: #fff;

                    .sp-nav {
                        display: inline-block;
                        width: 50%;
                        line-height: 30px;
                        text-align: center;
                        background: #fff;
                        color: #5b84eb;
                        cursor: pointer;

                        &.active {
                            color: #fff;
                            background: #5b84eb;
                        }
                    }
                }

                .el-image {
                    width: 160px;
                    height: 100px;
                }
            }

            .right-data {
                flex-grow: 1;
                padding: 0px 20px;
                line-height: 30px;

                .sp-label {
                    color: #8bffd2;
                }
            }
        }
    }
}

@media (min-width: 1921px) and (max-width: 2560px) {
    .safety-check-dialog {
        .bg-pagination {
            margin-top: 5px;

            * {
                font-size: 20px !important;
            }

            button,
            li {
                height: 28px !important;
                line-height: 28px !important;
            }
        }

        .data-list {
            max-height: calc(75vh - 180px);

            .data-item {
                .right-data {
                    font-size: 18px;

                    .sp-label {
                        color: #8bffd2;
                    }
                }
            }
        }
    }
}

@media (min-width: 2561px) {
    .safety-check-dialog {
        .bg-pagination {
            margin-top: 15px;

            * {
                font-size: 24px !important;
            }

            button,
            li {
                height: 32px !important;
                line-height: 32px !important;
            }
        }

        .data-list {
            max-height: calc(75vh - 180px);

            .data-item {
                .right-data {
                    font-size: 24px;

                    .sp-label {
                        color: #8bffd2;
                    }
                }
            }
        }
    }
}
</style>