cbwqpf/ruoyi-ui/src/views/components/table/xtTable.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">

      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="开始时间" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryParams.beginTime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-form-item label="结束时间" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryParams.endTime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-form-item label="船名" prop="aisShipName" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.aisShipName"
            placeholder="请输入船舶名称"
            clearable
            size="small"
            style="width: 80rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
        <el-col :span="2">
          <el-form-item label="MMSI" prop="aisMmsi" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.aisMmsi"
            placeholder="请输入MMSI"
            clearable
            size="small"
            style="width: 100rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="海船/内河船" prop="name" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.shipRegionType" clearable placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-form-item label="抓拍地点" prop="snapPos" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.snapPos"
            placeholder="请输入抓拍地点"
            clearable
            size="small"
            style="width: 90rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>

        <el-col :span="2">
          <el-form-item label="黑度等级" prop="rcgSoot" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.rcgSoot" clearable placeholder="请选择">
            <el-option
              v-for="item in rcgSootOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-form-item style="margin-left:1rem">
        <el-button icon="el-icon-search" size="mini" @click="getBlackList" class="search">查询</el-button>
        <el-button icon="el-icon-upload2" size="mini" class="export">导出</el-button>
      </el-form-item>

    </el-form>


    <el-table
      :data="tableData"
      :header-cell-style="{ background: 'linear-gradient(white, #ccebf9)'}"
      style="width: 100%"
      height=520>
      <el-table-column
        label='序号'
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="aisShipName"
        label="船名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="aisMmsi"
        label="MMSI"
        width="180">
      </el-table-column>
      <el-table-column
        prop="aisShipType"
        label="内河船/海船">
      </el-table-column>
      <el-table-column
        prop="snapPos"
        label="抓拍地点">
      </el-table-column>
      <el-table-column
        prop="snapTimeFmt"
        label="抓拍时间">
      </el-table-column>
      <el-table-column
        prop="rcgSoot"
        label="黑度等级">
      </el-table-column>
      <!-- <el-table-column
      prop="address"
      label="详情">
        <template slot-scope="scope">
              <video style="width:40rem;height:40rem" controls="" autoplay="" name="media"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></video>
        </template>
    </el-table-column> -->
      <!-- <el-table-column
      prop="address"
      label="管辖海事机构">
    </el-table-column> -->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getBlackList"
    />

  </div>

  <!-- <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="船名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="MMSI"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="内河船/海船">
    </el-table-column>
      <el-table-column
      prop="address"
      label="抓拍地点">
    </el-table-column>
      <el-table-column
      prop="address"
      label="抓怕时间">
    </el-table-column>
       </el-table-column>
      <el-table-column
      prop="address"
      label="黑度登记">
    </el-table-column>
       </el-table-column>
      <el-table-column
      prop="address"
      label="详情">
    </el-table-column>
       </el-table-column>
      <el-table-column
      prop="address"
      label="管辖海事机构">
    </el-table-column>
  </el-table> -->
</template>

<script>
import {getBlackList} from "@/api/data/blackData";

export default {
  name: "xtTable",
  data() {
    return {
      total: 0,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        aisShipName: undefined,
        snapPos: undefined,
        rcgSoot: undefined,
        aisMmsi: undefined,
        beginTime: undefined,
        endTime: undefined,
        shipRegionType: undefined,
        illegalStatus: '',
      },
      typeOptions: [
        {
          value: '1',
          label: '内河船'
        }, {
          value: '2',
          label: '海船'
        }
      ],
      rcgSootOptions: [
        {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }, {
          value: '5',
          label: '5'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getBlackList();
  },
  methods: {
    getBlackList() {
      // console.log('1'+this.queryParams);
      this.loading = true;
      getBlackList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        console.log(response);
        this.loading = false;
      });
    }
  }
}
</script>
<style>
.search {

  opacity: 1;
  background: linear-gradient(0deg, #098cf1 0%, #14eaef 100%);
  border-radius: 2rem;
  color: white
}

.export {

  opacity: 1;
  background: #ffffff;
  border: 1rem solid #e1e1e1;
  border-radius: 2rem;
}
</style>