step2.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <template>
  2. <div id="handsonStep2">
  3. <div class="btns-view">
  4. <el-button style="width:164px">AI自动识别</el-button>
  5. <el-button @click="discern(1)">批量识别设备类型关键字</el-button>
  6. <el-button @click="discern(2)">批量识别设备参数关键字</el-button>
  7. <el-button style="width:164px" @click="examine">检查&微调</el-button>
  8. <div style="float:right;">
  9. <el-button @click="reset">刷新</el-button>
  10. <el-button @click="saveData">保存</el-button>
  11. </div>
  12. </div>
  13. <div id="handsontableSteps1" v-loading="isLoading">
  14. <handsontable-component v-if="!!pages.total" @delete="delePoint" @mouseDown="clickTable" @change="changeHand" ref="handsontable"></handsontable-component>
  15. <div v-else class="center">
  16. <i class="iconwushuju iconfont"></i> 暂无数据
  17. </div>
  18. </div>
  19. <div class="right">
  20. <pagination :page="pages" @change="changePage"></pagination>
  21. </div>
  22. <own-dialog :width="'60%'" :title="title" :dialogVisible="isDialogShow" @cancel="close">
  23. <find-keyword ref="findKeyword" :type="type" @change="changeHand"></find-keyword>
  24. </own-dialog>
  25. <own-dialog :width="'1000px'" :index="true" title="关键内容设别——检查&微调" :dialogVisible="examineDialog" @cancel="close">
  26. <!-- <find-keyword ref="findKeyword" :type="type"></find-keyword> -->
  27. <examine-main></examine-main>
  28. </own-dialog>
  29. <!-- <own-dialog :width="'1000px'" :index="true" title="关键内容设别——检查&微调" :dialogVisible="examineDialog" @cancel="close"> -->
  30. <!-- <find-keyword ref="findKeyword" :type="type"></find-keyword> -->
  31. <!-- <examine-main></examine-main>
  32. </own-dialog> -->
  33. <own-dialog :width="'500px'" :index="true" title="位置标签" :dialogVisible="localtionDialog" @cancel="localFalgChange">
  34. <localtion-falg :renderData="renderData" @changeTag="changeLoc"></localtion-falg>
  35. </own-dialog>
  36. </div>
  37. </template>
  38. <script>
  39. import handsontableComponent from "@/components/common/handsontable"
  40. import examineMain from "@/components/config_point/examine_main"
  41. import headerArr from "@/utils/point_edit/steps2.js"
  42. import localtionFalg from "@/components/config_point/location_flag"
  43. import {
  44. changeHeader,
  45. showTypes
  46. } from "@/utils/handsontable/delType"
  47. import ownDialog from "@/components/el_pack/dialog"
  48. import {
  49. mapGetters,
  50. mapActions
  51. } from "vuex";
  52. import {
  53. queryPoint,
  54. updatePoint,
  55. deletePoint
  56. } from "@/fetch/point_http"
  57. import findKeyword from "@/components/config_point/find_keyword"
  58. import pagination from "@/components/common/myPagination"
  59. export default {
  60. data() {
  61. return {
  62. checked: false,
  63. settings: {},
  64. isDialogShow: false,
  65. msg: "",
  66. hot: null,
  67. title: "",
  68. type: "",
  69. examineDialog: false,
  70. changeFlag: true,
  71. pages: {
  72. size: 10,
  73. sizes: [10, 30, 50, 100],
  74. total: 0,
  75. currentPage: 0
  76. },
  77. oldPage: {
  78. currentPage: 0,
  79. size: 10
  80. },
  81. localtionDialog: false,
  82. renderData: {},
  83. isLoading: false
  84. }
  85. },
  86. created() {
  87. if (!this.protocolType) {
  88. this.$router.push({
  89. path: "/configPoint"
  90. })
  91. }
  92. },
  93. mounted() {
  94. this.getData()
  95. },
  96. computed: {
  97. ...mapGetters("project", [
  98. "projectId",
  99. "datasourceId",
  100. "protocolType"
  101. ])
  102. },
  103. methods: {
  104. clickTable(info, row) {
  105. let activeCell = this.hot.getActiveEditor()
  106. this.renderData = info
  107. console.log(activeCell, 'activeCell')
  108. if (activeCell.prop == "LocationFlag") {
  109. this.localtionDialog = true
  110. }
  111. },
  112. changeLoc(val) {
  113. this.renderData.LocationFlag = val
  114. this.changeFlag = false
  115. },
  116. //修改提示
  117. changeHand(changeData, source) {
  118. if (!!changeData) {
  119. this.changeFlag = false
  120. }
  121. return false
  122. },
  123. //刷新
  124. reset() {
  125. console.log(this.changeFlag, "changeFlag")
  126. if (!this.changeFlag) {
  127. this.$confirm("表格数据尚未保存,确定刷新吗?").then(_ => {
  128. this.saveData()
  129. }).catch(_ => {
  130. this.pages.currentPage = this.oldPage.currentPage
  131. this.pages.size = this.oldPage.size
  132. this.getData()
  133. })
  134. } else {
  135. this.getData()
  136. }
  137. },
  138. //删除点位
  139. delePoint(delData) {
  140. let param = {
  141. data: delData.map(item => {
  142. return item.Id
  143. }),
  144. type: this.protocolType
  145. }
  146. console.log(param, 'param')
  147. this.$confirm('你确定要删除点位吗?').then(_ => {
  148. console.log(param, 'param')
  149. deletePoint(param, res => {
  150. this.$message.success("删除成功")
  151. this.getData()
  152. })
  153. }).catch(_ => {
  154. this.$message("取消删除")
  155. this.getData()
  156. })
  157. },
  158. //页面发生更改
  159. changePage() {
  160. if (!this.changeFlag) {
  161. //发生更改,提示是否保存
  162. this.$confirm('存在数据未保存, 是否继续?', '提示', {
  163. confirmButtonText: '确定',
  164. cancelButtonText: '取消',
  165. type: 'warning'
  166. }).then(() => {
  167. this.getData()
  168. }).catch(() => {
  169. this.pages.currentPage = this.oldPage.currentPage
  170. this.pages.size = this.oldPage.size
  171. return false
  172. });
  173. } else {
  174. this.getData()
  175. }
  176. },
  177. /**
  178. * @param num 代表着1类型2参数
  179. *
  180. */
  181. discern(num) {
  182. if (num == 1) {
  183. this.title = "关键内容识别——批量识别设备类型关键字"
  184. this.type = "type"
  185. } else if (num == 2) {
  186. this.title = "关键内容识别——批量识别设备参数关键字"
  187. this.type = "arguments"
  188. }
  189. this.isChangeData()
  190. this.isDialogShow = true
  191. this.$nextTick(() => {
  192. this.$refs.findKeyword.changeType(this.type)
  193. })
  194. },
  195. close() {
  196. this.isDialogShow = false
  197. this.examineDialog = false
  198. this.isChangeData()
  199. },
  200. localFalgChange() {
  201. this.localtionDialog = false
  202. },
  203. //判断是否修改,修改调用修改接口,否则调用获取最新数据
  204. isChangeData() {
  205. if (!this.changeFlag) {
  206. this.saveData(false)
  207. } else {
  208. this.getData()
  209. }
  210. },
  211. //点击检查按钮
  212. examine() {
  213. this.isChangeData()
  214. this.examineDialog = true
  215. },
  216. //保存
  217. saveData(falg) {
  218. if (!!this.hot) {
  219. console.log(this.hot.getSourceData())
  220. let data = this.hot.getSourceData(),
  221. changeData;
  222. changeData = data.map(item => {
  223. return {
  224. Id: item.Id,
  225. DatasourceId: item.DatasourceId,
  226. ProjectId: item.ProjectId,
  227. Description: item.Description || null,
  228. KeyEquipmentParameter: item.KeyEquipmentParameter || null,
  229. Remarks: item.Remarks || null,
  230. LocationFlag: item.LocationFlag || null,
  231. KeyEquipmentType: item.KeyEquipmentType || null
  232. }
  233. })
  234. updatePoint({
  235. data: {
  236. Content: changeData
  237. },
  238. type: this.protocolType
  239. }, res => {
  240. console.log(res)
  241. if (!falg) {
  242. this.$message.success("保存成功")
  243. }
  244. this.getData()
  245. })
  246. } else {
  247. this.$message.error("请确保存在数据")
  248. }
  249. },
  250. //发生更改
  251. changeHand(changeData, source) {
  252. console.log(changeData, source)
  253. if (!!changeData) {
  254. this.changeFlag = false
  255. }
  256. return false
  257. },
  258. //获取初始数据
  259. getData() {
  260. this.isLoading = true
  261. let width, param, settings
  262. width = (document.getElementById("app").clientWidth - 50) / headerArr.length
  263. param = {
  264. type: this.protocolType,
  265. data: {
  266. Filters: {
  267. DatasourceId: this.datasourceId,
  268. },
  269. "PageNumber": this.pages.currentPage || 1,
  270. "PageSize": this.pages.size,
  271. }
  272. }
  273. this.oldPage = {
  274. size: this.pages.size,
  275. currentPage: this.pages.currentPage
  276. }
  277. queryPoint(param, res => {
  278. console.log(res)
  279. settings = {
  280. data: res.Content,
  281. colHeaders: changeHeader(headerArr),
  282. columns: showTypes(headerArr),
  283. colWidths: width,
  284. rowHeights: 30,
  285. maxRows: res.Content.length,
  286. contextMenu: {
  287. items: {
  288. remove_row: {
  289. name: "删除点位"
  290. }
  291. }
  292. }
  293. }
  294. this.pages.total = res.Total
  295. this.isLoading = false
  296. if (!this.pages.total) {
  297. return false
  298. }
  299. this.$nextTick(_ => {
  300. this.hot = this.$refs.handsontable.init(settings)
  301. })
  302. console.log(this.hot)
  303. })
  304. },
  305. noSaveData() {
  306. return this.changeFlag
  307. }
  308. },
  309. components: {
  310. handsontableComponent,
  311. ownDialog,
  312. findKeyword,
  313. examineMain,
  314. pagination,
  315. localtionFalg
  316. }
  317. }
  318. </script>
  319. <style lang="scss" scoped>
  320. #handsonStep2 {
  321. flex: 1;
  322. display: flex;
  323. flex-flow: column;
  324. .btns-view {
  325. height: 40px;
  326. line-height: 40px;
  327. margin-bottom: 10px;
  328. padding: 0 10px;
  329. }
  330. #handsontableSteps1 {
  331. flex: 1;
  332. overflow: hidden;
  333. position: relative;
  334. margin: 0 10px;
  335. }
  336. }
  337. </style>