large_screen/src/views/personnel_location/dataStandard/dataQualityMeasurePoint.vue

<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据质量</el-breadcrumb-item>
            <el-breadcrumb-item>煤矿</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/dataQualitySystem'}">系统</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/dataQualitySubsystem'}">子系统</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/dataQualityDevice'}">设备</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/dataQualitySubdevice'}">子设备</el-breadcrumb-item>
            <el-breadcrumb-item>测点</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 页面主体区域 -->
        <el-main>
            <div class="block">
                <span class="demonstration" style="font-size: 10px;">搜索：</span>
                <el-cascader
                        v-model="value"
                        :options="measurepointoptions"
                        :props="{ expandTrigger: 'hover'}"
                        separator=" | "
                        style="width: 50%;"
                        placeholder="王家岭煤矿 | 煤流运输系统 | 2煤中央皮带子系统 | 头部1#驱动电机 | 电机本体"
                >
                    <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <span v-if="!node.isLeaf">({{ data.children.length }})</span>
                    </template>
                </el-cascader>

                <!--搜索框后面的取消选择和修改按钮-->
                <el-button @click="toggleSelection()" style="margin: 20px 10px"  type="primary" size="medium">取消选择</el-button>
                <el-button @click="updateMany()" :disabled="multipleSelection.length==0" style="margin: 20px 10px " type="primary" icon="el-icon-edit" size="medium">批量修改</el-button>
                <!--测试-新增测点的Test-->
                <!--<el-button @click="addMeasurePoint()" style="margin: 20px 10px " type="primary" icon="el-icon-edit" size="medium">新增测点的Test</el-button>-->
            </div>
            <br>

            <!--页面内容-->
            <el-card>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        border stripe>
                    <el-table-column type="selection" width="40"></el-table-column>
                        <el-table-column prop="name" label="测点" header-align="center" align="center" width="150">
                        </el-table-column>
                    <el-table-column label="完整性" header-align="center" align="center">
                        <el-table-column prop="isExisted" label="数据是否存在" header-align="center" align="center" width="130">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="准确性" header-align="center" align="center" width="150">
                        <el-table-column prop="type" label="数据类型" header-align="center" align="center" width="120">
                        </el-table-column>
                        <el-table-column label="阈值范围" header-align="center" align="center">
                            <el-table-column prop="uprange" label="上阈值" header-align="center" align="center" width="120">
                            </el-table-column>
                            <el-table-column prop="lowrange" label="下阈值" header-align="center" align="center" width="120">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="rationality" label="数据合理范围" header-align="center" align="center" >
                            <el-table-column prop="rationalityuprange" label="上阈值" header-align="center" align="center" width="120">
                            </el-table-column>
                            <el-table-column prop="rationalitylowrange" label="下阈值" header-align="center" align="center" width="120">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="storage_len" label="数据存储长度" header-align="center" align="center" width="130">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="时效性" header-align="center" align="center" width="150">
                        <el-table-column prop="timedelay" label="时延要求" header-align="center" align="center" width="140">
                        </el-table-column>
                        <el-table-column prop="timesequence" label="时序性要求" header-align="center" align="center" width="140">
                        </el-table-column>
                    </el-table-column>
                
                </el-table>

      
              
                <!--批量修改对话框里面的内容-->
                <el-dialog title="批量修改测点数据质量" :visible.sync="ManyMPdialogVisible" width="100%" top="5vh" :before-close="cancel" >
                    <span slot="footer" class="dialog-footer">
                        <!--这里应该还有一个保存的方法没写-->
                        <el-button @click="cancel()">取 消</el-button>
                        <el-button type="primary" @click="saveMany()">确 定</el-button>
                    </span>
                    <el-table :data="ManyMPtable" >
                            <el-table-column prop="name" label="测点" header-align="center" align="center" width="150">
                            </el-table-column>
                        <el-table-column label="完整性" header-align="center" align="center">
                            <el-table-column prop="isExisted" label="数据是否存在" header-align="center" align="center" width="230" >
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.isExisted" slot="prepend" size="small" style="width:35%;margin-top:10px">
                                        <el-option
                                                v-for="item in isExistedoptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="scope.row.isExistedmethod" placeholder="请选择治理函数" slot="append" size="small" style="width:65%;margin-top:10px">
                                        <el-option
                                                v-for="item in Methodoptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="准确性" header-align="center" align="center">
                            <el-table-column prop="type" label="数据类型" header-align="center" align="center" width="230">
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()" ></span>
                                    <el-input v-model="scope.row.type" style="width:35%" ></el-input>
                                    <el-select v-model="scope.row.typemethod" placeholder="请选择治理函数" slot="append" size="small" style="width:65%;margin-top:10px">
                                        <el-option
                                                v-for="item in Methodoptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="阈值范围" header-align="center" align="center" width="350">
                                <el-table-column prop="uprange" label="上阈值" header-align="center" align="center" width="100">
                                    <template slot-scope="scope">
                                        <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                        <el-input v-model="scope.row.uprange" ></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lowrange" label="下阈值" header-align="center" align="center" width="100" >
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                    <el-input v-model="scope.row.lowrange" ></el-input>
                                </template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="rationality" label="数据合理范围" header-align="center" align="center" width="220">
                                <el-table-column prop="rationalityuprange" label="上阈值" header-align="center" align="center" width="100">
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                    <el-input v-model="scope.row.rationalityuprange" ></el-input>
                                </template>
                                </el-table-column>
                                <el-table-column prop="rationalitylowrange" label="下阈值" header-align="center" align="center" width="100">
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                    <el-input v-model="scope.row.rationalitylowrange" ></el-input>
                                </template>
                                </el-table-column>
                            </el-table-column>
                                    <el-table-column prop="method" label="数据合理范围治理函数" header-align="center" align="center" width="150">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.rationalitymethod" placeholder="请选择治理函数" slot="append" size="small" style="width:100%;margin-top:10px">
                                                <el-option
                                                        v-for="item in Methodoptions"
                                                        :key="item.id"
                                                        :label="item.name"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                            <el-table-column prop="storage_len" label="数据存储长度" header-align="center" align="center" width="205">
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                    <el-input v-model="scope.row.storage_len" style="width:30%"></el-input>
                                    <el-select v-model="scope.row.storage_lenmethod" placeholder="请选择治理函数" slot="append" size="small" style="width:70%;margin-top:10px">
                                        <el-option
                                                v-for="item in Methodoptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="时效性" header-align="center" align="center">
                            <el-table-column prop="timedelay" label="时延要求" header-align="center" align="center" width="220">
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                    <el-input v-model="scope.row.timedelay" style="width:30%"></el-input>
                                    <el-select v-model="scope.row.timedelaymethod" placeholder="请选择治理函数" slot="append" size="small" style="width:70%;margin-top:10px">
                                        <el-option
                                                v-for="item in Methodoptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="timesequence" label="时序性要求" header-align="center" align="center" width="220">
                                <template slot-scope="scope">
                                    <span style="width: 100%" @dblclick="dblcmodify()"></span>
                                    <el-input v-model="scope.row.timesequence" style="width:30%"></el-input>
                                    <el-select v-model="scope.row.timesequencemethod" placeholder="请选择治理函数" slot="append" size="small" style="width:70%;margin-top:10px">
                                        <el-option
                                                v-for="item in Methodoptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="版本" header-align="center" align="center" width="100">
                            <template slot-scope="scope">
                                <el-input type="textarea" v-model="scope.row.version"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="修改记录" header-align="center" align="center" width="220">
                            <template slot-scope="scope">
                            <el-input type="textarea" v-model="scope.row.modifyrecord"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="修改原因" header-align="center" align="center" width="220">
                            <template slot-scope="scope">
                                <el-input type="textarea" v-model="scope.row.modifyreason"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>

                <!-- 分页区域 -->
                <div style="display: flex;justify-content: center">
                    <el-pagination
                            background
                            @current-change="currentChange"
                            @size-change="sizeChange"
                            :current-page="page"
                            :page-size="size"
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total">
                    </el-pagination>
                </div>

            </el-card>
        </el-main>
    </div>
</template>

<script>
    
    export default {
        name: "dataQualityMeasurePoint",
        data() {
            return {
                multipleSelection: [],
                modifyMPdialogVisible: false,
                checkMPdialogVisible: false,
                ManyMPdialogVisible: false,
                inputisExistedMethod: '',
                versionsShow: true,

                value:[],
                isExistedoptions: [{
                    value: '1',
                    label: '是',
                }, {
                    value: '0',
                    label: '否',
                }],

                Methodoptions: [],

                // value: [],
                // versionoptions: [{
                //     value: 'v1.0',
                //     label: 'v1.0',
                // }, {
                //     value: 'v2.0',
                //     label: 'v2.0',
                // }, {
                //     value: 'v3.0',
                //     label: 'v3.0',
                // }],
                // versionoptions: [],

                value: [],
                measurepointoptions: [{
                    value: 'WJL',
                    label: '王家岭煤矿',
                    children: [{
                        value: 'MLYS',
                        label: '煤流运输系统',
                        children: [{
                            value: '2MZYPDSS',
                            label: '2煤中央皮带子系统',
                            children: [{
                                value: 'PDBT',
                                label: '皮带本体',
                                children: [{
                                    value: 'PDBT',
                                    label: '皮带本体',
                                }]
                            }, {
                                value: '',
                                label: '头部1#驱动电机',
                                children: [{
                                    value: 'DJBT',
                                    label: '电机本体',

                                }, {
                                    value: 'JSJ',
                                    label: '减速机',
                                }, {
                                    value: 'BPQ',
                                    label: '变频器',
                                }, {
                                    value: 'GYKGG',
                                    label: '高压开关柜',
                                }]
                            }]
                        }, {
                            value: 'ZPDPDSS',
                            label: '主平硐皮带子系统'
                        }, {
                            value: 'SCPDSS',
                            label: '上仓皮带子系统'
                        }]
                    }, {
                        value: 'AQJC',
                        label: '安全监控系统',
                    }]
                }, {
                    value: 'ZJL',
                    label: '张家岭煤矿',
                }, {
                    value: 'BALS',
                    label: '巴拉素煤矿',
                }, {
                    value: 'XXX',
                    label: 'xxx煤矿'
                }],

                visible: false,
                // tableData: [{
                //     id:'',
                //     name: '电机绕组A相温度',
                //     isExisted: '是',
                //     type: 'float',
                //     uprange: '120.0',
                //     rationalityuprange: '125.0',
                //     unit: '℃',
                //     storage_len: '50',
                //     timedelay: '5s',
                //     timesequence: '10s',
                //     version: [],
                // }, {
                //     id:'',
                //     name: '电机绕组B相温度',
                //     isExisted: '是',
                //     type: 'float',
                //     uprange: '120.0',
                //     rationalityuprange: '125.0',
                //     unit: '℃',
                //     storage_len: '50',
                //     timedelay: '5s',
                //     timesequence: '10s',
                //     version: [],
                // }],

                tableData: [{
                    id:'',
                    name: '',
                    isExisted: '',
                    type: '',
                    uprange: '',
                    rationalityuprange: '',
                    unit: '',
                    storage_len: '',
                    timedelay: '',
                    timesequence: '',
                    version: '',
                    versionoptions: [],
                }],

                ManyMPtable: [{
                    id:'',
                    name: '',
                    isExisted: '',
                    isExistedmethod: '',
                    type: '',
                    typemethod: '',
                    uprange: '',
                    lowrange: '',
                    rationalityuprange: '',
                    rationalitylowrange: '',
                    rationalitymethod: '',
                    storage_len: '',
                    storage_lenmethod: '',
                    timedelay: '',
                    timedelaymethod: '',
                    timesequence: '',
                    timesequencemethod: '',
                    modifyrecord: '',
                    modifyreason: '',
                }],
                currentSubEquipmentId: 1,
                page:1,  //当前第几页
                size:10, //当前每页个数
                total:100, //全部数据行数
            }
        },
        mounted(){
            this.currentSubEquipmentId = window.sessionStorage.getItem("dataQualitysubdeviceId");
            if(this.currentSubEquipmentId == null) this.currentSubEquipmentId=1; //如果从菜单栏直接进入就没有上一级传过来的id
            this.initData();
            this.updateMeasurePoint();
            this.checkMeasurePoint();
            this.getMethodOptions();
        },
        methods: {
            // 监听 pagesize 改变的事件
            currentChange(currentPage){
                this.page=currentPage;
                this.initData();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initData();
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //批量处理
            updateMany() { //批量修改
                this.ManyMPdialogVisible = true;
                this.ManyMPtable = this.$refs.multipleTable.selection;
                //让modifyreason和modifyrecord变成空
                localStorage.setItem('obj', JSON.stringify(this.tableData)); //暂存原始数据
            },

            cancel() {  //批量修改弹窗的“取消按钮”和“关闭按钮（二者效果同理）”，如果取消则恢复原来的数据
                let Item = JSON.parse(localStorage.getItem('obj'));
                this.tableData = Item;
                this.ManyMPdialogVisible = false;
            },

            saveMany() { //批量修改弹窗的保存按钮
                this.ManyMPtable.forEach(item=>{ //映射一下isExistedd
                    if(item.isExisted=="是") this.$set(item, "isExisted",1);
                    else if(item.isExisted=="否") this.$set(item, "isExisted", 0);
                    });
                this.postRequest('/dataQualityMeasurePoint/insertManyDataQuality', this.ManyMPtable).then(resp => {
                    if (resp) {
                        this.ManyMPdialogVisible = false;
                        this.$refs.multipleTable.clearSelection(); //取消显示选中
                        // 映射一下isExisted的显示问题
                        this.ManyMPtable.forEach(item=>{
                            if(item.isExisted==1) this.$set(item,"isExisted","是");
                            else if(item.isExisted==0) this.$set(item,"isExisted","否");
                        });
                    }
                });
            },

            // 单个修改-展示修改对话框
            updateMeasurePoint(data,row) {  // 弹框修改测点,data是那一行的数据，row是行号，从0开始
                this.$nextTick(() => {
                    this.modifyMPdialogVisible = true;
                    this.$refs.modifyMeasurePoint.init(this.tableData[row],row);
                });
            },

            getChildData(arg){ //数据从子组件传到父组件,通过是否点击了取消按钮判断是否需要恢复数据
                let isCancel = arg[0];
                let row = arg[1];
                let Item = JSON.parse(localStorage.getItem('obj'));
                if(isCancel) this.$set(this.tableData,row,Item);
            },

        

            checkMeasurePoint(row) { //查看测点更多治理函数
                this.$nextTick( () => {
                    this.checkMPdialogVisible=true;
                   
                })
            },

      

            getMethodOptions() {  //拿到全部的治理函数
                this.getRequest('/dataQualityMeasurePoint/getAllMethod').then( resp => {
                    if(resp) {
                        this.Methodoptions = resp.data;
                    }
                })
            },
            initData(){
                this.currentSubEquipmentId = parseInt(this.currentSubEquipmentId);
                this.getRequest('/dataQualityMeasurePoint/getMeasurePointbySubEquipmentId/?SubEquipmentId=' + this.currentSubEquipmentId +
                    '&page='+ this.page + '&size='+this.size).then( resp =>{   //通过子设备id拿到所有的测点数据质量要求，并且显示最新版本
                    if (resp){
                        this.tableData = resp.data;
                        // this.ManyMPtable = resp.data;
                        this.total = resp.data.size;
                        this.tableData.forEach(item=>{ //拿到各个测点的versionoptions
                            this.getRequest('/dataQualityMeasurePoint/getVersionOptionsbyMeasurePointId/?MeasurePointId=' + item.mpId).then( resp=> {
                                if(resp) {
                                    this.$set(item, "versionoptions", resp.data)
                                }
                            });
                        })
                    }
                    // console.log(this.tableData);
                })


            }
        },
    }
</script>


<style scoped>

</style>