graphy.vue 43 KB

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