CKQ/src/views/particulars/check.vue

<template>
    <div class="check-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">
            <div :class="activetab===item.id?'active item':'item'" v-for="item in tabs" :key="item.id" @click="changeTab(item)">{{ item.name }}</div>  
        </div>
        <div class="container">
            <div class="lf">
                <div class="search-container">
                    <el-input v-model="search.name"  class="input" placeholder="请输入传感器名称" />
                    <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"
                        />
                    </el-select>
                    <el-select v-model="search.value" class="select" placeholder="全部">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                    <el-date-picker
                        v-model="search.time"
                        type="date"
                        class="date11"
                        placeholder="请选择预警时间"
                        style="width:200px;margin-right: 14px;"
                        :default-value="new Date(2010, 9, 1)"
                    />
                    <el-input-number v-model="search.range" class="input" placeholder="Please input" :controls="false" style="margin-top: 14px;"/>
                    <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 8" :key="index">
                            <div class="title">压力传感器</div>
                            <div class="info">
                                <p>设备编号：A02166644624</p>
                                <p>安装位置：Ⅲ号-770-32008</p>
                                <p>压力值：12Pa</p>
                                <p>是否在线：在线</p>
                            </div>
                            <footer :class="'status-'+(index+1)">威胁</footer>
                        </div>
                    </div> 
                    <div class="el-pagination-wrap">
                        <el-pagination small layout="prev, pager, next" :total="50" />
                     </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'
 export default {
    name:"sensor",
    components:{
        AlertChart,
        WarnChart
    },
    data(){
        return{
            activeId:'1',
            activetab:'1',
            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"},
            ],
            search:{
                name:"",
                level:"",
                time:"",
                status:"",
                range:0
            } ,
            options:[
                {label:1,value:2},
                {label:2,value:3},
                {label:3,value:4}
            ] ,
            options1:[
                {label:1,value:2},
                {label:2,value:3},
                {label:3,value:4}
            ]                      
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            this.$nextTick(()=>{
                this.$refs['alert-chart'].init();
                this.$refs['warn-chart'].init();
            })
        },
        changeHead(item){
            this.activeId=item.id
        },
        changeTab(item){
            this.activetab=item.id
        },
        searchSubmit(){

        },
        resetSubmit(){
            this.search={
                name:"",
                level:"",
                time:"",
                status:"",
                range:0               
            }
        },
    }
 }
</script>
<style lang="scss" scoped>
.check-page{
    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;
                .input,.select,.el-date-editor{
                    width: 220px;
                    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;              
                    &.search{
                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
                        margin:14px 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;
                            }
                        }
                        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>