index.vue 16 KB

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