提交

src/router/modules/aqpt.js

@@ -507,19 +507,19 @@ const aqptRouter = [
         component: () => import('@/views/goaf/sensorCat/index'),
         name: 'aqpt_setting_sensor_cat',
         meta: { title: '传感器类别', noCache: true, permit: 'aqpt_setting_equipment_cat' }
-      },
-      {
-        path: 'bigScreen-setting',
-        component: () => import('@/views/aqpt/setting/bigScreen/index'),
-        name: 'bigScreen-setting',
-        meta: { title: '大屏配置', noCache: true, permit: 'aqpt_setting_check_cat' }
-      },
-      {
-        path: 'APP_download',
-        component: () => import('@/views/system/app/download'),
-        name: 'aqpt_setting_app_update',
-        meta: { title: 'APP升级', noCache: true, permit: 'aqpt_setting_equipment_cat' }
       }
+      //, {
+      //   path: 'bigScreen-setting',
+      //   component: () => import('@/views/aqpt/setting/bigScreen/index'),
+      //   name: 'bigScreen-setting',
+      //   meta: { title: '大屏配置', noCache: true, permit: 'aqpt_setting_check_cat' }
+      // },
+      // {
+      //   path: 'APP_download',
+      //   component: () => import('@/views/system/app/download'),
+      //   name: 'aqpt_setting_app_update',
+      //   meta: { title: 'APP升级', noCache: true, permit: 'aqpt_setting_equipment_cat' }
+      // }
       // {
       //   path: 'ctrlLevel',
       //   component: () => import('@/views/aqpt/setting/ctrlLevel/index'),

src/settings.js

@@ -36,7 +36,6 @@ module.exports = {
   /**
   * 服务API地址
   */
-  // devServerUrl: 'http://113.141.93.143:1688', // 开发环境
   devServerUrl: 'http://113.141.93.143:1688', // 开发环境 qu
   serverUrl: 'http://113.141.93.143:1688', // 正式环境
   mqttUrl: 'ws://113.141.93.143:8894/mqtt', // mqtt地址

src/views/bigScreen/components/Header.vue

@@ -2,7 +2,8 @@
   <div id="app-header">
     <span class="title">工业物联网平台</span>
     <div class="time">{{ time }}</div>
-    <div class="user"><el-icon><User /></el-icon><span class="welcome">欢迎您，{{ userData.userName||'***' }}</span></div>
+    <div class="user"><i class="el-icon-user" /><span class="welcome">欢迎您，{{ userData.userName||'***' }}</span></div>
+    <div class="back" @click="back" />
   </div>
 </template>
 <script>
@@ -35,6 +36,9 @@ export default {
         this.getnow()
       }, 1000)
     },
+    back() {
+      this.$router.replace('/')
+    },
     getnow() {
       this.time = parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s}')
     }
@@ -51,6 +55,18 @@ export default {
     text-align: center;
     line-height:8vh;
     position: relative;
+    .back{
+        width: 80px;
+        height: 3.5vh;
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-image: url(../layout/components/images/back.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+    }
     .title{
         font-size: 36.6px;
         font-family: 'YouSheBiaoTiHei';

src/views/bigScreen/home/components/DeviceState.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="item deviceState">
+    <div class="title">
+      <span class="name">设备状态</span>
+    </div>
+    <div class="container">
+      <div class="device-item">
+        <div class="graph-box">
+          <div class="graph n">
+            <span class="number">14台</span>
+          </div>
+        </div>
+        <div class="name">正常报警</div>
+      </div>
+      <div class="device-item">
+        <div class="graph-box">
+          <div class="graph c">
+            <span class="number">4台</span>
+          </div>
+        </div>
+        <div class="name">C级报警</div>
+      </div>
+      <div class="device-item">
+        <div class="graph-box">
+          <div class="graph d">
+            <span class="number">3台</span>
+          </div>
+        </div>
+        <div class="name">D级报警</div>
+      </div>
+      <div class="device-item">
+        <div class="graph-box">
+          <div class="graph offline">
+            <span class="number">0台</span>
+          </div>
+        </div>
+        <div class="name">离线报警</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DeviceState',
+  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) {
+      const total = data.goafHdangerLevelGeneralNum + data.goafHdangerLevelLowerNum + data.goafHdangerLevelMajorNum + data.goafHdangerLevelSeriousNum
+      const 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>
+  .deviceState{
+    height: 200;
+    .container{
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        padding: 10px 0;
+        .device-item{
+            margin-bottom: 10px;
+            color: #fff;
+            &:nth-child(odd){
+                margin-right: 40px;
+            }
+            &:nth-child(even){
+                margin-left: 40px;
+            }
+            .name{
+                text-align: center;
+                padding-top: 10px;
+            }
+            .graph-box{
+                width: 200px;
+                height: 100px;
+                overflow: hidden;
+                .graph{
+                    width: 180px;
+                    height: 180px;
+                    box-sizing: border-box;
+                    border: 10px solid red;
+                    border-radius: 50%;
+                    margin:10px auto;
+                    position: relative;
+                    text-align: center;
+                    line-height: 90px;
+                    &.n{
+                        border-color:#2affff ;
+                        border: 10px solid #2affff;
+                        &::before{
+                            background-color: #2affff;
+                        }
+                    }
+                    &.c{
+                        border: 10px solid #fac858;
+                        border-color:#fac858 ;
+                        &::before{
+                            background-color: #fac858;
+                        }
+                    }
+                    &.d{
+                        border: 10px solid red;
+                        border-color:#f44336 ;
+                        &::before{
+                            background-color: #f44336;
+                        }
+                    }
+                    &.offline{
+                        border: 10px solid #5470c6;
+                        border-color:#5470c6 ;
+                        &::before{
+                            background-color: #5470c6;
+                        }
+                    }
+                    .number{
+                        width: 100%;
+                        text-align: center;
+                        position: absolute;
+                        left: 0;
+                        top: 10px;
+                        z-index: 9;
+                    }
+                    &::after{
+                        display: block;
+                        content: "";
+                        width: 195px;
+                        height: 195px;
+                        border-radius: 50%;
+                        box-sizing: border-box;
+                        border: 2px dashed transparent;
+                        border-color: inherit;
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%,-50%);
+                    }
+                    &::before{
+                        display: block;
+                        content: "";
+                        width: 120px;
+                        height: 120px;
+                        border-radius: 50%;
+                        box-sizing: border-box;
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%,-50%);
+                        background-color: transparent;
+
+                    }
+                }
+            }
+        }
+    }
+  }
+
+  </style>
+

src/views/bigScreen/home/components/SensorInfoStatistics.vue

@@ -22,7 +22,7 @@
           <div class="name">
             <span>区域入侵预警</span>
           </div>
-          <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
+          <div class="close" @click="videoDialogVisible=false"><i class="el-icon-close" /></div>
         </div>
         <div v-if="capturePhotos.length>0" class="demo-image__preview">
           <el-image
@@ -301,7 +301,6 @@ export default {
       })
     },
     goafdevstatis() {
-      const option = JSON.parse(JSON.stringify(this.option))
       goafdevstatis().then((res) => {
         this.total = res.data.goafDevTotalNum
       })

src/views/bigScreen/home/components/SensorStatus.vue

@@ -151,7 +151,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .container{
-    height: 13.2vh !important;
+    height: 18vh !important;
     // min-height: 164px;
     #sensor-status-chart{
         width: 95%;

src/views/bigScreen/home/components/SensorStatusCircle.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="item sensor-status-chart-circle">
+    <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 v-if="status" id="sensor-status-chart-circle" />
+      <div class="legend">
+        <div v-for="(legend,index) in option.series" :key="index" class="legend-item">
+          <div class="lable">{{ legend.name }}</div>
+          <div class="number" :style="{background: `linear-gradient(90deg, #021a34 0%, ${legend.data[0].itemStyle.color} 100%)`}">
+            <span>{{ legend.data[0].value }}</span>
+            <span class="unit">台</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'SensorStatusCircle',
+  data() {
+    return {
+      myChart: null,
+      status: true,
+      total: '',
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '正常报警',
+            type: 'pie',
+            selectedMode: 'single',
+            radius: ['65%', '70%'],
+            center: ['25%', '50%'],
+            clockWise: false,
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 0, name: '正常报警', itemStyle: { color: '#2affff' }},
+              { value: 0, name: '总数', itemStyle: { color: '#021a34' }}
+            ]
+          },
+          {
+            name: 'C级报警',
+            type: 'pie',
+            clockWise: false,
+            selectedMode: 'single',
+            radius: ['55%', '60%'],
+            center: ['25%', '50%'],
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 0, name: 'C级报警', itemStyle: { color: '#fac858' }},
+              { value: 0, name: '总数', itemStyle: { color: '#021a34' }}
+            ]
+          },
+          {
+            name: 'D级报警',
+            type: 'pie',
+            clockWise: false,
+            selectedMode: 'single',
+            radius: ['45%', '50%'],
+            center: ['25%', '50%'],
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 0, name: 'D级报警', itemStyle: { color: '#f44336' }},
+              { value: 0, name: '总数', itemStyle: { color: '#021a34' }}
+            ]
+          },
+          {
+            name: '离线报警',
+            type: 'pie',
+            clockWise: false,
+            radius: ['35%', '40%'],
+            center: ['25%', '50%'],
+            label: {
+              show: false
+            },
+            data: [
+              { value: 0, name: '离线报警', itemStyle: { color: '#5470c6' }},
+              { value: 0, name: '总数', itemStyle: { color: '#021a34' }}
+            ]
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+      this.reload()
+    })
+  },
+  destroyed() {
+    this.status = false
+  },
+  methods: {
+    init() {
+      var chartDom = document.getElementById('sensor-status-chart-circle')
+      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() {
+      const option = JSON.parse(JSON.stringify(this.option))
+      const total = 1000
+      option.series[0].data[0].value = 600
+      option.series[1].data[0].value = 100
+      option.series[2].data[0].value = 80
+      option.series[3].data[0].value = 50
+
+      option.series[0].data[1].value = total
+      option.series[1].data[1].value = total
+      option.series[2].data[1].value = total
+      option.series[3].data[1].value = total
+      this.option = option
+      if (!this.myChart) {
+        var chartDom = document.getElementById('sensor-status-chart-circle')
+        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'
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.sensor-status-chart-circle{
+  ::v-deep .container{
+      height: 26vh !important;
+      // min-height: 164px;
+      position: relative;
+      #sensor-status-chart-circle{
+          width: 95%;
+          height: 100%;
+      }
+      .legend{
+        position: absolute;
+        right: 20px;
+        top: 20%;
+        .legend-item{
+          color: #fff;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .lable{
+            padding: 8px 10px;
+            flex: 1;
+          }
+          .number{
+            width: 100px;
+            padding: 8px 10px;
+            margin-left: 10px;
+            text-align: center;
+            .unit{
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+  }
+}
+
+</style>

src/views/bigScreen/home/components/SensorWarningInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="item report">
     <div class="title">
-      <span class="name">传感器预警信息</span>
+      <span class="name">报警记录</span>
       <span class="number">{{ total }}</span>
     </div>
     <div class="container">
@@ -72,7 +72,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .container{
-    height: 16vh !important;
-    // min-height: 200px;
+    height: 36vh !important;
 }
 </style>

src/views/bigScreen/home/components/SensorWarningStatistics.vue

@@ -96,7 +96,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .container{
-    height: 19.4vh !important;
+    height: 22vh !important;
     .chart-cont{
         p{
             color: #fff;

src/views/bigScreen/home/components/index.js

@@ -9,6 +9,9 @@ import SensorInfoStatistics from './SensorInfoStatistics.vue'
 
 import Map from './Map/index.vue'
 
+import SensorStatusCircle from './SensorStatusCircle.vue'
+import DeviceState from './DeviceState.vue'
+
 export {
   WarningStatistics,
   TodayCheckTask,
@@ -17,5 +20,7 @@ export {
   SensorWarningStatistics,
   SensorWarningInfo,
   SensorInfoStatistics,
-  Map
+  Map,
+  SensorStatusCircle,
+  DeviceState
 }

src/views/bigScreen/home/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="home-view">
     <div class="side-left">
-      <warning-statistics ref="warning-statistics" />
-      <check-warn-report ref="check-warn-report" />
+      <!-- <warning-statistics ref="warning-statistics" /> -->
+      <DeviceState ref="warning-statistics" />
+      <sensor-status-circle ref="check-warn-report" />
+      <!-- <check-warn-report ref="check-warn-report" /> -->
       <today-check-task />
     </div>
     <div class="main">
@@ -12,7 +14,7 @@
       <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" />
+      <!-- <sensor-info-statistics ref="sensor-info-statistics" /> -->
     </div>
   </div>
 </template>
@@ -23,26 +25,30 @@ import { Uint8ArrayToString } from '@/utils'
 import { parseTime } from '@/utils'
 import { goafhdangerstatis } from '@/api/goaf/dangerApi'
 import {
-  WarningStatistics,
+  // WarningStatistics,
   TodayCheckTask,
-  CheckWarnReport,
+  // CheckWarnReport,
   SensorStatus,
   SensorWarningStatistics,
   SensorWarningInfo,
-  SensorInfoStatistics,
-  Map
+  // SensorInfoStatistics,
+  Map,
+  SensorStatusCircle,
+  DeviceState
 } from './components'
 export default {
   name: 'Home',
   components: {
-    WarningStatistics,
+    // WarningStatistics,
     TodayCheckTask,
-    CheckWarnReport,
+    // CheckWarnReport,
     SensorStatus,
     SensorWarningStatistics,
     SensorWarningInfo,
-    SensorInfoStatistics,
-    Map
+    // SensorInfoStatistics,
+    Map,
+    SensorStatusCircle,
+    DeviceState
   },
   mixins: [mixins],
   data() {
@@ -79,7 +85,7 @@ export default {
       /** 更新chart */
       this.$nextTick(() => {
         this.$refs['sensor-status'].reload()
-        this.$refs['sensor-info-statistics'].init()
+        // this.$refs['sensor-info-statistics'].init()
       })
     },
     getWarniStatisticsdata() {

src/views/bigScreen/layout/components/SideLeft.vue

@@ -1,53 +1,53 @@
 <template>
-    <div class="layout-side-left" v-if="showSide">
-        <div :class="activeId===item.id?'active item':'item'" v-for="item in items" :key="item.id" @click="linkTo(item)">{{ item.name }}</div>
-    </div>
+  <div v-if="showSide" class="layout-side-left">
+    <div v-for="item in items" :key="item.id" :class="activeId===item.id?'active item':'item'" @click="linkTo(item)">{{ item.name }}</div>
+  </div>
 </template>
 <script>
-    export default {
-        name:"SlideLeft",
-        data(){
-            return{
-                activeId:"1",
-                showSide:true,
-                items:[
-                    {name:"传感器",id:"1",path:"/particulars/sensor"},
-                    {name:"人员巡检",id:"2",path:"/particulars/check"},
-                    {name:"采空区信息",id:"3",path:"/particulars/goaf-info"},
-                ]
-            }
-        },  
-        watch:{
-            $route(route){
-                let path=route.path
-                // this.showSide=!path.includes('/particulars/particulars-video')
-                if(path.includes('/particulars/check')){
-                    this.activeId='2'
-                }else if(path.includes('/particulars/goaf-info')){
-                    this.activeId='3'
-                }else{
-                    this.activeId='1'
-                }
-            }
-        },     
-        created(){
-            let path=this.$route.path
-            if(path.includes('/particulars/check')){
-                this.activeId='2'
-            }else if(path.includes('/particulars/goaf-info')){
-                this.activeId='3'
-            }else{
-                this.activeId='1'
-            }
-            // this.showSide=!path.includes('/particulars/particulars-video')
-        },
-        methods: {
-            linkTo(item){
-                this.activeId=item.id
-                this.$router.push(item.path)    
-            }
-        },
+export default {
+  name: 'SlideLeft',
+  data() {
+    return {
+      activeId: '1',
+      showSide: true,
+      items: [
+        { name: '传感器', id: '1', path: '/particulars/sensor' }
+        // ,{ name: '人员巡检', id: '2', path: '/particulars/check' },
+        // { name: '采空区信息', id: '3', path: '/particulars/goaf-info' }
+      ]
     }
+  },
+  watch: {
+    $route(route) {
+      const path = route.path
+      // this.showSide=!path.includes('/particulars/particulars-video')
+      if (path.includes('/particulars/check')) {
+        this.activeId = '2'
+      } else if (path.includes('/particulars/goaf-info')) {
+        this.activeId = '3'
+      } else {
+        this.activeId = '1'
+      }
+    }
+  },
+  created() {
+    const path = this.$route.path
+    if (path.includes('/particulars/check')) {
+      this.activeId = '2'
+    } else if (path.includes('/particulars/goaf-info')) {
+      this.activeId = '3'
+    } else {
+      this.activeId = '1'
+    }
+    // this.showSide=!path.includes('/particulars/particulars-video')
+  },
+  methods: {
+    linkTo(item) {
+      this.activeId = item.id
+      this.$router.push(item.path)
+    }
+  }
+}
 
 </script>
 <style lang="scss" scoped>
@@ -87,4 +87,4 @@
     }
 }
 
-</style>
+</style>

src/views/iiot/equipment/history.vue

@@ -3,7 +3,7 @@
     <el-row class="tool-bar">
       <el-col :span="12" class="left">
         <div class="content-title">
-          实时数据
+          历史记录
         </div>
       </el-col>
       <el-col :span="12" class="right">