manageTenantZone.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  1. <template>
  2. <div id="manageTenantZone">
  3. <!-- 数据字典设备类型 -->
  4. <el-row>
  5. <el-button size="small" type="default" icon="el-icon-back" @click="goback"></el-button>
  6. <div style="display:inline-block;margin:10px 0 0 10px;">
  7. <label style="margin-right:10px;">业务空间类型</label>
  8. <el-badge :is-dot="onlyRead&&options.length>1">
  9. <el-select v-model="value" placeholder="请选择" @change="getTnRelatFloor">
  10. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  11. </el-option>
  12. </el-select>
  13. </el-badge>
  14. </div>
  15. </el-row>
  16. <el-row class="main-container">
  17. <el-col :span="3" class="main-left">
  18. <div style="padding:10px;border-bottom:1px solid #e4e4e4;">
  19. <el-input :placeholder="`请输入租户名称`" @keyup.enter.native="getTenant" v-model="keyWord">
  20. <i slot="suffix" class="el-input__icon el-icon-search" @click="getTenant"></i>
  21. </el-input>
  22. </div>
  23. <div style="overflow-y:auto;height: calc(100% - 53px);">
  24. <div v-for="(item,i) in tenantList" :key="item.TenantID" :class="{'tenantItem':true, 'active':item.active}" @click="tenantChange(i)">
  25. {{item.TenantLocalName||item.TenantName}}
  26. </div>
  27. </div>
  28. </el-col>
  29. <el-col :span="21" style="height:100%;">
  30. <div style="height:52px;border-bottom:1px solid #e4e4e4;">
  31. <div v-if="onlyRead===true||onlyRead==='true'">
  32. <div v-for="(bd,i) in allBuilding" :key="bd.BuildID" :class="{'building':true,'active':bd.active}" @click="changeBuildSelect(i)">
  33. {{bd.BuildLocalName||bd.BuildName}}
  34. </div>
  35. </div>
  36. <div v-else style="line-height: 52px;padding:0 10px;">
  37. <label style="margin-right:10px;">所属建筑</label>
  38. <el-select v-model="buildSelect" placeholder="请选择" @change="changeBuildSelect">
  39. <el-option v-for="(item,i) in allBuilding" :key="item.BuildID" :label="item.BuildLocalName || item.BuildName" :value="i">
  40. </el-option>
  41. </el-select>
  42. <div style="float:right;">
  43. <el-button size="small" type="default" @click="editCanvas" v-if="!isEdit">编辑</el-button>
  44. <el-button size="small" type="default" @click="cancel" v-if="isEdit">取消</el-button>
  45. <el-button size="small" type="primary" @click="save" v-if="isEdit">确认</el-button>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="canvas-container" ref="graphy" v-loading="canvasLoading">
  50. <div class="floor-container" v-show="floorList.length">
  51. <div class="before" @click="toBefore">
  52. <div><i class="el-icon-caret-top"></i></div>
  53. </div>
  54. <div class="floor">
  55. <div v-for="(fl,i) in floorList" :key="fl.id" :class="{'active':fl.active,'textParent':true}" @click="floorChange(i)">
  56. <div class="text" :title="fl.FloorLocalID || fl.FloorLocalName">
  57. {{fl.FloorLocalID || fl.FloorLocalName}}
  58. <span v-if="fl.Count">{{fl.Count>9?'9+':fl.Count}}</span>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="after" @click="toNext">
  63. <div><i class="el-icon-caret-bottom"></i></div>
  64. </div>
  65. <div class="border"></div>
  66. </div>
  67. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" v-show="hasMap"></canvas>
  68. <div class="canvas-fun" v-show="hasMap">
  69. <canvasFun @scale="scale" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
  70. @groupSelect="groupSelect" ref="canvasFun">
  71. </canvasFun>
  72. </div>
  73. <div class="center" v-show="!hasMap">
  74. <i class="icon-wushuju iconfont"></i>
  75. 暂无数据
  76. </div>
  77. </div>
  78. </el-col>
  79. </el-row>
  80. </div>
  81. </template>
  82. <script>
  83. import canvasFun from "@/components/business_space/newGraphy/canvasFun";
  84. import { mapGetters } from "vuex";
  85. import { SColor, SPoint } from "@saga-web/draw/lib";
  86. import { DivideFloorScene, SpaceItem, ZoneItem, FloorView, Opt } from "@saga-web/cad-engine/lib";
  87. import { colorArr } from "@/utils/spaceColor"
  88. import { buildingQuery, queryTnRelateFloor, queryRentTableData, tnRelateZone, zoneQueryOutline } from '@/api/scan/request'
  89. export default {
  90. data() {
  91. return {
  92. options: [{ value: 'GeneralZone', label: '默认分区' }, { value: 'TenantZone', label: '租户分区' }],
  93. value: 'TenantZone',
  94. tenantList: [],
  95. floorList: [],
  96. canvasWidth: 800,
  97. canvasHeight: 800,
  98. onlyRead: false,
  99. allBuilding: [],
  100. buildSelect: 0,
  101. activeFloor: 0,
  102. activeTentanIndex: 0,
  103. canvasLoading: false,
  104. isEdit: false,
  105. view: '',
  106. scene: '',
  107. config: {
  108. isEdit: false,
  109. groupSelect: true
  110. },
  111. hasMap: true,
  112. keyWord: '', // 查询租户名称
  113. Cascade: {
  114. GeneralZone: 'zoneGeneraltList',
  115. TenantZone: 'zoneTenantList'
  116. }
  117. }
  118. },
  119. components: {
  120. canvasFun
  121. },
  122. computed: {
  123. ...mapGetters("layout", ["projectId","projects"]),
  124. projectName() {
  125. let projectObj = this.projects.find(item => {
  126. return item.id == this.projectId
  127. })
  128. return projectObj?projectObj.name?projectObj.name:projectObj.id:this.projectId
  129. },
  130. buildFloorName() {
  131. let buildObj = this.allBuilding[this.buildSelect],
  132. floorObj = this.floorList[this.activeFloor];
  133. console.log(buildObj,floorObj)
  134. return `${buildObj.BuildLocalName?buildObj.BuildLocalName:
  135. buildObj.BuildName?buildObj.BuildName:""}-${floorObj.FloorLocalID?
  136. floorObj.FloorLocalID:floorObj.FloorLocalName?floorObj.FloorLocalName:FloorName}`
  137. },
  138. },
  139. created() {
  140. this.onlyRead = this.$route.query.onlyRead;
  141. this.init();
  142. Opt.sceneMarkColor = new SColor('#ffffff');
  143. },
  144. mounted() {
  145. this.canvasWidth = this.$refs.graphy.offsetWidth;
  146. this.canvasHeight = this.$refs.graphy.offsetHeight;
  147. },
  148. methods: {
  149. init() {
  150. this.getTenant();
  151. },
  152. // 返回
  153. goback() {
  154. this.$router.push({ name: 'rentlist', query: { onlyRead: this.onlyRead } })
  155. },
  156. // 适配底图到窗口
  157. fit() {
  158. if (this.scene.sceneMark) {
  159. this.view.fitItemToView([this.scene.sceneMark])
  160. return
  161. }
  162. this.view.fitSceneToView()
  163. },
  164. // 缩放
  165. scale(val) {
  166. if (!this.view) {
  167. return;
  168. }
  169. let scale = this.view.scale;
  170. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  171. },
  172. // 保存为png
  173. savePng() {
  174. this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
  175. },
  176. // 保存为svg
  177. saveSvg() {
  178. this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
  179. },
  180. // 保存json
  181. saveJson() {
  182. this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
  183. },
  184. // 框选
  185. groupSelect() {
  186. this.scene.isRectSelection = 2;
  187. },
  188. // 上一个
  189. toBefore() {
  190. if (this.activeFloor > 0) {
  191. let index = this.activeFloor - 1;
  192. this.floorChange(index)
  193. }
  194. },
  195. // 下一个
  196. toNext() {
  197. if (this.activeFloor < this.floorList.length - 1) {
  198. let index = this.activeFloor + 1;
  199. this.floorChange(index)
  200. }
  201. },
  202. // 建筑修改
  203. changeBuildSelect(val) {
  204. this.allBuilding.map(t => {
  205. t.active = false;
  206. })
  207. this.allBuilding[val].active = true;
  208. if (this.allBuilding[val].Floor && this.allBuilding[val].Floor.length) {
  209. this.floorList = this.allBuilding[val].Floor
  210. this.floorChange(0);
  211. } else {
  212. this.floorList = []
  213. }
  214. },
  215. // 租户修改
  216. tenantChange(index) {
  217. this.tenantList.map(t => {
  218. t.active = false;
  219. })
  220. this.curTenantId = this.tenantList[index].TenantID;
  221. this.tenantList[index].active = true;
  222. this.activeTentanIndex = index;
  223. this.tenantChangeInflu(index);
  224. },
  225. // 租户更改引起的修改
  226. tenantChangeInflu(i) {
  227. if (this.onlyRead === true || this.onlyRead === 'true') { // 只读模式-对空间类型处理
  228. let g = this.tenantList[i].ZoneGeneraltList;
  229. let t = this.tenantList[i].ZoneTenantList;
  230. let gFlag = g && g.length;
  231. let tFlag = t && t.length;
  232. if (gFlag) {
  233. if (tFlag) {
  234. this.options = [{ value: 'GeneralZone', label: '默认分区' }, { value: 'TenantZone', label: '租户分区' }]
  235. this.value = 'TenantZone';
  236. } else {
  237. this.options = [{ value: 'GeneralZone', label: '默认分区' }];
  238. this.value = 'GeneralZone';
  239. }
  240. } else {
  241. if (tFlag) {
  242. this.options = [{ value: 'TenantZone', label: '租户分区' }];
  243. this.value = 'TenantZone';
  244. } else {
  245. this.options = [];
  246. this.value = '';
  247. }
  248. }
  249. }
  250. this.getTnRelatFloor();
  251. },
  252. // 楼层修改
  253. floorChange(index) {
  254. this.floorList.map(t => {
  255. t.active = false;
  256. })
  257. this.activeFloor = index;
  258. this.floorList[index].active = true;
  259. this.getGraphy(index)
  260. },
  261. // canvas点击事件
  262. canvasClick(item, event) {
  263. if (!this.isEdit) {
  264. item.selected = false;
  265. }
  266. },
  267. // 编辑
  268. editCanvas() {
  269. this.isEdit = true;
  270. this.config.isEdit = true;
  271. this.scene.zoneList.map(t => {
  272. t.selected = t.highLightFlag;
  273. t.transparency = 20;
  274. t.highLightFlag = false;
  275. })
  276. },
  277. // 取消
  278. cancel() {
  279. this.isEdit = false;
  280. this.config.isEdit = false;
  281. this.scene.clearZoneSelection();
  282. this.getBusinessSpace();
  283. },
  284. // 清除canvas
  285. clearGraphy() {
  286. if (this.view) {
  287. this.view.scene = null;
  288. return
  289. }
  290. this.view = new FloorView('floorCanvas')
  291. },
  292. // 获取列表
  293. getTenant() {
  294. let pa = {
  295. Cascade: [
  296. { Name: 'zoneTenantList' },
  297. // , Cascade: [{ Name: 'building' }, { Name: 'floor' }]
  298. { Name: 'zoneGeneraltList' }
  299. ],
  300. Orders: "TenantID asc",
  301. PageSize: 1000
  302. }
  303. if (this.keyWord) {
  304. pa.Filters = `TenantLocalName contain '${this.keyWord}'`
  305. }
  306. queryRentTableData(pa, res => {
  307. this.tenantList = res.Content.map(t => {
  308. t.active = false;
  309. return t;
  310. })
  311. if (this.tenantList.length) {
  312. this.tenantChange(0)
  313. }
  314. })
  315. },
  316. // 获取业务空间
  317. getBusinessSpace() {
  318. let buildid = this.floorList[this.activeFloor].BuildID;
  319. let floorid = this.floorList[this.activeFloor].FloorID;
  320. let TenantID = this.tenantList[this.activeTentanIndex].TenantID
  321. if (buildid && floorid && this.value) {
  322. this.canvasLoading = true
  323. let pa = {
  324. Filters: `not RoomID isNull`,
  325. Orders: "createTime desc, RoomID asc",
  326. PageSize: 1000,
  327. ZoneType: this.value,
  328. BuildingId: buildid,
  329. FloorId: floorid
  330. }
  331. this.canvasLoading = false;
  332. let promise1 = new Promise((resolve) => {
  333. zoneQueryOutline(pa, res => {
  334. resolve(res);
  335. })
  336. })
  337. let pa2 = {
  338. Cascade: [
  339. { Name: this.Cascade[this.value], Filters: `FloorId='${floorid}'` }
  340. ],
  341. Filters: `TenantID='${TenantID}'`
  342. }
  343. let promise2 = new Promise((resolve) => {
  344. queryRentTableData(pa2, res => {
  345. resolve(res);
  346. })
  347. })
  348. Promise.all([promise1, promise2]).then(response => {
  349. let res1 = response[0];
  350. let res2 = response[1];
  351. let key = 'Z' + this.Cascade[this.value].substring(1);
  352. let relationList = res2.Content[0][key] || [];
  353. this.businessSpaceList = res1.Content;
  354. // 已关联元空间的业务空间
  355. this.BSPRelaISPList = [];
  356. res1.Content.map(t => {
  357. if (t.Outline && t.Outline.length) {
  358. this.BSPRelaISPList.push(t)
  359. }
  360. })
  361. // 绘制业务空间
  362. let tempArr = this.BSPRelaISPList.map((t, i) => {
  363. if (t.FloorId == this.floorList[this.activeFloor].FloorID && t.ObjectType == this.value) {
  364. return {
  365. RoomLocalName: t.RoomLocalName,
  366. OutLine: t.Outline,
  367. RoomID: t.RoomID,
  368. Color: colorArr[i % colorArr.length],
  369. HighLightFlag: relationList.findIndex((item) => (item.RoomID == t.RoomID)) > -1,
  370. Transparency: relationList.findIndex((item) => (item.RoomID == t.RoomID)) > -1 ? 20 : 1
  371. }
  372. } else {
  373. return undefined;
  374. }
  375. }).filter(item => item)
  376. this.scene.removeAllZone();
  377. this.scene.addZoneList(tempArr);
  378. this.scene.click(this, this.canvasClick);
  379. })
  380. }
  381. },
  382. // 初始化底图
  383. getGraphy(index) {
  384. if (this.floorList[index].StructureInfo && this.floorList[index].StructureInfo.FloorMap) {
  385. let floorMap = this.floorList[index].StructureInfo.FloorMap;
  386. this.clearGraphy();
  387. this.scene = new DivideFloorScene();
  388. this.hasMap = true;
  389. this.canvasLoading = true;
  390. this.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMap}`).then(res => {
  391. if (res == 'error') {
  392. console.log('数据解析异常');
  393. this.hasMap = false;
  394. this.canvasLoading = false;
  395. return;
  396. }
  397. this.view.scene = this.scene;
  398. if (this.floorList[index].Outline) {
  399. let newArr = this.floorList[index].Outline.map(t => {
  400. return new SPoint(t.X, t.Y);
  401. })
  402. this.scene.addSceneMark(newArr)
  403. }
  404. this.scene.isSpaceSelectable = false;
  405. // 绘制业务空间
  406. this.getBusinessSpace();
  407. this.fit();
  408. this.view.minScale = this.view.scale;
  409. if (this.$refs.canvasFun) {
  410. this.$refs.canvasFun.everyScale = this.view.scale;
  411. }
  412. })
  413. } else {
  414. this.hasMap = false;
  415. }
  416. },
  417. // 查询租户关联的业务空间所在建筑楼层,分区修改也会触发
  418. getTnRelatFloor() {
  419. if (this.value) {
  420. let pa = {
  421. objectType: this.value,
  422. tenantId: this.curTenantId
  423. }
  424. queryTnRelateFloor(pa, res => {
  425. this.allBuilding = res.Content.map(t => {
  426. t.active = false;
  427. if (t.Floor) {
  428. t.Floor.map(item => {
  429. item.active = false;
  430. })
  431. }
  432. return t;
  433. });
  434. if (this.onlyRead === true || this.onlyRead === 'true') {
  435. this.allBuilding = this.allBuilding.filter(item => item.Count > 0)
  436. this.allBuilding.map(t => {
  437. if (t.Floor) {
  438. t.Floor = t.Floor.filter(item => item.Count > 0)
  439. }
  440. })
  441. }
  442. if (this.allBuilding.length) {
  443. this.changeBuildSelect(this.buildSelect);
  444. }
  445. })
  446. } else {
  447. this.hasMap = false;
  448. this.canvasLoading = false;
  449. this.allBuilding = [];
  450. this.floorList = [];
  451. }
  452. },
  453. // 保存关系
  454. save() {
  455. let arr = this.scene.getSelectedZone();
  456. let pa = {
  457. data: {
  458. SpaceIdList: [],
  459. FloorId: this.floorList[this.activeFloor].FloorID,
  460. TenantId: this.curTenantId
  461. },
  462. type: this.value
  463. }
  464. pa.data.SpaceIdList = arr.map(t => {
  465. return t.data.RoomID;
  466. })
  467. tnRelateZone(pa, res => {
  468. this.isEdit = false;
  469. this.config.isEdit = false;
  470. this.$message.success('关联成功');
  471. this.getTnRelatFloor();
  472. })
  473. },
  474. },
  475. watch: {
  476. projectId() {
  477. this.init()
  478. },
  479. "view.scale": {
  480. handler(n) {
  481. if (this.$refs.canvasFun) {
  482. let s = n * 10 / this.view.minScale
  483. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  484. }
  485. }
  486. },
  487. "scene.isRectSelection": {
  488. handler(n) {
  489. if (!n) {
  490. this.$refs.canvasFun.active = '';
  491. }
  492. }
  493. },
  494. }
  495. }
  496. </script>
  497. <style lang="less" scoped>
  498. @normal-border-color: #e4e4e4;
  499. @normal-border-active-color: #e8e8e8;
  500. #manageTenantZone {
  501. height: 100%;
  502. .main-container {
  503. margin-top: 10px;
  504. background: #fff;
  505. border: 1px solid @normal-border-color;
  506. height: calc(100% - 53px);
  507. overflow: hidden;
  508. .main-left {
  509. height: 100%;
  510. border-right: 1px solid @normal-border-color;
  511. .tenantItem {
  512. border-bottom: 1px solid @normal-border-color;
  513. text-align: center;
  514. line-height: 40px;
  515. color: #2b2b2b;
  516. cursor: pointer;
  517. &.active {
  518. background-color: @normal-border-active-color;
  519. }
  520. }
  521. }
  522. }
  523. .building {
  524. display: inline-block;
  525. margin: 7px 10px;
  526. border: 1px solid @normal-border-color;
  527. color: #2b2b2b;
  528. border-radius: 28px;
  529. padding: 4px 16px;
  530. cursor: pointer;
  531. &.active {
  532. border: 1px solid #409eff;
  533. color: #409eff;
  534. }
  535. }
  536. .canvas-container {
  537. position: relative;
  538. width: 100%;
  539. height: calc(100% - 53px);
  540. display: flex;
  541. align-items: center;
  542. justify-content: center;
  543. .floor-container {
  544. position: absolute;
  545. width: 60px;
  546. height: 260px;
  547. top: 20px;
  548. left: 20px;
  549. z-index: 2;
  550. background-color: #fff;
  551. .before,
  552. .after {
  553. div {
  554. width: 52px;
  555. height: 23px;
  556. margin: 0 auto;
  557. text-align: center;
  558. font-size: 24px;
  559. line-height: 1;
  560. color: #2b2b2b;
  561. border: 1px solid @normal-border-color;
  562. cursor: pointer;
  563. }
  564. }
  565. .floor {
  566. position: relative;
  567. height: 210px;
  568. overflow-y: auto;
  569. &::-webkit-scrollbar {
  570. display: none;
  571. }
  572. .textParent {
  573. cursor: pointer;
  574. &.active {
  575. background-image: url(~@/assets/image/floorBG.png);
  576. div.text {
  577. border: none;
  578. }
  579. }
  580. div.text {
  581. position: relative;
  582. width: 54px;
  583. height: 30px;
  584. line-height: 30px;
  585. white-space: nowrap;
  586. overflow: hidden;
  587. text-overflow: ellipsis;
  588. text-align: center;
  589. color: #2b2b2b;
  590. margin: 0 auto;
  591. padding: 0 10px;
  592. box-sizing: border-box;
  593. &:hover {
  594. background-color: #409eff1a;
  595. }
  596. b {
  597. font-weight: normal;
  598. }
  599. span {
  600. position: absolute;
  601. display: block;
  602. height: 10px;
  603. border-radius: 14px;
  604. line-height: 10px;
  605. text-align: center;
  606. top: 0;
  607. right: -2px;
  608. color: #fff;
  609. background-color: #f56c6c;
  610. padding: 5px;
  611. font-size: 12px;
  612. transform: scale(0.7, 0.7);
  613. }
  614. }
  615. }
  616. }
  617. div.border {
  618. position: absolute;
  619. width: 52px;
  620. height: 100%;
  621. left: 50%;
  622. top: 0;
  623. z-index: -1;
  624. transform: translateX(-50%);
  625. border-left: 1px solid @normal-border-color;
  626. border-right: 1px solid @normal-border-color;
  627. }
  628. }
  629. .canvas-fun {
  630. position: absolute;
  631. bottom: 20px;
  632. left: 50%;
  633. z-index: 3;
  634. transform: translateX(-50%;);
  635. }
  636. }
  637. }
  638. </style>