ibms/src/components/business_space/newGraphy/graphy.vue

<template>
  <div id="graphy" ref="graphy" v-loading="canvasLoading">
    <div v-show="!FloorMap">
      <div style="margin-right:10px;width: 100%;margin-bottom: 10px" v-if="showOtherFlag">
        <!-- 平面图其他分区 -->
        <el-button type="primary" @click="addZoneBtn">添加分区</el-button>
        <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
        <i class="icon-wushuju iconfont"></i>
        暂无数据
      </div>
    </div>
    <div class="canvas-box" v-show="FloorMap">
      <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
      <!-- 初始两个按钮 -->
      <el-row class="buttons-box">
        <div style="margin-right:10px;width: 100%;margin-bottom: 10px" v-if="showOtherFlag">
          <!-- 平面图其他分区 -->
          <el-button type="primary" @click="addZoneBtn">添加分区</el-button>
          <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
            width="180px" @select="handleSelect">
            <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSelect"></i>
            <template slot-scope="{ item }">
              <div class="name" style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                :title="item.data.RoomLocalName">
                {{ item.data.RoomLocalName }}
                <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
              </div>
            </template>
          </el-autocomplete>
        </div>
        <div class="button-group">
          <!-- 默认操作模式 -->
          <div v-show="type==1">
            <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
              创建业务空间
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 点击已经关联的业务空间 -->
            <el-button type="primary" plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
            <el-button type="primary" @click="editeSpaceDetail" :disabled="zoneDisable">查看空间详情</el-button>
            <el-button type="primary" plain @click="confirmZoneSpace" :disabled="zoneDisable||(!zoneDisable&&!curZoneItem.isInfected)">确认业务空间
            </el-button>
            <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
          </div>
          <!-- 点击已经关联的业务空间 -->
          <!-- <div v-show="type==2">
          </div> -->
          <!-- 点击未关联的业务空间 -->
          <div v-show="type==3">
            <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
            <el-button plain @click="lookUnrelatBSpace(true)">从未关联平面图的业务空间中选择</el-button>
            <el-button plain @click="cancelGraphy">取 消</el-button>
          </div>
          <!-- 重新划分业务空间 -->
          <div v-show="type==4">
            <el-button plain @click="cancelGraphy">取 消</el-button>
            <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
            <el-button type="primary" v-show='curZoneItem.isInfected' @click="confirmAndSave">保存并确认业务空间</el-button>
          </div>
          <!-- 批量创建所选业务空间 -->
          <div v-show="type==5">
            <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
            <el-button plain @click="cancelGraphy">取 消</el-button>
          </div>
          <div style="position: absolute;right: 10px;">
            <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
          </div>
        </div>
      </el-row>
      <!-- 底部操作按钮 -->
      <el-row class="canvas-actions-box">
        <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo"
          @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
      </el-row>
    </div>
    <!--  -->
    <!-- 未关联元空间的业务空间 -->
    <unRelateBSP ref="unRelateBSP" :isAction="isAction" @createFromUnrelated="createFromUnrelated" :code="tab.code"></unRelateBSP>
    <!-- 创建新的业务空间 -->
    <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
    <!-- 批量创建选择弹窗 -->
    <el-dialog title="提示" :visible.sync="groupCreateDialogVis" width="30%" :close-on-click-modal="false">
      <div id="autoRelate">
        <p>批量创建面积大于此值的默认空间为业务空间：</p>
        <div style="padding:10px 20px;margin:0 0 10px 0;">
          <el-slider v-model="areaValue" :marks="areaMarks" :step="10" :format-tooltip='val=>val/100'> </el-slider>
        </div>
        <p>请选择批量创建方式：</p>
        <p>
          <el-radio v-model="groupCreateType" :label="1">批量将所有的空白空间创建业务空间</el-radio>
        </p>
        <p>
          <el-radio v-model="groupCreateType" :label="2">批量选择空白空间创建业务空间</el-radio>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="groupCreateDialogVis=false">取消</el-button>
        <el-button size="small" type="primary" @click="confirm">确认</el-button>
      </span>
    </el-dialog>
    <dialogZone ref="zone" @createSuccess="getOtherType" />
  </div>
</template>
<script>
  import canvasFun from "./canvasFun"
  import {mapGetters} from "vuex";
  import {SColor, SPoint} from "@saga-web/draw/lib";
  import {DivideFloorScene, FloorView, Opt, SpaceItem, ZoneItem} from "@saga-web/cad-engine/lib";
  import {colorArr} from "@/utils/spaceColor"
  import unRelateBSP from "./unRelateBSP";
  import createBSP from "./createBSP";
  import dialogZone from "../../ledger/addDialog/dialogZone";
  import {
    createRelateInZoneAndISp,
    getIspNotInSpace,
    groupCreRelaZoneAndISp,
    handleZoneUpdateBd,
    queryAllZoneType,
    queryZone,
    zoneCount,
    zoneCreate,
    zoneQueryOutline,
    zoneUpdate,
    zoneUpdateOutline
  } from "@/api/scan/request"

  export default {
    components: {
      canvasFun,
      unRelateBSP,
      createBSP,
      dialogZone
    },
    data() {
      return {
        canvasWidth: 800,
        canvasHeight: 600,
        type: 1, // 默认操作模式
        search: '',//搜索
        buildFloor: ['', ''],
        FloorObj: {}, //楼层对象
        FloorMap: '', //楼层底图
        tab: {},
        config: {
          isEdit: false,
          divide: true,
          groupSelect: true
        },
        canvasLoading: false,
        view: null,
        scene: null,
        Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
        businessSpaceList: [], // 所有业务空间
        num: 0, // 未关联元空间的业务空间统计
        BSPRelaISPList: [], // 已关联元空间的业务空间
        // 未关联元空间的业务空间弹窗
        isAction: false,
        curOutline: [],
        BIMIDToSID: {}, //bimid映射元空间id
        BIMIDToSIName: {}, //bimid映射元空间名称
        curZoneItem: {}, //当前选中的业务空间item
        allUnRelatISP: [], //
        zoneList: [], // 业务空间-canvas图中
        groupCreateDialogVis: false, //批量创建业务空间弹窗
        groupCreateType: 1, //批量创建方式
        zoneDisable: true, // 重新划分是否禁用
        sourceIdToISP: {},
      areaValue: 40,
      areaMarks: { 0: '0m²', 100: '1m²' },
      options: [], //其他分区类型
      OtherValue: '',
      showOtherFlag: false, //是否显示其他分区类型添加
      buildFloorName: "", //建筑楼层名称
      spaceHeight: 0,
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId", "projects"]),
    projectName() {
      let projectObj = this.projects.find(item => {
        return item.id == this.projectId
      })
      return projectObj ? projectObj.name ? projectObj.name : projectObj.id : this.projectId
    }
  },
  created() {
    Opt.sceneMarkColor = new SColor('#ffffff');
  },
  mounted() {
    this.canvasWidth = this.$refs.graphy.offsetWidth - 20;
    this.canvasHeight = this.$refs.graphy.offsetHeight - 20;
  },
  methods: {
    // 初始化
    init(initType) {
      this.type = 1;
      if (this.scene) {
        this.scene.clearSpaceSelection();
        this.scene.clearZoneSelection();
        this.scene.clearCut();
        this.scene.clearLikeSpaces();
        this.zoneDisable = true;
        this.scene.isZoneSelectable = true;
        this.scene.isSpaceSelectable = false;
      }
      if (this.buildFloor.indexOf('all') > -1 || this.buildFloor.indexOf('noKnow') > -1) {
        return;
      }

      if (initType == 1) {
        // 底图
        this.getGraphy();
      } else {
        // 业务空间
        this.getBusinessSpace();
      }
      this.config = {
        isEdit: false,
        divide: true,
        groupSelect: true,
      }
      // 获取当前楼层的元空间
      this.getFloorISpace();
      // 查询未关联业务空间的元空间
      this.getISPSPUnrelaBSP();
      // 查询未关联平面图的业务空间
      this.getBSPunrelaISP();
    },
    // 获取当前楼层的元空间-元空间接口不变
    getFloorISpace() {
      let pa = {
        zone: 'Ispace',
        data: {
          // Filters: `FloorId='${this.buildFloor[1]}'`,
          PageSize: 1000,
          FloorId: this.buildFloor[1]
        }
      }
      queryZone(pa, res => {
        if (res.Message == this.buildFloor[1]) {
          this.BIMIDToSID = {}
          this.BIMIDToSIName = {}
          this.sourceIdToISP = {}
          res.Content.map(t => {
            let key = t.BIMID.split(":")[1];
            this.BIMIDToSID[key] = t.RoomID;
            this.BIMIDToSIName[key] = t.RoomLocalName || t.RoomName;
            this.sourceIdToISP[key] = t;
          })
        }
      })
    },
    //添加其他分区
    addZoneBtn() {
      this.$refs.zone.dialogFormVisible = true
    },
    // 搜索
    querySearch(queryString, cb) {
      let restaurants = this.zoneList;
      let results = queryString ?
        restaurants.filter(this.createFilter(queryString)) :
        restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 过滤器
    createFilter(queryString) {
      return restaurant => {
        return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
      };
    },
    // 查询选中,定位
    handleSelect(zone) {
      // 清空选中
      this.scene.clearSpaceSelection();
      this.scene.clearZoneSelection();
      // 选中当前
      zone.selected = true;
      this.curZoneItem = zone;
      this.zoneDisable = false;
      this.view.fitSelectedToView();
    },
    // 父组件调用
    getData(buildFloor, FloorObj, tab) {
      let initType = 1;
      if (FloorObj.FloorID == this.FloorObj.FloorID) {
        initType = 2;
      }
      this.buildFloor = buildFloor;
      this.FloorObj = FloorObj;
      this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : '';
      this.tab = tab;
      this.buildFloorName = `${FloorObj.buildName}-${FloorObj.label}`;
      console.log(arguments);
      if (tab.code == "OtherZone") {
        // 其他分区
        this.showOtherFlag = true
        this.getOtherType();
        // this.OtherValue = (localStorage.getItem('otherZone')) || ''
      } else {
        this.showOtherFlag = false;
      }
      this.init(initType);
    },
    // 其他分区类型查询
    getOtherType() {
      let pa = {
        Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }],
        Filters: `Code="OtherZone"`
      }
      queryAllZoneType(pa, res => {
        if (res.Content[0].ZoneType && res.Content[0].ZoneType.length) {
          this.options = res.Content[0].ZoneType.map(t => {
            t.value = t.Code;
            t.label = t.Name;
            return t;
          })
        } else {
          this.options = []
        }
      })
    },
    // 其他类型下拉change
    changeOtherZone(val) {
      this.init(2);
      // localStorage.setItem('otherZone', val)
    },
    // 获取未绑定业务空间的元空间
    getISPSPUnrelaBSP() {
      let pa = {
        data: {
          // Filters: `FloorId='${this.buildFloor[1]}'`,
          PageSize: 1000,
          FloorId: this.buildFloor[1]
        },
        objectType: this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code
      }
      getIspNotInSpace(pa, res => {
        // 类型需要重新获取,直接取pa.objecttype有问题
        let tempType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code
        if (res.FloorId == this.buildFloor[1] && res.ZoneType == tempType) {
          this.allUnRelatISP = res.Content;
        }
      })
    },
    // 获取底图
    getGraphy() {
      let that = this;
      that.clearGraphy()
      that.scene = new DivideFloorScene();
      that.canvasLoading = true;
      if (this.FloorMap.split('.')[1].toString() == 'png' || this.FloorMap.split('.')[1].toString() == 'jpg') {
        that.scene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${this.FloorMap}`, res => {
          this.getGraphtSuc(res)
        })
      } else {
        that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
          this.getGraphtSuc(res)
        })
      }
    },
    getGraphtSuc(res) {
      let that = this
      that.canvasLoading = false;
      if (res == 'error') {
        this.FloorMap = '';
        this.$message.warning('数据解析异常');
        return;
      }
      that.view.scene = that.scene;
      // 蒙版
      if (this.FloorObj.Outline) {
        let newArr = this.FloorObj.Outline.map(t => {
          return new SPoint(t.X, t.Y);
        })
        this.scene.addSceneMark(newArr)
      }
      this.scene.isSpaceSelectable = false;
      // 绘制业务空间
      that.getBusinessSpace();
      that.fit();
      that.view.minScale = that.view.scale;
      if (that.$refs.canvasFun) {
        that.$refs.canvasFun.everyScale = that.view.scale;
      }
    },
    // 获取当前分区下的业务空间
    getBusinessSpace() {
      this.canvasLoading = true
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      let pa = {
        ZoneType: ObjectType,
        Filters: `not RoomID isNull`,
        Orders: "createTime desc, RoomID asc",
        PageSize: 10000
      }
      if (this.buildFloor.length && this.buildFloor.length > 1) {
        pa.BuildingId = this.buildFloor[0];
        pa.FloorId = this.buildFloor[1];
      }
      zoneQueryOutline(pa, res => {
        // 类型需要重新获取,直接取pa.ZoneType
        let tempType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
        if (res.FloorId == this.buildFloor[1] && res.ZoneType == tempType) {
          // 所有业务空间
          this.businessSpaceList = res.Content;
          // 已关联元空间的业务空间
          this.BSPRelaISPList = [];
          res.Content.map(t => {
            if (t.Outline && t.Outline.length) {
              this.BSPRelaISPList.push(t)
            }
          })
          // 绘制业务空间
          let tempArr = this.BSPRelaISPList.map((t, i) => {
            // if (t.FloorId == this.buildFloor[1] && t.ObjectType == tempType) {
            return {
              RoomLocalName: t.RoomLocalName,
              OutLine: t.Outline,
              RoomID: t.RoomID,
              Color: colorArr[i % colorArr.length],
              Infected: t.State
            }
            // } else {
            //   console.log('internet slow')
            //   return undefined;
            // }
          }).filter(item => item)
          console.log(this.scene)
          this.scene.removeAllZone();
          this.scene.addZoneList(tempArr);
          this.scene.click(this, this.canvasClick);
          this.zoneList = this.scene.zoneList;
          this.view._needDraw = true;
          this.canvasLoading = false;
        }
      })
    },
    // canvas点击事件
    canvasClick(item, event) {
      console.log(item)
      console.log(event)
      if (this.type == 4) {//重新划分

      } else if (this.type == 5) {//批量

      } else {
        if (item instanceof SpaceItem && item.selectable) {
          if (this.spaceHeight == 0) {
            this.spaceHeight = item.data.Height > 1000 ? item.data.Height / 1000 : item.data.Height
          }
          if (this.type == 2) {
            this.scene.clearZoneSelection();
          }
          this.type = 3;
          this.curZoneItem = {};
        }
        if (item instanceof ZoneItem && item.selectable) {
          if (this.type == 3) {
            this.scene.clearSpaceSelection();
          }
          this.zoneDisable = false;
          this.curZoneItem = item;
          this.scene.clearZoneSelection();
          item.selected = true;
          this.$emit('copyID', this.curZoneItem.data.RoomID)
        }
      }
    },
    // 编辑平面图
    editGraphy() {
      this.type = 3;
      this.config.isEdit = true;
      this.config.groupSelect = false;
      this.config.divide = true;
      this.scene.isSpaceSelectable = true;
      // 设置业务空间不可选
      this.scene.isZoneSelectable = false
      this.view._needDraw = true;
    },
    // 查看未关联的业务空间--flag--查看-or-选择
    lookUnrelatBSpace(flag) {
      this.isAction = flag;
      let arr = this.scene.getSelectedSpaces();
      if (flag && !arr.length) {
        this.$message.warning('请至少选择一个空间');
        return;
      }
      this.$refs.unRelateBSP.showDialog(this.buildFloor);
    },
    // 取消(所有取消公用)
    cancelGraphy() {
      this.init(2);
      this.$emit('copyID', '')
    },
    // 批量创建业务空间弹窗
    handleCommand(command) {
      this.groupCreateDialogVis = true;
    },
    // 创建弹窗确认
    confirm() {
      if (this.groupCreateType == 1) {
        this.groupCreateBSpace()
      } else if (this.groupCreateType == 2) {
        this.type = 5;
        this.config.isEdit = true;
        this.config.groupSelect = true;
        this.config.divide = false;
        this.groupCreateDialogVis = false;
        // 清空选中空间
        this.scene.clearSpaceSelection();
        // 设置空间可选
        this.scene.isSpaceSelectable = true;
        // 设置业务空间不可选
        this.scene.isZoneSelectable = false;
      }
    },
    // 根据未关联元空间批量创建业务空间
    groupCreateBSpace() {
      let text = []
      let Spaces = this.allUnRelatISP.map(t => {
        if (t.Outline) {
          let area = 0;
          if (t.Outline[0]) {
            area = this.getarea(t.Outline[0]);
            if (t.Outline.length > 1) {
              for (let i = 1; i < t.Outline.length; i++) {
                let temp = this.getarea(t.Outline[i]);
                area = area - temp
              }
            }
            area = (area / 1000000).toFixed(2);
            if (area < (this.areaValue / 100)) {
              return undefined
            }
          } else {
            return undefined;
          }
          text.push(t.RoomLocalName || t.RoomName)
          let obj = {
            IspaceId: t.RoomID,
            RoomLocalName: t.RoomLocalName || t.RoomName,
            Outline: [t.Outline],
            BuildingId: this.buildFloor[0],
            FloorId: this.buildFloor[1],
            Height: this.spaceHeight
          }
          if (t.CustomParam) {
            obj.CustomParam = t.CustomParam
          }
          return obj;
        } else {
          return undefined
        }
      }).filter(item => item);
      if (Spaces.length) {
        this.$confirm(
          "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
          "<p>涉及的空间：</p>" +
          "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
          text.toString() +
          "</p>",
          "提示", {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
        ).then(() => {
          this.groupCreateDialogVis = false;
          this.canvasLoading = true;
          this.groupCreateBSP(Spaces)
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量创建"
          });
        });
      } else {
        this.$message('没有未关联的空间')
      }
    },
    // 创建新的业务空间
    createNewZone() {
      let arr = this.scene.getSelectedSpaces();
      if (arr.length) {
        let tempArr = [];
        arr.map(t => {
          tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
        })
        this.$refs.createBSP.showDialog(tempArr.toString());
      } else {
        this.$message.warning('请至少选择一个空间');
      }
    },
    // 根据图创建新的业务空间-弹窗返回确认创建
    createRoom(val) {
      const zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
      let spaces = {};
      try {
        if (this.scene.cutItem || this.scene.sceneMark) {
          // 如果有划分,求交集
          // 格式为Poly(先与业务空间求差集)
          const obj = this.scene.getZoneDifference(true);
          // 差集与楼层平面图或用户划分区域求交集
          spaces = this.scene.getPloyIntersect(obj)
        } else {
          // 格式为SPoint[]
          spaces = this.scene.getZoneDifference();
        }
        for (let key in spaces) {
          spaces[key] = spaces[key].map(t => {
            let temp = t.map(item => {
              return {
                X: 1 * item.x.toFixed(2),
                Y: -item.y.toFixed(2),
                Z: 0
              }
            })
            return temp;
          })
          let newarr = this.makeMaxAreaFirst(spaces[key])
          zoneObj.Outline.push(newarr);
          let curISP = this.sourceIdToISP[key];
          if (curISP) {
            curISP && IspaceIdList.push(curISP.RoomID);
            zoneObj.Height = this.spaceHeight;
          }
        }
      } catch (err) {
        console.log(err)
        let selectSpaces = this.scene.getSelectedSpaces();
        selectSpaces.map(t => {
          zoneObj.Outline.push(t.data.OutLine);
          let key = t.data.SourceId;
          let curISP = this.sourceIdToISP[key];
          if (curISP) {
            IspaceIdList.push(curISP.RoomID);
            zoneObj.Height = this.spaceHeight;
          }
        })
        // 如果有划分,求交集
        if (this.scene.cutItem || this.scene.sceneMark) {
          zoneObj.Outline = [];
          let arr = this.scene.getIntersect();
          arr.map(t => {
            let temp = t.map(item => {
              return {
                X: 1 * item.x,
                Y: -item.y,
                Z: 0
              }
            })
            zoneObj.Outline.push([temp]);
          })
        }
      }
      // 至此
      if (!zoneObj.Outline.length) {
        zoneObj.Outline = null;
      }
      zoneObj.RoomLocalName = val;
      zoneObj.BuildingId = this.buildFloor[0];
      zoneObj.FloorId = this.buildFloor[1];
      this.createSingleBSP(zoneObj, IspaceIdList)
    },
    // 根据图从未关联平面图的业务空间中选择--按钮返回关联信号
    createFromUnrelated(zoneObj) {
      zoneObj.Outline = [];
      zoneObj.Height = 0;
      let spaces = {}, IspaceIdList = [];
      try {
        if (this.scene.cutItem || this.scene.sceneMark) {
          // 如果有划分,求交集
          // 格式为Poly(先与业务空间求差集)
          const obj = this.scene.getZoneDifference(true);
          // 差集与楼层平面图或用户划分区域求交集
          spaces = this.scene.getPloyIntersect(obj)
        } else {
          // 格式为SPoint[]
          spaces = this.scene.getZoneDifference();
        }
        for (let key in spaces) {
          spaces[key] = spaces[key].map(t => {
            let temp = t.map(item => {
              return {
                X: 1 * item.x.toFixed(2),
                Y: -item.y.toFixed(2),
                Z: 0
              }
            })
            return temp;
          })
          let newarr = this.makeMaxAreaFirst(spaces[key])
          zoneObj.Outline.push(newarr);
          let curISP = this.sourceIdToISP[key];
          if (curISP) {
            curISP && IspaceIdList.push(curISP.RoomID);
            zoneObj.Height = this.spaceHeight;
          }
        }
      } catch (err) {
        console.log(err);
        let selectSpaces = this.scene.getSelectedSpaces();
        selectSpaces.map(t => {
          zoneObj.Outline.push(t.data.OutLine);
          let key = t.data.SourceId;
          let curISP = this.sourceIdToISP[key];
          if (curISP) {
            curISP && IspaceIdList.push(curISP.RoomID);
            zoneObj.Height = this.spaceHeight;
          }
        })
        // 如果有划分,求交集
        if (this.scene.cutItem || this.scene.sceneMark) {
          zoneObj.Outline = [];
          let arr = this.scene.getIntersect();
          arr.map(t => {
            let temp = t.map(item => {
              return {
                X: 1 * item.x,
                Y: -item.y,
                Z: 0
              }
            })
            zoneObj.Outline.push([temp]);
          })
        }
      }
      if (!zoneObj.Outline.length) {
        zoneObj.Outline = null;
      }
      this.updateBSPOutline(zoneObj, IspaceIdList)
    },
    // 编辑空间详情
    editeSpaceDetail() {
      let item = this.curZoneItem.data;
      let query = {
        RoomID: item.RoomID,
        zone: this.tab.code,
        isMyTab: 1,
        buildFloorSelectd: this.buildFloor
      }
      this.$router.push({
        path: "/ledger/spaceDetail",
        query: query
      })
    },
    // 重新划分业务空间
    refactorBSP() {
      this.config.isEdit = true;
      this.config.groupSelect = false;
      this.config.divide = true;
      this.type = 4;
      // 设置空间可选
      this.scene.isSpaceSelectable = true;
      // 将已关联的设置不可选,并将当前选的隐藏
      this.scene.isZoneSelectable = false;
      this.curZoneItem.visible = false;
      // 将当前业务空间的每个元素添加到场景中并选中
      this.scene.addAllLikeSpace(this.curZoneItem.data.OutLine);
    },
    // 确认业务空间
    confirmZoneSpace() {
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      let space = {
        RoomID: this.curZoneItem.data.RoomID,
        State: 0,
        ObjectType: ObjectType
      }
      let pa = {
        Content: [space],
        Projection: ['State']
      }
      zoneUpdate(pa, res => {
        this.curZoneItem.isInfected = false;
        this.$emit('updateState');
        this.$message.success('更新成功');
      })
    },
    // 保存并确认业务空间
    confirmAndSave() {
      this.confirmAndSaveFlag = true;
      this.saveRefactorBSP();
    },
    // 重新划分--保存
    saveRefactorBSP() {
      let selectSpace = this.scene.getSelectedSpaces();
      let selectLikeSpace = this.scene.getSelectedLikeSpace();
      //更新业务空间
      let zoneObj = { Outline: [], Height: 0, State: this.confirmAndSaveFlag ? 0 : this.curZoneItem.isInfected ? 1 : 0 }, IspaceIdList = [];
      // 空间
      selectSpace.map(t => {
        zoneObj.Outline.push(t.data.OutLine);
        if (this.BIMIDToSID[t.data.SourceId]) {
          IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
        }

        // if (t.Height && (zoneObj.Height == 0 || t.Height < zoneObj.Height)) {
        //   zoneObj.Height = t.Height > 100 ? (t.Height / 1000).toFixed(2) : t.Height;
        zoneObj.Height = this.spaceHeight
        // }
      })
      // 类空间
      selectLikeSpace.map(t => {
        zoneObj.Outline.push(t.data);
      })
      // 如果有划分,求交集
      if (this.scene.cutItem || this.scene.sceneMark) {
        zoneObj.Outline = [];
        let spaceIntersect = this.scene.getIntersect();
        spaceIntersect.map(t => {
          let temp = t.map(item => {
            return {
              X: item.x,
              Y: -item.y,
              Z: 0
            }
          })
          zoneObj.Outline.push([temp]);
        })
        let likeSpaceIntersect = this.scene.getLikeIntersect();
        likeSpaceIntersect.map(t => {
          let temp = t.map(item => {
            return {
              X: item.x,
              Y: -item.y,
              Z: 0
            }
          })
          zoneObj.Outline.push([temp]);
        })
      }
      if (!zoneObj.Outline.length) {
        zoneObj.Outline = null;
      }
      zoneObj.RoomID = this.curZoneItem.data.RoomID;
      this.updateBSPOutline(zoneObj, IspaceIdList)
    },
    // 根据图批量创建所选业务空间
    groupCreateZone() {
      let arr = this.scene.getSelectedSpaces();
      let createSpaces = [], spaces = {};
      try {
        if (this.scene.cutItem || this.scene.sceneMark) {
          // 如果有划分,求交集
          // 格式为Poly(先与业务空间求差集)
          const obj = this.scene.getZoneDifference(true);
          // 差集与楼层平面图或用户划分区域求交集
          spaces = this.scene.getPloyIntersect(obj)
        } else {
          // 格式为SPoint[]
          spaces = this.scene.getZoneDifference();
        }
        for (let key in spaces) {
          let zoneObj = { Outline: [], Height: 0 }
          spaces[key] = spaces[key].map(t => {
            let temp = t.map(item => {
              return {
                X: 1 * item.x.toFixed(2),
                Y: -item.y.toFixed(2),
                Z: 0
              }
            })
            return temp;
          })
          let newarr = this.makeMaxAreaFirst(spaces[key])
          zoneObj.Outline.push(newarr);
          if (!zoneObj.Outline.length) {
            continue
          }
          //计算面积
          let area = 0, line = zoneObj.Outline;
          for (let i = 0; i < line.length; i++) {
            for (let j = 0; j < line[i].length; j++) {
              if (j == 0) {
                area += this.getarea(line[i][0]);
              } else {
                area -= this.getarea(line[i][j]);
              }
            }
          }
          area = (area / 1000000).toFixed(2);
          if (area < (this.areaValue / 100)) {
            continue
          }
          //生成空间对象
          let curISP = this.sourceIdToISP[key];
          if (curISP) {
            zoneObj.Height = this.spaceHeight;
            // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
            zoneObj.IspaceId = curISP.RoomID;
            zoneObj.RoomLocalName = curISP.RoomLocalName;
          }
          zoneObj.BuildingId = this.buildFloor[0];
          zoneObj.FloorId = this.buildFloor[1];
          createSpaces.push(zoneObj);
        }
      } catch (err) {
        console.log(err)
        let createSpaces = [];
        // 如果有划分,求交集
        if (this.scene.cutItem || this.scene.sceneMark) {
          let outlines = this.scene.getIntersectInSpace();
          for (let k in outlines) {
            outlines[k] = outlines[k].map(t => {
              t = t.map(item => {
                item = item.map(j => {
                  return { X: j.x, Y: -j.y, Z: 0 }
                })
                return item
              })
              return t;
            })
          }
          createSpaces = arr.map(t => {
            let line = outlines[t.data.SourceId];
            if (!line || !line.length) {
              return undefined
            } else {
              let area = 0;
              for (let i = 0; i < line.length; i++) {
                for (let j = 0; j < line[i].length; j++) {
                  if (j == 0) {
                    area += this.getarea(line[i][0]);
                  } else {
                    area -= this.getarea(line[i][j]);
                  }
                }
              }
              area = (area / 1000000).toFixed(2);
              if (area < (this.areaValue / 100)) {
                return undefined;
              }
            }
            return {
              IspaceId: this.BIMIDToSID[t.data.SourceId],
              RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
              Outline: line,
              BuildingId: this.buildFloor[0],
              FloorId: this.buildFloor[1],
              Height: this.spaceHeight
            }
          }).filter(item => item)
        } else {
          createSpaces = arr.map(t => {
            let line = t.data.OutLine;
            if (!line || !line.length) {
              return undefined
            } else {
              let area = this.getarea(line[0]);
              if (line.length > 1) {
                for (let i = 1; i < line.length; i++) {
                  area -= this.getarea(line[i]);
                }
              }
              area = (area / 1000000).toFixed(2);
              if (area < (this.areaValue / 100)) {
                return undefined;
              }
            }
            return {
              IspaceId: this.BIMIDToSID[t.data.SourceId],
              RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
              Outline: [line],
              BuildingId: this.buildFloor[0],
              FloorId: this.buildFloor[1],
              Height: this.spaceHeight
            }
          }).filter(item => item);
        }
      }
      if (createSpaces.length) {
        this.canvasLoading = true;
        this.groupCreateBSP(createSpaces)
      } else {
        this.$message.warning('未选择空间');
      }
    },
    // 更新业务空间和元空间的关系
    relationInBSPandISP(SpaceId, IspaceIdList) {
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      let pa = {
        data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
        type: ObjectType
      }
      createRelateInZoneAndISp(pa, res => {
        this.$message.success('创建成功');
        this.init(2);
        if (this.confirmAndSaveFlag) {
          this.confirmAndSaveFlag = false;
          this.curZoneItem.selected = false;
          this.curZoneItem = {};
          this.$emit('updateState');
        }
      })
    },
    // 批量更新业务空间和元空间的关系
    groupCreRelaZoneAndISp(Spaces) {
      Spaces = Spaces.filter(item => item.IspaceId);
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      if (Spaces.length) {
        let param = {
          data: {
            Content: Spaces
          },
          type: ObjectType
        }
        groupCreRelaZoneAndISp(param, res => {
          this.$message.success('创建成功')
          this.canvasLoading = false;
          this.init(2)
        })
      } else {
        this.$message.success('创建成功')
        this.canvasLoading = false;
        this.init(2)
      }
    },
    // 批量创建
    groupCreateBSP(spaces) {
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      spaces = spaces.map(t => {
        t.ObjectType = ObjectType;
        t.BIMLocation = this.getAverageVal(t.Outline);

        return t;
      })
      let pa = {
        Content: spaces,
      }
      zoneCreate(pa, res => {
        res.EntityList.map(t => {
          spaces = spaces.map(item => {
            if (t.RoomLocalName == item.RoomLocalName) {
              item.SpaceId = t.RoomID
            }
            return item;
          })
        })
        this.groupCreRelaZoneAndISp(spaces)
      })
    },
    // 单个创建
    createSingleBSP(space, IspaceIdList) {
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      space.BIMLocation = space.Outline ? this.getAverageVal(space.Outline) : null;
      space.ObjectType = ObjectType;
      let pa = {
        Content: [space]
      }
      zoneCreate(pa, res => {
        this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
      })
    },
    // 更新业务空间区域
    updateBSPOutline(zoneObj, IspaceIdList) {
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      zoneObj.BIMLocation = zoneObj.Outline ? this.getAverageVal(zoneObj.Outline) : null;
      zoneObj.ObjectType = ObjectType;
      zoneObj.BuildingId = this.buildFloor[0];
      zoneObj.FloorId = this.buildFloor[1];
      let pa = {
        Content: [zoneObj],
        Projection: ['BIMLocation', 'ObjectType', 'Outline', 'Height', 'BuildingId', 'FloorId']
      }
      zoneUpdate(pa, res => {
        zoneUpdateOutline(pa, res => { console.log(res) })
        this.updateZoneBF(zoneObj, IspaceIdList);
      })
    },
    // 从未关联平面图的业务空间中选择时更新业务空间建筑楼层
    updateZoneBF(zoneObj, IspaceIdList) {
      let pa = [{
        Type: zoneObj.ObjectType,
        SpaceId: zoneObj.RoomID,
        Id: zoneObj.FloorId,
      }]
      handleZoneUpdateBd(pa, res => {
        this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
      })
    },
    // 查询未关联平面图的业务空间(项目下+当前分区)
    getBSPunrelaISP() {
      let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
      let pa = {
        Filters: `Outline isNull;ObjectType="${ObjectType}"`
      }
      zoneCount(pa, res => {
        this.num = res.Count;
      })
    },
    // 计算平均值 作为业务空间BIMLocation
    getAverageVal(Outline) {
      let X = 0, Y = 0, Z = 0, len = 0;
      Outline.map(t => {
        if (t[0]) {
          t[0].map(item => {
            X += item.X;
            Y += item.Y;
            Z += item.Z;
          })
          len += t[0].length
        }
      })
      X = (X / len).toFixed(2);
      Y = (Y / len).toFixed(2);
      Z = (Z / len).toFixed(2);
      return `${X},${Y},${Z}`
    },
    // 计算面积
    getarea(arr) {
      if (!arr.length) {
        return 0;
      }
      let sum = 0;
      let n = arr.length;
      arr[n] = arr[0];
      for (let i = 1; i <= n; i++) {
        sum += arr[i].X * arr[i - 1].Y - arr[i - 1].X * arr[i].Y;
      }
      return Math.abs(sum / 2)
    },
    // canvas 获取焦点
    focus() {
      document.getElementById(`floorCanvas`).focus()
    },
    // 清除canvas
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      this.view = new FloorView('floorCanvas')
    },
    // 工具栏操作
    // 吸附
    changeAbsorb(isAbsorbing) {
      this.scene.isAbsorbing = isAbsorbing;
    },
    // 框选
    groupSelect() {
      this.scene.isRectSelection = 1;
    },
    // 适配底图到窗口
    fit() {
      if (this.scene.sceneMark) {
        this.view.fitItemToView([this.scene.sceneMark])
        return
      }
      this.view.fitSceneToView()
    },
    // 保存为png
    savePng() {
      this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
    },
    // 保存为svg
    saveSvg() {
      this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
    },
    // 保存json
    saveJson() {
      this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
    },
    // 切割划分
    divide() {
      this.scene.isCutting = true;
    },
    // 清除切割划分
    clearDivide() {
      this.scene.clearCut();
    },
    // 撤销
    undo() { },
    // 反撤销
    redo() { },
    // 缩放
    scale(val) {
      if (!this.view) {
        return;
      }
      let scale = this.view.scale;
      this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
    },
    // 给定多个轮廓线的数据,计算得到面积最大值,并把它放置数组第一项,并将第一项顺时针处理,第一项以后的每一项做逆时针处理
    // list {XYZ}[][]
    makeMaxAreaFirst(list) {
      let arr = [], area = 0;
      for (let i = 0; i < list.length; i++) {
        let temp = this.getarea(list[i])
        if (temp > area) {
          arr.unshift(list[i])
        } else {
          arr.push(list[i])
        }
      }
      arr.map((t, i) => {
        if (!i) {
          if (this.clockDir(t) > 0) {
            return t
          } else {
            return t.reverse()
          }
        } else {
          if (this.clockDir(t) > 0) {
            return t.reverse()
          } else {
            return t
          }
        }
      })
      return arr;
    },
    // 数组为顺时针or逆时针 顺时针非负 逆时针为 负
    clockDir(pointList) {
      let l = pointList.length - 1
      if (pointList[0].x == pointList[l].x && pointList[0].y == pointList[l].y) {
        pointList.splice(l, 1);
      }
      if (pointList.length < 3) {
        return 0;
      }
      let index = 0;
      let len = pointList.length;
      for (let i = 1; i < len; i++) {
        if (pointList[i].X > pointList[index].X) {
          index = i;
        }
      }
      let p1 = pointList[index == 0 ? len - 1 : index - 1];
      let p2 = pointList[index];
      let p3 = pointList[(index + 1) % len];
      return (p2.X - p1.X) * (p3.Y - p2.Y) - (p2.Y - p1.Y) * (p3.X - p2.X);
    }
  },
  filters: {
    cutString: function (str, len) {
      //length属性读出来的汉字长度为1
      if (!!str && typeof str == "string" && str.length > len) {
        return str.substring(0, len) + "...";
      } else {
        return str || "--";
      }
    }
  },
  watch: {
    projectId() {
      this.FloorMap = '';
      this.tab = {};
    },
    "view.scale": {
      handler(n) {
        if (this.$refs.canvasFun) {
          let s = n * 10 / this.view.minScale
          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
        }
      }
    },
    "scene.isRectSelection": {
      handler(n) {
        if (!n) {
          this.$refs.canvasFun.active = '';
        }
      }
    },
    "scene.isCutting": {
      handler(n) {
        if (!n) {
          this.$refs.canvasFun.active = '';
          this.$refs.canvasFun.isSwitch = false;
          this.scene.isAbsorbing = false;
        }
      }
    },
  }
}
</script>
<style lang="less" scoped>
#graphy {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 10px;
  height: calc(100% - 56px);
  .canvas-box {
    width: 100%;
    height: 100%;
  }
  .buttons-box {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 10px;
    width: 100%;
    z-index: 999;
    & > div {
      float: left;
    }
    /deep/ .el-autocomplete {
      display: inline-block;
      width: 320px;
      margin-right: 10px;
    }
    .button-group button,
    .button-group .el-dropdown {
      display: block;
      float: left;
    }
    .my-autocomplete {
      li {
        line-height: normal;
        padding: 7px;
        .name {
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .addr {
          font-size: 12px;
          color: #b4b4b4;
        }
        .highlighted .addr {
          color: #ddd;
        }
      }
    }
  }
  .canvas-actions-box {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
  #autoRelate {
    /deep/ .el-slider__marks-text:nth-child(2) {
      width: 25px;
    }
  }
}
</style>