updatePointZone.vue 8.0 KB

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