tj

README.md

@@ -7,7 +7,7 @@ yarn install
 
 ### Compiles and hot-reloads for development
 ```
-yarn serve
+yarn dev
 ```
 
 ### Compiles and minifies for production

src/views/home/components/SensorInfoStatistics.vue

@@ -5,7 +5,7 @@
             <span class="number">24</span>
         </div>
         <div class="container">
-            <div id="sensor-info-chart"></div>   
+            <div id="sensor-info-chart" v-if="status"></div>   
         </div>
     </div>
 </template>
@@ -15,6 +15,7 @@
         name:"SensorInfoStatistics",
         data(){
             return{
+                status:true,
                 option :{
                     title:[
                         {
@@ -153,11 +154,6 @@
                 }
             }
         },
-        created(){
-            this.$nextTick(()=>{
-                this.init()
-            })
-        },
         methods:{
             init(){
                 var chartDom = document.getElementById('sensor-info-chart');
@@ -173,7 +169,10 @@
                     })
                 });                   
             }
-        }
+        },
+        destroyed() {
+            this.status=false
+        },        
       }
     </script>
     <style lang="scss" scoped>

src/views/home/components/SensorStatus.vue

@@ -5,7 +5,7 @@
         <span class="number">24</span>
     </div>
     <div class="container">
-        <div id="sensor-status-chart"></div>   
+        <div id="sensor-status-chart" v-if="status"></div>   
     </div>
 </div>
 </template>
@@ -15,6 +15,8 @@
     name:"SensorStatus",
     data(){
         return{
+            myChart:null,
+            status:true,
             option :{
                 tooltip: {
                     trigger: 'axis',
@@ -38,9 +40,7 @@
                     type: 'value',
                     boundaryGap: [0, 0.01],
                     axisLabel:{
-                        textStyle:{
-                                color:'#fff'
-                        }                        
+                        color:'#fff'                      
                     },
                     axisLine:{
                         show:false
@@ -53,9 +53,7 @@
                     type: 'category',
                     data: ['在线', '离线'],
                     axisLabel:{
-                        textStyle:{
-                            color:'#fff'
-                        }                        
+                        color:'#fff'                      
                     },
                     splitLine: {
                         show: false,
@@ -82,20 +80,26 @@
         }
     },
     created(){
-        this.$nextTick(()=>{
-            this.init()
-        })
+        // this.$nextTick(()=>{
+        //     this.init()
+        // })
+        console.log('sensor-status-chart',this.myChart)
     },
     methods:{
         init(){
             var chartDom = document.getElementById('sensor-status-chart');
             var myChart = echarts.init(chartDom);
+            
             this.option && myChart.setOption(this.option);  
             myChart.on('click', function(params) {
                 console.log("SensorStatus",params)
-            });                      
+            }); 
+            this.myChart=myChart                     
         }
-    }
+    },
+    destroyed() {
+        this.status=false
+    },
   }
 </script>
 <style lang="scss" scoped>

src/views/home/index.vue

@@ -9,10 +9,10 @@
         <div id="map"></div>
     </div>
     <div class="side-right">
-        <sensor-status />
-        <sensor-warning-statistics />
+        <sensor-status ref="sensor-status" />
+        <sensor-warning-statistics  />
         <sensor-warning-info :data="reportData" /> 
-        <sensor-info-statistics :data="reportData" />         
+        <sensor-info-statistics :data="reportData" ref="sensor-info-statistics" />         
     </div>
 </div>
 </template>
@@ -71,6 +71,11 @@ import {
                 })
             }
             this.reportData=reportData
+            /**更新chart */
+            this.$nextTick(()=>{
+                this.$refs['sensor-status'].init();
+                this.$refs['sensor-info-statistics'].init();
+            })
         }
     }
  }
@@ -98,6 +103,7 @@ import {
             .title{
                 height: 32px;
                 background-image: url(./images/home/title.png);
+                font-family: "YouSheBiaoTiHei";
                 background-size: 100% 100%;
                 background-repeat: no-repeat;   
                 color: #2affff;

src/views/particulars/check.vue

@@ -1,3 +1,419 @@
 <template>
-    <h1>人员检查</h1>
-</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>

src/views/particulars/components/AlertChart.vue

@@ -0,0 +1,108 @@
+<template>
+    <div id="alert-chart" v-if="status"></div> 
+</template>
+    <script>
+     import * as echarts from 'echarts';
+      export default {
+        name:"AlertChart",
+        data(){
+            return{
+                myChart:null,
+                status:true,
+                option :{
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    },
+                    legend: {
+                        textStyle:{
+                            color:'#fff'
+                        }
+                    },
+                    grid: {
+                        top:'20%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: [0, 0.01],
+                        axisLabel:{
+                            color:'#fff',                        
+                        },
+                        axisLine:{
+                            show:true
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel:{
+                            color:'#fff',                       
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    },
+                    series: [
+                        {
+                            name: '压力',
+                            type: 'line',
+                            lineStyle:{
+                                color:"rgba(24, 144, 255, 1)",
+                                width:2
+                            },
+                            data: [10,20, 30, 40, 50, 80,20, 30, 40, 50, 80,20]
+                        },
+                        {
+                            name: '位移',
+                            type: 'line',
+                            lineStyle:{
+                                color:"#41E4BB",
+                                width:2
+                            } ,                         
+                            data: [20,30, 40, 50, 60, 70, 40, 50, 60, 70, 40, 50]
+                        },
+                        {
+                            name: '有害气体',
+                            type: 'line',
+                            lineStyle:{
+                                color:"#D7C254",
+                                width:2
+                            },
+                            data: [30,40, 60, 40, 80, 10, 40, 50, 60, 70,10,20]
+                        }
+                    ]
+                }
+            }
+        },
+        methods:{
+            init(){
+                var chartDom = document.getElementById('alert-chart');
+                var myChart = echarts.init(chartDom);
+                
+                this.option && myChart.setOption(this.option);  
+                myChart.on('click', function(params) {
+                    console.log("SensorStatus",params)
+                }); 
+                this.myChart=myChart                     
+            }
+        },
+        destroyed() {
+            this.status=false
+        },
+      }
+    </script>
+    <style lang="scss" scoped>
+    #alert-chart{
+        width: 95%;
+        height: 20vh;
+    }  
+    </style>

src/views/particulars/components/WarnChart.vue

@@ -0,0 +1,129 @@
+<template>
+    <div id="warn-chart" v-if="status"></div>   
+</template>
+    <script>
+     import * as echarts from 'echarts';
+      export default {
+        name:"WarnChart",
+        data(){
+            return{
+                myChart:null,
+                status:true,
+                option :{
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    },
+                    legend: {
+                        textStyle:{
+                            color:'#fff'
+                        }
+                    },
+                    grid: {
+                        top:'20%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: [0, 0.01],
+                        axisLabel:{
+                            color:'#fff',                        
+                        },
+                        axisLine:{
+                            show:true
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel:{
+                            color:'#fff',                       
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    },
+                    series: [
+                        {
+                            name: '处理',
+                            type: 'line',
+                            showSymbol: false, 
+                            lineStyle:{
+                                color:"#0075ff",
+                                width:2
+                            },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(44, 217, 255, 0.36)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(44, 217, 255, 0)'
+                                    }
+                                ]),
+                                opacity: 0.5
+                            },                            
+                            smooth: true,                            
+                            data: [10,20, 30, 40, 50, 80,20, 30, 40, 50, 80,20]
+                        },
+                        {
+                            name: '未处理',
+                            type: 'line',
+                            showSymbol: false, 
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: '#0075FF'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0, 117, 255, 0)'
+                                    }
+                                ]),
+                                opacity: 0.5
+                            },                            
+                            lineStyle:{
+                                color:"rgba(253, 175, 25, 1)",
+                                width:2
+                            },
+                            smooth: true,
+                            data: [20,30, 40, 50, 60, 70, 40, 50, 60, 70, 40, 50]
+                        },
+                    ]
+                }
+            }
+        },
+        methods:{
+            init(){
+                var chartDom = document.getElementById('warn-chart');
+                var myChart = echarts.init(chartDom);
+                
+                this.option && myChart.setOption(this.option);  
+                myChart.on('click', function(params) {
+                    console.log("SensorStatus",params)
+                }); 
+                this.myChart=myChart                     
+            }
+        },
+        destroyed() {
+            this.status=false
+        },
+      }
+    </script>
+    <style lang="scss" scoped>
+        #warn-chart{
+            width: 95%;
+            height:20vh;
+        }  
+    </style>

src/views/particulars/sensor.vue

@@ -35,10 +35,12 @@
                         :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 in 8" :key="item">
+                        <div class="card" v-for="(item,index) in 8" :key="index">
                             <div class="title">压力传感器</div>
                             <div class="info">
                                 <p>设备编号：A02166644624</p>
@@ -46,7 +48,7 @@
                                 <p>压力值：12Pa</p>
                                 <p>是否在线：在线</p>
                             </div>
-                            <footer>威胁</footer>
+                            <footer :class="'status-'+(index+1)">威胁</footer>
                         </div>
                     </div> 
                     <div class="el-pagination-wrap">
@@ -55,14 +57,45 @@
                 </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',
@@ -84,7 +117,7 @@
                 level:"",
                 time:"",
                 status:"",
-                range:''
+                range:0
             } ,
             options:[
                 {label:1,value:2},
@@ -98,13 +131,34 @@
             ]                      
         }
     },
+    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>
@@ -153,12 +207,15 @@
         }
     }
     .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;
@@ -173,7 +230,23 @@
                     .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{
@@ -184,14 +257,48 @@
                     .card{
                         width: 22%;
                         height: 25vh;
-                        border: 1px solid red;
+                        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){
-                            border-color: yellow;
                             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{
@@ -210,6 +317,102 @@
                 }
             }         
         }
+        .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%;
+                    }
+                }
+            }
+        }
     }
 }