sis_zhfx/src/views/HealthControl/infotrack.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', item.name == statu(form) ? 'active' : '']" v-for="(item, i) in svgarr" :key="i">
          <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="item.svg"></SvgIcon>
            </span>
          </div>
          <div class="work-flow-text">{{ item.name }}</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="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> -->
    <defect-elimination-tracking ref="det" :show="false" :formdata='formdata'></defect-elimination-tracking>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import { warn } from "@vue/runtime-core";

import DefectEliminationTracking from "../HealthControl/defect-elimination-tracking.vue";  //手环监控
export default {
  components: {
    SvgIcon,DefectEliminationTracking
  },
  props: {
    formdata: Object,
  },
  data() {
    return {
      tabs: [
        {
          icon: "svg-gis",
          text: "GIS地貌",
        },
        {
          icon: "svg-jkp",
          text: "手环监控",
        },
        {
          icon: "svg-jk",
          text: "监控视频",
        },
      ],
      svgarr: [
        {
          svg: "svg-qx-warn",
          name: "流程未启动",
        },
        {
          svg: "svg-qx-down",
          name: "消缺单已下达",
        },
        {
          svg: "svg-qx-hour-hand",
          name: "消缺单处理中",
        },
        {
          svg: "svg-对",
          name: "消缺完成",
        },
        {
          svg: "svg-qx-flag",
          name: "消缺验收",
        },
      ],

      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,
      },
    };
  },
  created() {
     this.form = this.formdata;
     console.warn(this.form);
     console.warn(this.statu(this.form));
     this.form.tjss = this.form.tjss
        ? new Date(this.form.tjss).formatDate("yyyy-MM-dd hh:mm:ss")
        : null;
      this.form.prodtdepttime = this.form.prodtdepttime
        ? new Date(this.form.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss")
        : null;
      this.form.departuretime = this.form.departuretime
        ? new Date(this.form.departuretime).formatDate("yyyy-MM-dd hh:mm:ss")
        : null;
      this.form.arrivaltime = this.form.arrivaltime
        ? new Date(this.form.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss")
        : null;
      this.form.repairedtime = this.form.repairedtime
        ? new Date(this.form.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss")
        : null;
      this.form.checktime = this.form.checktime
        ? new Date(this.form.checktime).formatDate("yyyy-MM-dd hh:mm:ss")
        : null;
  },
  // 函数
  methods: {
    showDet() {
      this.$refs.det.show();
    },
    statu(data) {
      if (null != data.checktime) {
        return "消缺验收";
      } else if (
        "等待运行验收" == data.status ||
        data.status == "集控中心修改检修时间" ||
        null != data.repairedtime
      ) {
        return "消缺完成";
      } else if (null != data.departuretime || null != data.arrivaltime) {
        return "消缺单处理中";
      } else if (
        "风机工作票已批准" == data.status ||
        data.status == "开风机工作票"
      ) {
        return "消缺单已下达";
      } else if (null == data.status || data.status == "流程未启动" || data.status == "流程未启用") {
        return "流程未启动";
      }
      else{
        return "流程未启动";
      }
    },
    selectTab: function (index) {
      this.activeTab = index;
      if(index == 1){
        this.showDet()
      }
    },
  },
};
</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 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>