step3.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <div id="handsonStep2">
  3. <div class="btns-view">
  4. <el-button type="primary" @click="dialogShow(1)">根据关键内容批量标准化设备标识</el-button>
  5. <el-button type="primary" @click="dialogShow(2)">根据关键内容批量对应数据字典</el-button>
  6. <el-checkbox style="float:right;" @change="changeChecked" v-model="checked">只显示未标准化得的原始点位</el-checkbox>
  7. </div>
  8. <div id="handsontableSteps1" v-if="pages.total">
  9. <handsontable-component @mouseDown="clickEdit" ref="handsontable"></handsontable-component>
  10. </div>
  11. <div v-else>
  12. 暂无数据
  13. </div>
  14. <!-- <div class="center">
  15. <pagination :page="pages" @change="changePage"></pagination>
  16. </div> -->
  17. <own-dialog :width="'1000px'" :title=" isDataform ? '根据关键内容批量对应数据字典' : '根据关键内容批量标准化设备标识' " :dialogVisible="isDialogShow" @cancel="close">
  18. <dialog-main v-if="!isDataform"></dialog-main>
  19. <steps-main v-if="isDataform"></steps-main>
  20. </own-dialog>
  21. <own-dialog :width="'1000px'" :dialogVisible="isEditDialogShow" @cancel="closeEdit">
  22. <step3-edit v-if="isEditDialogShow" :editData='editData' @refresh='refreshData'></step3-edit>
  23. </own-dialog>
  24. </div>
  25. </template>
  26. <script>
  27. import handsontableComponent from "@/components/common/handsontable"
  28. import headerArr from "@/utils/point_edit/steps3.js"
  29. import {
  30. changeHeader,
  31. showTypes
  32. } from "@/utils/handsontable/delType"
  33. import {
  34. mapGetters,
  35. mapActions
  36. } from "vuex";
  37. import ownDialog from "@/components/el_pack/dialog"
  38. import dialogMain from "@/components/config_point/step3_point/dialog_main"
  39. import stepsMain from "@/components/config_point/step3_point/steps3_main"
  40. import {
  41. queryPointRela,
  42. getNoDealPoint
  43. } from "@/fetch/point_http"
  44. import step3Edit from '@/components/config_point/step3_edit/index'
  45. import pagination from "@/components/common/myPagination"
  46. export default {
  47. data() {
  48. return {
  49. checked: false,
  50. settings: {},
  51. isDialogShow: false,
  52. hot: null,
  53. isDataform: false,
  54. /************point3_step_edit*********************** */
  55. isEditDialogShow: false,
  56. editData:{}, //编辑数据
  57. pages: {
  58. size: 10,
  59. sizes: [10, 30, 50, 100],
  60. total: 0,
  61. currentPage: 0
  62. },
  63. }
  64. },
  65. computed: {
  66. ...mapGetters("project", [
  67. "projectId",
  68. "datasourceId",
  69. "protocolType"
  70. ])
  71. },
  72. created() {
  73. if (!this.protocolType) {
  74. this.$router.push({
  75. path: "/configPoint"
  76. })
  77. }
  78. },
  79. mounted() {
  80. this.getData()
  81. },
  82. methods: {
  83. //页面关闭
  84. close() {
  85. this.isDialogShow = false
  86. },
  87. //只显示为标准化的点位标识
  88. changeChecked(){
  89. if(this.checked){
  90. getNoDealPoint({
  91. type: this.protocolType,
  92. data: {
  93. DataSourceId: this.datasourceId
  94. }
  95. },res => {
  96. let content = res.Content
  97. let settings = {
  98. data: content,
  99. colHeaders: changeHeader(headerArr),
  100. columns: showTypes(headerArr).map(item => {
  101. item.readOnly = true
  102. item.data = item.data
  103. return item
  104. }),
  105. rowHeights: 30,
  106. maxRows: res.Content.length
  107. }
  108. this.hot = this.$refs.handsontable.init(settings)
  109. this.pages.total = res.Total
  110. console.log(this.hot)
  111. })
  112. }else{
  113. this.getData()
  114. }
  115. },
  116. //页面显示num1为标准化设备标识,2为对应数据字典
  117. dialogShow(num) {
  118. if (num == 1) {
  119. this.isDataform = false
  120. } else if (num == 2) {
  121. this.isDataform = true
  122. }
  123. this.isDialogShow = true
  124. },
  125. //页面发生更改
  126. changePage() {
  127. this.getData()
  128. },
  129. /**
  130. * 表格点击事件
  131. * @param {当前条数据} rowData
  132. * @param {当前条} row
  133. *
  134. * down something
  135. */
  136. clickEdit(rowData,row){
  137. let activeCell = this.hot.getActiveEditor()
  138. console.log(activeCell.prop)
  139. if (activeCell.prop == "Point.Infos.edit") {
  140. this.isEditDialogShow = true;
  141. this.editData = rowData;
  142. }
  143. },
  144. closeEdit() {
  145. this.isEditDialogShow = false;
  146. },
  147. //初始化表格实例
  148. getData() {
  149. let width, param, settings
  150. param = {
  151. type: this.protocolType,
  152. data: {
  153. DataSourceId: this.datasourceId,
  154. // "PageNumber": this.pages.currentPage || 1,
  155. // "PageSize": this.pages.size,
  156. }
  157. }
  158. queryPointRela(param, res => {
  159. let content = res.Content.map(item => {
  160. if(item.RelationList.length){
  161. item.Point.DataRuleType = item.RelationList[0].DataRuleType
  162. item.Point.PhysicalRelated = item.RelationList[0].EquipmentType + '-' + item.RelationList[0].InfomationPoint
  163. }
  164. return item
  165. })
  166. settings = {
  167. data: content,
  168. colHeaders: changeHeader(headerArr),
  169. columns: showTypes(headerArr).map(item => {
  170. item.readOnly = true
  171. item.data = 'Point.' + item.data
  172. return item
  173. }),
  174. rowHeights: 30,
  175. maxRows: res.Content.length
  176. }
  177. this.pages.total = res.Total
  178. if(this.pages.total){
  179. this.$nextTick(_ => {
  180. this.hot = this.$refs.handsontable.init(settings)
  181. })
  182. }
  183. console.log(this.hot)
  184. })
  185. },
  186. //刷新数据
  187. refreshData() {
  188. this.getData()
  189. this.isEditDialogShow = false;
  190. }
  191. },
  192. components: {
  193. handsontableComponent,
  194. ownDialog,
  195. dialogMain,
  196. step3Edit,
  197. stepsMain,
  198. pagination
  199. }
  200. }
  201. </script>
  202. <style lang="scss" scoped>
  203. #handsonStep2 {
  204. flex: 1;
  205. display: flex;
  206. flex-flow:column;
  207. .btns-view {
  208. height: 40px;
  209. line-height: 40px;
  210. margin-bottom: 10px;
  211. }
  212. #handsontableSteps1 {
  213. flex: 1;
  214. overflow: hidden;
  215. position: relative;
  216. }
  217. }
  218. </style>