jhbigscreen/src/pages/components/ProblemmodifyDetail.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" :class="'font-size-' + fontSize" :loading="loading"
        class="problem-modify-detail">
        <template slot="title">
            {{ row.projectName }}【{{ infoType == 0 ? '安全隐患' : '质量隐患' }}】
        </template>
        <div>
            <div class="font-size-tools">
                <i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize == 2 ? 'active' : ''">
                    <svg class="icon  svg-icon"
                        style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                        <path
                            d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                            fill="#fff" p-id="3687"></path>
                    </svg>
                </i>
                <i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize == 1 ? 'active' : ''">
                    <svg class="icon  svg-icon"
                        style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                        <path
                            d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                            fill="#fff" p-id="3687"></path>
                    </svg>
                </i>
                <i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize == 0 ? 'active' : ''">
                    <svg class="icon  svg-icon"
                        style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                        <path
                            d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                            fill="#fff" p-id="3687"></path>
                    </svg>
                </i>
            </div>
            <div class="head-title-tab">
                <div :class="nav == 0 ? 'head-nav active' : 'head-nav'" @click="doNav(0)">待整改({{ count['0'] }})</div>
                <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">待复检({{ count['1'] }})</div>
                <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">复检驳回({{ count['3'] }})</div>
                <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">复检通过({{ count['4'] }})</div>
                <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">整改超时({{ count['5'] }})</div>

            </div>
            <div class="data-list scroll" style="max-height:690px;overflow-y: auto;margin:12px 0px;overflow-x: hidden;"
                v-if="dataTable.length > 0" :key="elKey">
                <div v-for="(it, idx) in dataTable" :key="idx" class="data-item" :class="it.timeout ? 'time-out' : ''">
                    <div class="item-left">
                        <el-image ref="preview" style="width: 400px; " :preview-src-list="[it.marksPicture]"
                            :src="it.marksPicture + '.1000.jpg'">
                        </el-image>
                    </div>
                    <div class="item-right">
                        <div v-if="it.timeout && it.checkState != 4" class="text-timeout"></div>
                        <div class="text-state" :class="'state' + it.checkState">{{ getCheckState(it.checkState) }}</div>
                        <el-col :span="12" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">总包单位:</span>
                            <div class="div-text">{{ it.deptName }}</div>
                        </el-col>
                        <el-col :span="12" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患类型:</span>
                            <div class="div-text">{{ getDangerType(it.dangerType) }}</div>
                        </el-col>
                        <el-col :span="12" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患整改人:</span>
                            <div class="div-text">{{ it.lordSent }}</div>
                        </el-col>
                        <el-col :span="12" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">复检人:</span>
                            <div class="div-text">{{ it.recheckSend }}</div>
                        </el-col>
                        <el-col :span="12" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">抄送人:</span>
                            <div class="div-text">{{ it.copySend }}</div>
                        </el-col>
                        <template v-if="it.checkState == 4">
                            <el-col :span="12" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
                                <div class="div-text">{{ it.createBy }}</div>
                            </el-col>
                            <el-col :span="8" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
                                <div class="div-text">{{ it.createTime | formatDate('YYYY-MM-DD') }}</div>
                            </el-col>
                            <el-col :span="8" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">截止时间:</span>
                                <div class="div-text">{{ it.nickedTime | formatDate('YYYY-MM-DD') }}</div>
                            </el-col>
                            <el-col :span="8" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">完成时间:</span>
                                <div class="div-text">{{ it.updateTime | formatDate('YYYY-MM-DD') }}</div>
                            </el-col>
                        </template>
                        <template v-else>
                            <el-col :span="12" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
                                <div class="div-text">{{ it.createBy }}</div>
                            </el-col>
                            <el-col :span="12" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
                                <div class="div-text">{{ it.createTime | formatDate('YYYY-MM-DD') }}</div>
                            </el-col>
                            <el-col :span="12" class="item-data">
                                <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">截止时间:</span>
                                <div class="div-text">{{ it.nickedTime | formatDate('YYYY-MM-DD') }}</div>
                            </el-col>
                        </template>
                        <el-col :span="24" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患描述:</span>
                            <div class="div-text">{{ it.workParts }}
                            </div>
                        </el-col>
                        <el-col :span="24" class="item-data">
                            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">整改要求:</span>
                            <div class="div-text">{{ it.changeInfo }}</div>
                        </el-col>
                    </div>
                </div>
            </div>
            <el-pagination v-if="dataTable.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
            @current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
            class="bg-pagination"></el-pagination>
            <div v-if="dataTable.length == 0"  style="text-align: center;margin-top: 200px;">
                <img src="images/nodata.png" style="width: 240px;">
                <div style="text-align: center;">暂无数据</div>
            </div>
        </div>

    </MyDialog>
</template>

<script>

import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog
    },
    data() {
        return {
            loading:false,
            fontSize: 0,
            elKey: 0,
            nav: 0,
            infoType: 0,
            roleType: 0,
            row: null,
            show: false,
            count: {
                "0": 0,
                "1": 0,
                "3": 0,
                "4": 0,
                "5": 0
            },
            dataTable: [],
            dicts: [],
            checkStateDicts: [],
            selDate: [],
            size: 10,
            index: 1,
            total: 0,
        };
    },

    mounted() {
    },

    methods: {
        getDangerType(v) {
            let tmps = this.dicts.filter(d => d.dictValue == v);
            return tmps.length > 0 ? tmps[0].dictLabel : '';
        },
        getCheckState(v) {
            let tmps = this.checkStateDicts.filter(d => d.dictValue == v);
            return tmps.length > 0 ? tmps[0].dictLabel : '';
        },
        handleCurrentChange(n) {
            this.index = n;
            this.getData();
        },
        doNav(n, init) {
            if (n == this.nav && !init) {
                return;
            }
            this.nav = n;            
            this.index=1;
            this.getData();
        },
        getData(){
            let postData = {
                projectId: this.row.projectId,
                infoType: this.infoType,
                roleType: this.roleType
            };
            if (this.nav == 5) {
                postData.activeName = 'zgcs'
            } else {
                postData.checkState = this.nav
            }
            if (this.selDate.length > 0) {
                postData.startDate = this.$dt(this.selDate[0]).format("YYYY-MM-DD");
            }
            if (this.selDate.length > 1) {
                postData.endDate = this.$dt(this.selDate[1]).format("YYYY-MM-DD");
            }
            this.loading=true;
            this.$api.problemmodify.listSspProblemmodify(postData,this.size,this.index).then(d => {
                this.loading=false;
                this.total=d.total;
                this.dataTable = (d.rows || []).map(it => {
                    if (it.updateTime) {
                        let dt1 = +this.$dt(this.$dt(it.nickedTime).format("YYYY-MM-DD"));
                        let dt2 = +this.$dt(this.$dt(it.updateTime).format("YYYY-MM-DD"));
                        if (dt1 < dt2) {
                            it.timeout = true;
                        } else {
                            it.timeout = false;
                        }
                    } else if (it.nickedTime) {
                        let dt1 = +this.$dt(this.$dt(it.nickedTime).format("YYYY-MM-DD"));
                        let dt2 = +this.$dt(this.$dt(new Date()).format("YYYY-MM-DD"));
                        if (dt1 < dt2) {
                            it.timeout = true;
                        } else {
                            it.timeout = false;
                        }
                    } else {
                        it.timeout = false;
                    }
                    return it;
                });
                this.elKey++;
            })
        },
        showDialog(row, infoType, roleType, selDate) {
            this.selDate = selDate;
            this.row = row;
            this.infoType = infoType;
            this.roleType = roleType;
            if (infoType == 0) {
                this.$api.dict('ssp_aqyhlx').then(d => {
                    this.dicts = d || [];
                })
            } else {
                this.$api.dict('ssp_zlyhlx').then(d => {
                    this.dicts = d || [];
                })
            }
            this.$api.dict('smz_ssp_checkstate').then(d => {
                this.checkStateDicts = d || [];
            });
            this.show = true
            this.doNav(0, true);
            let postData = {
                projectId: this.row.projectId,
                infoType: this.infoType,
                roleType: this.roleType
            };
            if (this.selDate.length > 0) {
                postData.startDate = this.$dt(this.selDate[0]).format("YYYY-MM-DD");
            }
            if (this.selDate.length > 1) {
                postData.endDate = this.$dt(this.selDate[1]).format("YYYY-MM-DD");
            }
            this.$api.problemmodify.groupByInfotypeCheckState(postData).then(d => {
                for (let i = 0; i <= 5; i++) {
                    this.count["" + i] = 0;
                }
                let tmps = (d.data || []).filter(it => it.infoType == this.infoType);
                tmps.forEach(it => {
                    this.count["" + it.checkState] = it.id;
                })
            })
        }
    },
};
</script>

<style lang="less" >
.problem-modify-detail {
    .popup-project-introduction-min {
        transform: translateY(100px);
    }

    .popup-project-introduction-details {
        padding: 0px !important;
        position: relative;

        .quality-table {
            padding: 0px !important;
        }

        .font-size-tools {
            position: absolute;
            top: -40px;
            right: 100px;
        }
    }

    &.font-size-2 {
        .head-title-tab {
            .head-nav {
                font-size: 32px;
                height: 48px;
                line-height: 48px;
                padding: 0px 48px;
            }
        }

        .item-data {
            line-height: 64px;
            font-size: 32px;
            line-height: 64px;

            .div-text {
                line-height: 64px;
            }

        }
    }

    &.font-size-1 {
        .head-title-tab {
            .head-nav {
                font-size: 24px;
                height: 30px;
                line-height: 30px;
                padding: 0px 30px;
            }
        }

        .item-data {
            line-height: 48px;
            font-size: 24px;
            line-height: 48px;

            .div-text {
                line-height: 48px;
            }
        }
    }

    .head-title-tab {
        padding-top: 12px;
        display: block;
        width: 100%;

        .head-nav {
            background-size: 100% 100%;
            display: inline-block;
            width: auto;
            padding: 0px 24px;
        }
    }

    .data-list {
        .data-item {
            border-bottom: solid 1px #fff;
            box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
            display: flex;
            padding-left: 8px;

            &.time-out {
                box-shadow: inset 7px 0px 11px 5px rgb(167, 36, 36);

                .text-state {
                    color: rgba(167, 36, 36, 0.6) !important;
                }
            }

            .item-left {
                display: inline-flex;
                width: 400px;
                min-height: 220px;
                align-items: center;
            }

            .text-state {
                font-size: 32px;
                position: absolute;
                color: rgba(200, 200, 200, 0.2);
                transform: rotate(45deg);
                top: 60px;
                left: calc(50% - 100px);

                &.state4 {
                    color: rgba(5, 248, 5, 0.5);
                }
            }

            .item-right {
                display: inline-block;
                margin-left: 10px;
                width: calc(100% - 414px);
                position: relative;

                .sp-lbl {
                    display: inline-block;
                    color: aquamarine;

                }

                .text-timeout {
                    position: absolute;
                    right: -4px;
                    font-size: 24px;
                    color: #fff;
                    display: block;
                    padding: 20px;
                    background: linear-gradient(-135deg, red, red 50%, transparent 50%, transparent 100%);
                    height: 50px;
                    width: 50px;

                    &::after {
                        content: "超时";
                        transform: rotate(45deg);
                        display: block;
                        position: absolute;
                        left: 42px;
                        top: 15px;
                    }
                }

                .item-data {
                    display: flex;
                    align-items: center;
                    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
                    line-height: 36px;

                    .div-text {
                        display: inline-block;
                        width: calc(100% - 200px);
                        vertical-align: top;
                        white-space: break-spaces;
                        word-break: break-word;

                    }
                }
            }
        }
    }
}</style>