relatedSpace.vue 10.0 KB

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