src/views/dashboard/components/CompanyInfo.vue

@@ -12,7 +12,7 @@
     <h2>{{ info.companyName }}</h2>
     <ul>
       <li v-for="item in info.items" :key="item.label">
-        {{ item.label }} {{ item.value }}
+        {{ item.label }} {{ item.value | currency }}
       </li>
     </ul>
   </div>
@@ -34,6 +34,11 @@ export default {
       default: () => ({ x: 0, y: 0 }),
     },
   },
+  filters: {
+    currency(value) {
+      return value.toLocaleString();
+    },
+  },
   data() {
     return {};
   },

src/views/index.vue

@@ -49,6 +49,21 @@ import FtoChart from "./dashboard/charts/Fto.vue";
 import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
 import BipvChart from "./dashboard/charts/Bipv.vue";
 
+const LOCATIONS = [
+  // 佳木斯
+  { 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 },
+];
+
 export default {
   name: "Index",
   components: {
@@ -81,26 +96,13 @@ export default {
   },
   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) => {
+      LOCATIONS.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 });
+          this.showHint(loc);
         });
         pin.addEventListener("mouseleave", () => {
           this.closeHint();
@@ -114,21 +116,32 @@ export default {
     },
     showHint(position) {
       this.hintPosition = position;
-      this.info = {
-        // companyName: "凯盛光伏材料有限公司（本部）",
-        companyName: "蚌埠兴科玻璃有限公司",
-        // companyName: "成都中建材光电材料有限公司",
-        // companyName: "瑞昌中建材光电材料有限公司",
-        // companyName: "邯郸中建材光电材料有限公司",
-        // companyName: "中建材（株洲）光电材料有限公司",
-        // companyName: "佳木斯中建材光电材料有限公司",
+      const templateInfo = {
+        companyName: "",
         items: [
-          { label: "FTO投入", value: "1,200" },
-          { label: "芯片产出", value: "2,200" },
-          { label: "芯片投入", value: "1,300" },
-          { label: "标准组件产出", value: "1,100" },
+          { label: "FTO投入", value: Math.floor(Math.random() * 1000000) },
+          { label: "芯片产出", value: Math.floor(Math.random() * 10000000) },
+          { label: "芯片投入", value: Math.floor(Math.random() * 1000000) },
+          { label: "标准组件产出", value: Math.floor(Math.random() * 1000000) },
         ],
       };
+
+      if (position === LOCATIONS[0]) {
+        templateInfo.companyName = "佳木斯中建材光电材料有限公司";
+      } else if (position === LOCATIONS[1]) {
+        templateInfo.companyName = "成都中建材光电材料有限公司";
+      } else if (position === LOCATIONS[2]) {
+        templateInfo.companyName = "蚌埠兴科玻璃有限公司";
+      } else if (position === LOCATIONS[3]) {
+        templateInfo.companyName = "凯盛光伏材料有限公司（本部）";
+      } else if (position === LOCATIONS[4]) {
+        templateInfo.companyName = "瑞昌中建材光电材料有限公司";
+      } else if (position === LOCATIONS[5]) {
+        templateInfo.companyName = "中建材（株洲）光电材料有限公司";
+      }
+
+      this.info = templateInfo;
+
       this.$nextTick(() => {
         this.visible = true;
       });