EMS_client/src/views/module_tpm/equipment/modules/EquipmentDetail.vue

<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    @close="close"
    destroyOnClose
    :visible="visible"
    class="equipment-detail-drawer"
    >
    <a-spin :spinning="confirmLoading" style="height: 100%;">
      <div class="u-flex-jab equipment-detail-container">
        <!-- 基础信息详情 -->
        <div class="base-info-container">
          <a-descriptions title="" layout="vertical" bordered size="middle" :column="2" class="equiment-info">
            <a-descriptions-item label="设备编号" :span="2">
              {{detailData.equipmentcode}}
            </a-descriptions-item>
            <a-descriptions-item label="设备名称" :span="2">
              {{detailData.equipmentname}}
            </a-descriptions-item>
            <a-descriptions-item label="设备分类" :span="2">
              {{detailData.equipmenttreeid_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="规格型号" :span="2">
              {{detailData.spec}}
            </a-descriptions-item>
            <a-descriptions-item label="安装地点" :span="2">
              {{detailData.address}}
            </a-descriptions-item>
            <a-descriptions-item label="区域" :span="2">
              {{detailData.spaceid_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="周期" :span="2">
              {{detailData.equipmentCycle}}
            </a-descriptions-item>
            <a-descriptions-item label="周期单位" :span="2">
              {{detailData.cycleUnit_dictText}}
            </a-descriptions-item>
            <a-descriptions-item label="出厂编号">
              {{detailData.factoryNo}}
            </a-descriptions-item>
            <a-descriptions-item label="出厂日期">
              {{detailData.productDate}}
            </a-descriptions-item>
            <a-descriptions-item label="启用日期">
              {{detailData.activeDate}}
            </a-descriptions-item>
            <a-descriptions-item label="责任部门">
              {{detailData.responseDepartment}}
            </a-descriptions-item>
            <a-descriptions-item label="负责人">
              {{detailData.responsePerson}}
            </a-descriptions-item>
            <a-descriptions-item label="领用人">
              {{detailData.recipient}}
            </a-descriptions-item>
            <a-descriptions-item label="管理状态">
              {{detailData.manageStatus_dictText}}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 巡检详情 -->
        <a-tabs default-active-key="1" @change="callback" class="equipment-cmms-tabs">
          <a-tab-pane key="1" tab="Tab 1">
            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="logData"
              class="equipment-cmms-table">

              <span slot="status" slot-scope="text, record">
                <a-tag v-if="record.status === '0'" color="orange">{{ text }}</a-tag>
                <a-tag v-if="record.status === '1' || record.priority === '2'" color="blue">{{ text }}</a-tag>
                <a-tag v-if="record.status === '3'">{{ text }}</a-tag>
              </span>

            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="Tab 2" force-render>
            Content of Tab Pane 2
          </a-tab-pane>
          <a-tab-pane key="3" tab="Tab 3">
            Content of Tab Pane 3
          </a-tab-pane>
        </a-tabs>
        
      </div>
    </a-spin>

  </a-drawer>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: 'RepairManageDetail',
    data () {
      return {
        title:"详情",
        width:'100%',
        visible: false,
        confirmLoading: false, // 加载中
        detailData: {}, // 详情
        logData: [], // 操作日志表格数据
        // 表头
        columns: [
          // {
          //   title: '序号',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'节点名称',
            align:"center",
            dataIndex: 'nodename'
          },
          {
            title:'日期',
            align:"center",
            dataIndex: 'handledate'
          },
          {
            title:'处理意见',
            align:"center",
            dataIndex: 'opinion'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
        ],
      }
    },
    methods: {
      detail (record) {
        console.log(record)
        this.detailData = record
        this.visible = true
        this.title = record.equipmentname
        // this.title = record.repairname + ' 详情'
        // this.confirmLoading = true
        // getAction('/cmmsRepair/cmmsRepair/queryById',{id:record.id}).then((res)=>{
        //   if(res.success){
        //     this.detailData = res.result
        //     this.logData = res.result.nodeList
        //   }else{
        //     this.$message.warning(res.message);
        //   }
        // }).finally(() => {
        //   this.confirmLoading = false;
        // })
      },
      close () {
        this.visible = false;
      },
      callback(key) {
        console.log(key);
      },

    }
  }
</script>

<style lang="less" scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .equipment-detail-drawer{
    height: 100vh;
    overflow: hidden;
    /deep/ .ant-drawer-body{
      height: calc(100vh - 55px);
      overflow: hidden;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .base-info-container{
      width: calc(50% - 6px);
      height: calc(100vh - 55px - 40px);
      overflow: auto;
      background-color: #fff;
      padding: 12px;
      border-radius: 4px;
      margin-right: 6px;
      .equiment-info{
      }
    }
    .equipment-cmms-tabs{
      
    }
    .equipment-cmms-table{
      width: calc(50% - 6px);
      height: calc(100vh - 55px - 40px);
      overflow: auto;
      background-color: #fff;
      padding: 12px;
      border-radius: 4px;
      margin-left: 6px;
    }
  }
</style>