PC_FiveFollowing/src/views/site/Power_diagram.vue

<template>
  <section class="mainbox">
    <div style="overflow: auto; position: relative">
      <div class="svg-contain">
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="
            background-color: rgba(0, 244, 253, 0.1);
            border: 1px solid rgba(0, 244, 253, 0.1);
          "
          viewBox="0 0 1920 1080"
          width="100%"
          height="100%"
        >
          <defs />
          <g
            style="cursor: pointer"
            v-for="(item, index) in svgLists"
            :key="item"
            :id="item.id"
            @mousedown="
              MousedownSvg(
                item.id,
                index,
                item.svgPositionX,
                item.svgPositionY,
                $event
              )
            "
            :title="item.title"
            :type="item.type"
            :transform="
              'translate(' +
              item.svgPositionX +
              ',' +
              item.svgPositionY +
              ')' +
              'rotate(' +
              item.angle +
              ')'
            "
          >
            <SvgComponents
              :svg_color="item.svgColor"
              :svgtype="item.type"
              :stroke-width="item.width"
              :text="item.svgText"
              :font-size="item.fontSize"
              :height="item.height"
              :svgInfoData="svgInfoData"
            ></SvgComponents>
          </g>
        </svg>
      </div>
      <div class="btns-content">
        <a-button type="primary" @click="testF">模拟硬件</a-button>
        <a-button type="primary" @click="testG">取消模拟硬件</a-button>
      </div>
    </div>
  </section>
</template>
<script>
import SvgComponents from "@/components/SvgComponents.vue";
export default {
  components: { SvgComponents },
  data() {
    return {
      svgLists: [],
      svgInfoData: [],
      analogDataTimer: "", //模拟数据定时器
      userInfo: "",
      editable: false,
    };
  },
  mounted() {},
  methods: {
    test(e) {
      console.log("刷新或关闭", e);
      this.$router.push({
        path: "/CircuitEdit",
        name: "circuitEdit",
      });
    },
    testF() {
      //找出所有断路器
      let anyCircuitBreakerList = this.svgLists.filter(
        (f) => f.type == "CircuitBreakerSvg"
      );
      //找出所有的电线开关
      let anyWireBreakList = this.svgLists.filter(
        (f) => f.type == "WireConnectionSvg" || f.type == "WireBreakOffSvg"
      );
      //查找所有表格值
      let anyTable = this.svgLists.filter((f) => f.type == "TableSvg")[0];
      let anyTableList;
      if (anyTable == "undefined" || anyTable == null) {
        anyTableList = [];
      } else {
        anyTableList = anyTable.tableData.map((m) => m.cols);
      }
      this.analogDataTimer = setInterval(function () {
        anyCircuitBreakerList.forEach((anyCircuitBreaker) => {
          //生成一个随机数
          let random = Math.round(Math.random() * 10);
          if (random < 5) {
            anyCircuitBreaker.svgColor = "#00FF00";
          } else {
            anyCircuitBreaker.svgColor = "#FF0000";
          }
        });
        anyWireBreakList.forEach((anyWireBreak) => {
          //生成一个随机数
          let random = Math.round(Math.random() * 10);
          if (random < 5) {
            anyWireBreak.type = "WireConnectionSvg";
            anyWireBreak.svgColor = "#FF0000";
          } else {
            anyWireBreak.type = "WireBreakOffSvg";
            anyWireBreak.svgColor = "#00FF00";
          }
        });
        anyTableList.forEach((anyTables) => {
          anyTables.forEach((anyTable) => {
            if (
              anyTable.type == "ff85bc7f-3b69-454f-8cf8-21c9f1903dd6" ||
              anyTable.id == "f8271273-d07d-4033-8b6c-6b52c04fe3e5" ||
              anyTable.id == "dc5931bc-7e8e-47f4-b28e-5bc42fb207da" ||
              anyTable.id == "560f5404-6539-422f-8fb9-77bac641e72b"
            ) {
              //生成一个随机数
              let random = Math.round(Math.random() * 100);
              anyTable.val = random;
            }
          });
        });
      }, 2000);
    },
    testG() {
      clearInterval(this.analogDataTimer);
    },
  },
  created() {
    var _this = this;
    window.addEventListener("beforeunload", (e) => this.test(e));
    _this.svgLists = JSON.parse(localStorage.getItem("svginfo"));
    //请求接口获取组件
    this.$axios
      .get("/InterfaceReturn.json")
      .then(function (response) {
        _this.svgInfoData = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  unmounted() {
    window.removeEventListener("beforeunload", (e) => this.test(e));
  },
};
</script>
<style scoped lang="less">
.svg-contain {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.2rem;
  bottom: 0;
}
.btns-content {
  position: fixed;
  left: 10px;
  bottom: 10px;
  button {
    margin-right: 10px;
  }
}
</style>