machineDetailsAttribute.vue

<template>
  <div>
    <el-dialog title="组件属性监控" :visible.sync="attributeDiaLog" width="700px" append-to-body class="dialogClass">
      <el-tabs v-model="activeName" >
        <el-tab-pane label="组件属性" name="first" >     
          <div v-for="item in attributeData" :key="item.id">
            <el-row style="margin-bottom: 10px;">
              <el-col :span="3"><div >组件名称：</div></el-col>
              <el-col :span="10"><div >{{item.component_name}}</div></el-col>
              <el-col :span="11"><div >经验值：</div></el-col>
            </el-row>
            <el-row style="margin-bottom: 15px;">
              <el-col :span="3"><div >组件属性：</div></el-col>
              <el-col :span="15">
                <el-row v-for="pro in item.property" :key="pro.property_name">
                  <el-col :span="8"><div >{{pro.property_name}}</div></el-col>
                  <el-col :span="8"><div >{{pro.value}}</div></el-col>
                  <el-col :span="8">
                    <el-button size="mini" round v-show="showBut(pro.experience_value)"   @click="clickExperience(pro.property_id)" style="padding:2px">添加经验值</el-button>

                    <span style="color:blue;cursor:pointer" @click="showJYZ(pro);"> {{showJYZ_TEXT(pro.experience_value)}}</span>
                    
                  </el-col>
                </el-row>
              </el-col>              
            </el-row>
            <el-divider/>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="attributeDiaLogCancel" >确定</el-button>
        <el-button @click="attributeDiaLogCancel">退出</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加经验值" :visible.sync="experienceValueDiaLog" width="500px" append-to-body>
      <div>
        <el-row v-for="(item,idx) in experienceList" :key="idx">          
          <el-col :span="5" style="display: flex; align-items: center;">
            <div>
              <el-input v-model="item.milli_second"/>
            </div>
            <div style="margin-left: 10px;">
              <span>秒</span>
            </div>
          </el-col>          
          <el-col :span="5" style="display: flex; align-items: center;margin-left: 10px;">
            <div>
              <el-input v-model="item.quantity"/>
            </div>
            <div style="margin-left: 10px;">
              <span>克</span>
            </div>
          </el-col>
          <el-col :span="3" style="margin-left: 10px;">
            <el-button @click="addItem">+</el-button>
          </el-col> 
          <el-col :span="3">
            <el-button v-show="experienceShow"   @click="subtractItem(idx)">-</el-button>
          </el-col>        
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="experienceSubmit" >确定</el-button>
        <el-button @click="experienceCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getAttributeList,addProperty} from "@/api/machine/machineDetails";
export default { 
  data() {
    return {
      attributeDiaLog:false,
      activeName:"first",
      attributeData:[],
      experienceValueDiaLog:false,
      experienceList:[{quantity:null,milli_second:null}],
      experienceShow:true,
      machine_id:'',
      property_id:'',
      experienceValueShow:false
    };
  },
  created() {
   
  },
  methods: {
    //弹出组件属性监控
    handleAttributeDialog(row){   
      this.attributeDiaLog=true;
      this.machine_id=row.id;
      this.getAttributeList(this.machine_id);
    },
    getAttributeList(id){
      getAttributeList(id).then((response) => {
        if(response.code==0){
          this.attributeData = response.data;
        }       
      });
    },
    //关闭组件属性监控
    attributeDiaLogCancel(){
      this.attributeDiaLog=false;
    },
    //弹出经验值
    clickExperience(propertyId){
      this.property_id=propertyId;
      this.experienceList=[{quantity:null,milli_second:null}]
      if(this.experienceList.length==1){
        this.experienceShow=false;
      }
      this.experienceValueDiaLog=true;
    },
    //新增一行经验值
    addItem(){
      this.experienceList.push({quantity:null,milli_second:null});
      this.experienceShow=true;      
    },
    //删除一行经验值
    subtractItem(idx){
      this.experienceList.splice(idx, 1);
      if(this.experienceList.length==1){
        this.experienceShow=false;
      }
    },
    //提交经验值
    experienceSubmit(){
      var regular=/(^[+]{0,1}([0-9]+)$)/; 
      let hang=0;
      for(let i=0;i<this.experienceList.length;i++){
        hang=i+1;
        if(!regular.test(this.experienceList[i].milli_second)){         
          this.$message.error('第'+hang+'行,秒,请输入大于0的正数');
          return;          
        }else{
          this.experienceList[i].milli_second=parseFloat(this.experienceList[i].milli_second);
        }
        if(!regular.test(this.experienceList[i].quantity)){         
          this.$message.error('第'+hang+'行,克,请输入大于0的正数');
          return;          
        }else{
          this.experienceList[i].quantity=parseFloat(this.experienceList[i].quantity);
        }
      }
      let obj={
        "machine_id": this.machine_id,  
        "property_id": this.property_id,  
        "data":this.experienceList
      }
      addProperty(obj).then((response) => {
        if(response.code==0){
          this.$modal.msgSuccess("添加经验值成功!");
          this.getAttributeList(this.machine_id);         
          this.experienceValueDiaLog=false;
        }       
      });
    },
    //关闭经验值
    experienceCancel(){
      this.experienceValueDiaLog=false;
    },
    //经验值回显处理
    showBut(val){
      if(val!=""){
        this.experienceValueShow=false;
        return false;
      }else{
        this.experienceValueShow=true;
        return true;
      }
    },
    showJYZ_TEXT(exp_value){
      let rval = '';
      if(exp_value){
        exp_value = JSON.parse(exp_value)
        for(let i=0;i<exp_value.length;i++){
          let exp = exp_value[i]
          rval +=''+ exp.milli_second+"秒"+exp.quantity+"克" +'  '         
        }
      }      
      return rval
    },
    showJYZ(pro){
      this.property_id=pro.property_id;
      this.experienceList = JSON.parse(pro.experience_value);
      if(this.experienceList.length==1){
        this.experienceShow=false;
      }
      this.experienceValueDiaLog=true;
    }
  }
};
</script>

<style lang="scss">
.dialogClass .el-dialog__body {
  padding: 0px 20px;
}
</style>