Merge remote-tracking branch 'origin/test' into test

.env

@@ -1,4 +1,5 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=false
 VUE_APP_API_BASE_URL=/api
+BASE_URL=/public/
 VUE_APP_PREVIEW_URL=http://49.235.183.102:7007/onlinePreview?url=

package-lock.json

@@ -16567,6 +16567,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "three": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz",
+      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw=="
+    },
     "throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "nprogress": "^0.2.0",
     "qrcodejs2": "0.0.2",
     "sass-loader": "^10.0.3",
+    "three": "^0.148.0",
     "tui-date-picker": "^4.3.3",
     "tui-time-picker": "^2.1.6",
     "v-viewer": "^1.5.1",

src/layouts/BasicLayout.vue

@@ -58,7 +58,7 @@
       </a-layout>
     </template>
     <template v-else>
-      <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
+      <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{minHeight: '100vh' }">
         <!-- layout header -->
         <MixGlobalHeader
           :mode="layoutMode"

src/router/generator-platform-routers.js

@@ -445,8 +445,9 @@ const constantRouterComponents = {
   'IdleAssetsStoreMap': () => import('@/views/idle-assets-map/IdleAssetsStoreMap.vue'),
   'IdleAssetsSpareMap': () => import('@/views/idle-assets-map/IdleAssetsSpareMap.vue'),
   'IdleAssetsRepairMap': () => import('@/views/idle-assets-map/IdleAssetsRepairMap.vue'),
-  'SbPositionImg': () => import('@/views/sb-position/SbPositionImg.vue')
-
+  'SbPositionImg': () => import('@/views/sb-position/SbPositionImg.vue'),
+  // threeJs
+  'FactoryOne': () => import('@/views/threejs/factory/FactoryOne.vue')
 }
 
 // 前端未找到页面路由（固定不用改）

src/views/sb-position/SbPositionImg.vue

@@ -59,10 +59,10 @@ export default {
       })
     },
     handleView (workshop) {
-      if (!workshop.existPosition) {
-        this.$message.warning('该仓库不存在库位！')
+      if (workshop.existPosition) {
+        this.$message.warning('该车间不存在电子地图！')
       } else if (!workshop.opcImg) {
-        this.$message.warning('该仓库未上传底图！')
+        this.$message.warning('该车间未上传底图！')
       } else {
         querySbInfo({ positionId: workshop.id }).then(res => {
           this.visible = false

src/views/sb-position/modules/PointModal.vue

@@ -2,9 +2,9 @@
   <div v-show="visible">
     <div class="btn">
       <a-space>
-        <a-button @click="handleView">
+        <!-- <a-button @click="handleView">
           设备信息
-        </a-button>
+        </a-button> -->
         <a-button type="primary" @click="handleCancel">返回</a-button>
       </a-space>
     </div>

src/views/sb/info/modules/BaseForm.vue

@@ -339,13 +339,13 @@
         </a-col>
         <a-col :lg="12" :md="24" :sm="24">
           <a-form-item label="水平位置" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
-            <a-input-number :step="1" :min="85" style="width:70%" v-decorator="['zjm']" placeholder="请输入离屏幕左上角的右方距离，最低85" />
+            <a-input-number :step="1" :min="0" style="width:70%" v-decorator="['zjm']" placeholder="请选择" />
             <a-button style="width: 30%" type="primary" @click="handlePoint">设置预览</a-button>
           </a-form-item>
         </a-col>
         <a-col :lg="12" :md="24" :sm="24">
           <a-form-item label="垂直位置" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
-            <a-input-number :step="1" :min="340" style="width:70%" v-decorator="['jbdh']" placeholder="请输入离屏幕左上角的下方位置，最低340" />
+            <a-input-number :step="1" :min="0" style="width:70%" v-decorator="['jbdh']" placeholder="请选择" />
             <a-button style="width: 30%" type="primary" @click="handlePoint">设置预览</a-button>
           </a-form-item>
         </a-col>

src/views/sb/info/modules/PointModal.vue

@@ -29,7 +29,7 @@
 import { fetchSbPosition } from '@/api/sb/position'
 export default {
   name: 'PointModal',
-  data() {
+  data () {
     return {
       confirmLoading: false,
       modalTitle: null,
@@ -37,15 +37,15 @@ export default {
       y: null,
       visible: false,
       record: {},
-      url: null,
+      url: null
     }
   },
   props: {},
-  created() {
+  created () {
     // 下拉框map
   },
   methods: {
-    base(record) {
+    base (record) {
       this.visible = true
       // 如果是空标识添加
       this.modalTitle = '选择点位'
@@ -53,35 +53,35 @@ export default {
       this.y = record.jbdh
       this.record = record
       this.$nextTick(() => {
-        this.$refs.point.style.left = this.x + 'px'
-        this.$refs.point.style.top = this.y + 'px'
+        this.$refs.point.style.left = `calc(${this.x}% - 5px)`
+        this.$refs.point.style.top = `calc(${this.y}% - 5px)`
         fetchSbPosition({ id: record.positionId }).then((res) => {
           this.url = res.data.opcImg
         })
       })
     },
-    save() {
+    save () {
       this.$emit('ok', {
         zjm: this.x,
-        jbdh: this.y,
+        jbdh: this.y
       })
       this.visible = false
     },
-    handleSelectPoint(e) {
-      this.x = e.layerX
-      this.y = e.layerY
-      this.$refs.point.style.left = this.x + 'px'
-      this.$refs.point.style.top = this.y + 'px'
+    handleSelectPoint (e) {
+      this.x = +(e.offsetX * 100 / e.target.width).toFixed(2)
+      this.y = +(e.offsetY * 100 / e.target.height).toFixed(2)
+      this.$refs.point.style.left = e.offsetX - 5 + 'px'
+      this.$refs.point.style.top = e.offsetY - 5 + 'px'
     },
-    handleCancel(values) {
+    handleCancel (values) {
       this.visible = false
       this.$emit('ok')
       this.x = null
       this.y = null
       this.record = null
       this.confirmLoading = false
-    },
-  },
+    }
+  }
 }
 </script>
 <style lang="less" scoped>

src/views/threejs/factory/FactoryOne.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div id="container"></div>
+  </div>
+<!--  <a-card :bordered="false">
+    <div>
+      <div id="container"></div>
+    </div>
+  </a-card>-->
+</template>
+
+<script>
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+export default {
+  name: 'FactoryOne',
+  components: {
+  },
+  data () {
+    return {
+      publicPath: process.env.BASE_URL,
+      mesh: null,
+      camera: null,
+      scene: null,
+      renderer: null,
+      controls: null
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    // 初始化
+    init () {
+      this.createScene() // 创建场景
+      this.loadGLTF() // 加载GLTF模型
+      this.createLight() // 创建光源
+      this.createCamera() // 创建相机
+      this.createRender() // 创建渲染器
+      this.createControls() // 创建控件对象
+      this.render() // 渲染
+    },
+    // 创建场景
+    createScene () {
+      this.scene = new THREE.Scene()
+    },
+    // 加载GLTF模型
+    loadGLTF () {
+      const loader = new GLTFLoader()
+      loader.load('/models/gltf/厂区1.gltf', model => {
+        // model.scene.children[0].scale.set(50, 50, 50)
+        console.log('model', model)
+        this.scene.add(model.scene)
+      })
+    },
+    // 创建光源
+    createLight () {
+      // 环境光
+      const ambientLight = new THREE.AmbientLight(0xffffff) // 创建环境光
+      this.scene.add(ambientLight) // 将环境光添加到场景
+
+      // 创建一个平行光
+      const directionLight = new THREE.DirectionalLight(0xffffff, 1)
+      directionLight.position.set(50, 100, 60)
+      // directionLight.target = mesh; 设置两个点，就是表示平行光的方向,不设置target 表示（0,0,0,）
+      this.scene.add(directionLight)
+      /* const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
+      spotLight.position.set(150, 150, 150)
+      spotLight.castShadow = true
+      this.scene.add(spotLight) */
+    },
+    // 创建相机
+    createCamera () {
+      // const element = document.getElementById('container')
+      const width = window.innerWidth // 窗口宽度
+      const height = window.innerHeight // 窗口高度
+      console.log('width', width)
+      console.log('height', height)
+      const k = width / height // 窗口宽高比
+      // PerspectiveCamera( fov, aspect, near, far )
+      this.camera = new THREE.PerspectiveCamera(35, k, 1, 800)
+      this.camera.position.set(150, 150, 150) // 设置相机位置
+
+      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
+      this.scene.add(this.camera)
+    },
+
+    // 创建渲染器
+    createRender () {
+      const element = document.getElementById('container')
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+      this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染区域尺寸
+      this.renderer.shadowMap.enabled = true // 显示阴影
+      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
+      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
+      element.appendChild(this.renderer.domElement)
+      this.renderer.outputEncoding = THREE.sRGBEncoding
+    },
+    render () {
+      /* if (this.mesh) {
+        this.mesh.rotation.z += 0.006
+      } */
+      this.renderer.render(this.scene, this.camera)
+      requestAnimationFrame(this.render)
+    },
+    // 创建控件对象
+    createControls () {
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+    }
+  }
+}
+</script>