index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <template>
  2. <div id="bd-fl-manage">
  3. <el-row>
  4. <div class="l-list">
  5. <div class="action-box">
  6. <div>
  7. <el-button size="small" type="default" icon="el-icon-plus" @click="addBuild"></el-button>
  8. <el-button size="small" type="default" icon="el-icon-minus" @click="delBuild"></el-button>
  9. <el-button size="small" type="default" icon="el-icon-edit-outline" @click="editBuild"></el-button>
  10. </div>
  11. </div>
  12. <h4>建筑</h4>
  13. <div class="build-list">
  14. <div v-for="(item,index) in buildList" :key="item.BuildID" :class="{'floor-item':true,active:item.active}" @click="changeBuild(index)">
  15. <span>
  16. {{item.BuildLocalName || item.BuildName}}
  17. <el-badge v-if="item.Count>0" class="mark" :value="item.Count" />
  18. </span>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="r-table">
  23. <div class="action-box">
  24. <el-button size="small" type="default" @click="addFloor">添加楼层</el-button>
  25. </div>
  26. <div class="table-box">
  27. <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
  28. <el-table-column label="楼层本地名">
  29. <template slot-scope="scope">{{scope.row.FloorLocalName||scope.row.FloorName}}</template>
  30. </el-table-column>
  31. <el-table-column label="楼层顺序号">
  32. <template slot-scope="scope">{{scope.row.FloorSequenceID}}</template>
  33. </el-table-column>
  34. <el-table-column label="楼层信息">
  35. <template slot-scope="scope">
  36. <el-button size="mini" @click="editFloorData(scope.row)" plain icon="el-icon-edit-outline"></el-button>
  37. </template>
  38. </el-table-column>
  39. <el-table-column prop="Datasource" label="平面图">
  40. <template slot-scope="scope">
  41. <p v-if="scope.row.Sign>0" @click="checkDrawImg(scope.row,2)">
  42. <el-badge is-dot>
  43. <i class="iconfont icon-floorplan"></i>
  44. </el-badge>平面图重复
  45. </p>
  46. <p v-else-if="scope.row.ModelId" @click="checkDrawImg(scope.row,1)">
  47. <i class="iconfont icon-floorplan"></i>
  48. 查看平面图
  49. </p>
  50. <p v-else @click="checkDrawImg(scope.row,3)">
  51. <i class="iconfont icon-nopicture"></i>
  52. 暂无平面图
  53. </p>
  54. </template>
  55. </el-table-column>
  56. <el-table-column prop="SubTypeName" label="楼层贯通关系">
  57. <template slot-scope="scope">
  58. <span style="margin-right:20px">{{scope.row.FloorThroughList?scope.row.FloorThroughList.length:0}}</span>
  59. <el-button size="mini" @click="changeConnection(scope.row)" plain icon="el-icon-edit-outline"></el-button>
  60. </template>
  61. </el-table-column>
  62. <el-table-column prop="action" label="操作">
  63. <template slot-scope="scope">
  64. <el-button size="mini" @click="handleDelete(scope.row)" type="danger" plain icon="el-icon-delete"></el-button>
  65. </template>
  66. </el-table-column>
  67. </el-table>
  68. </div>
  69. </div>
  70. </el-row>
  71. <!-- 添加-修改楼层 -->
  72. <addFloor :title="floorTitle" ref="addFloorDialog" :curBuildId="curBuildId" :curFloorId="curFloorId" @refresh="refresh"></addFloor>
  73. <!-- 添加-修改建筑 -->
  74. <addBuild :title="buildTitle" ref="addBuildDialog"></addBuild>
  75. <!-- 删除建筑-删除楼层 -->
  76. <el-dialog title="提示" :visible.sync="delDialogVis" width="20%" @close="handleClose" id="messageDialog">
  77. <div>确定要删除该{{delText}}?</div>
  78. <span slot="footer" class="dialog-footer">
  79. <el-button size="small" @click="delDialogVis=false">取消</el-button>
  80. <el-button size="small" type="primary" @click="confirmDel">确认</el-button>
  81. </span>
  82. </el-dialog>
  83. <!-- 添加贯通关系弹窗 -->
  84. <addConnectivity ref="addConnectivity" @refresh="refresh"></addConnectivity>
  85. <!-- 查看图片弹窗 -->
  86. <checkGraphy ref="checkGraphy" @refresh="refresh"></checkGraphy>
  87. </div>
  88. </template>
  89. <script>
  90. import addFloor from "@/views/ready/buildfloor/addFloor/index";
  91. import addBuild from "@/components/ready/buildfloor/addBuild";
  92. import { mapGetters, mapActions } from "vuex";
  93. import addConnectivity from "@/components/ready/buildfloor/addConnectivity";
  94. import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
  95. import { buildingQueryAndCount, floorQueryAndSign, manageDeleteFloor } from "@/api/scan/request";
  96. export default {
  97. components: {
  98. addFloor,
  99. addBuild,
  100. addConnectivity,
  101. checkGraphy
  102. },
  103. data() {
  104. return {
  105. repetitionGraphyVisible: false, // 替换平面图弹窗
  106. floorTitle: "添加楼层",
  107. buildTitle: "添加建筑",
  108. delDialogVis: false,
  109. delText: "建筑",
  110. headerStyle: {
  111. backgroundColor: "#d9d9d9",
  112. color: "#2b2b2b",
  113. lineHeight: "30px"
  114. },
  115. buildList: [],
  116. tableData: [],
  117. page: {
  118. pageSize: 500,
  119. pageSizes: [10, 20, 50, 100],
  120. pageNumber: 1,
  121. total: 0
  122. },
  123. loading: false, //列表loading
  124. curBuildId: "", //当前选中的建筑id
  125. curFloorId: "", //当前选中的楼层id
  126. modelId: "",
  127. };
  128. },
  129. computed: {
  130. ...mapGetters("layout", ["projectId"])
  131. },
  132. mounted() { },
  133. created() {
  134. this.init();
  135. },
  136. methods: {
  137. init() {
  138. let bdParam = {
  139. Orders: "BuildLocalName asc",
  140. PageNumber: 1,
  141. PageSize: 500
  142. };
  143. buildingQueryAndCount(bdParam, res => {
  144. this.buildList = res.Content;
  145. if (this.buildList.length) {
  146. this.changeBuild(0);
  147. }
  148. });
  149. },
  150. //change build
  151. changeBuild(index) {
  152. this.buildList.map(item => {
  153. item.active = false;
  154. return item;
  155. });
  156. this.buildList[index].active = true;
  157. this.curBuildId = this.buildList[index].BuildID;
  158. this.getFloorTableData();
  159. this.$forceUpdate();
  160. },
  161. //add build
  162. addBuild() {
  163. this.$message.warning("开发中...");
  164. return;
  165. this.$refs.addBuildDialog.showDialog();
  166. },
  167. //delete build
  168. delBuild() {
  169. this.$message.warning("开发中...");
  170. return;
  171. this.delText = "建筑";
  172. this.delDialogVis = true;
  173. },
  174. //edit build
  175. editBuild() {
  176. this.$message.warning("开发中...");
  177. return;
  178. },
  179. //delete floor
  180. handleDelete(floor) {
  181. this.delText = "楼层";
  182. this.delDialogVis = true;
  183. this.curFloorId = floor.FloorID;
  184. },
  185. //确认删除弹窗关闭
  186. handleClose() { },
  187. addFloor() {
  188. this.curFloorId = "";
  189. this.$refs.addFloorDialog.showDialog();
  190. },
  191. // 获取列表
  192. getFloorTableData() {
  193. let floorParam = {
  194. Cascade: [{ Name: "floorThroughList" }],
  195. Orders: "FloorSequenceID desc",
  196. PageNumber: this.page.pageNumber,
  197. PageSize: this.page.pageSize,
  198. Filters: `BuildID='${this.curBuildId}'`
  199. };
  200. floorQueryAndSign(floorParam, res => {
  201. this.tableData = res.Content;
  202. this.page.total = res.Total;
  203. });
  204. },
  205. // 创建楼层成功-修改关系成功
  206. refresh() {
  207. this.getFloorTableData();
  208. },
  209. // 确认删除(删除建筑-楼层公用)
  210. confirmDel() {
  211. if (this.delText == "楼层") {
  212. let delParam = [{ FloorID: this.curFloorId }];
  213. manageDeleteFloor(delParam, res => {
  214. this.$message.success("删除成功");
  215. this.delDialogVis = false;
  216. this.getFloorTableData();
  217. });
  218. } else {
  219. //todo
  220. }
  221. },
  222. // 修改楼层信息
  223. editFloorData(floor) {
  224. this.floorTitle = "编辑楼层信息";
  225. this.curFloorId = floor.FloorID;
  226. this.$refs.addFloorDialog.showDialog(floor);
  227. },
  228. // 修改楼层贯通关系
  229. changeConnection(row) {
  230. this.$refs.addConnectivity.showDialog();
  231. this.$refs.addConnectivity.floor = row;
  232. },
  233. // 查看平面图
  234. checkDrawImg(row, index) {
  235. if (3 == index) {
  236. this.$refs.checkGraphy.showDialog(row)
  237. this.modelId = "";
  238. } else {
  239. this.modelId = row.ModelId;
  240. let pa = { modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID }
  241. if (row.Outline && row.Outline.length) {
  242. pa.OutlineFlag = true;
  243. }
  244. this.$router.push({ name: "repetitionGraphy", query: pa });
  245. }
  246. }
  247. },
  248. watch: {
  249. projectId() {
  250. this.init();
  251. }
  252. }
  253. };
  254. </script>
  255. <style lang="less" scoped>
  256. #bd-fl-manage {
  257. overflow: hidden;
  258. height: 100%;
  259. position: relative;
  260. .el-row {
  261. height: 100%;
  262. & > div {
  263. float: left;
  264. height: 100%;
  265. overflow: hidden;
  266. background-color: #fff;
  267. box-sizing: border-box;
  268. border: 1px solid #dfe6ec;
  269. .action-box {
  270. padding: 10px;
  271. .el-button--small {
  272. padding: 10px 11px;
  273. }
  274. }
  275. }
  276. .l-list {
  277. width: 17%;
  278. overflow-y: auto;
  279. h4 {
  280. padding-left: 10px;
  281. border-top: 1px solid #d9d9d9;
  282. border-bottom: 1px solid #d9d9d9;
  283. background: #d9d9d9;
  284. color: #2b2b2b;
  285. line-height: 44px;
  286. }
  287. .build-list {
  288. line-height: 48px;
  289. .floor-item {
  290. white-space: nowrap;
  291. overflow: hidden;
  292. text-overflow: ellipsis;
  293. span {
  294. margin-left: 10px;
  295. }
  296. }
  297. .floor-item.active,
  298. .floor-item:hover {
  299. background-color: #f5f7fa;
  300. color: #000;
  301. }
  302. }
  303. }
  304. .r-table {
  305. width: 82%;
  306. margin-left: 1%;
  307. .table-box {
  308. height: calc(100% - 54px);
  309. margin-bottom: 8px;
  310. .iconfont {
  311. vertical-align: middle;
  312. }
  313. /deep/ .el-badge__content.is-fixed {
  314. transform: translateY(-6%) translateX(-100%);
  315. }
  316. p {
  317. cursor: pointer;
  318. }
  319. }
  320. }
  321. }
  322. }
  323. </style>