partsDieList.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <div id="cascaderMap">
  3. <span class="buildFloor" style="margin-right: 12px;">设备类</span>
  4. <el-select v-model="value" placeholder="请选择" :props="props" filterable :style="isWidth ? '' : 'width:160px;'" size="small" @change="changeVal">
  5. <el-option v-for="item in options" :key="item.code" :label="item.facility" :value="item.code"></el-option>
  6. </el-select>
  7. <!-- <el-cascader placeholder="请选择" :options="options" v-model="value" :props="props" filterable :style="isWidth ? '' : 'width:160px;'" size="small"
  8. @change="changeVal" change-on-select></el-cascader> -->
  9. </div>
  10. </template>
  11. <script>
  12. import { mapGetters } from 'vuex';
  13. import { getEqCode, getEquipBelongs, queryPartsDie } from "@/api/scan/request";
  14. export default {
  15. name: "getCode",
  16. props: {
  17. isWidth: {
  18. type: Boolean,
  19. default: true
  20. },
  21. Family: {
  22. type: String,
  23. default: '',
  24. }
  25. },
  26. computed: {
  27. ...mapGetters("layout", ["projectId"])
  28. },
  29. data() {
  30. return {
  31. value: "",
  32. options: [],
  33. props: {
  34. value: "code",
  35. label: "facility"
  36. },
  37. falg: true,
  38. content: []
  39. };
  40. },
  41. mounted() {
  42. if(this.Family != "") {
  43. this.getAllData()
  44. }
  45. },
  46. watch: {
  47. projectId() {
  48. this.value = '';
  49. this.getAllData()
  50. }
  51. // Family: {
  52. // handler: function (val) {
  53. // if(val != "") {
  54. // this.getAllData()
  55. // }
  56. // },
  57. // immediate: true
  58. // }
  59. },
  60. methods: {
  61. setValue(val) {
  62. if (val) {
  63. this.value = val
  64. }
  65. },
  66. //修改val
  67. changeVal(val) {
  68. let value = {}
  69. this.options.map(item => {
  70. if (item.code == val) {
  71. value = item
  72. }
  73. })
  74. this.value = val
  75. this.$emit("change", value)
  76. },
  77. //获取当前项目下的设备类型(只拿到编码-需要过滤)
  78. getData() {
  79. let param = {
  80. Distinct: true,
  81. PageNumber: 1,
  82. PageSize: 500,
  83. Projection: [
  84. "Category"
  85. ]
  86. }
  87. queryPartsDie(param, res => {
  88. this.content = res.Content
  89. this.filterForOptions()
  90. let val = this.options.length?this.options[0].code:""
  91. this.changeVal(val)
  92. })
  93. },
  94. //获取物理世界所有设备类型
  95. getAllData() {
  96. let param = {
  97. data: {
  98. Filters: `Family='${this.Family}'`,
  99. Distinct: true,
  100. Orders: "EquipName asc",
  101. PageNumber: 1,
  102. PageSize: 500,
  103. Projection: [
  104. "EquipCode", "EquipName"
  105. ]
  106. }
  107. }
  108. getEquipBelongs(param, res => {
  109. this.options = this.formatOptions(res.Content)
  110. this.getData()
  111. })
  112. },
  113. //格式化options数据
  114. formatOptions(arr) {
  115. let data = [];
  116. arr.map(t => {
  117. let temp = {};
  118. temp.code = t.EquipCode;
  119. temp.facility = t.EquipName;
  120. data.push(temp)
  121. })
  122. return data;
  123. },
  124. //过滤
  125. filterForOptions() {
  126. this.options = this.options.filter(item => {
  127. if (this.content.find(value => value.Category == item.code)) {
  128. return item
  129. }
  130. })
  131. }
  132. }
  133. };
  134. </script>
  135. <style lang="less" scoped>
  136. #cascaderMap {
  137. float: left;
  138. margin-left: 10px;
  139. .buildFloor {
  140. color: #999999;
  141. font-size: 14px;
  142. }
  143. }
  144. </style>