更改列表显示

马宇豪

2022-12-23 01f62968de39cacddaed903bb936cc5163573fc4

 src/views/doublePreventAction/hiddenDanger/inspectionStatistics/index.vue

@@ -1,17 +1,286 @@
<template>
    <div class="inspectionStatistics">
        <div class="inspectionStatistics_part">
            <div class="inspectionStatistics_part_person">
                <div class="inspectionStatistics_part_title">{{"巡检人员统计"}}</div>
                <div class="inspectionStatistics_part_time">
                    <el-select v-model="personListQuery.depId" @change="changeInspectionPerson">
                        <el-option
                            v-for="item in departmentList"
                            :key="item.id"
                            :value="item.id"
                            :label="item.department"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="inspectionStatistics_part_time">

                    <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="changeTimeInspectionPerson"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                    <el-divider></el-divider>
                <div class="inspectionStatistics_part_body">
                    <inspection-person ref="inspectionPerson"></inspection-person>
                </div>
            </div>
        </div>
        <div class="inspectionStatistics_part">
            <div class="inspectionStatistics_part_complete">
                <div class="inspectionStatistics_part_title">{{"巡检完成统计"}}</div>
                <div class="inspectionStatistics_part_time" style="width:150px">
                    <el-select v-model="completeListQuery.depId" @change="changeInspectionComplete">
                        <el-option
                            v-for="item in departmentList"
                            :key="item.id"
                            :value="item.id"
                            :label="item.department"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="inspectionStatistics_part_time" style="width:100px">
                    <el-select v-model="completeListQuery.status" @change="changeInspectionComplete">
                        <el-option
                            v-for="item in stateList"
                            :key="item.id"
                            :value="item.id"
                            :label="item.name"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="inspectionStatistics_part_time">
                    <el-date-picker
                    v-model="value2"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="changeCompleteTimeInspectionPerson"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <el-divider></el-divider>
                <div class="inspectionStatistics_part_body">
                    <inspection-complete ref="inspectionComplete"></inspection-complete>
                </div>
            </div>
        </div>
        <div class="inspectionStatistics_part">
            <div class="inspectionStatistics_part_today">
                <div class="inspectionStatistics_part_title">{{"巡检任务统计"}}</div>
                <div class="inspectionStatistics_part_time">
                    <el-select v-model="taskListQuery.depId" @change="changeInspectionTask">
                        <el-option
                            v-for="item in departmentList"
                            :key="item.id"
                            :value="item.id"
                            :label="item.department"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="inspectionStatistics_part_time">

                    <el-date-picker
                        v-model="value3"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00','23:59:59']"
                        @change="changeTimeTask"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <el-divider></el-divider>
                <div class="inspectionStatistics_part_body">
                    <today-unusual ref="todayUnusual"></today-unusual>
                </div>
            </div>
        </div>
<!--        <div class="inspectionStatistics_part">-->
<!--            <div class="inspectionStatistics_part_unusual">-->
<!--                <div class="inspectionStatistics_part_title">{{"巡检异常统计"}}</div>-->
<!--                <div class="inspectionStatistics_part_time">-->
<!--                    <el-date-picker-->
<!--                    v-model="value3"-->
<!--                    type="daterange"-->
<!--                    range-separator="至"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期">-->
<!--                    </el-date-picker>-->
<!--                </div>-->
<!--                <el-divider></el-divider>-->
<!--                <div class="inspectionStatistics_part_body">-->
<!--                    <inspection-unusual></inspection-unusual>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

<script>
    import inspectionPerson from './components/inspectionPerson/index'
    import inspectionComplete from './components/inspectionComplete/index'
    import inspectionUnusual from './components/inspectionUnusual/index'
    import todayUnusual from './components/todayUnusual/index'
import { getInspectionCount } from '../../../../api/inspectionTask'
    import {getDepartmentList} from "../../../../api/departmentManage";
    export default {
        name: "index"
        name: "index",
        data() {
            return {
                value1:['',''],
                value2:['',''],
                value3:['',''],
                departmentList:[],
                listQuery:{
                "dateList": [
                ],
                "endDate": "",
                "execUid": null,
                "startDate": ""
                },
                personListQuery:{
                    depId:41,
                    startTime:'',
                    endTime:'',
                },
                completeListQuery:{
                    depId:41,
                    startTime:'',
                    endTime:'',
                    status:1,
                },
                taskListQuery:{
                    depId:41,
                    startTime:'',
                    endTime:'',
                },
                stateList:[
                    {id:1,name:'正常'},
                    {id:2,name:'存在隐患'},
                    {id:3,name:'未处理'}
                ]
            }
        },
        components : {
            inspectionPerson,
            inspectionComplete,
            inspectionUnusual,
            todayUnusual
        },
        created() {
            this.getDepartment()
        },
        mounted() {
            this.setTimeValue()
        },
        methods: {
            setTimeValue() {
                let newTime =  new Date()
                this.value1 = [(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' +  '01').toString() + ' '  + '00:00:00',(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + newTime.getDate()).toString() + ' ' + '23:59:59']
                this.personListQuery.startTime = this.value1[0]
                this.personListQuery.endTime = this.value1[1]
                this.$refs.inspectionPerson.updateData(this.personListQuery)
                this.value2 = [(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' +  '01').toString() + ' '  + '00:00:00',(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + newTime.getDate()).toString() + ' ' + '23:59:59']
                this.completeListQuery.startTime = this.value2[0]
                this.completeListQuery.endTime = this.value2[1]
                this.$refs.inspectionComplete.updateData(this.completeListQuery)
                this.value3 = [(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' +  '01').toString() + ' '  + '00:00:00',(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + newTime.getDate()).toString() + ' ' + '23:59:59']
                this.taskListQuery.startTime = this.value3[0]
                this.taskListQuery.endTime = this.value3[1]
                this.$refs.todayUnusual.updateData(this.taskListQuery)
            },
            changeTimeInspectionPerson() {
                if(this.value1 !== null){
                    this.personListQuery.startTime = this.value1[0]
                    this.personListQuery.endTime = this.value1[1]
                }
                this.$refs.inspectionPerson.updateData(this.personListQuery)
            },
            changeTimeTask(){
                if(this.value3 !== null){
                    this.taskListQuery.startTime = this.value3[0]
                    this.taskListQuery.endTime = this.value3[1]
                }
                this.$refs.todayUnusual.updateData(this.taskListQuery)
            },
            changeCompleteTimeInspectionPerson() {
                if(this.value2 !== null){
                    this.completeListQuery.startTime = this.value2[0]
                    this.completeListQuery.endTime = this.value2[1]
                }
                this.$refs.inspectionComplete.updateData(this.completeListQuery)
            },
            changeInspectionTask() {
                this.$refs.todayUnusual.updateData(this.taskListQuery)
            },
            changeInspectionPerson() {
                this.$refs.inspectionPerson.updateData(this.personListQuery)
            },
            changeInspectionComplete() {
                this.$refs.inspectionComplete.updateData(this.completeListQuery)
            },
            async getDepartment(){
                let res = await getDepartmentList({pageSize:1000,pageIndex:1})
                if(res.data.code === '200'){
                    this.departmentList = res.data.result.result
                }else{
                    this.$message({
                        message:res.data.message,
                        type:'warning'
                    })
                }
            },
        }
    }
</script>

<style scoped>
.inspectionStatistics{

}
    /deep/.el-divider--horizontal {
        margin-top: 1px !important;
    }
    .inspectionStatistics{
        width:100%;
        height:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .inspectionStatistics_part{
        width:800px;
        height:500px;
        background-color: #FFFFFF;
        margin-bottom: 6.5px;
    }
    inspectionStatistics_part_person{
        width:100%;
        height: 200px;
    }
    .inspectionStatistics_part_title{
        height:60px;
        line-height: 60px;
        padding-left:20px;
        display: inline-block;
        width:20%;
    }
    .inspectionStatistics_part_body{
        width:100%;
        height:410px;
    }
    .inspectionStatistics_part_time{
        display: inline-block;
    }
</style>