3_temps.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
  1. <template>
  2. <div class="temp-point-view">
  3. <el-steps :active="activeName" align-center>
  4. <el-step title="步骤1" description="确定与数据字典中信息点对应"></el-step>
  5. <el-step title="步骤2" description="确定值得处理方式"></el-step>
  6. <el-step title="步骤3" description="确认并维护涉及到得原始点位对应得对象标识"></el-step>
  7. </el-steps>
  8. <div class="collapse-item" v-show="activeName == 0">
  9. <el-form class="form" :rules="rules" ref="form" :model="form1" label-width="120px">
  10. <el-form-item label="对应数据字典" prop="dict">
  11. <dictionary-cas @change="changeDictionaryCas" ref="dictionaryCas"></dictionary-cas>
  12. </el-form-item>
  13. </el-form>
  14. <div class="flex-around">
  15. <div class="point-despoint">
  16. <p class="center">原始点位说明</p>
  17. <p class="p10">{{pointDes}}</p>
  18. </div>
  19. <div class="point-despoint">
  20. <p class="center">数据字典值说明</p>
  21. <p class="content-view p10">{{delDataSource(unitObj.DataSource)}}</p>
  22. </div>
  23. </div>
  24. <div class="center">
  25. <el-button @click="next">下一步</el-button>
  26. </div>
  27. </div>
  28. <div class="collapse-item" v-if="activeName == 1">
  29. <div class="flex-around">
  30. <div class="point-despoint">
  31. <p class="center">原始点位说明</p>
  32. <p class="p10">{{pointDes}}</p>
  33. </div>
  34. <div class="point-despoint">
  35. <p class="center">数据字典值说明</p>
  36. <p class="content-view p10">{{delDataSource(unitObj.DataSource)}}</p>
  37. </div>
  38. </div>
  39. <el-form class="form" :rules="rules" ref="form2" :model="form2" label-width="140px">
  40. <el-form-item label='值处理方式' prop='DataRuleType'>
  41. <el-select v-model='form2.DataRuleType' placeholder='请选择'>
  42. <el-option v-for='item in handleTypeArr' :key='item.value' :label='item.label' :value='item.value'></el-option>
  43. </el-select>
  44. </el-form-item>
  45. <!-- components -->
  46. <div ref='noHandle' v-if='form2.DataRuleType == "无需处理,直接使用"'></div>
  47. <auto-handle :devFlag="false" ref='autoHandle' v-else-if='form2.DataRuleType == "需自动单位转换"' :unitObj='unitObj'></auto-handle>
  48. <enum-handle :devFlag="false" ref='enumHandle' v-else-if='form2.DataRuleType == "需按设置枚举转换"'></enum-handle>
  49. <formula-handle :devFlag="false" ref='formulaHandle' v-else-if='form2.DataRuleType == "需按公式转换"'></formula-handle>
  50. <!-- <split-handle :devFlag="false" ref='splitHandle' v-else-if='form2.DataRuleType == "需按拆分枚举转换"'></split-handle> -->
  51. </el-form>
  52. <div class="center">
  53. <el-button @click="undo">上一步</el-button>
  54. <el-button @click="next">下一步</el-button>
  55. </div>
  56. </div>
  57. <div class="collapse-item" v-if="activeName == 2">
  58. <div v-if="renderData.length" style="height:258px;">
  59. <handsontable-component ref="handsontable" @change="changeTable"></handsontable-component>
  60. </div>
  61. <div v-if="!renderData.length" class="center" style="padding: 50px 0;box-sizing:border-box;">
  62. <i class="icon-wushuju iconfont"></i> 暂无数据
  63. </div>
  64. <div v-if="pages.total>pages.size" class="right">
  65. <pagination :page="pages" @change="changePage"></pagination>
  66. </div>
  67. <div class="center">
  68. <el-button @click="undo">上一步</el-button>
  69. <el-button v-show="renderData.length" @click="save">保存</el-button>
  70. </div>
  71. </div>
  72. </div>
  73. </template>
  74. <script>
  75. //components
  76. import noHandle from '@/components/config_point/step3_edit/no_handle'
  77. import autoHandle from '@/components/config_point/step3_edit/auto_handle'
  78. import enumHandle from '@/components/config_point/step3_edit/enum_handle'
  79. import formulaHandle from '@/components/config_point/step3_edit/formula_handle'
  80. import splitHandle from '@/components/config_point/step3_edit/split_handle'
  81. import handsontableComponent from "@/components/common/handsontable"
  82. import dictionaryCas from '@/components/config_point/dictionaryCascader'
  83. import pagination from "@/components/common/myPagination"
  84. import handsonUtils from "@/utils/hasontableUtils"
  85. import {
  86. groupCreatePointRelation
  87. } from "@/api/scan/request";
  88. import {
  89. mapGetters,
  90. mapActions
  91. } from "vuex";
  92. import {
  93. getEquipmentAll,
  94. getQueryProperty
  95. } from '@/fetch/data_plat'
  96. import {
  97. updatePoint,
  98. batchCreate,
  99. queryDescription
  100. } from '@/fetch/point_http'
  101. export default {
  102. name: "tempsThree",
  103. computed: {
  104. ...mapGetters("project", [
  105. "datasourceId",
  106. "protocolType"
  107. ]),
  108. projectId() {
  109. return this.$store.getters['layout/projectId']
  110. }
  111. },
  112. props: {
  113. renderData: {
  114. type: Array,
  115. default: function () {
  116. return []
  117. }
  118. },
  119. pages: Object,
  120. queryParam: Object
  121. },
  122. data() {
  123. return {
  124. activeName: 0,
  125. form1: {
  126. dict: 1
  127. },
  128. options: [],
  129. dataDict: {}, //数据字典
  130. infoDict: {}, //信息点字典
  131. InfomationPoint: null, //信息点
  132. unitObj: {}, //传给自动单位转换的obj
  133. handleTypeArr: [{
  134. label: '无需处理,直接使用',
  135. value: '无需处理,直接使用'
  136. },
  137. {
  138. label: '需自动单位转换',
  139. value: '需自动单位转换'
  140. },
  141. {
  142. label: '需按设置枚举转换',
  143. value: '需按设置枚举转换'
  144. },
  145. {
  146. label: '需按公式转换',
  147. value: '需按公式转换'
  148. },
  149. // {
  150. // label: '需按拆分枚举转换',
  151. // value: '需按拆分枚举转换'
  152. // }
  153. ],
  154. dealType: {}, //处理方式
  155. form2: {
  156. ValueDescription: '',
  157. DataRuleType: '无需处理,直接使用'
  158. },
  159. rules: {
  160. DataRuleType: [{
  161. required: true,
  162. message: '请选择值处理方式',
  163. trigger: 'change'
  164. }],
  165. dict: [{ required: true }]
  166. },
  167. pointDes: ""
  168. }
  169. },
  170. created() { },
  171. mounted() {
  172. this.init()
  173. },
  174. components: {
  175. noHandle,
  176. autoHandle,
  177. enumHandle,
  178. formulaHandle,
  179. splitHandle,
  180. handsontableComponent,
  181. dictionaryCas,
  182. pagination
  183. },
  184. methods: {
  185. getMain(param, pagechange) {
  186. if (!pagechange) {
  187. this.activeName = 0
  188. this.dealType = {}
  189. this.form1 = {
  190. dict: 1
  191. }
  192. this.$refs.dictionaryCas.setCascaderVal([])
  193. this.form2 = {
  194. ValueDescription: '',
  195. DataRuleType: '无需处理,直接使用'
  196. }
  197. this.unitObj = {}
  198. }
  199. let params = {
  200. data: {
  201. DataSourceId: this.datasourceId,
  202. KeyEquipmentParameter: param.EquipmentParameter,
  203. KeyEquipmentType: param.EquipmentType
  204. },
  205. type: this.protocolType
  206. }
  207. queryDescription(params, res => {
  208. this.pointDes = !!res.Content ? res.Content.join("、") : "--"
  209. })
  210. },
  211. //保存
  212. save() {
  213. // let data = this.hot.getSourceData()
  214. // let params = data.map(item => {
  215. // let obj = Object.assign({}, {
  216. // DataSourceId: this.datasourceId,
  217. // PointId: item.Id,
  218. // EquipmentMark: item.EquipmentMark
  219. // })
  220. // return Object.assign(obj, this.dealType)
  221. // }),
  222. // sameFalg = false,
  223. // magFalg = false;
  224. // params.map((item, index) => {
  225. // if (!item.EquipmentMark) {
  226. // magFalg = true
  227. // }
  228. // params.map((child, childIndex) => {
  229. // if (childIndex != index && child.EquipmentMark == item.EquipmentMark) {
  230. // sameFalg = true
  231. // }
  232. // })
  233. // })
  234. // if (sameFalg) {
  235. // this.confirm("点位中存在对象标识相同的点位,确认保存吗?", params)
  236. // } else {
  237. // this.createParam(params)
  238. // }
  239. let pa = Object.assign({
  240. DataSourceId: this.queryParam.DataSourceId,
  241. KeyEquipmentParameter: this.queryParam.EquipmentParameter,
  242. KeyEquipmentType: this.queryParam.EquipmentType,
  243. }, this.dealType);
  244. groupCreatePointRelation(pa, res => {
  245. this.$message.success("处理成功")
  246. this.$emit("changed")
  247. })
  248. },
  249. confirm(assage, params) {
  250. this.$confirm(assage, { type: 'warning' }).then(_ => {
  251. this.createParam(params)
  252. }).catch(_ => { })
  253. },
  254. createParam(params) {
  255. let updateParams = {
  256. data: {
  257. Content: []
  258. },
  259. type: this.protocolType
  260. }
  261. params.map((item) => {
  262. updateParams.data.Content.push({
  263. Id: item.PointId,
  264. EquipmentMark: item.EquipmentMark
  265. })
  266. })
  267. updatePoint(updateParams, data => {
  268. batchCreate(params, res => {
  269. this.$message.success("处理成功")
  270. this.$emit("changed")
  271. })
  272. })
  273. },
  274. undo() {
  275. this.activeName -= 1
  276. },
  277. errMsg() {
  278. this.$message({
  279. message: '有必填项未填',
  280. type: 'warning'
  281. })
  282. },
  283. next() {
  284. var that = this;
  285. if (this.activeName == 0) {
  286. this.$refs.dictionaryCas.validate(valid => {
  287. if (valid) {
  288. this.activeName += 1
  289. } else {
  290. this.errMsg()
  291. }
  292. })
  293. } else if (this.activeName == 1) {
  294. this.$refs.form2.validate(valid => {
  295. if (valid) {
  296. var flag = this.form2.DataRuleType
  297. var isNext = true;
  298. switch (flag) {
  299. case '无需处理,直接使用':
  300. this.saveForm(this.form2, {})
  301. break
  302. case '需自动单位转换':
  303. this.$refs.autoHandle.getForm(autoHandle => {
  304. if (autoHandle) {
  305. this.saveForm(this.form2, autoHandle)
  306. } else {
  307. isNext = false
  308. this.errMsg()
  309. }
  310. })
  311. break
  312. case '需按设置枚举转换':
  313. this.$refs.enumHandle.getForm(enumHandle => {
  314. if (enumHandle) {
  315. this.saveForm(this.form2, enumHandle)
  316. } else {
  317. isNext = false
  318. this.errMsg()
  319. }
  320. })
  321. break
  322. case '需按公式转换':
  323. this.$refs.formulaHandle.getForm(formulaHandle => {
  324. if (formulaHandle) {
  325. this.saveForm(this.form2, formulaHandle)
  326. } else {
  327. isNext = false
  328. this.errMsg()
  329. }
  330. })
  331. break
  332. // case '需按拆分枚举转换':
  333. // this.$refs.splitHandle.getForm(splitHandle => {
  334. // if (splitHandle) {
  335. // this.saveForm(this.form2, splitHandle)
  336. // } else {
  337. // isNext = false
  338. // this.errMsg()
  339. // }
  340. // })
  341. // break
  342. }
  343. if (isNext) {
  344. this.activeName += 1
  345. let setting = {
  346. data: this.renderData,
  347. maxRows: 1000,
  348. colHeaders: ['对象标识', '原始点位描述', '位置标签', '备注'],
  349. columns: [{
  350. data: 'EquipmentMark'
  351. },
  352. {
  353. data: 'Description',
  354. readOnly: true
  355. },
  356. {
  357. data: 'LocationFlag',
  358. readOnly: true
  359. },
  360. {
  361. data: 'Remarks',
  362. readOnly: true
  363. }
  364. ]
  365. }
  366. if (this.renderData.length) {
  367. this.$nextTick(_ => {
  368. this.hot = this.$refs.handsontable.init(setting)
  369. })
  370. }
  371. }
  372. } else {
  373. this.errMsg()
  374. return false
  375. }
  376. })
  377. }
  378. },
  379. saveForm(basic, other) {
  380. let type = basic.DataRuleType
  381. let basicParams = {
  382. InfomationPointCode: this.dictionaryData[this.dictionaryData.length - 1], //信息点code
  383. InfomationPoint: this.dictionaryNames[this.dictionaryNames.length - 1], //信息点名称
  384. DataRuleType: basic.DataRuleType, //值处理方式
  385. Type: this.dictionaryNames[0], //一级分类名称
  386. TypeCode: this.dictionaryData[0], //一级分类code
  387. }
  388. if (this.dictionaryData.length == 3) {
  389. //设备-部件-空间
  390. basicParams.EquipmentTypeCode = this.dictionaryData[1]
  391. basicParams.EquipmentType = this.dictionaryNames[1]
  392. } else if (this.dictionaryData.length == 4) { //专业系统
  393. basicParams.SpecialtyCode = this.dictionaryData[1]
  394. basicParams.Specialty = this.dictionaryNames[1]
  395. basicParams.SystemCode = this.dictionaryData[2]
  396. basicParams.System = this.dictionaryNames[2]
  397. basicParams.EquipmentTypeCode = basicParams.SystemCode //为了配置从动参取值存储
  398. basicParams.EquipmentType = basicParams.System
  399. }
  400. let otherParams = {}
  401. switch (type) {
  402. case '无需处理,直接使用':
  403. otherParams = {
  404. // EquipmentMark: other.EquipmentMark
  405. }
  406. break
  407. case '需自动单位转换':
  408. let DataRuleContent1 = JSON.stringify([{
  409. seq: 1,
  410. ruletype: 'type1',
  411. content: [{
  412. from: other.unit[0] + '-' + other.unit[1],
  413. to: this.unitObj.unit
  414. }]
  415. }])
  416. otherParams = {
  417. DataRuleContent: DataRuleContent1,
  418. // EquipmentMark: other.EquipmentMark
  419. }
  420. break
  421. case '需按设置枚举转换':
  422. let DataRuleContent2 = other.pointArr.length ?
  423. JSON.stringify([{
  424. seq: 1,
  425. ruletype: 'type2',
  426. content: other.pointArr
  427. }]) :
  428. undefined
  429. otherParams = {
  430. // EquipmentMark: other.EquipmentMark,
  431. DataRuleContent: DataRuleContent2
  432. }
  433. break
  434. case '需按公式转换':
  435. let subRule = other.from ? {
  436. seq: 1,
  437. ruletype: 'type4',
  438. content: [{
  439. from: other.from,
  440. to: other.to
  441. }]
  442. } :
  443. undefined
  444. let extractRule = {
  445. seq: 2,
  446. ruletype: 'type5',
  447. content: other.extract ? [{
  448. extract: 'number'
  449. }] : []
  450. }
  451. let countRule = other.mark ? {
  452. seq: 3,
  453. ruletype: 'type6',
  454. content: [{
  455. calculationtype: other.mark,
  456. value: other.markValue
  457. }]
  458. } :
  459. undefined
  460. let DataRuleContent3 = []
  461. if (subRule) {
  462. DataRuleContent3.push(subRule)
  463. }
  464. DataRuleContent3.push(extractRule)
  465. if (countRule) {
  466. DataRuleContent3.push(countRule)
  467. }
  468. DataRuleContent3 = DataRuleContent3.length ? JSON.stringify(DataRuleContent3) : undefined
  469. otherParams = {
  470. // EquipmentMark: other.EquipmentMark,
  471. DataRuleContent: DataRuleContent3
  472. }
  473. break
  474. case '需拆分处理':
  475. let SplitPoints = other.devArr.length ? other.devArr : undefined
  476. let DataRuleContent4 = undefined
  477. var enum5 = null
  478. if (other.tranfVal) {
  479. enum5 = {
  480. seq: 2,
  481. ruletype: 'type2',
  482. content: other.pointArr
  483. }
  484. } else {
  485. enum5 = {
  486. seq: 2,
  487. ruletype: 'type2',
  488. content: []
  489. }
  490. }
  491. SplitPoints.forEach(ele => {
  492. let cutStr = {
  493. seq: 1,
  494. ruletype: 'type4',
  495. content: [{
  496. from: ele.SplitStart,
  497. to: ele.SplitEnd
  498. }]
  499. }
  500. ele.DataRuleContent = JSON.stringify([cutStr, enum5])
  501. })
  502. otherParams = {
  503. SplitPoints: SplitPoints
  504. }
  505. break
  506. }
  507. this.dealType = Object.assign(basicParams, otherParams)
  508. // this.create(params)
  509. },
  510. validateDict(rule, value, cb) {
  511. if (value.length < 4) {
  512. cb(new Error('请选到第四级(可能本对象没有信息点)'))
  513. } else {
  514. cb()
  515. }
  516. },
  517. handleItemChange(val) {
  518. if (val.length == 3) {
  519. let params = {
  520. type: val[2]
  521. }
  522. getQueryProperty(params, res => {
  523. if (res.Result == 'success') {
  524. let data = res.Content
  525. let arr = data
  526. .filter(item => {
  527. return item.inputMode == 'L' || item.inputMode == 'M'
  528. })
  529. .map(item => {
  530. return {
  531. code: item.infoPointCode,
  532. name: item.infoPointName
  533. }
  534. })
  535. this.infoDict = {}
  536. data.forEach(item => {
  537. this.infoDict[item.infoPointCode] = item
  538. })
  539. this.optionObj = {}
  540. this.getOptionItem(this.options, val[2])
  541. if (arr.length) {
  542. this.optionObj.content = arr
  543. } else {
  544. this.optionObj.content = undefined
  545. }
  546. }
  547. })
  548. }
  549. },
  550. getOptionItem(arr, code) {
  551. for (var i = 0; i < arr.length; i++) {
  552. if (arr[i].code == code) {
  553. this.optionObj = arr[i]
  554. }
  555. if (arr[i].content && arr[i].content.length > 0) {
  556. this.getOptionItem(arr[i].content, code)
  557. } else {
  558. this.$set(arr, 'content', [])
  559. }
  560. }
  561. },
  562. getEqAll() {
  563. let params = {
  564. format: true
  565. }
  566. getEquipmentAll(params, res => {
  567. if (res.Result == 'success') {
  568. this.options = res.Content
  569. this.getDataDict(this.options)
  570. }
  571. })
  572. },
  573. //缓存数据字典
  574. getDataDict(arr) {
  575. for (var i = 0; i < arr.length; i++) {
  576. this.dataDict[arr[i].code] = arr[i]
  577. if (arr[i].content && arr[i].content.length > 0) {
  578. this.getDataDict(arr[i].content)
  579. } else {
  580. this.$set(arr[i], 'content', [])
  581. }
  582. }
  583. },
  584. init() {
  585. //获取所有的设备
  586. this.getEqAll()
  587. },
  588. //处理函数
  589. delDataSource(val) {
  590. if (!val) {
  591. return '--'
  592. }
  593. val = JSON.parse(val)
  594. let str = ''
  595. val.forEach(el => {
  596. str += el.Code + '.' + el.Name + ' '
  597. })
  598. return str
  599. },
  600. //对应数据字典变化
  601. changeDictionaryCas({ val, labels }) {
  602. this.dictionaryData = val;
  603. this.dictionaryNames = labels
  604. this.infoDict = this.$refs.dictionaryCas.pointDataSource
  605. this.unitObj = this.infoDict[val[val.length - 1]]
  606. this.InfomationPoint = this.unitObj.InfoPointName || ''
  607. },
  608. //分页发生更改
  609. changePage() {
  610. this.$emit('changePage', this.queryParam);
  611. },
  612. // 修改table
  613. changeTable(changeData, source) {
  614. console.log(source)
  615. if (source == 'edit' || source == 'Autofill.fill') {
  616. let trimmedArr = this.trimmedRows();
  617. let param = handsonUtils.getParam(changeData, source, this.hot, trimmedArr);
  618. let updateParams = {
  619. data: {
  620. Content: []
  621. },
  622. type: this.protocolType
  623. }
  624. updateParams.data.Content = param.map(t => {
  625. return {
  626. Id: t.Id,
  627. EquipmentMark: t.EquipmentMark
  628. }
  629. })
  630. console.log(updateParams)
  631. updatePoint(updateParams, data => {
  632. this.$message.success("修改成功")
  633. })
  634. }
  635. },
  636. //获取被筛选掉的行号
  637. trimmedRows() {
  638. var plugin = this.hot.getPlugin("trimRows").trimmedRows;
  639. let dataLength = this.renderData.length;
  640. let dataArr = new Array();
  641. for (let i = 0; i < dataLength; i++) {
  642. dataArr.push(i);
  643. }
  644. if (plugin.length <= 0) {
  645. dataArr = undefined;
  646. } else {
  647. dataArr = this.array_diff(dataArr, plugin);
  648. }
  649. return dataArr || [];
  650. },
  651. //去除数组中相同的元素
  652. array_diff(a, b) {
  653. for (var i = 0; i < b.length; i++) {
  654. for (var j = 0; j < a.length; j++) {
  655. if (a[j] == b[i]) {
  656. a.splice(j, 1);
  657. j = j - 1;
  658. }
  659. }
  660. }
  661. return a;
  662. },
  663. },
  664. watch: {
  665. 'renderData': {
  666. handler(n, o) {
  667. if (n.length && this.hot) {
  668. this.hot.loadData(n);
  669. console.log('load')
  670. }
  671. },
  672. immediate: true,
  673. deep: true
  674. }
  675. }
  676. }
  677. </script>
  678. <style lang="scss" scoped>
  679. .temp-point-view {
  680. padding: 10px;
  681. box-sizing: border-box;
  682. .el-steps {
  683. margin-bottom: 10px;
  684. }
  685. .flex-around {
  686. display: flex;
  687. justify-content: space-around;
  688. margin-bottom: 5px;
  689. width: 100%;
  690. overflow: hidden;
  691. .point-despoint {
  692. width: 240px;
  693. border: 1px solid #dcdfe6;
  694. height: 190px;
  695. margin-bottom: 10px;
  696. .content-view {
  697. padding: 5px;
  698. box-sizing: border-box;
  699. }
  700. }
  701. }
  702. .collapse-item {
  703. height: 290px;
  704. overflow-y: auto;
  705. }
  706. }
  707. </style>