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', 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="风场名称" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="风机：">
                <el-input v-model="form.wtId" placeholder="风机名称" readonly></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="推荐检修时间" readonly></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="预计检修风速" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="推荐理由：">
                <el-input type="textarea" resize="none" :rows="3" v-model="form.description" placeholder="推荐理由"
                  readonly></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="下单时间" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主要负责人：">
                <el-input v-model="form.workleader" placeholder="主要负责人" readonly></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="出发时间" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到达时间：">
                <el-input v-model="form.arrivaltime" placeholder="到达时间" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="排查方法：">
                <el-input type="textarea" resize="none" :rows="3" v-model="form.gzpc" placeholder="排查方法" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="处理方法：">
                <el-input type="textarea" resize="none" :rows="3" v-model="form.repairedcomment" placeholder="处理方法"
                  readonly></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="消缺时间" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障时长：">
                <el-input v-model="form.degradebugtype" placeholder="故障时长" readonly></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="验收人" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验收时间：">
                <el-input v-model="form.checktime" placeholder="验收时间" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="验收意见：">
                <el-input type="textarea" resize="none" :rows="3" v-model="form.checkdeptopinion" placeholder="验收意见"
                  readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="evaluate">
      <div class="white">评价</div>
      <div class="evaluate-item" :class="(form.rwfpsc > form.rwfppjsc ? ' warColor' : '')">
        <div class="evaluate-label">任务分配时长</div>
        <el-input v-model="form.rwfpsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">任务分配平均时长</div>
        <el-input v-model="form.rwfppjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item" :class="(form.ddxcsc > form.ddxcpjsc ? ' warColor' : '')">
        <div class="evaluate-label">到达现场时长</div>
        <el-input v-model="form.ddxcsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">到达现场平均时长</div>
        <el-input v-model="form.ddxcpjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item" :class="(form.qxclsc > form.qxclpjsc ? ' warColor' : '')">
        <div class="evaluate-label">缺陷处理时长</div>
        <el-input v-model="form.qxclsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">缺陷处理平均时长</div>
        <el-input v-model="form.qxclpjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item" :class="(form.yssc > form.yspjsc ? ' warColor' : '')">
        <div class="evaluate-label">验收时长</div>
        <el-input v-model="form.yssc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <div class="evaluate-unit">min</div>
      </div>
      <div class="evaluate-item">
        <div class="evaluate-label">验收平均时长</div>
        <el-input v-model="form.yspjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
        <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(tab,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 class="dialog-box">
      <el-dialog title="消缺历史" v-model="dialogVisible" width="1200px" height='800px' custom-class="modal"
        :close-on-click-modal="false">
        <div class="diamain">
          <div class="left">
            <el-tree :data="data" :props="defaultProps" node-key="id" :default-expand-all="true" custom-class="modal"
              @node-click="handleNodeClick"></el-tree>
          </div>
          <div class="right">
            <div class="table-box">
              <ComTable :data="tableData" height="700px"></ComTable>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="查看监控视频" v-model="videoBoxShow" width="80%" height='800px' custom-class="modal"
      :close-on-click-modal="true">
      <video class="videoPlayer" id="videoPlayer" muted autoplay webkit-playsinline playsinline></video>
    </el-dialog>
    <el-dialog title="GIS地貌" v-model="gisBoxShow" width="80%" custom-class="modal gisBox" :close-on-click-modal="true">
      <iframe width="100%" height="100%" src="http://10.155.32.4:8070/gisweb/ditujiankang.html?LAT=106.23507&LNG=38.48989&userid=1500" sryle="width:100%;height:100%;"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import DefectEliminationTracking from "../HealthControl/defect-elimination-tracking.vue"; //手环监控
import $ from 'jquery';
export default {
  components: {
    SvgIcon, ComTable,
    DefectEliminationTracking,
  },
  props: {
    formdata: Object,
  },
  data () {
    return {
      gisBoxShow: false,
      videoBoxShow: false,
      location: '',
      tableData: {
        column: [
          {
            name: "消缺描述",
            field: "xqms",
            is_light: false
          },
          {
            name: "消缺人员",
            field: "xqry",
            is_light: false
          },
          {
            name: "消缺时间",
            field: "xqsj",
            is_light: false
          },
          {
            name: "更换部件",
            field: "ghbj",
            is_light: false
          },
          {
            name: "更换原因",
            field: "ghyy",
            is_light: false
          },
          {
            name: "更换数量",
            field: "ghsl",
            is_light: false
          },
        ],
        data: [],
      },
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: false,
      tabs: [
        {
          icon: "svg-gis",
          text: "GIS地貌",
        },
        {
          icon: "svg-jkp",
          text: "手环监控",
        },
        {
          icon: "svg-jk",
          text: "监控视频",
        },
        {
          icon: "svg-jk",
          text: "消缺历史",
        },
      ],
      activeTab: 0,
      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: "消缺验收",
        },
      ],
      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
      },

      videoConfigHost: '10.155.32.4:9984', // 视频 host
      // videoConfigHost: 'localhost:9984', // 视频 host
      videoConfigToken: 'stream-1', // 视频 token
      videoConfigStreamprofile: 'Profile_1', // 视频流文件
      videoPlayer: null // 视频播放实例
    };
  },
  created () {
    this.setData();
  },

  updated () {
    this.setData();
  },

  onmounted () {
    this.cancelPlay();
  },

  // 函数
  methods: {
    setData () {
      this.form = this.formdata;
      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;
    },
    handleNodeClick (data) {
      this.location = data.id
      this.searchTab(data.id)
    },
    DateformatDate (val) {
      return new Date(val).formatDate("yyyy-MM-dd hh:mm:ss");
    },
    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 "流程未启动";
      }
    },
    async searchH () {
      const { data } = await this.API.requestData({
        method: "POST",
        subUrl: "/recommen/findLocationTreeByWtId",
        data: {
          wtId: this.form.wtId,
        },
      })
      this.dialogVisible = true
      this.data = data.data
      this.location = data.data[0].id
      this.searchTab()
    },
    async searchTab () {
      const { data } = await this.API.requestData({
        method: "POST",
        subUrl: "/recommen/findWobugeqByLocation",
        data: {
          tablepar: {
            pageNum: 1,
            pageSize: 10,
          },
          location: this.location
        },
      })
      this.tableData.data = data.data
    },
    showVideoBox () {
      this.videoBoxShow = true;
      this.$nextTick(() => {
        this.listenEvent();
        this.resetVideo();
      });
    },
    // 销毁播放实例
    cancelPlay () {
      $('.videoPlayer').attr('poster', "").attr('src', "");
      this.videoPlayer && this.videoPlayer.disconnect() && (this.videoPlayer = null);
    },

    // 监听视频被暂停和被播放
    listenEvent () {
      let that = this;

      //判断设备
      if (H5siOS() === true || H5sSafariBrowser() === true) {
        $('.videoPlayer').prop('controls', true);
      }

      //如果是暂停状态，就让它开始；如果是开始就让他暂停。每次开始之前都先清空参数
      $('.videoPlayer').on('click', function () {
        if ($(this).get(0).paused) {
          that.resetVideo();
        } else {
          that.videoPlayer.disconnect();
          $(this).get(0).pause();
          this.BASE.showMsg({
            type: "success",
            msg: "暂停播放"
          });
        }
      });
    },

    // 重置视频播放状态
    resetVideo () {
      this.$nextTick(() => {
        let videoConfig = {
          videoid: 'videoPlayer',//跟上面video标签的id一致
          protocol: 'http:', //'http:' or 'https:'
          host: this.videoConfigHost, //'localhost:8080'自己内部的网址
          rootpath: '/', // '/' or window.location.pathname
          token: this.videoConfigToken,//可变参数
          // streamprofile: this.videoConfigStreamprofile, // {string} - stream profile, main/sub or other predefine transcoding profile
          hlsver: 'v1', //v1 is for ts, v2 is for fmp4
          session: 'e312287e-d809-4b4b-a5d6-336e5006199f' //session got from login可变参数
        };

        this.cancelPlay();
        this.videoPlayer = new H5sPlayerRTC(videoConfig);
        this.videoPlayer.connect();

        this.BASE.showMsg({
          type: "success",
          msg: "播放组件初始化中...请稍后..."
        });

      });
    },
    selectTab: function (tab, index) {
      this.activeTab = index;
      if (index === 0) {
        this.gisBoxShow = true;
      } else if (index == 1) {
        this.showDet();
      } else if (index === 2) {
        this.showVideoBox();
      }
      if (tab.text == '消缺历史') {
        this.searchH()
      }
    },
  },
};
</script>

<style lang="less">
.diamain {
  width: 100%;
  height: 700px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  .left {
    width: 30%;
    overflow-y: auto;
  }
  .right {
    width: 68%;
  }
}

.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;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      .el-input__inner {
        text-align: center;
      }
      .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;
        }
      }
    }
  }
}
.videoPlayer {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
</style>
<style lang="less">
.evaluate {
  .evaluate-item {
    .el-input__inner {
      padding: 0 15px;
      text-align: center;
    }
  }

  .evaluate-item.warColor {
    .el-input__inner {
      color: #f25656;
    }
  }
}

.gisBox {
  .el-dialog__body {
    height: 600px;
  }
}
</style>