graphy.vue 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316
  1. <template>
  2. <div id="graphy" ref="graphy" v-loading="canvasLoading">
  3. <div v-show="!FloorMap">
  4. <div style="margin-right:10px;width: 100%;margin-bottom: 10px" v-if="showOtherFlag">
  5. <!-- 平面图其他分区 -->
  6. <el-button type="primary" @click="addZoneBtn">添加分区</el-button>
  7. <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
  8. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  9. </el-option>
  10. </el-select>
  11. </div>
  12. <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
  13. <i class="icon-wushuju iconfont"></i>
  14. 暂无数据
  15. </div>
  16. </div>
  17. <div class="canvas-box" v-show="FloorMap">
  18. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  19. <!-- 初始两个按钮 -->
  20. <el-row class="buttons-box">
  21. <div style="margin-right:10px;width: 100%;margin-bottom: 10px" v-if="showOtherFlag">
  22. <!-- 平面图其他分区 -->
  23. <el-button type="primary" @click="addZoneBtn">添加分区</el-button>
  24. <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
  25. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  26. </el-option>
  27. </el-select>
  28. </div>
  29. <div>
  30. <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
  31. width="180px" @select="handleSelect">
  32. <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSelect"></i>
  33. <template slot-scope="{ item }">
  34. <div class="name" style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
  35. :title="item.data.RoomLocalName">
  36. {{ item.data.RoomLocalName }}
  37. <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
  38. </div>
  39. </template>
  40. </el-autocomplete>
  41. </div>
  42. <div class="button-group">
  43. <!-- 默认操作模式 -->
  44. <div v-show="type==1">
  45. <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
  46. 创建业务空间
  47. <el-dropdown-menu slot="dropdown">
  48. <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item>
  49. </el-dropdown-menu>
  50. </el-dropdown>
  51. <!-- 点击已经关联的业务空间 -->
  52. <el-button type="primary" plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
  53. <el-button type="primary" @click="editeSpaceDetail" :disabled="zoneDisable">查看空间详情</el-button>
  54. <el-button type="primary" plain @click="confirmZoneSpace" :disabled="zoneDisable||(!zoneDisable&&!curZoneItem.isInfected)">确认业务空间
  55. </el-button>
  56. <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
  57. </div>
  58. <!-- 点击已经关联的业务空间 -->
  59. <!-- <div v-show="type==2">
  60. </div> -->
  61. <!-- 点击未关联的业务空间 -->
  62. <div v-show="type==3">
  63. <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
  64. <el-button plain @click="lookUnrelatBSpace(true)">从未关联平面图的业务空间中选择</el-button>
  65. <el-button plain @click="cancelGraphy">取 消</el-button>
  66. </div>
  67. <!-- 重新划分业务空间 -->
  68. <div v-show="type==4">
  69. <el-button plain @click="cancelGraphy">取 消</el-button>
  70. <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
  71. <el-button type="primary" v-show='curZoneItem.isInfected' @click="confirmAndSave">保存并确认业务空间</el-button>
  72. </div>
  73. <!-- 批量创建所选业务空间 -->
  74. <div v-show="type==5">
  75. <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
  76. <el-button plain @click="cancelGraphy">取 消</el-button>
  77. </div>
  78. <div style="position: absolute;right: 10px;">
  79. <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
  80. </div>
  81. </div>
  82. </el-row>
  83. <!-- 底部操作按钮 -->
  84. <el-row class="canvas-actions-box">
  85. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo"
  86. @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
  87. </el-row>
  88. </div>
  89. <!-- -->
  90. <!-- 未关联元空间的业务空间 -->
  91. <unRelateBSP ref="unRelateBSP" :isAction="isAction" @createFromUnrelated="createFromUnrelated" :code="tab.code"></unRelateBSP>
  92. <!-- 创建新的业务空间 -->
  93. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  94. <!-- 批量创建选择弹窗 -->
  95. <el-dialog title="提示" :visible.sync="groupCreateDialogVis" width="30%" :close-on-click-modal="false">
  96. <div id="autoRelate">
  97. <p>批量创建面积大于此值的默认空间为业务空间:</p>
  98. <div style="padding:10px 20px;margin:0 0 10px 0;">
  99. <el-slider v-model="areaValue" :marks="areaMarks" :step="10" :format-tooltip='val=>val/100'> </el-slider>
  100. </div>
  101. <p>请选择批量创建方式:</p>
  102. <p>
  103. <el-radio v-model="groupCreateType" :label="1">批量将所有的空白空间创建业务空间</el-radio>
  104. </p>
  105. <p>
  106. <el-radio v-model="groupCreateType" :label="2">批量选择空白空间创建业务空间</el-radio>
  107. </p>
  108. </div>
  109. <span slot="footer" class="dialog-footer">
  110. <el-button size="small" @click="groupCreateDialogVis=false">取消</el-button>
  111. <el-button size="small" type="primary" @click="confirm">确认</el-button>
  112. </span>
  113. </el-dialog>
  114. <dialogZone ref="zone" @createSuccess="getOtherType" />
  115. </div>
  116. </template>
  117. <script>
  118. import canvasFun from "./canvasFun"
  119. import { mapGetters } from "vuex";
  120. import { SPoint, SColor } from "@saga-web/draw/lib";
  121. import { DivideFloorScene, FloorView, SpaceItem, ZoneItem, Opt } from "@saga-web/cad-engine/lib";
  122. import { colorArr } from "@/utils/spaceColor"
  123. import unRelateBSP from "./unRelateBSP";
  124. import createBSP from "./createBSP";
  125. import dialogZone from "../../ledger/addDialog/dialogZone";
  126. import {
  127. createRelateInZoneAndISp,
  128. getIspNotInSpace,
  129. groupCreRelaZoneAndISp,
  130. queryAllZoneType,
  131. queryZone,
  132. zoneCount,
  133. zoneCreate,
  134. zoneQuery,
  135. zoneUpdate,
  136. zoneUpdateOutline,
  137. handleZoneUpdateBd
  138. } from "@/api/scan/request"
  139. export default {
  140. components: {
  141. canvasFun,
  142. unRelateBSP,
  143. createBSP,
  144. dialogZone
  145. },
  146. data() {
  147. return {
  148. canvasWidth: 800,
  149. canvasHeight: 600,
  150. type: 1, // 默认操作模式
  151. search: '',//搜索
  152. buildFloor: ['', ''],
  153. FloorObj: {}, //楼层对象
  154. FloorMap: '', //楼层底图
  155. tab: {},
  156. config: {
  157. isEdit: false,
  158. divide: true,
  159. groupSelect: true
  160. },
  161. canvasLoading: false,
  162. view: null,
  163. scene: null,
  164. Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
  165. businessSpaceList: [], // 所有业务空间
  166. num: 0, // 未关联元空间的业务空间统计
  167. BSPRelaISPList: [], // 已关联元空间的业务空间
  168. // 未关联元空间的业务空间弹窗
  169. isAction: false,
  170. curOutline: [],
  171. BIMIDToSID: {}, //bimid映射元空间id
  172. BIMIDToSIName: {}, //bimid映射元空间名称
  173. curZoneItem: {}, //当前选中的业务空间item
  174. allUnRelatISP: [], //
  175. zoneList: [], // 业务空间-canvas图中
  176. groupCreateDialogVis: false, //批量创建业务空间弹窗
  177. groupCreateType: 1, //批量创建方式
  178. zoneDisable: true, // 重新划分是否禁用
  179. sourceIdToISP: {},
  180. areaValue: 40,
  181. areaMarks: { 0: '0m²', 100: '1m²' },
  182. options: [], //其他分区类型
  183. OtherValue: '',
  184. showOtherFlag: false, //是否显示其他分区类型添加
  185. buildFloorName: "", //建筑楼层名称
  186. }
  187. },
  188. computed: {
  189. ...mapGetters("layout", ["projectId", "projects"]),
  190. projectName() {
  191. let projectObj = this.projects.find(item => {
  192. return item.id == this.projectId
  193. })
  194. return projectObj ? projectObj.name ? projectObj.name : projectObj.id : this.projectId
  195. }
  196. },
  197. created() {
  198. Opt.sceneMarkColor = new SColor('#ffffff');
  199. },
  200. mounted() {
  201. this.canvasWidth = this.$refs.graphy.offsetWidth - 20;
  202. this.canvasHeight = this.$refs.graphy.offsetHeight - 20;
  203. },
  204. methods: {
  205. // 初始化
  206. init(initType) {
  207. this.type = 1;
  208. if (this.scene) {
  209. this.scene.clearSpaceSelection();
  210. this.scene.clearZoneSelection();
  211. this.scene.clearCut();
  212. this.scene.clearLikeSpaces();
  213. this.zoneDisable = true;
  214. this.scene.isZoneSelectable = true;
  215. this.scene.isSpaceSelectable = false;
  216. }
  217. if (this.buildFloor.indexOf('all') > -1 || this.buildFloor.indexOf('noKnow') > -1) {
  218. return;
  219. }
  220. if (initType == 1) {
  221. // 底图
  222. this.getGraphy();
  223. } else {
  224. // 业务空间
  225. this.getBusinessSpace();
  226. }
  227. this.config = {
  228. isEdit: false,
  229. divide: true,
  230. groupSelect: true,
  231. }
  232. // 获取当前楼层的元空间
  233. this.getFloorISpace();
  234. // 查询未关联业务空间的元空间
  235. this.getISPSPUnrelaBSP();
  236. // 查询未关联平面图的业务空间
  237. this.getBSPunrelaISP();
  238. },
  239. // 获取当前楼层的元空间-元空间接口不变
  240. getFloorISpace() {
  241. let pa = {
  242. zone: 'Ispace',
  243. data: {
  244. // Filters: `FloorId='${this.buildFloor[1]}'`,
  245. PageSize: 1000,
  246. FloorId: this.buildFloor[1]
  247. }
  248. }
  249. queryZone(pa, res => {
  250. this.BIMIDToSID = {}
  251. this.BIMIDToSIName = {}
  252. this.sourceIdToISP = {}
  253. res.Content.map(t => {
  254. let key = t.BIMID.split(":")[1];
  255. this.BIMIDToSID[key] = t.RoomID;
  256. this.BIMIDToSIName[key] = t.RoomLocalName || t.RoomName;
  257. this.sourceIdToISP[key] = t;
  258. })
  259. })
  260. },
  261. //添加其他分区
  262. addZoneBtn() {
  263. this.$refs.zone.dialogFormVisible = true
  264. },
  265. // 搜索
  266. querySearch(queryString, cb) {
  267. let restaurants = this.zoneList;
  268. let results = queryString ?
  269. restaurants.filter(this.createFilter(queryString)) :
  270. restaurants;
  271. // 调用 callback 返回建议列表的数据
  272. cb(results);
  273. },
  274. // 过滤器
  275. createFilter(queryString) {
  276. return restaurant => {
  277. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  278. };
  279. },
  280. // 查询选中,定位
  281. handleSelect(zone) {
  282. // 清空选中
  283. this.scene.clearSpaceSelection();
  284. this.scene.clearZoneSelection();
  285. // 选中当前
  286. zone.selected = true;
  287. this.curZoneItem = zone;
  288. this.zoneDisable = false;
  289. this.view.fitSelectedToView();
  290. },
  291. // 父组件调用
  292. getData(buildFloor, FloorObj, tab) {
  293. let initType = 1;
  294. if (FloorObj.FloorID == this.FloorObj.FloorID) {
  295. initType = 2;
  296. }
  297. this.buildFloor = buildFloor;
  298. this.FloorObj = FloorObj;
  299. this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : '';
  300. this.tab = tab;
  301. this.buildFloorName = `${FloorObj.buildName}-${FloorObj.label}`;
  302. console.log(arguments);
  303. if (tab.code == "OtherZone") {
  304. // 其他分区
  305. this.showOtherFlag = true
  306. this.getOtherType();
  307. // this.OtherValue = (localStorage.getItem('otherZone')) || ''
  308. } else {
  309. this.showOtherFlag = false;
  310. }
  311. this.init(initType);
  312. },
  313. // 其他分区类型查询
  314. getOtherType() {
  315. let pa = {
  316. Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }],
  317. Filters: `Code="OtherZone"`
  318. }
  319. queryAllZoneType(pa, res => {
  320. if (res.Content[0].ZoneType && res.Content[0].ZoneType.length) {
  321. this.options = res.Content[0].ZoneType.map(t => {
  322. t.value = t.Code;
  323. t.label = t.Name;
  324. return t;
  325. })
  326. } else {
  327. this.options = []
  328. }
  329. })
  330. },
  331. // 其他类型下拉change
  332. changeOtherZone(val) {
  333. this.init(2);
  334. // localStorage.setItem('otherZone', val)
  335. },
  336. // 获取未绑定业务空间的元空间
  337. getISPSPUnrelaBSP() {
  338. let pa = {
  339. data: {
  340. // Filters: `FloorId='${this.buildFloor[1]}'`,
  341. PageSize: 1000,
  342. FloorId: this.buildFloor[1]
  343. },
  344. objectType: this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code
  345. }
  346. this.allUnRelatISP = []
  347. getIspNotInSpace(pa, res => {
  348. this.allUnRelatISP = res.Content;
  349. })
  350. },
  351. // 获取底图
  352. getGraphy() {
  353. let that = this;
  354. that.clearGraphy()
  355. that.scene = new DivideFloorScene();
  356. that.canvasLoading = true;
  357. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  358. that.canvasLoading = false;
  359. if (res == 'error') {
  360. this.FloorMap = '';
  361. this.$message.warning('数据解析异常');
  362. return;
  363. }
  364. that.view.scene = that.scene;
  365. // 蒙版
  366. if (this.FloorObj.Outline) {
  367. let newArr = this.FloorObj.Outline.map(t => {
  368. return new SPoint(t.X, t.Y);
  369. })
  370. this.scene.addSceneMark(newArr)
  371. }
  372. this.scene.isSpaceSelectable = false;
  373. // 绘制业务空间
  374. that.getBusinessSpace();
  375. that.fit();
  376. that.view.minScale = that.view.scale;
  377. if (that.$refs.canvasFun) {
  378. that.$refs.canvasFun.everyScale = that.view.scale;
  379. }
  380. })
  381. },
  382. // 获取当前分区下的业务空间
  383. getBusinessSpace() {
  384. this.canvasLoading = true
  385. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  386. let pa = {
  387. ZoneType: ObjectType,
  388. Filters: `not RoomID isNull`,
  389. Orders: "createTime desc, RoomID asc",
  390. PageSize: 10000
  391. }
  392. if (this.buildFloor.length && this.buildFloor.length > 1) {
  393. pa.BuildingId = this.buildFloor[0];
  394. pa.FloorId = this.buildFloor[1];
  395. }
  396. zoneQuery(pa, res => {
  397. // 所有业务空间
  398. this.businessSpaceList = res.Content;
  399. // 已关联元空间的业务空间
  400. this.BSPRelaISPList = [];
  401. res.Content.map(t => {
  402. if (t.Outline && t.Outline.length) {
  403. this.BSPRelaISPList.push(t)
  404. }
  405. })
  406. // 绘制业务空间
  407. let tempType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  408. let tempArr = this.BSPRelaISPList.map((t, i) => {
  409. if (t.FloorId == this.buildFloor[1] && t.ObjectType == tempType) {
  410. return {
  411. RoomLocalName: t.RoomLocalName,
  412. OutLine: t.Outline,
  413. RoomID: t.RoomID,
  414. Color: colorArr[i % colorArr.length],
  415. Infected: t.State
  416. }
  417. } else {
  418. console.log('internet slow')
  419. return undefined;
  420. }
  421. }).filter(item => item)
  422. console.log(this.scene)
  423. this.scene.removeAllZone();
  424. this.scene.addZoneList(tempArr);
  425. this.scene.click(this, this.canvasClick);
  426. this.zoneList = this.scene.zoneList;
  427. this.view._needDraw = true;
  428. this.canvasLoading = false;
  429. })
  430. },
  431. // canvas点击事件
  432. canvasClick(item, event) {
  433. console.log(item)
  434. console.log(event)
  435. if (this.type == 4) {//重新划分
  436. } else if (this.type == 5) {//批量
  437. } else {
  438. if (item instanceof SpaceItem && item.selectable) {
  439. if (this.type == 2) {
  440. this.scene.clearZoneSelection();
  441. }
  442. this.type = 3;
  443. this.curZoneItem = {};
  444. }
  445. if (item instanceof ZoneItem && item.selectable) {
  446. if (this.type == 3) {
  447. this.scene.clearSpaceSelection();
  448. }
  449. this.zoneDisable = false;
  450. this.curZoneItem = item;
  451. this.scene.clearZoneSelection();
  452. item.selected = true;
  453. this.$emit('copyID', this.curZoneItem.data.RoomID)
  454. }
  455. }
  456. },
  457. // 编辑平面图
  458. editGraphy() {
  459. this.type = 3;
  460. this.config.isEdit = true;
  461. this.config.groupSelect = false;
  462. this.config.divide = true;
  463. this.scene.isSpaceSelectable = true;
  464. // 设置业务空间不可选
  465. this.scene.isZoneSelectable = false
  466. this.view._needDraw = true;
  467. },
  468. // 查看未关联的业务空间--flag--查看-or-选择
  469. lookUnrelatBSpace(flag) {
  470. this.isAction = flag;
  471. let arr = this.scene.getSelectedSpaces();
  472. if (flag && !arr.length) {
  473. this.$message.warning('请至少选择一个空间');
  474. return;
  475. }
  476. this.$refs.unRelateBSP.showDialog(this.buildFloor);
  477. },
  478. // 取消(所有取消公用)
  479. cancelGraphy() {
  480. this.init(2);
  481. this.$emit('copyID', '')
  482. },
  483. // 批量创建业务空间弹窗
  484. handleCommand(command) {
  485. this.groupCreateDialogVis = true;
  486. },
  487. // 创建弹窗确认
  488. confirm() {
  489. if (this.groupCreateType == 1) {
  490. this.groupCreateBSpace()
  491. } else if (this.groupCreateType == 2) {
  492. this.type = 5;
  493. this.config.isEdit = true;
  494. this.config.groupSelect = true;
  495. this.config.divide = false;
  496. this.groupCreateDialogVis = false;
  497. // 清空选中空间
  498. this.scene.clearSpaceSelection();
  499. // 设置空间可选
  500. this.scene.isSpaceSelectable = true;
  501. // 设置业务空间不可选
  502. this.scene.isZoneSelectable = false;
  503. }
  504. },
  505. // 根据未关联元空间批量创建业务空间
  506. groupCreateBSpace() {
  507. let text = []
  508. let Spaces = this.allUnRelatISP.map(t => {
  509. if (t.Outline) {
  510. let area = 0;
  511. if (t.Outline[0]) {
  512. area = this.getarea(t.Outline[0]);
  513. if (t.Outline.length > 1) {
  514. for (let i = 1; i < t.Outline.length; i++) {
  515. let temp = this.getarea(t.Outline[i]);
  516. area = area - temp
  517. }
  518. }
  519. area = (area / 1000000).toFixed(2);
  520. if (area < (this.areaValue / 100)) {
  521. return undefined
  522. }
  523. } else {
  524. return undefined;
  525. }
  526. text.push(t.RoomLocalName || t.RoomName)
  527. return {
  528. IspaceId: t.RoomID,
  529. RoomLocalName: t.RoomLocalName || t.RoomName,
  530. Outline: [t.Outline],
  531. BuildingId: this.buildFloor[0],
  532. FloorId: this.buildFloor[1],
  533. Height: t.Height || 0
  534. }
  535. } else {
  536. return undefined
  537. }
  538. }).filter(item => item);
  539. if (Spaces.length) {
  540. this.$confirm(
  541. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  542. "<p>涉及的空间:</p>" +
  543. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  544. text.toString() +
  545. "</p>",
  546. "提示", {
  547. dangerouslyUseHTMLString: true,
  548. confirmButtonText: "确定",
  549. cancelButtonText: "取消",
  550. type: "warning"
  551. }
  552. ).then(() => {
  553. this.groupCreateDialogVis = false;
  554. this.canvasLoading = true;
  555. this.groupCreateBSP(Spaces)
  556. }).catch(() => {
  557. this.$message({
  558. type: "info",
  559. message: "已取消批量创建"
  560. });
  561. });
  562. } else {
  563. this.$message('没有未关联的空间')
  564. }
  565. },
  566. // 创建新的业务空间
  567. createNewZone() {
  568. let arr = this.scene.getSelectedSpaces();
  569. if (arr.length) {
  570. let tempArr = [];
  571. arr.map(t => {
  572. tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
  573. })
  574. this.$refs.createBSP.showDialog(tempArr.toString());
  575. } else {
  576. this.$message.warning('请至少选择一个空间');
  577. }
  578. },
  579. // 根据图创建新的业务空间-弹窗返回确认创建
  580. createRoom(val) {
  581. const zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  582. let spaces = {};
  583. if (this.scene.cutItem || this.scene.sceneMark) {
  584. // 如果有划分,求交集
  585. // 格式为Poly(先与业务空间求差集)
  586. const obj = this.scene.getZoneDifference(true);
  587. // 差集与楼层平面图或用户划分区域求交集
  588. spaces = this.scene.getPloyIntersect(obj)
  589. } else {
  590. // 格式为SPoint[]
  591. spaces = this.scene.getZoneDifference();
  592. }
  593. for (let key in spaces) {
  594. spaces[key] = spaces[key].map(t => {
  595. let temp = t.map(item => {
  596. return {
  597. X: 1 * item.x.toFixed(2),
  598. Y: -item.y.toFixed(2),
  599. Z: 0
  600. }
  601. })
  602. return temp;
  603. })
  604. let newarr = this.makeMaxAreaFirst(spaces[key])
  605. zoneObj.Outline.push(newarr);
  606. let curISP = this.sourceIdToISP[key];
  607. if (curISP) {
  608. curISP && IspaceIdList.push(curISP.RoomID);
  609. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  610. }
  611. }
  612. // 数据计算导致浏览器奔溃,临时注释(测试计算未崩溃改好)
  613. // let zoneObj = { Outline: [], Height: 0 }, IspaceIdList = [];
  614. // let selectSpaces = this.scene.getSelectedSpaces();
  615. // selectSpaces.map(t => {
  616. // zoneObj.Outline.push(t.data.OutLine);
  617. // let key = t.data.SourceId;
  618. // let curISP = this.sourceIdToISP[key];
  619. // if (curISP) {
  620. // IspaceIdList.push(curISP.RoomID);
  621. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  622. // }
  623. // })
  624. // // 如果有划分,求交集
  625. // if (this.scene.cutItem || this.scene.sceneMark) {
  626. // zoneObj.Outline = [];
  627. // let arr = this.scene.getIntersect();
  628. // arr.map(t => {
  629. // let temp = t.map(item => {
  630. // return {
  631. // X: 1 * item.x,
  632. // Y: -item.y,
  633. // Z: 0
  634. // }
  635. // })
  636. // zoneObj.Outline.push([temp]);
  637. // })
  638. // }
  639. // 至此
  640. if (!zoneObj.Outline.length) {
  641. zoneObj.Outline = null;
  642. }
  643. zoneObj.RoomLocalName = val;
  644. zoneObj.BuildingId = this.buildFloor[0];
  645. zoneObj.FloorId = this.buildFloor[1];
  646. this.createSingleBSP(zoneObj, IspaceIdList)
  647. },
  648. // 根据图从未关联平面图的业务空间中选择--按钮返回关联信号
  649. createFromUnrelated(zoneObj) {
  650. zoneObj.Outline = [];
  651. zoneObj.Height = 0;
  652. let spaces = {}, IspaceIdList = [];
  653. if (this.scene.cutItem || this.scene.sceneMark) {
  654. // 如果有划分,求交集
  655. // 格式为Poly(先与业务空间求差集)
  656. const obj = this.scene.getZoneDifference(true);
  657. // 差集与楼层平面图或用户划分区域求交集
  658. spaces = this.scene.getPloyIntersect(obj)
  659. } else {
  660. // 格式为SPoint[]
  661. spaces = this.scene.getZoneDifference();
  662. }
  663. for (let key in spaces) {
  664. spaces[key] = spaces[key].map(t => {
  665. let temp = t.map(item => {
  666. return {
  667. X: 1 * item.x.toFixed(2),
  668. Y: -item.y.toFixed(2),
  669. Z: 0
  670. }
  671. })
  672. return temp;
  673. })
  674. let newarr = this.makeMaxAreaFirst(spaces[key])
  675. zoneObj.Outline.push(newarr);
  676. let curISP = this.sourceIdToISP[key];
  677. if (curISP) {
  678. curISP && IspaceIdList.push(curISP.RoomID);
  679. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  680. }
  681. }
  682. // 改回之前逻辑
  683. // zoneObj.Outline = [];
  684. // zoneObj.Height = 0;
  685. // let spaces = {}, IspaceIdList = [];
  686. // let selectSpaces = this.scene.getSelectedSpaces();
  687. // selectSpaces.map(t => {
  688. // zoneObj.Outline.push(t.data.OutLine);
  689. // let key = t.data.SourceId;
  690. // let curISP = this.sourceIdToISP[key];
  691. // if (curISP) {
  692. // curISP && IspaceIdList.push(curISP.RoomID);
  693. // zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  694. // }
  695. // })
  696. // // 如果有划分,求交集
  697. // if (this.scene.cutItem || this.scene.sceneMark) {
  698. // zoneObj.Outline = [];
  699. // let arr = this.scene.getIntersect();
  700. // arr.map(t => {
  701. // let temp = t.map(item => {
  702. // return {
  703. // X: 1 * item.x,
  704. // Y: -item.y,
  705. // Z: 0
  706. // }
  707. // })
  708. // zoneObj.Outline.push([temp]);
  709. // })
  710. // }
  711. if (!zoneObj.Outline.length) {
  712. zoneObj.Outline = null;
  713. }
  714. this.updateBSPOutline(zoneObj, IspaceIdList)
  715. },
  716. // 编辑空间详情
  717. editeSpaceDetail() {
  718. let item = this.curZoneItem.data;
  719. let query = {
  720. RoomID: item.RoomID,
  721. zone: this.tab.code,
  722. isMyTab: 2,
  723. buildFloorSelectd: this.buildFloor
  724. }
  725. this.$router.push({
  726. path: "/ledger/spaceDetail",
  727. query: query
  728. })
  729. },
  730. // 重新划分业务空间
  731. refactorBSP() {
  732. this.config.isEdit = true;
  733. this.config.groupSelect = false;
  734. this.config.divide = true;
  735. this.type = 4;
  736. // 设置空间可选
  737. this.scene.isSpaceSelectable = true;
  738. // 将已关联的设置不可选,并将当前选的隐藏
  739. this.scene.isZoneSelectable = false;
  740. this.curZoneItem.visible = false;
  741. // 将当前业务空间的每个元素添加到场景中并选中
  742. this.scene.addAllLikeSpace(this.curZoneItem.data.OutLine);
  743. },
  744. // 确认业务空间
  745. confirmZoneSpace() {
  746. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  747. let space = {
  748. RoomID: this.curZoneItem.data.RoomID,
  749. State: 0,
  750. ObjectType: ObjectType
  751. }
  752. let pa = {
  753. Content: [space],
  754. Projection: ['State']
  755. }
  756. zoneUpdate(pa, res => {
  757. this.curZoneItem.isInfected = false;
  758. this.$emit('updateState');
  759. this.$message.success('更新成功');
  760. })
  761. },
  762. // 保存并确认业务空间
  763. confirmAndSave() {
  764. this.confirmAndSaveFlag = true;
  765. this.saveRefactorBSP();
  766. },
  767. // 重新划分--保存
  768. saveRefactorBSP() {
  769. let selectSpace = this.scene.getSelectedSpaces();
  770. let selectLikeSpace = this.scene.getSelectedLikeSpace();
  771. //更新业务空间
  772. let zoneObj = { Outline: [], Height: 0, State: this.confirmAndSaveFlag ? 0 : this.curZoneItem.isInfected ? 1 : 0 }, IspaceIdList = [];
  773. // 空间
  774. selectSpace.map(t => {
  775. zoneObj.Outline.push(t.data.OutLine);
  776. if (this.BIMIDToSID[t.data.SourceId]) {
  777. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId]);
  778. }
  779. if (t.Height && (zoneObj.Height == 0 || t.Height < zoneObj.Height)) {
  780. zoneObj.Height = t.Height > 100 ? (t.Height / 1000).toFixed(2) : t.Height;
  781. }
  782. })
  783. // 类空间
  784. selectLikeSpace.map(t => {
  785. zoneObj.Outline.push(t.data);
  786. })
  787. // 如果有划分,求交集
  788. if (this.scene.cutItem || this.scene.sceneMark) {
  789. zoneObj.Outline = [];
  790. let spaceIntersect = this.scene.getIntersect();
  791. spaceIntersect.map(t => {
  792. let temp = t.map(item => {
  793. return {
  794. X: item.x,
  795. Y: -item.y,
  796. Z: 0
  797. }
  798. })
  799. zoneObj.Outline.push([temp]);
  800. })
  801. let likeSpaceIntersect = this.scene.getLikeIntersect();
  802. likeSpaceIntersect.map(t => {
  803. let temp = t.map(item => {
  804. return {
  805. X: item.x,
  806. Y: -item.y,
  807. Z: 0
  808. }
  809. })
  810. zoneObj.Outline.push([temp]);
  811. })
  812. }
  813. if (!zoneObj.Outline.length) {
  814. zoneObj.Outline = null;
  815. }
  816. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  817. this.updateBSPOutline(zoneObj, IspaceIdList)
  818. },
  819. // 根据图批量创建所选业务空间
  820. groupCreateZone() {
  821. let arr = this.scene.getSelectedSpaces();
  822. let createSpaces = [], spaces = {};
  823. if (this.scene.cutItem || this.scene.sceneMark) {
  824. // 如果有划分,求交集
  825. // 格式为Poly(先与业务空间求差集)
  826. const obj = this.scene.getZoneDifference(true);
  827. // 差集与楼层平面图或用户划分区域求交集
  828. spaces = this.scene.getPloyIntersect(obj)
  829. } else {
  830. // 格式为SPoint[]
  831. spaces = this.scene.getZoneDifference();
  832. }
  833. for (let key in spaces) {
  834. let zoneObj = { Outline: [], Height: 0 }
  835. spaces[key] = spaces[key].map(t => {
  836. let temp = t.map(item => {
  837. return {
  838. X: 1 * item.x.toFixed(2),
  839. Y: -item.y.toFixed(2),
  840. Z: 0
  841. }
  842. })
  843. return temp;
  844. })
  845. let newarr = this.makeMaxAreaFirst(spaces[key])
  846. zoneObj.Outline.push(newarr);
  847. if (!zoneObj.Outline.length) {
  848. continue
  849. }
  850. //计算面积
  851. let area = 0, line = zoneObj.Outline;
  852. for (let i = 0; i < line.length; i++) {
  853. for (let j = 0; j < line[i].length; j++) {
  854. if (j == 0) {
  855. area += this.getarea(line[i][0]);
  856. } else {
  857. area -= this.getarea(line[i][j]);
  858. }
  859. }
  860. }
  861. area = (area / 1000000).toFixed(2);
  862. if (area < (this.areaValue / 100)) {
  863. continue
  864. }
  865. //生成空间对象
  866. let curISP = this.sourceIdToISP[key];
  867. if (curISP) {
  868. zoneObj.Height = zoneObj.Height == 0 ? curISP.Height : zoneObj.Height > curISP.Height ? curISP.Height : zoneObj.Height;
  869. zoneObj.IspaceId = curISP.RoomID;
  870. zoneObj.RoomLocalName = curISP.RoomLocalName;
  871. }
  872. zoneObj.BuildingId = this.buildFloor[0];
  873. zoneObj.FloorId = this.buildFloor[1];
  874. createSpaces.push(zoneObj);
  875. }
  876. // 改回之前逻辑
  877. // let arr = this.scene.getSelectedSpaces();
  878. // let createSpaces = [];
  879. // // 如果有划分,求交集
  880. // if (this.scene.cutItem || this.scene.sceneMark) {
  881. // let outlines = this.scene.getIntersectInSpace();
  882. // for (let k in outlines) {
  883. // outlines[k] = outlines[k].map(t => {
  884. // t = t.map(item => {
  885. // item = item.map(j => {
  886. // return { X: j.x, Y: -j.y, Z: 0 }
  887. // })
  888. // return item
  889. // })
  890. // return t;
  891. // })
  892. // }
  893. // createSpaces = arr.map(t => {
  894. // let line = outlines[t.data.SourceId];
  895. // if (!line || !line.length) {
  896. // return undefined
  897. // } else {
  898. // let area = 0;
  899. // for (let i = 0; i < line.length; i++) {
  900. // for (let j = 0; j < line[i].length; j++) {
  901. // if (j == 0) {
  902. // area += this.getarea(line[i][0]);
  903. // } else {
  904. // area -= this.getarea(line[i][j]);
  905. // }
  906. // }
  907. // }
  908. // area = (area / 1000000).toFixed(2);
  909. // if (area < (this.areaValue / 100)) {
  910. // return undefined;
  911. // }
  912. // }
  913. // return {
  914. // IspaceId: this.BIMIDToSID[t.data.SourceId],
  915. // RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
  916. // Outline: line,
  917. // BuildingId: this.buildFloor[0],
  918. // FloorId: this.buildFloor[1],
  919. // Height: t.data.Height > 100 ? (t.data.Height / 1000).toFixed(2) : t.data.Height || 0
  920. // }
  921. // }).filter(item => item)
  922. // } else {
  923. // createSpaces = arr.map(t => {
  924. // let line = t.data.OutLine;
  925. // if (!line || !line.length) {
  926. // return undefined
  927. // } else {
  928. // let area = this.getarea(line[0]);
  929. // if (line.length > 1) {
  930. // for (let i = 1; i < line.length; i++) {
  931. // area -= this.getarea(line[i]);
  932. // }
  933. // }
  934. // area = (area / 1000000).toFixed(2);
  935. // if (area < (this.areaValue / 100)) {
  936. // return undefined;
  937. // }
  938. // }
  939. // return {
  940. // IspaceId: this.BIMIDToSID[t.data.SourceId],
  941. // RoomLocalName: this.BIMIDToSIName[t.data.SourceId],
  942. // Outline: [line],
  943. // BuildingId: this.buildFloor[0],
  944. // FloorId: this.buildFloor[1],
  945. // Height: t.data.Height > 100 ? (t.data.Height / 1000).toFixed(2) : t.data.Height || 0
  946. // }
  947. // }).filter(item => item);
  948. // }
  949. if (createSpaces.length) {
  950. this.canvasLoading = true;
  951. this.groupCreateBSP(createSpaces)
  952. } else {
  953. this.$message.warning('未选择空间');
  954. }
  955. },
  956. // 更新业务空间和元空间的关系
  957. relationInBSPandISP(SpaceId, IspaceIdList) {
  958. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  959. let pa = {
  960. data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
  961. type: ObjectType
  962. }
  963. createRelateInZoneAndISp(pa, res => {
  964. this.$message.success('创建成功');
  965. this.init(2);
  966. if (this.confirmAndSaveFlag) {
  967. this.confirmAndSaveFlag = false;
  968. this.curZoneItem.selected = false;
  969. this.curZoneItem = {};
  970. this.$emit('updateState');
  971. }
  972. })
  973. },
  974. // 批量更新业务空间和元空间的关系
  975. groupCreRelaZoneAndISp(Spaces) {
  976. Spaces = Spaces.filter(item => item.IspaceId);
  977. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  978. if (Spaces.length) {
  979. let param = {
  980. data: {
  981. Content: Spaces
  982. },
  983. type: ObjectType
  984. }
  985. groupCreRelaZoneAndISp(param, res => {
  986. this.$message.success('创建成功')
  987. this.canvasLoading = false;
  988. this.init(2)
  989. })
  990. } else {
  991. this.$message.success('创建成功')
  992. this.canvasLoading = false;
  993. this.init(2)
  994. }
  995. },
  996. // 批量创建
  997. groupCreateBSP(spaces) {
  998. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  999. spaces = spaces.map(t => {
  1000. t.ObjectType = ObjectType;
  1001. t.BIMLocation = this.getAverageVal(t.Outline);
  1002. return t;
  1003. })
  1004. let pa = {
  1005. Content: spaces,
  1006. }
  1007. zoneCreate(pa, res => {
  1008. res.EntityList.map(t => {
  1009. spaces = spaces.map(item => {
  1010. if (t.RoomLocalName == item.RoomLocalName) {
  1011. item.SpaceId = t.RoomID
  1012. }
  1013. return item;
  1014. })
  1015. })
  1016. this.groupCreRelaZoneAndISp(spaces)
  1017. })
  1018. },
  1019. // 单个创建
  1020. createSingleBSP(space, IspaceIdList) {
  1021. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  1022. space.BIMLocation = space.Outline ? this.getAverageVal(space.Outline) : null;
  1023. space.ObjectType = ObjectType;
  1024. let pa = {
  1025. Content: [space]
  1026. }
  1027. zoneCreate(pa, res => {
  1028. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  1029. })
  1030. },
  1031. // 更新业务空间区域
  1032. updateBSPOutline(zoneObj, IspaceIdList) {
  1033. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  1034. zoneObj.BIMLocation = zoneObj.Outline ? this.getAverageVal(zoneObj.Outline) : null;
  1035. zoneObj.ObjectType = ObjectType;
  1036. zoneObj.BuildingId = this.buildFloor[0];
  1037. zoneObj.FloorId = this.buildFloor[1];
  1038. let pa = {
  1039. Content: [zoneObj],
  1040. Projection: ['BIMLocation', 'ObjectType', 'Outline', 'Height', 'BuildingId', 'FloorId']
  1041. }
  1042. zoneUpdate(pa, res => {
  1043. zoneUpdateOutline(pa, res => { console.log(res) })
  1044. this.updateZoneBF(zoneObj, IspaceIdList);
  1045. })
  1046. },
  1047. // 从未关联平面图的业务空间中选择时更新业务空间建筑楼层
  1048. updateZoneBF(zoneObj, IspaceIdList) {
  1049. let pa = [{
  1050. Type: zoneObj.ObjectType,
  1051. SpaceId: zoneObj.RoomID,
  1052. Id: zoneObj.FloorId,
  1053. }]
  1054. handleZoneUpdateBd(pa, res => {
  1055. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  1056. })
  1057. },
  1058. // 查询未关联平面图的业务空间(项目下+当前分区)
  1059. getBSPunrelaISP() {
  1060. let ObjectType = this.tab.code == 'OtherZone' ? this.OtherValue : this.tab.code;
  1061. let pa = {
  1062. Filters: `Outline isNull;ObjectType="${ObjectType}"`
  1063. }
  1064. zoneCount(pa, res => {
  1065. this.num = res.Count;
  1066. })
  1067. },
  1068. // 计算平均值 作为业务空间BIMLocation
  1069. getAverageVal(Outline) {
  1070. let X = 0, Y = 0, Z = 0, len = 0;
  1071. Outline.map(t => {
  1072. if (t[0]) {
  1073. t[0].map(item => {
  1074. X += item.X;
  1075. Y += item.Y;
  1076. Z += item.Z;
  1077. })
  1078. len += t[0].length
  1079. }
  1080. })
  1081. X = (X / len).toFixed(2);
  1082. Y = (Y / len).toFixed(2);
  1083. Z = (Z / len).toFixed(2);
  1084. return `${X},${Y},${Z}`
  1085. },
  1086. // 计算面积
  1087. getarea(arr) {
  1088. if (!arr.length) {
  1089. return 0;
  1090. }
  1091. let sum = 0;
  1092. let n = arr.length;
  1093. arr[n] = arr[0];
  1094. for (let i = 1; i <= n; i++) {
  1095. sum += arr[i].X * arr[i - 1].Y - arr[i - 1].X * arr[i].Y;
  1096. }
  1097. return Math.abs(sum / 2)
  1098. },
  1099. // canvas 获取焦点
  1100. focus() {
  1101. document.getElementById(`floorCanvas`).focus()
  1102. },
  1103. // 清除canvas
  1104. clearGraphy() {
  1105. if (this.view) {
  1106. this.view.scene = null;
  1107. return
  1108. }
  1109. this.view = new FloorView('floorCanvas')
  1110. },
  1111. // 工具栏操作
  1112. // 吸附
  1113. changeAbsorb(isAbsorbing) {
  1114. this.scene.isAbsorbing = isAbsorbing;
  1115. },
  1116. // 框选
  1117. groupSelect() {
  1118. this.scene.isRectSelection = 1;
  1119. },
  1120. // 适配底图到窗口
  1121. fit() {
  1122. if (this.scene.sceneMark) {
  1123. this.view.fitItemToView([this.scene.sceneMark])
  1124. return
  1125. }
  1126. this.view.fitSceneToView()
  1127. },
  1128. // 保存为png
  1129. savePng() {
  1130. this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
  1131. },
  1132. // 保存为svg
  1133. saveSvg() {
  1134. this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
  1135. },
  1136. // 保存json
  1137. saveJson() {
  1138. this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
  1139. },
  1140. // 切割划分
  1141. divide() {
  1142. this.scene.isCutting = true;
  1143. },
  1144. // 清除切割划分
  1145. clearDivide() {
  1146. this.scene.clearCut();
  1147. },
  1148. // 撤销
  1149. undo() { },
  1150. // 反撤销
  1151. redo() { },
  1152. // 缩放
  1153. scale(val) {
  1154. if (!this.view) {
  1155. return;
  1156. }
  1157. let scale = this.view.scale;
  1158. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  1159. },
  1160. // 给定多个轮廓线的数据,计算得到面积最大值,并把它放置数组第一项,并将第一项顺时针处理,第一项以后的每一项做逆时针处理
  1161. // list {XYZ}[][]
  1162. makeMaxAreaFirst(list) {
  1163. let arr = [], area = 0;
  1164. for (let i = 0; i < list.length; i++) {
  1165. let temp = this.getarea(list[i])
  1166. if (temp > area) {
  1167. arr.unshift(list[i])
  1168. } else {
  1169. arr.push(list[i])
  1170. }
  1171. }
  1172. arr.map((t, i) => {
  1173. if (!i) {
  1174. if (this.clockDir(t) > 0) {
  1175. return t
  1176. } else {
  1177. return t.reverse()
  1178. }
  1179. } else {
  1180. if (this.clockDir(t) > 0) {
  1181. return t.reverse()
  1182. } else {
  1183. return t
  1184. }
  1185. }
  1186. })
  1187. return arr;
  1188. },
  1189. // 数组为顺时针or逆时针 顺时针非负 逆时针为 负
  1190. clockDir(pointList) {
  1191. if (pointList.length < 3) {
  1192. return 0;
  1193. }
  1194. let index = 0;
  1195. let len = pointList.length;
  1196. for (let i = 1; i < len; i++) {
  1197. if (pointList[i].X > pointList[index].X) {
  1198. index = i;
  1199. }
  1200. }
  1201. let p1 = pointList[index == 0 ? len - 1 : index - 1];
  1202. let p2 = pointList[index];
  1203. let p3 = pointList[(index + 1) % len];
  1204. return (p2.X - p1.X) * (p3.Y - p2.Y) - (p2.Y - p1.Y) * (p3.X - p2.X);
  1205. }
  1206. },
  1207. filters: {
  1208. cutString: function (str, len) {
  1209. //length属性读出来的汉字长度为1
  1210. if (!!str && typeof str == "string" && str.length > len) {
  1211. return str.substring(0, len) + "...";
  1212. } else {
  1213. return str || "--";
  1214. }
  1215. }
  1216. },
  1217. watch: {
  1218. projectId() {
  1219. this.FloorMap = '';
  1220. this.tab = {};
  1221. },
  1222. "view.scale": {
  1223. handler(n) {
  1224. if (this.$refs.canvasFun) {
  1225. let s = n * 10 / this.view.minScale
  1226. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  1227. }
  1228. }
  1229. },
  1230. "scene.isRectSelection": {
  1231. handler(n) {
  1232. if (!n) {
  1233. this.$refs.canvasFun.active = '';
  1234. }
  1235. }
  1236. },
  1237. "scene.isCutting": {
  1238. handler(n) {
  1239. if (!n) {
  1240. this.$refs.canvasFun.active = '';
  1241. this.$refs.canvasFun.isSwitch = false;
  1242. this.scene.isAbsorbing = false;
  1243. }
  1244. }
  1245. },
  1246. }
  1247. }
  1248. </script>
  1249. <style lang="less" scoped>
  1250. #graphy {
  1251. position: relative;
  1252. width: 100%;
  1253. box-sizing: border-box;
  1254. padding: 0 10px 10px;
  1255. height: calc(100% - 56px);
  1256. .canvas-box {
  1257. width: 100%;
  1258. height: 100%;
  1259. }
  1260. .buttons-box {
  1261. position: absolute;
  1262. top: 0;
  1263. left: 0;
  1264. padding: 0 10px;
  1265. width: 100%;
  1266. z-index: 999;
  1267. & > div {
  1268. float: left;
  1269. }
  1270. /deep/ .el-autocomplete {
  1271. display: inline-block;
  1272. width: 320px;
  1273. margin-right: 10px;
  1274. }
  1275. .button-group button,
  1276. .button-group .el-dropdown {
  1277. display: block;
  1278. float: left;
  1279. }
  1280. .my-autocomplete {
  1281. li {
  1282. line-height: normal;
  1283. padding: 7px;
  1284. .name {
  1285. text-overflow: ellipsis;
  1286. overflow: hidden;
  1287. }
  1288. .addr {
  1289. font-size: 12px;
  1290. color: #b4b4b4;
  1291. }
  1292. .highlighted .addr {
  1293. color: #ddd;
  1294. }
  1295. }
  1296. }
  1297. }
  1298. .canvas-actions-box {
  1299. position: absolute;
  1300. bottom: 60px;
  1301. left: 50%;
  1302. transform: translateX(-50%);
  1303. z-index: 99;
  1304. }
  1305. #autoRelate {
  1306. /deep/ .el-slider__marks-text:nth-child(2) {
  1307. width: 25px;
  1308. }
  1309. }
  1310. }
  1311. </style>