index.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  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. PageNumber: 1,
  140. PageSize: 500
  141. };
  142. buildingQueryAndCount(bdParam, res => {
  143. this.buildList = res.Content;
  144. if (this.buildList.length) {
  145. this.changeBuild(0);
  146. }
  147. });
  148. },
  149. //change build
  150. changeBuild(index) {
  151. this.buildList.map(item => {
  152. item.active = false;
  153. return item;
  154. });
  155. this.buildList[index].active = true;
  156. this.curBuildId = this.buildList[index].BuildID;
  157. this.getFloorTableData();
  158. this.$forceUpdate();
  159. },
  160. //add build
  161. addBuild() {
  162. this.$message.warning("开发中...");
  163. return;
  164. this.$refs.addBuildDialog.showDialog();
  165. },
  166. //delete build
  167. delBuild() {
  168. this.$message.warning("开发中...");
  169. return;
  170. this.delText = "建筑";
  171. this.delDialogVis = true;
  172. },
  173. //edit build
  174. editBuild() {
  175. this.$message.warning("开发中...");
  176. return;
  177. },
  178. //delete floor
  179. handleDelete(floor) {
  180. this.delText = "楼层";
  181. this.delDialogVis = true;
  182. this.curFloorId = floor.FloorID;
  183. },
  184. //确认删除弹窗关闭
  185. handleClose() { },
  186. addFloor() {
  187. this.curFloorId = "";
  188. this.$refs.addFloorDialog.showDialog();
  189. },
  190. // 获取列表
  191. getFloorTableData() {
  192. let floorParam = {
  193. Cascade: [{ Name: "floorThroughList" }],
  194. Orders: "FloorSequenceID desc",
  195. PageNumber: this.page.pageNumber,
  196. PageSize: this.page.pageSize,
  197. Filters: `BuildID='${this.curBuildId}'`
  198. };
  199. floorQueryAndSign(floorParam, res => {
  200. this.tableData = res.Content;
  201. this.page.total = res.Total;
  202. });
  203. },
  204. // 创建楼层成功-修改关系成功
  205. refresh() {
  206. this.getFloorTableData();
  207. },
  208. // 确认删除(删除建筑-楼层公用)
  209. confirmDel() {
  210. if (this.delText == "楼层") {
  211. let delParam = [{ FloorID: this.curFloorId }];
  212. manageDeleteFloor(delParam, res => {
  213. this.$message.success("删除成功");
  214. this.delDialogVis = false;
  215. this.getFloorTableData();
  216. });
  217. } else {
  218. //todo
  219. }
  220. },
  221. // 修改楼层信息
  222. editFloorData(floor) {
  223. this.floorTitle = "编辑楼层信息";
  224. this.curFloorId = floor.FloorID;
  225. this.$refs.addFloorDialog.showDialog(floor);
  226. },
  227. // 修改楼层贯通关系
  228. changeConnection(row) {
  229. this.$refs.addConnectivity.showDialog();
  230. this.$refs.addConnectivity.floor = row;
  231. },
  232. // 查看平面图
  233. checkDrawImg(row, index) {
  234. if (3 == index) {
  235. this.$refs.checkGraphy.showDialog(row)
  236. this.modelId = "";
  237. } else {
  238. this.modelId = row.ModelId;
  239. let pa = { modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID }
  240. if (row.Outline && row.Outline.length) {
  241. pa.OutlineFlag = true;
  242. }
  243. this.$router.push({ name: "repetitionGraphy", query: pa });
  244. }
  245. }
  246. },
  247. watch: {
  248. projectId() {
  249. this.init();
  250. }
  251. }
  252. };
  253. </script>
  254. <style lang="less" scoped>
  255. #bd-fl-manage {
  256. overflow: hidden;
  257. height: 100%;
  258. position: relative;
  259. .el-row {
  260. height: 100%;
  261. & > div {
  262. float: left;
  263. height: 100%;
  264. overflow: hidden;
  265. background-color: #fff;
  266. box-sizing: border-box;
  267. border: 1px solid #dfe6ec;
  268. .action-box {
  269. padding: 10px;
  270. .el-button--small {
  271. padding: 10px 11px;
  272. }
  273. }
  274. }
  275. .l-list {
  276. width: 17%;
  277. overflow-y: auto;
  278. h4 {
  279. padding-left: 10px;
  280. border-top: 1px solid #d9d9d9;
  281. border-bottom: 1px solid #d9d9d9;
  282. background: #d9d9d9;
  283. color: #2b2b2b;
  284. line-height: 44px;
  285. }
  286. .build-list {
  287. line-height: 48px;
  288. .floor-item {
  289. white-space: nowrap;
  290. overflow: hidden;
  291. text-overflow: ellipsis;
  292. span {
  293. margin-left: 10px;
  294. }
  295. }
  296. .floor-item.active,
  297. .floor-item:hover {
  298. background-color: #f5f7fa;
  299. color: #000;
  300. }
  301. }
  302. }
  303. .r-table {
  304. width: 82%;
  305. margin-left: 1%;
  306. .table-box {
  307. height: calc(100% - 54px);
  308. margin-bottom: 8px;
  309. .iconfont {
  310. vertical-align: middle;
  311. }
  312. /deep/ .el-badge__content.is-fixed {
  313. transform: translateY(-6%) translateX(-100%);
  314. }
  315. p {
  316. cursor: pointer;
  317. }
  318. }
  319. }
  320. }
  321. }
  322. </style>