fix: 新增场内车辆管理

kongdeqiang

2024-04-16 4ee6f73821ae2c4264c9ea5df9489f94687547d7

fix: 新增场内车辆管理

 src/components/page/enterParkCar/index.vue

New file
@@ -0,0 +1,147 @@
<template>
  <div class="mod-config" style="padding: 10px 10px 0px 10px;">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" >
        <el-form-item label="车牌号">
          <el-input v-model="searchForm.carNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="停车场">
          <el-select v-model="searchForm.parkId" clearable>
            <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getDataList" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table
              :height="tableHeight"
               :data="pageData.rows"
                border
               v-loading="pageData.isLoading">
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center">
          </el-table-column>
          <el-table-column label="入场图" width="200" header-align="center" align="center">
            <template slot-scope="scope">
              <!-- trigger(触发方式)、placement(出现位置) -->
              <el-popover trigger="hover" placement="right" v-if="scope.row.imgPath != null">
                <img :src="scope.row.imgPath"  style="height: 800px;width: 800px"/>
                <img slot="reference" :src="scope.row.imgPath" :alt="scope.row.imgPath" style="height: 50px;width: 150px">
              </el-popover>
            </template>
          </el-table-column>
            <el-table-column
                    prop="carNo"
                    header-align="center"
                    align="center"
                    label="车牌号">
            </el-table-column>
            <el-table-column
                    prop="parkName"
                    header-align="center"
                    align="center"
                    label="停车场">
            </el-table-column>
            <el-table-column
              prop="createTime"
              header-align="center"
              align="center"
              label="入场时间">
            </el-table-column>
            <el-table-column
                    prop="status"
                    header-align="center"
                    align="center"
                    label="发现违章">
              <template slot-scope="scope">
                <p v-if="scope.row.status==0">未违章</p>
                <p v-if="scope.row.status==1" style="color: red">有违章</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="isAdd"
              header-align="center"
              align="center"
              label="手动添加">
            <template slot-scope="scope">
              <p v-if="scope.row.isAdd==0 || scope.row.isAdd==null">否</p>
              <p v-if="scope.row.isAdd==1" style="color: red">是</p>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background @size-change="onPageSizeChange" @current-change="onCurrentPageChange" :current-page="pageData.currentPage" :page-size="pageData.pageSize" :total="pageData.total" style="float: right"></el-pagination>

      </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableHeight:500,
        dataForm: {
          key: ''
        },
        table1:[],
        pageData: this.$byutil.defaultPageData(),
        searchForm: {
          current: this.pageIndex,
          size: this.pageSize,
          carNo:'',
          parkId:''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    components: {
    },
    created () {
      this.getAllPark()
      this.getDataList()
      this.tableHeight = window.innerHeight - 260
    },
    computed: {
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.searchForm.current = this.pageIndex
        this.searchForm.size = this.pageSize
        this.$byutil.loadPageData(this, this.$systemconfig.basePath+'/ffzf/park/getParkCar', this.searchForm);
        this.dataListLoading = false
      },
      getAllPark(){
        this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/park/findAll', this.formData, res => {
          this.table1 = res.data;
        })
      },
      onPageSizeChange(val) {
        this.pageData.pageSize = val;
        this.getDataList();
      },
      onCurrentPageChange(val) {
        this.pageData.page = val;
        this.getDataList();
      },
    }
  }
</script>

<style lang="scss" scoped>
.fenye-box{
  width: calc(70% - 20px);
}
</style>

 src/router/index.js

@@ -40,6 +40,11 @@
                    meta: { title: '手动抬杆记录' }
                },
                {
                    path: '/enterParkCar',
                    component: resolve => require(['../components/page/enterParkCar/index.vue'], resolve),
                    meta: { title: '场内车辆管理' }
                },
                {
                    path: '/ticketBlack',
                    component: resolve => require(['../components/page/ticketBlack/index.vue'], resolve),
                    meta: { title: '黑名单管理' }

 src/store/state.js

@@ -51,6 +51,12 @@
                },
                {
                    icon: 'el-icon-document',
                    name: '场内车辆管理',
                    parentId: 2,
                    indexUrl: "enterParkCar"
                },
                {
                    icon: 'el-icon-document',
                    name: '手动抬杆记录',
                    parentId: 2,
                    indexUrl: "barrierOpenLog"