kd-aiot-frontend-eam/src/views/maintenance/patrol/workOrder/details.vue

<template>
  <div class="page" v-loading="pageLoading">
    <el-form label-width="130px">
      <div class="content-detail" v-show="num == 1">
        <div class="basic-details">
          <HeaderTitle title="基本信息" size="16px">
            <el-button
              type="primary"
              @click="
                $router.push({
                  path: '/maintenance/patrol',
                  query: { title: '工单' }
                })
              "
            >
              返回</el-button
            >
          </HeaderTitle>
          <el-row>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="计划单号">
                  <span> {{ infoData.planCode }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="来源计划配置单号">
                  <span> {{ infoData.planConfigCode }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="名称">
                  <span> {{ infoData.planName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="指定执行人">
                  <span v-if="infoData.executeUsers">
                    <span v-if="executeUserType == 1">
                    {{
                      infoData.executeUsers
                        .map((i) => {
                          return `${i.teamName}`;
                        })
                        .join(',')
                    }}
                  </span>
                  <span v-else>
                    {{
                      infoData.executeUsers
                        .map((i) => {
                          return `${i.groupName}-${i.userName}`;
                        })
                        .join(',')
                    }}
                  </span>
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际执行人">
                  <span v-if="infoData.executeUserName">
                    {{ infoData.executeGroupName }}-{{
                      infoData.executeUserName
                    }}
                  </span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="计划完成时长">
                  <span v-if="infoData.duration >= 0"
                    >{{ infoData.duration }}分钟</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="周期">
                  <span v-if="infoData.ruleInfo">
                    {{ infoData.ruleInfo.cycleValue
                    }}{{
                      getDictValue('巡点检周期', infoData.ruleInfo.cycleType)
                    }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设备分类">
                  <span> {{ infoData.categoryLevelName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="规则名称">
                  <span>
                    {{ infoData.ruleName }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建部门">
                  <span> {{ infoData.createGroupName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建人">
                  <span> {{ infoData.createUserName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间">
                  <span> {{ infoData.createTime }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际开始时间">
                  <span> {{ infoData.acceptTime }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际完成时间">
                  <span> {{ infoData.finishTime }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报工时间">
                  <span> {{ infoData.reportTime }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注">
                  <span> {{ infoData.remark }} </span>
                </el-form-item>
              </el-col>
            </el-col>
            <!-- <el-col :span="8">
              <img :src="data.imageUrl" alt="" />
            </el-col> -->
          </el-row>
        </div>

        <!-- 巡点检、执行信息 -->
        <!-- <div class="execute_info">
          <div class="execute_info_title">
            <span>执行信息</span>
            <span
              >执行人：{{ data.executeUserName }}
              <i style="margin: 0 18px"></i> 执行时间：{{
                data.acceptTime
              }}</span
            >
          </div>
          <HeaderTitle title="执行信息" size="16px"></HeaderTitle>
          <el-row class="execute_row">
            <el-col :span="8" class="column">
              <span class="label">确认结果：</span>
              <span class="value">{{
                infoData.status ? infoData.status.descp : ''
              }}</span>
            </el-col>
            <el-col :span="8" class="column">
              <span class="label">实际开始时间：</span>
              <span class="value">{{ infoData.acceptTime }}</span>
            </el-col>
            <el-col :span="8" class="column">
              <span class="label">实际结束时间：</span>
              <span class="value">{{ infoData.finishTime }}</span>
            </el-col>
            <el-col :span="24" class="column">
              <span class="label">超期原因：</span>
              <span class="value">{{ infoData.timeoutCause }}</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 infoData.deviceList"
              :key="item.id"
            >
              <div class="equipment_info" v-if="item.substance">
                <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="ruleMatters_box">
                <el-table :data="item.workItems" 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="categoryCode"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <div>
                        <span>{{ scope.row.categoryCode }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="零部件名称"
                    prop="categoryName"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <div>
                        <span>{{ scope.row.categoryName }}</span>
                      </div>
                    </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-column label="状态" prop="status" width="100">
                    <template slot-scope="scope">
                      <div>
                        <span>{{ options[scope.row.status] }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="现场照片"
                    prop="photoList"
                    width="300"
                  >
                    <template slot-scope="scope">
                      <div>
                        <el-image
                          v-for="imgItem in scope.row.photoList"
                          :key="imgItem"
                          style="width: 100px; height: 100px"
                          :src="imgItem"
                          :preview-src-list="scope.row.photoList"
                        >
                        </el-image>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="结果" prop="result" width="200">
                  </el-table-column>
                </el-table>
              </div>
              <!-- <div class="matter_info">
                <el-table :data="item.workItems || []" 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="item" />
                  <el-table-column label="内容" prop="content" />
                  <el-table-column label="标准" prop="standard" />
                </el-table>
              </div> -->
            </div>
            <!-- <div class="btnbox" v-if="$route.query.isshow">
              <el-button class="confirm-btn" type="danger" plain @click="reject"
                >驳回</el-button
              >
              <el-button class="confirm-btn" type="success" plain @click="pass"
                >通过</el-button
              >
              <el-button class="cancel-btn">关闭</el-button>
            </div> -->
            <!-- <div class="textbox" v-if="showtext">
              <el-input
                type="textarea"
                placeholder="请输入驳回原因"
                v-model="cause"
                maxlength="30"
                rows="5"
                show-word-limit
              >
              </el-input>
              <div class="textbtnbox">
                <el-button size="small" round @click="cancelreject"
                  >取消</el-button
                >
                <el-button size="small" round @click="surereject"
                  >提交</el-button
                >
              </div>
            </div> -->
          </div>
        </div>
        <HeaderTitle title="备品备件申请单" size="16px"></HeaderTitle>
        <editd :id="infoData.id" />

        <!-- 巡点检、缺陷设备报修记录 -->
        <!-- <div class="repair_notes">
          <HeaderTitle title="缺陷设备报修记录" size="16px"></HeaderTitle>
          <div class="repair_notes_equipment_item">
            <el-row class="equipment_item_tilte">
              <el-col :span="8">
                <span class="label">设备名称：</span>
                <span>{{ repairNotes.equiName }}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">规格型号：</span>
                <span>{{ repairNotes.equiModel }}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">设备编码：</span>
                <span>{{ repairNotes.equiCode }}</span>
              </el-col>
            </el-row>
            <div class="main_info">
              <div>
                <span>报修记录编号：</span>
                <span>{{ repairNotes.repairsCode }}</span>
              </div>
              <div>
                <span>故障描述：</span>
                <span>{{ repairNotes.repairsDescription }}</span>
              </div>
              <div>
                <span>处理进度：</span>
                <span>{{ statusObj[repairNotes.status] }}</span>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </el-form>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getWordOrderDetail } from '@/api/maintenance/patrol_maintenance';
  import editd from '@/views/sparePartsApply/components/editd';

  export default {
    components: {
      editd
    },
    mixins: [dictMixins],
    data() {
      return {
        options: {
          0: '未定义',
          1: '正常',
          '-1': '缺陷'
        },
        num: 1,
        infoData: {},
        dialogVisible: false,
        data: {},
        repairNotes: {},
        pageLoading: false,
        typeValue: null,
        contract_type: [],
        status: [
          {
            value: true,
            label: '失效'
          },
          {
            value: false,
            label: '生效'
          }
        ],
        ruleItem: [],
        cause: '',
        showtext: false,
        from: null,
        executeUserType: ''
      };
    },
    created() {
      this.requestDict('巡点检周期');
      this.executeUserType = this.$route.query.executeUserType;
      this.getInfo();
    },
    methods: {
      // getStatus: useDictLabel(patrolMatterStatus),
      delete() {},
      // 点击切换事件
      tab(index) {
        this.num = index;
      },
      goBack() {
        window.sessionStorage.setItem('patrolTabType', 'work');
        if (this.form) {
          this.$router.push({
            path: '/workspace/workOrder',
            query: { activeName: 'polling' }
          });
        } else {
          this.$router.go(-1);
        }
      },
      // 表格数据
      getInfo() {
        this.pageLoading = true;
        getWordOrderDetail(this.$route.query.id)
          .then((data) => {
            data.deviceList.forEach((item) => {
              item.workItems.forEach((val) => {
                val.photoList.map((url) => {
                  return window.location.origin + url;
                });
              });
            });
            this.infoData = data;
            // if (res.success) {
            //   this.data = res.data;
            //   this.data.planEquiList = this.data.planEquiList.filter(
            //     (item) => item.itemList && item.itemList.length > 0
            //   );
            //   // 获取 缺陷设备报修记录
            //   const repairId = res.data.planEquiList[0].repairId;
            //   if (repairId) {
            //     this.getRepairNotes(repairId);
            //   }
            // }
            this.pageLoading = false;
          })
          .catch(() => {
            this.pageLoading = false;
          });
      },
      // 获取 缺陷设备报修记录
      async getRepairNotes(repairId) {
        const res = await repair.getInfo(repairId);
        if (res?.success) {
          console.log('缺陷设备报修记录:', res.data);
          this.repairNotes = res.data;
        }
      },
      //通过按钮事件
      pass() {
        let params = {
          planId: this.$route.query.id,
          checked: 2,
          myHandleId: this.$route.query.dbid,
          cause: this.cause,
          type: 2, //1维修;2保养，巡点检
          handleType: 0 //办理类型(0 审批 1 验收)
        };
        sendAudit(params).then((res) => {
          if (res.success) {
            this.$message.success('审批通过!');
            this.$router.back();
          }
        });
      },
      //驳回按钮事件
      reject() {
        this.showtext = true;
      },
      cancelreject() {
        this.showtext = false;
        this.cause = '';
      },
      surereject() {
        if (!this.cause) {
          this.$message.info('请填写驳回原因！');
        } else {
          let params = {
            id: this.$route.query.id,
            checked: 0,
            myHandleId: this.$route.query.dbid,
            cause: this.cause,
            type: 2, //1维修;2保养，巡点检
            handleType: 0 //办理类型(0 审批 1 验收)
          };
          sendAudit(params).then((res) => {
            if (res.success) {
              this.$message.error('审批驳回!');
              this.$router.back();
            }
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  // @import '@/assets/css/oaa.scss';
  .page {
    padding: 10px;
  }
  .page-title {
    background: #fff;
    font-size: 18px;
    padding: 6px 20px;
    font-weight: 500;
    .page-title-div {
      margin: 5px 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #eaeefb;
      .title-div-no {
        margin-left: 10px;
        font-weight: 400;
        color: #909090;
        font-size: 14px;
      }
    }
  }
  .page-data {
    padding-top: 10px;
  }
  .content-detail {
    background: #fff;
    padding: 20px;
  }
  .flows {
    .flow-left {
      width: 156px;
      height: 70px;
      border: 1px dashed #ccc;
      padding: 10px;
    }
    .row {
      margin-top: 13px;
    }
  }
  .basic-details-title {
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #1890ff;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .basic-details-title .border-span {
    height: 18px;
    font-size: 16px;
    border-left: 4px solid #1890ff;
    padding-left: 8px;

    font-weight: 500;
  }
  .heade-right {
    // float: right;
    .heade-right-content {
      margin-right: 12px;
      font-size: 14px;
      display: inline-block;
      .content-key {
        color: #3e3e3e;
        margin-right: 12px;
        font-weight: 500;
      }
      .content-value {
        color: #000;
      }
    }
  }
  .list-title {
    font-size: 14px;
    color: #3e3e3e;
    margin: 10px 0px;
  }
  .goods {
    background: #a30014;
    border: 1px solid #a30014;
  }
  .details-title {
    display: inline-block;
    color: #6e6e6e;
    font-size: 14px;
    font-weight: bold;
    margin-right: 13px;
    width: 70px;
    text-align: right;
  }
  .details-con {
    color: #3e3e3e;
    font-size: 14px;
  }
  .detailed-tab {
    margin-left: 10px;
    margin-top: 10px;
  }
  ::v-deep .el-form-item--medium .el-form-item__label {
    color: #6e6e6e;
    font-size: 14px;
    font-weight: bold;
  }
  .warehouse {
    display: block;
    border-bottom: 1px solid #eaeefb;
    padding: 10px 0;
  }
  .box-card {
    .store-box {
      width: 80%;
      .store-box-span {
        display: inline-block;
        font-size: 14px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin: 2px;
      }
    }
  }
  .vacant {
    background: #3196fb;
  }
  .inUse {
    background: #157a2c;
  }
  .invalid {
    background: #cccccc;
  }
  .full {
    background: #cc3300;
  }

  .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;
            }
          }
        }
        .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;
              }
            }
          }
        }
      }
    }
  }
  .execute_info {
    margin: 30px 0;
    .execute_info_title {
      border-bottom: 1px solid #1890ff;
      padding-bottom: 3px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      > span:first-child {
        line-height: 16px;
        border-left: 6px solid #1890ff;
        padding-left: 6px;
      }
    }
    .execute_row {
      padding: 0 30px;
      .column {
        display: flex;
        font-size: 14px;
        margin-bottom: 20px;
        .label {
          // width: 110px;
          text-align: center;
          font-weight: 700;
        }
      }
    }
  }
  .repair_notes {
    .repair_notes_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;
      }
    }
    .repair_notes_equipment_item {
      padding: 0 20px;
      .equipment_item_tilte {
        background-color: #f7f7f7;
        height: 36px;
        line-height: 36px;
        .label {
          font-weight: 700;
        }
      }
      .main_info {
        font-size: 14px;
        margin-top: 15px;
        > div {
          margin-bottom: 10px;
        }
      }
    }
  }
  .btnbox {
    display: flex;
    justify-content: center;
  }
  ::v-deep .el-button {
    padding: 10px 20px;
    margin-right: 10px;
  }
  .textbtnbox {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
</style>