index.vue 13 KB

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