YZProjectCloud/yanzhu-bigscreen/src/views/bimManage.vue

<template>
  <div class="bim-manage main-page">
    <div id="bimManage" :key="elId">
      <div id="bimManageContainer" class="bimManageContainer"></div>
    </div>
    <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
      <transition name="left">
        <div class="data-content" v-show="leftShow">
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              项目概况
            </div>
          </div>
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              成本产值
            </div>
          </div>
          <div class="div-row">
            <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
          </div>
        </div>
      </transition>
      <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
    </div>
    <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
      <transition name="right">
        <div class="data-content" v-show="leftShow">
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              工程进度
            </div>
          </div>
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              安全检查
            </div>
          </div>
          <div class="div-row">
            <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 项目全景</div>
          </div>
        </div>
      </transition>
      <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
    </div>

    <div class="div-tools">
      <div class="tool-item" @click="resetScene">
        <div class="icon">
          <svg-icon icon-class="home" />
        </div>
        <span class="sp-text">默认视点</span>
      </div>

      <div class="tool-item" @click="changeDevicType(1)" :class="{ 'is-active': devicTypes.includes(1) }">
        <div class="icon">
          <svg-icon icon-class="videoMonitor" />
        </div>
        <span class="sp-text">视频监控</span>
      </div>
      <div class="tool-item" @click="changeDevicType(2)" :class="{ 'is-active': devicTypes.includes(2) }">
        <div class="icon">
          <svg-icon icon-class="pitMonitor" />
        </div>
        <span class="sp-text">基坑监控</span>
      </div>
      <div class="tool-item" @click="changeDevicType(3)" :class="{ 'is-active': devicTypes.includes(3) }">
        <div class="icon">
          <svg-icon icon-class="towerMonitor" />
        </div>
        <span class="sp-text">塔机监控</span>
      </div>
      <div class="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }">
        <div class="icon">
          <svg-icon icon-class="power" />
        </div>
        <span class="sp-text">电箱监控</span>
      </div>
    </div>
    <div class="test-box">
      <div class="tag-box box-type-3">
        <div class="tag-txt">
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
          <div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
        </div>
        <img src="bimImages/4.png" alt="" class="tag-bg-img" />
        <img src="bimImages/towerMonitor.png" class="tag-img" />
      </div>
    </div>

    <div class="test-box" style="left:400px">
      <div class='tag-box box-type-3'>
          
          <div class='tag-txt' >
            <table class="tb-power">
           <tr>
            <td></td>
            <td width="150">电压</td>
            <td width="150">电流</td>
            <td width="150">功率</td>
           </tr>
            <tr>
              <td>A向</td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
            <tr>
              <td>A向</td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
             <tr>
              <td>A向</td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
           </table> 
            
          </div>
          <img src='bimImages/4.png' alt='' class="tag-bg-img">
            <img src='bimImages/towerMonitor.png' class="tag-img">
        </div>
    </div>
    <video-dialog ref="videoDlg"></video-dialog>
  </div>
</template>

<script>
const css = `<style>
.tag-box {
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .tag-img {
        width: 20px;
        height: 20px;
        position: absolute;
        left:50%;
        bottom:55px;
        margin-left:-10px;
    }
    .tag-bg-img{
      width: 16px;
      height: 80px;
      margin-bottom:40px;
    }
    .tag-txt {
      color: #FFF;
      font-size: 12px;
      padding: 10px;
      background: #2b4d63de;
      border: 1px solid #75fbfdaa;
    }
    .tag-txt .data-item.red{
      color:red;
    }
    .tag-bg-img-1{
        width:21px;
        height:18px;
        position: absolute;
        bottom:40px;
        left:50%;
        margin-left:-11px;
    }
    .tag-img-1 {
        width: 20px;
        height: 20px;
        position: absolute;
        left:50%;
        bottom:55px;
        margin-left:-10px;
    }
    .box-type-1{
        height:80px;
        width:60px;
        display:block;
    }
    .tb-power{
      border-collapse: collapse;
    }
    .tb-power td{
      border:solid 1px #75fbfd33;
      padding:4px 8px;
      text-align:center;
    }
    </style>`;
import debounce from "lodash.debounce";
import videoDialog from './bim/videoDialog.vue'
export default {
  components: {
    videoDialog
  },
  data() {
    return {
      dpi: "",
      elId: 1,
      devicTypes: [1],
      viewPoint: null,
      project: null,
      addLabels: [],
      devices: [],
      showDevices: [],
      videoData: [],
      towerData: [],
      iotData: [],
      leftSrc: "./bimImages/arrow_left_retract.png",
      rightSrc: "./bimImages/arrow_right_retract.png",
      leftShow: true,
      towerWarning: [],
    };
  },
  beforeDestroy() {
    document.body.classList.remove("is-sapi");
  },
  mounted() {
    this.$store.dispatch("ChangeNav", 7);
    this.dpi = this.$dpi();
    window.addEventListener("resize", () => {
      if (this.dpi != this.$dpi()) {
        this.dpi = this.$dpi();
      }
    });
    this.$bus.$on(
      "projectChange",
      debounce((prj) => {
        this.selProject = prj;
        this.elId++;
        this.initEngine();
      })
    );
    this.selProject = this.$store.getters.selProject;
    console.log("----mount--->");
    document.body.classList.add("is-sapi");
    this.initEngine();
    this.$api.dict("device_tower_warning").then((d) => {
      this.towerWarning = d;
    });
  },
  methods: {
    arrowRetract() {
      if (this.leftShow == true) {
        this.rightSrc = "./images/arrow_right_open.png";
        this.leftSrc = "./images/arrow_left_open.png";
        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
        $("#arrowRight").animate({ right: 10 + "px" }, 300);
      } else {
        this.rightSrc = "./images/arrow_right_retract.png";
        this.leftSrc = "./images/arrow_left_retract.png";

        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
        $("#arrowRight").animate({ right: 490 + "px" }, 300);
      }
      this.leftShow = !this.leftShow;
    },

    loadDevicePosition() {
      this.$api.bim
        .devicePositionGet({
          projectId: this.selProject.id,
        })
        .then((res) => {
          let cnt = 0;
          this.devices = (res.data || [])
            .map((item) => {
              item.show = item.enabled != 0;
              item.position = this.$tryToJson(item.position, []);
              item.elId = (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
              return item;
            })
            .filter((item) => item.position.length == 3);
          this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
          this.clearLabels();
          this.addDeviceLabel();
          setTimeout(() => {
            this.loadDeviceData();
          }, 100);
        });
    },
    changeDevicType(n) {
      if (this.devicTypes.includes(n)) {
        let idx = this.devicTypes.indexOf(n);
        this.devicTypes.splice(idx, 1);
      } else {
        this.devicTypes.push(n);
      }
      this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
      this.clearLabels();
      this.addDeviceLabel();
      setTimeout(() => {
        this.loadDeviceData();
      }, 100);
    },
    AddLable: function (item) {
      let html = "";
      if (item.deviceType == 1) {
        html = this.getVideoHtml(item);
      } else if (item.deviceType == 2) {
        html = this.getPitHtml(item);
      } else if (item.deviceType == 3) {
        html = this.getTowerHtml(item);
      } else if (item.deviceType == 4) {
        html = this.getIotHtml(item);
      }

      window.bimMgrApi.Label.addBalloon({
        Html: html,
        ID: item.elId,
        Pivot: "2",
        Position: item.position,
        Title: item.name,
        MaxDistance: 1e6,
        onClick: (opt) => this.deviceClick(item, opt),
      });
      this.addLabels.push(item.elId);
    },
    deviceClick(item, opt) {
      if(item.deviceType==1){
        let obj=this.videoData.find(d=>d.id==item.deviceId)
        this.$refs.videoDlg.showDialog(item,obj)
        return;
      }
      console.log(item, opt);
    },
    addDeviceLabel() {
      this.showDevices.forEach((d) => {
        if (d.position && d.position.length > 0) {
          this.AddLable(d);
        }
      });
    },
    removeLabel(lbl) {
      if (this.addLabels.includes(lbl)) {
        window.bimMgrApi.Label.removeBalloon(lbl);
        let idx = this.addLabels.indexOf(lbl);
        this.addLabels.splice(idx, 1);
      }
    },
    clearLabels() {
      this.addLabels.forEach((id) => {
        window.bimMgrApi.Label.removeBalloon(id);
      });
      this.addLabels = [];
    },
    initEngine() {
      this.elId++;
      this.activeMenu = 0;
      setTimeout(() => {
        this.loadEngine();
      }, 10);
    },
    loadEngine() {
      window.bimMgrApi = new SAPI(
        {
          serverIP: window.config.serverIP, //服务ip地址
          port: window.config.port, //HTTP端口
          useHttps: window.config.useHttps, //使用Https
          container: "bimManageContainer", //[必须]容器id
          secretKey: window.config.secretKey,
          openEarth: window.config.openEarth, //[可选]开启Gis场景
          bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
          tintColor: window.config.tintColor, //[可选]osgb单体化颜色
          sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
          cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
        },
        () => {
          this.initSuccess = true;
          console.log("初始化成功");
          setTimeout(() => {
            this.initLoadModel();
          }, 10);
          let mapOptions = {
            imgs: {
              // 六面图片
              top: "/cdn/bim/sapi/img/top.png",
              bottom: "/cdn/bim/sapi/img/under.png",
              east: "/cdn/bim/sapi/img/east.png",
              south: "/cdn/bim/sapi/img/south.png",
              west: "/cdn/bim/sapi/img/west.png",
              north: "/cdn/bim/sapi/img/north.png",
            },
            offset: {
              // 屏幕坐标偏移
              corner: GLENavigationCube.RightTop,
              x: 25,
              y: 20,
            },
            cube: {
              hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
              size: 32, // 导航立方尺寸
              hotPointSize: 7, // 导航立方棱角热点区域尺寸
              cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
              cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
              cubeFillColor: "#374769cc", // cube 各个面填充颜色
            },
            zoomRatios: 1, // 缩放倍率
            show: true, // 是否显示
            showAxes: true, // 是否显示XYZ轴线
          };
          bimMgrApi.Plugin.initNavCube(mapOptions);
        }
      );
    },
    initLoadModel() {
      this.$api.bim
        .listBimModel({
          pageNum: 1,
          pageSize: 100,
          comId: this.currentComId,
          projectId: this.currentPrjId,
        })
        .then((d) => {
          this.models = d.rows || [];
          if (this.models.length == 0) {
            this.$modal.msgError("暂无模型，请先关联模型");
          } else {
            this.models.forEach((item) => {
              this.addModel(item.lightweightName);
            });
          }
        });
    },
    addModel(modelId, cb) {
      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
      console.log(modelId, url);
      bimMgrApi.Model.add(
        url,
        modelId,
        () => {},
        () => {
          cb && cb();
          console.log("加载模型成功");
          this.loadDevicePosition();
          setTimeout(() => {
            bimMgrApi.Camera.getViewPort((p) => {
              this.viewPoint = p;
            });
          }, 1000);
        }
      );
    },
    resetScene() {
      bimMgrApi.Camera.stopImmersiveRoam();
      bimMgrApi.Model.location(bimMgrApi.m_model.keys().toArray()[0]);
      bimMgrApi.Plugin.deleteMiniMap();
      if (this.viewPoint) {
        bimMgrApi.Camera.setViewPort(this.viewPoint);
      }
    },
    loadDeviceData() {
      if (this.loadDevDatatimeOut) {
        clearTimeout(this.loadDevDatatimeOut);
        this.loadDevDatatimeOut = null;
      }
      let prjId = this.selProject.id;
      if (this.devicTypes.includes(1)) {
        this.$api.bim.videoMonitorBimData({ projectId: prjId }).then((res) => {
          this.videoData = res.data || [];
        });
      }
      if (this.devicTypes.includes(3)) {
        this.$api.bim.devTowerBimData({ projectId: prjId }).then((res) => {
          this.towerData = res.data || [];
          console.log("towerData", this.towerData);
          this.towerData.forEach((item) => {
            let id = item.cfgId + "-3";
            let html = this.getTowerHtml(item);
            bimMgrApi.Label.updateBalloon({
              ID: id,
              Html: html,
            });
          });
        });
      }
      if (this.devicTypes.includes(4)) {
        this.$api.bim.devIotBimData({ projectId: prjId }).then((res) => {
          this.iotData = res.data || [];
          this.iotData.forEach((item) => {
            let id = item.cfgId + "-4";
            let html = this.getIotHtml(item);
            bimMgrApi.Label.updateBalloon({
              ID: id,
              Html: html,
            });
          });
        });
      }
      this.loadDevDatatimeOut = setTimeout(this.loadDeviceData, 60 * 1000);
    },
    getTowerHtml(item) {
      let txtHtml = "";
      if (item.elId) {
        txtHtml = ``;
      } else {
        let warning = item.warnings;
        if (warning) {
          let tmps = this.towerWarning.filter((d) => d.value == item.warnings);
          warning = tmps.length > 0 ? tmps[0].label : "";
        }
        let warningHtml = warning ? `<div class='data-item red'><span class='data-label'>警报：</span><span class='data-value'>${warning}</span></div>` : "";

        txtHtml = `${warningHtml}
            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>${item.height}</span></div>
            <div class='data-item'><span class='data-label'>吊重：</span><span class='data-value'>${item.load}</span></div>
            <div class='data-item'><span class='data-label'>回转：</span><span class='data-value'>${item.rotation}</span></div>
            <div class='data-item'><span class='data-label'>幅度：</span><span class='data-value'>${item.range}</span></div>
            <div class='data-item'><span class='data-label'>风速：</span><span class='data-value'>${item.windSpeed}</span></div>
            <div class='data-item'><span class='data-label'>水平倾角：</span><span class='data-value'>${item.leanAngleX}</span></div>
            <div class='data-item'><span class='data-label'>垂直倾角：</span><span class='data-value'>${item.leanAngleY}</span></div>
         `;
      }
      return (
        css +
        `
        <div class='tag-box box-type-3'>
          <div class='tag-txt'>
          ${txtHtml}
             </div>
          <img src='bimImages/4.png' alt='' class="tag-bg-img">
            <img src='bimImages/towerMonitor.png' class="tag-img">
        </div>`
      );
    },
    fmtData(item){
      if(item){
        return (item*1).toFixed(2)
      }
      return ""
    },
    getIotHtml(item) {
      let txtHtml = "";
      if (item.elId) {
        txtHtml = ``;
      } else {
        
        txtHtml = `
           <table class="tb-power">
           <tr>
            <td></td>
            <td width="60">电压</td>
            <td width="60">电流</td>
            <td width="60">功率</td>
           </tr>
            <tr>
              <td>A向</td>
              <td>${this.fmtData(item?.voltageA)}</td>
              <td>${this.fmtData(item?.currentA)}</td>
              <td>${this.fmtData(item?.powerA)}</td>
            </tr>
            <tr>
              <td>B向</td>
            <td>${this.fmtData(item?.voltageB)}</td>
              <td>${this.fmtData(item?.currentB)}</td>
              <td>${this.fmtData(item?.powerB)}</td>
            </tr>
            <tr>
              <td>C向</td>
            <td>${this.fmtData(item?.voltageC)}</td>
              <td>${this.fmtData(item?.currentC)}</td>
              <td>${this.fmtData(item?.powerC)}</td>
            </tr>
           </table> 
         `;
      }
      return (
        css +
        `
        <div class='tag-box box-type-4'>
          <div class='tag-txt'>
          ${txtHtml}
             </div>
          <img src='bimImages/4.png' alt='' class="tag-bg-img">
            <img src='bimImages/power.png' class="tag-img">
        </div>`
      );
    },
    getVideoHtml(item) {
      return (
        css +
        `
        <div class='tag-box box-type-1'>
          <img src='bimImages/3.png' alt='' class="tag-bg-img-1">
          <img src='bimImages/videoMonitor.png' class="tag-img-1">
        </div>`
      );
    },
    getPitHtml(item) {
      let bg = "4.png";
      let img = "pitMonitor";

      return (
        css +
        `
        <div class='tag-box box-type-2'>
          <img src='bimImages/${bg}' alt='' class="tag-bg-img">
          <img src='bimImages/${img}.png' class="tag-img">
          <span class='tag-txt' style='color:#ffffff;font-size:14px'>
            
          </span>
        </div>`
      );
    },
  },
};
</script>

<style lang="less">
.bim-manage {
  height: 100%;
  position: relative;
  #bimManage {
    height: 100%;
    #bimManageContainer {
      height: 100%;
    }
  }
  .div-left {
    top: 10vh;
    left: 5%;
    position: absolute;
    height: 70vh;
    width: 20%;
    &.isHide {
      left: 0%;
      wdith: 0%;
      #arrowLeft {
        left: 0px !important;
      }
    }
    #arrowLeft {
      top: calc(50% - 50px);
      right: -21px;
      left: unset !important;
    }
  }
  .div-right {
    top: 10vh;
    right: 5%;
    position: absolute;
    height: 70vh;
    width: 20%;
    &.isHide {
      right: 0%;
      width: 0%;
    }
    #arrowRight {
      top: calc(50% - 50px);
      left: -21px;
    }
  }

  .data-content {
    border: solid 1px #75fbfdaa;
    background-color: #06445b81;
    height: 100%;
    .div-row {
      height: 33%;
      .row-title {
        background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
        padding-left: 10px;
        height: 36px;
        line-height: 36px;
        .svg-icon {
          fill: #75fbfd;
        }
      }
    }
  }
  .div-tools {
    position: absolute;
    bottom: 25vh;
    left: 50%;
    margin-left: -200px;
    display: flex;
    background: #00000080;
    border-radius: 10px;
    .tool-item {
      display: flex;
      flex-flow: column;
      padding: 10px;
      align-items: center;
      cursor: pointer;
      &.is-active {
        .icon {
          background: #097fca94;
          .svg-icon {
            fill: #75fbfd;
          }
        }
        .sp-text {
          color: #75fbfd;
        }
      }
      .icon {
        width: 30px;
        height: 30px;
        background: #c0c4cca1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        .svg-icon {
          width: 20px;
          height: 20px;
        }
      }
      .sp-text {
        margin-top: 4px;
        font-size: 12px;
      }
    }
  }

  .test-box {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    .tag-box {
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .tag-img {
     width: 20px;
        height: 20px;
        position: absolute;
        left:50%;
        bottom:18px;
        margin-left:-10px;
    }
    .tag-bg-img{
      width: 16px;
      height: 80px;
    }
    .tag-bg-img {
      width: 16px;
      height: 80px;
    }
    .tag-txt {
      box-shadow: #1a9047 0px 4px 16px, rgba(10, 31, 68, 0.06) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
      color: #75fbfd;
      font-size: 12px;
      padding: 10px;
      background: #097fca63;
      border: solid 1px #75fbfdaa;
    }
    .tb-power{
      border-collapse: collapse;
    }
    .tb-power td{
      border:solid 1px #75fbfd33;
      padding:4px 8px;
    }
  }
}
</style>