updatePointZone.vue 8.1 KB

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