kd-aiot-frontend/src/views/rulesManagement/inspectionPoint/detail.vue

<template>
  <div class="patrol_config_detail" v-loading="detailsLoading">
    <div class="main_content">
      <!-- 基本信息 -->
      <div class="base_info">
        <HeaderTitle title="基本信息" size="16px"
          ><el-button type="primary" @click="$router.go(-1)"
            >返回</el-button
          ></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.planConfigVOList[0].groupName }}</span>
          </el-col>
          <el-col :span="6">
            <span>负责人：</span>
            <span>{{ detailsForm.planConfigVOList[0].approvalUserName }}</span>
          </el-col>
          <el-col :span="6">
            <span>计划完成时长：</span>
            <span>{{ detailsForm.duration }}分钟</span>
          </el-col>
          <el-col :span="6">
            <span>创建时间：</span>
            <span>{{ detailsForm.createTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>审核人：</span>
            <span>{{
              detailsForm.planConfigVOList[0].execute
                .map((item) => item.userName)
                .join(',')
            }}</span>
          </el-col>
          <el-col :span="24">
            <span>备注：</span>
            <span>{{ detailsForm.remark }}</span>
          </el-col>
        </el-row>
      </div>
      <el-tabs v-model="tabsValue" type="card">
        <el-tab-pane
          v-for="(item, ruleIdListIndex) in ruleIdList"
          :key="item.ruleId"
          :label="item.name"
          :name="item.ruleId"
        >
          <div class="el-tab_box">
            <div class="equipmentList_box">
              <header-title title="设备列表"> </header-title>
              <el-table :data="item.equipmentList" border>
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column label="设备名称" align="center" prop="name">
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.name }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="编号" align="center" prop="codeNumber">
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.codeNumber }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="固资编码" align="center" prop="fixCode">
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.fixCode }}
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="ruleMatters_box">
              <header-title title="规则事项"> </header-title>
              <el-table :data="item.ruleItems" border>
                <el-table-column label="序号" width="50">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="事项" prop="name" width="100">
                  <template slot-scope="scope">
                    <div>
                      <span>{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="内容" prop="content" width="300">
                  <template slot-scope="scope">
                    <div>
                      <span>{{ scope.row.content }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作指导" prop="operationGuide">
                  <template slot-scope="scope">
                    <div class="operationGuide_box">
                      <div class="left_content">
                        <template v-if="scope.row.operationGuide">
                          <div
                            v-for="(item, index) in scope.row.operationGuide
                              .toolList"
                            :key="item.id"
                            >{{ index + 1 }}.{{ item.name }}</div
                          >
                        </template>
                      </div>
                      <div class="line"></div>
                      <div class="right_content">
                        <template v-if="scope.row.operationGuide">
                          <div
                            v-for="(item, index) in scope.row.operationGuide
                              .procedureList"
                            :key="item.id"
                            >{{ index + 1 }}.{{ item.content }}</div
                          >
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="标准" prop="norm" width="100">
                  <template slot-scope="scope">
                    <div>
                      <span>{{ scope.row.norm }}</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import { getInfoById } from '@/api/ruleManagement/plan';
  import { getDetail } from '@/api/ruleManagement/matter';
  export default {
    name: 'patrolConfigDetail',
    data() {
      return {
        ruleIdList: [],
        tabsValue: '',
        detailsLoading: false,
        detailsForm: {
          planConfigVOList: [{}]
        }
      };
    },
    mounted() {
      console.log('-----------------');
      this.getDetailsData(this.$route.query.id);
    },
    computed: {},
    methods: {
      // 获取详情数据
      async getDetailsData(id) {
        this.detailsLoading = true;
        getInfoById(id)
          .then((res) => {
            this.detailsLoading = false;
            console.log('====res', res);
            this.detailsForm = res;
            this.ruleIdList = res.planConfigVOList.map((item) => {
              return {
                ruleId: item.ruleId,
                name: item.ruleName,
                code: item.code,
                categoryId: item.categoryId,
                equipmentList: item.deviceInfo.map((item) => {
                  return {
                    name: item.name,
                    id: item.id,
                    fixCode: item.fixCode,
                    codeNumber: item.codeNumber
                  };
                }),
                ruleItems: item.ruleMatters
              };
            });
            this.tabsValue = this.ruleIdList[0].ruleId;
            // let arr = [];
            // res.execute.map((item) => {
            //   arr.push(item.userName);
            // });
            // this.$set(this.detailsForm, 'executorName', arr.join(','));
          })
          .catch(() => {
            this.detailsLoading = false;
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt-20 {
    margin-top: 20px;
  }
  ::v-deep .el-tab_box {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 100%;
    .equipmentList_box {
      flex: 1;
      height: 100%;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      .divider {
        flex: 0 0 50px;
        .title {
          height: 35px;
        }
      }
      .el-table {
        overflow: auto;
      }
    }
    .ruleMatters_box {
      flex: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      .divider {
        flex: 0 0 50px;
        .title {
          height: 35px;
        }
      }
      .el-table {
        overflow: auto;
        .operationGuide_box {
          width: 100%;
          display: flex;
          position: relative;
          .left_content {
            flex: 0 0 300px;
            padding: 10px;
            margin-right: 10px;
            overflow-y: auto;
          }
          .line {
            position: absolute;
            top: -10px;
            left: 300px;
            bottom: -10px;
            height: 110%;
            width: 1px;
            background-color: #ededed;
          }
          .right_content {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
          }
        }
      }
    }
  }
  .patrol_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 #157a2c;
      }
    }
    .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 60px;
          font-size: 14px;
          ::v-deep .el-col {
            margin-bottom: 20px;
            > span:first-child {
              font-weight: 700;
            }
          }
        }
      }
      .patrol_equipment_info {
        .patrol_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;
          }
        }
        .patrol_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>