yudao-init/src/views/index.vue

<template>
  <div class="dashboard-factory-all">
    <div id="map-container">
      <!-- <div v-if="visible" class="cdLine"></div> -->
      <!-- <div v-if="visible" class="zzLine"></div> -->
      <!-- <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">
          <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="rcHintPosition" />
    <!-- <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" /> -->
    <!-- <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" /> -->
    <hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
    <!-- <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" /> -->
    <!-- <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" /> -->
    <!-- <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" /> -->
  </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, tx: 60, ty: 29, path: 'factoryData/jmsIndex' },
  // 成都
  // { x: 46, y: 56, tx: 46, ty: 93, path: 'factoryData/cdIndex' },
  // 蚌埠1
  // { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'factoryData/bbIndex' },
  // 蚌埠2
  // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
  // 江西 瑞昌
  { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
  // 湖南 株洲
  // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
  // 邯郸
  { x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
];
// rcLine.style.left = `66.8%`;
// rcLine.style.top = `52%`;
// rcLineTwo.className = "rcLineTwo";
// rcLineTwo.style.left = `58.7%`;
// rcLineTwo.style.top = `34%`;
export default {
  name: "Index",
  components: {
    CompanyInfo,
    ksCompanyInfo: CompanyInfo,
    hdCompanyInfo: CompanyInfo,
    bbCompanyInfo: CompanyInfo,
    cdCompanyInfo: CompanyInfo,
    zzCompanyInfo: CompanyInfo,
    jmsCompanyInfo: CompanyInfo,
    DbHeader: DashboardHeader,
    DbContainer: Container,
    FtoChart,
    ChipInvestChart,
    ChipYieldChart,
    BipvChart,
    StdChart,
  },
  data() {
    return {
      // homeStore:undefined,
      visible: false,
      hintPosition: null,
      zzHintPosition: null,
      ksHintPosition: null,
      bbHintPosition: null,
      hdHintPosition: null,
      cdHintPosition: null,
      jmsHintPosition: null,
      ftoKey: Math.random(),
      chipInvestKey: Math.random(),
      chipYieldKey: Math.random(),
      stdKey: Math.random(),
      bipvKey: Math.random(),
    };
  },
  computed: {
    homeStore() {
      return this.$store.getters.home
    }
  },
  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();
        // 调整 echarts 大小
        window.onresize = () => { };
      })
    })

  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      store.dispatch("app/closeSideBar", { withoutAnimation: true });
    });
  },
  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);
        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();
        // });
        // pin.addEventListener("click", () => {
        //   this.$router.push({
        //     path:loc.path
        //   })
        // });
        document.getElementById("map-container").appendChild(pin);
      });
    },
    closeHint() {
      this.visible = false;
      this.hintPosition = null;
    },
    showHint(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 = "佳木斯中建材";
        // this.jmsHintPosition = position;
        // templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
        // templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
        // templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
        // templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
        // this.jmsInfo = templateInfo;
      // } else if (position === LOCATIONS[1]) {
        // this.cdHintPosition = position;
        // 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];
        // templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
        // this.cdInfo = templateInfo;
      // } else if (position === LOCATIONS[2]) {
        // this.bbHintPosition = position;
        // 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];
        // templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
        // this.bbInfo = templateInfo;
      // } else if (position === LOCATIONS[3]) {
        // this.ksHintPosition = position;
        // 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];
        // templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
        // this.ksInfo = templateInfo;
      // }
        (position === LOCATIONS[0]) {
        const rcLine = document.createElement("div");
        const rcLineTwo = document.createElement("div");
        rcLine.className = "rcLine";
        rcLine.style.left = `${position.lx}%`;
        rcLine.style.top = `${position.ly}%`;
        rcLineTwo.className = "rcLineTwo";
        rcLineTwo.style.left = `${position.ltx}%`;
        rcLineTwo.style.top = `${position.lty}%`;
        document.getElementById("map-container").appendChild(rcLine);
        document.getElementById("map-container").appendChild(rcLineTwo);
        this.rcHintPosition = position;
        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];
        templateInfo.items[3].value = this.homeStore.stdOutput.current[0];
        this.info = templateInfo;
      // } else if (position === LOCATIONS[5]) {
        // this.zzHintPosition = position;
        // 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];
        // templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
        // this.zzInfo = templateInfo;
      } else if (position === LOCATIONS[1]) {
        const hdLine = document.createElement("div");
        const hdLineTwo = document.createElement("div");
        hdLine.className = "hdLine";
        hdLine.style.left = `${position.lx}%`;
        hdLine.style.top = `${position.ly}%`;
        hdLineTwo.className = "hdLineTwo";
        hdLineTwo.style.left = `${position.ltx}%`;
        hdLineTwo.style.top = `${position.lty}%`;
        document.getElementById("map-container").appendChild(hdLine);
        document.getElementById("map-container").appendChild(hdLineTwo);
        this.hdHintPosition = position;
        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];
        templateInfo.items[3].value = this.homeStore.stdOutput.current[1];
        this.hdInfo = templateInfo
      }
      this.$nextTick(() => {
        this.visible = true;
      });
    },
  },
};
</script>
<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%;
  // background-size: cover;
  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>
.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: 7.9vw;
  /* 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: 5vw;
  border: 2px dashed #FFCF00;
}

.hdLine {
  position: absolute;
  /* left: 58.7%; */
  width: 1px;
  /* top: 34%; */
  display: inline-block;
  /* // x: 60, y: 58, */
  height: 6vw;
  border: 2px dashed #FFCF00;
}
.hdLineTwo {
  position: absolute;
  /* left: 53%; */
  width: 5vw;
  /* 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;
  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>