黑烟优化

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

@@ -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="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-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-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,143 +167,131 @@
 
   </div>
 
-    <!-- <el-table
-      :data="tableData"
-      style="width: 100%">
+  <!-- <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="date"
-        label="船名"
-        width="180">
-      </el-table-column>
+      prop="address"
+      label="抓拍地点">
+    </el-table-column>
       <el-table-column
-        prop="name"
-        label="MMSI"
-        width="180">
-      </el-table-column>
+      prop="address"
+      label="抓怕时间">
+    </el-table-column>
+       </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>
+      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: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 弄'
-          }]
-        }
+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: '',
       },
-      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);
-                });
-          }
-      }
+      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>
+  }
+}
+</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>