src/views/3DOverview/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <!-- <V3DApp @3d-loaded="handle3DLoaded" />
+    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
-    <div v-if="showPage" id="v3d-main-content"> -->
+    <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
-    <div v-if="true" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content">
+      <!-- <div v-if="true" id="v3d-main-content"> -->
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
@@ -19,24 +20,32 @@
               </techy-container>
             </div>
 
-            <div class="techy-body-part__middle">
+            <div class="techy-body-part__middle" v-if="currentEquipment">
               <TechyBox>
                 <div class="techy-body-part__middle__inner">
                   <p>
                     <b>产线名称 :</b>
-                    <span>A产线</span>
+                    <span>{{ currentEquipment.pl }}</span>
                   </p>
                   <p>
                     <b>设备名称 :</b>
-                    <span>清洗机</span>
+                    <span>{{ currentEquipment.name }}</span>
                   </p>
                   <p>
                     <b>累计加工 :</b>
-                    <span>20</span>
+                    <span>{{ currentEquipment.amount }}</span>
                   </p>
                   <p>
                     <b>通信状态 :</b>
-                    <span class="round-dot">运行中</span>
+                    <span
+                      class="round-dot"
+                      :class="{
+                        'danger-dot': currentEquipment.status === '故障',
+                        'warning-dot': currentEquipment.status === '调试中'
+                      }"
+                    >
+                      {{ currentEquipment.status }}
+                    </span>
                   </p>
                 </div>
               </TechyBox>
@@ -109,6 +118,8 @@ import TechyBox from './components/TechyBox.vue'
 
 import screenfull from 'screenfull'
 
+import eqList from './v3dApp/data'
+
 export default {
   name: '',
   components: {
@@ -128,6 +139,8 @@ export default {
   },
   data() {
     return {
+      eqId: null,
+      currentEquipment: null,
       showPage: false,
       toggleResize: 'toggle-1' // <=== no need to worry this
     }
@@ -152,6 +165,12 @@ export default {
     },
     handle3DLoaded() {
       this.showPage = true
+    },
+    handle3DClick() {
+      this.eqId = document.getElementById('V3DData').rel
+      if (this.eqId) {
+        this.currentEquipment = eqList.find(item => item.id === this.eqId)
+      }
     }
   }
 }
@@ -348,4 +367,12 @@ export default {
   background-color: rgb(82, 231, 82);
   border-radius: calc(4px * var(--beilv));
 }
+
+.danger-dot::before {
+  background-color: #e71837;
+}
+
+.warning-dot::before {
+  background-color: #d6961f;
+}
 </style>

src/views/3DOverview/v3dApp/data.js

@@ -0,0 +1,73 @@
+export default [
+  { id: 'C1-0', pl: 'A', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C1-1', pl: 'A', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C1-2', pl: 'A', name: '磨边', amount: 32, status: '调试中' },
+  { id: 'C1-3', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C1-4', pl: 'A', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C1-5', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C1-6', pl: 'A', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C1-7', pl: 'A', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C1-8', pl: 'A', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C1-9', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C1-10', pl: 'A', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C2-0', pl: 'B', name: '上片', amount: 32, status: '调试中' },
+  { id: 'C2-1', pl: 'B', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C2-2', pl: 'B', name: '磨边', amount: 32, status: '调试中' },
+  { id: 'C2-3', pl: 'B', name: '清洗', amount: 32, status: '调试中' },
+  { id: 'C2-4', pl: 'B', name: '打孔', amount: 32, status: '调试中' },
+  { id: 'C2-5', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C2-6', pl: 'B', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C2-7', pl: 'B', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C2-8', pl: 'B', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C2-9', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C2-10', pl: 'B', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C3-0', pl: 'C', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C3-1', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C3-2', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C3-3', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C3-4', pl: 'C', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C3-5', pl: 'C', name: '清洗', amount: 32, status: '故障' },
+  { id: 'C3-6', pl: 'C', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C3-7', pl: 'C', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C3-8', pl: 'C', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C3-9', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C3-10', pl: 'C', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C4-0', pl: 'D', name: '上片', amount: 32, status: '故障' },
+  { id: 'C4-1', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C4-2', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C4-3', pl: 'D', name: '清洗', amount: 32, status: '故障' },
+  { id: 'C4-4', pl: 'D', name: '打孔', amount: 32, status: '故障' },
+  { id: 'C4-5', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C4-6', pl: 'D', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C4-7', pl: 'D', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C4-8', pl: 'D', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C4-9', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C4-10', pl: 'D', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C5-0', pl: 'E', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C5-1', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C5-2', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C5-3', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C5-4', pl: 'E', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C5-5', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C5-6', pl: 'E', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C5-7', pl: 'E', name: '固化', amount: 32, status: '生产中' },
+  { id: 'C5-8', pl: 'E', name: '储片', amount: 32, status: '生产中' },
+  { id: 'C5-9', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
+  // { id: 'C5-10', pl: 'E', name: '下片', amount: 32, status: '生产中' },
+
+  { id: 'C6-0', pl: 'F', name: '上片', amount: 32, status: '生产中' },
+  { id: 'C6-1', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C6-2', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
+  { id: 'C6-3', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C6-4', pl: 'F', name: '打孔', amount: 32, status: '生产中' },
+  { id: 'C6-5', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
+  { id: 'C6-6', pl: 'F', name: '丝印', amount: 32, status: '生产中' },
+  { id: 'C6-7', pl: 'F', name: '固化', amount: 32, status: '故障' },
+  { id: 'C6-8', pl: 'F', name: '储片', amount: 32, status: '故障' },
+  // { id: 'C6-9', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
+  // { id: 'C6-10', pl: 'F', name: '下片', amount: 32, status: '生产中' },
+]