sis_zhfx/src/views/HealthControl/track.vue

<template>
  <div class="track-info">
    <div class="form-info">
      <div class="work-flow">
        <div class="work-flow-line"></div>
        <div class="work-flow-item">
          <div class="work-flow-icon-item">
            <div class="work-flow-icon-o"></div>
            <div class="work-flow-icon-i"></div>
            <span class="svg-icon">
              <SvgIcon svgid="svg-qx-warn"></SvgIcon>
            </span>
          </div>
          <div class="work-flow-text">流程未启动</div>
        </div>
        <div class="work-flow-item">
          <div class="work-flow-icon-item">
            <div class="work-flow-icon-o"></div>
            <div class="work-flow-icon-i"></div>
            <span class="svg-icon">
              <SvgIcon svgid="svg-qx-down"></SvgIcon>
            </span>
          </div>
          <div class="work-flow-text">消缺单已下达</div>
        </div>
        <div class="work-flow-item">
          <div class="work-flow-icon-item">
            <div class="work-flow-icon-o"></div>
            <div class="work-flow-icon-i"></div>
            <span class="svg-icon">
              <SvgIcon svgid="svg-qx-hour-hand"></SvgIcon>
            </span>
          </div>
          <div class="work-flow-text">消缺单处理中</div>
        </div>
        <div class="work-flow-item active">
          <div class="work-flow-icon-item">
            <div class="work-flow-icon-o"></div>
            <div class="work-flow-icon-i"></div>
            <span class="svg-icon">
              <SvgIcon svgid="svg-对"></SvgIcon>
            </span>
          </div>
          <div class="work-flow-text">消缺完成</div>
        </div>
        <div class="work-flow-item">
          <div class="work-flow-icon-item">
            <div class="work-flow-icon-o"></div>
            <div class="work-flow-icon-i"></div>
            <span class="svg-icon">
              <SvgIcon svgid="svg-qx-flag"></SvgIcon>
            </span>
          </div>
          <div class="work-flow-text">消缺验收</div>
        </div>
      </div>
      <div class="form-body">
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="风场：">
                <el-input v-model="form.fc" placeholder="请填写风场名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="风机：">
                <el-input v-model="form.fj" placeholder="请输入风机名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="推荐检修时间：">
                <el-input v-model="form.tjjxsj" placeholder="请填写推荐检修时间"></el-input>
                <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="请填写推荐检修时间" popper-class="date-select"></el-date-picker> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计检修风速：">
                <el-input v-model="form.yjjxfs" placeholder="请填写预计检修风速"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="推荐理由：">
                <el-input type="textarea" :rows="3" v-model="form.tjly" placeholder="请填写推荐理由"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="下单时间：">
                <el-input v-model="form.xdsj" placeholder="请填写下单时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主要负责人：">
                <el-input v-model="form.zyfzr" placeholder="请填写主要负责人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出发时间：">
                <el-input v-model="form.cfsj" placeholder="请填写出发时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到达时间：">
                <el-input v-model="form.ddsj" placeholder="请填写到达时间"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="排查方法：">
                <el-input type="textarea" :rows="3" v-model="form.pcff" placeholder="请填写排查方法"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="处理方法：">
                <el-input type="textarea" :rows="3" v-model="form.clff" placeholder="请填写处理方法"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="消缺时间：">
                <el-input v-model="form.qxsj" placeholder="请填写消缺时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障时长：">
                <el-input v-model="form.gzsc" placeholder="请填写故障时长"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="验收人：">
                <el-input v-model="form.ysr" placeholder="请填写验收人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验收时间：">
                <el-input v-model="form.yssj" placeholder="请填写验收时间"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="验收意见：">
                <el-input type="textarea" :rows="3" v-model="form.ysyj" placeholder="请填写验收意见"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="evaluate">
      <div class="white">评价</div>
      <div class="evaluate-item">
        <div class="evaluate-label">任务分配时长</div>
        <el-input-number class="input-number" v-model="evaluate.rwfpsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">任务分配平均时长</div>
        <el-input-number class="input-number" v-model="evaluate.rwfppjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">到达现场时长</div>
        <el-input-number class="input-number" v-model="evaluate.ddxcsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">到达现场平均时长</div>
        <el-input-number class="input-number" v-model="evaluate.ddxcpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">缺陷处理时长</div>
        <el-input-number class="input-number" v-model="evaluate.qxclsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">缺陷处理平均时长</div>
        <el-input-number class="input-number" v-model="evaluate.qxclpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">验收时长</div>
        <el-input-number class="input-number" v-model="evaluate.yssc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">验收平均时长</div>
        <el-input-number class="input-number" v-model="evaluate.yspjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
        <div class="evaluate-unit">min</div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab-box">
        <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click="selectTab(index)">
          <span class="svg-icon svg-icon-md" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
            <SvgIcon :svgid="tab.icon"></SvgIcon>
          </span>
          <span>{{ tab.text }}</span>
        </div>
      </div>
    </div>
    <DefectEliminationTracking ref="det" :show="showDefectEliminationTracking"></DefectEliminationTracking>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import DefectEliminationTracking from "./defect-elimination-tracking.vue";
export default {
  components: {
    SvgIcon,
    DefectEliminationTracking,
  },
  data() {
    return {
      tabs: [
        {
          icon: "svg-gis",
          text: "GIS地貌",
        },
        {
          icon: "svg-jkp",
          text: "手环监控",
        },
        {
          icon: "svg-jk",
          text: "监控视频",
        },
      ],
      activeTab: 0,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        fc: "",
        fj: "",
        tjjxsj: "",
        yjjxfs: "",
        tjly: "",
        xdsj: "",
        zyfzr: "",
        cfsj: "",
        ddsj: "",
        pcff: "",
        clff: "",
        qxsj: "",
        gzsc: "",
        ysr: "",
        yssj: "",
        ysyj: "",
      },
      evaluate: {
        rwfpsc: 11,
        rwfppjsc: 11,
        ddxcsc: 11,
        ddxcpjsc: 11,
        qxclsc: 11,
        qxclpjsc: 11,
        yssc: 11,
        yspjsc: 11,
      },
    };
  },
  // 函数
  methods: {
    selectTab: function(index) {
      this.activeTab = index;
      switch (index) {
        case 0:
        case 2:
          this.$refs.det.close();
          break;
        case 1:
          this.$refs.det.show();
          break;
      
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less">
.track-info {
  display: flex;
  position: relative;
  .form-info {
    flex: 0 0 720px;
    .work-flow {
      height: 132px;
      width: 100%;
      background: fade(@gray, 20);
      margin-bottom: 8px;
      padding: 26px 69px;
      display: flex;
      position: relative;

      .work-flow-line {
        position: absolute;
        width: 600px;
        height: 4px;
        left: calc(50% - 300px);
        top: calc(50% - 11px);
        background: @green;
      }

      .work-flow-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.active {
          .work-flow-icon-item {
            .work-flow-icon-o {
                border: 1px solid @green;
                opacity: 0.4;
              }

              .work-flow-icon-i {
                border: 2px solid @green;
                background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,@green 100%);
              }

              .svg-icon {
                svg {
                  use {
                    fill: @green;
                  }
                }
              }
          }

          .work-flow-text {
            color: @green;
          }
          
        }

        .work-flow-icon-item {
          width: 60px;
          height: 60px;
          position: relative;

          .work-flow-icon-o {
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid #B3BDC0;
            opacity: 0.4;
          }

          .work-flow-icon-m {
            position: absolute;
            top: 1px;
            left: 1px;
            width: 59px;
            height: 59px;
            border-radius: 50%;
            border: 4px solid #212b2b;
          }

          .work-flow-icon-i {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid #606769;
            background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,#606769 100%);
          }

          .svg-icon {
            position: absolute;
            width: 26px;
            height: 26px;
            top: calc(50% - 10px);
            left: calc(50% - 13px);
            svg {
               width: 26px;
              height: 26px;
              use {
                fill: @gray-l;
              }
            }
          }
          
        }

        .work-flow-text {
            color: @gray-l;
            margin-top: 8px;
            font-size: @fontsize-s;
          }
      }
    }
  }

  .evaluate {
    flex: 0 0 358px;
    margin-left: 69px;

    .evaluate-item {
      display: flex;
      align-items: center;
      margin-top: 8px;

      .evaluate-label {
        width: 120px;
        text-align: right;
      }

      .evaluate-label,
      .evaluate-unit {
        font-size: @fontsize;
        color: @gray-l;
      }

      .input-number {
        display: inline-block;
        width: 62px;
        margin: 0 16px;
      }
    }

    
  }

  .tabs {
    flex: 0 0 220px;

    height: 619px;
    border-left: 1px solid #53626833;

    .tab-box {
    margin: 1.852vh 2.778vh;
    display: inline-block;
    z-index: 2;
    position: relative;
    margin: 26px auto;

    .tab-item {
      display: flex;
      align-items: center;
      // justify-content: center;
      font-size: @fontsize-l;
      cursor: pointer;
      // width: 120px;
      padding: 8px;
      margin-bottom: 16px;

      &.active {
        color: @green;
        position: relative;
        background-image: @greenLinearTop;

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 5px;
          border: 1px solid @green;
          border-top: 0;
          left: 0;
          bottom: 0;
          box-sizing: border-box;
        }
      }

      .svg-icon {
        margin-right: 16px;
      }
    }
  }
  }
}
</style>