map

src/pages/modules/home/workshop.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="center_wrapper">
+    <img src="../../../images/scene.png" width="1095" height="804" usemap="#image-map" @click.stop="closePop">
+    <div class="status_icon"></div>
+    <map name="image-map" id="map">
+      <area v-for="(e, i) in areaList" :key="i" :alt="e.device_code" :title="e.device_code" :coords="e.coords" :shape="e.shape" @click="showPop($event, e)">
+    </map>
+    <device-pop ref="pop" :type="pkObj.type" :data="pkObj"/>
+    <!-- <div v-show="pkId !== ''" ref="pointer" class="pop_pointer"></div> -->
+  </div>
+</template>
+
+<script>
+import DevicePop from './devicepop.vue'
+// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
+import {deviceCondition} from '@js/mork2.js'
+export default {
+  name: 'workshop',
+  components: {
+    DevicePop: DevicePop
+  },
+  data () {
+    return {
+      areaList: [
+        {type: 'hlj', device_code: 'HNJ01', coords: '93,178,104,191', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ02', coords: '701,136,683,121', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ03', coords: '648,136,632,120', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ04', coords: '621,137,602,120', shape: 'rect'}
+      ],
+      interTime: this.$store.getters.setTime,
+      wsTimer: null,
+      MixMachineList: [], // 混碾机
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  created () {
+    this._deviceCondition()
+    // this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.wsTimer)
+    this.wsTimer = null
+  },
+  destroyed () {
+    clearInterval(this.wsTimer)
+    this.wsTimer = null
+  },
+  methods: {
+    showPop ($event, e) {
+      this.pkId = this.pkId === e.device_code ? '' : e.device_code
+      if (this.pkId) {
+        this.$refs.pop.$el.style.display = 'block'
+        this.$refs.pop.$el.style.left = $event.x + 'px'
+        this.$refs.pop.$el.style.top = $event.y + 'px'
+      } else {
+        this.$refs.pop.$el.style.display = 'none'
+      }
+      if (e.type === 'hlj') {
+        this.MixMachineList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      }
+    },
+    closePop () {
+      this.$refs.pop.$el.style.display = 'none'
+      this.pkId = ''
+    },
+    refresh () {
+      this.wsTimer = setInterval(() => {
+        this._deviceCondition()
+      }, this.interTime)
+    },
+    async _deviceCondition () {
+      let res = await deviceCondition()
+      this.MixMachineList = [...res.MixMachineList]
+      console.log(this.MixMachineList)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.center_wrapper
+  position relative
+  width 1095px
+  height 804px
+.pop_pointer
+  position: fixed;
+  z-index 101;
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
+  &::after
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #00c4ff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px #00c4ff;
+    animation: glow 2s infinite
+@keyframes glow {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+.status_icon
+  position absolute
+  z-index 1
+  left 93px
+  top 178px
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
+  &::after
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #00c4ff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px #00c4ff;
+    animation: glow 2s infinite
+map
+  position absolute
+  top: 0;
+  left: 0;
+  z-index 100
+area, .status_icon {
+  pointer-events: none; /* 防止其他元素影响点击事件 */
+}
+area {
+  pointer-events: auto;
+}
+</style>