up

src/settings.js

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

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

@@ -270,6 +270,7 @@ export default {
 </script>
       <style lang="scss" scoped>
       .map-container{
+        height: 100%;
           nav{
               display: flex;
               justify-content: space-between;
@@ -281,7 +282,7 @@ export default {
           .layout-map{
               display: flex;
               justify-content: space-between;
-              height: calc(100vh - 190px);
+              height: calc(100% - 58px);
               position: relative;
               #vmap {
                   height: 100%;

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

@@ -0,0 +1,124 @@
+
+<template>
+  <div :id="chartId" class="waveChart" />
+</template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'WaveChart',
+  props: {
+    chartId: {
+      default: 'chartId',
+      type: String
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      option: {
+        tooltip: {
+          trigger: 'item'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          top: '20%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          orient: 'vertical',
+          right: '5%',
+          top: '0',
+          itemGap: 20,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          data: []
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        series: [
+          {
+            name: 'X轴',
+            type: 'line',
+            stack: 'Total',
+            symbol: 'none',
+            data: []
+          },
+          {
+            name: 'Y轴',
+            type: 'line',
+            stack: 'Total',
+            symbol: 'none',
+            data: []
+          },
+          {
+            name: 'Z轴',
+            type: 'line',
+            stack: 'Total',
+            symbol: 'none',
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initChart(params) {
+      console.log(this.chartId)
+      this.$nextTick(() => {
+        var chartDom = document.getElementById(this.chartId)
+        var myChart = echarts.init(chartDom)
+        myChart.setOption(this.option)
+        this.myChart = myChart
+        if (!params) return
+        this.setChart(params)
+      })
+    },
+    show(params) {
+      this.initChart(params)
+    },
+    setChart({ x, y, z }) {
+      this.option.series[0].data = x
+      this.option.series[1].data = y
+      this.option.series[2].data = z
+      this.myChart.setOption(this.option)
+    }
+  }
+}
+</script>
+  <style>
+  .waveChart{
+      width: 100%;
+      height: 100%;
+  }
+  </style>
+

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

@@ -13,6 +13,8 @@ import SensorStatusCircle from './SensorStatusCircle.vue'
 import DeviceState from './DeviceState.vue'
 import DeviceInfo from './DeviceInfo.vue'
 
+import WaveChart from './WaveChart.vue'
+
 export {
   WarningStatistics,
   TodayCheckTask,
@@ -24,5 +26,6 @@ export {
   Map,
   SensorStatusCircle,
   DeviceState,
-  DeviceInfo
+  DeviceInfo,
+  WaveChart
 }

src/views/bigScreen/home/index.vue

@@ -6,7 +6,17 @@
       <device-info ref="device-info" />
     </div>
     <div class="main">
-      <Map ref="map" />
+      <Map ref="map" class="map-component" />
+      <div class="wave-wrap">
+        <el-carousel indicator-position="none" :autoplay="false" arrow="always" @change="showWave">
+          <el-carousel-item v-for="(item,idx) in sensorlist" :key="idx" class="carousel-item" height="100%">
+            <div class="wave-item">
+              <div class="waveChart-title">{{ item.goafSensorName }}</div>
+              <WaveChart :ref="'wave-chart-'+idx" key="idx" :chart-id="'wave-chart-'+idx" />
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
     <div class="side-right">
       <sensor-status ref="sensor-status" />
@@ -15,17 +25,17 @@
   </div>
 </template>
 <script>
-import mixins from '@/mixin/mqtt.js'
+// import mixins from '@/mixin/mqtt.js'
 import { Uint8ArrayToString } from '@/utils'
-
-import { getSensorlist } from '@/api/goaf/sensor'
+import { getSensorlist, getWavedata } from '@/api/goaf/sensor'
 import {
   SensorStatus,
   SensorWarningInfo,
   Map,
   SensorStatusCircle,
   DeviceState,
-  DeviceInfo
+  DeviceInfo,
+  WaveChart
 } from './components'
 export default {
   name: 'Home',
@@ -35,12 +45,14 @@ export default {
     Map,
     SensorStatusCircle,
     DeviceState,
-    DeviceInfo
+    DeviceInfo,
+    WaveChart
   },
-  mixins: [mixins],
+  // mixins: [mixins],
   data() {
     return {
       reportData: [],
+      sensorlist: [],
       WarniStatisticsdata: {
         fish: 100
       }
@@ -52,9 +64,6 @@ export default {
   methods: {
     init() {
       this.initChart()
-      this.initMqtt({
-        mqttResponse: this.mqttResponse
-      })
       getSensorlist().then((res) => {
         const { data } = res
         this.$nextTick(() => {
@@ -62,6 +71,19 @@ export default {
           this.$refs['sensor-status-circle'].loadData(data)
           this.$refs['device-info'].loadData(data)
         })
+        let tableData = []
+        for (let i = 0; i < data.length; i++) {
+          tableData = tableData.concat(data[i].goafSensorData.map((item, index) => {
+            return {
+              ...item,
+              goafDevName: data[i].goafDevName,
+              goafDevTypename: data[i].goafDevTypename,
+              index, len: data[i].goafSensorData.length
+            }
+          }))
+        }
+        this.sensorlist = tableData
+        this.showWave(0)
       })
       this.$nextTick(() => {
         this.$refs['sensor-warning-info'].loadData()
@@ -73,6 +95,21 @@ export default {
         this.$refs['sensor-status'].reload()
       })
     },
+    showWave(index) {
+      if (this.sensorlist.length < 1) return
+      const params = this.sensorlist[index]
+      const chartName = 'wave-chart-' + index
+      getWavedata(params.goafDataId).then((resp) => {
+        const { data } = resp
+        const x = data.tdWaveValueX.split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const y = data.tdWaveValueY.split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const z = data.tdWaveValueZ.split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const params = { x, y, z }
+        this.$nextTick(() => {
+          this.$refs[chartName][0].show(params)
+        })
+      })
+    },
     mqttResponse(topic, message) {
       if (!message.includes('{')) {
         return
@@ -88,6 +125,11 @@ export default {
   }
 }
 </script>
+<style>
+.leaflet-control-container{
+  display: none;
+}
+</style>
 <style lang="scss" scoped>
 ::v-deep.home-view{
     width: 100%;
@@ -311,12 +353,25 @@ export default {
         height: 100%;
         flex:1;
         padding: 0 14px;
-        #map{
+        .map-component{
+          height: 66.6%;
+        }
+        .wave-wrap{
+          height: 33.3%;
+          box-shadow: 0 0 3px rgb(133, 132, 132);
+          border-top: 1px solid #eaeaea;
+          background-color: #fff;
+          .waveChart-title{
             width: 100%;
+            position: absolute;
+            padding: 5px;
+            background-color: #fff;
+            color: #000;
+          }
+          .wave-item{
             height: 100%;
-            // background-image: url(./images/home/map.png);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
+            background-color: #fff;
+          }
         }
     }
 }

src/views/iiot/equipment/components/RectifyRecord.vue

@@ -7,6 +7,7 @@
     size="100%"
     :visible.sync="dialogVisible"
   >
+    <div slot="title" class="el-drawer-customtitle">告警整改</div>
     <div class="base-info">
       <el-table class="page-table" border fit :data="dataList">
         <el-table-column header-align="center" align="center" prop="goafDevName" label="待测设备名称" />
@@ -115,6 +116,12 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.el-drawer-customtitle{
+  text-align: center;
+}
+.base-info{
+  padding: 30px 0;
+}
 .descriptions{
   padding-top: 30px;
   ::v-deep.custom-desclabel{

src/views/iiot/equipment/monitor.vue

@@ -278,7 +278,7 @@ export default {
             }))
           }
           this.dataList = tableData
-          this.total = 1
+          this.total = resp.total
         } else {
           this.$message.error(msg)
         }