dialog_main.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <!--steps3的左侧-->
  2. <template>
  3. <div class="steps3-dialog-main">
  4. <select-one @check="typeCheck" :renderData="typeArr" :isSelected="true" isCheckInfo="EquipmentMarkStandardized" infosKey="EquipmentType" :name="'原始点位描述中识别的设备类型'"></select-one>
  5. <select-one @check="paramCheck" :renderData="identifyArr" infosKey="ownMess" :name="'已标准化的设备标识'"></select-one>
  6. <div class="own-collape">
  7. <ident-collape v-if="!isNull" ref="ident" @saved="resetTwo" :renderData="identDataArr"></ident-collape>
  8. <div v-else class="h100">
  9. <div class="own-table-view">
  10. <handsontable-component ref="handsontable"></handsontable-component>
  11. <div class="center">
  12. <el-button type="primary" @click="saveData">保存</el-button>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. import selectOne from "@/components/config_point/select_one"
  21. import {
  22. getStandType,
  23. queryPoint,
  24. updatePoint,
  25. getStandParam,
  26. getNullofParam
  27. } from "@/fetch/point_http"
  28. import tempCollape from "./3_temps"
  29. import identCollape from "./3_identify"
  30. import {
  31. mapGetters,
  32. mapActions
  33. } from "vuex";
  34. import handsontableComponent from "@/components/common/handsontable"
  35. export default {
  36. name: "updateParam",
  37. data() {
  38. return {
  39. activeName: '1',
  40. typeArr: [],
  41. identifyArr: [],
  42. KeyEquipmentType: "",
  43. identDataArr: [],
  44. isNull: false,
  45. paramData: {},
  46. Typs: {}
  47. }
  48. },
  49. computed: {
  50. ...mapGetters("project", [
  51. "projectId",
  52. "datasourceId",
  53. "protocolType"
  54. ])
  55. },
  56. created() {
  57. this.getData()
  58. },
  59. mounted() {},
  60. methods: {
  61. getData() {
  62. getStandType({
  63. data: {
  64. DataSourceId: this.datasourceId
  65. },
  66. type: this.protocolType
  67. }, res => {
  68. this.typeArr = res.Content
  69. })
  70. },
  71. resetTwo() {
  72. console.log("触发回调")
  73. this.getData()
  74. // this.getParamList(this.Typs)
  75. },
  76. typeCheck(item) {
  77. console.log(item, "item")
  78. this.getParamList(item)
  79. },
  80. paramCheck(param) {
  81. this.paramData = param
  82. if (!!param.EquipmentMark && param.EquipmentMark == "空") {
  83. //空查询分组信息
  84. getNullofParam({
  85. data: {
  86. DataSourceId: this.datasourceId,
  87. KeyEquipmentType: this.KeyEquipmentType
  88. },
  89. type: this.protocolType
  90. }, res => {
  91. console.log(res)
  92. this.isNull = false
  93. this.identDataArr = res.Content
  94. })
  95. } else {
  96. //不是空的情况查询点位列表
  97. console.log(param)
  98. queryPoint({
  99. data: {
  100. Filters: {
  101. equipmentMark: param.EquipmentMark,
  102. KeyEquipmentType: param.EquipmentType,
  103. Used: true
  104. },
  105. PageNumber: 1,
  106. PageSize: 100
  107. },
  108. type: this.protocolType
  109. }, res => {
  110. this.isNull = true
  111. this.identDataArr = res.Content
  112. let headers = {
  113. "modbus-tcp": [{
  114. InfoPointName: "*slave_id",
  115. InfoPointCode: "SlaveId",
  116. InputMode: "B1",
  117. Visible: true,
  118. FirstTag: ""
  119. },
  120. {
  121. InfoPointName: "*registers_address ",
  122. InfoPointCode: "RegistersAddress",
  123. InputMode: "B1",
  124. Visible: true,
  125. FirstTag: ""
  126. },
  127. {
  128. InfoPointName: "*registers_quality",
  129. InfoPointCode: "RegistersQuality",
  130. InputMode: "B1",
  131. Visible: true,
  132. FirstTag: ""
  133. },
  134. {
  135. InfoPointName: "*convert_type",
  136. InfoPointCode: "ConvertType",
  137. InputMode: "select",
  138. DataSource: [{
  139. Code: "1",
  140. Name: "位"
  141. },
  142. {
  143. Code: "2",
  144. Name: "单字"
  145. }, {
  146. Code: "3",
  147. Name: "双字"
  148. }, {
  149. Code: "4",
  150. Name: "四字"
  151. }
  152. ],
  153. Visible: true,
  154. FirstTag: ""
  155. },
  156. {
  157. InfoPointName: "*翻转规则",
  158. InfoPointCode: "RevertRule",
  159. InputMode: "B1",
  160. Visible: true,
  161. FirstTag: ""
  162. }
  163. ],
  164. "bacnet-ip": [{
  165. InfoPointName: "*device_id",
  166. InfoPointCode: "DeviceId",
  167. InputMode: "B1",
  168. Visible: true,
  169. FirstTag: ""
  170. },
  171. {
  172. InfoPointName: "*instance_number",
  173. InfoPointCode: "InstanceNumber",
  174. InputMode: "B1",
  175. Visible: true,
  176. FirstTag: ""
  177. },
  178. {
  179. InfoPointName: "*data_type",
  180. InfoPointCode: "DataType",
  181. DataSource: [{
  182. Code: "analogInput",
  183. Name: "analogInput"
  184. },
  185. {
  186. Code: "analogOutput",
  187. Name: "analogOutput"
  188. },
  189. {
  190. Code: "analogValue",
  191. Name: "analogValue"
  192. },
  193. {
  194. Code: "binaryInput",
  195. Name: "binaryInput"
  196. },
  197. {
  198. Code: "binaryOutput",
  199. Name: "binaryOutput"
  200. },
  201. {
  202. Code: "binaryValue",
  203. Name: "binaryValue"
  204. },
  205. {
  206. Code: "multiStateInput",
  207. Name: "multiStateInput"
  208. },
  209. {
  210. Code: "multiStateOutput",
  211. Name: "multiStateOutput"
  212. },
  213. {
  214. Code: "multiStateValue",
  215. Name: "multiStateValue"
  216. }
  217. ],
  218. InputMode: "select",
  219. Visible: true,
  220. FirstTag: ""
  221. }
  222. ],
  223. "opc": [{
  224. InfoPointName: "*item",
  225. InfoPointCode: "Item",
  226. InputMode: "B1",
  227. Visible: true,
  228. FirstTag: ""
  229. }],
  230. "knx": [{
  231. InfoPointName: "*group_address",
  232. InfoPointCode: "GroupAddress",
  233. InputMode: "B1",
  234. Visible: true,
  235. FirstTag: ""
  236. }],
  237. "mqtt": [{
  238. InfoPointName: "*topic",
  239. InfoPointCode: "Topic",
  240. InputMode: "B1",
  241. Visible: true,
  242. FirstTag: ""
  243. }],
  244. "amqp": [{
  245. InfoPointName: "*exchange",
  246. InfoPointCode: "Exchange",
  247. InputMode: "B1",
  248. Visible: true,
  249. FirstTag: ""
  250. },
  251. {
  252. InfoPointName: "*type",
  253. InfoPointCode: "Type",
  254. InputMode: "B1",
  255. Visible: true,
  256. FirstTag: ""
  257. },
  258. {
  259. InfoPointName: "*routing_key ",
  260. InfoPointCode: "RoutingKey",
  261. InputMode: "B1",
  262. Visible: true,
  263. FirstTag: ""
  264. }
  265. ]
  266. }
  267. let allData = this.identDataArr,
  268. data = {
  269. data: allData,
  270. colHeaders: [],
  271. columns: [],
  272. maxRows: allData.length,
  273. }
  274. headers[this.protocolType].map(item => {
  275. data.columns.push({
  276. data: item.InfoPointCode,
  277. readOnly: true,
  278. })
  279. data.colHeaders.push(item.InfoPointName)
  280. })
  281. data.columns.splice(0, 0, {
  282. data: 'Description',
  283. readOnly: true
  284. })
  285. data.columns.splice(0, 0, {
  286. data: 'EquipmentMark'
  287. })
  288. data.colHeaders.splice(0, 0, '原始点位描述')
  289. data.colHeaders.splice(0, 0, '设备标识')
  290. data.columns.push({
  291. data: 'LocationFlag',
  292. readOnly: true
  293. })
  294. data.columns.push({
  295. data: 'Remarks',
  296. readOnly: true
  297. })
  298. data.colHeaders.push('位置标签')
  299. data.colHeaders.push('备注')
  300. this.$nextTick(_ => {
  301. this.$refs.handsontable.init(data)
  302. })
  303. })
  304. }
  305. },
  306. saveData() {
  307. console.log(this.identDataArr, 222)
  308. let data = this.identDataArr.map(item => {
  309. return {
  310. EquipmentMark: !!item.EquipmentMark ? item.EquipmentMark : null,
  311. Id: item.Id,
  312. }
  313. })
  314. updatePoint({
  315. data: {
  316. Content: data
  317. },
  318. type: this.protocolType
  319. }, res => {
  320. this.$message.success("保存成功")
  321. this.resetTwo()
  322. })
  323. },
  324. //通过type获取param的list
  325. getParamList(item) {
  326. this.Typs = item
  327. console.log(item)
  328. this.KeyEquipmentType = item.EquipmentType
  329. getStandParam({
  330. data: {
  331. DataSourceId: this.datasourceId,
  332. KeyEquipmentType: item.EquipmentType
  333. },
  334. type: this.protocolType
  335. }, res => {
  336. console.log(res, "res")
  337. this.identifyArr = res.Content.map(item => {
  338. item.ownMess = item.EquipmentMark + '(涉及原始点位:' + item.PointCount + ')'
  339. return item
  340. })
  341. })
  342. }
  343. },
  344. components: {
  345. selectOne,
  346. handsontableComponent,
  347. tempCollape,
  348. identCollape
  349. }
  350. }
  351. </script>
  352. <style lang="scss" scoped>
  353. .steps3-dialog-main {
  354. height: 400px;
  355. .own-table-view {
  356. height: calc(100% - 50px);
  357. }
  358. .own-collape {
  359. border: 1px solid #ccc;
  360. float: right;
  361. width: calc(100% - 490px);
  362. height: 340px;
  363. position: relative;
  364. }
  365. }
  366. </style>