add 项目搭建

acs/nladmin-ui/src/components/ShowTrack/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="container">
+    <div class="canvas-wrap" :style="getBgStyle(configInfo)">
+      <div v-for="e in carData" :key="e.device_code" class="car-wrap" :style="getCarWrapStyle(e)">
+        <div class="car_img" :style="getCarImgStyle(e)" />
+        <div class="car_name">{{ e.configuration_code }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import apiTrack from '@/components/ShowTrack/track'
+// const fullDomain = window.location.protocol + '//' + window.location.host
+export default {
+  data() {
+    return {
+      configInfo: { refresh_time: 1000 },
+      carData: [],
+      deviceData: [],
+      carCoor: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  async created() {
+    const res1 = await apiTrack.trackEdit()
+    this.configInfo = [...res1.content][0]
+    const res2 = await apiTrack.carEdit()
+    this.carData = [...res2.content]
+    this.deviceData = this.carData.map(e => { return { device_code: e.device_code } })
+    this._queryDevice(this.deviceData)
+    this.timerFun(this._queryDevice, this.configInfo.refresh_time * 1000)()
+  },
+  methods: {
+    timerFun(f, time) {
+      const _this = this
+      return function backFun() {
+        clearTimeout(_this.intervalId)
+        _this.intervalId = setTimeout(function() {
+          f(_this.deviceData)
+          backFun()
+        }, time)
+      }
+    },
+    _queryDevice(arr) {
+      apiTrack.queryDevice(arr).then(res => {
+        this.carCoor = [...res.data]
+      })
+    },
+    getBgStyle(obj) {
+      if (obj.image_code) {
+        const width = parseFloat(obj.max_x) * parseFloat(obj.zoom_ratio)
+        const height = parseFloat(obj.max_y) * parseFloat(obj.zoom_ratio)
+        // const fullImageUrl = require('@/assets/images/background.jpg')
+        const fullImageUrl = `${this.baseApi}/file/图片/${obj.image_code}`
+        return {
+          width: `${width}px`,
+          height: `${height}px`,
+          backgroundImage: `url(${fullImageUrl})`
+        }
+      }
+    },
+    getPositionById(code) {
+      const position = this.carCoor.find((p) => p.device_code === code)
+      return position || { x: 0, y: 0 }
+    },
+    getCarWrapStyle(el) {
+      const width = el.image_width
+      const height = el.image_height
+      const position = this.getPositionById(el.device_code)
+      const x = position.x * parseFloat(this.configInfo.zoom_ratio)
+      const y = position.y * parseFloat(this.configInfo.zoom_ratio)
+      let sty = {}
+      switch (this.configInfo.coordinate_origin) {
+        case '1':
+          sty = {
+            width: `${width}px`,
+            height: `${height}px`,
+            left: `${x}px`,
+            top: `${y}px`
+          }
+          break
+        case '2':
+          sty = {
+            width: `${width}px`,
+            height: `${height}px`,
+            left: `${x}px`,
+            bottom: `${y}px`
+          }
+          break
+        case '3':
+          sty = {
+            width: `${width}px`,
+            height: `${height}px`,
+            right: `${x}px`,
+            top: `${y}px`
+          }
+          break
+        case '4':
+          sty = {
+            width: `${width}px`,
+            height: `${height}px`,
+            right: `${x}px`,
+            bottom: `${y}px`
+          }
+          break
+        default:
+          sty = {}
+      }
+      return sty
+    },
+    getCarImgStyle(el) {
+      // const fullImageUrl = require('@/assets/images/avatar.png')
+      const fullImageUrl = `${this.baseApi}/file/图片/${el.image_code}`
+      const position = this.getPositionById(el.device_code)
+      const angle = parseFloat(position.angle)
+      return {
+        backgroundImage: `url(${fullImageUrl})`,
+        transform: `rotate(-${angle}deg)`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  overflow: auto;
+  scrollbar-width: none;
+}
+.container::-webkit-scrollbar {
+  display: none;
+}
+.canvas-wrap {
+  position: relative;
+  background: #f3f3f3 top center / 100% auto no-repeat;
+}
+.car-wrap {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+}
+.car_img {
+  width: 100%;
+  height: 100%;
+  background: top center / 100% auto no-repeat;
+}
+.car_name {
+  position: absolute;
+  width: 100%;
+  bottom: -20px;
+  font-size: 12px;
+  color: #fff;
+  line-height: 16px;
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+}
+</style>