提交

src/api/goaf/sensor.js

@@ -10,7 +10,7 @@ export function getSensor(params) {
 // 分页获取传感器
 export function getSensorByPage(params) {
   return request({
-    url: '/goaf/goafdevinfo/page',
+    url: '/goaf/goafdevinfo/devreportdatapage',
     params
   })
 }

src/api/goaf/sensordata.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+// 获取所有传感器
+export function getSensorData(params) {
+  return request({
+    url: '/goaf/sensordata/list',
+    params
+  })
+}
+// 分页获取传感器
+export function getSensorDataByPage(params) {
+  return request({
+    url: '/goaf/goafhdanger/page',
+    params
+  })
+}

src/main.js

@@ -9,10 +9,11 @@ import 'element-plus/dist/index.css'
 import 'leaflet/dist/leaflet.css'
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
 import './style.css'
-
-
+import locale from 'element-plus/lib/locale/lang/zh-cn'
 const app = createApp(App).use(router)
-    app.use(ElementPlus)
+    app.use(ElementPlus,{
+        locale
+    })
     app.use(pinia)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)

src/views/home/components/ReportTask.vue

@@ -14,7 +14,7 @@
                         <td>时间</td>
                     </tr>                                    
                     <tr class="report-item" v-for="(item,index) in items" :key="index">
-                        <td :title="item.hdangerTitle">{{ item.hdangerTitle }}</td>
+                        <td :title="item.hdangerTitle" style="max-width:200px;">{{ item.hdangerTitle }}</td>
                         <td :title="item.status">完成</td>
                         <td :title="item.level">{{ hdangerLevel(item.hdangerLevel) }}</td>
                         <td :title="item.time">{{ item.dangerDeadline }}</td>
@@ -52,12 +52,11 @@ export default {
         },
         load(){
             getDangerByList({
-                // page: 1,
-                // limit: 10,
                 status: 4
             }).then((res)=>{
-                this.total=res.data.length
-                this.items=res.data
+                let items=res.data.filter(item=>item.hdangerType===0)
+                this.total=items.length
+                this.items=items
             })
         }
     }

src/views/home/components/SensorWarningInfo.vue

@@ -2,22 +2,22 @@
     <div class="item report">
         <div class="title">
             <span class="name">传感器预警信息</span>
-            <span class="number">24</span>
+            <span class="number">{{total}}</span>
         </div>
         <div class="container">          
-            <Vue3SeamlessScroll :list="data" class="scroll" hover>    
-                <table> 
+            <Vue3SeamlessScroll :list="items" class="scroll" hover>    
+                <table>
                     <tr class="report-title">
                         <td>预警名称</td>
                         <td>状态</td>
                         <td>等级</td>
                         <td>时间</td>
                     </tr>                                    
-                    <tr class="report-item" v-for="(item,index) in data">
-                        <td :title="item.name">{{ item.name }}</td>
-                        <td :title="item.level">{{ item.level }}</td>
-                        <td :title="item.level">{{ item.level }}</td>
-                        <td :title="item.time">{{ item.time }}</td>
+                    <tr class="report-item" v-for="(item,index) in items" :key="index">
+                        <td :title="item.hdangerTitle" style="max-width:200px;">{{ item.hdangerTitle }}</td>
+                        <td :title="item.status">完成</td>
+                        <td :title="item.level">{{ hdangerLevel(item.hdangerLevel) }}</td>
+                        <td :title="item.time">{{ item.dangerDeadline }}</td>
                     </tr> 
                 </table> 
             </Vue3SeamlessScroll>              
@@ -25,18 +25,39 @@
     </div> 
 </template>
 <script>
+import { getDangerByList } from '@/api/goaf/dangerApi'
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 export default {
     name:"SensorWarningInfo",
     components:{
         Vue3SeamlessScroll,
     },
-    props:{
-        data:{
-            type:Object,
-            default:{
-
-            }
+    data(){
+        return{
+            items:[],
+            total:0
+        }
+    },
+    created(){
+        this.load()
+    },
+    methods:{
+        formateStatus(val){
+            let status=['待处理','处理完成','已逾期']
+            return status[val]
+        },
+        hdangerLevel(val){
+            let status=["异常","威胁","危险","危急"]
+            return status[val]||'正常'
+        },
+        load(){
+            getDangerByList({
+                status: 4
+            }).then((res)=>{
+                let items=res.data.filter(item=>item.hdangerType===1)
+                this.total=items.length
+                this.items=items
+            })
         }
     }
 }

src/views/home/components/SensorWarningStatistics.vue

@@ -9,7 +9,7 @@
                 <div class="head">
                     <div class="head-item">
                         <div class="number">0</div>
-                        <div class="name">危及</div>
+                        <div class="name">危急</div>
                     </div>
                     <div class="head-item">
                         <div class="number">0</div>

src/views/home/components/WarnReport.vue

@@ -23,6 +23,7 @@
 <script>
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 import { goaftaskList } from '@/api/goaf/task'
+import {parseTime} from '@/utils'
 export default {
     name:"WarnReport",
     components:{
@@ -44,8 +45,17 @@ export default {
             return status[val]
         },
         load(){
-            goaftaskList().then((res)=>{
-                let complete=res.data.filter(item=>item.status===1)
+            let date=new Date()
+            let y= date.getFullYear()
+            let m=date.getMonth()+1
+            let d=date.getDate()
+            let expectedStartDate=parseTime(new Date(`${y}-${m}-${d}-`))
+            let expectedEndDate=parseTime(new Date(`${y}-${m}-${d+1}-`))
+            goaftaskList({
+                expectedStartDate,
+                expectedEndDate,                
+            }).then((res)=>{
+                let complete=res.data.filter(item=>item.status===1).length
                 let unfinished=res.data.length-complete
                 this.complete=complete
                 this.unfinished=unfinished

src/views/particulars/check.vue

@@ -2,7 +2,18 @@
     <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>  
+            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px">
+                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
+            </el-select>
+            <el-select v-model="conditions.goafOrebody" placeholder="矿体"  @change="changeArea(2)" style="width:120px;margin:0 12px;">
+                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
+            </el-select>
+            <el-select v-model="conditions.goafOreheight" placeholder="中段"  @change="changeArea(3)" style="width:120px">
+                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
+            </el-select>
+            <el-select v-model="conditions.goafId" placeholder="采空区编号"  @change="changeArea(4)" style="width:210px;margin:0 12px;">
+                <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafId" :label="item.goafName" />
+            </el-select>  
         </div>
         <div class="container">
             <div class="lf">
@@ -25,7 +36,7 @@
                         </div> -->
                         <div class="search-item">
                             <span>状态：</span>
-                            <el-select v-model="conditions.status" class="select" placeholder="全部">
+                            <el-select v-model="conditions.status" class="select" placeholder="全部" clearable>
                                 <el-option
                                 v-for="item in status_options"
                                 :key="item.value"
@@ -36,16 +47,27 @@
                             </el-select>                            
                         </div>
                         <div class="search-item">
-                            <span>巡检时间：</span>
+                            <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="date"
-                                class="date11"
+                                type="datetime"
                                 placeholder="请选择巡检时间"
                                 style="width:200px;margin-right: 14px;"
-                                :default-value="new Date(2010, 9, 1)"
+                                format="YYYY-MM-DD HH:mm:ss"
+                                value-format="YYYY-MM-DD HH:mm:ss"
                             />  
-                        </div>              
+                        </div>          
                     </div>
                     <div class="bt-group">
                         <div class="bt search" @click="searchSubmit">查询</div>
@@ -110,6 +132,7 @@
 import Abnormal  from './components/Abnormal.vue'
 import WarnChart from './components/WarnChart.vue'
 import { getCheckTaskByPage } from '@/api/goaf/task'
+import {  getGoafBaseInfo } from '@/api/goaf/info'
  export default {
     name:"check",
     components:{
@@ -120,13 +143,24 @@ import { getCheckTaskByPage } from '@/api/goaf/task'
         return{
             activeId:'1',
             activetab:'1',
+            goafList: [],
+            goafOrebelts: [],
+            goafOrebodys: [],
+            goafOreheights: [],
+            goafNames: [],
             conditions: {
                 page: 1,
                 limit: 10,
                 status:0,
                 taskTitle:"",
+                expectedStartDate:new Date(),
                 expectedEndDate:"",
-                goafName:""
+                goafId: '',
+                goafOrebelt: '',
+                goafOrebody: '',
+                goafOreheight: '',
+                goafName:"",
+                goafDevName:""
             },   
             items:[
                 {name:"首页",id:"1",path:"/particulars/sensor"},
@@ -135,11 +169,6 @@ import { getCheckTaskByPage } from '@/api/goaf/task'
                 {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"},
-            ],
             status_options:[
                 {label:"待处理",value:0},
                 {label:"处理完成",value:1},
@@ -167,6 +196,11 @@ import { getCheckTaskByPage } from '@/api/goaf/task'
                 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
+            })  
         },
         changeHead(item){
             this.activeId=item.id
@@ -191,13 +225,16 @@ import { getCheckTaskByPage } from '@/api/goaf/task'
             })
         },
         resetSubmit(){
-            this.search={
-                name:"",
-                level:"",
-                time:"",
-                status:"",
-                range:0               
+            this.conditions={
+                page: 1,
+                limit: 10,
+                status:0,
+                taskTitle:"",
+                expectedStartDate:new Date(),
+                expectedEndDate:"",
+                goafName:""         
             }
+            this.getData()
         },
         handleSizeChange(limit){
             this.conditions.limit=limit
@@ -206,12 +243,77 @@ import { getCheckTaskByPage } from '@/api/goaf/task'
         handleCurrentChange(pageNumber){
             this.conditions.page=pageNumber
             this.getData()
-        }
+        },
+        changeArea(type) {
+            const goafs = this.deeepClone(this.goafList)
+            let goafOrebodys = this.deeepClone(this.goafOrebodys)
+            let goafOreheights = this.deeepClone(this.goafOreheights)
+            let goafNames = this.deeepClone(this.goafNames)
+            if (type === 1) {
+                goafOrebodys = goafs.filter(item => item.goafOrebelt === this.conditions.goafOrebelt)
+                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>
 .check-page{
+    .search-item{
+        display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 14px;
+            span{
+                font-family: 'Ping Hei';
+                font-size: 14px;
+                line-height: 1;
+                color: rgba(255, 255, 255, 0.7);
+            }
+        }
+        .input,.select,.el-date-editor{
+            width: 180px;
+            margin-right:16px;
+            color: #fff;
+        }
+        ::v-deep{
+            .el-input__wrapper{
+                background-color:  rgba(8, 128, 255, 0.2);
+                border: 0;
+                box-shadow: none;               
+            }
+            .el-input__inner{
+                color: #fff;
+            }
+    }  
     header{
         padding-top: 0.5vh;
         padding-bottom: 36px;

src/views/particulars/goaf_info.vue

@@ -2,12 +2,22 @@
     <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>  
+            <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> 
         </div>
         <div class="container">
             <div class="lf">
                 <div class="search-container">
-                    <el-input v-model="conditions.goafName"  class="input" placeholder="请输入采空区编号" />
+                    <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 class="bt search" @click="getData">查询</div>
                     <div class="bt" @click="resetSubmit">重置</div>
                 </div>
@@ -58,7 +68,7 @@
 <script>
 import AlertChart from './components/AlertChart.vue'
 import WarnChart from './components/WarnChart.vue'
-import { getGoafBaseInfoByPage } from '@/api/goaf/info'
+import { getGoafBaseInfoByPage,getGoafBaseInfo } from '@/api/goaf/info'
 import { NumConvertLM ,parseTime} from '@/utils'
  export default {
     name:"goaf_info",
@@ -70,16 +80,21 @@ import { NumConvertLM ,parseTime} from '@/utils'
         return{
             activeId:'1',
             activetab:'1',
+            goafList: [],
+            goafOrebelts: [],
+            goafOrebodys: [],
+            goafOreheights: [],
+            goafNames: [],
             conditions: {
                 page: 1,
                 limit: 10,
-                goafName:""
+                goafId: '',
+                goafOrebelt: '',
+                goafOrebody: '',
+                goafOreheight: '',
+                goafName:"",
+                goafDevName:""
             },           
-            tabs:[
-                {name:"Ⅲ号",id:"1"},
-                {name:"770",id:"2"},
-                {name:"32001",id:"3"},
-            ],
             dataList:[],
             total:0                 
         }
@@ -92,8 +107,18 @@ import { NumConvertLM ,parseTime} from '@/utils'
         parseTime,
         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]
+                }
+            }
             getGoafBaseInfoByPage(this.conditions).then((resp) => {
                 this.listLoading = false
                 const {data, total } = resp
@@ -111,7 +136,12 @@ import { NumConvertLM ,parseTime} from '@/utils'
             this.conditions={
                 page: 1,
                 limit: 10,
-                goafName:""      
+                goafId: '',
+                goafOrebelt: '',
+                goafOrebody: '',
+                goafOreheight: '',
+                goafName:"",
+                goafDevName:""   
             }
             this.getData()
         },
@@ -122,12 +152,77 @@ import { NumConvertLM ,parseTime} from '@/utils'
         handleCurrentChange(pageNumber){
             this.conditions.page=pageNumber
             this.getData()
-        }
+        },
+        changeArea(type) {
+            const goafs = this.deeepClone(this.goafList)
+            let goafOrebodys = this.deeepClone(this.goafOrebodys)
+            let goafOreheights = this.deeepClone(this.goafOreheights)
+            let goafNames = this.deeepClone(this.goafNames)
+            if (type === 1) {
+                goafOrebodys = goafs.filter(item => item.goafOrebelt === this.conditions.goafOrebelt)
+                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>
 .check-page{
+    .search-item{
+        display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 14px;
+            span{
+                font-family: 'Ping Hei';
+                font-size: 14px;
+                line-height: 1;
+                color: rgba(255, 255, 255, 0.7);
+            }
+        }
+        .input,.select,.el-date-editor{
+            width: 180px;
+            margin-right:16px;
+            color: #fff;
+        }
+        ::v-deep{
+            .el-input__wrapper{
+                background-color:  rgba(8, 128, 255, 0.2);
+                border: 0;
+                box-shadow: none;               
+            }
+            .el-input__inner{
+                color: #fff;
+            }
+    }  
     header{
         display: flex;
         justify-content: center;

src/views/particulars/sensor.vue

@@ -4,28 +4,39 @@
             <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>  
+            <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="search.name"  class="input" placeholder="请输入传感器名称" />
+                        <el-input v-model="conditions.goafDevName"  class="input" placeholder="请输入传感器名称" />
                     </div>
                     <div class="search-item">
                         <span>预警等级：</span>
-                        <el-select v-model="search.level" class="select" placeholder="全部">
+                        <el-select v-model="conditions.hdangerLevel" placeholder="全部" style="width:120px;margin-right:14px;" clearable>
                             <el-option
-                            v-for="item in options1"
+                            v-for="item in hdangerLevels"
                             :key="item.value"
                             :label="item.label"
-                            :value="item.value"
+                            :value="item.value" 
                             />
                         </el-select>                    
                     </div>
-                    <div class="search-item">
+                    <!-- <div class="search-item">
                         <span>状态：</span>
-                        <el-select v-model="search.value" class="select" placeholder="全部">
+                        <el-select v-model="conditions.status" class="select" placeholder="全部">
                             <el-option
                             v-for="item in options"
                             :key="item.value"
@@ -33,36 +44,50 @@
                             :value="item.value"
                             />
                         </el-select>                    
-                    </div>
+                    </div> -->
                     <div class="search-item">
-                        <span>预警时间：</span>
-                        <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>
+                            <!-- <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="search.range" class="input" placeholder="Please input" :controls="false" />                        
+                        <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 8" :key="index">
-                            <div class="title">压力传感器</div>
+                        <div class="card" v-for="(item,index) in dataList" :key="index">
+                            <div class="title">{{item.goafDevTypename}}</div>
                             <div class="info">
-                                <p>设备编号：A02166644624</p>
-                                <p>安装位置：Ⅲ号-770-32008</p>
-                                <p>压力值：12Pa</p>
-                                <p>是否在线：在线</p>
+                                <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-'+(index+1)">威胁</footer>
+                            <footer :class="'status-'+item.hdangerLevel">{{hdangerLevel(item.hdangerLevel)}}</footer>
                         </div>
                     </div> 
                     <div class="el-pagination-wrap">
@@ -108,6 +133,8 @@
 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:{
@@ -121,8 +148,21 @@ import { getSensorByPage } from '@/api/goaf/sensor'
             conditions: {
                 page: 1,
                 limit: 8,
-                goafName:""
+                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"},
@@ -135,22 +175,16 @@ import { getSensorByPage } from '@/api/goaf/sensor'
                 {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}
+            hdangerLevels:[
+                {label:"异常",value:0},
+                {label:"威胁",value:1},
+                {label:"危险",value:2},
+                {label:"危急",value:3}
             ],   
             dataList:[],
             total:0                  
@@ -160,13 +194,29 @@ import { getSensorByPage } from '@/api/goaf/sensor'
         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
@@ -184,16 +234,23 @@ import { getSensorByPage } from '@/api/goaf/sensor'
             this.activetab=item.id
         },
         searchSubmit(){
-
+            this.getData()
         },
         resetSubmit(){
-            this.search={
-                name:"",
-                level:"",
-                time:"",
-                status:"",
-                range:0               
+            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
@@ -201,12 +258,77 @@ import { getSensorByPage } from '@/api/goaf/sensor'
         },
         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;
@@ -258,34 +380,7 @@ import { getSensorByPage } from '@/api/goaf/sensor'
                 padding:4.4vh 0 5vh 0;
                 box-sizing: border-box;
                 display: flex;
-                flex-wrap: wrap;
-                .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;
-                    }
-                } 
+                flex-wrap: wrap; 
                 .bt{
                     width: 100px;
                     height: 36px;
@@ -334,6 +429,7 @@ import { getSensorByPage } from '@/api/goaf/sensor'
                             font-size: 14px;
                             p{
                                 line-height: 22px;
+                                word-break: break-all;
                             }
                         }
                         footer{