From 0b2cc489a55cf883a4f924306b2578037534a439 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Mon, 22 May 2023 10:23:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B93D=E5=88=86=E5=B8=83=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/newicon/iconfont.css |  15 ++-
 src/assets/img/Factory/switch.jpg   | Bin 0 -> 3874 bytes
 src/views/FactoryView/index.vue     |   2 +-
 src/views/FactoryView/statusBar.vue | 183 ++++++++++++++++++++++++++++
 src/views/FactoryView/threeMap.vue  |  59 ++++++---
 5 files changed, 237 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/img/Factory/switch.jpg
 create mode 100644 src/views/FactoryView/statusBar.vue

diff --git a/src/assets/css/newicon/iconfont.css b/src/assets/css/newicon/iconfont.css
index 8c2021b..ffe36ff 100644
--- 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";
 }
-
diff --git a/src/assets/img/Factory/switch.jpg b/src/assets/img/Factory/switch.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..10d3e8d15ceb88beda6308df70f33cda8b74c475
GIT binary patch
literal 3874
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
OY42br3UCBs5B>)e5rY>1

literal 0
HcmV?d00001

diff --git a/src/views/FactoryView/index.vue b/src/views/FactoryView/index.vue
index f772dff..345ab31 100644
--- 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();
diff --git a/src/views/FactoryView/statusBar.vue b/src/views/FactoryView/statusBar.vue
new file mode 100644
index 0000000..b5af292
--- /dev/null
+++ 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>
diff --git a/src/views/FactoryView/threeMap.vue b/src/views/FactoryView/threeMap.vue
index 3a366b1..5cc75f3 100644
--- 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);