<template>
        <div>
            <span style="font-size: 10px;">搜索：</span>
		<el-select style="width: 200px" v-model="currentSubEquipnameId" placeholder="请选择"
			@change="selectCurrentpoint()">
			<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
        <el-row>
          <el-col :span="12" class="col1">
              <el-card class="box-card" v-for="(item,index) in mpArray">
                  <mpGraph :beforeData='item.before'
                           :afterData='item.after'
                           :xTime='item.time'
                           :title='item.name'></mpGraph>
              </el-card>
              </el-col>
              </el-row>
          <!-- </el-col>
          <el-col :span="12" class="col2">
              <el-card class="box-card">
                    <mpGraph :beforeData='mpArray[1].before'
                           :afterData='mpArray[1].after'
                           :xTime='mpArray[1].time'
                           :title='mpArray[1].name'></mpGraph>
              </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col1">
              <el-card class="box-card">
                  <mpGraph :beforeData='mpArray[2].before'
                           :afterData='mpArray[2].after'
                           :xTime='mpArray[2].time'
                           :title='mpArray[2].name'></mpGraph>
              </el-card>
          </el-col>
          <el-col :span="12" class="col2">
              <el-card class="box-card">
                   
              </el-card>
          </el-col>
        </el-row> -->

        </div>
</template>

<script>
import mpGraph from '@/components/mpGraph/mpGraph.vue'
import { closeSync } from 'fs';
export default {
    name:"dataDetail_graph",
    data(){
      return{
          page:1,  //当前第几页
          size:10, //当前每页页数
            currentSubEquipnameId:'',
            currentEquipId:0,
            // 父组件向子组件传递的值
            mpArray:[],
            hbasetablename:'',
            options: [{
                    id: 1,
                    name: '皮带张力'
                }, {
                    id: 2,
                    name: '1#滚筒'
                }, {
                    id: 3,
                    name: '2#滚筒'
                }],
            mpName:[],
            // 根据子设备id获取到的测点个数
            mpHeaderLength:[],
              
      }
    },
    methods:{
        // 改变当前子设备选项
            selectCurrentpoint(){
                 for (let i in this.options) {
                    if (this.options[i].id == this.currentSubEquipnameId){
                        this.subEuipname = this.options[i].name;
                        this.hbasetablename = this.options[i].hbasetablename;
                        // console.log("this.hbasetablename"+this.hbasetablename);
                        break;
                    }
                }
                this.initData();
            },
             // 根据传来的设备currentEquipId找到对应的子设备选项
            getsubEquipOption(){
                 this.getRequest('/coalManage/getSubEquipmentInfoByEquipmentId/?equipmentId=' + this.currentEquipId).then(resp=>{
                    if (resp){
                        this.options = resp.data;
                        // console.log("options");
                        // console.log(this.options);
                    }
                });
            },
            initData(){
                this.currentSubEquipnameId = parseInt(this.currentSubEquipnameId);
                console.log("id");
                console.log(this.currentSubEquipnameId);
                this.getRequest('/dataQualityMeasurePoint/getMeasurePointbySubEquipmentId/?SubEquipmentId='+ this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
                // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
                    if (resp){
                        this.mpHeaderLength = resp.data.length;
                        // 所有测点名字的数组
                        var mpNames=[];
                        for(let i=0;i<resp.data.length;i++){
                           mpNames.push(resp.data[i].name);
                        }
                        this.mpName = mpNames;
                        console.log(this.mpName);
                        this.total = resp.data.size;
                        var mpLength =  this.mpName.length;
  
                // 测点名字个数
                for(let k=0;k<mpLength;k++){
                    var arr=[];
        
                 this.getRequest('/hbase/getMeasurePointByname/?hbasetablename='+ this.hbasetablename+'&qualifier='+this.mpName[k]  + '&page=' + this.page + '&size=' + this.size ).then(resp=>{
	                // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
	                //  获取该测点治理前的数组
		            //  获取测点治理后的数组
	                    if (resp){
	                      
                            var o={
                                name:'',
                                before:[],
                                after:[],
                                time:[]
                            };
                            o.name = this.mpName[k];
                            // 取到某一个测点的治理前，后的数组
	                        for(let i=0;i<resp.data.length;i++){
	                             o.time.push(resp.data[i].rowKey);
	                            for (var key in resp.data[i].properties){
	                                if(key.indexOf("before")!==-1){
	                                    o.before.push(resp.data[i].properties[key]);
	                                }
	                                if(key.indexOf("after")!==-1){
	                                    o.after.push(resp.data[i].properties[key]);
	                                }
	                            }
	                        }
	                        arr.push(o);       
	                    }
	                });
                // if (this.$router.currentRoute.path != "/operationCenter") {
                //   clearInterval(interval)
                // }
              }
            
                
                this.mpArray = arr;
                console.log("this.mpArray")
                console.log(this.mpArray);

       
                    }
                });
            //   console.log("模糊查询的测点",this.mpName[0]);
            //   根据测点名字模糊查询测点值
            

            },
           
    },
    mounted(){
            this.currentEquipId = window.sessionStorage.getItem("dataList_currentEquipId");
            // 获取子设备选项
               this.getsubEquipOption();
            this.currentSubEquipname = this.options[0].name; //将当前子系统与id设置为下拉框第一个
            this.currentSubEquipnameId = this.options[0].id;
         
            this.initData();
         },
        destroyed() {
                clearInterval(this.timer)
            console.log("here++++++++++++++++++++")
            },
    components:{
        mpGraph
    }
         
}
</script>

<style>
.el-card{
    margin-top: 10px;
    margin-left: 35px;
    margin-right: 35px;
 
}

</style>