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

<!--steps3的左侧-->
<template>
    <div class="steps3-dialog-main">
        <select-one  @check="typeCheck" :renderData="typeArr" :isSelected="true" isCheckInfo="EquipmentMarkStandardized" infosKey="EquipmentType" :name="'原始点位描述中识别的设备类型'"></select-one>
        <select-one  @check="paramCheck" :renderData="identifyArr" infosKey="ownMess" :name="'已标准化的设备标识'"></select-one>
        <div class="own-collape">
            <ident-collape v-if="!isNull" ref="ident" @saved="resetTwo" :renderData="identDataArr"></ident-collape>
            <div v-else class="h100">
                <div class="own-table-view">
                    <handsontable-component ref="handsontable"></handsontable-component>
                    <div class="center">
                        <el-button type="primary" @click="saveData">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import selectOne from "@/components/config_point/select_one"
    import {
        getStandType,
        queryPoint,
        updatePoint,
        getStandParam,
        getNullofParam
    } 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: [],
                isNull: false,
                paramData: {},
                Typs: {}
            }
        },
        computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
        created() {
            this.getData()
        },
        mounted() {},
        methods: {
            getData(){
                getStandType({
                    data: {
                        DataSourceId: this.datasourceId
                    },
                    type: this.protocolType
                },res => {
                    this.typeArr = res.Content
                })
            },
            resetTwo(){
                console.log("触发回调")
                this.getParamList(this.Typs)
            },
            typeCheck(item){
                console.log(item,"item")
                this.getParamList(item)
            },
            paramCheck(param){
                this.paramData = param
                if(!!param.EquipmentMark && param.EquipmentMark == "空"){
                    //空查询分组信息
                    getNullofParam({
                        data: {
                            DataSourceId: this.datasourceId,
                            KeyEquipmentType: this.KeyEquipmentType
                        },
                        type: this.protocolType
                    },res =>{
                        console.log(res)
                        this.isNull = false
                        this.identDataArr = res.Content
                    })
                }else{
                    //不是空的情况查询点位列表
                    console.log(param)
                    queryPoint({
                        data: {
                            Filters: {
                                equipmentMark: param.EquipmentMark,
                                KeyEquipmentType: param.EquipmentType,
                                Used: true
                            },
                            PageNumber: 1,
                            PageSize: 100
                        },
                        type: this.protocolType
                    },res => {
                        this.isNull = true
                        this.identDataArr = res.Content
                        let allData = this.identDataArr,data = {
                            data: allData,
                            colHeaders: ['设备标识','原始点位描述','位置标签','备注'],
                            columns: [
                                {
                                    data: 'EquipmentMark'
                                },
                                {
                                    data: 'Description',
                                    readOnly:true,
                                },
                                {
                                    data: 'LocationFlag',
                                    readOnly:true,
                                },
                                {
                                    data: 'Remarks',
                                    readOnly:true,
                                }
                            ],
                            maxRows: allData.length,
                        }
                        if(this.protocolType == 'knx'){
                            data.colHeaders.splice(2,0,'原始点位地址')
                            data.columns.splice(2,0,{
                                data: 'GroupAddress',
                                readOnly: true
                            })
                        }
                        if(this.protocolType == 'modbus-tcp'){
                            data.colHeaders.splice(2,0,'原始点位地址')
                            data.columns.splice(2,0,{
                                data: 'RegistersAddress',
                                readOnly: true
                            })
                        }
                        console.log(this.activeName,this.$refs.handsontable)
                        this.$nextTick(_ => {
                            this.$refs.handsontable.init(data) 
                        }) 
                    })
                }
            },
            saveData(){
                console.log(this.identDataArr,222)
            },
            //通过type获取param的list
            getParamList(item){
                this.Typs = item
                console.log(item)
                this.KeyEquipmentType = item.EquipmentType
                getStandParam({
                    data: {
                        DataSourceId: this.datasourceId,
                        KeyEquipmentType: item.EquipmentType
                    },
                    type: this.protocolType
                },res => {
                    console.log(res,"res")
                    this.identifyArr = res.Content.map(item => {
                        item.ownMess = item.EquipmentMark + '(涉及原始点位：' + item.PointCount + ')'
                        return item
                    })
                })
            }
        },
        components: {
            selectOne,
            handsontableComponent,
            tempCollape,
            identCollape
        }
    }
</script>
<style lang="scss" scoped>
    .steps3-dialog-main {
        height: 400px;
        .own-table-view{
            height: calc(100% - 50px);
        }
        .own-collape {
            border: 1px solid #ccc;
            float: right;
            width: calc(100% - 520px);
            height: 340px;
            position: relative;
        }
    }
</style>