3_temps.vue 23 KB

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