ibms/src/views/alarm/projalarm/selectratedinfo.vue

/**
@author:fugy
@date:2018.09.21
@info:固定报警条目选择技术报警点的弹窗
 */
 <template>
 <!-- @close="selectInfoCloseHandle" -->
<el-dialog
title="选择报警触发时所转问题"
:visible.sync="dialogVisible"
width="50%"
center
>
    <div class="problem-box">
        <!-- <div class="top">   
            <el-radio-group v-model="radioValue">
                <el-radio-button v-for="(item, index) in radioArr" :key="index" :label="item.value" :disabled="objTypeValue != item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
        </div>
        <hr class="line" /> -->
        <div class="content">
            <!-- <div class="contion" v-if="radioValue == 'system' || radioValue == 'facility'">
                <el-select v-model="majorSelectValue" clearable placeholder="请选择专业" @change="changeMajorHandle">
                    <el-option
                    v-for="item in majorSelectArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-if="majorSelectValue" v-model="sysSelectValue" clearable placeholder="请选择系统" @change="changeSysHandle">
                    <el-option
                    v-for="item in sysSelectArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-if="sysSelectValue && this.radioValue=='facility'" v-model="devSelectValue" clearable placeholder="请选择设备" @change="changeDevHandle">
                    <el-option
                    v-for="item in devSelectArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div> -->
            <div class="table-box">
                <el-table
                    v-if="infoPointArr"
                    v-loading="loading"
                    :data="infoPointArr"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="infoPointName"
                    label="信息点名称"
                    header-align="center">
                    </el-table-column>
                    <el-table-column
                    prop="infoPointCode"
                    label="信息点infoid"
                    header-align="center">
                    </el-table-column>                   
                    <el-table-column
                    label="选择"
                    header-align="center"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <el-radio v-model="selectInfoValue" :label="scope.row.infoPointCode" @change="radioHandle(scope.row)">{{null}}</el-radio>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</el-dialog>
 </template>
 
 <script>
import api from './api';
export default {
    name: "has-problem",
    data() {
        return {            
            dialogVisible: false,
            loading: false,
            radioArr:[{ //单选按钮的数据Arr             
                value: 'building',
                label: '建筑',
            },{
                value: 'floor',
                label: '楼层',
            },{
                value: 'system',
                label: '系统类',
            },{
                value: 'facility',
                label: '设备类',
            }], 
            radioValue:'space', //单选按钮的value值
            majorSelectValue: null, //专业下拉value
            majorSelectArr: [], //专业下拉的数组
            sysSelectValue: null, //系统下拉value
            sysSelectArr: [], //系统下拉的数组
            devSelectValue: null, //设备下拉value
            devSelectArr: [], //设备下拉的属猪
            tableData:[
                {
                    infoPointName: '信息点1',
                    infoPointCode: '001',
                },{
                    infoPointName: '信息点2',
                    infoPointCode: '002',
                }
            ],
            selectInfoValue: null, // 表格单选按钮的value值
            param: null, //请求参数
        }
    },
    props:["selectRatedInfoFlag", "objTypeValue", "infoPointArr","selectRatedInfoCheckedCode"],
    methods: {
        //表格单选按钮
        radioHandle(row){
            this.$emit("select-info-handle", row.infoPointName, row.infoPointCode);
            this.dialogVisible = false;
        },
        //弹窗关闭
        // selectInfoCloseHandle() {
        //     this.majorSelectValue = null;
        //     this.sysSelectValue = null;
        //     this.devSelectValue = null;
        //     this.loading = false;
        // },
        //获取专业的接口
        getmajorSelectData() {
            this.majorSelectArr = api.getMajorSelectData();
        },
        // 改变专业下拉，获取系统的下拉列表
        changeMajorHandle(val) {
            if(!val){
                return;
            }
            this.sysSelectValue = null;
            let arr = api.getSysSelectData(val);
            if(arr){
                this.sysSelectArr = arr;
            } else {
                this.sysSelectArr = [];
            }
        },
        // 改变系统下拉，获取设备的下拉列表
        changeSysHandle(val) {
            // console.log(val);
            if(!val){
                return;
            }
            if (this.radioValue == "system") { //系统

            } else { //设备
                this.devSelectValue = null;
                let arr = api.getDevSelectData(val);
                if(arr){
                    this.devSelectArr = arr;
                }else {
                    this.devSelectArr = [];
                }  
            }
                       
        },
        // 改变设备的下拉
        changeDevHandle (val) {
            console.log(val)
        },
        //获取技术信息点
        getInfoListData() {
            this.loading = true;
            this.param = this.endCascadeValue;
            if (this.startCascadeValue == 'system') {
                this.param = this.param.substring(2,4);
            }
            if (this.startCascadeValue == 'facility') {
                this.param = this.param.substring(2,6);
            } 
            let params = {
                type: this.param,
            }
            api.getInfoListData(params).then((res) => {
                this.loading = false;
                // console.log(res);
                // let data = res;
                // let arr = data.filter((ele, index) => {
                //     return ele.firstTag ? ele.firstTag == '技术参数': null
                // })
                this.tableData = res;
            }).catch(err => {
                throw err;
            })
        }
    },
    watch: {
        //弹窗显示
        selectRatedInfoFlag() {
            this.dialogVisible = true;
            this.selectInfoValue = this.selectRatedInfoCheckedCode;
            //获取技术信息点
            // this.getInfoListData(); 
            // this.selectInfoValue = null;
            // if (this.objTypeValue == "system" || this.objTypeValue == "facility") {
            //     this.getmajorSelectData();
            // }
        },
        //获取专业的下拉列表
        objTypeValue() {
            this.radioValue = this.objTypeValue;            
        }
    }
}
 </script>
 <style lang="less" scoped>
 .problem-box{
     height: 600px;
     overflow-y: auto;
     .top{
         text-align: center;
     }
     .line{
        background-color: #ccc;
        height: 1px;
        border: none;
     }
     .content{
         .table-box{
             margin-top: 10px;
         }
     }
 }
 </style>