equipmentAttr.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <div class='equipment-attr'>
  3. <p>编辑设备</p>
  4. <div class='row'>
  5. <div class='row-tit'>名称</div>
  6. <a-input v-model='equipmentName' style='width: 180px' @change='changeEquipmentName' />
  7. </div>
  8. <!-- 工程信息化对象列表 -->
  9. <div class='row'>
  10. <div class='row-tit'>工程信息化对象列表</div>
  11. </div>
  12. <div class='row' v-for='(item,index) in AttachObjectIds' :key='index'>
  13. <a-input class='input' v-model='AttachObjectIds[index]' type='small' @change='changeAttachObjectIds(index)' />
  14. </div>
  15. <!-- 添加工程信息化对象列表 -->
  16. <div class='row'>
  17. <span>操作工程信息化对象</span>
  18. <a-button @click='handleAttach(1)' size='small' type='primary'>添加</a-button>
  19. <a-button @click='handleAttach(-1)' size='small' v-show='AttachObjectIds.length' type='danger'>删除</a-button>
  20. </div>
  21. <a-divider />
  22. <!-- 信息点 -->
  23. <div class='row'>
  24. <div class='row-tit'>信息点</div>
  25. </div>
  26. <!-- 信息点 信息 -->
  27. <div class='contain' v-for='(item,index) in info' :key='index'>
  28. <div class='row'>
  29. <div>信息点名称:</div>
  30. <a-input v-model='info[index].Name' class='input' @change='changeInfoName(index)' />
  31. </div>
  32. <div class='row'>
  33. <div>信息点Code:</div>
  34. <a-input v-model='info[index].Code' class='input' @change='changeInfoName(index)' />
  35. </div>
  36. <div class='row'>
  37. <div class='row-tit'>字号</div>
  38. <div class='grid-content'>
  39. <a-input-number v-model='info[index].FontSize' @change='changeInfoName(index)' :min='1' :max='100' style='width: 128px' />
  40. </div>
  41. <div class='color-choice'>
  42. <swatches v-model='info[index].Color' popover-x='left' @close='changeInfoName(index)' />
  43. </div>
  44. </div>
  45. </div>
  46. <!-- 添加信息点 信息 -->
  47. <div class='row'>
  48. <a-button @click='addInfo' type='primary'>添加信息点</a-button>
  49. <a-button @click='delInfo' v-show='info.length' type='danger'>删除信息点</a-button>
  50. </div>
  51. <!-- 键盘操作提示 -->
  52. <KeyTips />
  53. </div>
  54. </template>
  55. <script>
  56. import bus from '@/bus'
  57. import { log } from 'util'
  58. import Swatches from 'vue-swatches'
  59. import { cloneDeep } from 'lodash'
  60. import KeyTips from './keyTips'
  61. export default {
  62. name: 'equipmentAttr',
  63. props: {
  64. focusItemList: {
  65. type: Object,
  66. default() {
  67. return {}
  68. },
  69. },
  70. },
  71. components: { Swatches, KeyTips },
  72. data() {
  73. return {
  74. equipmentName: '',
  75. equipmentData: {},
  76. InfoList: [], //保存存入的InfoList
  77. info: [], //修改 info
  78. AttachObjectIds: [], //工程信息化对象 ID 列表
  79. }
  80. },
  81. beforeMount() {},
  82. created() {
  83. this.init()
  84. },
  85. mounted() {},
  86. methods: {
  87. /**
  88. * @description 添加,删除 工程信息化对象, baseEditer.vue bus事务中做对应处理
  89. * @param { Number } flag -1:删除 1:添加
  90. */
  91. handleAttach(flag) {
  92. switch (flag) {
  93. case -1:
  94. bus.$emit('deleteAttachObjectIds')
  95. break
  96. default:
  97. bus.$emit('addAttachObjectIds')
  98. break
  99. }
  100. this.init()
  101. },
  102. /**
  103. * @description
  104. */
  105. addInfo() {
  106. bus.$emit('addEquipmentInfo')
  107. this.init()
  108. },
  109. delInfo() {
  110. bus.$emit('deleteEquipmentInfo')
  111. this.init()
  112. },
  113. init() {
  114. // 设置设备名称
  115. window.equipmentData = this.focusItemList.itemList[0].toData()
  116. this.equipmentData = this.focusItemList.itemList[0].toData()
  117. this.equipmentName = this.equipmentData.Name
  118. this.InfoList = cloneDeep(this.equipmentData.InfoList)
  119. this.AttachObjectIds = cloneDeep(this.equipmentData.AttachObjectIds || [])
  120. this.info = []
  121. this.InfoList.map((item) => {
  122. let { Name, FontSize, Color, Code } = item
  123. // this.info.push(item.Name)
  124. this.info.push({ Name, FontSize, Color, Code })
  125. })
  126. // console.log(this.equipmentData)
  127. },
  128. // 更改设备名称
  129. changeEquipmentName() {
  130. bus.$emit('changeEquipmentName', this.equipmentName)
  131. },
  132. // 更改 工程信息化对象列表
  133. changeAttachObjectIds(index) {
  134. let ID = this.AttachObjectIds[index]
  135. bus.$emit('changeEqAttachObjectIds', { index, ID })
  136. },
  137. // 更改信息点名称
  138. changeInfoName(index) {
  139. let info = this.info[index]
  140. let { Name, FontSize, Color, Code } = info
  141. bus.$emit('changeInfoName', { index, Name, FontSize, Color, Code })
  142. },
  143. },
  144. }
  145. </script>
  146. <style lang='less' scoped>
  147. .equipment-attr {
  148. width: 100%;
  149. // height: 500px;
  150. height: calc(100% - 150px);
  151. padding: 12px 16px;
  152. box-sizing: border-box;
  153. overflow-y: scroll;
  154. // background-color: lightblue;
  155. .contain {
  156. margin: 10px 0;
  157. }
  158. .row {
  159. width: 100%;
  160. display: flex;
  161. justify-content: space-between;
  162. align-items: center;
  163. margin-top: 12px;
  164. .color-choice {
  165. & /deep/ .vue-swatches__trigger {
  166. width: 26px !important;
  167. height: 26px !important;
  168. border-radius: 0px !important;
  169. }
  170. }
  171. .row-tit {
  172. color: #1f2429;
  173. font-size: 14px;
  174. }
  175. .input {
  176. width: 150px;
  177. }
  178. }
  179. .grid {
  180. margin: 10px 15px;
  181. .grid-title {
  182. font-size: 12px;
  183. color: #8d9399;
  184. }
  185. }
  186. .grid-content {
  187. // margin-top: 10px;
  188. position: relative;
  189. }
  190. }
  191. </style>