index.vue

<template>
  <div class="content_div_main">
    <div class="head_condition_type">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="valueCjfs" clearable placeholder="采集方式">
            <!-- <el-option label="闯红灯设备" value="1"></el-option>
            <el-option label="尾号限行" value="12"></el-option>-->
            <el-option
              v-for="item in optionsCjfs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="valueHpzl" clearable placeholder="号牌种类">
            <!-- <el-option label="小型汽车" value="02"></el-option>
            <el-option label="大型汽车" value="01"></el-option>-->
            <el-option
              v-for="item in optionsHpzl"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="valuePoint" clearable filterable placeholder="请选择安装点">
            <el-option
              v-for="item in optionsPoint"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="valueXscd" clearable placeholder="行驶车道">
            <!-- <el-option label="第一车道" value="01"></el-option>
            <el-option label="第二车道" value="02"></el-option>-->
            <el-option
              v-for="item in optionsXscd"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="valueShzt" clearable placeholder="审核状态">
            <!-- <el-option label="已审核" value="1"></el-option>
            <el-option label="已复审" value="2"></el-option>-->
            <el-option
              v-for="item in optionsShzt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="value2"
            type="datetime"
            class="commone_w"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            align="right"

          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="value3"
            type="datetime"
            class="commone_w"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            align="right"

          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-select v-model="valueDevice" clearable filterable placeholder="请选择采集设备">
            <el-option
              v-for="item in optionsDevice"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input placeholder="号牌号码" v-model="whphm" class="commone_w"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="searchQueryWzxxT">查询</el-button>
      </el-form>
    </div>

    <div class="table_m_type">
      <el-table
        v-loading="loading_status"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        ref="multipleTable"
        :data="tableData"
        :height="tableHeight"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="号牌号码" prop="carNo" width="120px" sortable>
          <template slot-scope="scope">{{ scope.row.carNo }}</template>
        </el-table-column>
        <el-table-column label="号牌种类" prop="carType" width="120px" :formatter="formatHpzl"></el-table-column>

        <el-table-column label="违法时间" prop="watchTime" width="160px" sortable>
          <template slot-scope="scope">{{ scope.row.watchTime }}</template>
        </el-table-column>

        <el-table-column prop="addName" label="违法地点" show-overflow-tooltip></el-table-column>

        <el-table-column prop="wfdm" label="违法行为" :formatter="formatWfxw"></el-table-column>

        <el-table-column prop="shryid" label="审核人员"></el-table-column>

        <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block paa_fy">
      <div style="float:left;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePagePrevClick"
        @next-click="handlePageNextclick"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page.sync="pageNumber"
        layout="total, sizes, prev, pager, next"
        :total="pageTotal"
      ></el-pagination>
      </div>
        <div class="fy_number_class">
          <el-input  v-model="mPageNumber"  @keyup.enter.native="modifyFyNumber" style="width:80px;" placeholder="数量/页" >
          </el-input>
       </div>
    </div>

    <!-- 违法详情弹出界面 -->
    <!--打开分配小组任务的dialog-->
    <el-dialog title="违法详情" width="98%" top="1vh" :visible.sync="dialogFormVisible">
      <div class="aduit-img-box">
        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
          <!-- <img-zoom src="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C"
            bigsrc="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C" :configs="configs"></img-zoom>
          -->

          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic1"></vue-photo-zoom-pro>
        </el-col>
        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic2"></vue-photo-zoom-pro>
        </el-col>
        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic3"></vue-photo-zoom-pro>
        </el-col>
      </div>

      <div class="candidCamera">
        <div class="aduit-title">
          <span class="title">车辆识别信息</span>
        </div>
        <el-col :span="6">
          <el-col :span="6" class="aduit-label">采集机关:</el-col>
          <el-col :span="12" class="aduit-info">贵阳市交通科技处</el-col>
        </el-col>

        <el-col :span="6">
          <el-col :span="6" class="aduit-label">特征图片:</el-col>
          <el-col :span="12" class="aduit-info">*</el-col>
        </el-col>

        <el-col :span="6">
          <el-col :span="6" class="aduit-label">号牌号码:</el-col>
          <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 :span="6">
          <el-col :span="6" class="aduit-label">号牌种类:</el-col>
          <el-select
            v-model="valueHpzlDT"
            class="detail_hpzl_i"
            placeholder="号牌种类"
            @change="onChangeHpzlEvent"
          >
            <!-- <el-option label="小型汽车" value="02"></el-option>
            <el-option label="大型汽车" value="01"></el-option>-->
            <el-option
              v-for="item in optionsHpzl"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </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="6" class="aduit-label">车辆品牌:</el-col>
            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_clpp}}</el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="6" 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="6" 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="6" 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="6" 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="6" 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="6" 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(tip_info_ill,optionsCjfs)}}</span> -->
        </div>

        <div class="sub-info">
          <el-col :span="6">
            <el-col :span="6" 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="6" class="aduit-label">行驶车道:</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="6" 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="6" 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="6" 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="6" class="aduit-label">设备编码:</el-col>
              <el-col :span="16" class="aduit-info">{{resultData.illegal.dev_unid}}</el-col>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-col :span="6" class="aduit-label">违法行为:</el-col>
              <el-col :span="16">
                <el-select v-model="resultData.illegal.ill_type" 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>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="success" @click="clickPlayVideo" :disabled="isDisable">视频播放</el-button>
        <el-button size="mini" type="warning" @click="handellAction('nullify')">无效数据</el-button>
        <el-button size="mini" type="primary" @click="upDetailInfo()">上一条</el-button>
        <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!--      end      -->

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



<style scoped>
.tip_msg {
  color: red;
  text-align: right;
  font-size: 14px;
  margin-left: 20px;
}
.pic-box {
  width: 33%;
  height: 33%;
}

.demo-form-inline {
  margin-top: 5px;
  margin-left: 5px;
}
.head_condition_type {
  height: auto;
  color: #333;
  -moz-box-shadow: 2px 2px 10px #909090;
  -webkit-box-shadow: 2px 2px 10px #909090;
  box-shadow: 2px 2px 4px #909090;
}
.commone_w {
  /* 设置时间框同其他框一样的宽度 */
  width: 215px;
}


/** ---------------------------------------  **/

.aduit-box {
  width: 95%;
  margin: 0 auto;
}

.aduit-img-box img {
  width: 100%;
  margin: 1px;
}

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

.aduit-title {
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
  font-size: 18px;
  letter-spacing: 1px;
  font-family: "Helvetica";
  color: #c7c7c7;
}
.title {
  padding: 0px 4px 0px 0;
  border-bottom: 3px solid #009688;
}

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

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

.sub-info {
  line-height: 35px;
}

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

.aduit-control {
  float: right;
}

.ws-btn {
  background: #47c9c7;
  border-color: #acf9f4;
  color: #fff;
}

.zf-btn {
  background: #948b7e;
  border-color: transparent;
  color: #fff;
}

.audit_plate_1 {
  background: #006ec7 !important;
  font-size: 16px !important;
  width: 60%;
}
.detail_hpzl_i {
  width: 60%;
}

.img_box_w {
  margin: 1px;
  width: 33%;
}
.audit_plate_2 {
  background: #27ea58 !important;
  font-size: 20px !important;
}
.aduit-label,
.aduit-info {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  overflow: hidden; /*设置超出的部分进行影藏*/
  text-overflow: ellipsis; /*设置超出部分使用省略号*/
  white-space: nowrap; /*设置为单行*/
}
</style>




<script>
//import imgZoom from 'vue2.0-zoom';

export default {
  components: {
    //VuePhotoZoomPro
  },
  data() {
    return {
      mPageNumber:"",
      ImgDTH: "",
      videoJsUrl: "",
      videoPlayUrl: "",
      isDisable: true,
      loading_status: false,
      tip_info_veh: "",
      tip_info_ill: "",
      playerOptions: {},

      /**  -------分页组件-------- */
      pageSizes: [10, 20,30,40],
      pageTotal: 400,
      pageSize: 10,
      currentPage4: 2,
      pageNumber: 1,
      /**------------------------- */

      value2: "",
      value3: "",

      optionsPoint: [],
      valuePoint: "",

      optionsDevice: [],
      valueDevice: "",
      tableData: [],
      multipleSelection: [],

      /** 初始化查询条件的下拉框 */
      optionsCjfs: [], //采集方式
      valueCjfs: "",
      optionsHpzl: [], //号牌种类
      valueHpzl: "",
      valueHpzlDT: "",
      optionsXscd: [], //车道
      valueXscd: "",
      optionsShzt: [], //审核状态
      valueShzt: "",
      optionsWfxw: [],
      optionsClzt: [],
      optionsXsfx: [],
      optionsCsys: [],
      optionsSyxz: [],
      optionsCllx: [],

      whphm: "",
      queryflag: "1", //表示查询标记：1普通查询，2、异常数据 3、异常时段

      /** 菜单查询条件下拉框end */

      dialogFormVisible: false,
      dialogVideoVisible: false,

      //-----------------------------------------------------------------
      isXnyTrue: false,
      isDisable: true,
      resultData: {
        camera: {
          //抓拍信息
          gatheroffice: "交通科技处",
          feature_img: "",
          plate_number: "",
          plate_type: "1"
        },
        vehicleinfo: {
          //车辆信息
          car_clpp: "", //车辆类型
          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_nid: ""
        }
      },
      value: "",
      //----------------------------------------------------------------------
      selectIndexDetail: 0
    };
  },

  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 //全屏按钮
        }
      };
    },

    formatHpzl(row, column, cellValue, index) {
      return this.GCOMMON.formatterInfoChangInt(row.carType, this.optionsHpzl);
    },
    formatWfxw(row, column, cellValue, index) {
      return this.GCOMMON.formatterInfo(row.wfdm, this.optionsWfxw);
    },


    modifyFyNumber(){

      var numReg = /^[0-9]+$/
      var numRe = new RegExp(numReg)
      if (!numRe.test(this.mPageNumber)) {
        this.$message({
          type: 'warning',
          message: '请输入整数',
          duration: 10000,
          showClose: true,
        })
        return false
      }
      if(parseInt(this.mPageNumber)<=0){
         this.$message({
          type: 'warning',
          message: '请输入大于0的整数',
          duration: 10000,
          showClose: true,
        });
        return false;
      }
      this.mPageNumber = parseInt(this.mPageNumber);
      this.pageSize = this.mPageNumber;
      this.pageNumber = 1;
      this.searchQueryWzxx();
    },

    /** 分页组件方法 */
    //--改变每页显示的数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchQueryWzxx();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.searchQueryWzxx();
    },
    handlePagePrevClick(val) {
      this.pageNumber = val;
      this.searchQueryWzxx();
    },
    handlePageNextClick(val) {
      this.pageNumber = val;
      this.searchQueryWzxx();
    },
    /** --------------*/

  searchQueryWzxxT(){
    this.pageNumber = 1;
    this.searchQueryWzxx();
  },

    /**
     * 违法信息表查询
     */
    searchQueryWzxx() {
      this.loading_status = true;
      this.tableData = [];
      let requestParam = JSON.stringify({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        //------
        cjfs: this.valueCjfs,
        hpzl: this.valueHpzl,
        pointcode: this.valuePoint,
        carxscd: this.valueXscd,
        shzt: this.valueShzt,
        starttime:
          this.value2 != ""
            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
            : "",
        endtime:
          this.value3 != ""
            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
            : "",
        devicecode: this.valueDevice,
        hphm: this.whphm,
        sflag: this.queryflag
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/illquery/getWzlist", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.tableData = response.data.fsWzList;
            this.pageTotal = response.data.pageTotal;
            this.loading_status = false;
          } else {
            this.loading_status = false;
            //this.publicShowMessage("warning", "分配异常");
          }
        })
        .catch(error => {
          console.log(error);
          this.loading_status = false;
        });
    },
    //------------------
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 初始化加载界面枚举信息
     */
    initEnumType() {
      let requestParam = JSON.stringify({
        flag: "2",
        enumtypeids: [
          {
            147: "optionsCjfs"
          },
          {
            170: "optionsHpzl"
          },
          {
            151: "optionsXscd"
          },
          {
            146: "optionsShzt"
          },
          {
            38: "optionsClzt"
          },
          {
            149: "optionsXsfx"
          },
          {
            745: "optionsCsys"
          },
          {
            872: "optionsSyxz"
          },
          {
            833: "optionsCllx"
          }
        ]
      });
      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.optionsCjfs = response.data.optionsCjfs;
            this.optionsHpzl = response.data.optionsHpzl;
            this.optionsXscd = response.data.optionsXscd;
            this.optionsShzt = response.data.optionsShzt;
            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;
          } else {
            this.$message({
              type: "warning",
              message: "初始化枚举信息异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //---查看详情页
    showIllInfo(index, row) {
      this.selectIndexDetail = index;
      this.dialogFormVisible = true;
      this.showDetailInfoComm(this.selectIndexDetail);
    },
    /** 把选中的对象，显示出具体的信息 */
    showDetailInfoComm(index) {
      debugger;
      var wzData = this.tableData[index];
      this.resultData.camera.plate_number = wzData.carNo;
      this.valueHpzlDT = wzData.carType;
      this.getVehiclInfo(wzData.carType, wzData.carNo);
      //-----------
      if (
        wzData.videourl != null &&
        wzData.videourl != "" &&
        wzData.videourl.length > 10
      ) {
        this.isDisable = false;
        this.videoPlayUrl = wzData.videourl;
      } else {
        this.isDisable = true;
        this.videoPlayUrl = "";
      }
      //----
      this.resultData.illegal.event_dt = wzData.watchTime;
      this.resultData.illegal.lane_num = wzData.carRoad;
      this.resultData.illegal.dev_unid = wzData.deviceNo;
      this.resultData.illegal.address = wzData.addName;
      this.resultData.illegal.ill_address_code = wzData.addNo;
      this.resultData.illegal.direction = wzData.direction;
      // this.resultData.illegal.ill_pic1 = wzData.picurl1;
      // this.resultData.illegal.ill_pic2 = wzData.picurl2;
      // this.resultData.illegal.ill_pic3 = wzData.picurl3;

      this.resultData.illegal.ill_pic1 = this.GCOMMON.imgPathAnalysis(
        this.$API_VideoImg_URL,
        wzData.picurl1
      );
      this.resultData.illegal.ill_pic2 = this.GCOMMON.imgPathAnalysis(
        this.$API_VideoImg_URL,
        wzData.picurl2
      );
      this.resultData.illegal.ill_pic3 = this.GCOMMON.imgPathAnalysis(
        this.$API_VideoImg_URL,
        wzData.picurl3
      );

      this.resultData.illegal.ill_type = wzData.wfdm;
      this.resultData.illegal.ill_nid = wzData.nid;
      this.tip_info_ill = wzData.datasource;
      //-------调用方法查询单个车辆信息，根据车牌号码和车牌种类，可以把这个方法做成通用方法，很多地方都会用到
    },

    clearInfos() {
      this.resultData.vehicleinfo.car_clpp = "";
      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 = "";
    },

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

    onChangeHpzlEvent(val) {
      //----获取到选中的value
      //this.valueHpzlDT = val;

      this.getVehiclInfo(this.valueHpzlDT, 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_clpp = 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 = "车辆信息查询失败！";
        });
    },

    nextDetailInfo() {
      debugger;
      if (this.selectIndexDetail == this.tableData.length) {
        this.$message({ type: "waraing", message: "已经是最后一条了" });
      } else {
        this.selectIndexDetail++;
        this.showDetailInfoComm(this.selectIndexDetail);
      }
    },
    upDetailInfo() {
      if (this.selectIndexDetail == 0) {
        this.$message({ type: "waraing", message: "已经是第一条了" });
      } else {
        this.selectIndexDetail--;
        this.showDetailInfoComm(this.selectIndexDetail);
      }
    },

    //---详情界面
    clickPlayVideo() {
      //var wzData = this.tableData[this.selectIndexDetail];
      //this.dialogVideoVisible = true;
      //if (this.videoPlayUrl.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.videoPlayUrl
      });

      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();
        });
    },

    ///---------------------video play--------------------------------

    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);
        });
    },

    /**
     * 同违法审核使用同一个接口，
     * 有效数据按钮表示通过
     * 无效数据按钮表示作废
     */
    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.valueHpzlDT,
        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.$message({ type: "success", message: "数据操作成功!" });
          } else {
            this.$message({ type: "warning", message: "数据操作失败!" });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    initGetMountPoint() {
      // let requestParam = JSON.stringify({
      //   remapname: "optionsWfxw"
      // });

      this.axios
        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.optionsPoint = response.data.pointList;
          } else {
            this.$message({
              type: "warning",
              message: "初始化安装点信息异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    initGetDeviceList() {
      // let requestParam = JSON.stringify({
      //   remapname: "optionsWfxw"
      // });

      this.axios
        .post(this.$API_SERVICE_URL + "/deviceinfo/getAllDevice", {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.optionsDevice = response.data.deviceList;
          } else {
            this.$message({
              type: "warning",
              message: "初始化设备信息异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    const loading = this.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });

    this.value2 = new Date(
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDate(),
      0,
      0,
      0
    );
    this.value3 = new Date();

    this.initEnumType();
    this.initGetMountPoint();
    this.initGetDeviceList();

    this.$nextTick(function() {
      this.ImgDTH = window.innerHeight - 510;
      this.tableHeight =
        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.ImgDTH = window.innerHeight - 510;
        self.tableHeight =
          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
      };
    });
    this.initGetWfxw();

    //---关闭loading
    this.$nextTick(() => {
      // 以服务的方式调用的 Loading 需要异步关闭
      loading.close();
    });
  }
  // mounted() {
  //   this.initGetWfxw();
  // }
};
</script>