updatePointZone.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <div id="updatePoint">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <el-button size="small" style="float:right" @click="updateZ">更新</el-button>
  7. </div>
  8. <el-scrollbar style="height:calc(100% - 43px)">
  9. <div class="item">
  10. <p>将位置标签图片批量补充到业务空间:</p>
  11. <div v-for="item in zoneList" :key="item.objid" class="zone-item">
  12. <el-tooltip class="item" effect="light"
  13. :content="`${item.Building.BuildLocalName} / ${item.Floor.FloorLocalName} / ${item.DClassDef.Name} / ${item.RoomLocalName}`"
  14. placement="top">
  15. <p>{{item.RoomLocalName || item.RoomName}}</p>
  16. </el-tooltip>
  17. <i class="el-icon-delete" circle style="float:right;line-height:32px;padding: 0 9px 0 0;cursor: pointer;" size="mini"
  18. @click="deleteZone(item.RoomID)"></i>
  19. </div>
  20. <div class="zone-item" style="border:none;border-left:-4px;width:auto;">
  21. <el-cascader :props="zoneCascader" :show-all-levels="false" v-model="zoneCa" @change="changeCascader" filterable style="float:left;">
  22. </el-cascader>
  23. <el-button type="primary" icon="el-icon-plus" circle style="float:right;margin:2px 10px;" size="mini" @click="addZone"></el-button>
  24. </div>
  25. </div>
  26. <div class="item">
  27. <p>位置标签图片信息:</p>
  28. <locationPointMsg :pointObj="$route.params.item" ref="pointMsg"></locationPointMsg>
  29. </div>
  30. </el-scrollbar>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. import locationPointMsg from '@/views/data_admin/buildGraphy/locationPointMsg'
  36. import { queryDictionaryHead, zoneQueryByPoint, queryZone, updateZonePic } from '@/api/scan/request';
  37. import { mapGetters } from 'vuex'
  38. export default {
  39. data() {
  40. let that = this;
  41. return {
  42. zoneList: [],//业务空间列表
  43. pointItem: {},//点位标签对象
  44. zoneTypeList: [],//业务空间类型
  45. zoneCascader: {//业务空间忌廉器
  46. lazy: true,
  47. lazyLoad(node, resolve) {
  48. const { level } = node;
  49. that.getCascaderNode(level, node, resolve);
  50. }
  51. },
  52. newZoneObj: {},//当前新建业务空间
  53. zoneCa: []
  54. }
  55. },
  56. computed: {
  57. ...mapGetters("layout", ["projectId"])
  58. },
  59. components: {
  60. locationPointMsg
  61. },
  62. created() {
  63. this.pointItem = this.$route.params.item
  64. this.getSpaceList();
  65. },
  66. methods: {
  67. //创建
  68. updateZ() {
  69. let imgs = this.$refs.pointMsg.choImg.concat();
  70. imgs = imgs.map(item => ({
  71. Id: item.ObjectId,
  72. Key: item.Key,
  73. Name: item.Name,
  74. Type: item.Type
  75. }))
  76. if (imgs.length && this.zoneList.length) {
  77. let zones = this.zoneList.map(item => {
  78. if (item.Pic) {
  79. item.Pic = item.Pic.concat(imgs);
  80. }
  81. else {
  82. item.Pic = imgs;
  83. }
  84. return { RoomID: item.RoomID, Pic: item.Pic, ObjectType: item.ObjectType };
  85. })
  86. let param = {
  87. Content: zones
  88. }
  89. updateZonePic(param, res => {
  90. this.$message.success("更新成功");
  91. this.$refs.pointMsg.clearImg();
  92. })
  93. }
  94. else if (!this.$refs.pointMsg.choImg.length) {
  95. this.$message("请至少选择一张图片");
  96. }
  97. else {
  98. this.$message("请至少添加一个业务空间");
  99. }
  100. },
  101. //获取空间列表
  102. getSpaceList() {
  103. let pa = {
  104. X: this.pointItem.X,
  105. Y: this.pointItem.Y,
  106. data: {
  107. Filters: `buildingId = '${this.pointItem.BuildId}' and floorId = '${this.pointItem.FloorId}'`,
  108. "Cascade": [{ "Name": "floor" }, { "Name": "building" }, { "Name": "objectTypeO" }]
  109. }
  110. }
  111. zoneQueryByPoint(pa, res => {
  112. this.zoneList = res.Content;
  113. });
  114. },
  115. //级联node
  116. getCascaderNode(level, node, resolve) {
  117. let id = (level + 1) * 10;
  118. //建筑
  119. if (level == 0) {
  120. let nodes = this.$route.params.floorData.map(item => ({
  121. value: item.BuildID,
  122. label: item.BuildLocalName || item.BuildName,
  123. leaf: level >= 3
  124. }))
  125. resolve(nodes)
  126. }
  127. //楼层
  128. else if (level == 1) {
  129. let floors = this.$route.params.floorData.filter(item => { return item.BuildID == node.value })
  130. let nodes = floors[0].Floor.map(item => ({
  131. value: item.FloorID,
  132. label: item.FloorLocalName || item.FloorName,
  133. leaf: level >= 3
  134. }))
  135. resolve(nodes)
  136. }
  137. //空间类型
  138. else if (level == 2) {
  139. if (this.zoneTypeList && this.zoneTypeList.length) {
  140. resolve(this.zoneTypeList)
  141. }
  142. else {
  143. let pa = {
  144. Filters: `parentId='Space'`
  145. }
  146. queryDictionaryHead(pa, res => {
  147. this.zoneTypeList = res.Content.filter((item => { return item.Name != '元空间' })).map(item => ({
  148. value: item.Code,
  149. label: item.Name,
  150. leaf: level >= 3
  151. }))
  152. resolve(this.zoneTypeList)
  153. });
  154. }
  155. }
  156. //业务空间
  157. else {
  158. let pa = {
  159. zone: node.value,
  160. data: {
  161. "Filters": `buildingId='${node.parent.parent.value}';floorId='${node.parent.value}'`,
  162. "Orders": "createTime desc, RoomID asc",
  163. "PageNumber": 1,
  164. "PageSize": 999
  165. }
  166. }
  167. queryZone(pa, res => {
  168. let nodes = res.Content.map(item => {
  169. item.Building = { BuildLocalName: node.parent.parent.label };
  170. item.Floor = { FloorLocalName: node.parent.label };
  171. item.DClassDef = { Name: node.label };
  172. return {
  173. value: item,
  174. label: item.RoomLocalName || item.RoomName,
  175. leaf: level >= 3
  176. }
  177. })
  178. resolve(nodes)
  179. })
  180. }
  181. },
  182. //删除业务空间
  183. deleteZone(zoneid) {
  184. this.zoneList = this.zoneList.filter(item => { return item.RoomID != zoneid });
  185. },
  186. //添加业务空间
  187. addZone() {
  188. if (this.newZoneObj.RoomID && this.zoneList.findIndex((item) => (item.RoomID == this.newZoneObj.RoomID)) == -1) {
  189. this.zoneList.push(this.newZoneObj)
  190. }
  191. else if (!this.newZoneObj.RoomID) {
  192. this.$message("请选择业务空间后添加")
  193. }
  194. else {
  195. this.$message("已有业务空间,请重新选择");
  196. }
  197. this.zoneCa = [];
  198. this.newZoneObj = {}
  199. },
  200. //选择业务空间
  201. changeCascader(val) {
  202. this.newZoneObj = val[3]
  203. },
  204. //返回
  205. goBack() {
  206. this.$router.push({
  207. name: "buildGraphy",
  208. params: { nowBuildFloor: this.$route.params.nowBuildFloor }
  209. })
  210. }
  211. },
  212. watch: {
  213. projectId: {
  214. handler(val) {
  215. this.goBack();
  216. }
  217. }
  218. }
  219. }
  220. </script>
  221. <style lang="less" scoped>
  222. .condition {
  223. position: relative;
  224. padding: 10px 10px;
  225. display: flex;
  226. height: calc(100% - 22px);
  227. flex-direction: column;
  228. border: 1px solid #dfe6ec;
  229. background: #fff;
  230. .header {
  231. padding-bottom: 10px;
  232. border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  233. span {
  234. line-height: 33px;
  235. margin-left: 15px;
  236. }
  237. /deep/ .buildFloor {
  238. line-height: 32px;
  239. }
  240. }
  241. }
  242. /deep/ .el-scrollbar__wrap {
  243. overflow-x: hidden;
  244. }
  245. .item {
  246. padding: 10px 10px;
  247. label {
  248. display: inline-block;
  249. padding: 5px 10px;
  250. width: 130px;
  251. }
  252. }
  253. .zone-item {
  254. display: inline-block;
  255. position: relative;
  256. width: 245px;
  257. margin: 5px 15px 10px 0;
  258. border: 1px solid rgb(220, 223, 230);
  259. border-radius: 5px;
  260. }
  261. .zone-item p {
  262. width: 200px;
  263. float: left;
  264. height: 32px;
  265. overflow: hidden;
  266. padding-left: 15px;
  267. padding: 0 0 0 15px;
  268. }
  269. </style>