初始化车牌系统

src/components/MapSelector/index.vue

@@ -1,82 +0,0 @@
-<template>
-  <el-select
-    v-model="mapId"
-    value-key="mapId"
-    filterable
-    placeholder="请选择地图"
-    :popper-append-to-body="false"
-    @change="handleSelectMap"
-  >
-      <el-option
-        v-for="item in mapList"
-        :key="item.mapId"
-        :label="item.mapTitle"
-        :value="item.mapId"
-      />
-  </el-select>
-  
-</template>
-<script>
-import { getMapByList } from '@/api/system/mapApi'
-export default {
-  name: 'MapSelector',
-  components: { },
-  props: {
-    defaultVal: {
-      type: Number,
-      default: undefined
-    }
-  },
-  data() {
-    return {
-      mapId: undefined,
-      mapList: []
-    }
-  },
-  watch: {
-    defaultVal(val) {
-      this.mapId = val
-    }
-  },
-  created() {
-    this.initMapData()
-  },
-  methods: {
-    // 检查表清单
-    initMapData() {
-      getMapByList({}).then((resp) => {
-        const { code, data, msg } = resp
-        if (code === 0) {
-          this.mapList = data
-          if (data && data.length > 0) {
-            const node = data[0]
-            this.mapId = node.mapId
-            this.setVal(node)
-          }
-        } else {
-          this.$message.error(msg)
-        }
-      }).catch((error) => {
-        console.log(error)
-      })
-    },
-
-    // 选择地图
-    handleSelectMap(val) {
-      const size = this.mapList.length
-      for (let idx = 0; idx < size; idx++) {
-        const mp = this.mapList[idx]
-        if (mp.mapId === val) {
-          this.setVal(mp)
-          return
-        }
-      }
-    },
-
-    // 返回值
-    setVal(obj) {
-      this.$emit('setMapInfo', obj,JSON.parse(JSON.stringify(this.mapList)))
-    }
-  }
-}
-</script>

src/router/index.js

@@ -6,41 +6,7 @@ const routes = [
     path: '/',
     name: 'home',
     component: () => import('@/views/home/index')      
-  },
-  {
-    path: '/particulars',
-    name: 'sensor',    
-    component:Main,
-    children:[
-        {
-          path: 'sensor',
-          name: 'particulars_sensor',
-          component: () => import('@/views/particulars/sensor.vue')
-        }
-    ]   
-  },  
-  {
-    path: '/particulars',
-    name: 'check',    
-    component:Main,
-    children:[
-        {
-          path: 'check',
-          name: 'particulars_check',
-          component: () => import('@/views/particulars/check.vue')
-        },
-        {
-          path: 'goaf-info',
-          name: 'particulars_goaf-info',
-          component: () => import('@/views/particulars/goaf_info.vue')
-        },
-        {
-          path: 'particulars-video',
-          name: 'particulars_gvideo',
-          component: () => import('@/views/particulars/video.vue')
-        }
-    ]   
-  },
+  }, 
   {
     path: '/goafcameraalarm',
     name: 'goafcameraalarm',    

src/views/home/components/CheckWarnReport.vue

@@ -1,63 +0,0 @@
-<template>
-    <div class="item report">
-        <div class="title">
-            <span class="name">巡检预警汇报</span>
-            <span class="number">{{total}}</span>
-        </div>
-        <div class="container">                
-            <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 items" :key="index">
-                        <td :title="item.hdangerTitle" style="max-width:200px;">{{ item.hdangerTitle }}</td>
-                        <td :title="item.status">{{ dangerStatus(item.status)}}</td>
-                        <td :title="item.level">{{ hdangerLevel(item.hdangerLevel) }}</td>
-                        <td :title="item.time">{{ item.dangerDeadline }}</td>
-                    </tr> 
-                </table> 
-            </Vue3SeamlessScroll>                      
-        </div>
-    </div> 
-</template>
-<script>
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import { getDangerByList } from '@/api/goaf/dangerApi'
-export default {
-    name:"CheckWarnReport",
-    components:{
-        Vue3SeamlessScroll,
-    },
-    data(){
-        return{
-            items:[],
-            total:0
-        }
-    },
-    created(){
-        this.load()
-    },
-    methods:{
-        dangerStatus(val) {
-            const status = ['待提交', '待评审', '待整改', '待验收', '完成']
-            return val === -1 ? '撤销' : status[val]
-        },
-        hdangerLevel(val){
-            let status=['较低','一般','较大','重大']
-            return status[val]
-        },
-        load(){
-            getDangerByList({
-                hdangerType:0
-            }).then((res)=>{
-                this.total=res.data.length
-                this.items=res.data
-            })
-        }
-    }
-}
-</script>

src/views/home/components/Map/index.vue

@@ -1,401 +0,0 @@
-<template>
-    <div class="map-container">
-      <nav>
-        <map-selector :default-val="formData.mapId" @setMapInfo="handleSelectMap"  />
-      </nav>
-      <div class="layout-map">
-        <div id="vmap" />
-        <div id="marker-tip" :style="marker_tip_style">
-          <div class="head">基本信息</div>
-          <div class="item">
-            <p class="title">巡检任务统计(20)</p>
-            <p><span>未完成：8</span><span>已完成：8</span></p>          
-          </div>
-          <div class="item">
-            <p class="title">传感器统计(21)</p>
-            <p><span>在线：8</span><span>离线：8</span></p>
-            <p><span class="warn">预警：8</span></p>          
-          </div>
-        </div>
-      </div>
-    </div>
-</template>
-  
-  <script>
-  import * as L from 'leaflet'
-  import '@geoman-io/leaflet-geoman-free'
-  import MapSelector from '@/components/MapSelector'
-  import { getMapLayerById, getMapLayer } from '@/api/goaf/layer'
-  import { NumConvertLM } from '@/utils'
-  const iconSize=[110,110]
-  export default {
-    name: 'GoafVisualEditor',
-    components: {
-      MapSelector
-    },
-    data() {
-      return {
-        viewData: {},
-        formData: {
-          mapId: undefined,
-          layerId: undefined,
-          layerVector: ''
-        },
-        map: undefined,
-        geoLayer: undefined,
-        conditions: {
-          layerId: undefined
-        },
-        layer: {
-          containerPoint:{
-            x:"",
-            y:""
-          }
-        },
-        marker_tip_style:"",
-        layers: [],
-        layerGroup: [],
-        mapList:[],
-        imageOverlay: undefined
-      }
-    },
-    mounted() {
-      this.init()
-    },
-    methods: {
-      init() {
-        this.initMap()        
-      },
-      // 初始化
-      getData() {
-        getMapLayerById(this.conditions.layerId).then((resp) => {
-          const { data } = resp
-            this.viewData = data
-            this.setRasterLayer()
-        })
-      },
-  
-      // 初始化地图
-      initMap() {
-        var yx = L.latLng
-        var xy = function xy(x, y) {
-          if (L.Util.isArray(x)) {
-            return yx(x[1], x[0])
-          }
-          return yx(y, x)
-        }
-        var bounds = [xy(-600, -600), xy(300, 300)]
-        this.map = L.map('vmap', {
-          crs: L.CRS.Simple, // 一个简单的CRS，可将经度和纬度直接映射到x其中y。可用于平面地图（例如游戏地图）
-          minZoom: 0,
-          maxZoom: 1,
-          zoom: 1,
-          maxBounds: bounds, // 地图拖动到边界后自动弹回
-          maxBoundsViscosity: 0.2,
-          attributionControl: true,
-          zoomControl: true // zoomControl（缩放控制）：确定缩放控制是否默认加载在地图上。
-        })
-        this.layerGroup = L.layerGroup().addTo(this.map)
-        this.geoLayer = L.geoJson(null, { pmIgnore: false })
-        this.geoLayer.addTo(this.map)
-        if (!this.viewData.layerVector) return
-        this.geoLayer.addData(this.viewData.layerVector)
-      },
-  
-      // 设置地图背景图
-      setRasterLayer() {
-        var yx = L.latLng
-        var xy = function xy(x, y) {
-          if (L.Util.isArray(x)) {
-            return yx(x[1], x[0])
-          }
-          return yx(y, x)
-        }
-        var bounds = [xy(-600, -600), xy(300, 300)]
-        if (this.imageOverlay) {
-          this.imageOverlay.setUrl(this.viewData.mapRasterLayer)
-        } else {
-          this.imageOverlay = L.imageOverlay(this.viewData.mapRasterLayer, bounds).addTo(this.map)
-        }
-  
-        this.map.fitBounds(bounds)
-        this.map.scrollWheelZoom.disable()
-        this.getMapLayers()
-      },
-  
-      // 选择地图
-      handleSelectMap(obj,mapList) {
-        this.viewData.mapRasterLayer = obj.mapRasterLayer
-        this.viewData.mapId = obj.mapId
-        this.formData.mapId = obj.mapId
-        if(mapList){
-          this.mapList=mapList
-        }
-        this.setRasterLayer()
-        this.clearLayers()
-      },
-      formSuccess() {
-        this.$emit('formSuccess')
-      },
-      // 获取地图图层数据
-      getMapLayers() {
-        getMapLayer({
-          mapId:this.formData.mapId
-        }).then((resp) => {
-          const { code, data, msg } = resp
-          if (code === 0) {
-            this.mapLayerList = data
-            this.initMapLayers()
-          } else {
-            this.$message.error(msg)
-          }
-        })
-      },
-      updateMapLayers(mapId,type=1){
-        if(type===1){
-          this.setRasterLayer()
-          this.clearLayers()
-        }else{
-          /** 其他图层改变需要跳转 */
-          if(this.formData.mapId===mapId){
-            this.setRasterLayer()
-            this.clearLayers()
-          }else{
-            let obj=this.mapList.filter(item=>item.mapId===mapId)[0]
-            this.viewData.mapRasterLayer = obj.mapRasterLayer
-            this.viewData.mapId = obj.mapId
-            this.formData.mapId = obj.mapId
-            this.setRasterLayer()
-            this.clearLayers()            
-          }          
-        }
-      },
-      // 初始化地图图层
-      initMapLayers() {
-        const self = this
-        const layerList = this.mapLayerList
-        const feature = []
-        if (layerList != null && layerList.length > 0) {
-          layerList.forEach((item) => {
-            const layerMarker = item.layerMarker && JSON.parse(item.layerMarker)
-            const layerVector = item.layerMarker && JSON.parse(item.layerVector)
-            if (layerMarker && layerMarker.properties) {
-              layerMarker.properties.layerId = item.layerId
-              feature.push(layerMarker)
-            }
-            if (layerVector && layerVector.properties) {
-              layerVector.properties.layerId = item.layerId
-              feature.push(layerVector)
-            }
-          })
-          L.geoJSON(feature, {
-            pointToLayer: function(_feature, latlng) {
-              const goafInfo = _feature.properties.goafInfo
-              const layerId= _feature.properties.layerId
-              var goafAlarmStatus=""
-              let Volume = 0
-              if (goafInfo) {
-                Volume = (goafInfo.goafCanfillVolume - goafInfo.goafRemainVolume) / goafInfo.goafCanfillVolume
-                Volume = (Volume * 100).toFixed(2)
-              }
-              if(_feature.properties.goafAlarmStatus==1){
-                goafAlarmStatus='ico-warning'
-              }
-              const goafOrebelt = _feature.properties.goafOrebelt
-              const goafOrebody = _feature.properties.goafOrebody
-              const goafOreheight = _feature.properties.goafOreheight
-              const goafName = _feature.properties.goafName
-
-              const goaf_icon_tag = `<div class="goaf-icon-tag" title="${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}">${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}</div>`
-              const html = `<div data-layer="${layerId}" class="goaf-icon-box ${goafAlarmStatus}" style="width:100%;height:100%;position: relative;">${goaf_icon_tag}<div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
-              var icon = L.divIcon({
-                html,
-                iconSize
-              })
-              return L.marker(latlng, { icon })
-            },
-            onEachFeature: (_feature, layer) => {
-              this.layerGroup.addLayer(layer)
-              // layer.on('click', (ev) => {
-              //   self.layer=ev
-              //   self.marker_tip_style=`left:${ev.containerPoint.x+24}px;top:${ev.containerPoint.y-20}px`
-              //   console.log({
-              //       layer:ev
-              //   })
-              // })
-              // layer.on('mouseover', (ev) => {
-              //   self.layer=ev
-              //   self.marker_tip_style=`left:${ev.containerPoint.x+30}px;top:${ev.containerPoint.y-10}px;display:block;`
-              //   console.log({
-              //       layer:ev
-              //   })
-              // })
-              // layer.on('mouseout', (ev) => {
-              //   self.layer=ev
-              //   self.marker_tip_style="left:-1000px;top:0;display:none;"
-              // })
-            }
-          }).addTo(this.layerGroup)
-        }
-      },
-      clearLayers() {
-        if (this.layerGroup && this.layerGroup.clearLayers) {
-          this.layerGroup.clearLayers()
-        }
-      },
-      createGeoJson() {
-        var layerArray = []
-        this.map.eachLayer(function(layer) {
-          if (layer.pm !== 'undefined' && layer.pm != null && layer.pm !== '') {
-            if (layer.pm._enabled === false && layer.pm.options.draggable === true) {
-              layerArray.push(layer)
-            }
-          }
-        })
-        var geojson = L.layerGroup(layerArray).toGeoJSON()
-        for (var n = 0; n < geojson.features.length; n++) {
-          var nowJson = JSON.stringify(geojson.features[n])
-          for (var m = n + 1; m < geojson.features.length; m++) {
-            var nextJson = JSON.stringify(geojson.features[m])
-            if (nowJson === nextJson) {
-              geojson.features.splice(n, 1)
-            }
-          }
-        }
-        return geojson
-      },
-      updateLayerState(layerId=0,type=1){
-        var marker = $(`.goaf-icon-box[data-layer='${layerId}']`);
-        if(type===1){
-          // 添加隐患预警
-          marker.addClass("ico-warning " )
-        }else if(type===3){
-          //修改矿坑体积
-        }else{
-          marker.removeClass("ico-warning " )
-        }
-        
-      },
-      unique(arr = [], name = 'name') {
-        const res = new Map()
-        return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
-      },
-      deeepClone(params) {
-        return JSON.parse(JSON.stringify(params))
-      }
-    }
-  }
-  </script>
-      <style lang="scss" scoped>
-      .map-container{
-          nav{
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              padding: 10px 16px;
-              box-sizing: border-box;
-              background-color: #193142;
-          }
-          .layout-map{
-              display: flex;
-              justify-content: space-between;
-              height: calc(100vh - 190px);
-              position: relative;
-              #vmap {
-                  height: 100%;
-                  flex: 1;
-                  background: #8c939d;
-                  box-sizing: border-box;
-              }
-              #marker-tip{
-                width: 200px;
-                height: 200px;
-                background-image: url(./tip.png);
-                background-size: 100% 100%;
-                background-repeat: no-repeat;
-                position: absolute;
-                z-index: 99999;
-                padding: 15px 20px 0 20px;
-                box-sizing: border-box;
-                display: none;
-                .head{
-                  font-size: 24px;
-                  color: #fff;
-                }
-                .item{
-                  padding-top: 15px;
-                  padding-bottom: 5px;
-                  &.item{
-                    padding-top: 8px;
-                  }
-                  .title{
-                    font-size: 16px;
-                    color: rgba(230, 247, 255, 0.6);
-                    padding-bottom: 5px;
-                  }
-                  span{
-                    font-size: 14px;
-                    padding-right: 15px;
-                    color: #fff;
-                    .warn{
-                      color: red;
-                    }
-                  }
-                }
-              }
-          }
-  
-      }
-      </style>
-  
-  <style lang="scss">
-  .goaf-fill-v{
-      width:100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background-image: url("./goaf/stone.png");
-      background-size: 7px;
-      &.fill{
-        background-image: url("./goaf/stone.png");
-      }
-  }
-  .goaf-icon-tag{
-    width: 100%;
-    display: inline-block;
-    background: linear-gradient(90deg, #21649c 0.21%, #060F1E 100%);
-    overflow:hidden; 
-    text-overflow:ellipsis; 
-    white-space:nowrap; 
-    color: #fff;
-    text-align: center;
-    z-index: 99999;
-    position: absolute;
-    top: -18px;
-  }
-  /*动画*/
-.ico-warning {
-  position: relative;
-  &::after{
-    display: block;
-    content: "";
-    height: 60%;
-    width: 60%;
-    background-image: radial-gradient(yellow,red);
-    border-radius: 50% 50% 10% 10%;
-    animation: twinkle 0.5s infinite alternate;
-    position: absolute;
-    transform: translate(-50%,-50%);
-    left: 50%;
-    top: 50%;
-    box-shadow: 0 0 20px red;
-    z-index: 9999;
-  }
-}
-
-@keyframes twinkle {
-    0% {opacity: 0.9;}
-    50% {opacity: 0.5;}
-    100% {opacity: 0;}
-}
-</style>

src/views/home/components/SensorInfoStatistics.vue

@@ -1,460 +0,0 @@
-<template>
-    <div class="item SensorInfoStatistics">
-        <div class="title">
-            <span class="name">区域入侵预警<span class="number" style="padding-left:10px;">{{total}}</span></span>
-            <span class="detail" @click="linkTo">详情>></span>    
-        </div>
-        <div class="container">
-            <!-- <div id="sensor-info-chart" v-if="status"></div>    -->
-            <!-- <div class="warn-item" @click="showWarnModel">
-                <div class="tag" v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</div>
-            </div> -->
-
-            <el-carousel trigger="click" height="120px" indicator-position="none" arrow="always" :autoplay="false" :loop="false">
-                <el-carousel-item v-for="(items,index) in warnList" :key="index" >
-                    <div class="warn-item-box">
-                        <div class="warn-item warning" @click="showWarnModel(item)" v-for="(item,_index) in items" :key="_index">
-                            <div class="tag">{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</div>
-                        </div>                    
-                    </div>
-                </el-carousel-item>
-            </el-carousel>
-
-        </div>
-        <div class="video-dialog" v-if="videoDialogVisible">
-            <div class="video-dialog-container">
-                    <div class="header">
-                        <div class="name">
-                            <!-- <span v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</span> -->
-                            <span>区域入侵预警</span>
-                        </div>
-                        <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
-                    </div>
-                    <!-- <video :src="video.src" id="video" controls></video> -->
-                    <div class="demo-image__preview" v-if="capturePhotos.length>0">
-                        <el-image
-                            style="width: 100px; height: 100px"
-                            :src="capturePhotos[0]"
-                            :zoom-rate="1.2"
-                            :preview-src-list="capturePhotos"
-                            :initial-index="4"
-                        fit="cover"
-                        />
-                    </div> 
-                    <HkwsVideo ref="HkwsVideo"></HkwsVideo>              
-            </div>         
-        </div> 
-    </div>
-</template>
-    <script>
-     import * as echarts from 'echarts';
-     import { goafdevstatis,goafCameraAlarmNumber,goafCameraAlarm} from '@/api/goaf/sensor'
-     import { NumConvertLM } from '@/utils'
-     import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
-      export default {
-        name:"SensorInfoStatistics",
-        components:{
-            HkwsVideo
-        },        
-        data(){
-            return{
-                status:true,
-                warn_status:0,
-                total:0,
-                videoDialogVisible:false,
-                warnList:[],
-                warnInfo:{
-                    "goafOrebody": "",
-                    "goafOrebelt": "",
-                    "goafOreheight": "",
-                    "fileUrl": "",
-                    "goafDevIp": "",
-                    "ocId": undefined,
-                    "goafName": ""
-                },
-                capturePhotos:[],
-                option :{
-                    title:[
-                        {
-                            text:"压力",
-                            textStyle:{
-                                color:'#fff',
-                                fontSize:12
-                            },
-                            left:'26%',
-                            bottom:'2px'  
-                        },
-                        {
-                            text:"位移",
-                            textStyle:{
-                                color:'#fff',
-                                fontSize:12
-                            },
-                            left:'52%',
-                            bottom:'2px'  
-                        },
-                        {
-                            text:"有害气体",
-                            textStyle:{
-                                color:'#fff',
-                                fontSize:12
-                            },
-                            left:'74%',
-                            bottom:'2px'   
-                        }                        
-                    ],
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    legend: {
-                        top: '1%',
-                        left: 'center',
-                        textStyle:{
-                            color:'#fff'
-                        }                        
-                    },                  
-                    series: [
-                        {
-                            name: '压力',
-                            type: 'pie',
-                            radius: ['35%', '50%'],
-                            center:['30%', '52%'],
-                            avoidLabelOverlap: false,
-                            itemStyle: {
-                                borderRadius: 1,
-                                borderColor: '#fff',
-                                borderWidth: 1
-                            },
-                            label: {
-                                show: false,
-                                color:'#fff',
-                                position: 'center'
-                            },
-                            emphasis: {
-                                label: {
-                                    show: true,
-                                    fontSize: 10,
-                                    fontWeight: 'bold'
-                                }
-                            },
-                            labelLine: {
-                                show: false
-                            },
-                            data: [
-                                { value: 0, name: '异常',itemStyle:{color:'#D4603C'} },
-                                { value: 0, name: '正常' ,itemStyle:{color:'#3CD495'}}
-                            ]
-                        },
-                        {
-                            name: '位移',
-                            type: 'pie',
-                            radius: ['35%', '50%'],
-                            center:['55%', '52%'],
-                            avoidLabelOverlap: false,
-                            itemStyle: {
-                                borderRadius: 1,
-                                borderColor: '#fff',
-                                borderWidth: 1
-                            },
-                            label: {
-                                show: false,
-                                color:'#fff',
-                                position: 'center'
-                            },
-                            emphasis: {
-                                label: {
-                                    show: true,
-                                    fontSize: 10,
-                                    fontWeight: 'bold'
-                                }
-                            },
-                            labelLine: {
-                                show: false
-                            },
-                            data: [
-                                { value: 0, name: '异常',itemStyle:{color:'#D4603C'} },
-                                { value: 0, name: '正常' ,itemStyle:{color:'#3CD495'}}
-                            ]
-                        },
-                        {
-                            name: '有害气体',
-                            type: 'pie',
-                            radius: ['35%', '50%'],
-                            center:['80%', '52%'],
-                            avoidLabelOverlap: false,
-                            itemStyle: {
-                                borderRadius: 1,
-                                borderColor: '#fff',
-                                borderWidth: 1
-                            },
-                            label: {
-                                show: false,
-                                color:'#fff',
-                                position: 'center'
-                            },
-                            emphasis: {
-                                label: {
-                                    show: true,
-                                    fontSize: 10,
-                                    fontWeight: 'bold'
-                                }
-                            },
-                            labelLine: {
-                                show: false
-                            },
-                            data: [
-                                { value: 0, name: '异常',itemStyle:{color:'#D4603C'} },
-                                { value: 0, name: '正常' ,itemStyle:{color:'#3CD495'}}
-                            ]
-                        }                                                 
-                    ]
-                }
-            }
-        },
-        created(){
-            this.$nextTick(()=>{
-                this.reload()
-            })
-        },        
-        methods:{
-            NumConvertLM,
-            init(){
-                // var chartDom = document.getElementById('sensor-info-chart');
-                // var myChart = echarts.init(chartDom);
-                // this.option && myChart.setOption(this.option);      
-                // myChart.on('click', (params)=> {
-                //     // console.log("SensorInfoStatistics",params)
-                //     this.$router.push({
-                //         path: '/particulars/sensor',
-                //         query: {
-                //             id: '1'
-                //         }
-                //     })
-                // });                   
-            }
-            ,reload(){      
-                this.$nextTick(()=>{
-                    this.goafCameraAlarmNumber()
-                    this.goafCameraAlarm()
-                })                 
-            },  
-            warn(data){
-                // this.warnInfo=data
-                // $('.SensorInfoStatistics').find('.warn-item').addClass('warning')
-                this.goafCameraAlarm()
-            },  
-            showWarnModel(item){
-                this.videoDialogVisible=true
-                if(item){
-                    let warn_info=JSON.parse(JSON.stringify(item))
-                    this.warnInfo=warn_info
-                    this.warnInfo.fileUrl=warn_info.goafSnapPicurl
-                }
-                this.capturePhotos=[this.warnInfo.fileUrl]
-                let warnInfo=item?item:this.warnInfo
-                let state=true
-                if(this.isNull(warnInfo.goafDevSocketAddr)){
-                    state="未配置推流地址"
-                    console.error('未配置推流地址')
-                    return
-                }
-                if(this.isNull(this.warnInfo.goafDevIp)){
-                    state="未配置设备IP"
-                    console.error(state)
-                    return
-                }    
-                if(this.isNull(this.warnInfo.goafDevPort)){
-                    state="未配置设备端口"
-                    console.error(state)
-                    return
-                }
-                if(this.isNull(this.warnInfo.goafDevAccount)){
-                    state="未配置设备账号"
-                    console.error(state)
-                    return
-                }      
-                if(this.isNull(this.warnInfo.goafDevPwd)){
-                    state="未配置设备密码"
-                    console.error(state)
-                    return
-                }                 
-                this.$nextTick(()=>{
-                    this.$refs.HkwsVideo.loadData({
-                        streamServeUrl:this.warnInfo.goafDevSocketAddr,
-                        szIP: this.warnInfo.goafDevIp,    // protocol ip
-                        szPort: this.warnInfo.goafDevPort,            // protocol port
-                        szUsername:this.warnInfo.goafDevAccount,     // device username
-                        szPassword: this.warnInfo.goafDevPwd, // device password       
-                    })
-                })
-            }, 
-            // 获取所有采空区摄像头告警数量  
-            goafCameraAlarmNumber(){
-                goafCameraAlarmNumber({
-                    goafAlarmStatus:0
-                }).then((res)=>{
-                    this.total=res.data                                   
-                })
-            },
-            //获取所有采空区摄像头告警信息
-            goafCameraAlarm(){
-                goafCameraAlarm({
-                    goafAlarmStatus:0
-                }).then((res)=>{
-                    this.warnList=this.getDataSource(res.data)                                
-                })
-            },
-            goafdevstatis(){
-                let   option  =JSON.parse(JSON.stringify(this.option))
-                goafdevstatis().then((res)=>{
-                    this.total=res.data.goafDevTotalNum                                   
-                })
-            },
-            linkTo(){
-                this.$router.push({
-                    path: '/goafCameraAlarm'
-                })                
-            },
-            getDataSource(dataList=[],n=4) {
-                let newDataList = []
-                let current = 0
-                if(dataList && dataList.length>0){
-                    for(let i=0;i<=dataList.length-1;i++){
-                        if(i%n !== 0 || i === 0 ){
-                        if(!newDataList[current]){
-                            newDataList.push([dataList[i]])
-                        }else{
-                            newDataList[current].push(dataList[i])
-                        }
-                        }else{
-                            current++
-                            newDataList.push([dataList[i]])
-                        }
-                    }
-                }
-                return [...newDataList]
-            },            
-            isNull(val){
-                if(val===undefined||val==="undefined"||val===null||val===""){
-                    return true
-                }
-                return false
-            },            
-        },
-        destroyed() {
-            this.status=false
-        },        
-      }
-    </script>
-    <style lang="scss" scoped>
-    .container{
-        height: 12vh;
-        #sensor-info-chart{
-            width: 95%;
-            height: 100%;
-        }    
-    }
-    .demo-image__preview{
-        padding:0 0  10px 20px;
-    }
-    .video-dialog{
-        position: fixed;
-        z-index: 9999;
-        left: 10px;
-        top: 0;
-        right: 10px;
-        bottom: 0;
-        background-color: rgba(222, 229, 236, 0.45);
-        .video-dialog-container{
-            width: 654px;
-            height: 644px;
-            background-color: #051933;
-            border-radius: 20px;
-            margin: 20px auto;
-        }
-        .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;
-        }        
-    }
-    .warn-item-box{
-        display: flex;
-        align-items: center;
-        .warn-item{
-            width: 100px;
-            height: 100px;
-            position: relative;
-            margin-left: 15px;
-            display: none;
-            .tag{
-                width: 110px;
-                display: inline-block;
-                background: #21649c;
-                overflow:hidden; 
-                text-overflow:ellipsis; 
-                white-space:nowrap; 
-                color: #fff;
-                text-align: center;
-                z-index: 9;
-                position: absolute;
-                bottom: -4px;
-                font-size: 12px;
-                line-height: 1;
-                padding: 2px 0;
-            }   
-            &::after{
-                display: block;
-                content: "";
-                height: 60%;
-                width: 60%;
-                border-radius: 50% 50% 10% 10%;
-                position: absolute;
-                transform: translate(-50%,-50%);
-                left: 50%;
-                top: 50%;
-                z-index: 9;
-                background-image: radial-gradient(#dee7f6, #797878);
-                box-shadow: 0 0 20px #fff;
-            }             
-        }    
-        .warning {
-            display: block;
-            &::after{
-                background-image: radial-gradient(yellow,red);
-                animation: twinkle 0.5s infinite alternate;
-                box-shadow: 0 0 20px red;
-            }
-        }            
-    }
-
-  /*动画*/
-
-@keyframes twinkle {
-    0% {opacity: 0.9;}
-    50% {opacity: 0.5;}
-    100% {opacity: 0;}
-}
-    </style>

src/views/home/components/SensorStatus.vue

@@ -1,163 +0,0 @@
-<template>
-<div class="item">
-    <div class="title">
-        <span class="name">传感器状况<span class="number" style="padding-left:10px;">{{total}}</span></span>
-        <span class="detail" @click="linkTo">详情>></span>        
-    </div>
-    <div class="container">
-        <div id="sensor-status-chart" v-if="status"></div>   
-    </div>
-</div>
-</template>
-<script>
-import { goafdevstatis} from '@/api/goaf/sensor'
- import * as echarts from 'echarts';
-  export default {
-    name:"SensorStatus",
-    data(){
-        return{
-            myChart:null,
-            status:true,
-            total:0,
-            option :{
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    }
-                },
-                legend: {
-                    textStyle:{
-                        color:'#fff'
-                    }
-                },
-                grid: {
-                    top:'20%',
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01],
-                    axisLabel:{
-                        color:'#fff'                      
-                    },
-                    axisLine:{
-                        show:false
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                },
-                yAxis: {
-                    type: 'category',
-                    data: ['在线', '离线'],
-                    axisLabel:{
-                        color:'#fff'                      
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                },
-                series: [
-                    {
-                        name: '压力',
-                        type: 'bar',
-                        data: [0,0]
-                    },
-                    {
-                        name: '位移',
-                        type: 'bar',
-                        data: [0,0]
-                    },
-                    {
-                        name: '有害气体',
-                        type: 'bar',
-                        data: [0,0]
-                    }
-                ]
-            }
-        }
-    },
-    created(){
-        this.$nextTick(()=>{
-            this.reload()
-        })
-    },
-    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                     
-        },
-        reload(){      
-            this.$nextTick(()=>{
-              this.goafdevstatis()
-            })                 
-        },
-        goafdevstatis(){
-            let   option  =JSON.parse(JSON.stringify(this.option))
-            goafdevstatis().then((res)=>{
-
-                this.total=res.data.goafDevTotalNum
-
-                let pressureSensorNum=res.data.pressureSensorNum
-                let displacementSensorNum=res.data.displacementSensorNum
-                let harmfulGasSensorNum=res.data.harmfulGasSensorNum
-
-                let pressureSensorOnlineNum=res.data.pressureSensorOnlineNum
-                let displacementSensorOnlineNum=res.data.displacementSensorOnlineNum
-                let harmfulGasSensorOnlineNum=res.data.harmfulGasSensorOnlineNum               
-
-                option.series[0].data=[pressureSensorOnlineNum,pressureSensorNum-pressureSensorOnlineNum]
-                option.series[1].data=[displacementSensorOnlineNum,displacementSensorNum-displacementSensorOnlineNum]
-                option.series[2].data=[harmfulGasSensorOnlineNum,harmfulGasSensorNum-harmfulGasSensorOnlineNum] 
-                
-                if(!this.myChart){
-                    var chartDom = document.getElementById('sensor-status-chart');
-                    var myChart = echarts.init(chartDom);
-                    this.myChart=myChart 
-                }        
-                this.myChart.setOption(option);  
-                this.myChart.on('click', (params)=> {
-                    this.$router.push({
-                        path: '/particulars/sensor',
-                        query: {
-                            id: '0'
-                        }
-                    })
-                }); 
-                                 
-            })
-        },
-        linkTo(){
-            this.$router.push({
-                path: '/particulars/sensor',
-                query: {
-                    id: '0'
-                }
-            })
-        }
-    },
-    destroyed() {
-        this.status=false
-    },
-  }
-</script>
-<style lang="scss" scoped>
-.container{
-    height: 13.2vh !important; 
-    // min-height: 164px;
-    #sensor-status-chart{
-        width: 95%;
-        height: 100%;
-    }    
-}
-</style>

src/views/home/components/SensorWarningInfo.vue

@@ -1,69 +0,0 @@
-<template>
-    <div class="item report">
-        <div class="title">
-            <span class="name">传感器预警信息</span>
-            <span class="number">{{total}}</span>
-        </div>
-        <div class="container">          
-            <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 items" :key="index">
-                        <td :title="item.hdangerTitle" style="max-width:200px;">{{ item.hdangerTitle }}</td>
-                        <td :title="item.status">{{dangerStatus(item.status)}}</td>
-                        <td :title="item.level">{{ hdangerLevel(item.hdangerLevel) }}</td>
-                        <td :title="item.time">{{ item.dangerDeadline }}</td>
-                    </tr> 
-                </table> 
-            </Vue3SeamlessScroll>              
-        </div>
-    </div> 
-</template>
-<script>
-import { getDangerByList } from '@/api/goaf/dangerApi'
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-export default {
-    name:"SensorWarningInfo",
-    components:{
-        Vue3SeamlessScroll,
-    },
-    data(){
-        return{
-            items:[],
-            total:0
-        }
-    },
-    created(){
-        this.load()
-    },
-    methods:{
-        dangerStatus(val) {
-            const status = ['待提交', '待评审', '待整改', '待验收', '完成']
-            return val === -1 ? '撤销' : status[val]
-        },
-        hdangerLevel(val){
-            let status=["异常","威胁","危险","危急"]
-            return status[val]||'正常'
-        },
-        load(){
-            getDangerByList({
-                hdangerType:1
-            }).then((res)=>{
-                this.total=res.data.length
-                this.items=res.data
-            })
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.container{
-    height: 16vh !important;
-    // min-height: 200px;  
-}
-</style>

src/views/home/components/SensorWarningStatistics.vue

@@ -1,108 +0,0 @@
-<template>
-    <div class="item warning-statistics">
-        <div class="title">
-            <span class="name">传感器预警统计</span>
-            <span class="number">{{total}}</span>            
-        </div>
-        <div class="container">
-            <div class="lf">
-                <div class="head">
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelSeriousNum }}</div>
-                        <div class="name">危急</div>
-                    </div>
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelMajorNum }}</div>
-                        <div class="name">危险</div>
-                    </div>
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelGeneralNum }}</div>
-                        <div class="name">威胁</div>
-                    </div>
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelLowerNum }}</div>
-                        <div class="name">异常</div>
-                    </div>
-                </div>
-                <div class="status">
-                    <div class="status-item">
-                        <div class="name">待评审</div>
-                        <div class="number">{{ data.goafHdangerStatusToforreviewlNum }}</div>
-                    </div> 
-                    <div class="status-item">
-                        <div class="name">待整改</div>
-                        <div class="number">{{ data.goafHdangerStatusTorectifyNum }}</div>
-                    </div>                  
-                    <div class="status-item">
-                        <div class="name">待验收</div>
-                        <div class="number">{{ data.goafHdangerStatusToacceptNum }}</div>
-                    </div>    
-                    <div class="status-item">
-                        <div class="name">已完成</div>
-                        <div class="number">{{ data.goafHdangerStatusCompleteNum }}</div>
-                    </div>    
-                </div>
-            </div>
-            <div class="chart-cont">
-                <el-progress type="circle" :percentage="rectify_rate" :width="120" color="#2affff" :stroke-width="8">   
-                    <template #default="{ percentage }">
-                        <span style="color:#fff;font-size: 20px;font-weight: bold;">{{ rectify_rate }}%</span>
-                    </template>
-                </el-progress>
-                <p>整改完成率</p>             
-            </div>
-        </div>
-    </div> 
-</template>
-<script>
-export default {
-    name:"SensorWarningStatistics",
-    data(){
-        return{
-             data:{
-                "goafHdangerLevelGeneralNum":0,
-                "goafHdangerLevelLowerNum": 0,
-                "goafHdangerLevelMajorNum": 0,
-                "goafHdangerLevelSeriousNum": 0,
-                "goafHdangerStatusCancelNum": 0,
-                "goafHdangerStatusCompleteNum": 0,
-                "goafHdangerStatusToacceptNum": 0,
-                "goafHdangerStatusToforreviewlNum": 0,
-                "goafHdangerStatusTorectifyNum": 0,
-                "goafHdangerStatusTosubmitNum": 0,
-             },
-             "rectify_rate":0,
-             'total':0
-        }
-    },
-    methods:{
-        loadData(data){
-            let total=data.goafHdangerLevelGeneralNum+data.goafHdangerLevelLowerNum+data.goafHdangerLevelMajorNum+data.goafHdangerLevelSeriousNum
-            let rectify_rate=total>0?(data.goafHdangerStatusCompleteNum/total):0
-            this.data=data
-            this.total=total
-            this.rectify_rate=parseFloat((rectify_rate*100).toFixed(1))
-        },
-        linkTo(){
-            this.$router.push({
-                path: '/particulars/sensor',
-                query: {
-                    id: '0'
-                }
-            })
-        }        
-    }
-}
-</script>
-<style lang="scss" scoped>
-.container{
-    height: 19.4vh !important; 
-    .chart-cont{
-        p{
-            color: #fff;
-            margin-top: 12px;
-            font-size: 14px;
-        }
-    }
-}
-</style>

src/views/home/components/TodayCheckTask.vue

@@ -1,67 +0,0 @@
-<template>
-    <div class="item report-task">
-        <div class="title">
-            <span class="name">今日巡检任务</span>
-            <div class="number" style="color:#fff">
-                已完成：<span style="color: #44D7B6;">{{ complete }}</span>
-                <span style="padding-left: 15px;">未完成：{{ unfinished }}</span>
-            </div>
-        </div>
-        <div class="container">
-            <Vue3SeamlessScroll :list="items" class="scroll" hover>    
-                <div class="report-item" v-for="(item,index) in items" :key="index">
-                    <div class="name" :title="item.taskTitle">{{ item.taskTitle }}</div>
-                    <div class="footer">
-                        <div class="status">{{ formateStatus(item.status) }}</div>
-                        <div class="user">{{ item.handleAccountName }}</div>
-                    </div>
-                </div> 
-            </Vue3SeamlessScroll>              
-        </div>
-    </div> 
-</template>
-<script>
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import { goafTodaytaskList,goaftaskList } from '@/api/goaf/task'
-import {getTime} from '@/utils'
-export default {
-    name:"TodayCheckTask",
-    components:{
-        Vue3SeamlessScroll,
-    },
-    data(){
-        return{
-            items:[],
-            complete:0,
-            unfinished:0
-        }
-    },
-    created(){
-        this.load()
-    },
-    methods:{
-        formateStatus(val){
-            let status=['待处理','处理完成','已逾期']
-            return status[val]
-        },
-        async load(){
-            let expectedStartDate=getTime()
-            let expectedEndDate=getTime(1)
-            let unfinishedResult=await goaftaskList({
-                expectedStartDate,
-                expectedEndDate         
-            })
-            let completeResult=await goafTodaytaskList({
-                checkEndDate:expectedStartDate,
-                checkEndDate:expectedEndDate         
-            })
-            let unfinishedData=unfinishedResult.data
-            let completeData=completeResult.data
-            let items=unfinishedData.concat(completeData)
-                this.complete=completeData.length
-                this.unfinished=unfinishedData.length
-                this.items=items           
-        }
-    }
-}
-</script>

src/views/home/components/WarningStatistics.vue

@@ -1,100 +0,0 @@
-<template>
-    <div class="item warning-statistics">
-        <div class="title">
-            <span class="name">巡检预警统计<span class="number" style="padding-left:10px;">{{total}}</span></span>
-            <span class="detail" @click="linkTo">详情>></span>
-        </div>
-        <div class="container">
-            <div class="lf">
-                <div class="head">
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelSeriousNum }}</div>
-                        <div class="name">重大</div>
-                    </div>
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelMajorNum }}</div>
-                        <div class="name">较大</div>
-                    </div>
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelGeneralNum }}</div>
-                        <div class="name">一般</div>
-                    </div>
-                    <div class="head-item">
-                        <div class="number">{{ data.goafHdangerLevelLowerNum }}</div>
-                        <div class="name">较低</div>
-                    </div>
-                </div>
-                <div class="status">
-                    <div class="status-item">
-                        <div class="name">待评审</div>
-                        <div class="number">{{ data.goafHdangerStatusToforreviewlNum }}</div>
-                    </div> 
-                    <div class="status-item">
-                        <div class="name">待整改</div>
-                        <div class="number">{{ data.goafHdangerStatusTorectifyNum }}</div>
-                    </div>                  
-                    <div class="status-item">
-                        <div class="name">待验收</div>
-                        <div class="number">{{ data.goafHdangerStatusToacceptNum }}</div>
-                    </div>    
-                    <div class="status-item">
-                        <div class="name">已完成</div>
-                        <div class="number">{{ data.goafHdangerStatusCompleteNum }}</div>
-                    </div>    
-                </div>
-            </div>
-            <div class="chart-cont">
-                <el-progress type="circle" :percentage="rectify_rate" :width="120" color="#2affff" :stroke-width="8">   
-                    <template #default="{ percentage }">
-                        <span style="color:#fff;font-size: 20px;font-weight: bold;">{{ percentage }}%</span>
-                    </template>
-                </el-progress>
-                <p>整改完成率</p>             
-            </div>
-        </div>
-    </div>   
-</template>
-<script>
-export default {
-    name:"WarningStatistics",
-    data(){
-        return{
-             data:{
-                "goafHdangerLevelGeneralNum":0,
-                "goafHdangerLevelLowerNum": 0,
-                "goafHdangerLevelMajorNum": 0,
-                "goafHdangerLevelSeriousNum": 0,
-                "goafHdangerStatusCancelNum": 0,
-                "goafHdangerStatusCompleteNum": 0,
-                "goafHdangerStatusToacceptNum": 0,
-                "goafHdangerStatusToforreviewlNum": 0,
-                "goafHdangerStatusTorectifyNum": 0,
-                "goafHdangerStatusTosubmitNum": 0,
-             },
-             "rectify_rate":0,
-             'total':0
-        }
-    },
-    methods:{
-        loadData(data){
-            let total=data.goafHdangerLevelGeneralNum+data.goafHdangerLevelLowerNum+data.goafHdangerLevelMajorNum+data.goafHdangerLevelSeriousNum
-            let rectify_rate=total>0?(data.goafHdangerStatusCompleteNum/total):0
-            this.data=data
-            this.total=total
-            this.rectify_rate=parseFloat((rectify_rate*100).toFixed(1))
-        },
-        linkTo(){
-            this.$router.push('/particulars/check')
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.chart-cont{
-    p{
-        color: #fff;
-        margin-top: 12px;
-        font-size: 14px;
-    }
-}
-</style>

src/views/home/components/capture.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="item camera">
+        <div class="title">
+            <span class="name">{{title}}</span>  
+        </div>
+        <div class="container">
+            <iframe :src="iframeSrc" frameborder="0" @load="iframeLoaded" scrolling="no"></iframe>
+        </div>
+    </div>   
+</template>
+<script>
+export default {
+    name:"capture",
+    props:{
+        title:"",
+        data:{
+            streamServeUrl:"",        // 监控视频地址
+            szIP: "",    // protocol ip
+            szPort: "",            // protocol port
+            szUsername: "",     // device username
+            szPassword: "", // device password          
+        }
+    },
+    data(){
+        return{
+            iframeSrc:""
+        }
+    },
+    created() {
+        this.$nextTick(()=>{
+            // this.iframeLoaded()
+        })
+    },
+    methods:{
+        iframeLoaded(){
+            let item=this.data;
+            if(this.isNull(item.goafDevSocketAddr)){
+                console.error('未配置推流地址')
+                return
+            }
+            if(this.isNull(item.goafDevIp)){
+                console.error('未配置设备IP')
+                return
+            }    
+            if(this.isNull(item.goafDevPort)){
+                console.error('未配置设备端口')
+                return
+            }
+            if(this.isNull(item.goafDevAccount)){
+                console.error('未配置设备账号')
+                return
+            }      
+            if(this.isNull(item.goafDevPwd)){
+                console.error('未配置设备密码')
+                return
+            }               
+            this.loadData({
+                streamServeUrl:item.goafDevSocketAddr,
+                szIP: item.goafDevIp,    // protocol ip
+                szPort: item.goafDevPort,            // protocol port
+                szUsername:item.goafDevAccount,     // device username
+                szPassword: item.goafDevPwd, // device password        
+            })
+        },
+        loadData({
+            streamServeUrl="",        // 监控视频地址
+            szIP= "",    // protocol ip
+            szPort= "",            // protocol port
+            szUsername= "",     // device username
+            szPassword= "", // device password  
+        }){
+            this.state=true
+            this.iframeSrc=`${streamServeUrl}?name=${szUsername}&pwd=${szPassword}&ip=${szIP}&port=${szPort}`
+        },
+        isNull(val){
+            if(val===undefined||val==="undefined"&&val===null&&val===""){
+                return true
+            }
+            return false
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+    iframe{
+        width: 100%;
+        height: 100%;
+        display: block;
+        border: 0;
+    }
+}
+</style>

src/views/home/components/carPlateInfo.vue

@@ -0,0 +1,240 @@
+<template>
+    <div class="item carPlateInfo">
+        <div class="title">
+            <span class="name">车牌信息</span>
+            <span class="detail" @click="linkTo">详情>></span>    
+        </div>
+        <div class="container">
+
+        </div>
+        <div class="video-dialog" v-if="videoDialogVisible">
+            <div class="video-dialog-container">
+                    <div class="header">
+                        <div class="name">
+                            <span>区域入侵预警</span>
+                        </div>
+                        <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
+                    </div>
+                    <div class="demo-image__preview" v-if="capturePhotos.length>0">
+                        <el-image
+                            style="width: 100px; height: 100px"
+                            :src="capturePhotos[0]"
+                            :zoom-rate="1.2"
+                            :preview-src-list="capturePhotos"
+                            :initial-index="4"
+                        fit="cover"
+                        />
+                    </div> 
+                    <HkwsVideo ref="HkwsVideo"></HkwsVideo>              
+            </div>         
+        </div> 
+    </div>
+</template>
+    <script>
+     import { goafCameraAlarmNumber} from '@/api/goaf/sensor'
+     import { NumConvertLM } from '@/utils'
+     import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
+      export default {
+        name:"carPlateInfo",
+        components:{
+            HkwsVideo
+        },        
+        data(){
+            return{
+                videoDialogVisible:false,
+                capturePhotos:[]                            
+            }
+        },
+        created(){
+            this.$nextTick(()=>{
+                this.reload()
+            })
+        },        
+        methods:{
+            NumConvertLM,
+            reload(){      
+                this.$nextTick(()=>{
+                })                 
+            },   
+            showWarnModel(item){
+                this.videoDialogVisible=true
+                if(item){
+                    let warn_info=JSON.parse(JSON.stringify(item))
+                    this.warnInfo=warn_info
+                    this.warnInfo.fileUrl=warn_info.goafSnapPicurl
+                }
+                this.capturePhotos=[this.warnInfo.fileUrl]
+                let warnInfo=item?item:this.warnInfo
+                let state=true
+                if(this.isNull(warnInfo.goafDevSocketAddr)){
+                    state="未配置推流地址"
+                    console.error('未配置推流地址')
+                    return
+                }
+                if(this.isNull(this.warnInfo.goafDevIp)){
+                    state="未配置设备IP"
+                    console.error(state)
+                    return
+                }    
+                if(this.isNull(this.warnInfo.goafDevPort)){
+                    state="未配置设备端口"
+                    console.error(state)
+                    return
+                }
+                if(this.isNull(this.warnInfo.goafDevAccount)){
+                    state="未配置设备账号"
+                    console.error(state)
+                    return
+                }      
+                if(this.isNull(this.warnInfo.goafDevPwd)){
+                    state="未配置设备密码"
+                    console.error(state)
+                    return
+                }                 
+                this.$nextTick(()=>{
+                    this.$refs.HkwsVideo.loadData({
+                        streamServeUrl:this.warnInfo.goafDevSocketAddr,
+                        szIP: this.warnInfo.goafDevIp,    // protocol ip
+                        szPort: this.warnInfo.goafDevPort,            // protocol port
+                        szUsername:this.warnInfo.goafDevAccount,     // device username
+                        szPassword: this.warnInfo.goafDevPwd, // device password       
+                    })
+                })
+            }, 
+            // 获取所有采空区摄像头告警数量  
+            goafCameraAlarmNumber(){
+                goafCameraAlarmNumber({
+                    goafAlarmStatus:0
+                }).then((res)=>{
+                    this.total=res.data                                   
+                })
+            },
+            linkTo(){
+                this.$router.push({
+                    path: '/goafCameraAlarm'
+                })                
+            },           
+            isNull(val){
+                if(val===undefined||val==="undefined"||val===null||val===""){
+                    return true
+                }
+                return false
+            },            
+        },
+        destroyed() {
+            this.status=false
+        },        
+      }
+    </script>
+    <style lang="scss" scoped>
+    .container{
+        height: 12vh;
+        #sensor-info-chart{
+            width: 95%;
+            height: 100%;
+        }    
+    }
+    .demo-image__preview{
+        padding:0 0  10px 20px;
+    }
+    .video-dialog{
+        position: fixed;
+        z-index: 9999;
+        left: 10px;
+        top: 0;
+        right: 10px;
+        bottom: 0;
+        background-color: rgba(222, 229, 236, 0.45);
+        .video-dialog-container{
+            width: 654px;
+            height: 644px;
+            background-color: #051933;
+            border-radius: 20px;
+            margin: 20px auto;
+        }
+        .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;
+        }        
+    }
+    .warn-item-box{
+        display: flex;
+        align-items: center;
+        .warn-item{
+            width: 100px;
+            height: 100px;
+            position: relative;
+            margin-left: 15px;
+            display: none;
+            .tag{
+                width: 110px;
+                display: inline-block;
+                background: #21649c;
+                overflow:hidden; 
+                text-overflow:ellipsis; 
+                white-space:nowrap; 
+                color: #fff;
+                text-align: center;
+                z-index: 9;
+                position: absolute;
+                bottom: -4px;
+                font-size: 12px;
+                line-height: 1;
+                padding: 2px 0;
+            }   
+            &::after{
+                display: block;
+                content: "";
+                height: 60%;
+                width: 60%;
+                border-radius: 50% 50% 10% 10%;
+                position: absolute;
+                transform: translate(-50%,-50%);
+                left: 50%;
+                top: 50%;
+                z-index: 9;
+                background-image: radial-gradient(#dee7f6, #797878);
+                box-shadow: 0 0 20px #fff;
+            }             
+        }    
+        .warning {
+            display: block;
+            &::after{
+                background-image: radial-gradient(yellow,red);
+                animation: twinkle 0.5s infinite alternate;
+                box-shadow: 0 0 20px red;
+            }
+        }            
+    }
+
+  /*动画*/
+
+@keyframes twinkle {
+    0% {opacity: 0.9;}
+    50% {opacity: 0.5;}
+    100% {opacity: 0;}
+}
+    </style>

src/views/home/components/index.js

@@ -1,21 +1,6 @@
-import WarningStatistics from './WarningStatistics.vue'
-import CheckWarnReport from './CheckWarnReport.vue'
-import TodayCheckTask from './TodayCheckTask.vue'
-
-import SensorStatus from './SensorStatus.vue'
-import SensorWarningStatistics from './SensorWarningStatistics.vue'
-import SensorWarningInfo from './SensorWarningInfo.vue'
-import SensorInfoStatistics from './SensorInfoStatistics.vue'
-
-import Map from './Map/index.vue'
-
+import capture from './capture.vue'
+import carPlateInfo from './carPlateInfo.vue'
 export  {
-    WarningStatistics,
-    TodayCheckTask,
-    CheckWarnReport,
-    SensorStatus,
-    SensorWarningStatistics,
-    SensorWarningInfo,
-    SensorInfoStatistics,
-    Map
+    capture,
+    carPlateInfo
 }

src/views/home/index.vue

@@ -1,59 +1,31 @@
 <template>
 <div class="home-view">
     <div class="side-left">
-        <warning-statistics ref="warning-statistics" />
-        <check-warn-report ref="check-warn-report" />  
-        <today-check-task /> 
-    </div>
-    <div class="main">
-        <Map ref="map" />
+        <capture v-for="(capture,index) in captures" :title="formateTitle(capture)" :data="capture" :key="index" />
     </div>
     <div class="side-right">
-        <sensor-status ref="sensor-status" />
-        <sensor-warning-statistics ref="sensor-warning-statistics"  />
-        <sensor-warning-info ref="sensor-warning-info"  /> 
-        <sensor-info-statistics ref="sensor-info-statistics" />         
+        <carPlate-info ref="sensor-info-statistics" />         
     </div>
 </div>
 </template>
 <script>
-import mixins  from '@/mixins/mqtt.js'
-import {Uint8ArrayToString} from'@/utils'
-
-import {parseTime} from '@/utils'
-import {getUserProfile} from '@/api/system'
-import {goafhdangerstatis} from '@/api/goaf/dangerApi'
 import { useStore } from '@/store/modules/user'
 const store=useStore()
+import { NumConvertLM } from '@/utils'
+import { getSensor } from '@/api/goaf/sensor'
 import {   
-    WarningStatistics,
-    TodayCheckTask,
-    CheckWarnReport,
-    SensorStatus,
-    SensorWarningStatistics,
-    SensorWarningInfo,
-    SensorInfoStatistics,
-    Map
+    capture,
+    carPlateInfo,
 } from './components'
  export default {
     name:'Home',
     components:{
-        WarningStatistics,
-        TodayCheckTask,
-        CheckWarnReport,
-        SensorStatus,
-        SensorWarningStatistics,
-        SensorWarningInfo,
-        SensorInfoStatistics,
-        Map
+        capture,
+        carPlateInfo,
     },
-    mixins:[mixins],
     data(){
         return{
-            reportData:[],
-            WarniStatisticsdata:{
-                fish:100
-            }
+            captures:[],
         }
     },
     created(){
@@ -61,30 +33,17 @@ import {
     }, 
     methods:{
         init(){
-            this.saveUserInfo()
-            this.initChart()
-            this.getWarniStatisticsdata()
-            this.initMqtt({
-                mqttResponse:this.mqttResponse
-            })              
+            this.initCapture() 
         },
-        initChart(){
-            let reportData=[]
-            for(let i=0;i<20;i++){
-                reportData.push({
-                    "id":i+1,
-                    'name':'{Ⅲ号-770-32003}:有无渗水情况',
-                    'status':'',
-                    'level':"较大",
-                    'time':parseTime(new Date())
-                })
-            }
-            this.reportData=reportData
-            /**更新chart */
-            this.$nextTick(()=>{
-                this.$refs['sensor-status'].reload();
-                this.$refs['sensor-info-statistics'].init();
-            })            
+        formateTitle(item){
+            return `${NumConvertLM(item.goafOrebelt)}-${item.goafOrebody}-${item.goafOreheight}-${item.goafName}`
+        },
+        initCapture(){
+            getSensor(this.conditions).then((resp) => {
+                const { data } = resp
+                const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
+                this.captures = dataList
+            })
         },
         saveUserInfo(){
             if(localStorage.getItem('user')){
@@ -101,57 +60,7 @@ import {
                     localStorage.setItem('user',JSON.stringify(res.data))
                 })
             }
-        },
-        getWarniStatisticsdata(){
-            //预警统计            
-            goafhdangerstatis({
-                hdangerType:0
-            }).then((res)=>{
-                this.$refs['warning-statistics'].loadData(res.data)
-            })
-            goafhdangerstatis({
-                hdangerType:1
-            }).then((res)=>{
-                this.$refs['sensor-warning-statistics'].loadData(res.data)
-            })
-        },
-        mqttResponse(topic,message){
-            if(!message.includes('{')){
-                return
-            }
-            let data=message?JSON.parse(Uint8ArrayToString(message)):''
-            this.$nextTick(()=>{
-                if(topic.includes("topic/goaf/waring/person")){
-                    goafhdangerstatis({
-                        hdangerType:0
-                    }).then((res)=>{
-                        this.$refs['warning-statistics'].loadData(res.data)
-                    })  
-                    this.$refs['check-warn-report'].load()   
-                }else if(topic.includes("topic/goaf/waring/sensor")){
-                    goafhdangerstatis({
-                        hdangerType:1
-                    }).then((res)=>{
-                        this.$refs['sensor-warning-statistics'].loadData(res.data)
-                    }) 
-                    this.$refs['sensor-warning-info'].load()     
-                }else if(topic.includes("topic/goaf/fill/scale")){
-                    // console.log('填充信息改变',{data})
-                    this.$refs.map.updateMapLayers(data.mapId)
-                }else if(topic.includes("topic/goaf/waring/camera")){
-                        /**更新chart */
-                    this.$refs['sensor-info-statistics']?.warn(data);
-                }
-                
-                
-                if(data.topictype==='add'){
-                    this.$refs.map.updateLayerState(data.layerId)
-                }else if(data.topictype==="completed"){
-                    this.$refs.map.updateLayerState(data.layerId,-1)
-                }
-            })
-
-        },
+        }
     }
  }
 </script>
@@ -162,19 +71,42 @@ import {
     display: flex;
     justify-content: space-between;
     .side-left,.side-right{
-        width: 26.66%;
+        width: calc(100% - 550px);
+        max-width: 60%;
         height: 100%;
-        background-image: url(./images/home/leftbg.png);
-        background-size: 100% 100%;
-        background-repeat: no-repeat;  
         display: flex;
         justify-content: space-between;   
         flex-direction: column;
+        flex-wrap: wrap;
+        &.side-right{
+            width: 500px;
+            max-width: 39%;
+        }
         .item{
             &{
-                padding: 12px 12px 0 12px;
+                padding:10px 14px;
                 box-sizing: border-box;
+                border: 6px solid transparent;
+                height: 50%;
+                background-size: 100% 100%;
+                background-image: url(./images/home/leftbg.png);
+                background-repeat: no-repeat;  
+                display: flex;
+                flex-direction: column;
             }
+            &.camera{
+                width: 648px;
+                .container{
+                    height: 510px;
+                }
+            }   
+            &.carPlateInfo{
+                height: 100%;
+                overflow-y: auto;
+                .container{
+                    flex: 1;
+                }
+            }         
             .title{
                 height: 32px;
                 background-image: url(./images/home/title.png);
@@ -201,185 +133,7 @@ import {
                 background-image: url(./images/home/content.png);
                 background-size: 100% 100%;
                 background-repeat: no-repeat;   
-            }
-            &.warning-statistics{
-                .container{
-                    display: flex;
-                    justify-content: space-between;
-                    height: 210px;
-                    .lf{
-                        border-bottom:1px solid  rgba(2, 207, 244, 0.48);
-                        flex: 1;
-                        color: #fff;
-                        .head{
-                            display: flex;
-                            justify-content: center;
-                            height: 50%;
-                            .head-item{
-                                width: 25%;
-                                display: flex;
-                                justify-content: center;
-                                align-items: center;
-                                flex-direction: column;
-                                background-size: 100% 100%;
-                                background-repeat: no-repeat;
-                                &:nth-child(1){
-                                    background-color: #381F23;
-                                    background-image: url("./images/hdanger/level_1.png");
-                                }
-                                &:nth-child(2){
-                                    background-color: #382B1F;
-                                    background-image: url("./images/hdanger/level_2.png");
-                                }
-                                &:nth-child(3){
-                                    background: #283123; 
-                                    background-image: url("./images/hdanger/level_3.png");
-                                }
-                                &:nth-child(4){
-                                    background: #172841;
-                                    background-image: url("./images/hdanger/level_4.png");
-                                }                             
-                            }
-                        }
-                        .status{
-                            display: flex;
-                            justify-content: center;
-                            height: 50%;
-                            .status-item{
-                                width: 25%;
-                                display: flex;
-                                justify-content: center;
-                                flex-direction: column;  
-                                box-sizing: border-box;                              
-                                .name{
-                                    background: #7cc20d;
-                                    width: 100%;
-                                    text-align: center;
-                                    padding: 3px 0;
-                                } 
-                                &:nth-child(1){
-                                    .name{
-                                        background: #409eff;
-                                    }
-                                }                               
-                                &:nth-child(2){
-                                    .name{
-                                        background: #F4C000;
-                                    }
-                                }
-                                &:nth-child(3){
-                                    .name{
-                                        background: #b9d616;;
-                                    }
-                                } 
-                                .number{
-                                    display: flex;
-                                    justify-content: center;
-                                    align-items: center;
-                                    flex: 1;
-                                    border-left:1px solid  rgba(2, 207, 244, 0.48);
-                                }
-                            }
-                        }
-                    }
-                    .chart-cont{
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        flex-direction:column;
-                        border:1px solid  rgba(2, 207, 244, 0.48);
-                        padding: 0 23px;
-                    }                    
-                }
-            }
-            /**汇报 */
-            &.report{
-                .container{
-                    height: 27vh;
-                    overflow: hidden;
-                    .title{
-                        height: 40px;
-                    }
-                    .report-title{
-                        color: #2AFFFF;
-                    }                    
-                    table{
-                        width: 100%;
-                        border: 0;
-                        border-spacing: 0;
-                        tr{
-                            td{
-                                padding: 0 8px;
-                                height: 40px;
-                                font-size: 14px;
-                                white-space: nowrap;  
-                                text-overflow:ellipsis; 
-                                overflow:hidden;
-                                cursor: pointer;
-                                box-sizing: border-box;
-                                border: 0;
-                            }
-                        }
-                        .report-item{
-                            color: #fff;
-                            &:nth-child(2n){
-                                background: rgba(255, 255, 255, 0.06)
-                            }
-                        }  
-                    }
-                  
-                }
-            }
-            &.report-task{
-                    overflow: hidden;
-                        .container{
-                            height: 27vh;
-                            overflow: hidden;
-                            padding: 0 20px;
-                            .report-item{
-                                margin-bottom: 28px;
-                                .name{
-                                    color: #fff;
-                                }
-                                .footer{
-                                    display: flex;
-                                    justify-content: space-between;
-                                    align-items: center;
-                                    font-size: 14px;
-                                    padding-top: 14px;
-                                    .status{
-                                        width: 64px;
-                                        height: 28px;
-                                        text-align: center;
-                                        line-height: 28px;
-                                        border: 1px solid #44d7b6;
-                                        color: #44d7b6;
-                                        border-radius: 43px;
-                                        &.fail{
-                                            border-color: rgba(235, 74, 46, 1);
-                                            color: rgba(235, 74, 46, 1);
-                                        }
-                                    }
-                                    .user{
-                                        color: rgba(42, 255, 255, 1);
-                                    }
-                                }
-                        }
-                    }
-                }            
-        }
-    }
-    .main{
-        width: 46.68%;
-        height: 100%;
-        flex:1;
-        padding: 0 14px;
-        #map{
-            width: 100%;
-            height: 100%;
-            // background-image: url(./images/home/map.png);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
+            }          
         }
     }
 }

src/views/particulars/check.vue

@@ -1,567 +0,0 @@
-<template>
-    <div class="check-page">
-        <header></header>
-        <div class="tab">
-            <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">
-                <div class="search-container">
-                    <div class="top">
-                        <div class="search-item">
-                            <el-input v-model="conditions.taskTitle"  class="input" placeholder="请输入任务名称" />
-                        </div>
-                        <!-- <div class="search-item">
-                            <span>是否异常：</span>
-                            <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>                            
-                        </div> -->
-                        <div class="search-item">
-                            <span>状态：</span>
-                            <el-select v-model="conditions.status" class="select" placeholder="全部" clearable>
-                                <el-option
-                                v-for="item in status_options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                                placeholder="状态"
-                                />
-                            </el-select>                            
-                        </div>
-                        <div class="search-item">
-                            <span>开始时间：</span>
-                            <el-date-picker
-                                v-model="conditions.expectedStartDate"
-                                type="datetime"
-                                placeholder="请选择巡检时间"
-                                format="YYYY-MM-DD HH:mm:ss"
-                                value-format="YYYY-MM-DD HH:mm:ss"
-                                style="width:200px;margin-right: 14px;"
-                            />  
-                        </div>     
-                        <div class="search-item">
-                            <span>结束时间：</span>
-                            <el-date-picker
-                                v-model="conditions.expectedEndDate"
-                                type="datetime"
-                                placeholder="请选择巡检时间"
-                                style="width:200px;margin-right: 14px;"
-                                format="YYYY-MM-DD HH:mm:ss"
-                                value-format="YYYY-MM-DD HH:mm:ss"
-                            />  
-                        </div>          
-                    </div>
-                    <div class="bt-group">
-                        <div class="bt search" @click="searchSubmit">查询</div>
-                        <div class="bt" @click="resetSubmit">重置</div>                    
-                    </div>
-                </div>
-                <div class="lf-container"> 
-                    <table>
-                        <tr>
-                            <td>任务名称</td>
-                            <td>状态</td>
-                            <td>执行人员</td>
-                            <td>截止时间</td>
-                        </tr>
-                        <tr v-for="(item,index) in dataList" :key="index">
-                            <td>{{ item.taskTitle }}</td>
-                            <td>{{ formateStatus(item.status) }}</td>
-                            <td>{{ item.handleAccountName }}</td>
-                            <td>{{ item.expectedEndDate }}</td>
-                        </tr>
-                    </table>
-                    <div class="el-pagination-wrap">
-                        <el-pagination small layout="prev, pager, next" 
-                        :total="total"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange" />
-                     </div>                                   
-                </div>
-            </div>
-            <div class="rt">
-                <div class="head">
-                    <div class="name">巡检数据统计</div>
-                    <div class="number">123</div>
-                </div>
-                <div class="head-info">
-                    <div class="item total">
-                        <div class="name">总数</div>
-                        <div class="number">{{statistics.total}}</div>                    
-                    </div>
-                    <div class="item normal">                        
-                        <div class="name">正常</div>
-                        <div class="number">{{statistics.normal}}</div>                    
-                    </div>
-                    <div class="item error">
-                        <div class="name">异常</div>
-                        <div class="number">{{statistics.error}}</div>                    
-                    </div>
-                </div>
-                <div class="chart-wrap">
-                    <div class="title">异常分析</div>
-                    <abnormal ref="abnormal" />
-                </div>
-                <div class="chart-wrap">
-                    <div class="title">异常处理情况</div>
-                    <warn-chart ref="warn-chart" />
-                </div>                
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import Abnormal  from './components/Abnormal.vue'
-import WarnChart from './components/WarnChart.vue'
-import { getCheckTaskByPage } from '@/api/goaf/task'
-import {  getGoafBaseInfo } from '@/api/goaf/info'
-import {goaftaskstatis} from '@/api/goaf/check'
-
-import {getTime} from '@/utils'
- export default {
-    name:"check",
-    components:{
-        Abnormal,
-        WarnChart
-    },
-    data(){
-        return{
-            activeId:'1',
-            activetab:'1',
-            goafList: [],
-            goafOrebelts: [],
-            goafOrebodys: [],
-            goafOreheights: [],
-            goafNames: [],
-            conditions: {
-                page: 1,
-                limit: 10,
-                status:0,
-                taskTitle:"",
-                expectedStartDate:getTime(),
-                expectedEndDate:getTime(1),
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:""
-            },   
-            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"},
-            ],
-            status_options:[
-                {label:"待处理",value:0},
-                {label:"处理完成",value:1},
-                {label:"逾期",value:2},
-            ] ,
-            options1:[
-                {label:'是',value:1},
-                {label:'否',value:0},
-            ],
-            dataList:[],
-            total:0 ,
-            statistics:{
-                total:0,
-                normal:0,
-                error:0
-            }               
-        }
-    },
-    created(){
-        this.init()
-    },
-    methods:{
-        formateStatus(val){
-            let status=['待处理','处理完成','已逾期']
-            return status[val]
-        },
-        init(){
-            this.$nextTick(()=>{
-                this.$refs['abnormal'].init();
-                this.$refs['warn-chart'].init();
-                this.getData()
-            })
-            this.getGoafBaseInfo()
-            this.goaftaskstatis()
-        },
-        getGoafBaseInfo(){
-            getGoafBaseInfo().then((res) => {
-                const goafOrebelts = res.data.map(item => item.goafOrebelt)
-                this.goafOrebelts = [...new Set(goafOrebelts)]
-                this.goafList = res.data
-            })  
-        },
-        goaftaskstatis(){
-            goaftaskstatis().then((res)=>{
-                this.statistics={
-                    total:res.data.goafTaskCompletedNum,
-                    normal:res.data.goafTaskPassNum,
-                    error:res.data.goafTaskNopassdNum
-                }  
-            })
-        },
-        changeHead(item){
-            this.activeId=item.id
-        },
-        changeTab(item){
-            this.activetab=item.id
-        },
-        searchSubmit(){
-            this.getData()
-        },
-        getData(){
-            for(let key in this.conditions){
-                if(this.conditions[key]===undefined||this.conditions[key]===''||this.conditions[key]==='undefined'){
-                    delete this.conditions[key]
-                }
-            }
-            getCheckTaskByPage(this.conditions).then((resp) => {
-                this.listLoading = false
-                const {data, total } = resp
-                this.dataList = data
-                this.total = total
-            })
-        },
-        resetSubmit(){
-            this.conditions={
-                page: 1,
-                limit: 10,
-                status:0,
-                taskTitle:"",
-                expectedStartDate:getTime(),
-                expectedEndDate:getTime(1),
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:""      
-            }
-            this.goafOrebodys=[]
-            this.goafOreheights=[]
-            this.goafNames=[]  
-            this.getData()
-        },
-        handleSizeChange(limit){
-            this.conditions.limit=limit
-            this.getData()
-        },
-        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)
-                goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
-                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))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
-                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()
-        },  
-        unique(arr = [], name = 'name') {
-            const res = new Map()
-            return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
-        },         
-        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;
-    }
-    .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;
-                .top{
-                    display: flex;
-                    flex-wrap: wrap;
-                    .search-item{
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        margin-top: 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;
-                    }
-                } 
-                .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;    
-                    display: inline-block;          
-                    &.search{
-                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
-                        margin:14px 10px 0 0;
-                    }
-                }       
-            }
-            .lf-container{
-                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;
-                    ::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/Abnormal.vue

@@ -1,126 +0,0 @@
-<template>
-    <div id="alert-chart" v-if="status"></div> 
-</template>
-    <script>
-     import * as echarts from 'echarts';
-      export default {
-        name:"Abnormal",
-        data(){
-            return{
-                myChart:null,
-                status:true,
-                option :{
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow'
-                        }
-                    },
-                    color:['#E85454','#E58C55','#F3F376','#6A6AFF'], 
-                    legend: {
-                        icon:'rect',
-                        itemWidth:10,
-                        itemHeight:10,
-                        textStyle:{
-                            color:'#fff',
-                            fontSize:10
-                        }
-                    },
-                    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:"#E85454",
-                                width:2
-                            },
-                            showSymbol: false,
-                            data: [2,5, 0, 10, 20, 30,70, 50, 40, 50, 80,20]
-                        },                        
-                        {
-                            name: '较大',
-                            type: 'line',
-                            lineStyle:{
-                                color:"#E58C55",
-                                width:2
-                            },
-                            showSymbol: false,
-                            data: [10,20, 30, 40, 50, 80,20, 30, 40, 50, 80,20]
-                        },
-                        {
-                            name: '一般',
-                            type: 'line',
-                            lineStyle:{
-                                color:"#F3F376",
-                                width:2
-                            },
-                            showSymbol: false,                        
-                            data: [20,30, 40, 50, 60, 70, 40, 50, 60, 70, 40, 50]
-                        },
-                        {
-                            name: '较低',
-                            type: 'line',
-                            lineStyle:{
-                                color: "#6A6AFF",
-                                width:2
-                            },
-                            showSymbol: false,
-                            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/AlertChart.vue

@@ -1,117 +0,0 @@
-<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'
-                        }
-                    },
-                    showSymbol: false,
-                    color:['rgba(24, 144, 255, 1)','#41E4BB','#D7C254'], 
-                    legend: {
-                        icon:'rect',
-                        itemWidth:10,
-                        itemHeight:10,
-                        textStyle:{
-                            color:'#fff',
-                            fontSize:10
-                        }
-                    },
-                    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
-                            },
-                            showSymbol: false,
-                            data: [10,20, 30, 40, 50, 80,20, 30, 40, 50, 80,20]
-                        },
-                        {
-                            name: '位移',
-                            type: 'line',
-                            lineStyle:{
-                                color:"#41E4BB",
-                                width:2
-                            },
-                            showSymbol: false,                         
-                            data: [20,30, 40, 50, 60, 70, 40, 50, 60, 70, 40, 50]
-                        },
-                        {
-                            name: '有害气体',
-                            type: 'line',
-                            lineStyle:{
-                                color:"#D7C254",
-                                width:2
-                            },
-                            showSymbol: false,
-                            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

@@ -1,134 +0,0 @@
-<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'
-                        }
-                    },
-                    color:['#0075ff','rgba(253, 175, 25, 1)'], 
-                    legend: {
-                        icon:'rect',
-                        itemWidth:10,
-                        itemHeight:10,
-                        textStyle:{
-                            color:'#fff',
-                            fontSize:10
-                        }
-                    },
-                    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/goaf_info.vue

@@ -1,356 +0,0 @@
-<template>
-    <div class="check-page">
-        <header></header>
-        <div class="tab">
-            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px" clearable>
-                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
-            </el-select>
-            <el-select v-model="conditions.goafOrebody" placeholder="矿体"  @change="changeArea(2)" style="width:120px;margin:0 12px;">
-                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
-            </el-select>
-            <el-select v-model="conditions.goafOreheight" placeholder="中段"  @change="changeArea(3)" style="width:120px">
-                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
-            </el-select> 
-        </div>
-        <div class="container">
-            <div class="lf">
-                <div class="search-container">
-                    <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>
-                <div class="lf-container"> 
-                    <table>
-                        <tr>
-                            <td>矿带</td>
-                            <td>矿体</td>
-                            <td>中段</td>
-                            <td>采空编号</td>
-                            <td>顶板矿柱厚度(m)</td>
-                            <td>保安间柱平均厚度(m)</td>
-                            <td>勘探位置</td>
-                            <td>围岩岩性</td>
-                            <td>围岩稳定性</td>
-                            <td>可填充体积</td>
-                            <td>剩余可填充体积</td>
-                            <td>是否填充</td>
-                            <td>形成时间</td>
-                        </tr>
-                        <tr v-for="(item,index) in dataList" :key="index">
-                            <td >{{NumConvertLM(item.goafOrebelt)}}</td>
-                            <td >{{item.goafOrebody}}</td>
-                            <td>{{item.goafOreheight}}</td>
-                            <td>{{item.goafName}}</td>
-                            <td>{{item.goafRoofpillarThickness}}</td>
-                            <td>{{item.goafIncoavThickness}}</td>
-                            <td>{{item.goafExpLocation}}</td>
-                            <td>{{item.goafRockLithology}}</td>
-                            <td>{{item.goafRockStability}}</td>
-                            <td>{{item.goafCanfillVolume}}</td>
-                            <td>{{item.goafRemainVolume}}</td>
-                            <td>{{item.goafIsFill===0?'是':'否'}}</td>
-                            <td>{{parseTime(item.goafFormationTime,'{y}:{m}:{d}')}}</td>
-                        </tr>
-                    </table>
-                    <div class="el-pagination-wrap">
-                        <el-pagination small layout="prev, pager, next" 
-                        :total="total"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange" />
-                     </div>                                   
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import AlertChart from './components/AlertChart.vue'
-import WarnChart from './components/WarnChart.vue'
-import { getGoafBaseInfoByPage,getGoafBaseInfo } from '@/api/goaf/info'
-import { NumConvertLM ,parseTime} from '@/utils'
- export default {
-    name:"goaf_info",
-    components:{
-        AlertChart,
-        WarnChart
-    },
-    data(){
-        return{
-            activeId:'1',
-            activetab:'1',
-            goafList: [],
-            goafOrebelts: [],
-            goafOrebodys: [],
-            goafOreheights: [],
-            goafNames: [],
-            conditions: {
-                page: 1,
-                limit: 10,
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:""
-            },           
-            dataList:[],
-            total:0                 
-        }
-    },
-    created(){
-        this.init()
-    },
-    methods:{
-        NumConvertLM,
-        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
-                this.dataList = data
-                this.total = total
-            })
-        },        
-        changeHead(item){
-            this.activeId=item.id
-        },
-        changeTab(item){
-            this.activetab=item.id
-        },
-        resetSubmit(){
-            this.conditions={
-                page: 1,
-                limit: 10,
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:""   
-            }
-            this.goafOrebodys=[]
-            this.goafOreheights=[]
-            this.goafNames=[]  
-            this.getData()
-        },
-        handleSizeChange(limit){
-            this.conditions.limit=limit
-            this.getData()
-        },
-        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)
-                goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
-                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))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
-                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()
-        },  
-        unique(arr = [], name = 'name') {
-            const res = new Map()
-            return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
-        },        
-        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;
-        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;
-                .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: 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);
-                        overflow: hidden; 
-                        white-space: nowrap; 
-                        text-overflow: ellipsis;
-                    }
-                }
-                .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/sensor.vue

@@ -1,598 +0,0 @@
-<template>
-    <div class="sensor-page">
-        <header>
-            <div :class="activeId===item.id?'active item':'item'" v-for="item in items" :key="item.id" @click="changeHead(item)">{{ item.name }}</div>  
-        </header>
-        <div class="tab">
-            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px" clearable>
-                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
-            </el-select>
-            <el-select v-model="conditions.goafOrebody" placeholder="矿体"  @change="changeArea(2)" style="width:120px;margin:0 12px;">
-                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
-            </el-select>
-            <el-select v-model="conditions.goafOreheight" placeholder="中段"  @change="changeArea(3)" style="width:120px">
-                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
-            </el-select>
-            <el-select v-model="conditions.goafId" placeholder="采空区编号"  @change="changeArea(4)" style="width:210px;margin:0 12px;">
-                <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafId" :label="item.goafName" />
-            </el-select>            
-        </div>
-        <div class="container">
-            <div class="lf">
-                <div class="search-container">
-                    <div class="search-item">
-                        <el-input v-model="conditions.goafDevName"  class="input" placeholder="请输入设备编号" />
-                    </div>
-                    <div class="search-item">
-                        <span>预警等级：</span>
-                        <el-select v-model="conditions.hdangerLevel" placeholder="全部" style="width:120px;margin-right:14px;" clearable>
-                            <el-option
-                            v-for="item in hdangerLevels"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value" 
-                            />
-                        </el-select>                    
-                    </div>
-                    <!-- <div class="search-item">
-                        <span>状态：</span>
-                        <el-select v-model="conditions.status" class="select" placeholder="全部">
-                            <el-option
-                            v-for="item in options"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                            />
-                        </el-select>                    
-                    </div> -->
-                    <div class="search-item">
-                            <!-- <span>预警开始时间：</span> -->
-                            <el-date-picker
-                                v-model="conditions.expectedStartDate"
-                                type="datetime"
-                                placeholder="预警开始时间"
-                                format="YYYY-MM-DD HH:mm:ss"
-                                value-format="YYYY-MM-DD HH:mm:ss"
-                                style="width:200px;margin-right: 14px;"
-                            />  
-                        </div>     
-                        <div class="search-item">
-                            <!-- <span>预警结束时间：</span> -->
-                            <el-date-picker
-                                v-model="conditions.expectedEndDate"
-                                type="datetime"
-                                placeholder="预警结束时间"
-                                style="width:200px;margin-right: 14px;"
-                                format="YYYY-MM-DD HH:mm:ss"
-                                value-format="YYYY-MM-DD HH:mm:ss"
-                            />  
-                        </div>   
-                    <!-- <div class="search-item">
-                        <span>数值范围：</span>
-                        <el-input-number v-model="conditions.start" :max="conditions.end" class="input" placeholder="开始" :controls="false" style="width:100px;" />  
-                        <span>-</span>  
-                        <el-input-number v-model="conditions.end" :min="conditions.start" placeholder="结束" :controls="false" style="width:100px;margin:0 10px;" />                     
-                    </div> -->
-                    <div class="bt search" @click="searchSubmit">查询</div>
-                    <div class="bt" @click="resetSubmit">重置</div>    
-                </div>
-                <div class="lf-container">
-                    <div class="card-container">
-                        <div class="card" v-for="(item,index) in dataList" :key="index">
-                            <div class="title">{{item.goafDevTypename}}</div>
-                            <div class="info">
-                                <p>设备编号：{{item.goafDevName}}</p>
-                                <p>安装区域：{{ NumConvertLM(item.goafOrebelt) }}/{{ item.goafOrebody }}/{{ item.goafOreheight }}/{{ item.goafName }}</p>
-                                <p>安装位置：{{ item.goafDevLocation }}</p>
-                                <p>阈值：{{item.goafAlarmThreshold}}</p>
-                                <p>上报数据值：{{item.goafSensorValue}}</p>
-                            </div>
-                            <footer :class="'status-'+item.hdangerLevel">{{hdangerLevel(item.hdangerLevel)}}</footer>
-                        </div>
-                    </div> 
-                    <div class="el-pagination-wrap">
-                        <el-pagination small layout="prev, pager, next" 
-                        :total="total"
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange" />
-                     </div>                                   
-                </div>
-            </div>
-            <div class="rt">
-                <div class="head">
-                    <div class="name">传感器数据统计</div>
-                    <div class="number">{{statistics.total}}</div>
-                </div>
-                <div class="head-info">
-                    <div class="item total">
-                        <div class="name">总数</div>
-                        <div class="number">{{statistics.total}}</div>                    
-                    </div>
-                    <div class="item normal">                        
-                        <div class="name">正常</div>
-                        <div class="number">{{statistics.normal}}</div>                    
-                    </div>
-                    <div class="item error">
-                        <div class="name">异常</div>
-                        <div class="number">{{statistics.error}}</div>                    
-                    </div>
-                </div>
-                <div class="chart-wrap">
-                    <div class="title">报警统计</div>
-                    <alert-chart ref="alert-chart" />
-                </div>
-                <div class="chart-wrap">
-                    <div class="title">预警处理情况</div>
-                    <warn-chart ref="warn-chart" />
-                </div>                
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import AlertChart from './components/AlertChart.vue'
-import WarnChart from './components/WarnChart.vue'
-import { getSensorByPage,sensordatatatis } from '@/api/goaf/sensor'
-import {  getGoafBaseInfo } from '@/api/goaf/info'
-import { NumConvertLM ,getTime} from '@/utils'
- export default {
-    name:"sensor",
-    components:{
-        AlertChart,
-        WarnChart
-    },
-    data(){
-        return{
-            activeId:'1',
-            activetab:'1',
-            conditions: {
-                page: 1,
-                limit: 8,
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:"",
-                hdangerLevel:"",
-                goafDevTypename:"",
-                expectedStartDate:getTime(),
-                expectedEndDate:getTime(1),
-                // start:0,
-                // end:0
-            }, 
-            goafList: [],
-            goafOrebelts: [],
-            goafOrebodys: [],
-            goafOreheights: [],
-            goafNames: [],
-            items:[
-                {name:"首页",id:"1",path:"/particulars/sensor"},
-                {name:"压力传感器",id:"2",path:"/particulars/check"},
-                {name:"位移传感器",id:"3",path:"/particulars/goaf-info"},
-                {name:"有害气体传感器",id:"4",path:"/particulars/goaf-info"},
-                {name:"视频监控",id:"5",path:"/particulars/goaf-info"},
-            ],
-            options:[
-                {label:1,value:2},
-                {label:2,value:3},
-                {label:3,value:4}
-            ] ,
-            hdangerLevels:[
-                {label:"异常",value:0},
-                {label:"威胁",value:1},
-                {label:"危险",value:2},
-                {label:"危急",value:3}
-            ],   
-            dataList:[],
-            total:0 ,
-            statistics:{
-                total:0,
-                normal:0,
-                error:0
-            }                 
-        }
-    },
-    created(){
-        this.init()
-    },
-    methods:{
-        NumConvertLM,
-        hdangerLevel(val){
-            let status=["异常","威胁","危险","危急"]
-            return status[val]||'正常'
-        },
-        init(){
-            this.$nextTick(()=>{
-                this.$refs['alert-chart'].init();
-                this.$refs['warn-chart'].init();
-            })
-            this.getData()
-            getGoafBaseInfo().then((res) => {
-                const goafOrebelts = res.data.map(item => item.goafOrebelt)
-                this.goafOrebelts = [...new Set(goafOrebelts)]
-                this.goafList = res.data
-            })   
-            this.sensordatatatis()         
-        },
-        sensordatatatis(){
-            sensordatatatis().then((res)=>{
-                let error=res.data.pressureAlarmNum+res.data.displacementAlarmNum+res.data.harmfulGasAlarmNum
-                let normal=res.data.sensorDataTotalNum-error
-                this.statistics={
-                    total:res.data.sensorDataTotalNum,
-                    normal,
-                    error
-                }
-            })
-        },
-        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
-                let tab=this.items.filter(item=>this.activeId===item.id)[0]
-                this.dataList = this.activeId==='1'?data:data.filter(item=>item.goafDevTypename===tab.name)
-                this.total = total
-            })
-        },
-        changeHead(item){
-            this.activeId=item.id
-            if(item.id==='5'){
-                this.$router.push('/particulars/particulars-video')
-            }else{
-                this.init()
-            }
-        },
-        searchSubmit(){
-            this.getData()
-        },
-        resetSubmit(){
-            this.conditions={
-                page: 1,
-                limit: 8,
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:"",
-                hdangerLevel:"",
-                goafDevTypename:"",
-                expectedStartDate:getTime(),
-                expectedEndDate:getTime(1),
-                // start:0,
-                // end:0           
-            }
-            this.goafOrebodys=[]
-            this.goafOreheights=[]
-            this.goafNames=[]  
-            this.getData()
-        },
-        handleSizeChange(limit){
-            this.conditions.limit=limit
-            this.getData()
-        },
-        handleCurrentChange(pageNumber){
-            this.conditions.page=pageNumber
-        },
-        changeArea(type) {
-            const goafs = this.deeepClone(this.goafList)
-            let goafOrebodys = this.deeepClone(this.goafOrebodys)
-            let goafOreheights = this.deeepClone(this.goafOreheights)
-            let goafNames = this.deeepClone(this.goafNames)
-            if (type === 1) {
-                goafOrebodys = goafs.filter(item => item.goafOrebelt === this.conditions.goafOrebelt)
-                goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
-                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))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
-                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()
-        },  
-        unique(arr = [], name = 'name') {
-            const res = new Map()
-            return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
-        },             
-        deeepClone(params) {
-            return JSON.parse(JSON.stringify(params))
-        }  
-    }
- }
-</script>
-<style lang="scss" scoped>
-.sensor-page{
-    .search-item{
-        display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-bottom: 14px;
-            span{
-                font-family: 'Ping Hei';
-                font-size: 14px;
-                line-height: 1;
-                color: rgba(255, 255, 255, 0.7);
-            }
-        }
-        .input,.select,.el-date-editor{
-            width: 180px;
-            margin-right:16px;
-            color: #fff;
-        }
-        ::v-deep{
-            .el-input__wrapper{
-                background-color:  rgba(8, 128, 255, 0.2);
-                border: 0;
-                box-shadow: none;               
-            }
-            .el-input__inner{
-                color: #fff;
-            }
-    }    
-    header{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-top: 0.5vh;
-        .item{
-            width: 188px;
-            height: 36px;
-            line-height: 36px;
-            text-align: center;
-            background-image: url(@/assets/sensor/head.png);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            margin-right: 12px;
-            max-width: 20%;
-            color: #7FCFF4;
-            cursor: pointer;
-            &.active{
-                background-image: url(@/assets/sensor/head_active.png); 
-                color: #2AFFFF;
-            }
-        }
-    }
-    .tab{
-        padding-top: 1.5vh;
-        .item{
-            display: inline-block;
-            padding: 5px 10px;
-            color: #fff;
-            font-size: 16px;
-            background: #003B7A;
-            border: 1px solid #004EA2;
-            letter-spacing: 0.6px;
-            margin-right: 24px;
-            border-radius: 4px 15px 8px 4px;
-            cursor: pointer;
-            &.active{
-                background: #0083CF;
-                border: 1px solid #0097DD;
-            }
-        }
-    }
-    .container{
-        display: flex;
-        .lf{
-            width: 60%;
-            padding-left: 100px;
-            .search-container{
-                padding:4.4vh 0 5vh 0;
-                box-sizing: border-box;
-                display: flex;
-                flex-wrap: wrap; 
-                .bt{
-                    width: 100px;
-                    height: 36px;
-                    line-height: 36px;
-                    text-align: center;
-                    color: #fff;
-                    font-size: 14px;
-                    background: rgba(8, 128, 255, 0.2);
-                    border-radius: 4px;  
-                    margin-top: 14px;    
-                    cursor: pointer;   
-                    margin-top: 0;           
-                    &.search{
-                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
-                        margin:0 10px 0 0;
-                    }
-                }       
-            }
-            .lf-container{
-                .card-container{
-                    display: flex;
-                    justify-content: flex-start;
-                    flex-wrap: wrap;
-                    padding-left: 50px;
-                    .card{
-                        width: 22%;
-                        height: 25vh;
-                        background: rgba(35, 229, 254, 0.06);
-                        border: 1px solid #115C7C;
-                        margin:0 4% 10px 0;
-                        box-sizing: border-box;
-                        overflow: hidden;
-                        padding: 14px;
-                        color: #fff;
-                        position: relative;
-                        &:nth-child(4n){
-                            margin-right: 0;
-                        }
-                        .title{
-                            font-size: 18px;
-                            font-weight: bold;
-                            padding-bottom: 12px;
-                            text-align: center;
-                        }
-                        .info{
-                            font-size: 14px;
-                            p{
-                                line-height: 22px;
-                                word-break: break-all;
-                            }
-                        }
-                        footer{
-                            width: 100%;
-                            height: 36px;
-                            line-height: 36px;
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            text-align: center;
-                            background: #0C6ECF;
-                            &.status-1{
-                                background: #DCBA3D;
-                            }
-                            &.status-2{
-                                background: #EC6B1D;
-                            }
-                            &.status-3{
-                                background: #F33737;
-                            }
-                        }
-                    }
-                } 
-                .el-pagination-wrap{
-                    float: right;
-                    margin-top: 5vh;
-                    ::v-deep{
-                        .el-pager li,button{
-                            background-color: #00539F;
-                            margin-left: 10px;
-                            color: rgba(255, 255, 255, 0.75);
-                            &.is-active{
-                                background-color: rgba(0, 131, 207, 1);
-                            }
-                        }
-                    }
-                }
-            }         
-        }
-        .rt{
-            flex: 1;
-            padding-left: 5%;
-            box-sizing: border-box;
-            .head{
-                height: 32px;
-                background-image: url(@/views/home/images/home/title.png);
-                background-size: 100% 100%;
-                background-repeat: no-repeat;   
-                color: #2affff;
-                font-size: 20px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                text-indent: 24px;
-                padding: 0 14px;
-                font-family: "YouSheBiaoTiHei";
-                letter-spacing: 1px;
-                margin-top: 4.8vh;
-            }
-            .head-info{
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                padding-top: 20px;
-                .item{
-                    width: 33.33%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;  
-                    flex-direction: column;
-                    color: #fff;
-                    font-size: 12px;
-                    &.total{
-                        display: block;
-                        font-weight: bold;
-                        text-align: left;
-                        .name{
-                            font-size: 14px;
-                            line-height: 20px;
-                        }
-                        .number{
-                            font-size: 20px;
-                            line-height: 38px;
-                            font-weight: 700;
-                            background: rgba(108, 128, 151, 0.1)
-                        }
-                    }  
-                    &.normal{
-                        border-left:1px solid rgba(255, 255, 255, 0.12);
-                        border-right:1px solid rgba(255, 255, 255, 0.12);
-                        margin: 0 2%;
-                        height: 100%;
-                        .number{
-                            font-size: 20px;
-                            line-height: 28px;
-                            color: #3CD495;
-                            font-weight: 500;
-                        }                        
-                    }  
-                    &.error{
-                        .number{
-                            font-size: 20px;
-                            line-height: 28px;
-                            color: #D4603C;
-                            font-weight: 500;
-                        }                        
-                    }                 
-                }
-            }
-            .chart-wrap{
-                padding-top: 0.8vh;
-                .title{
-                    color: #fff;
-                    font-size: 18px;
-                    line-height: 20px;
-                    padding: 10px;
-                    position: relative;
-                    font-family: "YouSheBiaoTiHei";
-                    letter-spacing: 1px;
-                    margin-bottom: 2vh;
-                    &::after{
-                        display: block;
-                        content: "";
-                        width: 100%;
-                        height: 3px;
-                        position: absolute;
-                        bottom: 0;
-                        left: 0;
-                        background-image: url('./images/line.png');
-                        background-repeat: no-repeat;
-                        background-size: 100% 100%;
-                    }
-                }
-            }
-        }
-    }
-}
-
-</style>

src/views/particulars/video.vue

@@ -1,414 +0,0 @@
-<template>
-    <div class="video-page">
-        <header></header>
-        <div class="tab">
-            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px" clearable>
-                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
-            </el-select>
-            <el-select v-model="conditions.goafOrebody" placeholder="矿体"  @change="changeArea(2)" style="width:120px;margin:0 12px;">
-                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
-            </el-select>
-            <el-select v-model="conditions.goafOreheight" placeholder="中段"  @change="changeArea(3)" style="width:120px">
-                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
-            </el-select>   
-        </div>
-        <div class="container">
-            <div class="lf">
-                <div class="search-container">
-                    <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="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 dataList" :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>{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</p>
-                        </div>
-                    </div>
-                    <div class="el-pagination-wrap">
-                        <el-pagination small layout="prev, pager, next" :total="total" />
-                     </div>                                   
-                </div>
-            </div>
-        </div>
-        <div class="video-dialog" v-if="videoDialogVisible">
-            <div class="video-dialog-container">
-                <div class="header">
-                    <div class="name">{{ video.name }}</div>
-                    <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
-                </div>
-                <HkwsVideo ref="HkwsVideo"></HkwsVideo>
-            </div>
-        </div>    
-    </div>
-</template>
-<script>
-import HkwsVideo from '@/components/HkwsVideo/iframe'
-import {  getGoafBaseInfo } from '@/api/goaf/info'
-import { getSensor } from '@/api/goaf/sensor'
-import { NumConvertLM } from '@/utils'
- export default {
-    name:"particulars_video",
-    components:{
-        HkwsVideo
-    },
-    data(){
-        return{
-            activeId:'1',
-            activetab:'1',
-            video:{
-                src:"",
-                name:""
-            },
-            videoDialogVisible:false,
-            tabs:[
-                {name:"Ⅲ号",id:"1"},
-                {name:"770",id:"2"},
-                {name:"32001",id:"3"},
-            ],
-            conditions: {
-                page: 1,
-                limit: 10,
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:""
-            }, 
-            goafList: [],
-            goafOrebelts: [],
-            goafOrebodys: [],
-            goafOreheights: [],
-            goafNames: [],  
-            dataList:[]                
-        }
-    },
-    created(){
-        this.init()
-    },
-    methods:{
-        NumConvertLM,
-        init(){
-            getGoafBaseInfo().then((res) => {
-                const goafOrebelts = res.data.map(item => item.goafOrebelt)
-                this.goafOrebelts = [...new Set(goafOrebelts)]
-                this.goafList = res.data
-            })  
-            this.getData()
-        },
-        changeHead(item){
-            this.activeId=item.id
-        },
-        searchSubmit(){
-            this.getData()
-        },
-        resetSubmit(){
-            this.conditions={
-                page: 1,
-                limit: 10,
-                goafId: '',
-                goafOrebelt: '',
-                goafOrebody: '',
-                goafOreheight: '',
-                goafName:"",
-                goafDevName:""
-            }
-            this.goafOrebodys=[]
-            this.goafOreheights=[]
-            this.goafNames=[]  
-            this.getData()
-        },
-        getData() {
-            for(let key in this.conditions){
-                if(this.conditions[key]===undefined||this.conditions[key]===''||this.conditions[key]==='undefined'){
-                    delete this.conditions[key]
-                }
-            }
-            getSensor(this.conditions).then((resp) => {
-                this.listLoading = false
-                const { data } = resp
-                const start = (this.conditions.page - 1) * this.conditions.limit
-                const end = this.conditions.page * this.conditions.limit
-                const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
-                this.dataList = dataList.filter((item, index) => index >= start && index < end)
-                this.total = dataList.length
-            })
-        },
-        showVideo(item){
-                if(this.isNull(item.goafDevSocketAddr)){
-                    console.error('未配置推流地址')
-                    return
-                }
-                if(this.isNull(item.goafDevIp)){
-                    console.error('未配置设备IP')
-                    return
-                }    
-                if(this.isNull(item.goafDevPort)){
-                    console.error('未配置设备端口')
-                    return
-                }
-                if(this.isNull(item.goafDevAccount)){
-                    console.error('未配置设备账号')
-                    return
-                }      
-                if(this.isNull(item.goafDevPwd)){
-                    console.error('未配置设备密码')
-                    return
-                }    
-                this.videoDialogVisible=true;             
-                this.$nextTick(()=>{
-                    this.$refs.HkwsVideo.loadData({
-                        streamServeUrl:item.goafDevSocketAddr,
-                        szIP: item.goafDevIp,    // protocol ip
-                        szPort: item.goafDevPort,            // protocol port
-                        szUsername:item.goafDevAccount,     // device username
-                        szPassword: item.goafDevPwd, // device password        
-                    })
-                })
-        },
-        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)
-                goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
-                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))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
-                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()
-        },  
-        isNull(val){
-            if(val===undefined||val==="undefined"&&val===null&&val===""){
-                return true
-            }
-            return false
-        },
-        unique(arr = [], name = 'name') {
-            const res = new Map()
-            return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
-        },        
-        deeepClone(params) {
-            return JSON.parse(JSON.stringify(params))
-        } 
-    }
- }
-</script>
-<style lang="scss" scoped>
-.video-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;
-            }
-    } 
-    .video-dialog{
-        position: fixed;
-        z-index: 9999;
-        left: 10px;
-        top: 0;
-        right: 10px;
-        bottom: 0;
-        background-color: rgba(222, 229, 236, 0.45);
-        .video-dialog-container{
-            width: 654px;
-            height: 535px;
-            background-color: #051933;
-            border-radius: 20px;
-            margin: 20px auto;
-        }
-        .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: 3vh;
-                    .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: 3vh;
-                    ::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>