ibms/src/components/config_point/step3_point/steps3_main.vue

<!--steps3的左侧-->
<template>
    <div class="steps3-dialog-main">
        <select-one @check="typeCheck" :renderData="typeArr" :isSelected="true" isCheckInfo="PhysicalRelated" infosKey="EquipmentType" :name="'原始点位描述中识别的设备类型'"></select-one>
        <select-one @check="paramCheck" :isDel="true" @deleteItem="deleteItem" :renderData="identifyArr" :isSelected="true" isCheckInfo="PhysicalRelated" infosKey="ownMess" :name="'原始点位描述中识别的设备参数'"></select-one>
        <div class="own-collape">
            <temp-collape ref="ident" :renderData="identDataArr" @changed="changed"></temp-collape>
        </div>
    </div>
</template>
<script>
    import selectOne from "@/components/config_point/select_one"
    import {
        groupRelated,
        queryPoint,
        updatePoint,
        groupParamRelated,
        getNullofParam,
        deleteRelationList
    } from "@/fetch/point_http"
    import tempCollape from "./3_temps"
    import identCollape from "./3_identify"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import handsontableComponent from "@/components/common/handsontable"
    export default {
        name: "updateParam",
        data() {
            return {
                activeName: '1',
                typeArr: [],
                identifyArr: [],
                KeyEquipmentType: "",
                identDataArr: []
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        created() {
            this.getData()
        },
        mounted() {},
        methods: {
            getData() {
                groupRelated({
                    data: {
                        DataSourceId: this.datasourceId
                    },
                    type: this.protocolType
                }, res => {
                    this.typeArr = res.Content
                })
            },
            typeCheck(item) {
                console.log(item, "item")
                this.getParamList(item)
            },
            //删除设备参数
            deleteItem(item) {
                console.log(item, 'item')
                this.$confirm(`<p style='text-align:center;'>确定删除设备参数与数字字典的对应关系</p><p style='text-align:center;'>删除需重新配置</p>`, '提示', {
                    dangerouslyUseHTMLString: true
                }).then(_ => {
                    deleteRelationList({
                        DataSourceId: this.datasourceId,
                        EquipmentParameter: item.EquipmentParameter,
                        EquipmentType: item.EquipmentType
                    }, res => {
                        this.$message.success("删除成功")
                        this.changed()
                    })
                }).catch(_ => {
                    this.$message("取消删除")
                })
            },
            //改变后重新获取两个选择的状态
            changed() {
                groupParamRelated({
                    data: {
                        DataSourceId: this.datasourceId,
                        KeyEquipmentType: this.KeyEquipmentType
                    },
                    type: this.protocolType
                }, res => {
                    this.identifyArr = res.Content.map(item => {
                        item.ownMess = item.EquipmentParameter
                        return item
                    })
                })
                groupRelated({
                    data: {
                        DataSourceId: this.datasourceId
                    },
                    type: this.protocolType
                }, res => {
                    this.typeArr = res.Content
                })
            },
            paramCheck(param) {
                console.log(param,'param')
                if(!!param &&!!param.PhysicalRelated){
                    this.$message("已完成设置，您可以重新设置")
                }
                if (!!param && !!param.EquipmentMark && param.EquipmentMark == "空") {
                    //空查询分组信息
                    getNullofParam({
                        data: {
                            DataSourceId: this.datasourceId,
                            KeyEquipmentType: this.KeyEquipmentType
                        },
                        type: this.protocolType
                    }, res => {
                        this.identDataArr = res.Content
                        this.$refs.ident.getMain(param)
                    })
                } else {
                    //不是空的情况查询点位列表
                    console.log(param)
                    if (param && param.EquipmentMark) {
                        queryPoint({
                            data: {
                                Filters: {
                                    KeyEquipmentParameter: param.EquipmentParameter,
                                    KeyEquipmentType: param.EquipmentType,
                                    DataSourceId: this.datasourceId,
                                    Used: true
                                    // KeyEquipmentParameter: '温度',
                                    // KeyEquipmentType: '冷机'
                                },
                                PageNumber: 1,
                                PageSize: 100
                            },
                            type: this.protocolType
                        }, res => {
                            console.log(res, "reslist")
                            this.identDataArr = res.Content
                            this.$refs.ident.getMain(param)
                        })
                    }
                }
            },
            //通过type获取param的list
            getParamList(item) {
                if (item && item.EquipmentType) {
                    this.KeyEquipmentType = item.EquipmentType
                    groupParamRelated({
                        data: {
                            DataSourceId: this.datasourceId,
                            KeyEquipmentType: item.EquipmentType
                        },
                        type: this.protocolType
                    }, res => {
                        this.identifyArr = res.Content.map(item => {
                            item.ownMess = item.EquipmentParameter
                            return item
                        })
                    })
                }
            }
        },
        components: {
            selectOne,
            handsontableComponent,
            tempCollape,
            identCollape
        }
    }
</script>
<style lang="scss" scoped>
    .steps3-dialog-main {
        height: 460px;
        .own-collape {
            border: 1px solid #ccc;
            float: right;
            width: calc(100% - 520px);
            box-sizing: border-box;
            height: 460px;
            position: relative;
        }
        .select-own-one{
            height: 460px;
        }
    }
</style>