<template> <div class="temp-point-view"> <el-steps :active="activeName" align-center> <el-step title="步骤1" description="确定与数据字典中信息点对应"></el-step> <el-step title="步骤2" description="确定值得处理方式"></el-step> <el-step title="步骤3" description="确认并维护涉及到得原始点位对应得对象标识"></el-step> </el-steps> <div class="collapse-item" v-show="activeName == 0"> <el-form class="form" :rules="rules" ref="form" :model="form1" label-width="120px"> <el-form-item label="对应数据字典" prop="dict"> <dictionary-cas @change="changeDictionaryCas" ref="dictionaryCas"></dictionary-cas> </el-form-item> </el-form> <div> <div v-for="(it,ind) in typeList" :key="ind"> <p style="margin:10px 0;">信息点名称: {{it.name}}</p> <div class="flex-around"> <div class="point-despoint"> <p class="center">原始点位说明</p> <p class="p10">{{pointDes}}</p> </div> <div class="point-despoint"> <p class="center">数据字典值说明</p> <p class="content-view p10">{{delDataSource(it.unitObj.DataSource)}}</p> </div> </div> </div> </div> <div class="center" style="margin-top:20px;"> <el-button @click="next">下一步</el-button> </div> </div> <div class="collapse-item" v-if="activeName == 1"> <div v-for="(it,ind) in typeList" :key="ind"> <p style="margin:10px 0;">信息点名称: {{it.name}}</p> <div class="flex-around"> <div class="point-despoint"> <p class="center">原始点位说明</p> <p class="p10">{{pointDes}}</p> </div> <div class="point-despoint"> <p class="center">数据字典值说明</p> <p class="content-view p10">{{delDataSource(it.unitObj.DataSource)}}</p> </div> </div> <el-form class="form" :rules="rules" ref="form2" :model="form2" label-width="140px"> <el-form-item label='值处理方式' prop='DataRuleType'> <el-select v-model='it.DataRuleType' placeholder='请选择'> <el-option v-for='item in handleTypeArr' :key='item.value' :label='item.label' :value='item.value'></el-option> </el-select> </el-form-item> <!-- components --> <div :ref='"noHandle"+ind' v-if='it.DataRuleType == "无需处理,直接使用"'></div> <auto-handle :devFlag="false" :ref='"autoHandle"+ind' v-else-if='it.DataRuleType == "需自动单位转换"' :unitObj='it.unitObj'></auto-handle> <enum-handle :devFlag="false" :ref='"enumHandle"+ind' v-else-if='it.DataRuleType == "需按设置枚举转换"'></enum-handle> <formula-handle :devFlag="false" :ref='"formulaHandle"+ind' v-else-if='it.DataRuleType == "需按公式转换"'></formula-handle> <!-- <split-handle :devFlag="false" ref='splitHandle' v-else-if='form2.DataRuleType == "需按拆分枚举转换"'></split-handle> --> </el-form> </div> <div class="center" style="margin-top:20px;"> <el-button @click="undo">上一步</el-button> <el-button @click="next">下一步</el-button> </div> </div> <div class="collapse-item" v-if="activeName == 2"> <div v-if="renderData.length" style="height:258px;"> <handsontable-component ref="handsontable" @change="changeTable"></handsontable-component> </div> <div v-if="!renderData.length" class="center" style="padding: 50px 0;box-sizing:border-box;"> <i class="icon-wushuju iconfont"></i> 暂无数据 </div> <div v-if="pages.total>pages.size" class="right"> <pagination :page="pages" @change="changePage"></pagination> </div> <div class="center" style="margin-top:20px;"> <el-button @click="undo">上一步</el-button> <el-button v-show="renderData.length" @click="save">保存</el-button> </div> </div> </div> </template> <script> //components import noHandle from '@/components/config_point/step3_edit/no_handle' import autoHandle from '@/components/config_point/step3_edit/auto_handle' import enumHandle from '@/components/config_point/step3_edit/enum_handle' import formulaHandle from '@/components/config_point/step3_edit/formula_handle' import splitHandle from '@/components/config_point/step3_edit/split_handle' import handsontableComponent from "@/components/common/handsontable" import dictionaryCas from '@/components/config_point/dictionaryCascader' import pagination from "@/components/common/myPagination" import handsonUtils from "@/utils/hasontableUtils" import { groupCreatePointRelation } from "@/api/scan/request"; import { mapGetters, mapActions } from "vuex"; import { getEquipmentAll, getQueryProperty } from '@/fetch/data_plat' import { updatePoint, batchCreate, queryDescription } from '@/fetch/point_http' export default { name: "tempsThree", computed: { ...mapGetters("project", [ "datasourceId", "protocolType" ]), projectId() { return this.$store.getters['layout/projectId'] } }, props: { renderData: { type: Array, default: function () { return [] } }, pages: Object, queryParam: Object }, data() { return { activeName: 0, form1: { dict: 1 }, options: [], dataDict: {}, //数据字典 infoDict: {}, //信息点字典 InfomationPoint: null, //信息点 unitObj: {}, //传给自动单位转换的obj handleTypeArr: [{ label: '无需处理,直接使用', value: '无需处理,直接使用' }, { label: '需自动单位转换', value: '需自动单位转换' }, { label: '需按设置枚举转换', value: '需按设置枚举转换' }, { label: '需按公式转换', value: '需按公式转换' }, // { // label: '需按拆分枚举转换', // value: '需按拆分枚举转换' // } ], dealType: [], //处理方式 form2: { ValueDescription: '', DataRuleType: '无需处理,直接使用' }, rules: { DataRuleType: [{ required: true, message: '请选择值处理方式', trigger: 'change' }], dict: [{ required: true }] }, pointDes: "", typeList: [] } }, created() { }, mounted() { this.init() }, components: { noHandle, autoHandle, enumHandle, formulaHandle, splitHandle, handsontableComponent, dictionaryCas, pagination }, methods: { getMain(param, pagechange) { if (!pagechange) { this.activeName = 0 this.dealType = [] this.form1 = { dict: 1 } this.$refs.dictionaryCas.setCascaderVal([]) this.form2 = { ValueDescription: '', DataRuleType: '无需处理,直接使用' } this.unitObj = {} } let params = { data: { DataSourceId: this.datasourceId, KeyEquipmentParameter: param.EquipmentParameter, KeyEquipmentType: param.EquipmentType }, type: this.protocolType } queryDescription(params, res => { this.pointDes = !!res.Content ? res.Content.join("、") : "--" }) }, //保存 save() { // let data = this.hot.getSourceData() // let params = data.map(item => { // let obj = Object.assign({}, { // DataSourceId: this.datasourceId, // PointId: item.Id, // EquipmentMark: item.EquipmentMark // }) // return Object.assign(obj, this.dealType) // }), // sameFalg = false, // magFalg = false; // params.map((item, index) => { // if (!item.EquipmentMark) { // magFalg = true // } // params.map((child, childIndex) => { // if (childIndex != index && child.EquipmentMark == item.EquipmentMark) { // sameFalg = true // } // }) // }) // if (sameFalg) { // this.confirm("点位中存在对象标识相同的点位,确认保存吗?", params) // } else { // this.createParam(params) // } this.dealType.forEach((t, i) => { let pa = Object.assign({ DataSourceId: this.queryParam.DataSourceId, KeyEquipmentParameter: this.queryParam.EquipmentParameter, KeyEquipmentType: this.queryParam.EquipmentType, }, t); groupCreatePointRelation(pa, res => { if (i == this.dealType.length - 1) { this.$message.success("处理成功") this.$emit("changed") } }) }) }, confirm(assage, params) { this.$confirm(assage, { type: 'warning' }).then(_ => { this.createParam(params) }).catch(_ => { }) }, createParam(params) { let updateParams = { data: { Content: [] }, type: this.protocolType } params.map((item) => { updateParams.data.Content.push({ Id: item.PointId, EquipmentMark: item.EquipmentMark }) }) updatePoint(updateParams, data => { batchCreate(params, res => { this.$message.success("处理成功") this.$emit("changed") }) }) }, undo() { this.activeName -= 1 }, errMsg() { this.$message({ message: '有必填项未填', type: 'warning' }) }, next() { var that = this; if (this.activeName == 0) { this.$refs.dictionaryCas.validate(valid => { if (valid) { this.activeName += 1 } else { this.errMsg() } }) } else if (this.activeName == 1) { let isNext = true; for (let i = 0; i < this.typeList.length; i++) { let flag = this.typeList[i].DataRuleType let compon = ''; switch (flag) { case '无需处理,直接使用': this.typeList[i].other = {} // this.saveForm(this.form2, {}) break case '需自动单位转换': compon = `autoHandle${i}` this.$refs[compon][0].getForm(autoHandle => { if (autoHandle) { this.typeList[i].other = autoHandle; // this.saveForm(this.form2, autoHandle) } else { isNext = false this.errMsg() } }) break case '需按设置枚举转换': compon = `enumHandle${i}` this.$refs[compon][0].getForm(enumHandle => { if (enumHandle) { this.typeList[i].other = enumHandle; // this.saveForm(this.form2, enumHandle) } else { isNext = false this.errMsg() } }) break case '需按公式转换': compon = `formulaHandle${i}` this.$refs[compon][0].getForm(formulaHandle => { if (formulaHandle) { this.typeList[i].other = formulaHandle; // this.saveForm(this.form2, formulaHandle) } else { isNext = false this.errMsg() } }) break // case '需按拆分枚举转换': // this.$refs.splitHandle.getForm(splitHandle => { // if (splitHandle) { // this.saveForm(this.form2, splitHandle) // } else { // isNext = false // this.errMsg() // } // }) // break } } if (isNext) { this.saveForm(); this.activeName += 1 let setting = { data: this.renderData, maxRows: 1000, colHeaders: ['对象标识', '原始点位描述', '位置标签', '备注'], columns: [{ data: 'EquipmentMark' }, { data: 'Description', readOnly: true }, { data: 'LocationFlag', readOnly: true }, { data: 'Remarks', readOnly: true } ] } if (this.renderData.length) { this.$nextTick(_ => { this.hot = this.$refs.handsontable.init(setting) }) } } } }, saveForm() { let params = this.typeList.map((t, i) => { let temp = this.dictionaryData[i], tempNames = t.name.split('-'); let eachData = { InfomationPointCode: temp[temp.length - 1], InfomationPoint: tempNames[tempNames.length - 1], DataRuleType: t.DataRuleType, // DataSourceId: this.datasourceId, //数据源id // PointId: this.editData.Point.Id, //点位ID TypeCode: temp[0], Type: tempNames[0], // EquipmentMark: this.form.EquipmentMark } if (temp.length == 3) { //设备-部件-空间 eachData.EquipmentTypeCode = temp[1] eachData.EquipmentType = tempNames[1] } else if (temp.length == 4) { eachData.SpecialtyCode = temp[1] eachData.Specialty = tempNames[1] eachData.SystemCode = temp[2] eachData.System = tempNames[2] eachData.EquipmentTypeCode = eachData.SystemCode //为了配置从动参取值存储 eachData.EquipmentType = eachData.System } let type = t.DataRuleType; switch (type) { case '无需处理,直接使用': // otherParams = { // EquipmentMark: other.EquipmentMark // } break case '需自动单位转换': let DataRuleContent1 = JSON.stringify([{ seq: 1, ruletype: 'type1', content: [{ from: t.other.unit[0] + '-' + t.other.unit[1], to: this.unitObj.unit }] }]) eachData.DataRuleContent = DataRuleContent1; // otherParams = { // DataRuleContent: DataRuleContent1, // EquipmentMark: other.EquipmentMark // } break case '需按设置枚举转换': let DataRuleContent2 = t.other.pointArr.length ? JSON.stringify([{ seq: 1, ruletype: 'type2', content: t.other.pointArr }]) : undefined eachData.DataRuleContent = DataRuleContent2; // otherParams = { // EquipmentMark: other.EquipmentMark, // DataRuleContent: DataRuleContent2 // } break case '需按公式转换': let subRule = t.other.from ? { seq: 1, ruletype: 'type4', content: [{ from: t.other.from, to: t.other.to }] } : undefined let extractRule = { seq: 2, ruletype: 'type5', content: t.other.extract ? [{ extract: 'number' }] : [] } let countRule = t.other.mark ? { seq: 3, ruletype: 'type6', content: [{ calculationtype: t.other.mark, value: t.other.markValue }] } : undefined let DataRuleContent3 = [] if (subRule) { DataRuleContent3.push(subRule) } DataRuleContent3.push(extractRule) if (countRule) { DataRuleContent3.push(countRule) } DataRuleContent3 = DataRuleContent3.length ? JSON.stringify(DataRuleContent3) : undefined eachData.DataRuleContent = DataRuleContent3; // otherParams = { // EquipmentMark: other.EquipmentMark, // DataRuleContent: DataRuleContent3 // } break case '需拆分处理': let SplitPoints = t.other.devArr.length ? t.other.devArr : undefined let DataRuleContent4 = undefined var enum5 = null if (t.other.tranfVal) { enum5 = { seq: 2, ruletype: 'type2', content: t.other.pointArr } } else { enum5 = { seq: 2, ruletype: 'type2', content: [] } } SplitPoints.forEach(ele => { let cutStr = { seq: 1, ruletype: 'type4', content: [{ from: ele.SplitStart, to: ele.SplitEnd }] } ele.DataRuleContent = JSON.stringify([cutStr, enum5]) }) eachData.SplitPoints = SplitPoints; // otherParams = { // SplitPoints: SplitPoints // } break } return eachData; }) this.dealType = params // this.create(params) }, validateDict(rule, value, cb) { if (value.length < 4) { cb(new Error('请选到第四级(可能本对象没有信息点)')) } else { cb() } }, handleItemChange(val) { if (val.length == 3) { let params = { type: val[2] } getQueryProperty(params, res => { if (res.Result == 'success') { let data = res.Content let arr = data .filter(item => { return item.inputMode == 'L' || item.inputMode == 'M' }) .map(item => { return { code: item.infoPointCode, name: item.infoPointName } }) this.infoDict = {} data.forEach(item => { this.infoDict[item.infoPointCode] = item }) this.optionObj = {} this.getOptionItem(this.options, val[2]) if (arr.length) { this.optionObj.content = arr } else { this.optionObj.content = undefined } } }) } }, getOptionItem(arr, code) { for (var i = 0; i < arr.length; i++) { if (arr[i].code == code) { this.optionObj = arr[i] } if (arr[i].content && arr[i].content.length > 0) { this.getOptionItem(arr[i].content, code) } else { this.$set(arr, 'content', []) } } }, getEqAll() { let params = { format: true } getEquipmentAll(params, res => { if (res.Result == 'success') { this.options = res.Content this.getDataDict(this.options) } }) }, //缓存数据字典 getDataDict(arr) { for (var i = 0; i < arr.length; i++) { this.dataDict[arr[i].code] = arr[i] if (arr[i].content && arr[i].content.length > 0) { this.getDataDict(arr[i].content) } else { this.$set(arr[i], 'content', []) } } }, init() { //获取所有的设备 this.getEqAll() }, //处理函数 delDataSource(val) { if (!val) { return '--' } val = JSON.parse(val) let str = '' val.forEach(el => { str += el.Code + '.' + el.Name + ' ' }) return str }, //对应数据字典变化 changeDictionaryCas({ val, labels, data }) { this.dictionaryData = val; this.dictionaryNames = labels; this.unitObj = data if (this.typeList.length) { this.typeList = this.typeList.map(t => { if (labels.indexOf(t.name) < 0) { return undefined } return t; }).filter(item => item) let temp = this.typeList.map(t => { return t.name; }) for (let i = 0; i < labels.length; i++) { if (temp.indexOf(labels[i]) < 0) { this.typeList.push({ name: labels[i], DataRuleType: '无需处理,直接使用' }) } } } else { this.typeList = labels.map(t => { return { name: t, DataRuleType: '无需处理,直接使用' } }) } this.typeList = this.typeList.map((t, i) => { t.unitObj = data[val[i][val[i].length - 1]]; return t; }) }, //分页发生更改 changePage() { this.$emit('changePage', this.queryParam); }, // 修改table changeTable(changeData, source) { console.log(source) if (source == 'edit' || source == 'Autofill.fill') { let trimmedArr = this.trimmedRows(); let param = handsonUtils.getParam(changeData, source, this.hot, trimmedArr); let updateParams = { data: { Content: [] }, type: this.protocolType } updateParams.data.Content = param.map(t => { return { Id: t.Id, EquipmentMark: t.EquipmentMark } }) console.log(updateParams) updatePoint(updateParams, data => { this.$message.success("修改成功") }) } }, //获取被筛选掉的行号 trimmedRows() { var plugin = this.hot.getPlugin("trimRows").trimmedRows; let dataLength = this.renderData.length; let dataArr = new Array(); for (let i = 0; i < dataLength; i++) { dataArr.push(i); } if (plugin.length <= 0) { dataArr = undefined; } else { dataArr = this.array_diff(dataArr, plugin); } return dataArr || []; }, //去除数组中相同的元素 array_diff(a, b) { for (var i = 0; i < b.length; i++) { for (var j = 0; j < a.length; j++) { if (a[j] == b[i]) { a.splice(j, 1); j = j - 1; } } } return a; }, }, watch: { 'renderData': { handler(n, o) { if (n.length && this.hot) { this.hot.loadData(n); console.log('load') } }, immediate: true, deep: true } } } </script> <style lang="scss" scoped> .temp-point-view { padding: 10px; box-sizing: border-box; .el-steps { margin-bottom: 10px; } .flex-around { display: flex; justify-content: space-around; // margin-bottom: 5px; width: 100%; overflow: hidden; .point-despoint { width: 240px; border: 1px solid #dcdfe6; height: 190px; margin-bottom: 10px; .content-view { padding: 5px; box-sizing: border-box; } } } .collapse-item { height: 328px; overflow-y: auto; } } </style>