CKQ/src/views/particulars/sensor.vue

<template>
    <div class="sensor-page">
        <header>
            <div :class="activeId===item.id?'active item':'item'" v-for="item in items" :key="item.id" @click="changeHead(item)">{{ item.name }}</div>  
        </header>
        <div class="tab">
            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px" clearable>
                <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="search-item">
                        <el-input v-model="conditions.goafDevName"  class="input" placeholder="请输入传感器名称" />
                    </div>
                    <div class="search-item">
                        <span>预警等级：</span>
                        <el-select v-model="conditions.hdangerLevel" placeholder="全部" style="width:120px;margin-right:14px;" clearable>
                            <el-option
                            v-for="item in hdangerLevels"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" 
                            />
                        </el-select>                    
                    </div>
                    <!-- <div class="search-item">
                        <span>状态：</span>
                        <el-select v-model="conditions.status" class="select" placeholder="全部">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </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 class="search-item">
                        <span>数值范围：</span>
                        <el-input-number v-model="conditions.start" :max="conditions.end" class="input" placeholder="开始" :controls="false" style="width:100px;" />  
                        <span>-</span>  
                        <el-input-number v-model="conditions.end" :min="conditions.start" placeholder="结束" :controls="false" style="width:100px;margin:0 10px;" />                     
                    </div>
                    <div class="bt search" @click="searchSubmit">查询</div>
                    <div class="bt" @click="resetSubmit">重置</div>    
                </div>
                <div class="lf-container">
                    <div class="card-container">
                        <div class="card" v-for="(item,index) in dataList" :key="index">
                            <div class="title">{{item.goafDevTypename}}</div>
                            <div class="info">
                                <p>设备编号：{{item.goafDevName}}</p>
                                <p>安装区域：{{ NumConvertLM(item.goafOrebelt) }}/{{ item.goafOrebody }}/{{ item.goafOreheight }}/{{ item.goafName }}</p>
                                <p>安装位置：{{ item.goafDevLocation }}</p>
                                <p>阈值：{{item.goafAlarmThreshold}}</p>
                                <!-- <p>是否在线：{{item.status}}</p> -->
                            </div>
                            <footer :class="'status-'+item.hdangerLevel">{{hdangerLevel(item.hdangerLevel)}}</footer>
                        </div>
                    </div> 
                    <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">123</div>                    
                    </div>
                    <div class="item normal">                        
                        <div class="name">正常</div>
                        <div class="number">120</div>                    
                    </div>
                    <div class="item error">
                        <div class="name">异常</div>
                        <div class="number">3</div>                    
                    </div>
                </div>
                <div class="chart-wrap">
                    <div class="title">报警统计</div>
                    <alert-chart ref="alert-chart" />
                </div>
                <div class="chart-wrap">
                    <div class="title">预警处理情况</div>
                    <warn-chart ref="warn-chart" />
                </div>                
            </div>
        </div>
    </div>
</template>
<script>
import AlertChart from './components/AlertChart.vue'
import WarnChart from './components/WarnChart.vue'
import { getSensorByPage } from '@/api/goaf/sensor'
import {  getGoafBaseInfo } from '@/api/goaf/info'
import { NumConvertLM } from '@/utils'
 export default {
    name:"sensor",
    components:{
        AlertChart,
        WarnChart
    },
    data(){
        return{
            activeId:'1',
            activetab:'1',
            conditions: {
                page: 1,
                limit: 8,
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:"",
                hdangerLevel:"",
                start:0,
                end:0
            }, 
            goafList: [],
            goafOrebelts: [],
            goafOrebodys: [],
            goafOreheights: [],
            goafNames: [],
            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"},
            ],
            tabs:[
                {name:"Ⅲ号",id:"1"},
                {name:"770",id:"2"},
                {name:"32001",id:"3"},
            ],
            options:[
                {label:1,value:2},
                {label:2,value:3},
                {label:3,value:4}
            ] ,
            hdangerLevels:[
                {label:"异常",value:0},
                {label:"威胁",value:1},
                {label:"危险",value:2},
                {label:"危急",value:3}
            ],   
            dataList:[],
            total:0                  
        }
    },
    created(){
        this.init()
    },
    methods:{
        NumConvertLM,
        hdangerLevel(val){
            let status=["异常","威胁","危险","危急"]
            return status[val]||'正常'
        },
        init(){
            this.$nextTick(()=>{
                this.$refs['alert-chart'].init();
                this.$refs['warn-chart'].init();
            })
            this.getData()
            getGoafBaseInfo().then((res) => {
                const goafOrebelts = res.data.map(item => item.goafOrebelt)
                this.goafOrebelts = [...new Set(goafOrebelts)]
                this.goafList = res.data
            })            
        },
        getData(){
            for(let key in this.conditions){
                if(this.conditions[key]===undefined||this.conditions[key]==="undefined"||this.conditions[key]===""){
                    delete this.conditions[key]
                }
            }
            getSensorByPage(this.conditions).then((resp) => {
                this.listLoading = false
                const {data, total } = resp
                this.dataList = data
                this.total = total
            })
        },
        changeHead(item){
            this.activeId=item.id
            if(item.id==='5'){
                this.$router.push('/particulars/particulars-video')
            }
        },
        changeTab(item){
            this.activetab=item.id
        },
        searchSubmit(){
            this.getData()
        },
        resetSubmit(){
            this.conditions={
                page: 1,
                limit: 8,
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:"",
                hdangerLevel:"",
                start:0,
                end:0           
            }
            this.getData()
        },
        handleSizeChange(limit){
            this.conditions.limit=limit
            this.getData()
        },
        handleCurrentChange(pageNumber){
            this.conditions.page=pageNumber
        },
        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)
                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))
                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()
        },        
        deeepClone(params) {
            return JSON.parse(JSON.stringify(params))
        }  
    }
 }
</script>
<style lang="scss" scoped>
.sensor-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{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0.5vh;
        .item{
            width: 188px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-image: url(@/assets/sensor/head.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-right: 12px;
            max-width: 20%;
            color: #7FCFF4;
            cursor: pointer;
            &.active{
                background-image: url(@/assets/sensor/head_active.png); 
                color: #2AFFFF;
            }
        }
    }
    .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;
                display: flex;
                flex-wrap: wrap; 
                .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;   
                    margin-top: 0;           
                    &.search{
                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
                        margin:0 10px 0 0;
                    }
                }       
            }
            .lf-container{
                .card-container{
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    padding-left: 50px;
                    .card{
                        width: 22%;
                        height: 25vh;
                        background: rgba(35, 229, 254, 0.06);
                        border: 1px solid #115C7C;
                        margin:0 4% 10px 0;
                        box-sizing: border-box;
                        overflow: hidden;
                        padding: 14px;
                        color: #fff;
                        position: relative;
                        &:nth-child(4n){
                            margin-right: 0;
                        }
                        .title{
                            font-size: 18px;
                            font-weight: bold;
                            padding-bottom: 12px;
                            text-align: center;
                        }
                        .info{
                            font-size: 14px;
                            p{
                                line-height: 22px;
                                word-break: break-all;
                            }
                        }
                        footer{
                            width: 100%;
                            height: 36px;
                            line-height: 36px;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            text-align: center;
                            background: #0C6ECF;
                            &.status-1{
                                background: #DCBA3D;
                            }
                            &.status-2{
                                background: #EC6B1D;
                            }
                            &.status-3{
                                background: #F33737;
                            }
                        }
                    }
                } 
                .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>