生物安防

src/views/Alarm/Alarm.vue

@@ -30,7 +30,42 @@
           <div class="alarm-title-right"></div>
         </div>
         <div class="alarm-content">
-          <img src="../../assets/Alarm/111.png" width="100%" alt="">
+<!--          <img src="../../assets/Alarm/111.png" width="100%" alt="">-->
+          <canvas id="canvas" width="910" height="504"></canvas>
+          <div class="bubble yufeishe" v-show="num === 1 && button1%2!==0" >
+            <p>育肥舍</p>
+            <p>育肥猪2457头</p>
+            <p>在舍人数：7人</p>
+            <p>温度：27.4℃</p>
+          </div>
+          <div class="bubble baoyushe" v-show="num === 1 && button1%2!==0">
+            <p>保育舍</p>
+            <p>保育猪2457头</p>
+            <p>在舍人数：7人</p>
+            <p>温度：27.4℃</p>
+          </div>
+          <div class="bubble gelishe" v-show="num === 1 && button1%2!==0">
+            <p>隔离舍</p>
+            <p>隔离猪2457头</p>
+            <p>在舍人数：7人</p>
+            <p>温度：27.4℃</p>
+          </div>
+          <div class="bubble shenghuo" v-show="num === 2 && button2%2!==0">
+            <p>生活区</p>
+            <p>在舍人数：7人</p>
+            <p>温度：27.4℃</p>
+          </div>
+          <div class="bubble huanbao" v-show="num === 3 && button3%2!==0">
+            <p>环保区</p>
+            <p>氨氮：2.35mg/L</p>
+            <p>流量：154T</p>
+            <p>人员：1人</p>
+          </div>
+          <div class="bubble shui" v-show="num === 4 && button4%2!==0">
+            <p>水泵房</p>
+            <p>水压：1.2kpa</p>
+            <p>用水量：154吨</p>
+          </div>
         </div>
       </div>
       <div class="alarm-top-left">
@@ -97,10 +132,10 @@
           </div>
           <div class="flex-right">
             <div class="parent">
-              <div class="parent-grid">核心区</div>
-              <div class="parent-grid">生活区</div>
-              <div class="parent-grid">环保区</div>
-              <div class="parent-grid">其他</div>
+              <div class="parent-grid" @click="alarmClick(1)">核心区</div>
+              <div class="parent-grid" @click="alarmClick(2)">生活区</div>
+              <div class="parent-grid" @click="alarmClick(3)">环保区</div>
+              <div class="parent-grid" @click="alarmClick(4)">其他</div>
             </div>
           </div>
         </div>
@@ -130,6 +165,7 @@ import CostPie from "@/views/Alarm/chart/CostPie";
 import ChartBar from "@/views/BioSafety/chart/ChartBar";
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
+import img from '@/assets/Alarm/111.png';
 export default {
   name: "Alarm",
   components: {
@@ -187,7 +223,144 @@ export default {
         //   clickable: true
         // }
       },
+      ctx: null,
+      num: 0,
+      button1: 0,
+      button2: 0,
+      button3: 0,
+      button4: 0,
     }
+  },
+  methods: {
+    alarmClick(num) {
+      this.num = num;
+      if(num === 1) {
+        this.button1++;
+        this.button2 = 0;
+        this.button3 = 0;
+        this.button4 = 0;
+        if(this.button1 %2 === 0 ) {
+          this.ctx.clearRect(0, 0, 910, 504);
+          this.initCanvas()
+        } else {
+          this.ctx.lineWidth = 4;
+          this.ctx.strokeStyle = '#F59A23';
+          this.ctx.fillStyle = 'rgba(224, 218, 188, .6)';
+          this.ctx.beginPath();
+          this.ctx.moveTo(165, 85);
+          this.ctx.lineTo(750, 85);
+          this.ctx.lineTo(810, 265);
+          this.ctx.lineTo(590, 265);
+          this.ctx.lineTo(580, 195);
+          this.ctx.lineTo(330, 195);
+          this.ctx.lineTo(320, 270);
+          this.ctx.lineTo(100, 270);
+          this.ctx.closePath();
+
+          this.ctx.moveTo(135,280);
+          this.ctx.lineTo(310, 285);
+          this.ctx.lineTo(300, 345);
+          this.ctx.lineTo(120, 345);
+          this.ctx.closePath();
+          this.ctx.stroke();
+          this.ctx.fill();
+        }
+      } else if(num === 2) {
+        this.button2++;
+        this.button1 = 0;
+        this.button3 = 0;
+        this.button4 = 0;
+        if(this.button2 %2 === 0 ) {
+          this.ctx.clearRect(0, 0, 910, 504);
+          this.initCanvas()
+        } else {
+          this.ctx.lineWidth = 4;
+          this.ctx.strokeStyle = '#1ADD4B';
+          this.ctx.fillStyle = 'rgba(175, 179, 95, .6)';
+          this.ctx.beginPath();
+          this.ctx.moveTo(160, 360);
+          this.ctx.lineTo(300, 360);
+          this.ctx.lineTo(300, 375);
+          this.ctx.lineTo(350, 375);
+          this.ctx.lineTo(350, 360);
+          this.ctx.lineTo(430, 360);
+          this.ctx.lineTo(430, 345);
+          this.ctx.lineTo(475, 345);
+          this.ctx.lineTo(475, 360);
+          this.ctx.lineTo(550, 360);
+          this.ctx.lineTo(550, 410);
+          this.ctx.lineTo(160, 410);
+          // this.ctx.lineTo(590, 265);
+          // this.ctx.lineTo(580, 195);
+          // this.ctx.lineTo(330, 195);
+          // this.ctx.lineTo(320, 270);
+          // this.ctx.lineTo(100, 270);
+          this.ctx.closePath();
+
+          this.ctx.stroke();
+          this.ctx.fill();
+        }
+      } else if(num === 3) {
+        this.button3++;
+        this.button2 = 0;
+        this.button1 = 0;
+        this.button4 = 0;
+        if(this.button3 %2 === 0 ) {
+          this.ctx.clearRect(0, 0, 910, 504);
+          this.initCanvas()
+        } else {
+          this.ctx.lineWidth = 4;
+          this.ctx.strokeStyle = '#F54F23';
+          this.ctx.fillStyle = 'rgba(183, 109, 105, .6)';
+          this.ctx.beginPath();
+          this.ctx.moveTo(620, 360);
+          this.ctx.lineTo(870, 360);
+          this.ctx.lineTo(900, 450);
+          this.ctx.lineTo(630, 450);
+          this.ctx.closePath();
+
+          this.ctx.stroke();
+          this.ctx.fill();
+        }
+      } else if(num === 4) {
+        this.button4++;
+        this.button2 = 0;
+        this.button1 = 0;
+        this.button3 = 0;
+        if(this.button4 %2 === 0 ) {
+          this.ctx.clearRect(0, 0, 910, 504);
+          this.initCanvas()
+        } else {
+          this.ctx.lineWidth = 4;
+          this.ctx.strokeStyle = '#19AEE8';
+          this.ctx.fillStyle = 'rgba(169, 213, 236, .6)';
+          this.ctx.beginPath();
+          this.ctx.moveTo(390,200);
+          this.ctx.lineTo(440, 200);
+          this.ctx.lineTo(440, 240);
+          this.ctx.lineTo(390, 240);
+          // this.ctx.lineTo(900, 450);
+          // this.ctx.lineTo(630, 450);
+          this.ctx.closePath();
+
+          this.ctx.stroke();
+          this.ctx.fill();
+        }
+      }
+    },
+    initCanvas() {
+      var myCanvas = document.getElementById('canvas');
+      this.ctx = myCanvas.getContext('2d');
+      var imgs = new Image()
+      var that = this;
+      imgs.onload = function () {
+        that.ctx.drawImage(imgs, 0, 0, 910, 540)
+      }
+      imgs.src = img;
+    },
+  },
+  mounted() {
+    this.initCanvas()
   }
 }
 </script>
@@ -264,15 +437,7 @@ export default {
   .alarm-content {
     width: 100%;
     height: calc(100% - 26px);
-  }
-  .line {
-    transition: all 1s ease-out;
-    z-index: 999;
-  }
-  .line:hover {
-    transform-origin: 0 0;
-    z-index: 999;
-    transform: scale(1.5);
+    position: relative;
   }
   .alarm-bottom {
     width: 100%;
@@ -341,6 +506,7 @@ export default {
     background-color: #072A5B;
     display: grid;
     align-content: center;
+    cursor: pointer;
   }
   .case {
     width: 100%;
@@ -348,4 +514,58 @@ export default {
     background: url("../../assets/BioSafety/some.png") no-repeat;
     background-size: 100% 100%;
   }
-</style>
+  #canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .bubble {
+    width: 150px;
+    height: 100px;
+    position: absolute;
+    background-color: rgba(35, 57, 87, .8);
+    border-radius: 10px;
+    text-align: center;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .bubble::after{
+    content: '';
+    width: 0;
+    height: 0;
+    border: 20px solid;
+    position: absolute;
+    bottom: -40px;
+    left: 58px;
+    border-color: rgba(35, 57, 87, .8) transparent transparent;
+  }
+  .bubble p {
+    margin: 0;
+    line-height: 20px;
+    color: #66FFFF;
+  }
+  .yufeishe {
+    top: 40px;
+    left: 160px;
+  }
+  .baoyushe {
+    top: 40px;
+    right: 160px;
+  }
+  .gelishe {
+    top: 180px;
+    left: 160px;
+  }
+  .shenghuo {
+    bottom: 180px;
+    left: 375px;
+  }
+  .huanbao {
+    bottom: 150px;
+    right: 80px;
+  }
+  .shui {
+    top: 100px;
+    left: 340px;
+  }
+</style>

src/views/MainLayout.vue

@@ -30,7 +30,9 @@
     </div>
     <div class="main-right">
       <!-- 时间     -->
-      <div v-show="isHome" class="main-time">{{currentTime}}</div>
+      <div v-show="isHome" class="main-time">
+        <div v-if="Object.keys(weatherInfo).length !== 0">111</div>
+      </div>
       <!--  天气    -->
       <div v-show="!isHome" class="main-home" @click="showWeather = true">
         <div class="weatherBox" v-if="Object.keys(weather).length !== 0">
@@ -55,6 +57,7 @@
         <div v-else @click="refresh">抓取天气数据失败，请重试</div>
       </div>
     </div>
+    <div class="time">{{currentTime}}</div>
     <div class="main-bottom">青莲食品</div>
     <div class="content">
       <router-view></router-view>
@@ -150,6 +153,7 @@ export default {
         if(res.code === 10000) {
           this.weather = res.data;
           this.weatherInfo = JSON.parse(res.data.alarm)
+          console.log(this.weatherInfo)
         }
       })
     }
@@ -227,7 +231,6 @@ export default {
     height: 100%;
     line-height: 50px;
     font-size: 16px;
-    color: #289882
   }
   .main-bottom {
     width: 200px;
@@ -390,4 +393,12 @@ export default {
     background: url("../assets/weather/baoxue.png") no-repeat;
     background-size: 100% 100%;
   }
+  .time {
+    position: absolute;
+    bottom: 35px;
+    right: 80px;
+    line-height: 50px;
+    font-size: 16px;
+    color: #289882
+  }
 </style>