CKQ/src/views/particulars/check.vue

<template>
    <div class="check-page">
        <header></header>
        <div class="tab">
            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px">
                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
            </el-select>
            <el-select v-model="conditions.goafOrebody" placeholder="矿体"  @change="changeArea(2)" style="width:120px;margin:0 12px;">
                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
            </el-select>
            <el-select v-model="conditions.goafOreheight" placeholder="中段"  @change="changeArea(3)" style="width:120px">
                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
            </el-select>
            <el-select v-model="conditions.goafId" placeholder="采空区编号"  @change="changeArea(4)" style="width:210px;margin:0 12px;">
                <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafId" :label="item.goafName" />
            </el-select>  
        </div>
        <div class="container">
            <div class="lf">
                <div class="search-container">
                    <div class="top">
                        <div class="search-item">
                            <el-input v-model="conditions.taskTitle"  class="input" placeholder="请输入任务名称" />
                        </div>
                        <!-- <div class="search-item">
                            <span>是否异常：</span>
                            <el-select v-model="search.level" class="select" placeholder="全部">
                                <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                placeholder="是否异常"
                                />
                            </el-select>                            
                        </div> -->
                        <div class="search-item">
                            <span>状态：</span>
                            <el-select v-model="conditions.status" class="select" placeholder="全部" clearable>
                                <el-option
                                v-for="item in status_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                placeholder="状态"
                                />
                            </el-select>                            
                        </div>
                        <div class="search-item">
                            <span>开始时间：</span>
                            <el-date-picker
                                v-model="conditions.expectedStartDate"
                                type="datetime"
                                placeholder="请选择巡检时间"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                style="width:200px;margin-right: 14px;"
                            />  
                        </div>     
                        <div class="search-item">
                            <span>结束时间：</span>
                            <el-date-picker
                                v-model="conditions.expectedEndDate"
                                type="datetime"
                                placeholder="请选择巡检时间"
                                style="width:200px;margin-right: 14px;"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />  
                        </div>          
                    </div>
                    <div class="bt-group">
                        <div class="bt search" @click="searchSubmit">查询</div>
                        <div class="bt" @click="resetSubmit">重置</div>                    
                    </div>
                </div>
                <div class="lf-container"> 
                    <table>
                        <tr>
                            <td>任务名称</td>
                            <td>状态</td>
                            <td>执行人员</td>
                            <td>截止时间</td>
                        </tr>
                        <tr v-for="(item,index) in dataList" :key="index">
                            <td>{{ item.taskTitle }}</td>
                            <td>{{ formateStatus(item.status) }}</td>
                            <td>{{ item.handleAccountName }}</td>
                            <td>{{ item.expectedEndDate }}</td>
                        </tr>
                    </table>
                    <div class="el-pagination-wrap">
                        <el-pagination small layout="prev, pager, next" 
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                     </div>                                   
                </div>
            </div>
            <div class="rt">
                <div class="head">
                    <div class="name">巡检数据统计</div>
                    <div class="number">123</div>
                </div>
                <div class="head-info">
                    <div class="item total">
                        <div class="name">总数</div>
                        <div class="number">{{statistics.total}}</div>                    
                    </div>
                    <div class="item normal">                        
                        <div class="name">正常</div>
                        <div class="number">{{statistics.normal}}</div>                    
                    </div>
                    <div class="item error">
                        <div class="name">异常</div>
                        <div class="number">{{statistics.error}}</div>                    
                    </div>
                </div>
                <div class="chart-wrap">
                    <div class="title">异常分析</div>
                    <abnormal ref="abnormal" />
                </div>
                <div class="chart-wrap">
                    <div class="title">异常处理情况</div>
                    <warn-chart ref="warn-chart" />
                </div>                
            </div>
        </div>
    </div>
</template>
<script>
import Abnormal  from './components/Abnormal.vue'
import WarnChart from './components/WarnChart.vue'
import { getCheckTaskByPage } from '@/api/goaf/task'
import {  getGoafBaseInfo } from '@/api/goaf/info'
import {goaftaskstatis} from '@/api/goaf/check'

import {getTime} from '@/utils'
 export default {
    name:"check",
    components:{
        Abnormal,
        WarnChart
    },
    data(){
        return{
            activeId:'1',
            activetab:'1',
            goafList: [],
            goafOrebelts: [],
            goafOrebodys: [],
            goafOreheights: [],
            goafNames: [],
            conditions: {
                page: 1,
                limit: 10,
                status:0,
                taskTitle:"",
                expectedStartDate:getTime(),
                expectedEndDate:getTime(1),
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:""
            },   
            items:[
                {name:"首页",id:"1",path:"/particulars/sensor"},
                {name:"压力传感器",id:"2",path:"/particulars/check"},
                {name:"位移传感器",id:"3",path:"/particulars/goaf-info"},
                {name:"有害气体传感器",id:"4",path:"/particulars/goaf-info"},
                {name:"视频监控",id:"5",path:"/particulars/goaf-info"},
            ],
            status_options:[
                {label:"待处理",value:0},
                {label:"处理完成",value:1},
                {label:"逾期",value:2},
            ] ,
            options1:[
                {label:'是',value:1},
                {label:'否',value:0},
            ],
            dataList:[],
            total:0 ,
            statistics:{
                total:0,
                normal:0,
                error:0
            }               
        }
    },
    created(){
        this.init()
    },
    methods:{
        formateStatus(val){
            let status=['待处理','处理完成','已逾期']
            return status[val]
        },
        init(){
            this.$nextTick(()=>{
                this.$refs['abnormal'].init();
                this.$refs['warn-chart'].init();
                this.getData()
            })
            this.getGoafBaseInfo()
            this.goaftaskstatis()
        },
        getGoafBaseInfo(){
            getGoafBaseInfo().then((res) => {
                const goafOrebelts = res.data.map(item => item.goafOrebelt)
                this.goafOrebelts = [...new Set(goafOrebelts)]
                this.goafList = res.data
            })  
        },
        goaftaskstatis(){
            goaftaskstatis().then((res)=>{
                this.statistics={
                    total:res.data.goafTaskCompletedNum,
                    normal:res.data.goafTaskPassNum,
                    error:res.data.goafTaskNopassdNum
                }  
            })
        },
        changeHead(item){
            this.activeId=item.id
        },
        changeTab(item){
            this.activetab=item.id
        },
        searchSubmit(){
            this.getData()
        },
        getData(){
            for(let key in this.conditions){
                if(this.conditions[key]===undefined||this.conditions[key]===''||this.conditions[key]==='undefined'){
                    delete this.conditions[key]
                }
            }
            getCheckTaskByPage(this.conditions).then((resp) => {
                this.listLoading = false
                const {data, total } = resp
                this.dataList = data
                this.total = total
            })
        },
        resetSubmit(){
            this.conditions={
                page: 1,
                limit: 10,
                status:0,
                taskTitle:"",
                expectedStartDate:getTime(),
                expectedEndDate:getTime(1),
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:""      
            }
            this.goafOrebodys=[]
            this.goafOreheights=[]
            this.goafNames=[]  
            this.getData()
        },
        handleSizeChange(limit){
            this.conditions.limit=limit
            this.getData()
        },
        handleCurrentChange(pageNumber){
            this.conditions.page=pageNumber
            this.getData()
        },
        changeArea(type) {
            const goafs = this.deeepClone(this.goafList)
            let goafOrebodys = this.deeepClone(this.goafOrebodys)
            let goafOreheights = this.deeepClone(this.goafOreheights)
            let goafNames = this.deeepClone(this.goafNames)
            if (type === 1) {
                goafOrebodys = goafs.filter(item => item.goafOrebelt === this.conditions.goafOrebelt)
                goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
                this.goafOrebodys = goafOrebodys
                this.goafOreheights = []
                this.goafNames = []
                this.conditions.goafOrebody = ''
                this.conditions.goafOreheight = ''
                this.conditions.goafName = ''
                this.conditions.goafId = ''
            } else if (type === 2) {
                goafOreheights = goafs.filter(item => (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
                this.goafOreheights = goafOreheights
                this.goafNames = []
                this.conditions.goafOreheight = ''
                this.conditions.goafName = ''
                this.conditions.goafId = ''
            } else if (type === 3) {
                goafNames = goafs.filter(item => (item.goafOreheight === this.conditions.goafOreheight) && (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
                this.goafNames = goafNames
                this.conditions.goafName = ''
                this.conditions.goafId = ''
            } else {
                for (let i = 0; i < goafNames.length; i++) {
                if (this.conditions.goafId === goafNames[i].goafId) {
                    this.conditions.goafName = goafNames[i].goafName
                }
                }
            }
            this.$forceUpdate()
        },  
        unique(arr = [], name = 'name') {
            const res = new Map()
            return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
        },         
        deeepClone(params) {
            return JSON.parse(JSON.stringify(params))
        } 
    }
 }
</script>
<style lang="scss" scoped>
.check-page{
    .search-item{
        display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 14px;
            span{
                font-family: 'Ping Hei';
                font-size: 14px;
                line-height: 1;
                color: rgba(255, 255, 255, 0.7);
            }
        }
        .input,.select,.el-date-editor{
            width: 180px;
            margin-right:16px;
            color: #fff;
        }
        ::v-deep{
            .el-input__wrapper{
                background-color:  rgba(8, 128, 255, 0.2);
                border: 0;
                box-shadow: none;               
            }
            .el-input__inner{
                color: #fff;
            }
    }  
    header{
        padding-top: 0.5vh;
        padding-bottom: 36px;
    }
    .tab{
        padding-top: 1.5vh;
        .item{
            display: inline-block;
            padding: 5px 10px;
            color: #fff;
            font-size: 16px;
            background: #003B7A;
            border: 1px solid #004EA2;
            letter-spacing: 0.6px;
            margin-right: 24px;
            border-radius: 4px 15px 8px 4px;
            cursor: pointer;
            &.active{
                background: #0083CF;
                border: 1px solid #0097DD;
            }
        }
    }
    .container{
        display: flex;
        .lf{
            width: 60%;
            padding-left: 100px;
            .search-container{
                padding:4.4vh 0 5vh 0;
                box-sizing: border-box;
                .top{
                    display: flex;
                    flex-wrap: wrap;
                    .search-item{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 14px;
                        span{
                            font-family: 'Ping Hei';
                            font-size: 14px;
                            line-height: 1;
                            color: rgba(255, 255, 255, 0.7);
                        }
                    }                    
                }
                .input,.select,.el-date-editor{
                    width: 180px;
                    margin-right:16px;
                    color: #fff;
                }
                ::v-deep{
                    .el-input__wrapper{
                        background-color:  rgba(8, 128, 255, 0.2);
                        border: 0;
                        box-shadow: none;               
                    }
                    .el-input__inner{
                        color: #fff;
                    }
                } 
                .bt{
                    width: 100px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    color: #fff;
                    font-size: 14px;
                    background: rgba(8, 128, 255, 0.2);
                    border-radius: 4px;  
                    margin-top: 14px;    
                    cursor: pointer;    
                    display: inline-block;          
                    &.search{
                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
                        margin:14px 10px 0 0;
                    }
                }       
            }
            .lf-container{
                overflow-y: auto;
                table{
                    width: 100%;
                    color: #fff;
                    font-family: 'Microsoft YaHei UI';
                    tr:nth-child(1){
                        td{
                            color: #BFE7F9;
                            font-size: 16px;
                        }
                    }
                    td{
                        font-size: 16px;
                        color: #D9E1EC;
                        padding: 8px;
                        line-height: 1;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
                    }
                }
                .el-pagination-wrap{
                    float: right;
                    margin-top: 5vh;
                    ::v-deep{
                        .el-pager li,button{
                            background-color: #00539F;
                            margin-left: 10px;
                            color: rgba(255, 255, 255, 0.75);
                            &.is-active{
                                background-color: rgba(0, 131, 207, 1);
                            }
                        }
                    }
                }
            }         
        }
        .rt{
            flex: 1;
            padding-left: 5%;
            box-sizing: border-box;
            .head{
                height: 32px;
                background-image: url(@/views/home/images/home/title.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;   
                color: #2affff;
                font-size: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-indent: 24px;
                padding: 0 14px;
                font-family: "YouSheBiaoTiHei";
                letter-spacing: 1px;
                margin-top: 4.8vh;
            }
            .head-info{
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: 20px;
                .item{
                    width: 33.33%;
                    display: flex;
                    justify-content: center;
                    align-items: center;  
                    flex-direction: column;
                    color: #fff;
                    font-size: 12px;
                    &.total{
                        display: block;
                        font-weight: bold;
                        text-align: left;
                        .name{
                            font-size: 14px;
                            line-height: 20px;
                        }
                        .number{
                            font-size: 20px;
                            line-height: 38px;
                            font-weight: 700;
                            background: rgba(108, 128, 151, 0.1)
                        }
                    }  
                    &.normal{
                        border-left:1px solid rgba(255, 255, 255, 0.12);
                        border-right:1px solid rgba(255, 255, 255, 0.12);
                        margin: 0 2%;
                        height: 100%;
                        .number{
                            font-size: 20px;
                            line-height: 28px;
                            color: #3CD495;
                            font-weight: 500;
                        }                        
                    }  
                    &.error{
                        .number{
                            font-size: 20px;
                            line-height: 28px;
                            color: #D4603C;
                            font-weight: 500;
                        }                        
                    }                 
                }
            }
            .chart-wrap{
                padding-top: 0.8vh;
                .title{
                    color: #fff;
                    font-size: 18px;
                    line-height: 20px;
                    padding: 10px;
                    position: relative;
                    font-family: "YouSheBiaoTiHei";
                    letter-spacing: 1px;
                    margin-bottom: 2vh;
                    &::after{
                        display: block;
                        content: "";
                        width: 100%;
                        height: 3px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background-image: url('./images/line.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }
    }
}

</style>