index.vue

<template>
  <div class="aduit-box">
    <div class="aduit-img-box">
      <el-row :gutter="2">
      <el-col :span="8" class="audit_img_box">
        <!-- <img :src="resultData.illegal.ill_pic1" alt> -->

        <vue-photo-zoom-pro :url="ill_new_pic1"></vue-photo-zoom-pro>
      </el-col>
      <el-col :span="8" class="audit_img_box">
        <!-- <img :src="resultData.illegal.ill_pic2" alt> -->

        <vue-photo-zoom-pro :url="ill_new_pic2"></vue-photo-zoom-pro>
      </el-col>
      <el-col :span="8" class="audit_img_box">
        <!-- <img :src="resultData.illegal.ill_pic3" alt> -->

        <vue-photo-zoom-pro :url="ill_new_pic3"></vue-photo-zoom-pro>
      </el-col>
       </el-row>
    </div>
    <div class="candidCamera">
      <div class="aduit-title">
        <span class="title">车辆识别信息</span>
      </div>
      <div class="sub-info">
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">采集机关:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.camera.gatheroffice}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">特征图片:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.camera.feature_img}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">号牌号码:</el-col>
          <!-- <el-col :span="16" class="aduit-info">{{resultData.camera.plate_number}}</el-col> -->
          <el-col :span="16" class="aduit-info">
            <el-input
              :class="{audit_plate_2:isXnyTrue}"
              class="audit_plate_1"
              v-model="resultData.camera.plate_number"
              @keyup.native="changeHphmEvent()"
            ></el-input>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">号牌种类:</el-col>
          <el-col :span="16" class="aduit-info">
            <el-select
              v-model="resultData.camera.plate_type"
              placeholder="请选择"
              @change="onChangeHpzlEvent"
            >
              <el-option
                v-for="item in optionsHpzl"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-col>
      </div>
    </div>
    <div class="vehicleinfo">
      <div class="aduit-title">
        <span class="title">机动车信息</span>
        <span class="tip_msg">{{tip_info_veh}}</span>
      </div>
      <div class="sub-info">
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">车辆品牌:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_clpp1}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">车辆类型:</el-col>
          <el-col
            :span="16"
            class="aduit-info"
          >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_cllx,optionsCllx)}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">登记日期:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_djrj}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">有效期止:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_yxqz}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">车身颜色:</el-col>
          <el-col
            :span="16"
            class="aduit-info"
          >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_color,optionsCsys)}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">使用性质:</el-col>
          <el-col
            :span="16"
            class="aduit-info"
          >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_syxz,optionsSyxz)}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">车辆状态:</el-col>
          <el-col
            :span="16"
            class="aduit-info"
          >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_zt,optionsClzt)}}</el-col>
        </el-col>
      </div>
    </div>
    <div class="illegalinfo">
      <div class="aduit-title">
        <span class="title">车辆违法信息</span>
        <span
          class="tip_msg"
        >{{this.GCOMMON.formatterInfo(resultData.illegal.ill_source,optionsCjfs)}}{{resultData.illegal.ill_wh_number}}</span>
      </div>
      <div class="sub-info">
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">违法时间:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.illegal.event_dt}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">车道编号:</el-col>
          <!-- <el-col :span="16" class="aduit-info">{{resultData.illegal.lane_num}}</el-col> -->
          <el-col
            :span="16"
            class="aduit-info"
          >{{this.GCOMMON.formatterInfo(resultData.illegal.lane_num,optionsXscd)}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">行驶方向:</el-col>
          <el-col
            :span="16"
            class="aduit-info"
          >{{this.GCOMMON.formatterInfo(resultData.illegal.direction,optionsXsfx)}}</el-col>
        </el-col>
        <el-col :span="6">
          <el-col :span="5" class="aduit-label">违法地点:</el-col>
          <el-col :span="16" class="aduit-info">{{resultData.illegal.address}}</el-col>
        </el-col>
        <el-row>
          <el-col :span="6">
            <el-col :span="5" class="aduit-label">地点代码:</el-col>
            <el-col :span="16" class="aduit-info">{{resultData.illegal.ill_address_code}}</el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="5" class="aduit-label">设备编码:</el-col>
            <el-col :span="16" class="aduit-info">{{resultData.illegal.dev_unid}}</el-col>
          </el-col>
           <el-col :span="6">
            <el-col :span="5" class="aduit-label">违法行为:</el-col>
            <el-col :span="16" class="aduit-info">
               <el-select v-model="resultData.illegal.ill_type" filterable placeholder="请选择">
                <el-option
                  v-for="item in optionsWfxw"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
        </el-row>
      </div>
    </div>
    <div class="aduit-control">
      <el-button class="playvideo" @click="clickPlayVideo" :disabled="isDisableVideo">播放视频</el-button>
      <el-button class="shepai" @click="handellAction('falsePlate')" :disabled="isDisable">涉牌</el-button>
      <el-button class="zf-btn" @click="handellAction('nullify')" :disabled="isDisable">作废</el-button>
      <el-button class="success-btn" @click="handellAction('pass')" :disabled="isDisable">通过</el-button>
      <!-- <el-button @click="handellAction('nextData')">下一条</el-button> -->
    </div>

    <el-dialog title="视频播放" width="60%" :visible.sync="dialogVideoVisible">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      playerOptions: {},
      videoPlayUrl: "",
      dialogVideoVisible: false,
      optionsCjfs: [], //采集方式
      tip_info_veh: "",
      isXnyTrue: false,
      isDisable: true,
      isDisableVideo: true,
      resultData: {
        camera: {
          //抓拍信息
          gatheroffice: "交通科技处",
          feature_img: "",
          plate_number: "",
          plate_type: ""
        },
        vehicleinfo: {
          //车辆信息
          car_clpp1: "", //车辆类型
          car_cllx: "", //车辆品牌
          car_yxqz: "",
          car_djrj: "",
          car_color: "",
          car_zt: "",
          car_syxz: ""
        },
        illegal: {
          event_dt: "",
          lane_num: "",
          direction: "",
          address: "",
          ill_address_code: "",
          dev_unid: "",
          ill_type: "",
          ill_pic1: "",
          ill_pic2: "",
          ill_pic3: "",
          ill_source: "",
          ill_nid: "",
          ill_video: ""
        }
      },
      ill_new_pic1: "",
      ill_new_pic2: "",
      ill_new_pic3: "",
      value: "",
      illoptions: [
        {
          value: "1",
          label: "压线"
        }
      ],

      optionsHpzl: [],
      optionsXscd: [],
      optionsClzt: [],
      optionsXsfx: [],
      optionsCsys: [],
      optionsSyxz: [],
      optionsCllx: [],
      optionsWfxw: []
    };
  },
  methods: {
    onLivePlay(vurl) {
      this.playerOptions = {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: vurl //"/static/a.mp4" //url地址
          }
        ],
        poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      };
    },
    clickPlayVideo() {
      //var wzData = this.tableData[this.selectIndexDetail];
      //this.dialogVideoVisible = true;
      if (this.resultData.illegal.ill_video.indexOf("ftp://") == 0) {
        //---001第一步先下载视频
        var vpath = this.downVideoAnalysis();
      }
    },

    downVideoAnalysis() {
      let vthis = this;
      const loading = vthis.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      var req_url_video = vthis.$API_VideoImg_URL;
      let requestParam = JSON.stringify({
        str1: vthis.resultData.illegal.ill_video
      });

      vthis.axios
        .post(req_url_video + "/video/analysisVideoPath", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            debugger;
            var vpathurl = response.data.vpath;
            var reqJsUrl =
              req_url_video + "/video/playLocalByte?vpath=" + vpathurl;
            vthis.onLivePlay(reqJsUrl);
            loading.close();
            vthis.dialogVideoVisible = true;
          } else {
            loading.close();
            vthis.$message({
              type: "warning",
              message: "视频加载失败"
            });
          }
        })
        .catch(error => {
          console.log(error);
          loading.close();
        });
    },

    //@error="imgError(resultData)"
    // imgError(item) {
    //    item.illegal.ill_pic1 = require('../../../assets/img/def_ill_img.png');
    // },
    getcode() {},
    initNextData() {
      var self = this;
      let requestParam = JSON.stringify({
        userid: localStorage.getItem("username")
      });

      self.isDisable = true; ///---按钮不可点
      self.isXnyTrue = false;
      self.axios
        .post(self.$API_SERVICE_URL + "/illaudit/queryData", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            self.resultData.camera = response.data.camera;
            self.resultData.vehicleinfo = response.data.vehicleinfo;
            if (
              response.data.vehicleinfo.car_cllx == null ||
              response.data.vehicleinfo.car_cllx == ""
            ) {
              self.tip_info_veh = "未找到车辆信息！";
            } else {
              self.tip_info_veh = "";
            }
            self.resultData.illegal = response.data.illegal;
            //-------------img
            if (self.resultData.illegal.cimg_flag == "1") {
              self.ill_new_pic1 = self.resultData.illegal.ill_pic1_http;
              self.ill_new_pic2 = self.resultData.illegal.ill_pic2_http;
              self.ill_new_pic3 = self.resultData.illegal.ill_pic3_http;
            } else {
              self.ill_new_pic1 = self.GCOMMON.imgPathAnalysis(
                self.$API_VideoImg_URL,
                self.resultData.illegal.ill_pic1
              );
              self.ill_new_pic2 = self.GCOMMON.imgPathAnalysis(
                self.$API_VideoImg_URL,
                self.resultData.illegal.ill_pic2
              );
              self.ill_new_pic3 = self.GCOMMON.imgPathAnalysis(
                self.$API_VideoImg_URL,
                self.resultData.illegal.ill_pic3
              );
            }

            //=========================
            self.isDisable = false;
            if (self.resultData.illegal.ill_video != "") {
              self.isDisableVideo = false;
            } else {
              self.isDisableVideo = true;
            }
            if (
              self.resultData.camera.plate_type == "51" ||
              self.resultData.camera.plate_type == "52"
            ) {
              self.isXnyTrue = true;
            }
          } else {
            //-------
            self.resultData.camera.plate_number = "";
            self.$message({
              type: "warning",
              message: "没有待审核的数据!"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //---最下面的按钮方法
    handellAction(_b_flag_) {
      //--------提取参数---
      let requestParam = JSON.stringify({
        nid: this.resultData.illegal.ill_nid,
        actionFlag: _b_flag_,
        userid: localStorage.getItem("username"),
        username: localStorage.getItem("namemc"),
        //-------------------------
        auditHphm: this.resultData.camera.plate_number,
        auditHpzl: this.resultData.camera.plate_type,
        auditWfdm: this.resultData.illegal.ill_type
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/illaudit/auditData", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            //---如果点击操作成功后，我们把ill_nid设为空
            this.resultData.illegal.ill_nid = "";
            this.initNextData();
          } else {
            this.$message({
              type: "warning",
              message: "数据审核异常!"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    beforeunloadFn(e) {
      //---用于监听关闭窗口事件
      //---需要对后台进行一定的操作
      this.closeWindows();
    },

closeWindows() {
      let requestParam = JSON.stringify({
        nid: this.resultData.illegal.ill_nid
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/illaudit/closeCK", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {

        })
        .catch(error => {
          console.log(error);
        });
    },





    /**
     * 初始化加载界面枚举信息
     */
    initEnumType() {
      let requestParam = JSON.stringify({
        flag: "2",
        enumtypeids: [
          {
            170: "optionsHpzl"
          },
          {
            151: "optionsXscd"
          },
          {
            38: "optionsClzt"
          },
          {
            149: "optionsXsfx"
          },
          {
            745: "optionsCsys"
          },
          {
            872: "optionsSyxz"
          },
          {
            833: "optionsCllx"
          },
          {
            147: "optionsCjfs"
          }
        ]
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.optionsXscd = response.data.optionsXscd;
            this.optionsHpzl = response.data.optionsHpzl;
            this.optionsClzt = response.data.optionsClzt;
            this.optionsXsfx = response.data.optionsXsfx;
            this.optionsCsys = response.data.optionsCsys;
            this.optionsSyxz = response.data.optionsSyxz;
            this.optionsCllx = response.data.optionsCllx;
            this.optionsCjfs = response.data.optionsCjfs;
          } else {
            this.$message({
              type: "warning",
              message: "初始化枚举信息异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    /**
     * 修改了车牌号码
     */
    changeHphmEvent() {
      if (
        this.resultData.camera.plate_number.length == 7 ||
        this.resultData.camera.plate_number.length == 8
      ) {
        this.getVehiclInfo(
          this.resultData.camera.plate_type,
          this.resultData.camera.plate_number
        );
      }
    },

    onChangeHpzlEvent(val) {
      //----获取到选中的value

      this.resultData.camera.plate_type = val;

      if (
        this.resultData.camera.plate_number.length == 7 ||
        this.resultData.camera.plate_number.length == 8
      ) {
        this.getVehiclInfo(
          this.resultData.camera.plate_type,
          this.resultData.camera.plate_number
        );
      }
    },
    /**
     * 调用方法查询单个车辆信息，根据车牌号码和车牌种类，
     * 可以把这个方法做成通用方法，很多地方都会用到
     * 返回车辆的实体类json
     */
    getVehiclInfo(vhpzl, vhphm) {
      this.clearInfos();
      let requestParam = JSON.stringify({
        hphm: vhphm,
        hpzl: vhpzl
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/common/getVehicleInfo", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            if (response.data.vehicle != null) {
              let veh = response.data.vehicle;
              this.resultData.vehicleinfo.car_clpp1 = veh.clpp1;
              this.resultData.vehicleinfo.car_cllx = veh.cllx;
              this.resultData.vehicleinfo.car_yxqz = veh.yxqz;
              this.resultData.vehicleinfo.car_color = veh.csys;
              this.resultData.vehicleinfo.car_zt = veh.zt;
              this.resultData.vehicleinfo.car_syxz = veh.syxz;
              this.resultData.vehicleinfo.car_djrj = veh.djrq;
            } else {
              this.tip_info_veh = "未找到车辆信息！";
            }
          } else {
            this.tip_info_veh = "车辆信息查询失败！";
          }
        })
        .catch(error => {
          this.tip_info_veh = "车辆信息查询失败！";
        });
    },
    clearInfos() {
      this.resultData.vehicleinfo.car_clpp1 = "";
      this.resultData.vehicleinfo.car_cllx = "";
      this.resultData.vehicleinfo.car_yxqz = "";
      this.resultData.vehicleinfo.car_djrj = "";
      this.resultData.vehicleinfo.car_color = "";
      this.resultData.vehicleinfo.car_zt = "";
      this.resultData.vehicleinfo.car_syxz = "";
      this.tip_info_veh = "";
    },

    initGetWfxw() {
      let requestParam = JSON.stringify({
        remapname: "optionsWfxw"
      });

      this.axios
        .post(this.$API_SERVICE_URL + "/common/getWfdmCode", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.optionsWfxw = response.data.optionsWfxw;
          } else {
            this.$message({
              type: "warning",
              message: "初始化枚举信息异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },

  created: function() {
    var _this = this;
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key == 32) {
        _this.handellAction("nullify"); //space用于删除
      }
      if (key != 32 && window.event.ctrlKey == true) {
        _this.handellAction("pass"); //ctrl用于通过
      }
    };
  },
  mounted() {
    this.initEnumType();
    this.initGetWfxw();
    window.addEventListener("beforeunload", e => this.beforeunloadFn(e));
    this.initNextData();
  },
  destroyed() {
    window.removeEventListener("beforeunload", e => this.beforeunloadFn(e));
  }
};
</script>

<style lang="stylus" scoped>
.tip_msg {
  color: red;
  text-align: right;
  font-size: 14px;
  margin-left: 20px;
}

.aduit-box {
  background #fff
  width: 99%;
  height 100vh
  color #333
  margin: 0 auto;
}
.aduit-info{
  color #959595
}
.aduit-img-box img {
  width: 100%;
}

.aduit-img-box {
  overflow: hidden;
}

.aduit-title {
  margin-bottom: 5px;
  font-size: 18px;
  letter-spacing: 1px;
  font-family: 'Helvetica';
  color: #c7c7c7;
  line-height 38px
  background #f6f9ff
  color #fff
  .title {
    display inline-block
    height 38px
    width 203px
    background:url('../../../assets/img/illaditheader.png') no-repeat;
    padding: 0px 4px 0px 4px;
  }
}

.illegalinfo .aduit-title .title {
  border-color: #F56C6C;
}

.vehicleinfo .aduit-title .title {
  border-color: #66b1ff;
}

.sub-info {
  line-height: 35px;
  margin 30px 0 30px 0
  overflow hidden
}

.candidCamera, .vehicleinfo, .illegalinfo {
  overflow: hidden;
  margin-bottom: 3px;
  margin-top: 8px;
}

.aduit-control {
  float: right;
}
.aduit-label {
  font-weight 600
  margin-left 20px
}
.ws-btn {
  background: #47c9c7;
  border-color: #acf9f4;
  color: #fff;
}

.zf-btn,.playvideo,.shepai,.success-btn {
  width 120px
  background: #ff7c93;
  border-color: transparent;
  color: #fff;
  border-radius 5px
}
.playvideo{
  background #5dd8a2
}
.shepai{
  background #ffbe30
}
.success-btn{
  margin 50px 60px 0 10px
  background #1d72ff
}
.audit_plate_1 {
  background: #f8f8f8 !important;
  font-size: 20px !important;
  border-radius 22px
}

.audit_plate_2 {
  background: #27EA58 !important;
  font-size: 20px !important;
}

</style>