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

<template>
  <div class="bim-roaming main-page">
    <div id="bimRoaming">
      <div id="bimRoamingContainer" class="bimRoamingContainer"></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 class="model-tree scroll">
              <el-tree :key="treeKey" ref="tree" :default-expanded-keys="treeExpendedKeys" :props="{
                children: 'children',
                label: 'title',
                isLeaf: 'leaf',
              }" node-key="key" @check="onCheckTree" :load="loadNode" lazy show-checkbox></el-tree>
            </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 r33">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              漫游方案
            </div>
            <div class="roaming-list scroll">
              <div v-if="roamingLoading" class="loading">暂无数据</div>
              <div v-for="(item, index) in roamingList" :key="index" :class="{ 'is-selected': item.play != 0 }"
                class="roaming-item">
                <el-tooltip :content="item.name">
                  <span class="roam-text">{{ item.name }}</span>
                </el-tooltip>
                <div class="roam-tool">
                  <el-tooltip content="播放" v-show="item.play == 0">
                    <svg-icon icon-class="play" @click="startRoaming(item)"></svg-icon>
                  </el-tooltip>
                  <el-tooltip content="暂停" v-show="item.play != 2 && item.play != 0">
                    <svg-icon icon-class="pause" @click="playIRPause(item)"></svg-icon>
                  </el-tooltip>
                  <el-tooltip content="继续播放" v-show="item.play == 2">
                    <svg-icon icon-class="play" @click="playContinue(item)"></svg-icon>
                  </el-tooltip>
                  <el-tooltip v-show="item.play != 0" content="停止">
                    <svg-icon icon-class="stop" @click="playCancle(item)"></svg-icon>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>

          <div class="div-row r66">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              视点列表
            </div>
            <div class="view-point-list scroll">
              <div v-if="viewPointLoading" class="loading">暂无数据</div>
              <div v-for="(item, index) in viewpointList" :key="index"
                :class="{ 'is-selected': selectedViewpoint == item }" class="viewpoint-item"
                @click="ZoomViewpoint(item)">
                <div class="viewpoint-content">
                  <el-image :src="item.imgPath" alt class="viewpoint-image" fit="scale-down" />
                  <el-tooltip :content="item.remark" v-if="item.remark">
                    <span class="viewpoint-title">{{ item.name }}</span>
                  </el-tooltip>
                  <span class="viewpoint-title" v-else>{{ item.name }}</span>
                </div>
              </div>
            </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>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
import { MergeArray, DelArray } from "@/utils/tools";
import bimTools from './bim/bimTools'
export default {
  name: "BIMRoaming",
  data() {
    return {
      dpi: "",
      selProject: null,
      leftSrc: "./bimImages/arrow_left_retract.png",
      rightSrc: "./bimImages/arrow_right_retract.png",
      leftShow: true,
      models: [],
      treeKey: 0,
      modelTrees: [],
      viewPoint: [],
      treeExpendedKeys: [],
      visibleList: [],
      viewpointList: [],
      selectedViewpoint: null,
      viewPointLoading: true,
      roamingList: [],
      roamingLoading: true,
      selectedRoam: null,
      modelLoaded: false,
      isPlay: false,
    };
  },
  mounted() {
    window.bimRoaming = this;
    this.$store.dispatch("ChangeNav", 702);
    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;
    this.initEngine();
  },
  methods: {
    loadNode(node, resolve) {
      let that = this;
      if (node.level == 0) {
        let nd = [
          {
            title: "项目模型",
            level: 0,
            type: "root",
            key: "root",
            children: [],
            hadLoad: true,
          },
        ];

        resolve(nd);
        setTimeout(() => {
          let els = document.querySelectorAll(".bim-roaming .model-tree .el-tree-node");
          if (els.length > 0) {
            els[0].click();
          }
        }, 1000);
      } else if (node.level == 1) {
        let nd = [];
        that.models.forEach((d) => {
          let mnd = {
            title: d.modelName,
            level: 1,
            type: "model",
            hasLoad: false,
            modelId: d.lightweightName,
            key: d.lightweightName,
            externalId: "0",
            glid: "",
            children: [],
            data: d,
          };
          nd.push(mnd);
        });
        resolve(nd);
      } else {
        this.getTreeChildren(node, resolve);
      }
    },
    getTreeChildren(node, resolve) {
      let that = this;
      let data = node.data;
      this.$api.bim.getModelTree(data.modelId, data.glid).then((d) => {
        let tmps = (d.data || []).map((it) => {
          let title = it.externalId == 0 ? it.name : it.externalId;
          title = title.replaceAll('"', "").replaceAll("'", "").replaceAll("\\", "");
          it.title = title;
          it.key = it.glid;
          it.modelId = data.modelId;
          it.type = "data";
          it.leaf = +it.externalId != 0;
          let o = this.convertFeatureInfo(it, data.modelId);
          return o;
        });
        resolve(tmps);
      });
    },
    convertFeatureInfo(o, modelId) {
      o.modelId = modelId;
      o.featureId = o.modelId + "^" + o.externalId;
      o.name = o.name || "";
      o.name = o.name.replaceAll('"', "").replaceAll("'", "").replaceAll("\\", "");
      o.info = `[${o.externalId}]${o.groupname}-${o.name}`;
      return o;
    },
    playIRPause(data) {
      data.play = 2;
      this.isPlay = false;

      bimRoadmApi.Camera.pauseImmersiveRoam(false);
    },
    playContinue(data) {
      data.play = 1;
      this.isPlay = true;
      bimRoadmApi.Camera.pauseImmersiveRoam(true);
    },
    playCancle(data) {
      this.isPlay = false;
      if (data) {
        data.play = 0;
        this.selectedRoam = null;
      } else {
        if (this.roamingList.findIndex((x) => x.play === 1) > -1) {
          this.roamingList.find((x) => x.play === 1).play = 0;
        }
      }
      bimRoadmApi.Camera.cancelPlayImmersiveRoam();
      this.resetScene();
    },
    startRoaming(data) {
      if (!this.modelLoaded) {
        this.$message.error("暂无模型，请先关联模型");
        return;
      }
      let api = bimRoadmApi;
      this.playCancle();

      if (this.roamingList.findIndex((x) => x.play === 1) > -1) {
        this.roamingList.find((x) => x.play === 1).play = 0;
      }
      data.play = 1;
      let record = typeof data.points === "string" ? JSON.parse(data.points) : data.points;

      api.Camera.setImmersiveRoamConfig({
        roamingMode: data.roamingMode,
        moveRate: data.moveRate,
        turnRate: data.turnRate,
        bRecordLocus: false,
      });
      setTimeout(() => {
        api.Camera.startImmersiveRoam([65.702301, 670.785328, 851.817162]);
        setTimeout(() => {
          this.selectedRoam = data;
          this.isPlay = true;
          api.Camera.playImmersiveRoam({
            records: record,
            isLoopPlay: this.autoPlay,
            complete: function () {
              this.selectedRoam = null;
              data.play = 0;
              this.isPlay = false;
            },
          });
        }, 400);
      }, 100);
    },
    async onCheckTree(node, event) {
      let api = bimRoadmApi;
      let that = this;
      if (!this.modelLoaded) {
        this.$message.error("模型未加载完成，请稍后重试");
        return;
      }
      if (this.isPlay) {
        this.playCancle();
      }
      let checked = event.checkedNodes.includes(node);
      if (node.type == "root") {
        if (checked) {
          that.models.forEach((it) => {
            it.visible = true;
            api.Model.setVisible(it.modelId, true);
            api.Model.original(it.modelId);
          });
        } else {
          that.models.forEach((it) => {
            it.visible = false;
            api.Model.setVisible(it.modelId, false);
          });
        }
      } else if (node.type == "model") {
        if (checked) {
          api.Model.setVisible(node.modelId, true);
          api.Model.original(node.modelId);
          this.models.find((mm) => mm.modelId == node.modelId).visible = true;
        } else {
          api.Model.setVisible(node.modelId, false);
          this.models.find((mm) => mm.modelId == node.modelId).visible = false;
        }
      } else {
        let isPartLoad = false;
        if (!this.models.find((mm) => mm.modelId == node.modelId).visible && checked) {
          isPartLoad = true;
        }
        let selFeatureIds = [];
        if (node.leaf) {
          selFeatureIds = [node.featureId];
        } else {
          if (!node.leafs) {
            let leafs = await this.getNodeLeafs(node);
            node.leafs = leafs;
          }
          selFeatureIds = node.leafs.map((f) => f.featureId);
        }
        let tmps = selFeatureIds;
        if (!checked) {
          this.setFeatueVisible(tmps, false);
        } else {
          if (isPartLoad) {
            api.Model.setVisible(node.modelId, true);
            this.models.find((mm) => mm.modelId == node.modelId).visible = true;
            api.Model.original(node.modelId);
            let tmpsIds2 = tmps.splice(0, 1000);
            api.Feature.showFeatures(tmpsIds2.join("#"));
            this.setFeatueVisible(tmps, true);
          } else {
            this.setFeatueVisible(tmps, true);
          }
        }
      }
    },
    setFeatueVisible(featureIds, show) {
      let len = 1000;
      let api = bimRoadmApi;
      let cnt = featureIds.length;
      for (let i = 0; i < cnt; i += len) {
        api.Feature.setVisible(featureIds.slice(i, i + len).join("#"), show);
      }
    },
    async getNodeLeafs(node) {
      const res = await this.$api.bim.getTreeAllLeafChild(node.modelId, node.glid);
      return (res.data || []).map((f) => {
        return this.convertFeatureInfo(f, node.modelId);
      });
    },

    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;
    },

    initEngine() {
      this.elId++;
      this.activeMenu = 0;
      bimTools.initBimCfg(this);
      setTimeout(() => {
        if (this.bimCfg.clientApi) {
        } else {
          this.loadEngine();
        }
      }, 10);
    },
    loadEngine() {
      window.bimRoadmApi = new SAPI(
        {
          serverIP: window.config.serverIP, //服务ip地址
          port: window.config.port, //HTTP端口
          useHttps: window.config.useHttps, //使用Https
          container: "bimRoamingContainer", //[必须]容器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轴线
          };
          bimRoadmApi.Plugin.initNavCube(mapOptions);
          bimTools.initBimGis(this, bimRoadmApi)
        }
      );
    },
    initLoadModel() {
      this.$api.bim.getDefaultViewPoint(this.selProject.id, 1).then((d) => {
        let pt = "";
        if (d.data && d.data.length > 0) {
          pt = d.data[0].viewPosition;
          pt = this.$tryToJson(pt, null);
        }
        if (pt) {
          this.viewPoint = pt;
        }
      });
      this.$api.bim
        .listBimModel({
          pageNum: 1,
          pageSize: 100,
          comId: this.selProject.comId,
          projectId: this.selProject.id,
        })
        .then((d) => {
          this.models = (d.rows || []).map((it) => {
            it.modelId = it.lightweightName;
            it.visible = false;
            it.checked = true;
            it.gis = this.$tryToJson(it.gisJson || "{}", {});
            return it;
          });
          if (this.models.length == 0) {
            this.$modal.error("暂无模型，请先关联模型");
          } else {
            this.models.forEach((item) => {
              item.modelId = item.lightweightName;
              item.gis = JSON.parse(item.gisJson);
              this.addModel(item.lightweightName);
              setTimeout(() => {
                this.$refs.tree.setChecked(item.lightweightName, true, true);
              }, 3000);
            });
            this.treeKey++;

            bimTools.initLoadModel(this, bimRoadmApi)

          }
        });
      this.init();
    },
    init() {
      this.loadViewPoint();
      this.loadRoaming();
    },
    loadViewPoint() {
      this.$api.bim
        .viewpointGet({
          projectId: this.selProject.id,
          viewType: 1,
          pageSize: 100,
          pageNum: 1,
        })
        .then((d) => {
          this.viewpointList = d.data.rows || [];
          this.viewPointLoading = false;
        });
    },
    loadRoaming() {
      this.$api.bim
        .roamingGet({
          roamingType: 1,
          projectId: this.selProject.id,
          pageSize: 100,
          pageNum: 1,
        })
        .then((d) => {
          let list = d.data.rows || [];
          list.forEach((item) => {
            item.play = 0;
          });
          this.roamingList = list;
          this.roamingLoading = false;
        });
    },
    ZoomViewpoint(item) {
      if (!this.modelLoaded) {
        this.$message.error("模型未加载完成，请稍后重试");
        return;
      }
      this.playCancle();
      this.selectedViewpoint = item;
      if (item.viewPosition != null) {
        bimRoadmApi.Camera.setViewPort(JSON.parse(item.viewPosition));
      }
    },
    loadModelTree() {
      this.modelTrees = [
        {
          title: "项目模型",
          level: 0,
          type: "root",
          key: "root",
          children: [],
          hadLoad: true,
        },
      ];
      this.treeExpendedKeys.push("root");
      this.models
        .map((d) => {
          d.gis = JSON.parse(d.gisJson);
          return d;
        })
        .forEach((d) => {
          let node = {
            title: d.modelName,
            level: 1,
            type: "model",
            hasLoad: false,
            modelId: d.lightweightName,
            key: d.lightweightName,
            externalId: "0",
            glid: "",
            children: [],
            data: d,
          };
          this.treeExpendedKeys.push(node.key);
          this.modelTrees[0].children.push(node);
          this.getTreeData(node);
        });
      this.showTree = true;
    },
    getTreeData(node) {
      this.$api.bim.modelTreeAllChild(node.modelId, "").then((d) => {
        let objs = d.data || [];
        let makeTree = (tmps) => {
          tmps.forEach((item) => {
            item.children = objs.filter((it) => it.pglid == item.glid);
            if (item.children.length > 0) {
              makeTree(item.children);
            }
            item.hasLoad = true;
            item.title = item.name;
            item.key = item.glid;
            item.modelId = node.modelId;
          });
          return tmps;
        };
        node.children = makeTree(objs.filter((item) => item.level == 0));
        node.children.forEach((item) => {
          //this.treeExpendedKeys.push(item.key)
        });
        this.treeKey++;
      });
    },
    addModel(modelId, cb) {
      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
      console.log(modelId, url);
      let api = bimRoadmApi;
      api.Model.add(
        url,
        modelId,
        () => { },
        () => {
          cb && cb();
          console.log("加载模型成功");
          setTimeout(() => {
            if (this.viewPoint) {
              api.Camera.setViewPort(this.viewPoint);
            } else {
              api.Camera.getViewPort((p) => {
                this.viewPoint = p;
              });
            }
            this.modelLoaded = true;
          }, 1000);
        }
      );
    },
    resetScene() {
      this.selectedViewpoint = null;
      this.selectedRoam = null;
      bimRoadmApi.Camera.stopImmersiveRoam();
      bimRoadmApi.Model.location(bimRoadmApi.m_model.keys().toArray()[0]);
      bimRoadmApi.Plugin.deleteMiniMap();
      if (this.viewPoint) {
        bimRoadmApi.Camera.setViewPort(this.viewPoint);
      }
    },
  },
};
</script>

<style lang="less">
.bim-roaming {
  height: 100%;
  position: relative;

  #bimRoaming {
    height: 100%;

    #bimRoamingContainer {
      height: 100%;
    }
  }

  .div-left {
    top: 10vh;
    left: 5%;
    position: absolute;
    height: 70vh;
    width: 14%;

    &.isHide {
      left: 0%;
      wdith: 0%;

      #arrowLeft {
        left: 0px !important;
      }
    }

    #arrowLeft {
      top: calc(50% - 50px);
      right: -21px;
      left: unset !important;
    }

    .div-row {
      height: 100%;
    }
  }

  .div-right {
    top: 10vh;
    right: 5%;
    position: absolute;
    height: 70vh;
    width: 14%;

    &.isHide {
      right: 0%;
      width: 0%;
    }

    #arrowRight {
      top: calc(50% - 50px);
      left: -21px;
    }

    .div-row {
      &.r33 {
        height: 33.33%;
      }

      &.r66 {
        height: 66.66%;
      }
    }
  }

  .data-content {
    height: 100%;

    .div-row {
      border: solid 1px #75fbfdaa;
      background-color: #06445b81;

      .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;
    top: calc(80vh - 50px);
    left: 50%;
    margin-left: -34px;
    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;
      }
    }
  }

  .model-tree {
    height: calc(100% - 36px);
    overflow-y: auto;

    .el-tree {
      background: transparent;
      color: #eee;

      .el-checkbox {
        color: #75fbfd;
      }

      .el-tree-node {
        &:focus {
          &>.el-tree-node__content {
            background: #3489d966;

            &:hover {
              background: #3489d966;
            }
          }
        }

        .el-tree-node__content:hover {
          background: #3489d966;
        }
      }
    }
  }

  .view-point-list {
    height: calc(100% - 36px);
    overflow-y: auto;

    .viewpoint-item {
      margin: 10px 10px 0px;

      &.is-selected {
        .viewpoint-content {
          background: #3489d966;
          border: solid 1px #75fbfd;
        }
      }

      .viewpoint-content {
        position: relative;
        border-radius: 4px;
        background: #ffffff2e;

        .el-image {
          height: 120px;
          width: 100%;
        }

        .viewpoint-title {
          position: absolute;
          bottom: 0px;
          background: #00000080;
          width: calc(100% - 10px);
          left: 0;
          z-index: 9;
          line-height: 30px;
          font-size: 14px;
          height: 30px;
          padding: 0px 10px;
          text-align: center;
          border-radius: 0px 0px 4px 4px;
        }
      }
    }
  }

  .roaming-list {
    height: calc(100% - 36px);
    overflow-y: auto;

    .roaming-item {
      display: flex;
      flex-flow: row;
      margin: 10px;
      background: #04436b40;
      line-height: 36px;
      border-radius: 10px;
      padding: 0px 10px;
      font-size: 14px;
      position: relative;

      &.is-selected {
        background: #00aaff;
      }

      .roam-text {
        color: #fff;
        flex-grow: 1;
        max-width: calc(100% - 40px);
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .roam-tool {
        margin-left: 10px;
        display: flex;
        align-items: center;

        .svg-icon {
          margin-right: 5px;
          fill: #75fbfd;
        }
      }
    }
  }

  .loading {
    height: 50px;
    margin: 10px;
    line-height: 50px;
    text-align: center;
    color: #edffff85;
  }

  @media (max-width: 1920px) {}

  @media (min-width: 2561px) {
    .data-content {
      .div-row {
        min-height: 420px;

        .row-title {
          height: 48px;
          line-height: 48px;
          font-size: 28px;
        }
      }
    }

    .div-tools {
      margin-left: -68px;
      border-radius: 10px;

      .tool-item {
        padding: 10px 20px;

        .icon {
          width: 60px;
          height: 60px;
          border-radius: 30px;

          .svg-icon {
            width: 40px;
            height: 40px;
          }
        }

        .sp-text {
          margin-top: 10px;
          font-size: 24px;
        }
      }
    }

    .model-tree {
      .el-tree {
        font-size: 24px;

        .el-tree-node__content {
          height: 36px;
        }

        .el-tree-node__expand-icon {
          font-size: 24px;
        }

        .el-checkbox {
          font-size: 24px;
        }

        .el-tree-node__label {
          font-size: 24px;
        }

        .el-tree__empty-text {
          font-size: 24px;
        }
      }
    }

    .view-point-list {
      height: calc(100% - 48px);

      .viewpoint-item {
        margin: 10px 10px 0px;

        .viewpoint-content {
          border-radius: 4px;

          .el-image {
            height: 160px;
            width: 100%;
          }

          .viewpoint-title {
            width: calc(100% - 10px);
            line-height: 30px;
            font-size: 24px;
            height: 30px;
            padding: 0px 10px;
            border-radius: 0px 0px 4px 4px;
          }
        }
      }
    }

    .roaming-list {
      height: calc(100% - 48px);

      .roaming-item {
        margin: 10px;
        line-height: 48px;
        border-radius: 10px;
        padding: 0px 10px;
        font-size: 14px;

        .roam-text {
          max-width: calc(100% - 40px);
          font-size: 24px;
        }

        .roam-tool {
          margin-left: 10px;

          .svg-icon {
            margin-right: 5px;
            width: 24px;
            height: 24px;
          }
        }
      }
    }

    .loading {
      font-size: 24px;
    }
  }
}
</style>