add home-map

src/views/dashboard/components/CompanyInfo.vue

@@ -0,0 +1,110 @@
+<!-- 
+    filename: CompanyInfo.vue
+    author: liubin
+    date: 2024-04-08 15:27:04
+    description: 
+-->
+
+<template>
+  <div class="company-info" :style="styles">
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <h2>{{ info.companyName }}</h2>
+    <ul>
+      <li v-for="item in info.items" :key="item.label">
+        {{ item.label }} {{ item.value }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CompanyInfo",
+  components: {},
+  props: {
+    info: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    position: {
+      type: Object,
+      required: true,
+      default: () => ({ x: 0, y: 0 }),
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    styles() {
+      return {
+        left: `${this.position.x}%`,
+        top: `${this.position.y}%`,
+      };
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: 优设标题黑;
+  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
+}
+
+.company-info {
+  color: #fff;
+  background: #4443;
+  position: absolute;
+  z-index: 9999;
+  padding: 14px;
+  backdrop-filter: blur(2px);
+  border-radius: 4px;
+  transform: translate(-50%, -100%);
+  box-shadow: inset 0 0 12px 2px #fff3;
+}
+
+h2 {
+  margin: 6px 0;
+  font-family: 优设标题黑;
+  color: #fff;
+  font-size: 24px;
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.corner {
+  position: absolute;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.bl {
+  left: 0;
+  border-left: 3px solid #ffa600;
+  border-bottom: 3px solid #ffa600;
+}
+
+.br {
+  right: 0;
+  border-right: 3px solid #ffa600;
+  border-bottom: 3px solid #ffa600;
+}
+</style>

src/views/index.vue

@@ -1,35 +1,167 @@
 <template>
   <div class="dashboard-factory-all">
-    <h1>Index</h1>
+    <div id="map-container">
+      <div class="databoard">
+        <div class="db-header"></div>
+        <div class="db-body">
+          <div class="db-left"></div>
+          <div class="db-right"></div>
+        </div>
+      </div>
+    </div>
+    <company-info
+      v-if="visible"
+      :info="info"
+      :position="hintPosition"
+      @close="closeHint"
+    />
   </div>
 </template>
 
 <script>
+import store from "@/store";
+import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
+
 export default {
   name: "Index",
-  components: {},
+  components: { CompanyInfo },
   data() {
-    return {};
+    return {
+      visible: false,
+      hintPosition: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initPins();
+    });
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      store.dispatch("app/closeSideBar", { withoutAnimation: true });
+    });
+  },
+  methods: {
+    initPins() {
+      [
+        // 佳木斯
+        { x: 67, y: 20 },
+        // 成都
+        { x: 46, y: 56 },
+        // 蚌埠1
+        { x: 60, y: 52 },
+        // 蚌埠2
+        { x: 61, y: 53 },
+        // 江西 瑞昌
+        { x: 60, y: 58 },
+        // 湖南 株洲
+        { x: 56, y: 60 },
+      ].map((loc) => {
+        const pin = document.createElement("div");
+        pin.className = "pin";
+        pin.style.left = `${loc.x}%`;
+        pin.style.top = `${loc.y}%`;
+        pin.addEventListener("mouseenter", () => {
+          this.showHint({ x: loc.x, y: loc.y });
+        });
+        pin.addEventListener("mouseleave", () => {
+          this.closeHint();
+        });
+        document.getElementById("map-container").appendChild(pin);
+      });
+    },
+    closeHint() {
+      this.visible = false;
+      this.hintPosition = null;
+    },
+    showHint(position) {
+      this.hintPosition = position;
+      this.info = {
+        // companyName: "凯盛光伏材料有限公司（本部）",
+        companyName: "蚌埠兴科玻璃有限公司",
+        // companyName: "成都中建材光电材料有限公司",
+        // companyName: "瑞昌中建材光电材料有限公司",
+        // companyName: "邯郸中建材光电材料有限公司",
+        // companyName: "中建材（株洲）光电材料有限公司",
+        // companyName: "佳木斯中建材光电材料有限公司",
+        items: [
+          { label: "FTO投入", value: "1,200" },
+          { label: "芯片产出", value: "2,200" },
+          { label: "芯片投入", value: "1,300" },
+          { label: "标准组件产出", value: "1,100" },
+        ],
+      };
+      this.$nextTick(() => {
+        this.visible = true;
+      });
+    },
   },
-  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
 .dashboard-factory-all {
   background: #151516;
-  // flex: 1;
   position: fixed;
   top: 0;
   left: 0;
-  // position: absolute;
-  // top: -8px;
-  // left: -16px;
-  // height: calc(100% + 8px);
-  // width: calc(100% + 30px);
   height: 100vh;
   width: 100vw;
   z-index: 1000;
   color: #fff;
 }
+
+#map-container {
+  height: 100%;
+  background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
+  position: relative;
+
+  .databoard {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #15151633;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .db-header {
+    height: 88px;
+    background: #f001;
+  }
+
+  .db-body {
+    flex: 1;
+    background: #0f01;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .db-left,
+  .db-right {
+    background: #00f2;
+    width: 420px;
+    padding: 20px;
+  }
+}
+</style>
+
+<style>
+.pin {
+  display: inline-block;
+  position: absolute;
+  z-index: 9998;
+  width: 32px;
+  height: 32px;
+  background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%;
+  transition: transform 0.1s linear;
+  cursor: pointer;
+}
+
+.pin:hover {
+  transform: scale(1.2);
+}
 </style>