kd-aiot-frontend-eam/src/views/rulesManagement/planRules/MaintainConfig/detail.vue

<template>
  <div class="maintain_config_detail" v-loading="detailsLoading">
    <div class="main_content">
      <!-- 基本信息 -->
      <div class="base_info">
        <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
        <el-row class="base_info_content">
          <el-col :span="6">
            <span>计划单号：</span>
            <span>{{ detailsForm.code }}</span>
          </el-col>
          <el-col :span="6">
            <span>保养名称：</span>
            <span>{{ detailsForm.name }}</span>
          </el-col>
          <el-col :span="6">
            <span>保养部门：</span>
            <span>{{ detailsForm.groupName }}</span>
          </el-col>
          <el-col :span="6">
            <span>保养人员：</span>
            <span>{{ detailsForm.executorName }}</span>
          </el-col>
          <el-col :span="6">
            <span>计划完成时长：</span>
            <span>{{ detailsForm.duration }}分钟</span>
          </el-col>
          <el-col :span="6">
            <span>设备分类：</span>
            <span>{{ detailsForm.categoryName }}</span>
          </el-col>
          <el-col :span="6">
            <span>规则名称：</span>
            <span>{{ detailsForm.ruleName }}</span>
          </el-col>
<!--          <el-col :span="6">
            <span>创建部门：</span>
            <span>{{ detailsForm.createOrgName }}</span>
          </el-col> -->
          <el-col :span="6">
            <span>创建人：</span>
            <span>{{ detailsForm.createUserName }}</span>
          </el-col>
		  <el-col :span="6">
		    <span>创建时间：</span>
		    <span>{{ detailsForm.createTime }}</span>
		  </el-col>
          <el-col :span="6">
            <span>审核人：</span>
            <span>{{ detailsForm.approvalUserName }}</span>
          </el-col>
          <el-col :span="24">
            <span>备注：</span>
            <span>{{ detailsForm.remark }}</span>
          </el-col>
        </el-row>
      </div>
      <!-- 保养设备 -->
      <div class="maintain_equipment_info">
		<HeaderTitle title="保养设备" size="16px"></HeaderTitle>
        <div class="maintain_equipment_info_content">
          <div
            class="equipment_item"
            v-for="item in detailsForm.deviceInfo"
            :key="item.id"
          >
            <div class="equipment_info">
              <div class="item_info">
                <span class="item_label">设备编码</span>
                <span class="item_value">{{  item.substance.code }}</span>
              </div>
              <div class="item_info">
                <span class="item_label">设备名称</span>
                <span class="item_value">{{ item.substance.name }}</span>
              </div>
              <div class="item_info">
                <span class="item_label">设备型号</span>
                <span class="item_value">{{ item.substance.model }}</span>
              </div>
              <div class="item_info">
                <span class="item_label">设备位置</span>
                <span class="item_value">{{ item.substance.positionNames }}</span>
              </div>
            </div>
            <p>操作事项</p>
            <div class="matter_info">
              <el-table :data="matterRulesList" border>
                <el-table-column label="序号" align="center" width="80">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="事项" prop="name" />
                <el-table-column label="内容" prop="content" />
                <el-table-column label="标准" prop="norm" />
              </el-table>
            </div>
            <p>备品备件</p>
            <div class="matter_info">
              <el-table :data="item.sparePart" border>
                <el-table-column label="序号" align="center" width="80">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="备件类别名称" align="center" prop="categoryName">
                </el-table-column>
                <el-table-column label="规格型号" align="center" prop="model">
                </el-table-column>
                <el-table-column label="所需数量" align="center" prop="needNum">
                </el-table-column>
                <el-table-column label="单位" align="center" prop="unit">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getInfoById } from '@/api/ruleManagement/plan';
  import {  getDetail } from '@/api/ruleManagement/matter';

export default {
  name: 'maintainConfigDetail',
  data () {
    return {
      detailsLoading: false,
      detailsForm: {},
      matterRulesList:[]
    }
  },
  computed: {
    
  },
  mounted () {
    this.getDetailsData(this.$route.query.id)
  },
  methods: {
    // 获取详情数据
    async getDetailsData (id) {
      this.detailsLoading = true
      getInfoById(id)
        .then(res => {
          this.detailsLoading = false
          this.detailsForm = res
    		let arr = []
    		res.execute.map(item=>{
    			 arr.push(item.userName)
    		})
    		 this.$set(this.detailsForm,'executorName',arr.join(','))
    		 this._getMatterRulesDetails(res.ruleId)
        })
        .catch(() => {
          this.detailsLoading = false
        })
    },
    
    // 封装 - 获取规则下面的详情数据及事项
    async _getMatterRulesDetails (val) {		
      const res = await getDetail(val)
       this.matterRulesList = res.ruleItems
    },
  }
}
</script>

<style lang="scss" scoped>
.maintain_config_detail {
  padding: 5px 0;
  .detail_title {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    > span {
      background-color: #fff;
      line-height: 40px;
      width: 90px;
      text-align: center;
      border-top: 4px solid #1890ff;
    }
  }
  .main_content {
    background-color: #fff;
    padding: 20px 40px;
    .base_info {
      .base_info_title {
        border-bottom: 1px solid #1890ff;
        padding-bottom: 3px;
        margin-bottom: 20px;
        > span {
          display: inline-block;
          line-height: 16px;
          border-left: 6px solid #1890ff;
          padding-left: 6px;
        }
      }
      .base_info_content {
        padding: 0 100px;
        font-size: 14px;
        ::v-deep .el-col {
          margin-bottom: 20px;
          > span:first-child {
            font-weight: 700;
          }
        }
      }
    }
    .maintain_equipment_info {
      .maintain_equipment_info_title {
        border-bottom: 1px solid #1890ff;
        padding-bottom: 3px;
        margin-bottom: 20px;
        > span {
          display: inline-block;
          line-height: 16px;
          border-left: 6px solid #1890ff;
          padding-left: 6px;
        }
      }
      .maintain_equipment_info_content {
        padding: 0 30px;
        .equipment_item {
          border: 1px solid #ccc;
          font-size: 14px;
          padding: 15px;
          margin-bottom: 30px;
          .equipment_info {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #ddd;
            .item_info {
              width: 33.33%;
              height: 24px;
              line-height: 24px;
              display: flex;
              .item_label {
                width: 90px;
                text-align: center;
                background-color: #f2f2f2;
                font-weight: 700;
              }
              .item_value {
                border-bottom: 1px solid #f2f2f2;
                flex: 1;
                padding-left: 5px;
              }
              &:last-child {
                width: 100%;
                .item_value {
                  border: 0;
                }
              }
            }
          }
          > p {
            margin-top: 20px;
            color: #797979;
          }
          .matter_info {
            ::v-deep .el-table {
              th.el-table__cell {
                background-color: #f2f2f2;
                padding: 0;
              }
              td.el-table__cell {
                padding: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>