feat: 进度条

罗广辉

2026-01-23 426ab4e0372764a5b7e37989893888f0c87f1eb3

feat: 进度条

 applications/task-work-order/src/styles/common/cockpit.scss

@@ -1,9 +1,8 @@
//变量
$form-bg: #F2F3F5;
$form-tips: #86909C;
//灰色变量
$form-bg-gray: #DDE2ED;
$form-tips-gray: #A1A3D4;


.gd-input {
  --el-input-bg-color: #{$form-bg};
@@ -88,83 +87,6 @@
  }
}


.gd-table {
  height: 0;
  flex: 1;
  background: transparent !important;

  .el-table--border .el-table__inner-wrapper:after,
  .el-table--border:after,
  .el-table--border:before,
  .el-table__inner-wrapper:before {
    height: 0;
  }

  tr {
    background: transparent !important;
  }

  th.el-table__cell {
    height: 40px;
    border-bottom: 1px solid #DBDFF1 !important;

    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #9292C1;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  td.el-table__cell {
    padding: 9px 0;
    height: 56px;

    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #383874;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  td.operation-btns .cell {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    /* 按钮间距（推荐） */
    white-space: nowrap;
    /* 双保险 */

    a {
      min-width: 28px;
      color: #0075FF;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  th.el-table__cell:not(.fixed-column),
  td.el-table__cell:not(.fixed-column) {
    background: transparent !important;
  }

  .fixed-column {
    background-color: #1A1A2A !important;
  }
}

.gd-tree-select-popper {
  background: $form-bg !important;
  border: none !important;
@@ -242,7 +164,6 @@
    }
  }
}


.gd-date-picker-popper {
  background: #DDE2ED !important;
@@ -556,6 +477,82 @@
  }
}

.gd-table {
  height: 0;
  flex: 1;
  background: transparent !important;

  .el-table--border .el-table__inner-wrapper:after,
  .el-table--border:after,
  .el-table--border:before,
  .el-table__inner-wrapper:before {
    height: 0;
  }

  tr {
    background: transparent !important;
  }

  th.el-table__cell {
    height: 40px;
    border-bottom: 1px solid #DBDFF1 !important;

    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #9292C1;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  td.el-table__cell {
    padding: 9px 0;
    height: 56px;

    .cell {
      padding: 0 0 0 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #383874;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  td.operation-btns .cell {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    /* 按钮间距（推荐） */
    white-space: nowrap;
    /* 双保险 */

    a {
      min-width: 28px;
      color: #0075FF;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  th.el-table__cell:not(.fixed-column),
  td.el-table__cell:not(.fixed-column) {
    background: transparent !important;
  }

  .fixed-column {
    background-color: #1A1A2A !important;
  }
}

.gd-pagination-parent {
  padding-top: 30px;
  display: flex;
@@ -700,44 +697,6 @@
  .gd-input {
    width: 200px;
    height: 36px;

    .el-input__wrapper {
    }

    &.is-disabled {
      .el-input__wrapper {
      }
    }
  }

  .gd-date-picker-popper {

    .el-picker-panel {
      .el-picker-panel__body-wrapper {
        .el-picker-panel__body {

          .el-date-picker__time-header {

            .el-date-picker__editor-wrap {
              .el-time-panel {

                // 将 time-picker-popper 的样式移到这里
                .el-time-panel__header {
                }
              }
            }
          }
        }
      }
    }

    .el-popper__arrow {
      &::before {
        background: #DDE2ED !important;
        border: 1px solid #DDE2ED !important;
        box-sizing: border-box;
      }
    }
  }

  .gd-search-actions {
@@ -860,5 +819,36 @@
  }
}



.gd-timeline{
  padding-left: 120px;
  .el-timeline-item {
    height: 120px;
    &:nth-last-child(1){
      height: auto;
    }
    .el-timeline-item__tail {
      left: 15px;
      transform: translate(-15px);
      border-left-color: #4c34ff;
    }
    .el-timeline-item__node {
      width: 32px;
      height: 32px;
      background-color: #161b2c;
      transform: translate(-15px);
      &.el-timeline-item__node--success {
        background-color: #4c34ff;
      }
      .el-timeline-item__icon {
        font-size: 22px;
      }
    }
    .el-timeline-item__wrapper {
      top: 5px;
      font-size: 16px;
      .el-timeline-item__timestamp {
        margin-top: 20px;
      }
    }
  }
}

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/ViewDiaLog.vue

@@ -4,7 +4,6 @@
        v-model="visible"
        :title="titleEnum[dialogMode]"
        @closed="visible = false"
        :style="{ width: pxToRem(1216) }"
        destroy-on-close
        :close-on-click-modal="false"
    >
@@ -12,6 +11,7 @@
            <div class="leftBox">
                <!-- 查看模式 -->
                <div class="detail-container" v-if="dialogReadonly">
                    <div class="detail-title">工单详情</div>
                    <el-row class="detail-row-view">
                        <el-col :span="12">
                            <div class="label">巡查任务名称</div>
@@ -47,15 +47,14 @@
                        </el-col>
                    </el-row>
                    <template v-if="['6', '7', '8'].includes(taskStatus)">
                        <div>任务成功({{ list.length || 0 }}条)</div>
                        <div style="display: flex">
                        <div class="detail-title" :style="{ marginTop: pxToRem(10) }">任务成功({{ list.length || 0 }}条)</div>
                        <div class="imgBox">
                            <div v-for="item in list">
                                <el-image
                                    v-if="item.resultUrl"
                                    :src="item.resultUrl"
                                    :preview-src-list="[item.resultUrl]"
                                    fit="cover"
                                    style="width: 80px; height: 60px"
                                    preview-teleported
                                />
                            </div>
@@ -422,13 +421,27 @@
    display: flex;
    gap: 0 20px;
    .leftBox {
        width: 0;
        flex: 1;
        width: 920px;
        .gd-cesium {
            padding-top: 10px;
            width: 100%;
            height: 423px;
        }
    }

    .imgBox {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        > div {
            width: calc((100% - 40px) / 5); /* 5列布局，减去4个10px间隙 */
            height: 110px;
            flex-shrink: 0;
        }
        .el-image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>

 applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue

@@ -10,7 +10,7 @@
    >
        <div class="content" style="display: flex">
            <div class="processBox" v-if="dialogMode !== 'add' && processList.length">
                <el-timeline>
                <el-timeline class="gd-timeline">
                    <el-timeline-item
                        v-for="(activity, index) in processList"
                        :key="index"
@@ -149,7 +149,14 @@
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="工单备注" prop="remark">
                                <el-input class="gd-input" type="textarea" :rows="4" v-model="formData.remark" placeholder="请输入" clearable />
                                <el-input
                                    class="gd-input"
                                    type="textarea"
                                    :rows="4"
                                    v-model="formData.remark"
                                    placeholder="请输入"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
@@ -603,21 +610,19 @@

    .processBox {
        width: 312px;
        .el-timeline {
            padding-left: 100px;
        }
        .item-content {
            position: relative;
            .flowName {
                width: 80px;
                position: absolute;
                left: -100px;
                top: 0;
                left: -120px;
                top: 0px;
            }
        }
    }
}

.tipSelect{
.tipSelect {
    text-align: center;
    height: 200px;
    line-height: 200px;