index.vue 15 KB

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