tj

src/layout/components/SideLeft.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-side-left">
+    <div class="layout-side-left" v-if="showSide">
         <div :class="activeId===item.id?'active item':'item'" v-for="item in items" :key="item.id" @click="linkTo(item)">{{ item.name }}</div>
     </div>
 </template>
@@ -9,17 +9,37 @@
         data(){
             return{
                 activeId:"1",
+                showSide:true,
                 items:[
                     {name:"传感器",id:"1",path:"/particulars/sensor"},
                     {name:"人员巡检",id:"2",path:"/particulars/check"},
                     {name:"采空区信息",id:"3",path:"/particulars/goaf-info"},
                 ]
             }
-        },
+        },  
+        watch:{
+            $route(route){
+                let path=route.path
+                // this.showSide=!path.includes('/particulars/particulars-video')
+                if(path.includes('/particulars/check')){
+                    this.activeId='2'
+                }else if(path.includes('/particulars/goaf-info')){
+                    this.activeId='3'
+                }else{
+                    this.activeId='1'
+                }
+            }
+        },     
         created(){
-            if(this.$route.query.id){
-                this.activeId=this.$route.query.id
+            let path=this.$route.path
+            if(path.includes('/particulars/check')){
+                this.activeId='2'
+            }else if(path.includes('/particulars/goaf-info')){
+                this.activeId='3'
+            }else{
+                this.activeId='1'
             }
+            // this.showSide=!path.includes('/particulars/particulars-video')
         },
         methods: {
             linkTo(item){

src/layout/index.vue

@@ -8,7 +8,8 @@ export default {
     },
     methods:{
         back(){
-            this.$router.push('/')
+            // this.$router.push('/')
+            this.$router.go(-1)
         }
     }
 }

src/router/index.js

@@ -42,7 +42,19 @@ const routes = [
           component: () => import('@/views/particulars/goaf_info.vue')
         }
     ]   
-  }  
+  }, 
+  {
+    path: '/particulars',
+    name: 'video',    
+    component:Main,
+    children:[
+        {
+          path: 'particulars-video',
+          name: 'particulars-video',
+          component: () => import('@/views/particulars/video.vue')
+        }
+    ]   
+  } 
 ]
 
 const router = createRouter({

src/views/particulars/check.vue

@@ -1,56 +1,61 @@
 <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>
+        <header></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 class="top">
+                        <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"
+                            placeholder="是否异常"
+                            />
+                        </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"
+                            placeholder="状态"
+                            />
+                        </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)"
+                        />                
+                    </div>
+                    <div class="bt-group">
+                        <div class="bt search" @click="searchSubmit">查询</div>
+                        <div class="bt" @click="resetSubmit">重置</div>                    
+                    </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="lf-container"> 
+                    <table>
+                        <tr>
+                            <td>任务名称</td>
+                            <td>状态</td>
+                            <td>等级</td>
+                            <td>时间</td>
+                        </tr>
+                        <tr v-for="(item,index) in 13" :key="index">
+                            <td>{Ⅲ号-770-32008}:存在塌石</td>
+                            <td>待整改</td>
+                            <td>较大</td>
+                            <td>22-05-04</td>
+                        </tr>
+                    </table>
                     <div class="el-pagination-wrap">
                         <el-pagination small layout="prev, pager, next" :total="50" />
                      </div>                                   
@@ -58,7 +63,7 @@
             </div>
             <div class="rt">
                 <div class="head">
-                    <div class="name">传感器数据统计</div>
+                    <div class="name">巡检数据统计</div>
                     <div class="number">123</div>
                 </div>
                 <div class="head-info">
@@ -76,11 +81,11 @@
                     </div>
                 </div>
                 <div class="chart-wrap">
-                    <div class="title">报警统计</div>
+                    <div class="title">异常分析</div>
                     <alert-chart ref="alert-chart" />
                 </div>
                 <div class="chart-wrap">
-                    <div class="title">预警处理情况</div>
+                    <div class="title">异常处理情况</div>
                     <warn-chart ref="warn-chart" />
                 </div>                
             </div>
@@ -91,7 +96,7 @@
 import AlertChart from './components/AlertChart.vue'
 import WarnChart from './components/WarnChart.vue'
  export default {
-    name:"sensor",
+    name:"check",
     components:{
         AlertChart,
         WarnChart
@@ -165,27 +170,8 @@ import WarnChart from './components/WarnChart.vue'
 <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;
-            }
-        }
+        padding-bottom: 36px;
     }
     .tab{
         padding-top: 1.5vh;
@@ -214,8 +200,6 @@ import WarnChart from './components/WarnChart.vue'
             .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;
@@ -241,7 +225,8 @@ import WarnChart from './components/WarnChart.vue'
                     background: rgba(8, 128, 255, 0.2);
                     border-radius: 4px;  
                     margin-top: 14px;    
-                    cursor: pointer;              
+                    cursor: pointer;    
+                    display: inline-block;          
                     &.search{
                         background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
                         margin:14px 10px 0 0;
@@ -249,58 +234,25 @@ import WarnChart from './components/WarnChart.vue'
                 }       
             }
             .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;
-                            }
+                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;

src/views/particulars/goaf_info.vue

@@ -1,3 +1,216 @@
 <template>
-    <h1>采空区信息</h1>
-</template>
+    <div class="check-page">
+        <header></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.code"  class="input" placeholder="请输入采空区编号" />
+                    <div class="bt search" @click="searchSubmit">查询</div>
+                    <div class="bt" @click="resetSubmit">重置</div>
+                </div>
+                <div class="lf-container"> 
+                    <table>
+                        <tr>
+                            <td>矿带</td>
+                            <td>中段</td>
+                            <td>采空编号</td>
+                            <td>水平断面均暴露面积(㎡)</td>
+                            <td>平均倾向宽度(m)</td>
+                            <td>平均暴露高度(m)</td>
+                            <td>体积(m³)</td>
+                            <td>倾向°</td>
+                            <td>倾角°</td>
+                            <td>顶板矿柱厚度(m)</td>
+                            <td>保安间柱平均厚度(m)</td>
+                            <td>勘探位置</td>
+                            <td>位于矿体编号</td>
+                            <td>围岩岩性</td>
+                            <td>围岩稳定性</td>
+                            <td>形成时间</td>
+                        </tr>
+                        <tr v-for="(item,index) in 11" :key="index">
+                            <td>Ⅲ</td>
+                            <td>770</td>
+                            <td>32003</td>
+                            <td>444</td>
+                            <td>5.1</td>
+                            <td>5.1</td>
+                            <td>245</td>
+                            <td>45</td>
+                            <td>36</td>
+                            <td>82.1</td>
+                            <td>8.3</td>
+                            <td>0-1</td>
+                            <td>Ⅲ3</td>
+                            <td>岩屑晶屑凝灰岩</td>
+                            <td>稳定</td>
+                            <td>2023-04-12</td>
+                        </tr>
+                    </table>
+                    <div class="el-pagination-wrap">
+                        <el-pagination small layout="prev, pager, next" :total="50" />
+                     </div>                                   
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import AlertChart from './components/AlertChart.vue'
+import WarnChart from './components/WarnChart.vue'
+ export default {
+    name:"goaf_info",
+    components:{
+        AlertChart,
+        WarnChart
+    },
+    data(){
+        return{
+            activeId:'1',
+            activetab:'1',
+            tabs:[
+                {name:"Ⅲ号",id:"1"},
+                {name:"770",id:"2"},
+                {name:"32001",id:"3"},
+            ],
+            search:{
+                code:""
+            }                     
+        }
+    },
+    created(){
+        this.init()
+    },
+    methods:{
+        init(){
+
+        },
+        changeHead(item){
+            this.activeId=item.id
+        },
+        changeTab(item){
+            this.activetab=item.id
+        },
+        searchSubmit(){
+
+        },
+        resetSubmit(){
+            this.search={
+                code:""           
+            }
+        },
+    }
+ }
+</script>
+<style lang="scss" scoped>
+.check-page{
+    header{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 0.5vh;
+        padding-top: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: 100%;
+            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;
+                    height: 36px;
+                    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;   
+                    cursor: pointer;              
+                    &.search{
+                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
+                        margin-right:14px;
+                    }
+                }       
+            }
+            .lf-container{
+                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);
+                            }
+                        }
+                    }
+                }
+            }         
+        }
+    }
+}
+
+</style>

src/views/particulars/index.vue

@@ -1,20 +0,0 @@
-<template>
-    <app-header/>
-    <div id="particulars-main">
-      <router-view />  
-    </div>
-  </template>
-  
-  <script>
-  import appHeader from '@/components/Header.vue'
-  export default {
-    components:{
-      appHeader
-    }
-  }
-  </script>
-  <style lang="scss" scoped>
-    #particulars-main{
-        background-color: unset;
-    }
-  </style>

src/views/particulars/sensor.vue

@@ -143,6 +143,9 @@ import WarnChart from './components/WarnChart.vue'
         },
         changeHead(item){
             this.activeId=item.id
+            if(item.id==='5'){
+                this.$router.push('/particulars/particulars-video')
+            }
         },
         changeTab(item){
             this.activetab=item.id

src/views/particulars/video.vue

@@ -0,0 +1,249 @@
+<template>
+    <div class="video-page">
+        <header></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.code"  class="input" placeholder="请输入采空区编号" />
+                    <div class="bt search" @click="searchSubmit">查询</div>
+                    <div class="bt" @click="resetSubmit">重置</div>
+                </div> -->
+                <div class="lf-container"> 
+                    <div class="video-container">
+                        <div class="item" v-for="(item,index) in 10" :key="index" @click="showVideo(item)">
+                            <video src="https://www.runoob.com/try/demo_source/movie.mp4" poster="./images/video.png">
+                                <source src="movie.mp4"  type="video/mp4">
+                            </video>
+                            <p>{Ⅲ号-770-32008}：封堵口</p>
+                        </div>
+                    </div>
+                    <div class="el-pagination-wrap">
+                        <el-pagination small layout="prev, pager, next" :total="50" />
+                     </div>                                   
+                </div>
+            </div>
+        </div>
+        <div class="video-dialog" v-if="videoDialogVisible">
+             <div class="header">
+                <div class="name">{{ video.name }}</div>
+                <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
+             </div>
+            <video :src="video.src" id="video" controls></video>
+        </div>    
+    </div>
+</template>
+<script>
+import AlertChart from './components/AlertChart.vue'
+import WarnChart from './components/WarnChart.vue'
+ export default {
+    name:"particulars_video",
+    components:{
+        AlertChart,
+        WarnChart
+    },
+    data(){
+        return{
+            activeId:'1',
+            activetab:'1',
+            video:{
+                src:"",
+                name:""
+            },
+            videoDialogVisible:false,
+            tabs:[
+                {name:"Ⅲ号",id:"1"},
+                {name:"770",id:"2"},
+                {name:"32001",id:"3"},
+            ],
+            search:{
+                code:""
+            }                     
+        }
+    },
+    created(){
+        this.init()
+    },
+    methods:{
+        init(){
+
+        },
+        changeHead(item){
+            this.activeId=item.id
+        },
+        changeTab(item){
+            this.activetab=item.id
+        },
+        searchSubmit(){
+
+        },
+        resetSubmit(){
+            this.search={
+                code:""           
+            }
+        },
+        showVideo(item){
+            this.video={
+                src:'https://www.runoob.com/try/demo_source/movie.mp4',
+                name:"{Ⅲ号-770-32008}：封堵口"
+            }
+            this.videoDialogVisible=true;
+        }
+    }
+ }
+</script>
+<style lang="scss" scoped>
+.video-page{
+    .video-dialog{
+        position: fixed;
+        z-index: 999;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(5, 25, 51, 0.98);
+        .name{
+            color: #fff;
+            font-size: 20px;
+            line-height:1 ;  
+            text-indent: 20px;        
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .close{
+                height: 50px;
+                line-height: 50px;
+                display: inline-block;
+                padding: 10px 20px;
+                cursor: pointer;
+                color: #fff;
+                font-size: 36px;
+            }
+        }
+        #video{
+            display: block;
+            width: 80%;
+            max-height: 80vh;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
+            margin: 10px auto;
+        }        
+    }
+    header{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 0.5vh;
+        padding-top: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: 100%;
+            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;
+                    height: 36px;
+                    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;   
+                    cursor: pointer;              
+                    &.search{
+                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
+                        margin-right:14px;
+                    }
+                }       
+            }
+            .lf-container{
+                .video-container{
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    margin-top: 5vh;
+                    .item{
+                        width: 20%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center; 
+                        flex-direction: column;    
+                        padding: 20px;     
+                        box-sizing: border-box;   
+                        color: #fff;       
+                        font-size: 14px;
+                        video{
+                            display: block;
+                            width: 100%;
+                            cursor: pointer;
+                        }
+                        p{
+                            padding-top: 10px;
+                        }
+                    }
+                }
+                .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);
+                            }
+                        }
+                    }
+                }
+            }         
+        }
+    }
+}
+
+</style>