index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  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 @click="addBuild" icon="el-icon-plus" size="small" type="default"/>
  8. <el-popover
  9. placement="top"
  10. width="160"
  11. v-model="visible">
  12. <p>确定删除吗?</p>
  13. <div style="text-align: right; margin: 0">
  14. <el-button size="mini" type="text" @click="visible = false">取消</el-button>
  15. <el-button type="primary" size="mini" @click="delBuild">确定</el-button>
  16. </div>
  17. <el-button slot="reference" icon="el-icon-minus" size="small" type="default"/>
  18. </el-popover>
  19. <el-button @click="editBuild" icon="el-icon-edit-outline" size="small" type="default"/>
  20. </div>
  21. </div>
  22. <h4>建筑</h4>
  23. <div class="build-list">
  24. <div :class="{'floor-item':true,active:item.active}" :key="item.BuildID" @click="changeBuild(index)"
  25. v-for="(item,index) in buildList">
  26. <span>
  27. {{item.BuildLocalName || item.BuildName}}
  28. <el-badge :value="item.Count" class="mark" v-if="item.Count>0"/>
  29. </span>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="r-table">
  34. <div class="action-box">
  35. <el-button @click="addFloor" size="small" type="default">添加楼层
  36. </el-button>
  37. </div>
  38. <div class="table-box">
  39. <el-table :data="tableData" :header-cell-style="headerStyle" height="100%" style="width: 100%"
  40. v-loading="loading">
  41. <el-table-column label="楼层本地名">
  42. <template slot-scope="scope">{{scope.row.FloorLocalName||scope.row.FloorName}}</template>
  43. </el-table-column>
  44. <el-table-column label="楼层顺序号">
  45. <template slot-scope="scope">{{scope.row.FloorSequenceID}}</template>
  46. </el-table-column>
  47. <el-table-column label="楼层信息">
  48. <template slot-scope="scope">
  49. <el-button @click="editFloorData(scope.row)" icon="el-icon-edit-outline" plain size="mini"></el-button>
  50. </template>
  51. </el-table-column>
  52. <el-table-column label="平面图" prop="Datasource">
  53. <template slot-scope="scope">
  54. <p @click="checkDrawImg(scope.row,2)" v-if="scope.row.Sign>0">
  55. <el-badge is-dot>
  56. <i class="iconfont icon-floorplan"/>
  57. </el-badge>
  58. 平面图重复
  59. </p>
  60. <p @click="checkDrawImg(scope.row,1)"
  61. v-else-if="scope.row.StructureInfo?scope.row.StructureInfo.FloorMap:false">
  62. <i class="iconfont icon-floorplan"/>
  63. 查看平面图
  64. </p>
  65. <p @click="checkDrawImg(scope.row,3)" v-else>
  66. <i class="iconfont icon-nopicture"/>
  67. 暂无平面图
  68. </p>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="楼层贯通关系" prop="SubTypeName">
  72. <template slot-scope="scope">
  73. <span
  74. style="margin-right:20px">{{scope.row.FloorThroughList?scope.row.FloorThroughList.length:0}}</span>
  75. <el-button @click="changeConnection(scope.row)" icon="el-icon-edit-outline" plain size="mini"/>
  76. </template>
  77. </el-table-column>
  78. <el-table-column label="操作" prop="action">
  79. <template slot-scope="scope">
  80. <el-button @click="handleDelete(scope.row)" icon="el-icon-delete" plain size="mini" type="danger"/>
  81. </template>
  82. </el-table-column>
  83. </el-table>
  84. </div>
  85. </div>
  86. </el-row>
  87. <!-- 添加-修改楼层 -->
  88. <addFloor :curBuildId="curBuildId" :curFloorId="curFloorId" :title="floorTitle" @refresh="refresh"
  89. ref="addFloorDialog"/>
  90. <!-- 添加-修改建筑 :currentType="currentType"-->
  91. <addBuild
  92. :buildTitle="buildTitle"
  93. ref="addBuildDialog"
  94. :buildMessage="buildMessage"
  95. @handleBuild="handleBuild"
  96. :curBuildId="curBuildId"
  97. />
  98. <!-- 删除建筑-删除楼层 -->
  99. <el-dialog :visible.sync="delDialogVis" @close="handleClose" id="messageDialog" title="提示" width="20%">
  100. <div>确定要删除该{{delText}}?</div>
  101. <span class="dialog-footer" slot="footer">
  102. <el-button @click="delDialogVis=false" size="small">取消</el-button>
  103. <el-button @click="confirmDel" size="small" type="primary">确认</el-button>
  104. </span>
  105. </el-dialog>
  106. <!-- 添加贯通关系弹窗 -->
  107. <addConnectivity @refresh="refresh" ref="addConnectivity"/>
  108. <!-- 查看图片弹窗 -->
  109. <checkGraphy :alreadyRelatedModel='alreadyRelatedModel' @refresh="refresh" ref="checkGraphy"></checkGraphy>
  110. </div>
  111. </template>
  112. <script>
  113. import addFloor from "@/views/ready/buildfloor/addFloor/index";
  114. import addBuild from "@/components/ready/buildfloor/addBuild";
  115. import {mapGetters} from "vuex";
  116. import addConnectivity from "@/components/ready/buildfloor/addConnectivity";
  117. import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
  118. import tools from "@/utils/buildfloor/tools";
  119. import {
  120. buildingQueryAndCount,
  121. floorQueryAndSign,
  122. getDataDictionary,
  123. manageDeleteFloor,
  124. objectCreateBuild,
  125. objectDeleteBuild,
  126. objectQueryBuild,
  127. objectUpdateBuild
  128. } from "@/api/scan/request";
  129. export default {
  130. components: {
  131. addFloor,
  132. addBuild,
  133. addConnectivity,
  134. checkGraphy
  135. },
  136. data() {
  137. return {
  138. repetitionGraphyVisible: false, // 替换平面图弹窗
  139. floorTitle: "添加楼层",
  140. buildTitle: "添加建筑",
  141. delDialogVis: false,
  142. delText: "建筑",
  143. headerStyle: {
  144. backgroundColor: "#d9d9d9",
  145. color: "#2b2b2b",
  146. lineHeight: "30px"
  147. },
  148. buildList: [],
  149. tableData: [],
  150. page: {
  151. pageSize: 500,
  152. pageSizes: [10, 20, 50, 100],
  153. pageNumber: 1,
  154. total: 0
  155. },
  156. loading: false, //列表loading
  157. curBuildId: "", //当前选中的建筑id
  158. curFloorId: "", //当前选中的楼层id
  159. modelId: "",
  160. alreadyRelatedModel: [],
  161. // currentType: 'add'
  162. buildMessage: {},
  163. visible: false,
  164. currentBuild: {},//当前建筑
  165. };
  166. },
  167. computed: {
  168. ...mapGetters("layout", ["projectId"])
  169. },
  170. mounted() {
  171. },
  172. created() {
  173. this.init();
  174. },
  175. methods: {
  176. init() {
  177. let bdParam = {
  178. Orders: "BuildLocalName asc",
  179. PageNumber: 1,
  180. PageSize: 500
  181. };
  182. buildingQueryAndCount(bdParam, res => {
  183. this.buildList = res.Content;
  184. if (this.buildList.length) {
  185. this.changeBuild(0);
  186. }
  187. });
  188. },
  189. //change build
  190. changeBuild(index) {
  191. this.buildList.map(item => {
  192. item.active = false;
  193. return item;
  194. });
  195. this.buildList[index].active = true;
  196. this.curBuildId = this.buildList[index].BuildID;
  197. this.currentBuild = this.buildList[index]
  198. this.getFloorTableData();
  199. this.$forceUpdate();
  200. },
  201. //add build
  202. addBuild() {
  203. // this.$message.warning("开发中...");
  204. // return;
  205. this.buildTitle = '添加建筑';
  206. let params = {
  207. projectId: this.projectId,
  208. data: {
  209. Orders: "sort asc,InfoPointCode asc",
  210. PageNumber: 1,
  211. PageSize: 50
  212. },
  213. type: 'Building'
  214. };
  215. getDataDictionary(params, res => {
  216. let list = res.Content.map(item => {
  217. if (item.InputMode === 'D1' && item.DataSource != undefined) {
  218. item.options = JSON.parse(item.DataSource)
  219. }
  220. return item
  221. })
  222. let first = {}
  223. //一级循环出来一级标签
  224. list.map(item => {
  225. if (item.InputMode === 'D1' && item.DataSource != undefined) {
  226. item.options = JSON.parse(item.DataSource)
  227. }
  228. if (first[item.FirstName] && first[item.FirstName].length) {
  229. } else {
  230. first[item.FirstName] = []
  231. }
  232. first[item.FirstName].push({
  233. InfoPointName: item.InfoPointName,
  234. InfoPointCode: item.InfoPointCode,
  235. Visible: item.Visible,
  236. UnDisabled: item.UnDisabled,
  237. SecondName: item.SecondName ? item.SecondName : "",
  238. Path: item.Path,
  239. InputMode: item.InputMode,
  240. options: item.options,
  241. Unit: item.Unit
  242. })
  243. })
  244. this.buildMessage = first
  245. })
  246. this.$refs.addBuildDialog.showDialog();
  247. },
  248. //delete build ,根据id删除建筑信息
  249. delBuild() {
  250. // this.$message.warning("开发中...");
  251. // return;
  252. // this.delText = "建筑";
  253. // this.delDialogVis = true;
  254. let param = [{BuildId: this.curBuildId}];
  255. objectDeleteBuild(param, res => {
  256. setTimeout(() => {
  257. this.handleBuildQuery()
  258. this.init()
  259. })
  260. this.visible = false
  261. this.$message.success("删除成功");
  262. })
  263. },
  264. //edit build
  265. editBuild() {
  266. // this.currentType = 'edit';
  267. this.buildTitle = '编辑建筑';
  268. this.$refs.addBuildDialog.showDialog(this.currentBuild);
  269. },
  270. // handleBuild 获取建筑信息
  271. handleBuild(val) {
  272. let newform = tools.formatData(val)
  273. newform.BuildID = this.curBuildId || ''
  274. let Param = {
  275. Content: [newform]
  276. }
  277. if (newform.curBuildId) {
  278. objectUpdateBuild(Param, res => {
  279. this.$message.success('更新成功')
  280. this.$refs.addBuildDialog.closeDialog()
  281. })
  282. } else {
  283. objectCreateBuild(Param, res => {
  284. this.$message.success('创建成功')
  285. this.$refs.addBuildDialog.closeDialog()
  286. })
  287. }
  288. setTimeout(() => {
  289. this.handleBuildQuery()
  290. this.init()
  291. })
  292. },
  293. //delete floor
  294. handleDelete(floor) {
  295. this.delText = "楼层";
  296. this.delDialogVis = true;
  297. this.curFloorId = floor.FloorID;
  298. },
  299. //确认删除弹窗关闭
  300. handleClose() {
  301. },
  302. addFloor() {
  303. this.curFloorId = "";
  304. this.$refs.addFloorDialog.showDialog();
  305. },
  306. // 获取列表
  307. getFloorTableData() {
  308. let floorParam = {
  309. Cascade: [{Name: "floorThroughList"}],
  310. Orders: "FloorSequenceID desc",
  311. PageNumber: this.page.pageNumber,
  312. PageSize: this.page.pageSize,
  313. Filters: `BuildID='${this.curBuildId}'`
  314. };
  315. floorQueryAndSign(floorParam, res => {
  316. this.tableData = res.Content;
  317. this.page.total = res.Total;
  318. this.alreadyRelatedModel = res.Content.map(t => {
  319. return t.ModelId
  320. }).filter(t => t);
  321. });
  322. },
  323. // 创建楼层成功-修改关系成功
  324. refresh() {
  325. this.getFloorTableData();
  326. },
  327. // 确认删除(删除建筑-楼层公用)
  328. confirmDel() {
  329. if (this.delText == "楼层") {
  330. let delParam = [{FloorID: this.curFloorId}];
  331. manageDeleteFloor(delParam, res => {
  332. this.$message.success("删除成功");
  333. this.delDialogVis = false;
  334. this.getFloorTableData();
  335. });
  336. } else {
  337. //todo
  338. }
  339. },
  340. // 修改楼层信息
  341. editFloorData(floor) {
  342. this.floorTitle = "编辑楼层信息";
  343. this.curFloorId = floor.FloorID;
  344. this.$refs.addFloorDialog.showDialog(floor);
  345. },
  346. // 修改楼层贯通关系
  347. changeConnection(row) {
  348. this.$refs.addConnectivity.showDialog();
  349. this.$refs.addConnectivity.floor = row;
  350. },
  351. // 查看平面图
  352. checkDrawImg(row, index) {
  353. if (3 == index) {
  354. this.$refs.checkGraphy.showDialog(row);
  355. this.modelId = "";
  356. } else {
  357. this.modelId = row.ModelId;
  358. let pa = {modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID};
  359. this.$router.push({name: "repetitionGraphy", query: pa});
  360. }
  361. },
  362. // 查询建筑信息
  363. handleBuildQuery() {
  364. let floorParam = {
  365. projectId: this.projectId
  366. };
  367. objectQueryBuild(floorParam, res => {
  368. });
  369. },
  370. },
  371. watch: {
  372. projectId() {
  373. this.init();
  374. }
  375. }
  376. };
  377. </script>
  378. <style lang="less" scoped>
  379. #bd-fl-manage {
  380. overflow: hidden;
  381. height: 100%;
  382. position: relative;
  383. .el-row {
  384. height: 100%;
  385. .el-col-4 {
  386. width: 17%;
  387. }
  388. .el-col-20 {
  389. width: 82%;
  390. }
  391. & > div {
  392. float: left;
  393. height: 100%;
  394. overflow: hidden;
  395. background-color: #fff;
  396. box-sizing: border-box;
  397. border: 1px solid #dfe6ec;
  398. .action-box {
  399. padding: 10px;
  400. .el-button--small {
  401. padding: 10px 11px;
  402. }
  403. }
  404. }
  405. .l-list {
  406. width: 17%;
  407. overflow-y: auto;
  408. h4 {
  409. padding-left: 10px;
  410. border-top: 1px solid #d9d9d9;
  411. border-bottom: 1px solid #d9d9d9;
  412. background: #d9d9d9;
  413. color: #2b2b2b;
  414. line-height: 44px;
  415. }
  416. .build-list {
  417. line-height: 48px;
  418. .floor-item {
  419. white-space: nowrap;
  420. overflow: hidden;
  421. text-overflow: ellipsis;
  422. span {
  423. margin-left: 10px;
  424. }
  425. }
  426. .floor-item.active,
  427. .floor-item:hover {
  428. background-color: #f5f7fa;
  429. color: #000;
  430. }
  431. }
  432. }
  433. .r-table {
  434. width: 82%;
  435. margin-left: 1%;
  436. .table-box {
  437. height: calc(100% - 54px);
  438. margin-bottom: 8px;
  439. .iconfont {
  440. vertical-align: middle;
  441. }
  442. /deep/ .el-badge__content.is-fixed {
  443. transform: translateY(-6%) translateX(-100%);
  444. }
  445. p {
  446. cursor: pointer;
  447. }
  448. }
  449. }
  450. }
  451. }
  452. </style>