3_temps.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  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-if="activeName == 0">
  9. <el-form class="form" :rules="rules" ref="form" :model="form1" label-width="120px">
  10. <el-form-item label="对应数据字典" prop="dict" :rules="[{ required: true, message: '请输入对应数据字典', trigger: 'change' },{ validator: validateDict, trigger: ['blur', 'change'] }]">
  11. <el-cascader style="width: 100%;" :options="options" v-model="form1.dict" @change="handleChange" :props="props" filterable @active-item-change="handleItemChange"></el-cascader>
  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"></handsontable-component>
  60. </div>
  61. <div v-if="!renderData.length" class="center" style="padding: 50px 0;box-sizing:border-box;">
  62. <i class="iconwushuju iconfont"></i> 暂无数据
  63. </div>
  64. <div class="center">
  65. <el-button @click="undo">上一步</el-button>
  66. <el-button v-show="renderData.length" @click="save">保存</el-button>
  67. </div>
  68. </div>
  69. </div>
  70. </template>
  71. <script>
  72. //components
  73. import noHandle from '@/components/config_point/step3_edit/no_handle'
  74. import autoHandle from '@/components/config_point/step3_edit/auto_handle'
  75. import enumHandle from '@/components/config_point/step3_edit/enum_handle'
  76. import formulaHandle from '@/components/config_point/step3_edit/formula_handle'
  77. import splitHandle from '@/components/config_point/step3_edit/split_handle'
  78. import handsontableComponent from "@/components/common/handsontable"
  79. import {
  80. mapGetters,
  81. mapActions
  82. } from "vuex";
  83. import {
  84. getEquipmentAll,
  85. getQueryProperty
  86. } from '@/fetch/data_plat'
  87. import {
  88. updatePoint,
  89. batchCreate,
  90. queryDescription
  91. } from '@/fetch/point_http'
  92. export default {
  93. name: "tempsThree",
  94. computed: {
  95. ...mapGetters("project", [
  96. "projectId",
  97. "datasourceId",
  98. "protocolType"
  99. ])
  100. },
  101. props: {
  102. renderData: {
  103. type: Array,
  104. default: function() {
  105. return []
  106. }
  107. }
  108. },
  109. data() {
  110. return {
  111. activeName: 0,
  112. form1: {
  113. dict: []
  114. },
  115. options: [],
  116. dataDict: {}, //数据字典
  117. props: {
  118. value: 'code',
  119. label: 'name',
  120. children: 'content'
  121. },
  122. infoDict: {}, //信息点字典
  123. InfomationPoint: null, //信息点
  124. unitObj: {}, //传给自动单位转换的obj
  125. handleTypeArr: [{
  126. label: '无需处理,直接使用',
  127. value: '无需处理,直接使用'
  128. },
  129. {
  130. label: '需自动单位转换',
  131. value: '需自动单位转换'
  132. },
  133. {
  134. label: '需按设置枚举转换',
  135. value: '需按设置枚举转换'
  136. },
  137. {
  138. label: '需按公式转换',
  139. value: '需按公式转换'
  140. },
  141. // {
  142. // label: '需按拆分枚举转换',
  143. // value: '需按拆分枚举转换'
  144. // }
  145. ],
  146. dealType: {}, //处理方式
  147. form2: {
  148. ValueDescription: '',
  149. DataRuleType: '无需处理,直接使用'
  150. },
  151. rules: {
  152. DataRuleType: [{
  153. required: true,
  154. message: '请选择值处理方式',
  155. trigger: 'change'
  156. }]
  157. },
  158. pointDes: ""
  159. }
  160. },
  161. created() {},
  162. mounted() {
  163. this.init()
  164. console.log(this.renderData)
  165. },
  166. components: {
  167. noHandle,
  168. autoHandle,
  169. enumHandle,
  170. formulaHandle,
  171. splitHandle,
  172. handsontableComponent
  173. },
  174. methods: {
  175. getMain(param) {
  176. debugger
  177. this.activeName = 0
  178. this.dealType = {}
  179. this.form1 = {
  180. dict: []
  181. }
  182. this.form2 = {
  183. ValueDescription: '',
  184. DataRuleType: '无需处理,直接使用'
  185. }
  186. this.unitObj = {}
  187. let params = {
  188. data: {
  189. DataSourceId: this.datasourceId,
  190. KeyEquipmentParameter: param.EquipmentParameter,
  191. KeyEquipmentType: param.EquipmentType
  192. },
  193. type: this.protocolType
  194. }
  195. console.log(params, 'params')
  196. queryDescription(params, res => {
  197. debugger
  198. console.log(res)
  199. this.pointDes = !!res.Content ? res.Content.join("、") : "--"
  200. })
  201. },
  202. //保存
  203. save() {
  204. let data = this.hot.getSourceData()
  205. console.log(data, ' data')
  206. let params = data.map(item => {
  207. console.log(item.EquipmentMark,'EquipmentMark')
  208. let obj = Object.assign({}, {
  209. DataSourceId: this.datasourceId,
  210. PointId: item.Id,
  211. EquipmentMark: item.EquipmentMark
  212. })
  213. return Object.assign(obj,this.dealType)
  214. }),
  215. sameFalg = false,
  216. magFalg = false;
  217. console.log(params,'params',this.dealType)
  218. params.map((item, index) => {
  219. if (!item.EquipmentMark) {
  220. magFalg = true
  221. }
  222. params.map((child, childIndex) => {
  223. console.log(childIndex != index,child.EquipmentMark,item.EquipmentMark,childIndex,index,item,child)
  224. if (childIndex != index && child.EquipmentMark == item.EquipmentMark) {
  225. sameFalg = true
  226. }
  227. })
  228. })
  229. if (sameFalg) {
  230. this.confirm("点位中存在设备标识相同的点位,确认保存吗?", params)
  231. } else {
  232. this.createParam(params)
  233. }
  234. console.log(params)
  235. },
  236. confirm(assage, params) {
  237. this.$confirm(assage,{type: 'warning'}).then(_ => {
  238. this.createParam(params)
  239. }).catch(_ => {})
  240. },
  241. createParam(params) {
  242. let updateParams = {
  243. data: {
  244. Content:[]
  245. },
  246. type: this.protocolType
  247. }
  248. params.map((item) =>{
  249. updateParams.data.Content.push({
  250. Id: item.PointId,
  251. EquipmentMark: item.EquipmentMark
  252. })
  253. })
  254. updatePoint(updateParams, data => {
  255. batchCreate(params, res => {
  256. this.$message.success("处理成功")
  257. this.$emit("changed")
  258. })
  259. })
  260. },
  261. undo() {
  262. this.activeName -= 1
  263. },
  264. errMsg() {
  265. this.$message({
  266. message: '有必填项未填',
  267. type: 'warning'
  268. })
  269. },
  270. next() {
  271. console.log(this.$refs,'next')
  272. var that = this;
  273. if (this.activeName == 0) {
  274. this.$refs.form.validate((isOk, obj) => {
  275. if (isOk) {
  276. this.form2 = Object.assign(this.form2, this.form1)
  277. this.activeName += 1
  278. } else {
  279. this.errMsg()
  280. }
  281. })
  282. } else if (this.activeName == 1) {
  283. this.$refs['form2'].validate(valid => {
  284. if (valid) {
  285. var flag = this.form2.DataRuleType
  286. var isNext = true;
  287. console.log('***************fugy******************')
  288. console.log(flag)
  289. switch (flag) {
  290. case '无需处理,直接使用':
  291. // console.log(this.$refs)
  292. // this.$refs.noHandle.getForm(noHandle => {
  293. // if (noHandle) {
  294. this.saveForm(this.form2, {})
  295. // } else {
  296. // isNext = false
  297. // this.errMsg()
  298. // }
  299. // })
  300. break
  301. case '需自动单位转换':
  302. this.$refs.autoHandle.getForm(autoHandle => {
  303. if (autoHandle) {
  304. this.saveForm(this.form2, autoHandle)
  305. } else {
  306. isNext = false
  307. this.errMsg()
  308. }
  309. })
  310. break
  311. case '需按设置枚举转换':
  312. this.$refs.enumHandle.getForm(enumHandle => {
  313. if (enumHandle) {
  314. this.saveForm(this.form2, enumHandle)
  315. } else {
  316. isNext = false
  317. this.errMsg()
  318. }
  319. })
  320. break
  321. case '需按公式转换':
  322. console.log('*(&*^&*^*^%*^&*')
  323. this.$refs.formulaHandle.getForm(formulaHandle => {
  324. console.log(formulaHandle)
  325. if (formulaHandle) {
  326. this.saveForm(this.form2, formulaHandle)
  327. } else {
  328. isNext = false
  329. this.errMsg()
  330. }
  331. })
  332. break
  333. // case '需按拆分枚举转换':
  334. // this.$refs.splitHandle.getForm(splitHandle => {
  335. // if (splitHandle) {
  336. // this.saveForm(this.form2, splitHandle)
  337. // } else {
  338. // isNext = false
  339. // this.errMsg()
  340. // }
  341. // })
  342. // break
  343. }
  344. if(isNext) {
  345. this.activeName += 1
  346. let setting = {
  347. data: this.renderData,
  348. maxRows: this.renderData.length,
  349. colHeaders: ['设备标识', '原始点位描述', '位置标签', '备注'],
  350. columns: [{
  351. data: 'EquipmentMark'
  352. },
  353. {
  354. data: 'Description',
  355. readOnly: true
  356. },
  357. {
  358. data: 'LocationFlag',
  359. readOnly: true
  360. },
  361. {
  362. data: 'Remarks',
  363. readOnly: true
  364. }
  365. ]
  366. }
  367. if (this.renderData.length) {
  368. this.$nextTick(_ => {
  369. this.hot = this.$refs.handsontable.init(setting)
  370. })
  371. }
  372. }
  373. } else {
  374. this.errMsg()
  375. return false
  376. }
  377. })
  378. }
  379. },
  380. saveForm(basic, other) {
  381. console.log(basic.dict, other, 'basic, other')
  382. let type = basic.DataRuleType
  383. let basicParams = {
  384. SpecialtyCode: basic.dict[0],
  385. SystemCode: basic.dict[1], //code
  386. EquipmentTypeCode: basic.dict[2],
  387. InfomationPointCode: basic.dict[3],
  388. Specialty: this.dataDict[basic.dict[0]].name, //专业
  389. System: this.dataDict[basic.dict[1]].name, //系统
  390. EquipmentType: this.dataDict[basic.dict[2]].name, //设备
  391. InfomationPoint: this.InfomationPoint, //信息点
  392. DataRuleType: basic.DataRuleType, //值处理方式
  393. // DataSourceId: '4',
  394. // PointId: this.editData.Point.Id //点位ID
  395. }
  396. // console.log(basicParams,'basicParams')
  397. let otherParams = {}
  398. switch (type) {
  399. case '无需处理,直接使用':
  400. otherParams = {
  401. // EquipmentMark: other.EquipmentMark
  402. }
  403. break
  404. case '需自动单位转换':
  405. let DataRuleContent1 = JSON.stringify([{
  406. seq: 1,
  407. ruletype: 'type1',
  408. content: [{
  409. from: other.unit[0] + '-' + other.unit[1],
  410. to: this.unitObj.unit
  411. }]
  412. }])
  413. otherParams = {
  414. DataRuleContent: DataRuleContent1,
  415. // EquipmentMark: other.EquipmentMark
  416. }
  417. break
  418. case '需按设置枚举转换':
  419. let DataRuleContent2 = other.pointArr.length ?
  420. JSON.stringify([{
  421. seq: 1,
  422. ruletype: 'type2',
  423. content: other.pointArr
  424. }]) :
  425. undefined
  426. otherParams = {
  427. // EquipmentMark: other.EquipmentMark,
  428. DataRuleContent: DataRuleContent2
  429. }
  430. break
  431. case '需按公式转换':
  432. let subRule = other.from ? {
  433. seq: 1,
  434. ruletype: 'type4',
  435. content: [{
  436. from: other.from,
  437. to: other.to
  438. }]
  439. } :
  440. undefined
  441. let extractRule = {
  442. seq: 2,
  443. ruletype: 'type5',
  444. content: other.extract ? [{
  445. extract: 'number'
  446. }] : []
  447. }
  448. let countRule = other.mark ? {
  449. seq: 3,
  450. ruletype: 'type6',
  451. content: [{
  452. calculationtype: other.mark,
  453. value: other.markValue
  454. }]
  455. } :
  456. undefined
  457. let DataRuleContent3 = []
  458. if (subRule) {
  459. DataRuleContent3.push(subRule)
  460. }
  461. DataRuleContent3.push(extractRule)
  462. if (countRule) {
  463. DataRuleContent3.push(countRule)
  464. }
  465. DataRuleContent3 = DataRuleContent3.length ? JSON.stringify(DataRuleContent3) : undefined
  466. otherParams = {
  467. // EquipmentMark: other.EquipmentMark,
  468. DataRuleContent: DataRuleContent3
  469. }
  470. break
  471. case '需拆分处理':
  472. let SplitPoints = other.devArr.length ? other.devArr : undefined
  473. let DataRuleContent4 = undefined
  474. var enum5 = null
  475. if (other.tranfVal) {
  476. enum5 = {
  477. seq: 2,
  478. ruletype: 'type2',
  479. content: other.pointArr
  480. }
  481. } else {
  482. enum5 = {
  483. seq: 2,
  484. ruletype: 'type2',
  485. content: []
  486. }
  487. }
  488. SplitPoints.forEach(ele => {
  489. let cutStr = {
  490. seq: 1,
  491. ruletype: 'type4',
  492. content: [{
  493. from: ele.SplitStart,
  494. to: ele.SplitEnd
  495. }]
  496. }
  497. ele.DataRuleContent = JSON.stringify([cutStr, enum5])
  498. })
  499. otherParams = {
  500. SplitPoints: SplitPoints
  501. }
  502. break
  503. }
  504. this.dealType = Object.assign(basicParams, otherParams)
  505. // this.create(params)
  506. },
  507. validateDict(rule, value, cb) {
  508. if (value.length < 4) {
  509. cb(new Error('请选到第四级(可能本设备没有信息点)'))
  510. } else {
  511. cb()
  512. }
  513. },
  514. handleChange(arr) {
  515. console.log(arr, 'arr')
  516. console.log(this.infoDict, 'infoDict')
  517. this.unitObj = this.infoDict[arr[3]]
  518. this.InfomationPoint = this.unitObj.infoPointName
  519. },
  520. handleItemChange(val) {
  521. console.log(val, 'vals')
  522. if (val.length == 3) {
  523. let params = {
  524. type: val[2]
  525. }
  526. console.log(params, 'params')
  527. getQueryProperty(params, res => {
  528. if (res.Result == 'success') {
  529. let data = res.Content
  530. let arr = data
  531. .filter(item => {
  532. return item.inputMode == 'L'
  533. })
  534. .map(item => {
  535. return {
  536. code: item.infoPointCode,
  537. name: item.infoPointName
  538. }
  539. })
  540. this.infoDict = {}
  541. data.forEach(item => {
  542. this.infoDict[item.infoPointCode] = item
  543. })
  544. console.log(this.infoDict)
  545. this.optionObj = {}
  546. this.getOptionItem(this.options, val[2])
  547. if (arr.length) {
  548. this.optionObj.content = arr
  549. } else {
  550. this.optionObj.content = undefined
  551. }
  552. }
  553. })
  554. }
  555. },
  556. getOptionItem(arr, code) {
  557. for (var i = 0; i < arr.length; i++) {
  558. if (arr[i].code == code) {
  559. this.optionObj = arr[i]
  560. }
  561. if (arr[i].content && arr[i].content.length > 0) {
  562. this.getOptionItem(arr[i].content, code)
  563. } else {
  564. this.$set(arr, 'content', [])
  565. }
  566. }
  567. },
  568. //缓存数据字典
  569. getDataDict(arr) {
  570. for (var i = 0; i < arr.length; i++) {
  571. // this.dataDict[arr[i].code] = arr[i]
  572. if (arr[i].content && arr[i].content.length > 0) {
  573. this.getDataDict(arr[i].content)
  574. } else {
  575. this.$set(arr[i], 'content', [])
  576. }
  577. }
  578. },
  579. getEqAll() {
  580. let params = {
  581. format: true
  582. }
  583. getEquipmentAll(params, res => {
  584. if (res.Result == 'success') {
  585. this.options = res.Content
  586. this.getDataDict(this.options)
  587. }
  588. })
  589. },
  590. //缓存数据字典
  591. getDataDict(arr) {
  592. for (var i = 0; i < arr.length; i++) {
  593. this.dataDict[arr[i].code] = arr[i]
  594. if (arr[i].content && arr[i].content.length > 0) {
  595. this.getDataDict(arr[i].content)
  596. } else {
  597. this.$set(arr[i], 'content', [])
  598. }
  599. }
  600. },
  601. init() {
  602. //获取所有的设备
  603. this.getEqAll()
  604. },
  605. //处理函数
  606. delDataSource(val){
  607. if(!val){
  608. return '--'
  609. }
  610. if(typeof val == 'string'){
  611. if(!!val){
  612. return val
  613. }else{
  614. return '无信息带你单位及值说明'
  615. }
  616. }else {
  617. let str = ''
  618. val.forEach(el => {
  619. str += el.code + '.' + el.name + ' '
  620. })
  621. return str
  622. }
  623. }
  624. }
  625. }
  626. </script>
  627. <style lang="scss" scoped>
  628. .temp-point-view{
  629. padding: 10px;
  630. box-sizing: border-box;
  631. .el-steps{
  632. margin-bottom: 10px;
  633. }
  634. .flex-around {
  635. display: flex;
  636. justify-content: space-around;
  637. margin-bottom: 5px;
  638. width: 100%;
  639. overflow:hidden;
  640. .point-despoint {
  641. width: 240px;
  642. border: 1px solid #DCDFE6;
  643. height: 190px;
  644. margin-bottom: 10px;
  645. .content-view {
  646. padding: 5px;
  647. box-sizing: border-box;
  648. }
  649. }
  650. }
  651. .collapse-item {
  652. height: 290px;
  653. overflow-y: auto;
  654. }
  655. }
  656. </style>