index.vue

<template>
  <div>
    <div class="pass_content_left">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select class="commone_w" v-model="valueHpzl" clearable placeholder="号牌种类">
            <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
            class="commone_w"
            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 class="commone_w" v-model="valueXscd" clearable placeholder="行驶车道">
            <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 class="commone_w" v-model="valueXsfx" clearable placeholder="行驶方向">
            <el-option
              v-for="item in optionsXsfx"
              :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-input placeholder="号牌号码"  v-model="whphm"  style="width:120px;"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="searchKakouListT">查询</el-button>
      </el-form>

      <div class="table_m_type">
        <el-table
          v-loading="loading_status"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          @row-click="openRowDetails"
          ref="passTable"
          :data="tableData"
          :row-class-name="tableRowClassName"

          tooltip-effect="dark"
          :height="tableHeight"
          style="width: 100%;"
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <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="carRoad" label="行驶车道" :formatter="formatXscd"></el-table-column>

          <el-table-column prop="direction" label="行驶方向" :formatter="formatXsfx"></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="mt5 paa_fy">
         <div style="float:left;">
        <el-pagination
          size="small"
          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>
    </div>

    <div class="pass_content_right">
      <div class="right_img" :style="'height:'+imgHDT+'px;'">
        <vue-photo-zoom-pro :url="showPassInfo.pass_img" style="float:left;height:100%;height:100%;"></vue-photo-zoom-pro>
      </div>

  <div class="ms_info_r">


      <div class="aduit-title ml5 mt10">
        <span class="title">卡口信息</span>
      </div>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">采集地点:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_addname}}</el-col>
      </el-col>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">号牌号码:</el-col>
        <el-col :span="10" class="aduit-info">
          <el-input class="audit_plate_1" v-model="showPassInfo.pass_hphm"></el-input>
        </el-col>
      </el-col>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">号牌种类:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_hpzl}}</el-col>
      </el-col>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">行驶车道:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_xscd}}</el-col>
      </el-col>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">行驶方向:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_xsfx}}</el-col>
      </el-col>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">采集时间:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_time}}</el-col>
      </el-col>
      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">采集设备:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_device}}</el-col>
      </el-col>

      <el-col :span="10" class="ml5 mt5">
        <el-col :span="6" class="aduit-label">地点编号:</el-col>
        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_addcode}}</el-col>
      </el-col>
 </div>

    <div style="width:100%;">
      <el-col :span="10" class="ml5 mt5">
        <el-button size="mini" type="primary" @click="upDetailInfo()">上一条</el-button>
        <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
      </el-col>
    </div>

    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      mPageNumber:"",

      loading_status:false,
      tableHeight: "30",
      imgHDT:"",
      showPassInfo: {
        pass_xsfx: "",
        pass_time: "",
        pass_device: "",
        pass_xscd: "",
        pass_hpzl: "",
        pass_hphm: "",
        pass_addname: "",
        pass_img: "",
        pass_addcode: ""
      },

      optionsHpzl: [], //号牌种类
      valueHpzl: "",
      optionsXscd: [], //车道
      valueXscd: "",
      optionsXsfx: [],
      valueXsfx: "",

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

      value2: "",
      value3: "",
      optionsPoint: [],
      valuePoint: "",
      whphm:"",
      selectIndexDetail:0
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    onRowClick(row, event, column) {
      //行点击消除new标记
      var index = row.index;
      var deleteIndex = Array.indexOf(this.showIndexArr, index);
      if (deleteIndex != -1) {
        this.showIndexArr.splice(deleteIndex, 1);
      }
    },

    openRowDetails(row, column, event) {
      this.showIllInfo(row.index, row);
    },



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




    //---查看详情页
    showIllInfo(index, row) {
      debugger;
      this.selectIndexDetail = index;
      var clxxData = this.tableData[index];
      this.showPassInfo.pass_xsfx = this.GCOMMON.formatterInfo(
        clxxData.direction,
        this.optionsXsfx
      );
      this.showPassInfo.pass_time = clxxData.watchTime;
      this.showPassInfo.pass_device = clxxData.deviceNo;
      this.showPassInfo.pass_xscd = this.GCOMMON.formatterInfoChangInt(
        clxxData.carRoad,
        this.optionsXscd
      );
      this.showPassInfo.pass_hpzl = this.GCOMMON.formatterInfo(
        clxxData.carType,
        this.optionsHpzl
      );
      this.showPassInfo.pass_hphm = clxxData.carNo;
      this.showPassInfo.pass_addname = clxxData.addName;
      //this.showPassInfo.pass_img = clxxData.picurl1;
      //this.getImageBase64(clxxData.picurl1);
      //---图片判断下，如果是http格式的，那么我们直接访问
      //this.showPassInfo.pass_img = "http://192.168.0.101:8089/image/1.jpg"
      //--方式二--如果是ftp的图片，可以通过流返回
      this.showPassInfo.pass_img = this.GCOMMON.imgPathAnalysis(this.$API_VideoImg_URL,clxxData.picurl1);
      //---方式三
      //this.getImageBase64("ftp://cyl:cyl@192.168.0.101:21/image/12.jpg");

      this.showPassInfo.pass_addcode = clxxData.addNo;
    },

getImageBase64(imgpath) {

  let requestParam = JSON.stringify({
        str1: imgpath
      });

      this.axios
        .post(this.$API_SERVICE_URL + "/image/getImgBase64", requestParam,{
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.showPassInfo.pass_img = response.data.base64;
          } else {
            this.$message({
              type: "warning",
              message: "图片加载异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
,



    /**------------ 下面的是用于格式化table中数据的 --------------*/
    formatXsfx(row, column, cellValue, index) {
      return this.GCOMMON.formatterInfo(row.direction, this.optionsXsfx);
    },
    formatXscd(row, column, cellValue, index) {
      return this.GCOMMON.formatterInfoChangInt(row.carRoad, this.optionsXscd);
    },
    formatHpzl(row, column, cellValue, index) {
      return this.GCOMMON.formatterInfo(row.carType, this.optionsHpzl);
    },
    /** ------------------------------end------------------------ */

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

    // 修改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;";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },


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

    /** 分页组件方法 */
    //--改变每页显示的数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchKakouList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.searchKakouList();
    },
    handlePagePrevClick(val) {
      this.pageNumber = val;
      this.searchKakouList();
    },
    handlePageNextClick(val) {
      this.pageNumber = val;
      this.searchKakouList();
    },
    /** --------------*/
    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);
        });
    },

    searchKakouListT(){
      this.pageNumber = 1;
      this.searchKakouList();
    },


    /**
     * 违法信息表查询
     */
    searchKakouList() {
      this.loading_status = true;
      this.tableData = [];
      this.selectIndexDetail = 0;
      let requestParam = JSON.stringify({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        //------
        hpzl: this.valueHpzl,
        pointcode: this.valuePoint,
        carxscd: this.valueXscd,
        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'):"",
        hphm: this.whphm,
        direction:this.valueXsfx

      });
      this.axios
        .post(this.$API_SERVICE_URL + "/kakoumgr/getKkList", 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.passList;
            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;
        });

    }
  },

  mounted() {

    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.initGetMountPoint();
    this.$nextTick(function() {
      this.imgHDT = window.innerHeight - 390;
      this.tableHeight =
        window.innerHeight - this.$refs.passTable.$el.offsetTop - 45;

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.imgHDT = window.innerHeight -390;
        self.tableHeight =
          window.innerHeight - self.$refs.passTable.$el.offsetTop - 45;
      };
    });
    this.initEnumType();
    //---关闭loading
    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
      loading.close();
    });
  }
};
</script>
<style lang="stylus" scoped>
.commone_w {
  /* 设置时间框同其他框一样的宽度 */
  width: 200px;
}

.pass_content_right {
  float: left;
  width: 690px;
  height: 100%;
  margin-left: 5px;
}

.pass_content_left {
  float: left;
  width: -webkit-calc(100% - 700px);
  height: 100%;
}

.right_img {
  float: left;
  width: 98%;

  margin-left: 1px;
}
.ms_info_r{
  float:left;
  width:98%;
}
.audit_plate_1 {
  background-color: #0096F7;
  font-size: 17px;
}

.pass_car_mc {
  border: 1px solid blue;
  margin-left: 5px;
}

.aduit-title {
  float: left;
  width: 98%;
  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;
  }

  .paa_fy {
    float: left;
  }
}
</style>