<!-- 电路图编辑器页面 -->
<template>
  <div>
    <div id="components-layout"></div>
  </div>
</template>
<script>
import api from "@/api/site/systemImg";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      svgInfoData: [], //接口获取到的组件数据
      svgLists: [], //svg列表
      AnalogData: [],
    };
  },
  methods: {
    testE() {
      this.svgLists = this.AnalogData;
    },
    testH() {
      localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
      this.$router.push({
        path: "/Power_diagram",
        name: "power_diagram",
      });
    },
  },
  mounted() {
    let _this = this;
    //请求接口获取组件
    this.$axios
      .get(window.PLATFROM_CONFIG.ione)
      .then(function (response) {
        _this.AnalogData = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });

    setTimeout(() => {
      this.testE();
      this.testH();
    }, 1000);
  },
  created() {
    let _this = this;
// _this.$store.state.siteId
    api
      .gethookupComponentBasics({
        siteId: 1,
      })
      .then((requset) => {
        if (requset.status === "SUCCESS") {
          console.log(requset.data)
          // this.svgInfoData = requset.data;
        } else {
          ElMessage.error(requset.msg);
        }
      });
    //请求接口获取组件
    this.$axios
      .get(window.PLATFROM_CONFIG.Interface)
      .then(function (response) {
        _this.svgInfoData = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f2f2f2;
  box-shadow: 1px 1px 5px #333 inset;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #444;
}
.ant-layout {
  background: transparent;
}
.pageMain {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.2rem;
  bottom: 0;
  overflow: auto;
}

.centerContain {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  overflow: auto !important;
  overflow-x: auto !important;
  transition: all 0.3s;
  z-index: 111;

  &.fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .canvas-content {
    // width: 1920px;
    // height: 1080px;
    width: 100%;
    height: 100%;
  }
  .btns-content {
    position: fixed;
    bottom: 10px;
    right: 320px;
    left: 280px;
    button {
      margin-left: 10px;
    }
  }
}
</style>
