fj-dc-ui/.svn/pristine/aa/aae28aaf7087e02b73da5e0cb6cca0b692831c6e.svn-base

<template>
    <div :style="{'height':this.tableHeight+'px'}">
        <el-container>
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;overflow-x: hidden;">
                <el-table :data="wtqdData" style="width: 100%;" :height="tableHeight1">
                    <el-table-column show-overflow-tooltip="true" prop="inspPblmsName" label="督查问题类别" min-width="100" align="center"></el-table-column>
                    <el-table-column header-align="center" align="center" show-overflow-tooltip="true" min-width="100" prop="inspPblmCate" label="问题严重程度">
                        <template slot-scope="scope">
                            <span style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)" v-if="scope.row.inspPblmCate == 0">一般</span>
                            <span style="padding: 3px 10px;background:#E6A23C;border-radius:15px;color:rgba(255,255,255,1)" v-if="scope.row.inspPblmCate == 1">较重</span>
                            <span style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)" v-if="scope.row.inspPblmCate == 2">严重</span>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" min-width="80" prop="ifCasePblm" label="是否典型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ifCasePblm == 1">典型</span>
                            <span v-if="scope.row.ifCasePblm == 0">非典型</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="collTime" label="上报时间" align="center" :formatter="timestampToTime" show-overflow-tooltip="true" min-width="120"></el-table-column>
                    <el-table-column prop="inspPblmDesc" label="描述" align="center" show-overflow-tooltip="true" min-width="170"></el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <!-- 分页 -->
        <div style="text-align: center;">
            <el-pagination
                class="paginationCenter"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>

        <transition name="el-fade-in-linear">
            <draggable title="问题详情" @closeDraggable="closeDraggable_shxq" initTop=0 initLeft=300 initWidth=600 initHeight=325 v-if="showMore_sh">
                <template>
                    <el-table :data="tableData2" height="300" highlight-current-row border stripe style="width: 100%">
                        <el-table-column type="index" label="序号" align='center' width="80"></el-table-column>
                        <el-table-column prop="inspPblmName" label="问题名称" align='center' width="150"></el-table-column>
                        <el-table-column prop="inspPblmDesc" label="问题描述" align='center' width="120"></el-table-column>
                        <el-table-column prop="inspAddDesc" label="问题地址" align='center' width="150"></el-table-column>
                        <el-table-column prop="collTime" label="上报时间" align='center' width="130" :formatter="timestampToTime"></el-table-column>
                        <el-table-column prop="pblmStat" label="处理状态" align='center' width="100" :formatter="processState"></el-table-column>
                        <el-table-column prop="pblmLong" label="问题经度" align='center' width="100"></el-table-column>
                        <el-table-column prop="pblmLat" label="问题纬度" align='center' width="100"></el-table-column>
                        <el-table-column prop="reviOpin" label="复查意见" align='center' width="100"></el-table-column>
                        <el-table-column prop="reviConc" label="复查结论" align='center' width="100"></el-table-column>
                        <el-table-column prop="recPers" label="操作记录人员" align='center' min-width="300"></el-table-column>
                    </el-table>
                </template>
            </draggable>
        </transition>
    </div>
</template>
<script>
import draggable from '../../draggable'
import request from "../../../../../utils/gw_ajax_request.js";
export default {
    name: "WaterloggingProject",
    components:{
        draggable,
    },
    props:['shInfoCon','Title'],
    data(){
        return {
            tableHeight: window.innerHeight * 0.5,
            tableHeight1: window.innerHeight * 0.5 -62,
            curEventInfo:this.shInfoCon,
            title:this.Title,
            wtqdData:[],
            showMore_sh:false,
            problemForm: {},
            pageNum: 1,
            pageSize: 5,
            total:0,
        }
    },
    computed: {
        persId() {
            return localStorage.getItem("userid")? localStorage.getItem("userid"): "1098101939614724096";
        }
    },
    mounted(){
        this.getQusList();
    },
    watch:{
        shInfoCon(val){
            this.curEventInfo = val;
        }
    },
    methods:{
        getQusList() {
            this.problemForm.presId = this.persId;
            this.problemForm.objId = this.curEventInfo.objId;
            this.problemForm.objType = '3';
            this.problemForm.pageNum = this.pageNum;
            this.problemForm.pageSize = this.pageSize;
            request.post(`/dc/insp/pblm/list/${this.persId}`, this.problemForm).then(res => {
                if (res.success) {
                    this.wtqdData = res.data.list;
                    this.total = res.data.total;
                }
            });
        },
        showDetail(obj){
            this.showMore_sh = true;
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getQusList()
        },
        handleSizeChange(val){
            this.pageSize = val
            this.getQusList()
        },
        //  关闭人员弹窗
        closeModal() {
            this.$emit('closeModal','shgc')
        },
        timestampToTime(row, column) {
            var date = new Date(row.collTime);
            var Y = date.getFullYear() + "-";
            var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
            var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
            var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
            var m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            return Y + M + D + h + m;
        },
    }
}
</script>