修改3D分布图

2023-05-22 10:23:21 +08:00 · 2023-05-22 10:23:21 +08:00 · 0b2cc489a5
commit 0b2cc489a5
parent 8c49fc4a37
5 changed files with 237 additions and 22 deletions
--- a/src/assets/css/newicon/iconfont.css
+++ b/src/assets/css/newicon/iconfont.css
@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 4025145 */
-  src: url('iconfont.woff2?t=1681876255746') format('woff2'),
-       url('iconfont.woff?t=1681876255746') format('woff'),
-       url('iconfont.ttf?t=1681876255746') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff2?t=1684721703109') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.woff?t=1684721703109') format('woff'),
+       url('//at.alicdn.com/t/c/font_4025145_o5efykd2y3.ttf?t=1684721703109') format('truetype');
 }

 .iconfont {
@ -13,6 +13,14 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-WIFI:before {
+  content: "\e63f";
+}
+
+.icon-tuoputu_jiaohuanjizu:before {
+  content: "\e639";
+}
+
 .icon-angle-right:before {
  content: "\e84e";
 }
@ -20,4 +28,3 @@
 .icon-angle-left:before {
  content: "\e84f";
 }
-
--- a/src/assets/img/Factory/switch.jpg
+++ b/src/assets/img/Factory/switch.jpg
--- a/src/views/FactoryView/index.vue
+++ b/src/views/FactoryView/index.vue
@ -14,7 +14,7 @@ import { getSensorInfodata , deviceDistributeInMachineryFactorydata} from "@/htt
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { useFactoryStore } from '@/store/module/Factory';

-import statusBar from '@/components/mapStatus/statusBar.vue';
+import statusBar from './statusBar.vue';

 const store = useFactoryStore();
 let Acontent = ref();
--- a/src/views/FactoryView/statusBar.vue
+++ b/src/views/FactoryView/statusBar.vue
@ -0,0 +1,183 @@
+<!--
+ * @FilePath: \screenFront\src\views\FactoryView\statusBar.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-04-04 08:11:07
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+   <div ref="statusbarref" :key="numkey">
+      <div class="tip-box-border" :class="{show}" @click="rtract" :style="{width: mapSize.width+'px',height:mapSize.height+'px'}" >
+        <!-- <div class="DirectionalSign">
+          
+        </div> -->
+        <div class="iconTip">
+          <ul>
+            <li v-for="item in prop.iconList" :key="item.id" >
+              <i :class="'iconfont ' + item.name + ' icon-logo'"></i
+              >{{ "&nbsp&nbsp&nbsp" + item.value }}
+              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
+            </li>
+            <li v-for="item in prop.devList" :key="item.id" >
+              <i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
+              >{{ "&nbsp&nbsp&nbsp" + item.value }}
+              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
+            </li>
+            <li>
+              <i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              WIFI
+              <div> &nbsp; 16/16</div>
+            </li>
+            <li>
+              <i class="iconfont icon-tuoputu_jiaohuanjizu icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              交换机
+              <div> &nbsp; 10/10</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { number } from "echarts/core";
+import {reactive, ref, watch,defineProps} from "vue"
+const prop = defineProps({
+  iconList: {
+    type: Object,
+    default: {},
+  },
+  devList: {
+    type: Object,
+    default: {},
+  },  
+  width: {
+    type: Number,
+    default: 0,
+  },
+  height: {
+    type: Number,
+    default: 0,
+  },
+});
+
+
+const afterDisplay = ref("none")
+const beforeDisplay = ref("block")
+const show = ref(true)
+let numkey=ref(0)
+let statusbarref=ref()
+let mapSize = reactive({
+  width: 0,
+  height: 0,
+});
+
+
+function rtract() {
+  show.value = !show.value;
+  if (show.value) {
+    afterDisplay.value = "none";
+    beforeDisplay.value = "block";
+  } else {
+    afterDisplay.value = "block";
+    beforeDisplay.value = "none";
+  }
+}
+watch(
+  () => prop,
+  (newVal, oldVal) => {
+    //监听父组件宽高变化，随时重置本组件尺寸
+    reset(newVal);
+    
+  },
+  { immediate: true, deep: true, flush: "post" }
+);
+function reset(val: any) {
+  //宽高为0时跳出该方法
+
+  if (!val.width && !val.height) return;
+  mapSize.width=val.width
+  mapSize.height=val.height
+  numkey.value++
+//   statusbarref.value.style.width=val.width
+//   statusbarref.value.style.height=val.height
+  //重置盒子尺寸
+}
+</script>
+
+<style scoped>
+@import url("@/assets/css/iconfont.css");
+@import url("@/assets/css/newicon/iconfont.css");
+.tip-box-border{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 97%;
+  width: 99%;
+  padding-top: 100px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 999;
+  background-color:rgba(0,0,0,0.5);
+  transition: transform 0.5s;
+} 
+.show {
+  transform: translateX(-90%);
+}
+.tip-box-border::after{
+  content: "\e84f";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  font-size: 24px;
+  font-family: 'iconfont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: v-bind(afterDisplay);
+  color: #fff;
+  box-sizing: border-box;
+}
+.tip-box-border::before{
+  content: '\e84e';
+  /* content: "\e84e"; */
+  position: absolute;
+  top: 50%;
+  right: 0;
+  font-size: 24px;
+  font-family: 'iconfont' !important;
+  font-style: normal;
+  display: v-bind(beforeDisplay);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #fff;
+  box-sizing: border-box;
+}
+.DirectionalSign{
+  width: 60%;
+  height: 20%;
+  background-image: url(@/assets/img/AerialView/direction.png);
+  background-size: 100% 100%;
+}
+.iconTip{
+  width: 100%;
+  height: 80%;
+  }
+.iconTip>ul>li{
+  padding-left: 10%;
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #fff;
+}
+.iconTip>ul>li>i{
+  font-size: 1.5rem;
+}
+</style>
--- a/src/views/FactoryView/threeMap.vue
+++ b/src/views/FactoryView/threeMap.vue
@ -67,6 +67,7 @@ const requires = {
    'door': require("@/assets/img/Factory/door.jpg"),
    'sky': require("@/assets/img/Factory/sky.jpg"),
    'titleFloor': require("@/assets/img/Factory/screen_title.png"),
+    'switch': require("@/assets/img/Factory/switch.jpg"),
 }

 const workerShopRoute = {
@ -729,29 +730,53 @@ function createWifi(position: positionType) {
 }

 //创建交换机
-function createSwitch(position: positionType, scale: number = 0.2) {
-    const loader = new GLTFLoader();
+// function createSwitch(position: positionType, scale: number = 0.2) {
+//     const loader = new GLTFLoader();

-    loader.load('/models/gltf/scene.gltf', function (gltf) {
-        const mesh = gltf.scene.children[0];
+//     loader.load('/models/gltf/scene.gltf', function (gltf) {
+//         const mesh = gltf.scene.children[0];

-        const s = scale;
-        mesh.scale.set(s, s, 0.5);
-        mesh.position.set(position.x-12.75, position.y, position.z+66.22);
-        mesh.rotation.z = THREE.MathUtils.degToRad(180)
-        // mesh.rotation.y = THREE.MathUtils.degToRad(90)
-        // mesh.rotation.x = THREE.MathUtils.degToRad(45)
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-        scene.add(mesh);
+//         const s = scale;
+//         mesh.scale.set(s, s, 0.5);
+//         mesh.position.set(position.x-12.75, position.y, position.z+66.22);
+//         mesh.rotation.z = THREE.MathUtils.degToRad(180)
+//         // mesh.rotation.y = THREE.MathUtils.degToRad(90)
+//         // mesh.rotation.x = THREE.MathUtils.degToRad(45)
+//         mesh.castShadow = true;
+//         mesh.receiveShadow = true;
+//         scene.add(mesh);

-    }, undefined, function (error) {
+//     }, undefined, function (error) {

-        console.error(error);
+//         console.error(error);

-    });
+//     });
+// }
+
+const createSwitch = ( boxposition: positionType, shadow: boolean = true): object => {
+
+const wallTexture = new THREE.TextureLoader().load(requires.switch);
+const wall = new THREE.BoxGeometry(15, 5, 10);
+const wallMaterial = new THREE.MeshPhongMaterial({
+    map: wallTexture,
+    color: 0xe7e7e7,
+    transparent: true,
+});
+//墙体的网格
+const wallMesh = new THREE.Mesh(wall, wallMaterial);
+// 物体移动位置
+// wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
+wallMesh.position.set(boxposition.x-6, 5 + boxposition.y, boxposition.z+33.73);
+// 对象是否渲染到阴影贴图当中
+wallMesh.castShadow = shadow;
+// 将立方体添加到场景中
+group.add(wallMesh)
+return wallMesh
 }

+
+
+
 //创建服务器
 function createGlb() {
    const loader = new GLTFLoader();
@ -764,8 +789,8 @@ function createGlb() {
        mesh.position.set(-346, 0, 51);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
+        createLableObj(mesh, '服务器', { x: 0, y: 60, z: 0 })
        scene.add(mesh);
-
    }, undefined, function (error) {

        console.error(error);