step3.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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 style="float:right;" @change="changeChecked" v-model="checked">只显示未标准化的原始点位</el-checkbox>
  7. </div>
  8. <div id="handsontableSteps1" class="middle_sty" v-loading="isLoading">
  9. <handsontable-component v-if="pages.total" @mouseDown="clickEdit" ref="handsontable"></handsontable-component>
  10. <div v-else class="center">
  11. <i class="icon-wushuju iconfont"></i> 暂无数据
  12. </div>
  13. </div>
  14. <div v-if="pages.total" class="right">
  15. <pagination :page="pages" @change="changePage"></pagination>
  16. </div>
  17. <own-dialog :width="'1200px'" :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="'1200px'" :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 { changeHeader, showTypes } from "@/utils/handsontable/delType"
  30. import { mapGetters, mapActions } from "vuex";
  31. import ownDialog from "@/components/el_pack/dialog"
  32. import dialogMain from "@/components/config_point/step3_point/dialog_main"
  33. import stepsMain from "@/components/config_point/step3_point/steps3_main"
  34. import { queryPointRela, getNoDealPoint } from "@/fetch/point_http"
  35. import step3Edit from '@/components/config_point/step3_edit/index'
  36. import pagination from "@/components/common/myPagination"
  37. export default {
  38. data() {
  39. return {
  40. checked: false,
  41. settings: {},
  42. isDialogShow: false,
  43. hot: null,
  44. isDataform: false,
  45. /************point3_step_edit*********************** */
  46. isEditDialogShow: false,
  47. editData: {}, //编辑数据
  48. pages: {
  49. size: 50,
  50. sizes: [10, 30, 50, 100, 150, 200],
  51. total: 0,
  52. currentPage: 0
  53. },
  54. isLoading: false,//loading
  55. }
  56. },
  57. computed: {
  58. ...mapGetters("project", [
  59. "datasourceId",
  60. "protocolType"
  61. ]),
  62. projectId () {
  63. return this.$store.getters['layout/projectId']
  64. }
  65. },
  66. created() {
  67. if (!this.protocolType) {
  68. this.$router.push({
  69. path: "/configPoint"
  70. })
  71. }
  72. },
  73. mounted() {
  74. this.getData()
  75. },
  76. methods: {
  77. //页面关闭
  78. close() {
  79. this.isDialogShow = false
  80. this.getData()
  81. },
  82. //只显示为标准化的点位标识
  83. changeChecked() {
  84. if (this.checked) {
  85. getNoDealPoint({
  86. type: this.protocolType,
  87. data: {
  88. DataSourceId: this.datasourceId
  89. }
  90. }, res => {
  91. let content = res.Content
  92. let settings = {
  93. data: content,
  94. colHeaders: changeHeader(headerArr),
  95. columns: showTypes(headerArr).map(item => {
  96. item.readOnly = true
  97. item.data = item.data
  98. return item
  99. }),
  100. rowHeights: 30,
  101. maxRows: res.Content.length
  102. }
  103. this.hot = this.$refs.handsontable.init(settings)
  104. this.pages.total = res.Total
  105. console.log(this.hot)
  106. })
  107. } else {
  108. this.getData()
  109. }
  110. },
  111. //页面显示num1为标准化对象标识,2为对应数据字典
  112. dialogShow(num) {
  113. if (num == 1) {
  114. this.isDataform = false
  115. } else if (num == 2) {
  116. this.isDataform = true
  117. }
  118. this.isDialogShow = true
  119. },
  120. //页面发生更改
  121. changePage() {
  122. this.getData()
  123. },
  124. /**
  125. * 表格点击事件
  126. * @param {当前条数据} rowData
  127. * @param {当前条} row
  128. *
  129. * down something
  130. */
  131. clickEdit(rowData, row) {
  132. let activeCell = this.hot.getActiveEditor()
  133. console.log(activeCell.prop)
  134. if (activeCell.prop == "Point.Infos.edit") {
  135. this.isEditDialogShow = true;
  136. this.editData = rowData;
  137. }
  138. if(activeCell.prop == "Infos.edit"){
  139. this.editData = {Point: rowData,RelationList: []};
  140. this.isEditDialogShow = true;
  141. }
  142. },
  143. closeEdit() {
  144. this.isEditDialogShow = false;
  145. this.getData()
  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. this.isLoading = true
  159. queryPointRela(param, res => {
  160. let content = res.Content.map(item => {
  161. if (item.RelationList.length) {
  162. item.Point.DataRuleType = item.RelationList[0].DataRuleType
  163. item.Point.PhysicalRelated = '';
  164. let tempArr = item.RelationList.map(t => {
  165. if(t.TypeCode == 'Eq' || t.TypeCode == 'Ec' || t.TypeCode == 'Sp'){
  166. //设备-部件-空间
  167. let str = `${t.Type}-${t.EquipmentType}-${t.InfomationPoint}`
  168. if(item.Point.PhysicalRelated.indexOf(str)>-1){
  169. return undefined
  170. }
  171. item.Point.PhysicalRelated += str
  172. return str;
  173. } else if(t.TypeCode == 'Sy'){
  174. //系统
  175. let str = `${t.Type}-${t.Specialty}-${t.System}-${t.InfomationPoint}`
  176. if(item.Point.PhysicalRelated.indexOf(str)>-1){
  177. return undefined
  178. }
  179. item.Point.PhysicalRelated += str
  180. return str
  181. } else {
  182. let str = `${t.Type}-${t.InfomationPoint}`
  183. if(item.Point.PhysicalRelated.indexOf(str)>-1){
  184. return undefined
  185. }
  186. item.Point.PhysicalRelated += str
  187. return str
  188. }
  189. }).filter(data => data)
  190. item.Point.PhysicalRelated = tempArr.join('/');
  191. }
  192. return item
  193. })
  194. settings = {
  195. data: content,
  196. colHeaders: changeHeader(headerArr),
  197. columns: showTypes(headerArr).map(item => {
  198. item.readOnly = true
  199. item.data = 'Point.' + item.data
  200. return item
  201. }),
  202. rowHeights: 30,
  203. maxRows: res.Content.length
  204. }
  205. this.pages.total = res.Total
  206. if (this.pages.total) {
  207. this.$nextTick(_ => {
  208. this.hot = this.$refs.handsontable.init(settings)
  209. })
  210. }
  211. this.isLoading = false
  212. })
  213. },
  214. //刷新数据
  215. refreshData() {
  216. this.getData()
  217. this.isEditDialogShow = false;
  218. }
  219. },
  220. components: {
  221. handsontableComponent,
  222. ownDialog,
  223. dialogMain,
  224. step3Edit,
  225. stepsMain,
  226. pagination
  227. }
  228. }
  229. </script>
  230. <style lang="scss" scoped>
  231. #handsonStep2 {
  232. flex: 1;
  233. display: flex;
  234. flex-flow: column;
  235. padding-bottom: 10px;
  236. .btns-view {
  237. height: 40px;
  238. line-height: 40px;
  239. margin-bottom: 10px;
  240. padding: 0 10px;
  241. }
  242. #handsontableSteps1 {
  243. flex: 1;
  244. overflow: hidden;
  245. position: relative;
  246. margin: 0 10px;
  247. }
  248. }
  249. </style>