|
|
@@ -2,122 +2,122 @@
|
|
|
<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.type" 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-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="datetime"
|
|
|
+ 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="datetime"
|
|
|
+ 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="请输入关键字"
|
|
|
+ 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.type" 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" 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-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-form>
|
|
|
|
|
|
|
|
|
- <el-table
|
|
|
+ <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
|
|
|
+ label='序号'
|
|
|
+ type="index"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
prop="aisShipName"
|
|
|
label="船名"
|
|
|
@@ -132,29 +132,29 @@
|
|
|
prop="aisShipType"
|
|
|
label="内河船/海船">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
prop="snapPos"
|
|
|
label="抓拍地点">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
prop="snapTimeFmt"
|
|
|
label="抓拍时间">
|
|
|
</el-table-column>
|
|
|
- <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-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
|
|
|
@@ -167,131 +167,143 @@
|
|
|
|
|
|
</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
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%">
|
|
|
<el-table-column
|
|
|
- prop="address"
|
|
|
- label="黑度登记">
|
|
|
- </el-table-column>
|
|
|
- </el-table-column>
|
|
|
+ prop="date"
|
|
|
+ label="船名"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="address"
|
|
|
- label="详情">
|
|
|
- </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> -->
|
|
|
-</template>
|
|
|
+ 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";
|
|
|
+ <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'
|
|
|
+ export default {
|
|
|
+ name: "xtTable",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ total:100,
|
|
|
+ showSearch:true,
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ aisShipName: undefined,
|
|
|
+ snapPos: undefined,
|
|
|
+ rcgSoot: undefined,
|
|
|
+ aisMmsi:undefined,
|
|
|
+ beginTime:undefined,
|
|
|
+ endTime:undefined,
|
|
|
+ radio:1
|
|
|
+ },
|
|
|
+ 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: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }]
|
|
|
}
|
|
|
- ],
|
|
|
- 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;
|
|
|
- });
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getBlackList();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getBlackList(){
|
|
|
+ // console.log('1'+this.queryParams);
|
|
|
+ getBlackList(this.queryParams).then(response =>{
|
|
|
+ this.tableData = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ console.log(response);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-</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>
|
|
|
+ </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>
|
