ibms/src/components/config_point/step3_edit/index.vue

<template>
    <div class='point-box'>
        <div class='left'>
            <ul>
                <li>
                    <span>原始点位信息:</span>&nbsp;&nbsp;&nbsp;
                    <span>{{editData.Point.Description || '--'}}</span>
                </li>
                <li>
                    <span>位置标签:</span>&nbsp;&nbsp;&nbsp;
                    <span>{{editData.Point.LocationFlag.toString() || '--'}}</span>
                </li>
                <li>
                    <span>设备类型:</span>&nbsp;&nbsp;&nbsp;
                    <span>{{editData.Point.KeyEquipmentType || '--'}}</span>
                </li>
                <li>
                    <span>设备参数:</span>&nbsp;&nbsp;&nbsp;
                    <span>{{editData.Point.KeyEquipmentParameter || '--'}}</span>
                </li>
                <li>
                    <span>值/单位说明:</span>&nbsp;&nbsp;&nbsp;
                    <span>{{editData.Point.ValueDescription || '--'}}</span>
                </li>
                <li>
                    <span>备注:</span>&nbsp;&nbsp;&nbsp;
                    <span>{{editData.Point.Remarks || '--'}}</span>
                </li>
            </ul>
        </div>
        <div class='right'>
            <el-form class='form' :rules='rules' ref='form' :model='form' label-width='140px'>
                <el-form-item
                    label='对应数据字典'
                    prop='dict'
                    :rules='[{ required: true, message: "请输入对应数据字典", trigger: "change" },{ validator: validateDict, trigger: ["blur", "change"] }]'
                >
                    <el-cascader
                        style='width: 100%;'
                        :options='options'
                        v-model='form.dict'
                        @change='handleChange'
                        :props='props'
                        filterable
                        @active-item-change='handleItemChange'
                    ></el-cascader>
                    <div class='dict'>
                        <!-- <p class='top'>
                            <i class='el-icon-plus'></i>
                            <el-button type='text'>添加自定义信息点</el-button>
                        </p>-->
                        <p class='btm'>
                            <el-input
                                readonly
                                type='textarea'
                                :rows='2'
                                placeholder='信息点的单位及值的说明'
                                v-model='ValueDescription'
                            ></el-input>
                        </p>
                    </div>
                </el-form-item>
                <el-form-item label='值处理方式' prop='DataRuleType'>
                    <el-select v-model='form.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 -->
                <no-handle ref='noHandle' v-if='form.DataRuleType == "无需处理，直接使用"' :noHandleShow='noHandleShow'></no-handle>
                <auto-handle
                    ref='autoHandle'
                    v-else-if='form.DataRuleType == "需自动单位转换"'
                    :unitObj='unitObj'
                    :autoHandleShow='autoHandleShow'
                ></auto-handle>
                <enum-handle
                    ref='enumHandle'
                    v-else-if='form.DataRuleType == "需按设置枚举转换"'
                    :enumHandleShow='enumHandleShow'
                ></enum-handle>
                <formula-handle
                    ref='formulaHandle'
                    v-else-if='form.DataRuleType == "需按公式转换"'
                    :formulaHandleShow='formulaHandleShow'
                ></formula-handle>
                <split-handle ref='splitHandle' v-else :splitHandleShow='splitHandleShow'></split-handle>
            </el-form>
            <div class='btn-box'>
                <el-button type='primary' @click='save'>保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
//components
import noHandle from './no_handle'
import autoHandle from './auto_handle'
import enumHandle from './enum_handle'
import formulaHandle from './formula_handle'
import splitHandle from './split_handle'
//api
import { getEquipmentAll, getQueryProperty } from '@/fetch/data_plat'
import { batchCreate } from '@/fetch/point_http'
export default {
    name: 'point_config_step3_edit',
    data() {
        return {
            options: [],
            optionObj: {},
            infoDict: {}, //信息点字典
            dataDict: {}, //数据字典
            InfomationPoint: null, //信息点
            unitObj: {}, //传给自动单位转换的obj
            props: {
                value: 'code',
                label: 'name',
                children: 'content'
            },
            ValueDescription: '', //值/点位描述
            form: {
                dict: [],                
                DataRuleType: ''
            },
            rules: {
                DataRuleType: [{ required: true, message: '请选择值处理方式', trigger: 'change' }]
            },
            handleTypeArr: [
                {
                    label: '无需处理，直接使用',
                    value: '无需处理，直接使用'
                },
                {
                    label: '需自动单位转换',
                    value: '需自动单位转换'
                },
                {
                    label: '需按设置枚举转换',
                    value: '需按设置枚举转换'
                },
                {
                    label: '需按公式转换',
                    value: '需按公式转换'
                },
                {
                    label: '需拆分处理',
                    value: '需拆分处理'
                }
            ],
            /**值回显******* */
            noHandleShow: null,
            autoHandleShow: null,
            enumHandleShow: null,
            formulaHandleShow: null,
            splitHandleShow: null
        }
    },
    props: {
        editData: {
            type: Object,
            default: {}
        }
    },
    components: {
        noHandle,
        autoHandle,
        enumHandle,
        formulaHandle,
        splitHandle
    },
    methods: {
        validateDict(rule, value, cb) {
            if (value.length < 4) {
                cb(new Error('请选到第四级(可能本设备没有信息点)'))
            } else {
                cb()
            }
        },
        //保存
        save() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    var flag = this.form.DataRuleType
                    switch (flag) {
                        case '无需处理，直接使用':
                            this.$refs['noHandle'].getForm(noHandle => {
                                if (noHandle) {
                                    this.saveForm(this.form, noHandle)
                                } else {
                                    this.errMsg()
                                }
                            })
                            break
                        case '需自动单位转换':
                            this.$refs['autoHandle'].getForm(autoHandle => {
                                if (autoHandle) {
                                    this.saveForm(this.form, autoHandle)
                                } else {
                                    this.errMsg()
                                }
                            })
                            break
                        case '需按设置枚举转换':
                            this.$refs['enumHandle'].getForm(enumHandle => {
                                if (enumHandle) {
                                    this.saveForm(this.form, enumHandle)
                                } else {
                                    this.errMsg()
                                }
                            })
                            break
                        case '需按公式转换':
                            this.$refs['formulaHandle'].getForm(formulaHandle => {
                                if (formulaHandle) {
                                    this.saveForm(this.form, formulaHandle)
                                } else {
                                    this.errMsg()
                                }
                            })
                            break
                        case '需拆分处理':
                            this.$refs['splitHandle'].getForm(splitHandle => {
                                if (splitHandle) {
                                    this.saveForm(this.form, splitHandle)
                                } else {
                                    this.errMsg()
                                }
                            })
                            break
                    }
                } else {
                    this.errMsg()
                    return false
                }
            })
        },
        saveForm(basic, other) {
            let type = basic.DataRuleType
            let basicParams = {
                SpecialtyCode: basic.dict[0],
                SystemCode: basic.dict[1], //code
                EquipmentTypeCode: basic.dict[2],
                InfomationPointCode: basic.dict[3],
                Specialty: this.dataDict[basic.dict[0]].name, //专业
                System: this.dataDict[basic.dict[1]].name, //系统
                EquipmentType: this.dataDict[basic.dict[2]].name, //设备
                InfomationPoint: this.InfomationPoint, //信息点
                DataRuleType: basic.DataRuleType, //值处理方式
                DataSourceId: '4',
                PointId: this.editData.Point.Id,  //点位ID
            }
            let otherParams = {}
            switch (type) {
                case '无需处理，直接使用':
                    otherParams = {
                        EquipmentMark: other.EquipmentMark
                    }
                    break
                case '需自动单位转换':
                    let DataRuleContent1 = JSON.stringify([
                        {
                            seq: 1,
                            ruletype: 'type1',
                            content: [
                                {
                                    from: other.unit[0] + '-' + other.unit[1],
                                    to: this.unitObj.unit
                                }
                            ]
                        }
                    ])
                    otherParams = {
                        DataRuleContent: DataRuleContent1,
                        EquipmentMark: other.EquipmentMark
                    }
                    break
                case '需按设置枚举转换':
                    let DataRuleContent2 = other.pointArr.length
                        ? JSON.stringify([{ seq: 1, ruletype: 'type2', content: other.pointArr }])
                        : undefined
                    otherParams = {
                        EquipmentMark: other.EquipmentMark,
                        DataRuleContent: DataRuleContent2
                    }
                    break
                case '需按公式转换':
                    let subRule = other.from
                        ? {
                              seq: 1,
                              ruletype: 'type4',
                              content: [
                                  {
                                      from: other.from,
                                      to: other.to
                                  }
                              ]
                          }
                        : undefined
                    let extractRule = {
                        seq: 2,
                        ruletype: 'type5',
                        content: other.extract
                            ? [
                                  {
                                      extract: 'number'
                                  }
                              ]
                            : []
                    }
                    let countRule = other.mark
                        ? {
                              seq: 3,
                              ruletype: 'type6',
                              content: [
                                  {
                                      calculationtype: other.mark,
                                      value: 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
                    otherParams = {
                        EquipmentMark: other.EquipmentMark,
                        DataRuleContent: DataRuleContent3
                    }
                    break
                case '需拆分处理':
                    let SplitPoints = other.devArr.length ? other.devArr : undefined
                    let DataRuleContent4 = undefined
                    var enum5 = null
                    if (other.tranfVal) {
                        enum5 = { seq: 2, ruletype: 'type2', content: 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])
                    })
                    otherParams = {
                        SplitPoints: SplitPoints
                    }
                    break
            }
            let params = [Object.assign(basicParams, otherParams)]
            this.create(params)

        },
        create(params) {
            batchCreate(params, res => {
                if (res.Result == 'success') {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$emit('refresh')
                }
            })
        },
        errMsg() {
            this.$message({
                message: '有必填项未填',
                type: 'warning'
            })
        },
        handleChange(arr) {
            this.unitObj = this.infoDict[arr[3]]
            this.InfomationPoint = this.unitObj.infoPointName || '--'
        },
        handleItemChange(val, cb) {
            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'
                            })
                            .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
                        }

                        if (typeof cb == 'function') {
                            cb()
                        }
                    }
                })
            }
        },
        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)
                }
            }
        },
        //缓存数据字典
        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)
                }
            }
        },
        getEqAll() {
            let params = { format: true }
            getEquipmentAll(params, res => {
                if (res.Result == 'success') {
                    this.options = res.Content
                    this.getDataDict(this.options)
                }
            })
        },
        init() {
            //获取所有的设备
            this.getEqAll()
        },
        //回显数值
        async showValue(val) {
            await this.getEqAll()
            let length = val.RelationList.length
            if (length) {
                var data = val.RelationList[0]
                let dict = [data.SpecialtyCode, data.SystemCode, data.EquipmentTypeCode]
                this.handleItemChange(dict, () => {
                    this.form = {
                        dict: [...dict, data.InfomationPointCode],
                        DataRuleType: data.DataRuleType
                    }
                    this.unitObj = this.infoDict[data.InfomationPointCode]
                    this.InfomationPoint = this.unitObj.infoPointName || '--';
                    if(typeof this.unitObj.dataSource == "string") {
                        if(this.unitObj.dataSource.length) {
                            this.ValueDescription = this.unitObj.dataSource
                        } else {
                            this.ValueDescription = "无信息点单位及值说明"
                        }                        
                    } else {
                        let str = ''
                        this.unitObj.dataSource.forEach(ele => {
                            str = ele.code + '、' + ele.name + " "
                        })
                        this.ValueDescription = str;
                    }
                })
                if (length == 1) {
                    let flag = data.DataRuleType
                    var dataRules = null
                    switch (flag) {
                        case '无需处理，直接使用':
                            this.noHandleShow = {
                                EquipmentMark: data.EquipmentMark
                            }
                            break
                        case '需自动单位转换':
                            dataRules = JSON.parse(data.DataRuleContent)
                            let auto = dataRules[0].content[0].from.split('-')
                            this.autoHandleShow = {
                                EquipmentMark: data.EquipmentMark,
                                unit: auto
                            }
                            break
                        case '需按设置枚举转换':
                            dataRules = JSON.parse(data.DataRuleContent)
                            let pointArr = dataRules[0].content
                            this.enumHandleShow = {
                                EquipmentMark: data.EquipmentMark,
                                pointArr: pointArr
                            }
                            break
                        case '需按公式转换':
                            var cut = null
                            var count = null
                            var extractArr = []
                            if (data.DataRuleContent) {
                                dataRules = JSON.parse(data.DataRuleContent)
                                cut = dataRules[0].content[0]
                                extractArr = dataRules[1].content
                                count = dataRules[2].content[0]
                            }
                            this.formulaHandleShow = {
                                EquipmentMark: data.EquipmentMark,
                                cut: cut,
                                count: count,
                                extractArr: extractArr
                            }
                            break
                            
                    }
                } else {
                    let dataRules = JSON.parse(data.DataRuleContent)
                    let devArr = val.RelationList.map(ele => {
                        let arr = JSON.parse(ele.DataRuleContent)

                        return {
                            EquipmentMark: ele.EquipmentMark,
                            SplitStart:arr[0].content[0].from ,
                            SplitEnd: arr[0].content[0].to
                        }
                    }) 
                    let pointArr = dataRules[1].content;
                    this.splitHandleShow = {
                        EquipmentMark: data.EquipmentMark,
                        pointArr: pointArr,
                        devArr: devArr
                    }
                }
            }
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        editData: {
            immediate: true,
            handler(val) {
                this.showValue(val)
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.point-box {
    border: 1px solid #ccc;
    display: flex;
    padding: 20px 0;
    .left {
        width: 40%;
        ul li {
            display: flex;
            height: 40px;
            line-height: 40px;
            span:nth-of-type(1) {
                text-align: right;
                width: 120px;
            }
        }
    }
    .right {
        width: 60%;
        .form {
            width: 80%;
            .dict {
                .top {
                    text-align: right;
                    line-height: 33px;
                }
                .btm {
                    margin-top: 5px;
                }
            }
        }
        .btn-box {
            margin-top: 20px;
            text-align: center;
        }
    }
}
</style>