xijuncode/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 $outerDiv = document.createElement('div')
    let $layer = document.createElement('div')
    let $cad = document.createElement('div')
    let $jiantou = document.createElement('div')
    let $jtimg = document.createElement('img')
    $jtimg.src="static/images/phone_step_05.png"
    $jiantou.id = 'cadimg'



    $layer.className = 'cad'
    $jiantou.className = 'jiantou'
    $outerDiv.className = 'cadouter'

    $cad.id = 'cad'
    $layer.appendChild($cad)
    $jiantou.appendChild($jtimg)
    $outerDiv.appendChild($layer)


    let wh= 200


    let style = document.createElement('style')
    style.innerHTML = `
      .jiantou{
        position: fixed;
        width: 40px;
        height: 50px;
        right: 40px;
        background: rgba(0, 0, 0, .6);
        top: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
      }
      .jiantou>img{
        width:30%;
      }
      .jiantouactive{
        right: 0;
        transform: rotate(180deg);
      }
      .cadouter {
        position: absolute;
        right: 80px;
        top: 46px;
        width: ${wh}px;
        height: ${wh}px;
        background: rgba(0, 0, 0, .6);
        border-radius: 5px 0 5px 5px;
        overflow: hidden;
      }

      .cadouteractive{
        right: 200%;
        
      }

      .cad {
        position: absolute;
        left: 50%;
        top: 50%;
        right:unset;
        transform: translate(-50%, -50%);
        width: ${wh*1.4}px;
        height: ${wh*1.4}px;
      }

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

      @media only screen and (max-width: 600px) { 
        .cadouter,.jiantou{
          display: none!important;
        }
        .cad {
            position: absolute;
            left: 16px;
            top: 65px;
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, .3);
            border-radius: 5px;
        }
      }
    `

    document.documentElement.appendChild(style)
    document.documentElement.appendChild($outerDiv)
    document.documentElement.appendChild($jiantou)

    
    $parent.appendChild(style)
    $parent.appendChild($outerDiv)
    $parent.appendChild($jiantou)

    $($jiantou).click(()=>{
      $($jiantou).toggleClass('jiantouactive')
      $($outerDiv).toggleClass('cadouteractive')

      
    })
    return $outerDiv
  }


  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.documentElement, data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
      }
    })
  }
})