step3.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <div id="handsonStep2">
  3. <div class="btns-view">
  4. <el-button @click="dialogShow(1)">根据关键内容批量标准化设备标识</el-button>
  5. <el-button @click="dialogShow(2)">根据关键内容批量对应数据字典</el-button>
  6. <el-checkbox v-model="checked">只显示未标准化得的原始点位</el-checkbox>
  7. </div>
  8. <div id="handsontableSteps1">
  9. <handsontable-component ref="handsontable"></handsontable-component>
  10. </div>
  11. <own-dialog :width="'1000px'" :dialogVisible="isDialogShow" @cancel="close">
  12. <dialog-main></dialog-main>
  13. </own-dialog>
  14. </div>
  15. </template>
  16. <script>
  17. import handsontableComponent from "components/common/handsontable"
  18. import headerArr from "utils/point_edit/steps3.js"
  19. import {
  20. changeHeader,
  21. showTypes
  22. } from "utils/handsontable/delType"
  23. import {
  24. mapGetters,
  25. mapActions
  26. } from "vuex";
  27. import ownDialog from "components/el_pack/dialog"
  28. import dialogMain from "components/config_point/dialog_main"
  29. import {
  30. queryPoint
  31. } from "fetch/point_http"
  32. export default {
  33. data() {
  34. return {
  35. checked: false,
  36. settings: {},
  37. isDialogShow: false,
  38. hot: null
  39. }
  40. },
  41. computed: {
  42. ...mapGetters("project", [
  43. "projectId",
  44. "datasourceId",
  45. "protocolType"
  46. ])
  47. },
  48. created() {
  49. if (!this.protocolType) {
  50. this.$router.push({
  51. path: "/configPoint"
  52. })
  53. }
  54. },
  55. mounted() {
  56. this.getData()
  57. },
  58. methods: {
  59. //页面关闭
  60. close() {
  61. this.isDialogShow = false
  62. },
  63. //页面显示num1为标准化设备标识,2为对应数据字典
  64. dialogShow(num) {
  65. if (num == 1) {
  66. } else if (num == 2) {
  67. }
  68. this.isDialogShow = true
  69. },
  70. //初始化表格实例
  71. getData() {
  72. let width, param, settings
  73. width = (document.getElementById("app").clientWidth - 50) / headerArr.length
  74. param = {
  75. type: this.protocolType,
  76. data: {
  77. Filters: {
  78. Id: this.datasourceId,
  79. },
  80. "PageNumber": 1,
  81. "PageSize": 50,
  82. }
  83. }
  84. queryPoint(param, res => {
  85. console.log(res)
  86. settings = {
  87. data: res.Content,
  88. colHeaders: changeHeader(headerArr),
  89. columns: showTypes(headerArr),
  90. colWidths: width,
  91. rowHeights: 30,
  92. maxRows: res.Content.length
  93. }
  94. this.hot = this.$refs.handsontable.init(settings)
  95. console.log(this.hot)
  96. })
  97. }
  98. },
  99. components: {
  100. handsontableComponent,
  101. ownDialog,
  102. dialogMain
  103. }
  104. }
  105. </script>
  106. <style lang="scss" scoped>
  107. #handsonStep2 {
  108. height: 100%;
  109. .btns-view {
  110. height: 50px;
  111. vertical-align: middle;
  112. }
  113. #handsontableSteps1 {
  114. height: calc(100% - 50px);
  115. overflow: hidden;
  116. position: relative;
  117. }
  118. }
  119. </style>