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-row>
            <el-row style="margin-bottom: 10px;">
              <el-col :span="3"><div >组件属性：</div></el-col>
              <el-col :span="20">
                <el-row v-for="pro in item.property" :key="pro.property_name">
                  <el-col :span="4"><div >{{pro.property_name}}</div></el-col>
                  <el-col :span="10"><div >{{pro.value}}</div></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>
  </div>
</template>
<script>
import {getAttributeList} from "@/api/machine/machineDetails";
export default { 
  data() {
    return {
      attributeDiaLog:false,
      activeName:"first",
      attributeData:[]
    };
  },
  created() {
   
  },
  methods: {
    //弹出组件属性监控
    handleAttributeDialog(row){   
      this.attributeDiaLog=true;
      this.getAttributeList(row.id);
    },
    getAttributeList(id){
      getAttributeList(id).then((response) => {
        if(response.code==0){
          this.attributeData = response.data;
        }       
      });
    },
    attributeDiaLogCancel(){
      this.attributeDiaLog=false;
    }
  }
};
</script>

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