up

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

@@ -99,6 +99,13 @@ export default {
 </script>
 <style lang="scss" scoped>
 .deviceInfo-wrap{
+  // .device-item{
+  //   .container{
+  //     height: 230px;
+  //     overflow-y: auto;
+  //   }
+  // }
+
     .statistic-wrap{
         display: flex;
         flex-wrap: wrap;
@@ -161,14 +168,14 @@ export default {
 }
 </style>
 <style lang="scss">
-.deviceInfo-wrap{
-    height: 45vh !important;
-    .carousel-item,.el-carousel__container{
-        height: 45vh !important;
-    }
-    .container{
-        height: 26.5vh !important;
-    }
-}
+// .deviceInfo-wrap{
+//     height: 45vh !important;
+//     .carousel-item,.el-carousel__container{
+//         height: 45vh !important;
+//     }
+//     .container{
+//         height: 29.5vh !important;
+//     }
+// }
 
 </style>

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

@@ -341,9 +341,12 @@ export default {
   .layout-map .goaf-icon-box,.layout-map .leaflet-marker-icon{
     background-color: transparent;
     border-color: transparent;
+    background-image: url(~@/assets/images/goaf/default.png);
+    background-repeat: no-repeat;
+    background-position: center center;
   }
   .layout-map .goaf-icon-box:hover{
-    border: 1px dashed rgb(133, 131, 131);
+    border: 1px dashed rgba(133, 131, 131,0);
     border-radius: 50%;
   }
 </style>

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

@@ -156,7 +156,7 @@ export default {
 <style lang="scss" scoped>
 .sensor-status-chart-circle{
   ::v-deep .container{
-      height: 26vh !important;
+      height: 25vh !important;
       // min-height: 164px;
       position: relative;
       #sensor-status-chart-circle{

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

@@ -15,22 +15,23 @@ export default {
   data() {
     return {
       myChart: null,
+      timer: null,
       option: {
         tooltip: {
           trigger: 'item'
         },
         grid: {
           left: '3%',
-          right: '4%',
-          top: '20%',
-          bottom: '3%',
+          right: '50px',
+          top: '20px',
+          bottom: '20px',
           containLabel: true
         },
         legend: {
-          orient: 'vertical',
+          // orient: 'vertical',
           right: '5%',
           top: '0',
-          itemGap: 20,
+          itemGap: 10,
           textStyle: {
             color: '#000'
           }
@@ -41,27 +42,29 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#fff'
+              color: '#000'
             }
           },
           axisLabel: {
             textStyle: {
-              color: '#fff'
+              color: '#000'
             }
           },
           data: []
         },
         yAxis: {
           type: 'value',
+          // min: -20,
+          scale: true,
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#fff'
+              color: '#000'
             }
           },
           axisLabel: {
             textStyle: {
-              color: '#fff'
+              color: '#000'
             }
           }
         },
@@ -69,21 +72,21 @@ export default {
           {
             name: 'X轴',
             type: 'line',
-            stack: 'Total',
+            // stack: 'Total',
             symbol: 'none',
             data: []
           },
           {
             name: 'Y轴',
             type: 'line',
-            stack: 'Total',
+            // stack: 'Total',
             symbol: 'none',
             data: []
           },
           {
             name: 'Z轴',
             type: 'line',
-            stack: 'Total',
+            // stack: 'Total',
             symbol: 'none',
             data: []
           }
@@ -91,9 +94,11 @@ export default {
       }
     }
   },
+  destroyed() {
+    if (self.timer)clearInterval(self.timer)
+  },
   methods: {
     initChart(params) {
-      console.log(this.chartId)
       this.$nextTick(() => {
         var chartDom = document.getElementById(this.chartId)
         var myChart = echarts.init(chartDom)
@@ -107,10 +112,31 @@ export default {
       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.option.series[0].data = x.filter((item, index) => index < 200)
+      this.option.series[1].data = y.filter((item, index) => index < 200)
+      this.option.series[2].data = z.filter((item, index) => index < 200)
       this.myChart.setOption(this.option)
+      const self = this
+      let index = 201
+      if (self.timer)clearInterval(self.timer)
+      self.timer = setInterval(function() {
+        self.option.series[0].data.shift()
+        self.option.series[1].data.shift()
+        self.option.series[2].data.shift()
+        self.option.series[0].data.push(x[index])
+        self.option.series[1].data.push(y[index])
+        self.option.series[2].data.push(z[index])
+        if (index > x.length - 200) {
+          self.option.series[0].data = x.filter((item, _index) => _index > x.length - 200)
+          self.option.series[1].data = y.filter((item, _index) => _index > x.length - 200)
+          self.option.series[2].data = z.filter((item, _index) => _index > x.length - 200)
+          clearInterval(self.timer)
+          self.timer = null
+        } else {
+          index++
+        }
+        self.myChart.setOption(self.option)
+      }, 1000)
     }
   }
 }

src/views/bigScreen/home/index.vue

@@ -12,7 +12,12 @@
           <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.goafDevTypename }}【{{ item.goafDevName }}】上的传感器{{ item.goafSensorName }}</div>
-              <WaveChart :ref="'wave-chart-'+idx" key="idx" :chart-id="'wave-chart-'+idx" />
+              <div class="chart-box">
+                <div class="sensorTemperature">
+                  <span>{{ item.sensorTemperature }}℃</span>
+                </div>
+                <WaveChart :ref="'wave-chart-'+idx" key="idx" :chart-id="'wave-chart-'+idx" />
+              </div>
             </div>
           </el-carousel-item>
         </el-carousel>
@@ -56,6 +61,7 @@ export default {
     return {
       reportData: [],
       sensorlist: [],
+      timer: null,
       WarniStatisticsdata: {
         fish: 100
       }
@@ -64,6 +70,11 @@ export default {
   created() {
     this.init()
   },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
   methods: {
     init() {
       this.initChart()
@@ -102,16 +113,32 @@ export default {
       if (this.sensorlist.length < 1) return
       const params = this.sensorlist[index]
       const chartName = 'wave-chart-' + index
+      const self = this
       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 x = data.tdWaveValueX.substr(0, data.tdWaveValueX.length - 1).split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const y = data.tdWaveValueY.substr(0, data.tdWaveValueY.length - 1).split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const z = data.tdWaveValueZ.substr(0, data.tdWaveValueZ.length - 1).split(',').map(item => parseFloat((item / 100).toFixed(2)))
         const params = { x, y, z }
         this.$nextTick(() => {
           this.$refs[chartName][0].show(params)
         })
       })
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+      this.timer = setInterval(() => {
+        getWavedata(params.goafDataId).then((resp) => {
+          const { data } = resp
+          const x = data.tdWaveValueX.substr(0, data.tdWaveValueX.length - 1).split(',').map(item => parseFloat((item / 100).toFixed(2)))
+          const y = data.tdWaveValueY.substr(0, data.tdWaveValueY.length - 1).split(',').map(item => parseFloat((item / 100).toFixed(2)))
+          const z = data.tdWaveValueZ.substr(0, data.tdWaveValueZ.length - 1).split(',').map(item => parseFloat((item / 100).toFixed(2)))
+          const params = { x, y, z }
+          self.$nextTick(() => {
+            self.$refs[chartName][0].show(params)
+          })
+        })
+      }, 1000 * 60 * 30)
     },
     mqttResponse(topic, message) {
       if (!message.includes('{')) {
@@ -150,9 +177,9 @@ export default {
         display: flex;
         justify-content: space-between;
         flex-direction: column;
-        overflow-y: auto;
         box-sizing: border-box;
-        overflow-x: hidden;
+        // overflow-y: auto;
+        // overflow-x: hidden;
         &.side-left{
           min-width: 432px;
         }
@@ -356,31 +383,50 @@ export default {
         }
     }
     .main{
-        // width: 46.68%;
         height: 100%;
         width: 835px;
         box-sizing: border-box;
-        // padding: 0 14px;
         .map-component{
           height: 66.6%;
+          height: calc(100% - 351px);
         }
         .wave-wrap{
-          height: 33.3%;
+          height: 350px;
           box-shadow: 0 0 3px rgb(133, 132, 132);
           border-top: 1px solid #eaeaea;
           background-color: #fff;
+          overflow-y: auto;
+          box-sizing: border-box;
           .waveChart-title{
             width: 100%;
-            position: absolute;
-            background-color: #d1cfcf;
+            height: 40px;
+            line-height: 40px;
             color: #000;
-            padding: 10px;
             text-align: center;
-            box-sizing: border-box;
+            box-shadow: 2px 4px 8px rgba(0,0,0,0.6);
           }
           .wave-item{
             height: 100%;
-            background-color: #fff
+            height: 350px;
+            background-color: #fff;
+            .chart-box{
+              height: 300px;
+              padding-top: 5px;
+              position: relative;
+              .sensorTemperature{
+                font-size: 12px;
+                text-align: center;
+                width: 40px;
+                padding-bottom: 50px;
+                position: absolute;
+                top: 125px;
+                right: 2px;
+                background-image: url(./images/home/thermometer.png);
+                background-repeat: no-repeat;
+                background-position: bottom center;
+                background-size: 50px;
+              }
+            }
           }
         }
     }

src/views/goaf/map/components/VisualEditor.vue

@@ -200,7 +200,7 @@ export default {
       this.map.on('pm:drawstart', (e) => { // 绘制开始时事件
         if (e.shape === 'Marker') {
           const layer = e.workingLayer
-          const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;border: 1px solid red;"></div>`
+          const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;border: 1px solid transparent;"></div>`
           var icon = L.divIcon({
             html,
             iconSize
@@ -212,7 +212,7 @@ export default {
         const self = this
         if (e.shape === 'Marker') {
           const layer = e.layer
-          const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;border: 1px solid red;"></div>`
+          const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;border: 1px solid transparent;"></div>`
           var icon = L.divIcon({
             html,
             iconSize
@@ -265,7 +265,7 @@ export default {
         })
         L.geoJSON(feature, {
           pointToLayer: function(_feature, latlng) {
-            const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;border: 1px solid red;"></div>`
+            const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;border: 1px solid transparent;"></div>`
             var icon = L.divIcon({
               html,
               iconSize
@@ -626,6 +626,9 @@ export default {
               background-color: transparent;
               border: 0;
               border-radius: 50%;
+              background-image: url(~@/assets/images/goaf/default.png);
+              background-repeat: no-repeat;
+              background-position: center center;
           }
         .goaf-fill-v{
             width:100%;