ningbobang/scene/public/static/js/loadCAD.js

window.grendCAD = (function grendCAD() {
  let initFloor;
  let initScript;
  let initDOM;
  let point, dire;

  window.cad = {
    setSign: function (p, d) {
      point = p;
      dire = d;
    },
  };

  function loadScript(cb) {
    if (initScript) return cb();

    let $script = document.createElement("script");
    $script.src = "//www.4dmodel.com/CAD/bundle.js";
    $script.onload = function () {
      initScript = true;
      cb();
    };

    document.documentElement.appendChild($script);
  }

  function loadDOM($parent) {
    if (initDOM) return initDOM;
    let $layer = document.createElement("div");
    let $cad = document.createElement("div");
    $layer.className = "cad";
    $cad.id = "cad";
    $layer.appendChild($cad);

    let style = document.createElement("style");
    style.innerHTML = `
      .cad {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 180px;
        height: 180px;
        background:  #0f4a619d;
        pointer-events: none;
        
      }
      .name {
        width: 100%;
        height: 20px !important;
        color: white;
        font-size: 14px;
        text-align:center;
        margin-top: 10px;
      }

      .cad > div {
        width: 100%;
        height: 100%;
      }

     

      @media only screen and (max-width: 1000px) { 
        .cad {
          position: absolute;
          left:auto;
          transform: translate(0, 0);
          right: 10px;
          top: 10px;
          width: 120px;
          height: 120px;
          background:  #0f4a619d;
          border-radius: 5px;
          border: 2px solid #c89d45;
          }
        .name {
          font-size: 12px;
        }
      }
    `;

    document.documentElement.appendChild(style);
    $("body").append($layer);
    $parent.appendChild(style);
    $parent.appendChild($layer);
    return $layer;
  }

  function setStyle(signColor, borderColor, borderWidth) {
    cad.setDefaultPointStyle({
      fillColor: "rgba(0,0,0,0)",
      storkeColor: "rgba(0,0,0,0)",
    });

    console.log(borderWidth);
    cad.setDefaultLineStyle({
      width: borderWidth,
      color: borderColor,
    });

    cad.setDefaultSignStyle({
      color: signColor,
    });
  }

  return function (floor, $parent, signColor, borderColor, borderWidth) {
    if (initFloor) {
      console.log("cache");
      return setStyle(signColor, borderColor, borderWidth);
    }
    console.log("load");
    initFloor = floor;

    loadScript(function () {
      let $layer = loadDOM($parent);

      $layer.style.visibility = "hidden";
      window.cad = structureCAD({
        data: {
          block: [],
          column: [],
          door: [],
          hole: [],
          segment: [],
          "vertex-xy": [],
          "vertex-z": [],
        },
        layer: $layer.querySelector("#cad"),
        edit: false,
      });

      setStyle(signColor, borderColor, borderWidth);
      cad.hideDire();
      cad.hideGauge();

      console.log("loadData");
      cad.loadData(initFloor);
      if (point && dire) {
        window.cad.setSign(point, dire);
      }
      $layer.style.visibility = "visible";
    });
  };
})();

$.ajax({
  url: g_Prefix + "data/" + window.number + "/someData.json" + "?" + Date.now(),
  method: "GET",
  success(data) {
    if (!data.showCad) return;

    $.ajax({
      url: "//super.4dage.com/data/" + window.number + "/floor.json",
      method: "GET",
      success(res) {
        grendCAD(
          res,
          document.querySelector("body"),
          data.cadSignColor,
          data.cadBorderColor,
          data.cadBorderWidth
        );
      },
    });
  },
});