zhgdyun/src/views/projectFront/carManage/vehicleReal.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form :inline="true" :model="pageInfo" class="demo-form-inline" ref="queryForm" label-width="70px" size="small">
        <el-form-item label="车牌号码">
          <el-input v-model="pageInfo.carNumber" placeholder="请输入" @keyup.enter.native="getList"></el-input>
        </el-form-item>

        <el-form-item label="设备名称">
          <el-input v-model="pageInfo.deviceName" placeholder="请输入" @keyup.enter.native="getList"></el-input>
        </el-form-item>

        <el-form-item label="上传时间">
          <el-date-picker
            v-model="updateDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            v-permission="{
              key: 'clgl_query',
              menuPath: '/project/carManage/vehicleReal'
            }"
            type="primary"
            size="medium"
            plain
            @click="getList"
            >搜索</el-button
          >
          <el-button
            v-permission="{
              key: 'clgl_refresh',
              menuPath: '/project/carManage/vehicleReal'
            }"
            type="warning"
            size="medium"
            plain
            @click="resetQuery"
            >刷新</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="List" height="520px">
        <el-table-column prop="deviceName" align="center" label="抓拍设备"></el-table-column>
        <el-table-column prop="carNumber" align="center" label="车牌号"></el-table-column>

        <el-table-column prop="isExceed" align="center" label="是否超出阈值">
          <template slot-scope="scope">
            {{ scope.row.isExceed == 1 ? '是' : '否' }}
          </template>
        </el-table-column>

        <el-table-column prop="currentSpeed" align="center" label="当时车数(km/h)"></el-table-column>

        <el-table-column width="300" prop="exceedingThreshold" align="center" label="超出阈值"></el-table-column>
        <el-table-column width="300" prop="snapshotImage" align="center" label="抓拍照片">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="$store.state.FILEURL + scope.row.snapshotImage"
              :preview-src-list="[$store.state.FILEURL + scope.row.snapshotImage]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column width="300" prop="uploadTime" align="center" label="上传时间"></el-table-column>
      </el-table>
    </div>

    <div class="Pagination-but">
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNo"
        :page-sizes="[10, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { carMeasureSpeedData } from '../../../assets/js/api/carManage';
import dayjs from 'dayjs';
export default {
  mounted() {
    this.getList();
  },
  data() {
    return {
      addEditForm: {
        gateName: '',
        gateNumber: '',
        type: 1
      },
      formRules: {
        gateName: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'blur'
          }
        ],
        gateNumber: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'blur'
          }
        ]
      },
      List: [],
      Popup: {
        type: 'add',
        show: false
      },
      // 分页查询
      pageInfo: {
        // 总条数
        total: 0,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 15,
        // 车牌
        carNumber: null,
        // 设备
        deviceName: null,
        // uploadTime_begin: "2024-09-02 00:00:00",
        // uploadTime_end: "2024-09-03 00:00:00",
        uploadTime_begin: '',
        uploadTime_end: ''
      },
      // 上传时间
      updateDate: [
        dayjs().format('YYYY-MM-DD 00:00:00'),
        dayjs().format('YYYY-MM-DD 23:59:59')
      ]
    };
  },
  methods: {
    // 搜索
    resetQuery() {
      // console.log("pageinfo", this.pageInfo);
      this.pageInfo.pageNo = 1;
      this.pageInfo.pageSize = 10;
      this.pageInfo.carNumber = null;
      this.pageInfo.deviceName = null;
      // this.pageInfo.uploadTime_begin = null;
      // this.pageInfo.uploadTime_end = null;
      // this.updateDate = [];
      this.getList();
    },
    handle(type, show) {
      //打开弹窗前的统一处理
      this.Popup = {
        type: type,
        show: show
      };
    },
    Change() {},

    getList() {
      // 处理时间
      console.log('this.updateDate.length', this.updateDate);
      console.log('this.updateDate.length', this.updateDate[0]);
      console.log('this.updateDate.length', this.updateDate[1]);

      if (this.updateDate.length > 1) {
        this.pageInfo.uploadTime_begin = this.updateDate[0];
        this.pageInfo.uploadTime_end = this.updateDate[1];
        // this.pageInfo.updateDate = []
      }

      console.log('pageinfo', this.pageInfo);

      carMeasureSpeedData(this.pageInfo).then(result => {
        if (result.success) {
          this.List = result.result.records;
          this.pageInfo.total = Number(result.result.total);
          // console.log("列表", result.result.records);
        }
      });
    },

    close() {
      this.addEditForm = {
        isEnable: 0
      };
    },

    // 分页 左右 点击 输入
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.getList();
    },

    // 分页多少条点击事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNo = val;
      this.getList();
    }
  }
};
</script>
<style lang="less">
.tableBtns {
  display: flex;
  justify-content: center;
}

.yj-dialogFormBox {
  width: 462px;
}

.fullHeight {
  position: relative;

  .Pagination-but {
    width: 100%;
    padding: 20px 0;
    // background: skyblue;
    position: absolute;
    bottom: 30px;
    right: 20px;

    display: flex;
    justify-content: center;
  }
}
</style>