index.vue 11 KB

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