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"
      top="100px"
      width="95%"
      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;
      console.log(123123,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%;
    height: 100%;
    background: rgba(96, 103, 105, 0.2);
    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: 800px;
  }
}
</style>