index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  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="bindRefresh" 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. selectedBuildIndex: 0
  166. };
  167. },
  168. computed: {
  169. ...mapGetters("layout", ["projectId"])
  170. },
  171. mounted() {
  172. },
  173. created() {
  174. this.init();
  175. this.handleBuildQuery()
  176. this.handleSearchBuildKey()
  177. },
  178. methods: {
  179. init() {
  180. let bdParam = {
  181. Orders: "BuildLocalName asc",
  182. PageNumber: 1,
  183. PageSize: 500
  184. };
  185. buildingQueryAndCount(bdParam, res => {
  186. this.buildList = res.Content;
  187. if (this.buildList.length) {
  188. this.changeBuild(this.selectedBuildIndex);
  189. }
  190. });
  191. },
  192. //change build
  193. changeBuild(index) {
  194. this.selectedBuildIndex = index;
  195. this.buildList.map(item => {
  196. item.active = false;
  197. return item;
  198. });
  199. this.buildList[index].active = true;
  200. this.curBuildId = this.buildList[index].BuildID;
  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. projectId: this.projectId,
  215. data: {
  216. Orders: "sort asc,InfoPointCode asc",
  217. PageNumber: 1,
  218. PageSize: 1000
  219. },
  220. type: 'Building'
  221. };
  222. getDataDictionary(params, res => {
  223. let first = {}
  224. //一级循环出来一级标签
  225. let list = res.Content.filter(i => (i.FirstName !== '工作历') && (i.FirstName !== '能耗信息') && (i.FirstName !== '人员信息'))
  226. list.map(item => {
  227. console.log(item.FirstName)
  228. if ((item.InputMode === 'D1' || item.InputMode === 'D2' || item.InputMode === 'E2' || item.InputMode === 'D1L') && item.DataSource != undefined) {
  229. item.options = JSON.parse(item.DataSource)
  230. if (item.options[0] && item.options[0].Content) {
  231. item.props = {
  232. value: 'Code',
  233. label: 'Name',
  234. children: 'Content',
  235. checkStrictly: true
  236. }
  237. }
  238. }
  239. if (first[item.FirstName] && first[item.FirstName].length) {
  240. } else {
  241. first[item.FirstName] = []
  242. }
  243. if (
  244. item.Path !== 'BuildingInfo.AreaInfo.AreaTree' &&
  245. item.Path !== 'DefaultQRCode' &&
  246. item.Path !== 'BuildQRCode'
  247. ) {
  248. first[item.FirstName].push({
  249. InfoPointName: item.InfoPointName,
  250. InfoPointCode: item.InfoPointCode,
  251. Visible: item.Visible,
  252. UnDisabled: item.UnDisabled,
  253. SecondName: item.SecondName ? item.SecondName : "",
  254. InputMode: item.InputMode,
  255. options: item.options,
  256. props:item.props,
  257. Unit: item.Unit,
  258. Path: item.Path
  259. })
  260. }
  261. })
  262. this.buildMessage = first
  263. })
  264. },
  265. //delete build ,根据id删除建筑信息
  266. delBuild() {
  267. this.delText = '建筑'
  268. this.delDialogVis = true;
  269. },
  270. //edit build
  271. editBuild() {
  272. this.buildTitle = '编辑建筑';
  273. this.handleSearchBuildKey()
  274. let list = this.currentBuildList.filter(i => i.BuildID === this.curBuildId)
  275. let obj = {}
  276. for (let i = 0; i < list.length; i++) {
  277. obj = list[i]
  278. }
  279. this.$refs.addBuildDialog.showDialog(obj);
  280. },
  281. handleFile(val,name) {
  282. },
  283. // handleBuild 获取建筑信息
  284. handleBuild(val) {
  285. let newform = tools.formatData(val)
  286. let Param = {
  287. Content: [newform]
  288. }
  289. if (newform.BuildID) {
  290. objectUpdateBuild(Param, res => {
  291. this.$message.success('更新成功')
  292. this.$refs.addBuildDialog.closeDialog()
  293. })
  294. } else {
  295. objectCreateBuild(Param, res => {
  296. this.$message.success('创建成功')
  297. this.$refs.addBuildDialog.closeDialog()
  298. })
  299. }
  300. setTimeout(() => {
  301. this.handleBuildQuery()
  302. this.init()
  303. })
  304. },
  305. //delete floor
  306. handleDelete(floor) {
  307. this.delText = "楼层";
  308. this.delDialogVis = true;
  309. this.curFloorId = floor.FloorID;
  310. },
  311. //确认删除弹窗关闭
  312. handleClose() {
  313. },
  314. addFloor() {
  315. this.curFloorId = "";
  316. this.$refs.addFloorDialog.showDialog();
  317. },
  318. // 获取列表
  319. getFloorTableData() {
  320. let floorParam = {
  321. Cascade: [{Name: "floorThroughList"}],
  322. Orders: "FloorSequenceID desc",
  323. PageNumber: this.page.pageNumber,
  324. PageSize: this.page.pageSize,
  325. Filters: `BuildID='${this.curBuildId}'`
  326. };
  327. floorQueryAndSign(floorParam, res => {
  328. this.tableData = res.Content;
  329. this.page.total = res.Total;
  330. this.alreadyRelatedModel = res.Content.map(t => {
  331. return t.ModelId
  332. }).filter(t => t);
  333. });
  334. },
  335. // 绑定图以后刷新
  336. bindRefresh() {
  337. this.init();
  338. },
  339. // 创建楼层成功-修改关系成功
  340. refresh() {
  341. this.getFloorTableData();
  342. },
  343. // 确认删除(删除建筑-楼层公用)
  344. confirmDel() {
  345. if (this.delText == "楼层") {
  346. let delParam = [{FloorID: this.curFloorId}];
  347. manageDeleteFloor(delParam, res => {
  348. this.$message.success("删除成功");
  349. this.delDialogVis = false;
  350. this.init();
  351. });
  352. } else {
  353. //todo
  354. // 删除建筑
  355. if (this.tableData && this.tableData.length) {
  356. this.$message.error("当前建筑中包含楼层,不可删除");
  357. this.delDialogVis = false;
  358. } else {
  359. let param = [{BuildId: this.curBuildId}];
  360. objectDeleteBuild(param, res => {
  361. setTimeout(() => {
  362. this.handleBuildQuery()
  363. this.init()
  364. })
  365. this.$message.success("删除成功");
  366. this.delDialogVis = false;
  367. })
  368. }
  369. }
  370. },
  371. // 修改楼层信息
  372. editFloorData(floor) {
  373. this.floorTitle = "编辑楼层信息";
  374. this.curFloorId = floor.FloorID;
  375. this.$refs.addFloorDialog.showDialog(floor);
  376. },
  377. // 修改楼层贯通关系
  378. changeConnection(row) {
  379. this.$refs.addConnectivity.showDialog();
  380. this.$refs.addConnectivity.floor = row;
  381. },
  382. // 查看平面图
  383. checkDrawImg(row, index) {
  384. if (3 == index) {
  385. this.$refs.checkGraphy.showDialog(row);
  386. this.modelId = "";
  387. } else {
  388. this.modelId = row.ModelId;
  389. let pa = {modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID};
  390. this.$router.push({name: "repetitionGraphy", query: pa});
  391. }
  392. },
  393. // 查询建筑信息
  394. handleBuildQuery() {
  395. let param = {
  396. projectId: this.projectId,
  397. Orders: "BuildLocalName asc",
  398. PageNumber: 1,
  399. PageSize: 500
  400. };
  401. objectQueryBuild(param, res => {
  402. this.currentBuildList = res.Content
  403. });
  404. },
  405. },
  406. watch: {
  407. projectId() {
  408. this.init();
  409. }
  410. }
  411. };
  412. </script>
  413. <style lang="less" scoped>
  414. #bd-fl-manage {
  415. overflow: hidden;
  416. height: 100%;
  417. position: relative;
  418. .el-row {
  419. height: 100%;
  420. .el-col-4 {
  421. width: 17%;
  422. }
  423. .el-col-20 {
  424. width: 82%;
  425. }
  426. & > div {
  427. float: left;
  428. height: 100%;
  429. overflow: hidden;
  430. background-color: #fff;
  431. box-sizing: border-box;
  432. border: 1px solid #dfe6ec;
  433. .action-box {
  434. padding: 10px;
  435. .el-button--small {
  436. padding: 10px 11px;
  437. }
  438. }
  439. }
  440. .l-list {
  441. width: 17%;
  442. overflow-y: auto;
  443. h4 {
  444. padding-left: 10px;
  445. border-top: 1px solid #d9d9d9;
  446. border-bottom: 1px solid #d9d9d9;
  447. background: #d9d9d9;
  448. color: #2b2b2b;
  449. line-height: 44px;
  450. }
  451. .build-list {
  452. line-height: 48px;
  453. .floor-item {
  454. white-space: nowrap;
  455. overflow: hidden;
  456. text-overflow: ellipsis;
  457. span {
  458. margin-left: 10px;
  459. }
  460. }
  461. .floor-item.active,
  462. .floor-item:hover {
  463. background-color: #f5f7fa;
  464. color: #000;
  465. }
  466. }
  467. }
  468. .r-table {
  469. width: 82%;
  470. margin-left: 1%;
  471. .table-box {
  472. height: calc(100% - 54px);
  473. margin-bottom: 8px;
  474. .iconfont {
  475. vertical-align: middle;
  476. }
  477. /deep/ .el-badge__content.is-fixed {
  478. transform: translateY(-6%) translateX(-100%);
  479. }
  480. p {
  481. cursor: pointer;
  482. }
  483. }
  484. }
  485. }
  486. }
  487. </style>