relatedSpace.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. <template>
  2. <div id="relatedSpace">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <span style="float:left;">{{ cenoteObj.name || '' }}</span>
  7. <div class="edit-tool" v-if="!cenoteObj.onlyRead">
  8. <el-button v-if="isMyTab == 2" size="small" style="float:right" @click="dialogVisible = true">添加</el-button>
  9. <div v-else>
  10. <el-button v-show="!isEdit" @click="isEdit = true" size="small" style="float:right">编辑</el-button>
  11. <el-button v-show="isEdit" size="small" @click="saveEdit" style="float:right">保存</el-button>
  12. <el-button v-show="isEdit" size="small" @click="cancelEdit" style="float:right">取消</el-button>
  13. </div>
  14. <addSpaceDialog :dialogVisible.sync="dialogVisible" ref="addSpaceDialog" @refresh="refresh" :params="cenoteObj" :spaceType="spaceType"
  15. :floorType="floorType"></addSpaceDialog>
  16. </div>
  17. <el-badge :is-dot="showSpaceDot">
  18. <el-select v-model="space" placeholder="请选择业务空间" @change="changeSpace" style="margin-left:15px;">
  19. <el-option v-for="item in spaceList" :key="item.Code" :label="item.Name" :value="item.Code">
  20. </el-option>
  21. </el-select>
  22. </el-badge>
  23. </div>
  24. <div class="saga-build-tab">
  25. <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
  26. <el-radio-button label="1">平面图</el-radio-button>
  27. <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
  28. </el-radio-group>
  29. </div>
  30. <div v-show="isMyTab == 1" class="data-item">
  31. <el-badge :is-dot="showBuildDot">
  32. <el-select v-model="building" placeholder="请选择建筑" @change="changeBuilding" v-loading="buildingLoading">
  33. <el-option v-for="item in buildingList" :key="item.value" :label="item.BuildLocalName" :value="item.BuildID"></el-option>
  34. </el-select>
  35. </el-badge>
  36. <div style="height:calc(100% - 42px);margin:10px 0 0 0;width:100%;position:relative;">
  37. <el-scrollbar style="height:100%;width:148px;border:1px solid rgb(201,201,201);margin:0px;float:left;">
  38. <div class="floor" style="width:149px;height:100%;">
  39. <span class="floor-item" style="border-bottom:1px solid rgb(201,201,201)">楼 层</span>
  40. <div v-if="building" v-loading="buildingLoading">
  41. <span class="floor-item" @click="changeFloor(item.FloorID)" :class="{floorItemChoose:(item.FloorID == floor)}"
  42. v-for="item in buildingObj.Floor" :key="item.FloorID">{{ item.FloorLocalName }}</span>
  43. </div>
  44. </div>
  45. </el-scrollbar>
  46. <div style="float:right;height:100%;width:calc(100% - 152px);border:1px solid rgb(201,201,201);">
  47. <cenote-graphy ref="cenotegraphy"></cenote-graphy>
  48. </div>
  49. </div>
  50. </div>
  51. <div v-show="isMyTab == 2" class="data-item">
  52. <related-spaceList :space="space" :buildingList="buildingList" :spaceType="spaceType" :floorType="floorType" ref="relatedSpacelist">
  53. </related-spaceList>
  54. </div>
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. import spaceSelect from "@/components/ledger/lib/spaceSelect";
  60. import relatedSpaceList from "@/views/ledger/cenotelist/relatedSpaceList";
  61. import addSpaceDialog from '@/components/ledger/cenote/dialog/addSpaceDialog';
  62. import { queryDictionaryHead, buildingQuery, shaftSpaceTypeQuery, shaftSpaceBuildingQuery } from '@/api/scan/request';
  63. import cenoteGraphy from '@/components/ledger/lib/cenoteGraphy'
  64. import { mapGetters } from 'vuex'
  65. export default {
  66. data() {
  67. return {
  68. isMyTab: 1,//默认平面图
  69. isEdit: false,//是否正在编辑
  70. building: '',//当前建筑id
  71. buildingObj: {},//当前建筑obj
  72. buildingList: [],
  73. space: '',//当前业务空间
  74. spaceList: [],//空间list
  75. floor: '',//当前楼层
  76. dialogVisible: false,//添加空间弹窗
  77. spaceType: {},//空间种类
  78. floorType: {},//子组件楼层信息
  79. buildingLoading: false,//左侧列表加载
  80. showSpaceDot:false,//空间提示红点
  81. showBuildDot:false,//楼层提示红点
  82. }
  83. },
  84. computed: {
  85. cenoteObj() {
  86. return this.$route.query;
  87. },
  88. ...mapGetters("layout", ["projectId"])
  89. },
  90. props: {
  91. },
  92. components: {
  93. spaceSelect,
  94. relatedSpaceList,
  95. addSpaceDialog,
  96. cenoteGraphy
  97. },
  98. created() {
  99. this.getSpaceData();
  100. },
  101. methods: {
  102. //获取空间信息
  103. getSpaceData() {
  104. if (this.cenoteObj.onlyRead) {
  105. let pa = {
  106. shaftId: this.$route.query.ShaftId
  107. }
  108. shaftSpaceTypeQuery(pa, res => {
  109. this.spaceList = res.Content.map(item => {
  110. return { Code: item.ObjectType, Name: item.ObjectTypeName };
  111. });
  112. this.showDefaultSpace();
  113. });
  114. }
  115. else {
  116. let pa = {
  117. Filters: `parentId='Space'`
  118. }
  119. queryDictionaryHead(pa, res => {
  120. this.spaceList = res.Content.map(t => {
  121. if (t.Name != "元空间") {
  122. this.spaceType[t.Code] = t.Name;
  123. }
  124. return t;
  125. });
  126. this.showDefaultSpace();
  127. });
  128. }
  129. },
  130. //默认显示第一个空间
  131. showDefaultSpace() {
  132. if (this.spaceList.length) {
  133. this.space = this.spaceList[0].Code;
  134. if(this.spaceList.length > 1 && this.cenoteObj.onlyRead){
  135. this.showSpaceDot = true;
  136. }
  137. }
  138. //处理空间类型
  139. this.spaceList.map(item => {
  140. if (item.Name != "元空间") {
  141. this.spaceType[item.Code] = item.Name;
  142. }
  143. });
  144. //加载楼层信息
  145. this.loadBuildingData();
  146. },
  147. //获取楼层信息
  148. loadBuildingData() {
  149. if (this.cenoteObj.onlyRead) {
  150. let param = {
  151. ShaftId: this.$route.query.ShaftId,
  152. ObjectType: this.space
  153. };
  154. this.buildingLoading = true;
  155. shaftSpaceBuildingQuery(param, res => {
  156. this.buildingLoading = false;
  157. this.buildingList = res.Content;
  158. this.buildingList = this.buildingList.map(item => {
  159. item.Floor = item.FloorList;
  160. item.BuildID = item.BuildingId;
  161. item.BuildLocalName = item.BuildingLocalName;
  162. if (item.Floor) {
  163. item.Floor = item.Floor.map(item => {
  164. item.FloorID = item.FloorId;
  165. item.FloorLocalName = item.FloorLocalName;
  166. return item;
  167. })
  168. }
  169. return item;
  170. })
  171. this.handleBuildingData();
  172. });
  173. }
  174. else {
  175. let param = {
  176. Cascade: [
  177. { Name: "floor" }
  178. ]
  179. };
  180. buildingQuery(param, res => {
  181. this.buildingList = res.Content;
  182. this.handleBuildingData();
  183. });
  184. }
  185. },
  186. //处理建筑楼层数据
  187. handleBuildingData() {
  188. if (this.buildingList.length) {
  189. this.building = this.buildingList[0].BuildID;
  190. this.buildingObj = this.buildingList[0];
  191. if (this.buildingObj.Floor && this.buildingObj.Floor.length) {
  192. this.floor = this.buildingObj.Floor[0].FloorID;
  193. }
  194. if(this.buildingList.length > 1 && this.cenoteObj.onlyRead){
  195. this.showBuildDot = true;
  196. }
  197. }
  198. this.buildingList.map(item => {
  199. if (item.BuildID && item.BuildLocalName) {
  200. this.floorType[item.BuildID] = item.BuildLocalName;
  201. if (item.Floor instanceof Array) {
  202. item.Floor.map(f => {
  203. if (f.FloorID && f.FloorLocalName) {
  204. this.floorType[f.FloorID] = f.FloorLocalName;
  205. }
  206. })
  207. }
  208. }
  209. });
  210. },
  211. //更改业务空间类型
  212. changeSpace(val) {
  213. this.space = val;
  214. this.loadBuildingData();
  215. this.showSpaceDot = false;
  216. },
  217. //更换建筑
  218. changeBuilding(bid) {
  219. this.buildingList.map(item => {
  220. if (item.BuildID == bid) {
  221. this.buildingObj = item;
  222. if (item.Floor && item.Floor.length) {
  223. this.floor = item.Floor[0].FloorID
  224. }
  225. }
  226. })
  227. this.showBuildDot = false;
  228. },
  229. //更换楼层
  230. changeFloor(fid) {
  231. this.floor = fid;
  232. },
  233. //取消编辑
  234. cancelEdit(){
  235. this.isEdit = false;
  236. this.$refs.cenotegraphy.cancelEdit();
  237. },
  238. //保存编辑
  239. saveEdit(){
  240. this.isEdit = false;
  241. this.$refs.cenotegraphy.saveEdit();
  242. },
  243. //更换列表或平面图
  244. changeRadio(val) {
  245. if (val == 2) {
  246. this.spaceList.unshift({ Code: '', Name: '全部' });
  247. }
  248. if (val == 1) {
  249. if (this.spaceList.length > 0) {
  250. this.spaceList.shift();
  251. }
  252. }
  253. if (this.spaceList.length) {
  254. this.changeSpace(this.spaceList[0].Code);
  255. }
  256. this.isMyTab = val;
  257. },
  258. //返回
  259. goBack() {
  260. this.$router.push({
  261. name: 'cenotelist'
  262. })
  263. },
  264. //更新
  265. refresh() {
  266. this.$refs.relatedSpacelist.getSpaceList();
  267. this.dialogVisible = false;
  268. }
  269. },
  270. watch: {
  271. floor: {
  272. handler(val) {
  273. this.isEdit = false;
  274. let buildfloor = [this.building, val]
  275. this.$refs.cenotegraphy.getFloorMap(buildfloor, this.space)
  276. }
  277. },
  278. space: {
  279. handler(val) {
  280. this.isEdit = false;
  281. let buildfloor = [this.building, this.floor]
  282. this.$refs.cenotegraphy.getFloorMap(buildfloor, val)
  283. }
  284. },
  285. isEdit: {
  286. handler(val) {
  287. this.$refs.cenotegraphy.setSelectAble(val);
  288. }
  289. },
  290. projectId:{
  291. handler(val){
  292. this.goBack();
  293. }
  294. }
  295. }
  296. }
  297. </script>
  298. <style lang="less" scoped>
  299. .condition {
  300. position: relative;
  301. padding: 10px 10px;
  302. display: flex;
  303. height: calc(100% - 22px);
  304. flex-direction: column;
  305. border: 1px solid #dfe6ec;
  306. background: #fff;
  307. .header {
  308. padding-bottom: 10px;
  309. border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  310. span {
  311. line-height: 33px;
  312. margin-left: 15px;
  313. }
  314. /deep/ .buildFloor {
  315. line-height: 32px;
  316. }
  317. }
  318. .spaceTypes {
  319. .types {
  320. float: left;
  321. width: calc(100% - 200px);
  322. /deep/ .el-tabs__item.is-top {
  323. border-top: 2px solid transparent;
  324. &.is-active {
  325. border-top: 2px solid #409eff;
  326. }
  327. }
  328. }
  329. .deleBtn {
  330. float: left;
  331. width: 200px;
  332. text-align: right;
  333. height: 40px;
  334. border-bottom: 1px solid #e4e7ed;
  335. }
  336. }
  337. }
  338. .saga-build-tab {
  339. position: absolute;
  340. left: 50%;
  341. transform: translateX(-50%);
  342. .tab-main {
  343. float: left;
  344. width: 120px;
  345. padding: 0 5px;
  346. margin: 5px 0;
  347. border: 1px solid #ccc;
  348. background-color: #fff;
  349. height: 30px;
  350. box-sizing: border-box;
  351. text-align: center;
  352. cursor: pointer;
  353. overflow: hidden;
  354. i {
  355. font-size: 18px;
  356. padding-right: 10px;
  357. float: left;
  358. line-height: 30px;
  359. margin-left: 10px;
  360. }
  361. span {
  362. line-height: 30px;
  363. float: left;
  364. }
  365. }
  366. .tab-active {
  367. background-color: #409eff;
  368. color: #fff;
  369. }
  370. }
  371. .data-item {
  372. height: calc(100% - 44px);
  373. padding: 10px 0px;
  374. /deep/ .is-horizontal{
  375. display:none
  376. }
  377. }
  378. .floor-item {
  379. padding: 10px 10px;
  380. display: block;
  381. margin: 0px;
  382. cursor: pointer;
  383. }
  384. .floorItemChoose {
  385. background: rgba(0, 0, 0, 0.2);
  386. }
  387. /deep/ .el-scrollbar__wrap {
  388. overflow-x: hidden;
  389. }
  390. </style>