step3.vue 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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="'60%'" :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 ownDialog from "components/el_pack/dialog"
  24. import dialogMain from "components/config_point/dialog_main"
  25. export default {
  26. data() {
  27. return {
  28. checked: false,
  29. settings: {},
  30. isDialogShow: false,
  31. }
  32. },
  33. created() {},
  34. mounted() {
  35. this.getData()
  36. },
  37. methods: {
  38. //页面关闭
  39. close() {
  40. this.isDialogShow = false
  41. },
  42. //页面显示num1为标准化设备标识,2为对应数据字典
  43. dialogShow(num) {
  44. if (num == 1) {
  45. } else if (num == 2) {
  46. }
  47. this.isDialogShow = true
  48. },
  49. //初始化表格实例
  50. getData() {
  51. let width = (document.getElementById("app").clientWidth - 50) / headerArr.length
  52. let settings = {
  53. data: [{}],
  54. colHeaders: changeHeader(headerArr),
  55. columns: showTypes(headerArr),
  56. colWidths: width,
  57. rowHeights: 30
  58. }
  59. this.$refs.handsontable.init(settings)
  60. }
  61. },
  62. components: {
  63. handsontableComponent,
  64. ownDialog,
  65. dialogMain
  66. }
  67. }
  68. </script>
  69. <style lang="scss" scoped>
  70. #handsonStep2 {
  71. height: 100%;
  72. .btns-view {
  73. height: 50px;
  74. vertical-align: middle;
  75. }
  76. #handsontableSteps1 {
  77. height: calc(100% - 50px);
  78. overflow: hidden;
  79. position: relative;
  80. }
  81. }
  82. </style>