index.vue 14 KB

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