代码提交

package-lock.json

@@ -1892,6 +1892,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2056,47 +2099,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

public/EPS_Yzpq/index.html

@@ -136,9 +136,9 @@
     // 
     // 定位货架位置
     function shelvesList(val){
-      // console.log(val,'unity');
+      console.log(val,'unity');
       // unityInstanceA.Unity_ShelvesList(val)
-      unityInstanceA.SendMessage("Manager","Unity_ShelvesList",val);
+      unityInstanceA.SendMessage("Manager","Unity_ShelvesList",val );
     }
     // 视角切换
     function updateScene(val){

src/App.vue

@@ -1,14 +1,7 @@
 <template>
   <div id="app">
     <!-- unity3D -->
-    <iframe
+    <iframe id="iframe" ref="dome" width="100%" height="100%" src="EPS_Yzpq/index.html" frameborder="0"></iframe>
-      id="iframe"
-      ref="dome"
-      width="100%"
-      height="100%"
-      src="EPS_Yzpq/index.html"
-      frameborder="0"
-    ></iframe>
     <!-- 头部 -->
     <header class="nav">
       <div class="wether">
@@ -16,12 +9,7 @@
         <span class="tianqi">多云</span>
       </div>
       <el-select v-model="value" placeholder="请选择">
-        <el-option
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
         </el-option>
       </el-select>
       <el-input placeholder="请输入" v-model="input3">
@@ -29,50 +17,25 @@
       </el-input>
 
       <ul>
-        <li
+        <li v-for="(s, i) in liImgs" class="nav-li" :key="i" @click="handleBtn(i)">
-          v-for="(s, i) in liImgs"
+          <el-dropdown trigger="click" placement="bottom" v-if="i == 0" :hide-on-click="true">
-          class="nav-li"
+            <span class="downPull"><img :src="i == index ? s.selectImg : s.img" alt="" /></span>
-          :key="i"
-          @click="handleBtn(i)"
-        >
-          <el-dropdown
-            trigger="click"
-            placement="bottom"
-            v-if="i == 0"
-            :hide-on-click="true"
-          >
-            <img :src="s.img" alt="" />
             <el-dropdown-menu slot="dropdown">
               <ul class="menuContent">
-                <li
+                <li v-for="(num, index) in 15" :key="index" @click="shelfHanlder($event)">
-                  v-for="(num, index) in 15"
+                  LD1_B01-{{ num < 10 ? "0" + num : num }} </li>
-                  :key="index"
-                  @click="shelfHanlder($event)"
-                >
-                  LD1_B01-{{ num < 10 ? "0" + num : num }}
-                </li>
               </ul>
               <ul class="menuContent">
-                <li
+                <li v-for="(num, index) in 9" :key="index + 1" @click="shelfHanlder($event)">
-                  v-for="(num, index) in 9"
+                  LD1_C01-{{ num < 10 ? "0" + num : num }} </li>
-                  :key="index + 1"
-                  @click="shelfHanlder($event)"
-                >
-                  LD1_C01-{{ num < 10 ? "0" + num : num }}
-                </li>
                 <li @click="shelfHanlder($event)">LD1_C02-01</li>
                 <li @click="shelfHanlder($event)">LD1_C03-01</li>
               </ul>
             </el-dropdown-menu>
           </el-dropdown>
 
-          <el-dropdown
+          <el-dropdown trigger="click" placement="bottom" v-else-if="i == 2" :hide-on-click="true">
-            trigger="click"
+            <span class="downPull"><img :src="i == index ? s.selectImg : s.img" alt="" /></span>
-            placement="bottom"
-            v-else-if="i == 2"
-            :hide-on-click="true"
-          >
-            <img :src="s.img" alt="" />
             <el-dropdown-menu slot="dropdown">
               <ul class="menuContent">
                 <li @click="selectHomeN($event)">B01</li>
@@ -86,7 +49,7 @@
               <el-dropdown-item @click="selectHomeN($event)">C03</el-dropdown-item> -->
             </el-dropdown-menu>
           </el-dropdown>
-          <img v-else :src="s.img" alt="" />
+          <img v-else :src="i == index ? s.selectImg : s.img" alt="" />
         </li>
       </ul>
     </header>
@@ -107,12 +70,12 @@ export default {
     return {
       heatList: [20, 40, 200, 100],
       liImgs: [
-        { img: require("@/assets/images/1.png") },
+        { img: require("@/assets/images/1.png"), selectImg: require('@/assets/images/select_1.png') },
-        { img: require("@/assets/images/2.png") },
+        { img: require("@/assets/images/2.png"), selectImg: require('@/assets/images/select_2.png') },
-        { img: require("@/assets/images/3.png") },
+        { img: require("@/assets/images/3.png"), selectImg: require('@/assets/images/select_3.png') },
-        { img: require("@/assets/images/4.png") },
+        { img: require("@/assets/images/4.png"), selectImg: require('@/assets/images/select_4.png') },
-        { img: require("@/assets/images/5.png") },
+        { img: require("@/assets/images/5.png"), selectImg: require('@/assets/images/select_5.png') },
-        { img: require("@/assets/images/6.png") },
+        { img: require("@/assets/images/6.png"), selectImg: require('@/assets/images/select_6.png') },
       ],
       options: [
         {
@@ -136,6 +99,10 @@ export default {
       transport: false,
       // 显隐
       hide: false,
+      // 功能图标索引
+      index: null,
+
+      navLiState: false,
     };
   },
   created() {
@@ -150,20 +117,23 @@ export default {
   methods: {
     shelfHanlder(e) {
       //  console.log();
-      e.currentTarget.parentElement.parentElement.style.display = "none";
+      // e.currentTarget.parentElement.parentElement.style.display = "none";
       this.$refs.dome.contentWindow.shelvesList(e.currentTarget.innerHTML);
       console.log(e.currentTarget.innerHTML, "货架列表");
     },
     // 库房的定位
     selectHomeN(e) {
-      e.currentTarget.parentElement.parentElement.style.display = "none";
+      // e.currentTarget.parentElement.parentElement.style.display = "none";
       console.log(e.currentTarget.innerHTML, "库房的定位");
       this.$refs.dome.contentWindow.selectHome(e.currentTarget.innerHTML);
     },
     handleBtn(i) {
-      if (i == 1) {
+      this.navLiState = !this.navLiState
+      if (this.index == i&&this.navLiState) {
+        this.index = null
+        if (i == 1) {
         this.state = !this.state;
-        console.log(this.state);
+        // console.log(this.state);
         this.$refs.dome.contentWindow.updateScene(this.state);
       } else if (i == 3) {
         this.$refs.dome.contentWindow.outHome();
@@ -174,6 +144,32 @@ export default {
         this.hide = !this.hide;
         this.$refs.dome.contentWindow.hide(this.hide);
       }
+        return 
+      }
+      this.index = i
+      // 还原初始值
+      this.state =false
+      this.transport = false
+      this.hide = false
+      this.$refs.dome.contentWindow.updateScene(false);
+      // this.$refs.dome.contentWindow.outHome();
+      this.$refs.dome.contentWindow.transport(false);
+      this.$refs.dome.contentWindow.hide(false);
+      if (i == 1) {
+        this.state = !this.state;
+        // console.log(this.state);
+        this.$refs.dome.contentWindow.updateScene(this.state);
+      } else if (i == 3) {
+        this.$refs.dome.contentWindow.outHome();
+      } else if (i == 4) {
+        this.transport = !this.transport;
+        this.$refs.dome.contentWindow.transport(this.transport);
+      } else if (i == 5) {
+        this.hide = !this.hide;
+        this.$refs.dome.contentWindow.hide(this.hide);
+      }
+
+      this.navLiState = false
     },
   },
   watch: {
@@ -192,20 +188,27 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+/deep/ .el-dropdown {
+  width: 100%;
+  height: 100%;
+}
+
 /deep/ .el-input__inner {
   background-color: transparent !important;
   border-color: transparent !important;
   color: #fff !important;
 }
+
 /deep/ .el-input__inner::placeholder {
   color: #fff;
 }
+
 /deep/ .el-select {
   width: 13%;
   margin: 0 5px;
 }
 
-/deep/ .el-select > .el-input {
+/deep/ .el-select>.el-input {
   width: 100%;
 }
 
@@ -243,6 +246,17 @@ html {
   height: 100%;
 }
 
+// 下拉设置样式
+.downPull {
+  width: 100%;
+  height: 100%;
+  // display: inline-block;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+}
+
 .nav {
   // width: 42.4%;
 
@@ -280,11 +294,15 @@ html {
       align-items: center;
       justify-content: center;
       margin: 5px;
+      border: 1px solid #0d5597;
       cursor: pointer;
+      box-sizing: border-box;
+      user-select: none;
       // background-color: rgba(35, 95, 156, 0.2);
       border-radius: 8px;
-      box-shadow: 0 0 10px #5d8cad;
+      box-shadow: 0 0 10px #5cbfe1;
       position: relative;
+
     }
   }
 }