yudao-init/src/views/index.vue

<template>
  <div class="dashboard-factory-all">
    <div id="map-container">
      <div class="databoard">
        <db-header class="db-header"></db-header>
        <div class="db-body">
          <div class="db-left">
            <db-container
              icon="cube"
              title="FTO投入"
              @refresh="() => (ftoKey = Math.random())"
            >
              <fto-chart :key="ftoKey" />
            </db-container>
            <db-container
              icon="chip2"
              title="芯片投入"
              @refresh="() => (chipInvestKey = Math.random())"
            >
              <chip-invest-chart :key="chipInvestKey" />
            </db-container>
          </div>
          <div class="db-right">
            <db-container
              side="right"
              icon="chip"
              title="芯片产出"
              @refresh="() => (chipYieldKey = Math.random())"
            >
              <chip-yield-chart :key="chipYieldKey" />
            </db-container>
            <db-container
              side="right"
              icon="std"
              title="标准组件产出"
              @refresh="() => (stdKey = Math.random())"
            >
              <std-chart :key="stdKey" />
            </db-container>
            <db-container
              side="right"
              icon="bipv"
              title="BIPV产出"
              @refresh="() => (bipvKey = Math.random())"
            >
              <bipv-chart :key="bipvKey" />
            </db-container>
          </div>
        </div>
      </div>
    </div>
    <company-info
      v-if="visible"
      :info="info"
      :position="hintPosition"
      @close="closeHint"
    />
  </div>
</template>

<script>
import store from "@/store";
import DashboardHeader from "./dashboard/components/Header.vue";
import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
import Container from "./dashboard/components/Container.vue";
import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
import BipvChart from "./dashboard/charts/Bipv.vue";
import ChipYieldChart from "./dashboard/charts/ChipYield.vue";
import StdChart from "./dashboard/charts/StdChart.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 },
  // 邯郸
  { x: 58, y: 45 },
];

export default {
  name: "Index",
  components: {
    CompanyInfo,
    DbHeader: DashboardHeader,
    DbContainer: Container,
    FtoChart,
    ChipInvestChart,
    ChipYieldChart,
    BipvChart,
    StdChart,
  },
  data() {
    return {
      visible: false,
      hintPosition: null,
      ftoKey: Math.random(),
      chipInvestKey: Math.random(),
      chipYieldKey: Math.random(),
      stdKey: Math.random(),
      bipvKey: Math.random(),
    };
  },
  mounted() {
    this.$store.dispatch("copilot/initHome");

    this.$nextTick(() => {
      this.initPins();

      // 调整 echarts 大小
      window.onresize = () => {};
    });
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      store.dispatch("app/closeSideBar", { withoutAnimation: true });
    });
  },
  methods: {
    initPins() {
      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(loc);
        });
        pin.addEventListener("mouseleave", () => {
          this.closeHint();
        });
        document.getElementById("map-container").appendChild(pin);
      });
    },
    closeHint() {
      this.visible = false;
      this.hintPosition = null;
    },
    showHint(position) {
      const homeStore = this.$store.getters.home;
      this.hintPosition = position;
      const templateInfo = {
        companyName: "",
        items: [
          { label: "FTO投入", value: 0 }, // Math.floor(Math.random() * 1000000) },
          { label: "芯片产出", value: 0 }, // Math.floor(Math.random() * 10000000) },
          { label: "芯片投入", value: 0 }, // Math.floor(Math.random() * 1000000) },
          { label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
        ],
      };

      if (position === LOCATIONS[0]) {
        templateInfo.companyName = "佳木斯中建材光电材料有限公司";
        templateInfo.items[0].value = homeStore.ftoInvest.current[3];
        templateInfo.items[2].value = homeStore.chipInvest.current[3];
        templateInfo.items[1].value = homeStore.chipOutput.current[3];
        templateInfo.items[3].value = homeStore.stdOutput.current[3];
      } else if (position === LOCATIONS[1]) {
        templateInfo.companyName = "成都中建材光电材料有限公司";
        templateInfo.items[0].value = homeStore.ftoInvest.current[4];
        templateInfo.items[2].value = homeStore.chipInvest.current[4];
        templateInfo.items[1].value = homeStore.chipOutput.current[4];
        templateInfo.items[3].value = homeStore.stdOutput.current[4];
      } else if (position === LOCATIONS[2]) {
        templateInfo.companyName = "蚌埠兴科玻璃有限公司";
        templateInfo.items[0].value = homeStore.ftoInvest.current[6];
        templateInfo.items[2].value = homeStore.chipInvest.current[6];
        templateInfo.items[1].value = homeStore.chipOutput.current[6];
        templateInfo.items[3].value = homeStore.stdOutput.current[6];
      } else if (position === LOCATIONS[3]) {
        templateInfo.companyName = "凯盛光伏材料有限公司（本部）";
        templateInfo.items[0].value = homeStore.ftoInvest.current[5];
        templateInfo.items[2].value = homeStore.chipInvest.current[5];
        templateInfo.items[1].value = homeStore.chipOutput.current[5];
        templateInfo.items[3].value = homeStore.stdOutput.current[5];
      } else if (position === LOCATIONS[4]) {
        templateInfo.companyName = "瑞昌中建材光电材料有限公司";
        templateInfo.items[0].value = homeStore.ftoInvest.current[0];
        templateInfo.items[2].value = homeStore.chipInvest.current[0];
        templateInfo.items[1].value = homeStore.chipOutput.current[0];
        templateInfo.items[3].value = homeStore.stdOutput.current[0];
      } else if (position === LOCATIONS[5]) {
        templateInfo.companyName = "中建材（株洲）光电材料有限公司";
        templateInfo.items[0].value = homeStore.ftoInvest.current[2];
        templateInfo.items[2].value = homeStore.chipInvest.current[2];
        templateInfo.items[1].value = homeStore.chipOutput.current[2];
        templateInfo.items[3].value = homeStore.stdOutput.current[2];
      } else if (position === LOCATIONS[6]) {
        templateInfo.companyName = "中建材（邯郸）光电材料有限公司";
        templateInfo.items[0].value = homeStore.ftoInvest.current[1];
        templateInfo.items[2].value = homeStore.chipInvest.current[1];
        templateInfo.items[1].value = homeStore.chipOutput.current[1];
        templateInfo.items[3].value = homeStore.stdOutput.current[1];
      }

      this.info = templateInfo;

      this.$nextTick(() => {
        this.visible = true;
      });
    },
  },
};
</script>

<style>
.hideSidebar.mobile .dashboard-factory-all {
  left: 0 !important;
  width: 100vw !important;
}
</style>

<style lang="scss" scoped>
.dashboard-factory-all {
  background: #151516;
  position: fixed;
  top: 0;
  left: 54px;
  height: 100vh;
  width: calc(100vw - 54px);
  z-index: 1001;
  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%;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  .db-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }

  .db-left,
  .db-right {
    // width: 420px;
    width: 24vw;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>

<style>
.pin {
  display: inline-block;
  position: absolute;
  z-index: 9998;
  width: 1.702vw;
  height: 1.702vw;
  /* 
  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>