工厂驾驶舱

src/views/index.vue

@@ -6,10 +6,13 @@
       <div v-if="visible" class="rcLine"></div>
       <div v-if="visible" class="rcLineTwo"></div>
       <div v-if="visible" class="hdLine"></div>
+      <div v-if="visible" class="hdLineTwo"></div>
       <div v-if="visible" class="ksLine"></div>
       <div v-if="visible" class="bbLine"></div>
       <div v-if="visible" class="bbLineTwo"></div>
       <div v-if="visible" class="bbLineThree"></div>
+      <div v-if="visible" class="jmsLine"></div>
+      <div v-if="visible" class="jmsLineTwo"></div>
       <div class="databoard">
         <db-header class="db-header"></db-header>
         <div class="db-body">
@@ -58,19 +61,19 @@ import StdChart from "./dashboard/charts/StdChart.vue";
 
 const LOCATIONS = [
   // 佳木斯
-  { x: 67, y: 20, tx: 67, ty: 26,  path: 'copilot/jmsIndex' },
+  { x: 67, y: 20, tx: 60, ty: 29,  path: 'copilot/jmsIndex' },
   // 成都
-  { x: 46, y: 56,tx:40,ty:93, path: 'copilot/cdIndex' },
+  { x: 46, y: 56,tx:46,ty:93, path: 'copilot/cdIndex' },
   // 蚌埠1
-  { x: 60, y: 52, tx: 33, ty: 48.3, path: 'copilot/bbIndex' },
+  { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'copilot/bbIndex' },
   // 蚌埠2
-  { x: 61, y: 53,tx:34,ty:68, path: 'copilot/ksIndex' },
+  { x: 61, y: 53,tx:39,ty:68, path: 'copilot/ksIndex' },
   // 江西 瑞昌
   { x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' },
   // 湖南 株洲
   { x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' },
   // 邯郸
-  { x: 58, y: 45, tx: 49, ty: 34, path: 'copilot/hdIndex' },
+  { x: 58, y: 45, tx: 47, ty: 34, path: 'copilot/hdIndex' },
 ];
 
 export default {
@@ -115,6 +118,14 @@ export default {
     }
   },
   mounted() {
+    // var w = window.screen.width;
+    // var zoom = w / 1920;
+    // let screen = document.getElementById("map-container")
+    // console.log(screen);
+    // screen.style.zoom = zoom
+    //   // "zoom": ,
+    // screen.style.transform = `scale(" + ${zoom} + ")`
+    // };
     this.$store.dispatch("copilot/initHome").then((res) => {
       this.$nextTick(() => {
         this.initPins();
@@ -131,7 +142,42 @@ export default {
   },
   methods: {
     initPins() {
+      // const cdLine = document.createElement("div");
+      // const zzLine = document.createElement("div");
+      // const rcLine = document.createElement("div");
+      // const rcLineTwo = document.createElement("div");
+      // const hdLine = document.createElement("div");
+      // const ksLine = document.createElement("div");
+      // const bbLine = document.createElement("div");
+      // const bbLineTwo = document.createElement("div");
+      // const bbLineThree = document.createElement("div");
+      // cdLine.className = "cdLine";
+      // cdLine.style.left = `46.71%`;
+      // cdLine.style.top = `59%`;
+      // zzLine.className = "zzLine";
+      // zzLine.style.left = `56.8%`;
+      // zzLine.style.top = `60.8%`;
+      // rcLine.className = "rcLine";
+      // rcLine.style.left = `66.8%`;
+      // rcLine.style.top = `52%`;
+      // rcLineTwo.className = "rcLineTwo";
+      // rcLineTwo.style.left = `58.7%`;
+      // rcLineTwo.style.top = `34%`;
+      // hdLine.className = "hdLine";
+      // ksLine.className = "ksLine";
+      // bbLine.className = "bbLine";
+      // bbLineTwo.className = "bbLineTwo";
+      // bbLineThree.className = "bbLineThree";
 
+      // document.getElementById("map-container").appendChild(cdLine);
+      // document.getElementById("map-container").appendChild(zzLine);
+      // document.getElementById("map-container").appendChild(rcLine);
+      // document.getElementById("map-container").appendChild(rcLineTwo);
+      // document.getElementById("map-container").appendChild(hdLine);
+      // document.getElementById("map-container").appendChild(ksLine);
+      // document.getElementById("map-container").appendChild(bbLine);
+      // document.getElementById("map-container").appendChild(bbLineTwo);
+      // document.getElementById("map-container").appendChild(bbLineThree);
       // console.log(" this.homeStore", this.$store.getters.home);
       LOCATIONS.map((loc) => {
         console.log("loc", loc);
@@ -143,7 +189,7 @@ export default {
           this.showHint(loc);
         // });
         // pin.addEventListener("mouseleave", () => {
-          // this.closeHint();
+        //   this.closeHint();
         // });
         // pin.addEventListener("click", () => {
         //   this.$router.push({
@@ -168,7 +214,7 @@ export default {
         ],
       };
       if (position === LOCATIONS[0]) {
-        templateInfo.companyName = "佳木斯中建材光电材料有限公司";
+        templateInfo.companyName = "佳木斯中建材";
         this.jmsHintPosition = position;
         templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
@@ -177,7 +223,7 @@ export default {
         this.jmsInfo = templateInfo;
       } else if (position === LOCATIONS[1]) {
         this.cdHintPosition = position;
-        templateInfo.companyName = "成都中建材光电材料有限公司";
+        templateInfo.companyName = "成都中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
         templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
@@ -185,7 +231,7 @@ export default {
         this.cdInfo = templateInfo;
       } else if (position === LOCATIONS[2]) {
         this.bbHintPosition = position;
-        templateInfo.companyName = "蚌埠兴科玻璃有限公司";
+        templateInfo.companyName = "蚌埠兴科";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
         templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
@@ -193,7 +239,7 @@ export default {
         this.bbInfo = templateInfo;
       } else if (position === LOCATIONS[3]) {
         this.ksHintPosition = position;
-        templateInfo.companyName = "凯盛光伏材料有限公司（本部）";
+        templateInfo.companyName = "凯盛光伏";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
         templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
@@ -201,7 +247,7 @@ export default {
         this.ksInfo = templateInfo;
       } else if (position === LOCATIONS[4]) {
         this.rcHintPosition = position;
-        templateInfo.companyName = "瑞昌中建材光电材料有限公司";
+        templateInfo.companyName = "瑞昌中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[0];
         templateInfo.items[1].value = this.homeStore.chipOutput.current[0];
@@ -209,7 +255,7 @@ export default {
         this.info = templateInfo;
       } else if (position === LOCATIONS[5]) {
         this.zzHintPosition = position;
-        templateInfo.companyName = "中建材（株洲）光电材料有限公司";
+        templateInfo.companyName = "株洲中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
         templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
@@ -217,7 +263,7 @@ export default {
         this.zzInfo = templateInfo;
       } else if (position === LOCATIONS[6]) {
         this.hdHintPosition = position;
-        templateInfo.companyName = "中建材（邯郸）光电材料有限公司";
+        templateInfo.companyName = "邯郸中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
         templateInfo.items[2].value = this.homeStore.chipInvest.current[1];
         templateInfo.items[1].value = this.homeStore.chipOutput.current[1];
@@ -248,86 +294,6 @@ export default {
   background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
   // background-size: cover;
   position: relative;
-  .cdLine{
-    position: absolute;
-    left: 46.71%;
-    width: 2px;
-    top: 59%;
-    height: 148px;
-    border: 2px dashed #FFCF00;
-  }
-     .zzLine {
-       position: absolute;
-       left: 56.8%;
-       width: 2px;
-       top: 60.8%;
-       // x: 60, y: 58,
-       height: 148px;
-       border: 2px dashed #FFCF00;
-     }
-     .rcLine {
-       position: absolute;
-       left: 61%;
-       width: 100px;
-       top: 61.5%;
-        // x: 60, y: 58,
-       height: 1px;
-       border: 2px dashed #FFCF00;
-     }
-      .rcLineTwo {
-       position: absolute;
-       left: 66.8%;
-       width: 1px;
-       top: 52%;
-        // x: 60, y: 58,
-       height: 90px;
-       border: 2px dashed #FFCF00;
-     }
-      .hdLine {
-       position: absolute;
-       left: 58.7%;
-       width: 1px;
-       top: 34%;
-        // x: 60, y: 58,
-       height: 100px;
-       border: 2px dashed #FFCF00;
-     }
-      .ksLine {
-       position: absolute;
-       left: 43.2%;
-       width: 350px;
-       top: 56.8%;
-        // x: 60, y: 58,
-       height: 1px;
-       border: 2px dashed #FFCF00;
-     }
-     .bbLine{
-        position: absolute;
-          left: 42.4%;
-          width: 350px;
-          top: 55.5%;
-          // x: 60, y: 58,
-          height: 1px;
-          border: 2px dashed #FFCF00;
-     }
-      .bbLineTwo{
-        position: absolute;
-          left: 42.4%;
-          width: 1px;
-          top: 48%;
-          // x: 60, y: 58,
-          height: 70px;
-          border: 2px dashed #FFCF00;
-     }
-     .bbLineThree{
-        position: absolute;
-          left: 40%;
-          width: 40px;
-          top: 48%;
-          // x: 60, y: 58,
-          height: 1px;
-          border: 2px dashed #FFCF00;
-     }
   .databoard {
     position: absolute;
     top: 0;
@@ -358,6 +324,133 @@ export default {
 </style>
 
 <style>
+.cdLine {
+  display: inline-block;
+  position: absolute;
+  left: 46.71%;
+  width: 2px;
+  top: 59%;
+  height: 148px;
+  border: 2px dashed #FFCF00;
+}
+
+.zzLine {
+  display: inline-block;
+  position: absolute;
+  left: 56.8%;
+  width: 2px;
+  top: 60.8%;
+  /* x: 60, y: 58, */
+  height: 148px;
+  border: 2px dashed #FFCF00;
+}
+
+.rcLine {
+  display: inline-block;
+  position: absolute;
+  left: 61%;
+  width: 100px;
+  top: 61.5%;
+  /* x: 60, y: 58, */
+    height: 1px;
+  border: 2px dashed #FFCF00;
+}
+
+.rcLineTwo {
+  position: absolute;
+  left: 66.8%;
+  width: 1px;
+  top: 52%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 90px;
+  border: 2px dashed #FFCF00;
+}
+
+.hdLine {
+  position: absolute;
+  left: 58.7%;
+  width: 1px;
+  top: 34%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 100px;
+  border: 2px dashed #FFCF00;
+}
+.hdLineTwo {
+  position: absolute;
+  left: 53%;
+  width: 90px;
+  top: 34%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+.ksLine {
+  position: absolute;
+  left: 43.2%;
+  width: 350px;
+  top: 56.8%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+
+.bbLine {
+  position: absolute;
+  left: 42.4%;
+  width: 350px;
+  top: 55.5%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+
+.bbLineTwo {
+  position: absolute;
+  left: 42.4%;
+  width: 1px;
+  top: 48%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 70px;
+  border: 2px dashed #FFCF00;
+}
+
+.jmsLine {
+  position: absolute;
+  left: 67.8%;
+  width: 1px;
+  top: 24%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 40px;
+  border: 2px dashed #FFCF00;
+}
+
+.jmsLineTwo {
+  position: absolute;
+  left: 65.4%;
+  width: 50px;
+  top: 28.5%;
+  display: inline-block;
+    /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+.bbLineThree {
+  position: absolute;
+  left: 40%;
+  width: 40px;
+  top: 48%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
 .pin {
   display: inline-block;
   position: absolute;