hb_sis_zhfx/src/views/HealthControl/infotrack2.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.wpName"
                  placeholder="风场名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="风机：">
                <el-input
                  v-model="form.wtId"
                  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.tjss"
                  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.tjfs"
                  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.description"
                  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.prodtdepttime"
                  placeholder="下单时间"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主要负责人：">
                <el-input
                  v-model="form.workleader"
                  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.departuretime"
                  placeholder="出发时间"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到达时间：">
                <el-input
                  v-model="form.arrivaltime"
                  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.gzpc"
                  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.repairedcomment"
                  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.repairedtime"
                  placeholder="消缺时间"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障时长：">
                <el-input
                  v-model="form.degradebugtype"
                  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.checkdeptlabornum"
                  placeholder="验收人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验收时间：">
                <el-input
                  v-model="form.checktime"
                  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.checkdeptopinion"
                  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="form.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="form.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="form.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="form.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="form.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="form.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="form.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="form.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>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  components: {
    SvgIcon
  },
   props: {
    data: Object,
  },
  data() {
    return {
      tabs: [
        {
          icon: "svg-gis",
          text: "GIS地貌",
        },
        {
          icon: "svg-jkp",
          text: "手环监控",
        },
        {
          icon: "svg-jk",
          text: "监控视频",
        },
      ],
      activeTab: 0,
      form: {
        wtId: "",
        wpId: "",
        wpName: "",
        tjyy: "",
        tjss: null,
        tjfs: null,
        bugnum: null,
        workgroup1: null,
        findlabornum: null,
        reportlabornum: null,
        description: null,
        departuretime: null,
        arrivaltime: null,
        prodtdeptopinion: null,
        workleader: null,
        repairedtime: null,
        repairedcomment: null,
        unresolvedbug: null,
        checktime: null,
        degradebugtype: null,
        repairdeptbugtype1: null,
        checkdeptlabornum: null,
        status: null,
        gzpc: null,
        gzjx: null,
        prodtdepttime: null,
        checkdeptopinion: null,
        rwfpsc: 0.0,
        rwfppjsc: 1066.0,
        ddxcsc: 0.0,
        ddxcpjsc: 0.0,
        qxclsc: 0.0,
        qxclpjsc: 0.0,
        yssc: 0.0,
        yspjsc: 0.0,
        workHours: null,
        rwfpsc: 0,
        rwfppjsc: 0,
        ddxcsc: 0,
        ddxcpjsc: 0,
        qxclsc: 0,
        qxclpjsc: 0,
        yssc: 0,
        yspjsc: 0,
        workHours: 0
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.form = this.data;
    });
  },
  // 函数
  methods: {
    selectTab: function (index) {
      this.activeTab = index;
    },
  },
  watch: {
    data(value) {
      this.form = value;
      this.form.tjss = value.tjss?new Date(value.tjss).formatDate("yyyy-MM-dd hh:mm:ss"):""
      this.form.prodtdepttime = value.prodtdepttime?new Date(value.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss"):""
      this.form.departuretime = value.departuretime?new Date(value.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):""
      this.form.arrivaltime = value.arrivaltime?new Date(value.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss"):""
      this.form.repairedtime = value.repairedtime?new Date(value.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss"):""
      this.form.checktime = value.checktime?new Date(value.checktime).formatDate("yyyy-MM-dd hh:mm:ss"):"" 
    },
  },
};
</script>

<style lang="less">
.track-info {
  display: flex;
  .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 240px;
    margin-left: 30px;

    .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 200px;
    height: 619px;
    margin-left: 20px;
    border-left: 1px solid #53626833;

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

    .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>