manageTenantZone.vue 15 KB

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