index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <!--
  2. revit业务空间
  3. -->
  4. <template>
  5. <div id="businessSpace">
  6. <!-- 空间属于多个建筑楼层 -->
  7. <roomInFloorDialog ref="roomInFloorDialog" @relaSuc="relaSuc"></roomInFloorDialog>
  8. <!--------- 页面头部 -------------->
  9. <div class="saga-title" v-show="!needCalculate">
  10. <div class="saga-build-mess">
  11. <floorCascader @change="changeCascader" ref="floorCascader"></floorCascader>
  12. </div>
  13. <div class="saga-build-tab">
  14. <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
  15. <el-radio-button label="1">平面图</el-radio-button>
  16. <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
  17. </el-radio-group>
  18. </div>
  19. <div class="saga-build-tips" v-if="mutiCount>0" @click="getTips">有{{mutiCount}}个空间同时属于多个建筑楼层,点击处理</div>
  20. </div>
  21. <div class="saga-business-sapce-main" v-show="!needCalculate">
  22. <el-row class="spaceTypes">
  23. <div class="types">
  24. <el-tabs v-model="activeName" type='card' @tab-click="tabClick">
  25. <template v-for="(item,index) in tabsList">
  26. <el-tab-pane :name="item.Code" :key="index" :label="item.Name"></el-tab-pane>
  27. </template>
  28. </el-tabs>
  29. </div>
  30. </el-row>
  31. <div v-show="isMyTab == 1" style="width:100%;height:100%">
  32. <graphy @getSp="checkSpace" @dimension="checkSpace" @businessDetails="getBuinessDetails" ref="graphy"></graphy>
  33. </div>
  34. <div v-show="isMyTab == 2">
  35. <handsontable-main @lookEqu="lookEqu" ref="handsontable" :zoneCode="activeName" :id="`handsontable${activeName}`"></handsontable-main>
  36. </div>
  37. </div>
  38. <div v-show="needCalculate" style="display:flex;align-items:center;justify-content:center;height:100%;background-color:#fff;">
  39. <div class="center" style="flex:1">
  40. <i class="iconfont icon-jianzhu" style="font-size:50px;"></i>
  41. <p style="margin:10px 0;">设备空间关系已产生变化,请请前往关系总览重新计算</p>
  42. <el-button @click="jumpToAllRelation">立即跳转</el-button>
  43. </div>
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. // import noModelDialog from "@/components/business_space/dialogs/noModelDialog";
  49. // import influenceDialog from "@/components/business_space/dialogs/influenceDialog";
  50. // import detailsDialog from "@/components/business_space/dialogs/detailsDialog";
  51. // import notRelated from "@/components/business_space/dialogs/notRelated";
  52. // import facilityDialog from "@/components/business_space/dialogs/facilityDialog";
  53. // import graphy from "@/components/business_space/graphy/business";
  54. import graphy from "@/components/business_space/newGraphy/graphy";
  55. import roomInFloorDialog from "@/components/business_space/newAddDialogs/roomInFloorDialog";
  56. import handsontableMain from "@/components/business_space/business/handsontable";
  57. import {
  58. getDataDictionary,
  59. getAllbusiness,
  60. getSpaceFloor,
  61. buildingQuery, //数据中心-建筑查询
  62. queryDictionaryHead, //数据中心-字典头部信息查询接口
  63. getrelationTypeProject, //数据中心-当该项目中的"建筑体下的业务空间"“楼层下的业务空间”关系的状态为需更新时,业务空间台账功能不可用
  64. getSpaceBdFlCount, // 属于多建筑楼层的空间数据统计
  65. } from "@/api/scan/request";
  66. import tools from '@/utils/scan/tools'
  67. import floorCascader from "@/components/ledger/lib/floorCascader";
  68. import { mapGetters, mapActions } from "vuex";
  69. export default {
  70. components: {
  71. graphy,
  72. handsontableMain,
  73. roomInFloorDialog,
  74. floorCascader,
  75. },
  76. computed: {
  77. ...mapGetters('layout', ['projectId', 'userId', 'secret'])
  78. },
  79. data() {
  80. return {
  81. floor: {
  82. influence: false, //受影响的业务空间弹窗
  83. details: false, //详情弹窗
  84. notRelated: false,
  85. facility: false
  86. },
  87. param: {
  88. ProjId: this.projectId, //项目id
  89. UserId: this.userId, //用户id
  90. secret: this.secret
  91. },
  92. buildMess: {
  93. name: "--",
  94. code: "",
  95. selectd: [],
  96. map: "",
  97. isChild: true,
  98. buildName: "--",
  99. buildCode: ""
  100. },
  101. isMyTab: 1,
  102. activeName: "0",
  103. tabsList: [],
  104. activeTabType: {
  105. "code": "GeneralZone",
  106. "name": "默认分区",
  107. "rel_type": "99"
  108. },
  109. options: [], //建筑楼层级联下拉
  110. props: { //自定义字段
  111. value: "BuildID",
  112. label: "BuildLocalName",
  113. children: "Floor"
  114. },
  115. floorToMap: {}, //楼层及其对应的模型图
  116. FloorMap: {}, //当前选中的楼层对象
  117. buildFloorSelectd: [''], //当前所选的建筑楼层
  118. childBackParam: {},
  119. needCalculate: false, // 关系是否需要计算
  120. mutiCount: 0
  121. };
  122. },
  123. created() {
  124. // this.init();
  125. this.getRelations()
  126. this.childBackParam = this.$route.params;
  127. },
  128. mounted() { },
  129. methods: {
  130. // 初始化
  131. init() {
  132. this.getTypes()
  133. this.getBuilding()
  134. this.getMutiCount()
  135. },
  136. // 获取项目下建筑
  137. getBuilding() {
  138. let pa = {
  139. Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
  140. Orders: "BuildLocalName asc",
  141. }
  142. buildingQuery(pa, res => {
  143. this.options = res.Content.map(t => {
  144. if (t.Floor) {
  145. t.Floor = t.Floor.map(item => {
  146. item.BuildID = item.FloorID;
  147. item.BuildLocalName = item.FloorLocalName;
  148. this.floorToMap[item.FloorID] = item;
  149. return item;
  150. })
  151. } else {
  152. t.Floor = []
  153. }
  154. return t;
  155. })
  156. if (this.childBackParam.zone) {
  157. this.changeCascader(this.buildFloorSelectd);
  158. this.$refs.floorCascader.setValue(this.buildFloorSelectd)
  159. } else {
  160. this.$refs.floorCascader.setValue([''])
  161. }
  162. })
  163. },
  164. // 切换平面图和列表
  165. changeRadio(val) {
  166. this.changeGraphyOrTable(val)
  167. },
  168. // 获取tabs的列表
  169. getTypes() {
  170. let pa = {
  171. Filters: `parentId = 'Space'`
  172. }
  173. queryDictionaryHead(pa, res => {
  174. this.tabsList = res.Content.map(t => {
  175. if (t.Name == "元空间") {
  176. return undefined;
  177. }
  178. return t;
  179. }).filter(item => item);
  180. if (this.childBackParam.zone) {
  181. this.activeName = this.childBackParam.zone;
  182. this.buildFloorSelectd = this.childBackParam.buildFloorSelectd;
  183. this.isMyTab = this.childBackParam.isMyTab;
  184. } else {
  185. this.activeName = 'GeneralZone';
  186. }
  187. })
  188. },
  189. // 获取多建筑楼层统计
  190. getMutiCount() {
  191. getSpaceBdFlCount({}, res => {
  192. this.mutiCount = res.Count;
  193. })
  194. },
  195. // 获取关系是否需要计算
  196. getRelations() {
  197. let pa = {
  198. Filters: `not ZoneType isNull;ComputationalState>1`
  199. }
  200. getrelationTypeProject(pa, res => {
  201. if (res.Content.length) {
  202. this.needCalculate = true;
  203. } else {
  204. this.needCalculate = false;
  205. this.init()
  206. }
  207. })
  208. },
  209. // 通过选中的tab-Code 获取选中的tab的所有数据
  210. getItemForType() {
  211. let data = {}
  212. this.tabsList.map(item => {
  213. if (item.Code == this.activeName) {
  214. data.code = item.Code;
  215. data.name = item.Name;
  216. }
  217. })
  218. return data
  219. },
  220. // 点击tab
  221. tabClick(val) {
  222. this.changeGraphyOrTable(this.isMyTab)
  223. },
  224. //修改所选建筑楼层
  225. changeCascader(val) {
  226. this.buildFloorSelectd = val;
  227. // 如果选择的是全部或者未明确
  228. if (val.indexOf('noKnow') > -1 || val.indexOf('all') > -1) {
  229. this.isMyTab = 2;
  230. this.FloorMap = {}
  231. } else {
  232. // 选择的是具体某个楼层
  233. if (!this.floorToMap[val[1]].StructureInfo || !this.floorToMap[val[1]].StructureInfo.FloorMap) {
  234. this.isMyTab = 2;
  235. }
  236. this.FloorMap = this.floorToMap[val[1]];
  237. }
  238. this.changeGraphyOrTable(this.isMyTab)
  239. },
  240. // 判断切换至图还是表
  241. changeGraphyOrTable(num) {
  242. this.activeTabType = this.getItemForType()
  243. if (!this.buildFloorSelectd[0]) {
  244. this.$message.warning('请选择建筑楼层')
  245. return
  246. };
  247. if (num == 2) {
  248. this.initMessage();
  249. } else {
  250. this.$refs.graphy.getData(this.buildFloorSelectd, this.FloorMap, this.activeTabType);
  251. }
  252. },
  253. // 触发获取表头-获取初始化信息点
  254. initMessage() {
  255. let params = {
  256. data: {
  257. Orders: "sort asc",
  258. PageNumber: 1,
  259. PageSize: 500
  260. },
  261. type: this.activeName
  262. }
  263. getDataDictionary(params, res => {
  264. this.$refs.handsontable.getHeader(res.Content, this.buildFloorSelectd);
  265. })
  266. },
  267. checkSpace(list, build, graphyId) {
  268. this.floor.notRelated = true;
  269. this.$refs.notRelated.getIdList(list, build, graphyId, this.activeTabType);
  270. this.$refs["graphy"].getHasSpace();
  271. },
  272. changeShow() {
  273. this.floor.dialogVisible = true;
  274. console.log(this.buildMess, 'buildMess')
  275. },
  276. //成功关联平面图
  277. createSuccess() {
  278. this.$refs["graphy"].getHasSpace();
  279. this.$refs["graphy"].clearDimension();
  280. this.floor.notRelated = false;
  281. },
  282. //成功删除业务空间
  283. delSuccess() {
  284. this.floor.details = false;
  285. this.$refs["graphy"].getHasSpace();
  286. this.$refs["graphy"].clearDimension();
  287. },
  288. //查看业务空间详情
  289. getBuinessDetails(list) {
  290. this.floor.details = true;
  291. this.$refs.details.getData(list, this.buildMess);
  292. },
  293. lookEqu(infos) {
  294. infos.id = infos.RoomID
  295. infos.name = infos.RoomLocalName
  296. this.floor.facility = true
  297. this.$refs.facility.getData(infos, this.buildMess)
  298. },
  299. // 空间属于多个建筑楼层
  300. getTips() {
  301. this.$refs.roomInFloorDialog.showDialog();
  302. },
  303. // 跳转至关系总览
  304. jumpToAllRelation() {
  305. this.$router.push({ name: 'overView' })
  306. },
  307. relaSuc() {
  308. this.init();
  309. }
  310. },
  311. watch: {
  312. floor: {
  313. deep: true,
  314. handler: function () {
  315. if (this.floor.notRelated) {
  316. this.$refs["graphy"].clearDimension();
  317. }
  318. }
  319. },
  320. projectId() {
  321. this.init()
  322. }
  323. }
  324. };
  325. </script>
  326. <style lang="less">
  327. #businessSpace {
  328. position: relative;
  329. display: flex;
  330. flex-direction: column;
  331. .space-own-radio {
  332. .el-radio-button__inner {
  333. padding: 9px 21px;
  334. }
  335. }
  336. .el-dialog__body {
  337. max-height: 600px;
  338. overflow-y: auto;
  339. }
  340. .saga-title {
  341. height: 54px;
  342. background-color: #fff;
  343. font-size: 14px;
  344. position: relative;
  345. line-height: 54px;
  346. margin-bottom: 10px;
  347. border: 1px solid #dfe6ec;
  348. .saga-build-mess {
  349. // position: absolute;
  350. // left: 10px;
  351. width: 500px;
  352. margin-left: 10px;
  353. i {
  354. padding-right: 5px;
  355. }
  356. p {
  357. float: left;
  358. }
  359. .saga-btn {
  360. float: left;
  361. height: 40px;
  362. line-height: 40px;
  363. padding: 0 10px;
  364. }
  365. }
  366. .saga-build-tab {
  367. position: absolute;
  368. left: 50%;
  369. transform: translateX(-50%);
  370. .tab-main {
  371. float: left;
  372. width: 120px;
  373. padding: 0 5px;
  374. margin: 5px 0;
  375. border: 1px solid #ccc;
  376. background-color: #fff;
  377. height: 30px;
  378. box-sizing: border-box;
  379. text-align: center;
  380. cursor: pointer;
  381. overflow: hidden;
  382. i {
  383. font-size: 18px;
  384. padding-right: 10px;
  385. float: left;
  386. line-height: 30px;
  387. margin-left: 10px;
  388. }
  389. span {
  390. line-height: 30px;
  391. float: left;
  392. }
  393. }
  394. .tab-active {
  395. background-color: #409eff;
  396. color: #fff;
  397. }
  398. }
  399. .saga-build-tips {
  400. float: right;
  401. margin-right: 10px;
  402. font-size: 12px;
  403. color: #409eff;
  404. cursor: pointer;
  405. }
  406. }
  407. .saga-business-sapce-main {
  408. overflow: hidden;
  409. height: 100%;
  410. background: #fff;
  411. padding: 10px;
  412. /deep/ .el-tabs__item.is-top {
  413. border-top: 2px solid transparent;
  414. &.is-active {
  415. border-top: 2px solid #409eff;
  416. }
  417. }
  418. }
  419. .spaceTypes {
  420. .types {
  421. float: left;
  422. width: 100%;
  423. // width: calc(100% - 200px);
  424. }
  425. .groupAdd {
  426. float: left;
  427. width: 200px;
  428. text-align: right;
  429. height: 40px;
  430. border-bottom: 1px solid #e4e7ed;
  431. }
  432. }
  433. }
  434. </style>