manageTenantZone.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  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-left:10px;">
  7. <label style="margin-right:10px;">业务空间类型</label>
  8. <el-select v-model="value" placeholder="请选择" @change="getBusinessSpace">
  9. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  10. </el-option>
  11. </el-select>
  12. </div>
  13. </el-row>
  14. <el-row class="main-container">
  15. <el-col :span="3" class="main-left">
  16. <div style="padding:10px;border-bottom:1px solid #e4e4e4;">
  17. <el-input :placeholder="`请输入租户名称`" @keyup.enter.native="getTenant">
  18. <i slot="suffix" class="el-input__icon el-icon-search" @click="getTenant"></i>
  19. </el-input>
  20. </div>
  21. <div style="overflow-y:auto;height: calc(100% - 53px);">
  22. <div v-for="(item,i) in tenantList" :key="item.id" :class="{'tenantItem':true, 'active':item.active}" @click="tenantChange(i)">{{item.Name}}
  23. </div>
  24. </div>
  25. </el-col>
  26. <el-col :span="21" style="height:100%;">
  27. <div style="height:52px;border-bottom:1px solid #e4e4e4;">
  28. <div v-if="onlyRead===true||onlyRead==='true'">
  29. <div v-for="(bd,i) in buildList" :key="bd.id" :class="{'building':true,'active':bd.active}" @click="buildChange(i)">{{bd.Name}}</div>
  30. </div>
  31. <div v-else style="line-height: 52px;padding:0 10px;">
  32. <label style="margin-right:10px;">所属建筑</label>
  33. <el-select v-model="buildSelect" placeholder="请选择" @change="changeBuildSelect">
  34. <el-option v-for="(item,i) in allBuilding" :key="item.BuildID" :label="item.BuildLocalName || item.BuildName" :value="i">
  35. </el-option>
  36. </el-select>
  37. <div style="float:right;">
  38. <el-button size="small" type="default" @click="editCanvas" v-if="!isEdit">编辑</el-button>
  39. <el-button size="small" type="default" @click="cancel" v-if="isEdit">取消</el-button>
  40. <el-button size="small" type="primary" @click="save" v-if="isEdit">确认</el-button>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="canvas-container" ref="graphy" v-loading="canvasLoading">
  45. <div class="floor-container">
  46. <div class="before" @click="toBefore">
  47. <div><i class="el-icon-caret-top"></i></div>
  48. </div>
  49. <div class="floor">
  50. <div v-for="(fl,i) in floorList" :key="fl.id" :class="{'active':fl.active,'textParent':true}" @click="floorChange(i)">
  51. <div class="text">
  52. {{fl.FloorLocalID || fl.FloorLocalName}}
  53. <span>9+</span>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="after" @click="toNext">
  58. <div><i class="el-icon-caret-bottom"></i></div>
  59. </div>
  60. <div class="border"></div>
  61. </div>
  62. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" v-show="hasMap"></canvas>
  63. <div class="canvas-fun" v-show="hasMap">
  64. <canvasFun @scale="scale" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
  65. @groupSelect="groupSelect" ref="canvasFun">
  66. </canvasFun>
  67. </div>
  68. <div class="center" v-show="!hasMap">
  69. <i class="icon-wushuju iconfont"></i>
  70. 暂无数据
  71. </div>
  72. </div>
  73. </el-col>
  74. </el-row>
  75. </div>
  76. </template>
  77. <script>
  78. import canvasFun from "@/components/business_space/newGraphy/canvasFun";
  79. import { mapGetters, mapActions } from "vuex";
  80. import { SColor, SPoint } from "@saga-web/draw/lib";
  81. import { DivideFloorScene, SpaceItem, ZoneItem, FloorView } from "@saga-web/cad-engine/lib";
  82. import { colorArr } from "@/utils/spaceColor"
  83. import { buildingQuery, queryZone, tnRelateZone } from '@/api/scan/request'
  84. export default {
  85. data() {
  86. return {
  87. options: [{ value: 'GeneralZone', label: '默认分区' }, { value: 'TenantZone', label: '租户分区' }],
  88. value: 'GeneralZone',
  89. tenantList: [{ id: 1, Name: '发发发', active: false }, { id: 2, Name: '发发发', active: false }, { id: 3, Name: '发发发', active: true }],
  90. buildList: [{ id: 1, Name: "建筑1", active: false }, { id: 2, Name: "建筑2", active: true }],
  91. floorList: [{ id: 23, Name: 'F2', active: false }, { id: 11, Name: 'F2', active: false }, { id: 21, Name: 'F2', active: false }, { id: 13, Name: 'F2', active: false }, { id: 14, Name: 'F2', active: false }, { id: 15, Name: 'F2', active: false }, { id: 2, Name: 'F2', active: true }],
  92. canvasWidth: 800,
  93. canvasHeight: 800,
  94. onlyRead: false,
  95. allBuilding: [],
  96. buildSelect: 0,
  97. activeFloor: 0,
  98. canvasLoading: true,
  99. isEdit: false,
  100. view: '',
  101. scene: '',
  102. config: {
  103. isEdit: false,
  104. groupSelect: true
  105. },
  106. hasMap: true
  107. }
  108. },
  109. components: {
  110. canvasFun
  111. },
  112. computed: {
  113. ...mapGetters("layout", ["projectId"])
  114. },
  115. created() {
  116. this.onlyRead = this.$route.query.onlyRead;
  117. // if (this.onlyRead) {
  118. // this.getTenant();
  119. // } else {
  120. this.getAllBuilding();
  121. // }
  122. },
  123. mounted() {
  124. this.canvasWidth = this.$refs.graphy.offsetWidth;
  125. this.canvasHeight = this.$refs.graphy.offsetHeight;
  126. },
  127. methods: {
  128. init() { },
  129. // 返回
  130. goback() {
  131. this.$router.push({ name: 'rentlist' })
  132. },
  133. // 适配底图到窗口
  134. fit() {
  135. this.view.fitSceneToView()
  136. },
  137. // 缩放
  138. scale(val) {
  139. if (!this.view) {
  140. return;
  141. }
  142. let scale = this.view.scale;
  143. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  144. },
  145. // 保存为png
  146. savePng() {
  147. this.view.saveImage(`${this.floorList[this.activeFloor].FloorID}.png`, 'png');
  148. },
  149. // 保存为svg
  150. saveSvg() {
  151. this.view.saveSceneSvg(`${this.floorList[this.activeFloor].FloorID}.svg`, 6400, 4800);
  152. },
  153. // 保存json
  154. saveJson() {
  155. this.view.saveFloorJson(`${this.floorList[this.activeFloor].FloorID}.json`)
  156. },
  157. // 框选
  158. groupSelect() {
  159. this.scene.isRectSelection = 2;
  160. },
  161. // 上一个
  162. toBefore() {
  163. if (this.activeFloor > 0) {
  164. let index = this.activeFloor - 1;
  165. this.floorChange(index)
  166. }
  167. },
  168. // 下一个
  169. toNext() {
  170. if (this.activeFloor < this.floorList.length - 1) {
  171. let index = this.activeFloor + 1;
  172. this.floorChange(index)
  173. }
  174. },
  175. // 获取列表
  176. getTenant() { },
  177. // 建筑修改
  178. buildChange(index) {
  179. this.buildList.map(t => {
  180. t.active = false;
  181. })
  182. this.buildList[index].active = true;
  183. },
  184. // 租户修改
  185. tenantChange(index) {
  186. this.tenantList.map(t => {
  187. t.active = false;
  188. })
  189. this.curTenantId = this.tenantList[index].TenantID;
  190. this.tenantList[index].active = true;
  191. },
  192. // 楼层修改
  193. floorChange(index) {
  194. this.floorList.map(t => {
  195. t.active = false;
  196. })
  197. this.activeFloor = index;
  198. this.floorList[index].active = true;
  199. this.getGraphy(index)
  200. },
  201. // 修改下拉选中的建筑
  202. changeBuildSelect(val) {
  203. if (this.allBuilding[val].Floor && this.floorList.length) {
  204. this.floorList = this.allBuilding[val].Floor
  205. this.floorChange(0);
  206. } else {
  207. this.floorList = []
  208. }
  209. },
  210. // canvas点击事件
  211. canvasClick(item, event) {
  212. if (!this.isEdit) {
  213. item.selected = false;
  214. }
  215. },
  216. // 编辑
  217. editCanvas() {
  218. this.isEdit = true;
  219. this.config.isEdit = true;
  220. // 将已关联选中
  221. },
  222. // 取消
  223. cancel() {
  224. this.isEdit = false;
  225. this.config.isEdit = false;
  226. this.scene.clearZoneSelection();
  227. },
  228. // 清除canvas
  229. clearGraphy() {
  230. if (this.view) {
  231. this.view.scene = null;
  232. return
  233. }
  234. this.view = new FloorView('floorCanvas')
  235. },
  236. // 编辑态获取所有建筑
  237. getAllBuilding() {
  238. let pa = {
  239. Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
  240. Orders: "BuildLocalName asc",
  241. }
  242. buildingQuery(pa, res => {
  243. this.allBuilding = res.Content.map(t => {
  244. if (t.Floor) {
  245. t.Floor.map(item => {
  246. item.active = false;
  247. })
  248. }
  249. return t;
  250. });
  251. if (this.allBuilding.length) {
  252. this.changeBuildSelect(0);
  253. }
  254. })
  255. },
  256. // 获取业务空间
  257. getBusinessSpace() {
  258. let buildid = this.floorList[this.activeFloor].BuildID;
  259. let floorid = this.floorList[this.activeFloor].FloorID;
  260. if (buildid && floorid) {
  261. this.canvasLoading = true
  262. let pa = {
  263. zone: this.value,
  264. data: {
  265. Filters: `BuildingId='${buildid}';FloorId='${floorid}'`,
  266. Orders: "createTime desc, RoomID asc",
  267. PageSize: 1000
  268. }
  269. }
  270. queryZone(pa, res => {
  271. // 所有业务空间
  272. this.businessSpaceList = res.Content;
  273. // 已关联元空间的业务空间
  274. this.BSPRelaISPList = [];
  275. res.Content.map(t => {
  276. if (t.Outline && t.Outline.length) {
  277. this.BSPRelaISPList.push(t)
  278. }
  279. })
  280. // 绘制业务空间
  281. let tempArr = this.BSPRelaISPList.map((t, i) => {
  282. if (t.FloorId == this.floorList[this.activeFloor].FloorID && t.ObjectType == this.value) {
  283. return {
  284. RoomLocalName: t.RoomLocalName,
  285. OutLine: t.Outline,
  286. RoomID: t.RoomID,
  287. Color: colorArr[i % colorArr.length],
  288. }
  289. } else {
  290. console.log('internet slow')
  291. return undefined;
  292. }
  293. }).filter(item => item)
  294. this.scene.removeAllZone();
  295. this.scene.addZoneList(tempArr);
  296. this.scene.click(this, this.canvasClick);
  297. // 将已关联的高亮
  298. this.canvasLoading = false;
  299. })
  300. }
  301. },
  302. // 初始化底图
  303. getGraphy(index) {
  304. if (this.floorList[index].StructureInfo && this.floorList[index].StructureInfo.FloorMap) {
  305. let floorMap = this.floorList[index].StructureInfo.FloorMap;
  306. this.clearGraphy();
  307. this.scene = new DivideFloorScene();
  308. this.hasMap = true;
  309. this.canvasLoading = true;
  310. this.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMap}`).then(res => {
  311. if (res == 'error') {
  312. this.$message.warning('数据解析异常');
  313. this.hasMap = false;
  314. this.canvasLoading = false;
  315. return;
  316. }
  317. this.view.scene = this.scene;
  318. this.scene.isSpaceSelectable = false;
  319. // 绘制业务空间
  320. this.getBusinessSpace();
  321. this.view.fitSceneToView();
  322. this.view.minScale = this.view.scale;
  323. if (this.$refs.canvasFun) {
  324. this.$refs.canvasFun.everyScale = this.view.scale;
  325. }
  326. })
  327. } else {
  328. this.hasMap = false;
  329. }
  330. },
  331. // 保存关系
  332. save() {
  333. let arr = this.scene.getSelectedZone();
  334. let pa = {
  335. SpaceIdList: [],
  336. TenantId: this.curTenantId
  337. }
  338. pa.SpaceIdList = arr.map(t => {
  339. return t.data.RoomID;
  340. })
  341. console.log(pa)
  342. return
  343. tnRelateZone(pa, res => {
  344. this.$message.success('关联成功');
  345. })
  346. },
  347. },
  348. watch: {
  349. projectId() {
  350. this.init()
  351. },
  352. "view.scale": {
  353. handler(n) {
  354. if (this.$refs.canvasFun) {
  355. let s = n * 10 / this.view.minScale
  356. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  357. }
  358. }
  359. },
  360. "scene.isRectSelection": {
  361. handler(n) {
  362. if (!n) {
  363. this.$refs.canvasFun.active = '';
  364. }
  365. }
  366. },
  367. }
  368. }
  369. </script>
  370. <style lang="less" scoped>
  371. @normal-border-color : #e4e4e4;
  372. @normal-border-active-color : #e8e8e8;
  373. #manageTenantZone {
  374. height: 100%;
  375. .main-container {
  376. margin-top: 10px;
  377. background: #fff;
  378. border: 1px solid @normal-border-color;
  379. height: calc(100% - 43px);
  380. overflow: hidden;
  381. .main-left {
  382. height: 100%;
  383. border-right: 1px solid @normal-border-color;
  384. .tenantItem {
  385. border-bottom: 1px solid @normal-border-color;
  386. text-align: center;
  387. line-height: 40px;
  388. color: #2b2b2b;
  389. cursor: pointer;
  390. &.active {
  391. background-color: @normal-border-active-color;
  392. }
  393. }
  394. }
  395. }
  396. .building {
  397. display: inline-block;
  398. margin: 7px 10px;
  399. border: 1px solid @normal-border-color;
  400. color: #2b2b2b;
  401. border-radius: 28px;
  402. padding: 4px 16px;
  403. &.active {
  404. border: 1px solid #409eff;
  405. color: #409eff;
  406. }
  407. }
  408. .canvas-container {
  409. position: relative;
  410. width: 100%;
  411. height: calc(100% - 53px);
  412. display: flex;
  413. align-items: center;
  414. justify-content: center;
  415. .floor-container {
  416. position: absolute;
  417. width: 60px;
  418. height: 260px;
  419. top: 20px;
  420. left: 20px;
  421. z-index: 2;
  422. background-color: #fff;
  423. .before,
  424. .after {
  425. div {
  426. width: 52px;
  427. height: 23px;
  428. margin: 0 auto;
  429. text-align: center;
  430. font-size: 24px;
  431. line-height: 1;
  432. color: #2b2b2b;
  433. border: 1px solid @normal-border-color;
  434. cursor: pointer;
  435. }
  436. }
  437. .floor {
  438. position: relative;
  439. height: 210px;
  440. overflow-y: auto;
  441. &::-webkit-scrollbar {
  442. display: none;
  443. }
  444. .textParent {
  445. cursor: pointer;
  446. &.active {
  447. background-image: url(~@/assets/image/floorBG.png);
  448. div.text {
  449. border: none;
  450. }
  451. }
  452. div.text {
  453. position: relative;
  454. width: 54px;
  455. height: 30px;
  456. line-height: 30px;
  457. white-space: nowrap;
  458. overflow: hidden;
  459. text-overflow: ellipsis;
  460. text-align: center;
  461. color: #2b2b2b;
  462. margin: 0 auto;
  463. padding: 0 10px;
  464. box-sizing: border-box;
  465. &:hover {
  466. background-color: #409eff1a;
  467. }
  468. span {
  469. position: absolute;
  470. display: block;
  471. height: 10px;
  472. border-radius: 50%;
  473. line-height: 10px;
  474. text-align: center;
  475. top: 0;
  476. right: -2px;
  477. color: #fff;
  478. background-color: #f56c6c;
  479. padding: 5px;
  480. font-size: 12px;
  481. transform: scale(0.7, 0.7);
  482. }
  483. }
  484. }
  485. }
  486. div.border {
  487. position: absolute;
  488. width: 52px;
  489. height: 100%;
  490. left: 50%;
  491. top: 0;
  492. z-index: -1;
  493. transform: translateX(-50%);
  494. border-left: 1px solid @normal-border-color;
  495. border-right: 1px solid @normal-border-color;
  496. }
  497. }
  498. .canvas-fun {
  499. position: absolute;
  500. bottom: 20px;
  501. left: 50%;
  502. z-index: 3;
  503. transform: translateX(-50%;);
  504. }
  505. }
  506. }
  507. </style>