examine_main.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div>
  3. <select-one @check="typeCheck" :renderData="typeArr" infosKey="EquipmentType" name="原始点位描述中的设备类型关键字"></select-one>
  4. <select-one @check="paramCheck" :renderData="identifyArr" infosKey="ownMess" name="原始点位描述中设备参数关键字"></select-one>
  5. <div class="handson-view saga-border">
  6. <div v-if="hotData.length" class="h100">
  7. <div class="title-view">
  8. <el-input v-model="inputValue" placeholder="批量填充空白的值/单位说明" style="width:200px;"></el-input>
  9. <span class="w10"></span>
  10. <el-button @click="fullValue">批量填充值/单位说明</el-button>
  11. </div>
  12. <div class="handson-main">
  13. <handsontable-component ref="handsontable"></handsontable-component>
  14. </div>
  15. <div class="center">
  16. <el-button @click="saveData">保存</el-button>
  17. </div>
  18. </div>
  19. <div v-else class="center">
  20. <i class="iconwushuju iconfont"></i>
  21. 暂无数据
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import {
  28. mapGetters,
  29. mapActions
  30. } from "vuex";
  31. import {
  32. queryAllEqTypeList,
  33. queryAllEqParamList,
  34. queryPoint,
  35. updatePoint
  36. } from "@/fetch/point_http"
  37. import selectOne from "@/components/config_point/select_one"
  38. import handsontableComponent from "@/components/common/handsontable"
  39. export default {
  40. components: {
  41. selectOne,
  42. handsontableComponent
  43. },
  44. computed: {
  45. ...mapGetters("project", [
  46. "datasourceId",
  47. "protocolType"
  48. ]),
  49. projectId () {
  50. return this.$store.getters['layout/projectId']
  51. }
  52. },
  53. data() {
  54. return {
  55. typeArr: [],
  56. identifyArr: [],
  57. EquipmentType: "",
  58. EquipmentParameter: "",
  59. inputValue: "",
  60. header: ['原始点位描述', '值/单位说明', '*识别的设备类型关键字', '*识别的设备参数关键字'],
  61. type: [{
  62. data: 'Description',
  63. readOnly: true
  64. },
  65. {
  66. data: 'ValueDescription'
  67. },
  68. {
  69. data: 'KeyEquipmentType'
  70. },
  71. {
  72. data: 'KeyEquipmentParameter'
  73. }
  74. ],
  75. hot: "",
  76. hotData: []
  77. }
  78. },
  79. created() {
  80. this.getTypes()
  81. },
  82. mounted() {},
  83. methods: {
  84. //保存数据
  85. saveData(){
  86. let param = this.hot.getSourceData().map(item => {
  87. return {
  88. ValueDescription: item.ValueDescription || null,
  89. KeyEquipmentType: item.KeyEquipmentType || null,
  90. KeyEquipmentParameter: item.KeyEquipmentParameter || null,
  91. Id: item.Id,
  92. DatasourceId: item.DatasourceId
  93. }
  94. })
  95. console.log(param)
  96. updatePoint({
  97. data: {Content: param},
  98. type: this.protocolType
  99. },res => {
  100. console.log(res)
  101. this.$message.success("保存成功!")
  102. this.typeCheck()
  103. })
  104. },
  105. //填充值被点击
  106. fullValue(){
  107. if(!this.inputValue){
  108. return false
  109. }
  110. this.hotData.map(item => {
  111. //如果没有值
  112. if(!item.ValueDescription){
  113. item.ValueDescription = this.inputValue
  114. }
  115. })
  116. },
  117. //设备类型被点击
  118. typeCheck(item) {
  119. this.EquipmentType = item.EquipmentType == "空" ? "" : item.EquipmentType
  120. this.getParam()
  121. },
  122. //设备参数被点击
  123. paramCheck(item) {
  124. console.log(item, "设备参数")
  125. this.inputValue = ""
  126. if (!!item) {
  127. this.EquipmentParameter = (item.EquipmentParameter == "空" || !item.EquipmentParameter) ? null : item.EquipmentParameter
  128. this.queryPoint()
  129. } else {
  130. this.hotData = []
  131. return false
  132. }
  133. },
  134. //获取点位列表
  135. queryPoint() {
  136. console.log(this.EquipmentType, this.EquipmentParameter, "EquipmentParameter")
  137. let param = {
  138. data: {
  139. Filters: {
  140. DataSourceId: this.datasourceId,
  141. ProjectId: this.projectId,
  142. KeyEquipmentParameter: this.EquipmentParameter,
  143. KeyEquipmentType: this.EquipmentType,
  144. Used: true
  145. }
  146. },
  147. type: this.protocolType
  148. },
  149. width, settings
  150. console.log(param.data)
  151. queryPoint(param, res => {
  152. this.hotData = res.Content
  153. settings = {
  154. data: this.hotData,
  155. colHeaders: this.header,
  156. columns: this.type,
  157. rowHeights: 30,
  158. maxRows: res.Content.length
  159. }
  160. this.$nextTick(() => {
  161. this.hot = this.$refs.handsontable.init(settings)
  162. })
  163. console.log(this.hot)
  164. })
  165. },
  166. //获取原始点位描述中设备参数关键字
  167. getParam() {
  168. queryAllEqParamList({
  169. type: this.protocolType,
  170. data: {
  171. DataSourceId: this.datasourceId,
  172. ProjectId: this.projectId,
  173. KeyEquipmentType: this.EquipmentType
  174. }
  175. }, res => {
  176. this.identifyArr = res.Content.map(item => {
  177. if (!!item.EquipmentParameter) {
  178. item.ownMess = item.EquipmentParameter + "(涉及原始点位:" + item.PointCount + ")"
  179. } else {
  180. item.ownMess = "空" + "(涉及原始点位:" + item.PointCount + ")"
  181. }
  182. return item
  183. })
  184. console.log(this.identifyArr, "res")
  185. })
  186. },
  187. //获取原始点位描述中的设备类型关键字
  188. getTypes() {
  189. queryAllEqTypeList({
  190. type: this.protocolType,
  191. data: {
  192. DataSourceId: this.datasourceId,
  193. ProjectId: this.projectId
  194. }
  195. }, res => {
  196. // res.Content.unshift({EquipmentType: "空"})
  197. this.typeArr = res.Content
  198. console.log(this.typeArr)
  199. })
  200. },
  201. }
  202. }
  203. </script>
  204. <style lang="scss" scoped>
  205. .handson-view {
  206. height: 340px;
  207. width: 680px;
  208. float: right;
  209. overflow-y: auto;
  210. }
  211. .title-view {
  212. height: 50px;
  213. line-height: 50px;
  214. padding-left: 10px;
  215. }
  216. .w10 {
  217. width: 10px;
  218. display: inline-block;
  219. }
  220. .handson-main {
  221. height: calc(100% - 90px);
  222. width: 100%;
  223. }
  224. </style>