Merge branch 'master' of http://git.xt.wenhq.top:8083/liwei19941102/cbwqpf

# Conflicts:
#	ruoyi-ui/src/views/components/table/xtTable.vue

ruoyi-ui/package.json

@@ -1,88 +1,88 @@
 {
-  "name": "ruoyi",
-  "version": "3.6.0",
-  "description": "若依管理系统",
-  "author": "若依",
-  "license": "MIT",
-  "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
-    "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,vue}": [
-      "eslint --fix",
-      "git add"
+    "name": "ruoyi",
+    "version": "3.6.0",
+    "description": "江苏海事局船舶尾气排放遥感监测系统",
+    "author": "新通",
+    "license": "MIT",
+    "scripts": {
+        "dev": "vue-cli-service serve",
+        "build:prod": "vue-cli-service build",
+        "build:stage": "vue-cli-service build --mode staging",
+        "preview": "node build/index.js --preview",
+        "lint": "eslint --ext .js,.vue src"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "lint-staged": {
+        "src/**/*.{js,vue}": [
+            "eslint --fix",
+            "git add"
+        ]
+    },
+    "keywords": [
+        "vue",
+        "admin",
+        "dashboard",
+        "element-ui",
+        "boilerplate",
+        "admin-template",
+        "management-system"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/y_project/RuoYi-Vue.git"
+    },
+    "dependencies": {
+        "@riophae/vue-treeselect": "0.4.0",
+        "axios": "0.21.0",
+        "clipboard": "2.0.6",
+        "core-js": "3.8.1",
+        "echarts": "^4.9.0",
+        "element-ui": "2.15.2",
+        "file-saver": "2.0.4",
+        "fuse.js": "6.4.3",
+        "highlight.js": "9.18.5",
+        "js-beautify": "1.13.0",
+        "js-cookie": "2.2.1",
+        "jsencrypt": "3.0.0-rc.1",
+        "nprogress": "0.2.0",
+        "quill": "1.3.7",
+        "screenfull": "5.0.2",
+        "sortablejs": "1.10.2",
+        "vue": "2.6.12",
+        "vue-count-to": "1.0.13",
+        "vue-cropper": "0.5.5",
+        "vue-meta": "^2.4.0",
+        "vue-router": "3.4.9",
+        "vuedraggable": "2.24.3",
+        "vuex": "3.6.0"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "4.4.6",
+        "@vue/cli-plugin-eslint": "4.4.6",
+        "@vue/cli-service": "4.4.6",
+        "babel-eslint": "10.1.0",
+        "chalk": "4.1.0",
+        "connect": "3.6.6",
+        "eslint": "7.15.0",
+        "eslint-plugin-vue": "7.2.0",
+        "lint-staged": "10.5.3",
+        "runjs": "4.4.2",
+        "sass": "1.32.0",
+        "sass-loader": "10.1.0",
+        "script-ext-html-webpack-plugin": "2.1.5",
+        "svg-sprite-loader": "5.1.1",
+        "vue-template-compiler": "2.6.12"
+    },
+    "engines": {
+        "node": ">=8.9",
+        "npm": ">= 3.0.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions"
     ]
-  },
-  "keywords": [
-    "vue",
-    "admin",
-    "dashboard",
-    "element-ui",
-    "boilerplate",
-    "admin-template",
-    "management-system"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
-  },
-  "dependencies": {
-    "@riophae/vue-treeselect": "0.4.0",
-    "axios": "0.21.0",
-    "clipboard": "2.0.6",
-    "core-js": "3.8.1",
-    "echarts": "^4.9.0",
-    "element-ui": "2.15.2",
-    "file-saver": "2.0.4",
-    "fuse.js": "6.4.3",
-    "highlight.js": "9.18.5",
-    "js-beautify": "1.13.0",
-    "js-cookie": "2.2.1",
-    "jsencrypt": "3.0.0-rc.1",
-    "nprogress": "0.2.0",
-    "quill": "1.3.7",
-    "screenfull": "5.0.2",
-    "sortablejs": "1.10.2",
-    "vue": "2.6.12",
-    "vue-count-to": "1.0.13",
-    "vue-cropper": "0.5.5",
-    "vue-meta": "^2.4.0",
-    "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "4.4.6",
-    "@vue/cli-plugin-eslint": "4.4.6",
-    "@vue/cli-service": "4.4.6",
-    "babel-eslint": "10.1.0",
-    "chalk": "4.1.0",
-    "connect": "3.6.6",
-    "eslint": "7.15.0",
-    "eslint-plugin-vue": "7.2.0",
-    "lint-staged": "10.5.3",
-    "runjs": "4.4.2",
-    "sass": "1.32.0",
-    "sass-loader": "10.1.0",
-    "script-ext-html-webpack-plugin": "2.1.5",
-    "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
-  },
-  "engines": {
-    "node": ">=8.9",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
-}
+}

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

@@ -1,808 +1,871 @@
 <template>
-    <div style="width:100%;height:100%;background-color:blue">
-        <div class="shipDiv" v-show="shipShow">
-               <div class="shipTitle">
-                       <span style="float:left">一号船</span>
-                       <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
-               </div>
-               <div style="padding—left:10rem" class="shipContent">
-                      <el-tabs v-model="activeName" @tab-click="handleClick">
-                          <el-tab-pane label="AIS信息" name="first">
-                                 <el-row :gutter="3" style="margin-top:3rem">
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                  </el-row>
-                                  <el-row :gutter="3" style="margin-top:3rem">
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                  </el-row>
-                                  <el-row :gutter="3" style="margin-top:3rem">
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                  </el-row>
-                                    <el-row :gutter="3" style="margin-top:3rem">
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">SO<sub>2</sub>浓度:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">CO<sub>2</sub>浓度:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                  </el-row>
-                                  <el-row :gutter="3" style="margin-top:3rem">
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">NO<sub>2</sub>浓度:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">硫碳比:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                  </el-row>
-                                  <el-row :gutter="3" style="margin-top:3rem">
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                      <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div></el-col>
-                                      <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
-                                  </el-row>
-                                  <el-button  style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button>
-                          </el-tab-pane>
-                          <el-tab-pane label="监测数据" name="second">
-                                   <el-table
-                                       stripe='true'
-                                      :header-cell-style="{ background: '#e4eafc'}"
-                                      ref="singleTable"
-                                      :data="tableData"
-                                      highlight-current-row
-                                      style="width: 100%"
-                                      class="tableSc">
-                                      <el-table-column
-                                        type="index"
-                                         label="序号"
-                                        width="50">
-                                      </el-table-column>
-                                      <el-table-column
-                                        property="name"
-                                        label="监测点"
-                                        width="60">
-                                      </el-table-column>
-                                      <el-table-column
-                                        :label="'硫碳比(>'+normalPer+'%)'"
-                                       >
-                                          <template slot-scope="scope">
-                                                <div v-if="scope.row.value > normalPer" style="color:red">{{scope.row.value}}%  ↑  {{((scope.row.value-normalPer)/normalPer*100).toFixed(0)}}%</div>
-                                                <div v-if=" scope.row.value <= normalPer">{{scope.row.value}}%</div>
-                                          </template>
-                                      </el-table-column>
-                                      <el-table-column
-                                        :label="'硫碳比(≧'+normalCount+'度)'">
-                                          <template slot-scope="scope">
-                                                <div v-if="scope.row.count > normalCount" style="color:red">{{scope.row.count}}度  ↑  {{((scope.row.count-normalCount)/normalCount*100).toFixed(0)}}%</div>
-                                                <div v-if=" scope.row.count <= normalCount">{{scope.row.count}}度</div>
-                                          </template>
-                                      </el-table-column>
-                                      <el-table-column
-                                        property="date"
-                                        label="监测时间">
-                                      </el-table-column>
-                                    </el-table>
-                              
-                          </el-tab-pane>
-
-                           <el-tab-pane label="其它监测数据" name="thrid">
-                                   <el-table
-                                       stripe='true'
-                                      :header-cell-style="{ background: '#e4eafc'}"
-                                      ref="singleTable"
-                                      :data="tableData"
-                                      highlight-current-row
-                                      style="width: 100%"
-                                      class="tableSc">
-                                      <el-table-column
-                                        type="index"
-                                         label="序号"
-                                        width="50">
-                                      </el-table-column>
-                                      <el-table-column
-                                        property="name"
-                                        label="监测点"
-                                        width="60">
-                                      </el-table-column>
-                                      <el-table-column
-                                        :label="'硫碳比(>'+normalPer+'%)'"
-                                       >
-                                          <template slot-scope="scope">
-                                                <div v-if="scope.row.value > normalPer" style="color:red">{{scope.row.value}}%  ↑  {{((scope.row.value-normalPer)/normalPer*100).toFixed(0)}}%</div>
-                                                <div v-if=" scope.row.value <= normalPer">{{scope.row.value}}%</div>
-                                          </template>
-                                      </el-table-column>
-                                      <el-table-column
-                                        :label="'硫碳比(≧'+normalCount+'度)'">
-                                          <template slot-scope="scope">
-                                                <div v-if="scope.row.count > normalCount" style="color:red">{{scope.row.count}}度  ↑  {{((scope.row.count-normalCount)/normalCount*100).toFixed(0)}}%</div>
-                                                <div v-if=" scope.row.count <= normalCount">{{scope.row.count}}度</div>
-                                          </template>
-                                      </el-table-column>
-                                      <el-table-column
-                                        property="date"
-                                        label="监测时间">
-                                      </el-table-column>
-                                    </el-table>
-                              
-                          </el-tab-pane>
-                      </el-tabs>
-               </div>
-        </div>
+  <div style="width:100%;height:100%;background-color:blue">
+    <div class="shipDiv" v-show="shipShow">
+      <div class="shipTitle">
+        <span style="float:left">一号船</span>
+        <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
+      </div>
+      <div style="padding—left:10rem" class="shipContent">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="AIS信息" name="first">
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">SO<sub>2</sub>浓度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">CO<sub>2</sub>浓度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">NO<sub>2</sub>浓度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">硫碳比:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+              </el-col>
+            </el-row>
+            <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button>
+          </el-tab-pane>
+          <el-tab-pane label="主要监测数据" name="second">
+            <el-table
+              stripe='true'
+              :header-cell-style="{ background: '#e4eafc'}"
+              ref="singleTable"
+              :data="tableData"
+              highlight-current-row
+              style="width: 100%"
+              class="tableSc">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                property="name"
+                label="监测点"
+                width="60">
+              </el-table-column>
+              <el-table-column
+                :label="'硫含量'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'黑度'">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                property="date"
+                label="监测时间">
+              </el-table-column>
+            </el-table>
 
-        <div class="shipInCount">
-               <img src="@/assets/picture/img_wgcb.png"  style="margin-top:5rem;margin-left:5rem"/>
-               <div style="margin-top:5rem" @click="dialogVisibleShip = true">
-                   <div style="float:left">
-                    <div class="lcbBackground">
-                          <div style="margin-top:12rem"> 
-                              {{blackCount}}
-                            <br/>
-                              <span style="font-size:5rem">艘</span>
-                            </div>
-                    </div>
-                    <div style="text-align: center;color: #ffffff;margin-left:14rem;margin-top:43rem">硫含量超标</div>
-                   </div>
-                   <div style="float:left">
-                      <div class="hyzpBackground">
-                          <div style="margin-top:12rem"> 
-                               {{so2Count}}
-                            <br/>
-                              <span style="font-size:5rem">艘</span>
-                            </div>
-                    </div>
-                     <div style="text-align: center;color: #ffffff;margin-left:7rem;margin-top:43rem">黑烟抓拍</div>
-                   </div>
-               </div>
-               <img src="@/assets/picture/img_sbtj.png"  style="margin-top:5rem;margin-left:5rem"/>
-               <div class="totalContent" style="padding-right:15rem">
-                  <div style="float:left;margin-top:3rem">
-                        <i class="el-icon-pie-chart" style="font-size:9rem;float:left;margin-left:5rem"/>
-                        <span style="font-size:6rem;float:left;margin-left:5rem">总数</span>
-                  </div>
-                   <div style="float:right;font-size:9rem;margin-top:1rem">{{deviceTotal}}个</div>
-               </div>
-               <div style="padding-left:5rem;padding-top:1rem">
-                     <div style="color:white" @click="dialogVisible = true">
-                          <div style="float:left"><img src="@/assets/picture/location.png"  style="margin-left:5rem"/></div>
-                          <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem" >安装位置</div>
-                    </div>
-
-                   <div style="color:white" @click="dialogVisibleType = true">
-                          <div style="float:left"><img src="@/assets/picture/device_type.png"  style="margin-left:5rem"/></div>
-                          <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem" >设备类型</div>
-                    </div>
-               </div>
-        </div>
+          </el-tab-pane>
 
-        <div class="shipInformation">
-              <img src="@/assets/picture/img_xycbxx.png"  style="margin-top:5rem;margin-left:5rem"/>
-              <scroll></scroll>
-              <img src="@/assets/picture/img_wgcbxx.png"  style="margin-top:5rem;margin-left:5rem"/>
-              <scroll></scroll>
-        </div>
+          <el-tab-pane label="其它监测数据" name="thrid">
+            <el-table
+              stripe='true'
+              :header-cell-style="{ background: '#e4eafc'}"
+              ref="singleTable"
+              :data="tableData"
+              highlight-current-row
+              style="width: 100%"
+              class="tableSc">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                property="name"
+                label="监测点"
+                width="60">
+              </el-table-column>
+              <el-table-column
+                :label="'SO2浓度'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'NO2浓度'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'CO2浓度'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'硫碳比'">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                property="date"
+                label="监测时间">
+              </el-table-column>
+            </el-table>
 
-        <div class="equipmentContent">
-              <el-dialog
-                  title=""
-                  :visible.sync="dialogVisible"
-                  @open="openChart">
-                         <div id="equipmentChart" style="width:260rem;height:100rem"></div>
-                </el-dialog>
-        </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
 
-         <div class="equipmentTypeContent">
-              <el-dialog
-                  title=""
-                  :visible.sync="dialogVisibleType"
-                  @open="openTypeChart">
-                         <div id="equipmentTypeChart" style="width:160rem;height:100rem"></div>
-                </el-dialog>
+    <div class="shipInCount">
+      <img src="@/assets/picture/img_wgcb.png" style="margin-top:5rem;margin-left:5rem"/>
+      <div style="margin-top:5rem" @click="dialogVisibleShip = true">
+        <div style="float:left">
+          <div class="lcbBackground">
+            <div style="margin-top:12rem">
+              {{ blackCount }}
+              <br/>
+              <span style="font-size:5rem">艘</span>
+            </div>
+          </div>
+          <div style="text-align: center;color: #ffffff;margin-left:14rem;margin-top:43rem">硫含量超标</div>
+        </div>
+        <div style="float:left">
+          <div class="hyzpBackground">
+            <div style="margin-top:12rem">
+              {{ so2Count }}
+              <br/>
+              <span style="font-size:5rem">艘</span>
+            </div>
+          </div>
+          <div style="text-align: center;color: #ffffff;margin-left:7rem;margin-top:43rem">黑烟抓拍</div>
+        </div>
+      </div>
+      <img src="@/assets/picture/img_sbtj.png" style="margin-top:5rem;margin-left:5rem"/>
+      <div class="totalContent" style="padding-right:15rem">
+        <div style="float:left;margin-top:3rem">
+          <i class="el-icon-pie-chart" style="font-size:9rem;float:left;margin-left:5rem"/>
+          <span style="font-size:6rem;float:left;margin-left:5rem">总数</span>
+        </div>
+        <div style="float:right;font-size:9rem;margin-top:1rem">{{ deviceTotal }}个</div>
+      </div>
+      <div style="padding-left:5rem;padding-top:1rem">
+        <div style="color:white" @click="dialogVisible = true">
+          <div style="float:left"><img src="@/assets/picture/location.png" style="margin-left:5rem"/></div>
+          <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem">安装位置</div>
         </div>
 
-          <div class="wfcbContent">
-              <el-dialog
-                  title=""
-                  :visible.sync="dialogVisibleShip"
-                  @open="openShipChart">
-                   <div style="position:absolute;z-index:3001">
-                    <div style="float:left;color:#ffffff">开始</div>
-                    <div style="float:left;margin-left:3rem">
-                    <el-date-picker
-                    v-model="beginTime"
-                      type="month"
-                      placeholder="选择月份">
-                    </el-date-picker>
-                    </div>
-                    <div style="float:left;margin-left:3rem;color:#ffffff">结束</div>
-                    <div style="float:left;margin-left:3rem">
-                    <el-date-picker
-                        v-model="endTime"
-                         type="month"
-                        placeholder="选择月份">
-                    </el-date-picker>
-                    </div>
-                    </div>
-                         <div id="shipChart" style="width:280rem;height:120rem;position:absolute;z-index:3000"></div>
-                </el-dialog>
+        <div style="color:white" @click="dialogVisibleType = true">
+          <div style="float:left"><img src="@/assets/picture/device_type.png" style="margin-left:5rem"/></div>
+          <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem">设备类型</div>
         </div>
-<!-- 
-           <div class="azwzContent">
-              <el-dialog
-                  title=""
-                  :visible.sync="dialogVisibleAzwz"
-                  :before-close="handleClose"
-                  @open="openShipChart">
-                         <div id="shipChart" style="width:220rem;height:100rem;"></div>
-                </el-dialog>
-        </div> -->
+      </div>
+    </div>
 
+    <div class="shipInformation">
+      <img src="@/assets/picture/img_xycbxx.png" style="margin-top:5rem;margin-left:5rem"/>
+      <scroll></scroll>
+      <img src="@/assets/picture/img_wgcbxx.png" style="margin-top:5rem;margin-left:5rem"/>
+      <scroll></scroll>
+    </div>
 
+    <div class="equipmentContent">
+      <el-dialog
+        title=""
+        :visible.sync="dialogVisible"
+        @open="openChart">
+        <div id="equipmentChart" style="width:260rem;height:100rem"></div>
+      </el-dialog>
+    </div>
 
+    <div class="equipmentTypeContent">
+      <el-dialog
+        title=""
+        :visible.sync="dialogVisibleType"
+        @open="openTypeChart">
+        <div id="equipmentTypeChart" style="width:160rem;height:100rem"></div>
+      </el-dialog>
+    </div>
 
+    <div class="wfcbContent">
+      <el-dialog
+        title=""
+        :visible.sync="dialogVisibleShip"
+        @open="openShipChart">
+        <div style="position:absolute;z-index:3001">
+          <div style="float:left;color:#ffffff">开始</div>
+          <div style="float:left;margin-left:3rem">
+            <el-date-picker
+              v-model="beginTime"
+              type="month"
+              placeholder="选择月份">
+            </el-date-picker>
+          </div>
+          <div style="float:left;margin-left:3rem;color:#ffffff">结束</div>
+          <div style="float:left;margin-left:3rem">
+            <el-date-picker
+              v-model="endTime"
+              type="month"
+              placeholder="选择月份">
+            </el-date-picker>
+          </div>
+        </div>
+        <div id="shipChart" style="width:280rem;height:120rem;position:absolute;z-index:3000"></div>
+      </el-dialog>
     </div>
+    <!--
+               <div class="azwzContent">
+                  <el-dialog
+                      title=""
+                      :visible.sync="dialogVisibleAzwz"
+                      :before-close="handleClose"
+                      @open="openShipChart">
+                             <div id="shipChart" style="width:220rem;height:100rem;"></div>
+                    </el-dialog>
+            </div> -->
+
+
+  </div>
 </template>
 
- <script>
- import scroll from "./scroll.vue"
- import { getStaticDevice,getDeviceType,getIllegalShipStatic } from "@/api/data/staticalData";
+<script>
+import scroll from "./scroll.vue"
+import {getDeviceType, getIllegalShipStatic, getStaticDevice} from "@/api/data/staticalData";
 
-    export default {
-      name: "homeTable",
-      components: {
-          scroll 
+export default {
+  name: "homeTable",
+  components: {
+    scroll
+  },
+  data() {
+    return {
+      total: 100,
+      shipShow: true,
+      activeName: 'first',
+      normalPer: 0.1,
+      so2Count: 1,
+      blackCount: 1,
+      dialogVisible: false,
+      dialogVisibleAzwz: false,
+      dialogVisibleType: false,
+      normalCount: 1,
+      dialogVisibleShip: false,
+      beginTime: '',
+      endTime: '',
+      deviceTotal: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined,
+        mmsi: undefined,
+        radio: 1
       },
-      data() {
-        return {
-          total:100,
-          shipShow:true,
-          activeName:'first',
-          normalPer:0.1,
-          so2Count:1,
-          blackCount:1,
-          dialogVisible:false,
-          dialogVisibleAzwz:false,
-          dialogVisibleType:false,
-          normalCount:1,
-          dialogVisibleShip:false,
-          beginTime:'',
-          endTime:'',
-          deviceTotal:0,
-          queryParams: {
-            pageNum: 1,
-            pageSize: 10,
-            roleName: undefined,
-            roleKey: undefined,
-            status: undefined,
-            mmsi:undefined,
-            radio:1
-          },
-          tableData: [{
-            date: '2016-05-02 10:00',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄',
-            value:0.19,
-            count:1.9,
-          }, {
-            date: '2016-05-04 10:00',
-            name: '王小虎',
-            value:0.1,
-             count:1.3,
-            address: '上海市普陀区金沙江路 1517 弄'
-          }, {
-            date: '2016-05-01 10:00',
-            name: '王小虎',
-            value:0.2,
-             count:2,
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            date: '2016-05-03 10:00',
-            name: '王小虎',
-            value:0.08,
-            count:0.6,
-            address: '上海市普陀区金沙江路 1516 弄'
-          },{
-            date: '2016-05-03 10:00',
-            name: '王小虎',
-            value:0.03,
-             count:0.2,
-            address: '上海市普陀区金沙江路 1516 弄'
-          },{
-            date: '2016-05-03 10:00',
-            name: '王小虎',
-            value:0.09,
-             count:0.3,
-            address: '上海市普陀区金沙江路 1516 弄'
-          }]
+      tableData: [{
+        date: '2016-05-02 10:00',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        value: 0.19,
+        count: 1.9,
+      }, {
+        date: '2016-05-04 10:00',
+        name: '王小虎',
+        value: 0.1,
+        count: 1.3,
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01 10:00',
+        name: '王小虎',
+        value: 0.2,
+        count: 2,
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03 10:00',
+        name: '王小虎',
+        value: 0.08,
+        count: 0.6,
+        address: '上海市普陀区金沙江路 1516 弄'
+      }, {
+        date: '2016-05-03 10:00',
+        name: '王小虎',
+        value: 0.03,
+        count: 0.2,
+        address: '上海市普陀区金沙江路 1516 弄'
+      }, {
+        date: '2016-05-03 10:00',
+        name: '王小虎',
+        value: 0.09,
+        count: 0.3,
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }, mounted() {
+    this.getStaticDevice();
+    this.getIllegalShipStatic();
+    //  console.log(111111111111)
+    //  this.getChart();
+  },
+  methods: {
+    openShipChart() {
+      console.log(1111111);
+      const t = this;
+      setTimeout(() => {
+        //  执行echarts画图方法
+        t.getShipChart();
+      }, 0);
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    openChart() {
+      const t = this;
+      setTimeout(() => {
+        //  执行echarts画图方法
+        t.getStaticDevice();
+      }, 0);
+    },
+    openTypeChart() {
+      const t = this;
+      setTimeout(() => {
+        //  执行echarts画图方法
+        t.getTypeData();
+      }, 0);
+    },
+    getStaticDevice() {
+      getStaticDevice().then(response => {
+        console.log(response);
+        let nameArry = [];
+        let dataArry = [];
+        this.deviceTotal = 0;
+        for (var key in response.data) {
+          this.deviceTotal += response.data[key]
+          nameArry.push(key);
+          dataArry.push(response.data[key]);
         }
-      },mounted(){
-           this.getStaticDevice();
-           this.getIllegalShipStatic();
-          //  console.log(111111111111)
-          //  this.getChart();
-      },
-      methods:{
-          openShipChart(){
-            console.log(1111111);
-            const t =this;
-             setTimeout(() => {
-                  //  执行echarts画图方法
-                  t.getShipChart();
-                }, 0);     
-          },
-          handleClick(tab, event) {
-            console.log(tab, event);
-          },
-          openChart(){
-            const t =this;
-             setTimeout(() => {
-                  //  执行echarts画图方法
-                  t.getStaticDevice();
-                }, 0);                  
+        this.getChart(nameArry, dataArry);
+      });
+    },
+    getIllegalShipStatic() {
+      getIllegalShipStatic().then(data => {
+        this.blackCount = data.data.blackCount;
+        this.so2Count = data.data.so2Count;
+      });
+    },
+    getShipChart() {
+      var myChart = this.$echarts.init(document.getElementById('shipChart'));
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
+          axisLabel: {
+            show: true,  //这里的show用于设置是否显示x轴下的字体 默认为true
+            interval: 0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
+
+            textStyle: {   //textStyle里面写x轴下的字体的样式
+              color: '#ffffff',
+              fontSize: 13
+            }
           },
-          openTypeChart(){
-             const t =this;
-             setTimeout(() => {
-                  //  执行echarts画图方法
-                  t.getTypeData();
-                }, 0);  
+          axisLine: {
+            show: true,  //这里的show用于设置是否显示x轴那一条线 默认为true
+            lineStyle: { //lineStyle里面写x轴那一条线的样式
+              color: '#ffffff',
+              width: 2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            show: true,  //这里的show用于设置是否显示x轴下的字体 默认为true
+            interval: 0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
+            textStyle: {   //textStyle里面写x轴下的字体的样式
+              color: '#ffffff',
+              fontSize: 13
+            }
           },
-          getStaticDevice(){
-            getStaticDevice().then(response => {
-                console.log(response);
-                let nameArry = [];
-                let dataArry = [];
-                this.deviceTotal = 0;
-                for (var key in response.data) { 
-                    this.deviceTotal += response.data[key]
-                    nameArry.push(key);
-                    dataArry.push(response.data[key]);
+          axisLine: {
+            show: true,  //这里的show用于设置是否显示x轴那一条线 默认为true
+            lineStyle: { //lineStyle里面写x轴那一条线的样式
+              color: '#ffffff',
+              width: 2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
+            }
+          }
+        },
+        series: [{
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          type: 'line',
+          smooth: true,
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#61FAFB',
+                width: 5
+              }
             }
-                  this.getChart(nameArry,dataArry);
-            });
           },
-          getIllegalShipStatic(){
-               getIllegalShipStatic().then(data =>{
-                   this.blackCount = data.data.blackCount;
-                   this.so2Count = data.data.so2Count;         
-               }); 
+        }, {
+          data: [700, 902, 501, 734, 1390, 1230, 1120],
+          type: 'line',
+          smooth: true,
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#FFA647',
+                width: 5
+              }
+            }
           },
-          getShipChart(){
-                var myChart =  this.$echarts.init(document.getElementById('shipChart'));
-                var option = {
-                                xAxis: {
-                                    type: 'category',
-                                    data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
-                                      axisLabel:{
-                                              show:true,  //这里的show用于设置是否显示x轴下的字体 默认为true
-                                  　　　　　　　interval:0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
-                                  　　
-                                  　　　　　　　textStyle:{   //textStyle里面写x轴下的字体的样式
-                                                color:'#ffffff',
-                                                fontSize:13
-                                              }
-                                        },
-                                       axisLine:{
-                                          show:true,  //这里的show用于设置是否显示x轴那一条线 默认为true
-                                          lineStyle:{ //lineStyle里面写x轴那一条线的样式
-                                            color:'#ffffff',
-                                            width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
-                                          }
-                                      }
-                                },
-                                yAxis: {
-                                    type: 'value',
-                                     axisLabel:{
-                                              show:true,  //这里的show用于设置是否显示x轴下的字体 默认为true
-                                  　　　　　　　interval:0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
-                                  　　　　　　　textStyle:{   //textStyle里面写x轴下的字体的样式
-                                                color:'#ffffff',
-                                                fontSize:13
-                                              }
-                                        },
-                                     axisLine:{
-                                          show:true,  //这里的show用于设置是否显示x轴那一条线 默认为true
-                                          lineStyle:{ //lineStyle里面写x轴那一条线的样式
-                                            color:'#ffffff',
-                                            width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
-                                          }
-                                      }
-                                },
-                                series: [{
-                                    data: [820, 932, 901, 934, 1290, 1330, 1320],
-                                    type: 'line',
-                                    smooth: true,
-                                    itemStyle : {  
-                                        normal : {  
-                                            lineStyle:{  
-                                                color:'#61FAFB',
-                                                width:5
-                                            }  
-                                        }  
-                                    },  
-                                },{
-                                    data: [700, 902, 501, 734, 1390, 1230, 1120],
-                                    type: 'line',
-                                    smooth: true,
-                                    itemStyle : {  
-                                        normal : {  
-                                            lineStyle:{  
-                                                color:'#FFA647',
-                                                width:5
-                                            }  
-                                        }  
-                                    },  
-                                },{
-                                    data: [1020, 932, 701, 434, 1230, 1430, 1620],
-                                    type: 'line',
-                                    smooth: true,
-                                    itemStyle : {  
-                                        normal : {  
-                                            lineStyle:{  
-                                                color:'#FF2D3C',
-                                                width:5
-                                            }  
-                                        }  
-                                    },  
-                                }]
-                            };
-                myChart.setOption(option); 
+        }, {
+          data: [1020, 932, 701, 434, 1230, 1430, 1620],
+          type: 'line',
+          smooth: true,
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#FF2D3C',
+                width: 5
+              }
+            }
           },
-          getChart(nameArry,dataArry){
-            // console.log(2222222222222222) 
-                // this.dialogVisible = true;
-                console.log(document.getElementById('equipmentChart'));
-                console.log(2222222222222222) 
-                var myChart =  this.$echarts.init(document.getElementById('equipmentChart'));
-                console.log(myChart);
-                var option = {
-                                tooltip: {
-                                    trigger: 'axis',
-                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-                                    }
-                                },
-                                grid: {
-                                    left: '3%',
-                                    right: '4%',
-                                    bottom: '3%',
-                                    containLabel: true
-                                },
-                                xAxis: [
-                                    {
-                                        type: 'category',
-                                        data:nameArry,
-                                        axisTick: {
-                                            alignWithLabel: true
-                                        },
-                                        axisLine: {
-                                             lineStyle: {
-                                                color: 'white'
-                                             }
-                                           },
-                                         axisLabel: {
-                                              interval: 0,
-                                              show: true,
-                                              textStyle: {
-                                                  color: 'white' //x轴data 的颜色
-                                              }
-                                         },
-                                      
-                                    },  
-                                ],
-                                yAxis: [
-                                    {
-                                        type: 'value',
-                                          splitLine:{
-                                            show: true,
-                                            lineStyle:{
-                                                color: ['#435886'],
-                                                width: 1,
-                                                type: 'solid'
-                                            }
-                                            },
-                                          axisLine: {
-                                             lineStyle: {
-                                                color: '#435886'
-                                             }
-                                           },
-                                         axisLabel: {
-                                              interval: 0,
-                                              show: true,
-                                              textStyle: {
-                                                  color: 'white' //x轴data 的颜色
-                                              }
-                                         },
-                                    }
-                                ],
-                                series: [
-                                    {
-                                        name: '直接访问',
-                                        type: 'bar',
-                                        barWidth: '30%',
-                                        data: dataArry,
-                                        itemStyle: {
-                            　               normal: {
-                                            color: new this.$echarts.graphic.LinearGradient(
-                                                0, 0, 0, 1,
-                                                [
-                                                    {offset: 1, color: '#2275E4'},                   //柱图渐变色    
-                                                    {offset: 0, color: '#56CCF2'},                   //柱图渐变色
-                                                ]
-                                            )
-                                        },
-                                        
-                                      }
-                                    }
-                                ]
-                            };
-                 myChart.setOption(option); 
+        }]
+      };
+      myChart.setOption(option);
+    },
+    getChart(nameArry, dataArry) {
+      // console.log(2222222222222222)
+      // this.dialogVisible = true;
+      console.log(document.getElementById('equipmentChart'));
+      console.log(2222222222222222)
+      var myChart = this.$echarts.init(document.getElementById('equipmentChart'));
+      console.log(myChart);
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: nameArry,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              textStyle: {
+                color: 'white' //x轴data 的颜色
+              }
+            },
+
           },
-          getTypeData(){
-            getDeviceType().then(response=>{
-                let nameArry = [];
-                let dataArry = [];
-                for (var key in response.data) {  
-                    nameArry.push(key);
-                    dataArry.push(response.data[key]);
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#435886'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#435886'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              textStyle: {
+                color: 'white' //x轴data 的颜色
+              }
+            },
+          }
+        ],
+        series: [
+          {
+            name: '直接访问',
+            type: 'bar',
+            barWidth: '30%',
+            data: dataArry,
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {offset: 1, color: '#2275E4'},                   //柱图渐变色
+                    {offset: 0, color: '#56CCF2'},                   //柱图渐变色
+                  ]
+                )
+              },
+
             }
-                  this.getTypeChart(nameArry,dataArry);
-            });
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    getTypeData() {
+      getDeviceType().then(response => {
+        let nameArry = [];
+        let dataArry = [];
+        for (var key in response.data) {
+          nameArry.push(key);
+          dataArry.push(response.data[key]);
+        }
+        this.getTypeChart(nameArry, dataArry);
+      });
+    },
+    getTypeChart(nameArry, dataArry) {
+      console.log(nameArry);
+      // console.log(2222222222222222)
+      // this.dialogVisible = true;
+      var myChart = this.$echarts.init(document.getElementById('equipmentTypeChart'));
+      console.log(myChart);
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: nameArry,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              textStyle: {
+                color: 'white' //x轴data 的颜色
+              }
+            },
+
           },
-          getTypeChart(nameArry,dataArry){
-             console.log(nameArry);
-            // console.log(2222222222222222) 
-                // this.dialogVisible = true;
-                var myChart =  this.$echarts.init(document.getElementById('equipmentTypeChart'));
-                console.log(myChart);
-                var option = {
-                                tooltip: {
-                                    trigger: 'axis',
-                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-                                    }
-                                },
-                                grid: {
-                                    left: '3%',
-                                    right: '4%',
-                                    bottom: '3%',
-                                    containLabel: true
-                                },
-                                xAxis: [
-                                    {
-                                        type: 'category',
-                                        data:nameArry,
-                                        axisTick: {
-                                            alignWithLabel: true
-                                        },
-                                        axisLine: {
-                                             lineStyle: {
-                                                color: 'white'
-                                             }
-                                           },
-                                         axisLabel: {
-                                              interval: 0,
-                                              show: true,
-                                              textStyle: {
-                                                  color: 'white' //x轴data 的颜色
-                                              }
-                                         },
-                                      
-                                    },  
-                                ],
-                                yAxis: [
-                                    {
-                                        type: 'value',
-                                          splitLine:{
-                                            show: true,
-                                            lineStyle:{
-                                                color: ['#435886'],
-                                                width: 1,
-                                                type: 'solid'
-                                            }
-                                            },
-                                          axisLine: {
-                                             lineStyle: {
-                                                color: '#435886'
-                                             }
-                                           },
-                                         axisLabel: {
-                                              interval: 0,
-                                              show: true,
-                                              textStyle: {
-                                                  color: 'white' //x轴data 的颜色
-                                              }
-                                         },
-                                    }
-                                ],
-                                series: [
-                                    {
-                                        name: '直接访问',
-                                        type: 'bar',
-                                        barWidth: '30%',
-                                        data: dataArry,
-                                        itemStyle: {
-                            　               normal: {
-                                            color: new this.$echarts.graphic.LinearGradient(
-                                                0, 0, 0, 1,
-                                                [
-                                                    {offset: 1, color: '#2275E4'},                   //柱图渐变色    
-                                                    {offset: 0, color: '#56CCF2'},                   //柱图渐变色
-                                                ]
-                                            )
-                                        },
-                                        
-                                      }
-                                    }
-                                ]
-                            };
-                 myChart.setOption(option); 
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#435886'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#435886'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              textStyle: {
+                color: 'white' //x轴data 的颜色
+              }
+            },
+          }
+        ],
+        series: [
+          {
+            name: '直接访问',
+            type: 'bar',
+            barWidth: '30%',
+            data: dataArry,
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {offset: 1, color: '#2275E4'},                   //柱图渐变色
+                    {offset: 0, color: '#56CCF2'},                   //柱图渐变色
+                  ]
+                )
+              },
+
+            }
           }
-      }
+        ]
+      };
+      myChart.setOption(option);
     }
-  </script>
-
-  <style scoped>
-         .shipDiv{
-            position: absolute; 
-            top: 250rem; 
-            left: 140rem; 
-            width: 200rem; 
-            height: 130rem; 
-            background-color: white;
-         }
-
-         .shipTitle{
-            padding-top:4rem;
-            padding-left:10rem;
-            padding-right:10rem;
-            width:100%;
-            height:20rem;
-            background-color:#0d25a5;
-            color:white;
-            font-size: 7rem
-         }
-         
-        .contentFont{
-           font-size: 5rem;
-        }
+  }
+}
+</script>
 
-        .shipInformation{
-           background: url("./assets/bg_information.png") no-repeat;
-           background-size: 100% 100%;
-           width:120rem;
-           height:160rem;
-           position: absolute; 
-           top:225rem;
-           right:30rem;
-        }
+<style scoped>
+.shipDiv {
+  position: absolute;
+  top: 250rem;
+  left: 140rem;
+  width: 200rem;
+  height: 130rem;
+  background-color: white;
+}
 
-        .shipInCount{
-           background: url("./assets/bg_count.png") no-repeat;
-           background-size: 100% 100%;
-           width:120rem;
-           height:160rem;
-           position: absolute; 
-           top:55rem;
-           right:30rem;
-        }
+.shipTitle {
+  padding-top: 4rem;
+  padding-left: 10rem;
+  padding-right: 10rem;
+  width: 100%;
+  height: 20rem;
+  background-color: #0d25a5;
+  color: white;
+  font-size: 7rem
+}
 
-        .lcbBackground{
-           background: url("./assets/img_lcb.png") no-repeat;
-           background-size: 100% 100%;
-           width:40rem;
-           height:40rem;
-           float:left;
-           margin-left:15rem;
-           text-align: center;
-           color:#45AAF0;
-           font-size: 7rem;
-           font-weight: Bold;
-        }
+.contentFont {
+  font-size: 5rem;
+}
 
-         .hyzpBackground{
-           background: url("./assets/img_hyzp.png") no-repeat;
-           background-size: 100% 100%;
-           width:40rem;
-           height:40rem;
-           float:left;
-           margin-left:8rem;
-           text-align: center;
-           color:#2EF9B3;
-           font-size: 7rem;
-           font-weight: Bold;
-        }
+.shipInformation {
+  background: url("./assets/bg_information.png") no-repeat;
+  background-size: 100% 100%;
+  width: 120rem;
+  height: 160rem;
+  position: absolute;
+  top: 225rem;
+  right: 30rem;
+}
 
-        .totalContent{
-           background: url("./assets/img_total.png") no-repeat;
-           background-size: 100% 100%;
-           width:100rem;
-           height:15rem;
-           margin-left:10rem;
-           margin-top:5rem;
-           color:white;
-        }
+.shipInCount {
+  background: url("./assets/bg_count.png") no-repeat;
+  background-size: 100% 100%;
+  width: 120rem;
+  height: 160rem;
+  position: absolute;
+  top: 55rem;
+  right: 30rem;
+}
 
-        .shipContent >>> .el-tabs__item{
-             font-weight:bold;
-             color:#A8A8A8
-         }
-
-        .shipContent >>> .el-tabs__item.is-active{
-             color:#0d25a5
-         }
-
-        .shipContent >>> .el-tabs__active-bar{
-           margin-left:10rem
-         }
-
-        .shipContent >>> .el-tabs__nav{
-           padding-left:10rem
-         }
-
-        .shipContent >>>.el-tabs__active-bar{
-           background-color:#0d25a5
-         }
-          
-        .tableSc >>> tr{
-               padding:0;
-               height:3rem;
-               line-height: 3rem;
-               font-size: 5rem;
-        }
+.lcbBackground {
+  background: url("./assets/img_lcb.png") no-repeat;
+  background-size: 100% 100%;
+  width: 40rem;
+  height: 40rem;
+  float: left;
+  margin-left: 15rem;
+  text-align: center;
+  color: #45AAF0;
+  font-size: 7rem;
+  font-weight: Bold;
+}
 
-        .tableSc >>> td{
-               padding:0;
-               height:3rem;
-               line-height: 3rem
-        }
+.hyzpBackground {
+  background: url("./assets/img_hyzp.png") no-repeat;
+  background-size: 100% 100%;
+  width: 40rem;
+  height: 40rem;
+  float: left;
+  margin-left: 8rem;
+  text-align: center;
+  color: #2EF9B3;
+  font-size: 7rem;
+  font-weight: Bold;
+}
 
-        .azwzContent >>> .el-dialog{
-              background: url("./assets/pop_azwz.png") no-repeat;
-              background-size: 100% 100%;
-              height:150rem;
-              width:280rem;
-              border:none;
-              top:100rem;
-        }
+.totalContent {
+  background: url("./assets/img_total.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100rem;
+  height: 15rem;
+  margin-left: 10rem;
+  margin-top: 5rem;
+  color: white;
+}
 
-        .wfcbContent >>> .el-dialog{
-              background: url("./assets/pop_wgcbtj.png") no-repeat;
-              background-size: 100% 100%;
-              height:150rem;
-              width:280rem;
-              border:none;
-              top:100rem;
-        }
+.shipContent >>> .el-tabs__item {
+  font-weight: bold;
+  color: #A8A8A8
+}
 
-        .equipmentContent >>> .el-dialog{
-              background: url("./assets/pop_azwz.png") no-repeat;
-              background-size: 100% 100%;
-              height:150rem;
-              width:280rem;
-              border:none;
-              top:100rem;
-        }
+.shipContent >>> .el-tabs__item.is-active {
+  color: #0d25a5
+}
 
-        .equipmentTypeContent >>> .el-dialog{
-              background: url("./assets/pop_sblx.png") no-repeat;
-              background-size: 100% 100%;
-              height:150rem;
-              width:200rem;
-              border:none;
-              top:100rem;
-        }
+.shipContent >>> .el-tabs__active-bar {
+  margin-left: 10rem
+}
 
-        .wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
-              width:50rem;
-        }
-        /* .dialogContent >>> .el-input--medium .el-input__inner{
-              height:10rem;
-              text-align: center
-         } */
-     
-       
-  </style>
+.shipContent >>> .el-tabs__nav {
+  padding-left: 10rem
+}
+
+.shipContent >>> .el-tabs__active-bar {
+  background-color: #0d25a5
+}
+
+.tableSc >>> tr {
+  padding: 0;
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 5rem;
+}
+
+.tableSc >>> td {
+  padding: 0;
+  height: 3rem;
+  line-height: 3rem
+}
+
+.azwzContent >>> .el-dialog {
+  background: url("./assets/pop_azwz.png") no-repeat;
+  background-size: 100% 100%;
+  height: 150rem;
+  width: 280rem;
+  border: none;
+  top: 100rem;
+}
+
+.wfcbContent >>> .el-dialog {
+  background: url("./assets/pop_wgcbtj.png") no-repeat;
+  background-size: 100% 100%;
+  height: 150rem;
+  width: 280rem;
+  border: none;
+  top: 100rem;
+}
+
+.equipmentContent >>> .el-dialog {
+  background: url("./assets/pop_azwz.png") no-repeat;
+  background-size: 100% 100%;
+  height: 150rem;
+  width: 280rem;
+  border: none;
+  top: 100rem;
+}
+
+.equipmentTypeContent >>> .el-dialog {
+  background: url("./assets/pop_sblx.png") no-repeat;
+  background-size: 100% 100%;
+  height: 150rem;
+  width: 200rem;
+  border: none;
+  top: 100rem;
+}
+
+.wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
+  width: 50rem;
+}
+
+/* .dialogContent >>> .el-input--medium .el-input__inner{
+      height:10rem;
+      text-align: center
+ } */
+
+
+</style>

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

@@ -1,166 +1,165 @@
 <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.startTime"
-                        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="shipName" style="float:right">
-                    </el-form-item> 
-                </el-col>
-                 <el-col :span="3">
-                 <el-input
-                        v-model="queryParams.shipName"
-                        placeholder="船舶名"
-                        clearable
-                        size="small"
-                        style="width: 80rem"
-                        @keyup.enter.native="handleQuery"
-                      />
-                 </el-col>
-                <el-col :span="2">
-                      <el-form-item label="MMSI" prop="mmsi" style="float:right">
-                        </el-form-item>
-                </el-col>
-                  <el-col :span="3">
-                     <el-input
-                            v-model="queryParams.mmsi"
-                            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.shipRegionType" clearable placeholder="请选择">
-                              <el-option
-                                v-for="item in shipTypeOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                              </el-option>
-                            </el-select>
-                 </el-col>
-                   <el-col :span="2">
-                       <el-form-item label="监测点" prop="monitorPointName" style="float:right">
-                       </el-form-item>
-                 </el-col>
-                  <el-col :span="3">
-                        <el-select v-model="queryParams.monitorPointName" clearable placeholder="请选择">
-                            <el-option
-                              v-for="item in jianceOptions"
-                              :key="item.dictValue"
-                              :label="item.dictLabel"
-                              :value="item.dictValue">
-                            </el-option>
-                          </el-select>
-                 </el-col>
-                
-                  <el-col :span="2">
-                       <el-form-item label="目的港" prop="destination" style="float:right">
-                       </el-form-item>
-                 </el-col>
-                  <el-col :span="3">
-                        <el-input
-                          v-model="queryParams.destination"
-                          placeholder="目的港"
-                          clearable
-                          size="small"
-                          style="width: 80rem"
-                        />
-                 </el-col>
-                  <el-col :span="2">
-                         <el-form-item label="管辖机构" prop="orgName" style="float:right">
-                        </el-form-item>
-                 </el-col>
-                  <el-col :span="3">
-                         <el-select v-model="queryParams.orgName" clearable placeholder="请选择">
-                              <el-option
-                                v-for="item in orgOptions"
-                                :key="item.dictValue"
-                                :label="item.dictLabel"
-                                :value="item.dictValue">
-                              </el-option>
-                            </el-select>
-                 </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.dealResult" clearable placeholder="请选择">
-                            <el-option
-                              v-for="item in options"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value">
-                            </el-option>
-                          </el-select>
-                 </el-col>
-                   <el-col :span="2">
-                         <el-form-item label="快检结果" prop="fastResult" style="float:right">
-                         </el-form-item>
-                 </el-col>
-                  <el-col :span="3">
-                        <el-select v-model="queryParams.fastResult" clearable placeholder="请选择">
-                            <el-option
-                              v-for="item in options"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value">
-                            </el-option>
-                          </el-select>
-                 </el-col>
-                
-                  <el-col :span="2">
-                         <el-form-item label="送检结果" prop="uploadResult" style="float:right">
-                         </el-form-item>
-                 </el-col>
-                  <el-col :span="3">
-                      <el-select v-model="queryParams.uploadResult" clearable placeholder="请选择">
-                        <el-option
-                          v-for="item in options"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value">
-                        </el-option>
-                      </el-select>
-                 </el-col>
-           </el-row>
-
-    
+    <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.startTime"
+            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="shipName" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-input
+            v-model="queryParams.shipName"
+            placeholder="船舶名"
+            clearable
+            size="small"
+            style="width: 80rem"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-col>
+        <el-col :span="2">
+          <el-form-item label="MMSI" prop="mmsi" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-input
+            v-model="queryParams.mmsi"
+            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.shipRegionType" clearable placeholder="请选择">
+            <el-option
+              v-for="item in shipTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="2">
+          <el-form-item label="监测点" prop="monitorPointName" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-select v-model="queryParams.monitorPointName" clearable placeholder="请选择">
+            <el-option
+              v-for="item in jianceOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue">
+            </el-option>
+          </el-select>
+        </el-col>
+
+        <el-col :span="2">
+          <el-form-item label="目的港" prop="destination" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-input
+            v-model="queryParams.destination"
+            placeholder="目的港"
+            clearable
+            size="small"
+            style="width: 80rem"
+          />
+        </el-col>
+        <el-col :span="2">
+          <el-form-item label="管辖机构" prop="orgName" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-select v-model="queryParams.orgName" clearable placeholder="请选择">
+            <el-option
+              v-for="item in orgOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue">
+            </el-option>
+          </el-select>
+        </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.dealResult" clearable placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="2">
+          <el-form-item label="快检结果" prop="fastResult" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-select v-model="queryParams.fastResult" clearable placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-col>
+
+        <el-col :span="2">
+          <el-form-item label="送检结果" prop="uploadResult" style="float:right">
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-select v-model="queryParams.uploadResult" clearable placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+
 
       <!--      <el-form-item label="受否中国国籍" prop="name">-->
       <!--          <el-radio v-model="queryParams.radio" label="1">是</el-radio>-->
@@ -189,7 +188,7 @@
       :header-cell-style="{ background: 'linear-gradient(white, #ccebf9)'}"
       style="width: 100%"
       height=400>
-       <el-table-column
+      <el-table-column
         label='序号'
         type="index"
         width="50">
@@ -358,7 +357,12 @@ export default {
       }]
     }
   },
-  mounted() {
+  // mounted() {
+  //   this.getLiuLists();
+  //   this.getThresholdList();
+  //   this.getDicts();
+  // },
+  created() {
     this.getLiuLists();
     this.getThresholdList();
     this.getDicts();

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

@@ -3,7 +3,7 @@
     <el-row :gutter="20">
       <!--部门数据-->
       <!--用户数据-->
-      <el-col :span="20" :xs="24">
+      <el-col :span="24" :xs="24">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
           <el-form-item label="用户名称" prop="userName">
             <el-input
@@ -584,4 +584,4 @@ export default {
     }
   }
 };
-</script>
+</script>

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.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-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>

ruoyi-ui/src/views/home.vue

@@ -47,15 +47,15 @@
             <div class="userContent">
               <div index="1" :class="{menu:showTable == 11}" target="showHere" class="menu_title" @click="showTable =11">
                 <i class="el-icon-s-custom"></i>
-                <span>嗅探设备</span>
+                <span> 嗅探设备</span>
               </div>
               <div index="2" :class="{menu:showTable == 10}" class="menu_title" @click="showTable =10">
                 <i class="el-icon-user"></i>
-                <span>光谱设备</span>
+                <span> 光谱设备</span>
               </div>
               <div index="3" :class="{menu:showTable == 9}" class="menu_title" @click="showTable =9">
                 <i class="el-icon-document"></i>
-                <span>黑烟设备</span>
+                <span> 黑烟设备</span>
               </div>
             </div>
             <div class="icon_class" slot="reference">
@@ -78,19 +78,19 @@
             <div class="userContent">
               <div index="1" :class="{menu:showTable == 2}" class="menu_title" @click="showTable =2">
                 <i class="el-icon-s-custom"></i>
-                <span>用户管理</span>
+                <span> 用户管理</span>
               </div>
               <div index="2" :class="{menu:showTable == 7}" class="menu_title" @click="showTable =7">
                 <i class="el-icon-user"></i>
-                <span>角色管理</span>
+                <span> 角色管理</span>
               </div>
               <div index="3" :class="{menu:showTable == 3}" class="menu_title" @click="showTable =3">
                 <i class="el-icon-document"></i>
-                <span>机构管理</span>
+                <span> 机构管理</span>
               </div>
               <div index="4" :class="{menu:showTable == 5}" class="menu_title" @click="showTable =5">
                 <i class="el-icon-setting"></i>
-                <span>登录日志</span>
+                <span> 登录日志</span>
               </div>
             </div>
             <div class="icon_class" slot="reference">
@@ -202,7 +202,7 @@ export default {
   height: 45rem;
   width: 100%;
   background: url("../assets/picture/title.png") no-repeat;
-  background-size: 100% 100%;
+  background-size: cover;
 }
 
 .left_content {
@@ -252,16 +252,21 @@ export default {
   //   top: 315rem;
   //   left: 95rem;
   width: 45rem;
-  height: 50rem;
+  // height: 50rem;
   //   background-color:rgba(0,0,139,1);
   padding-top: 3rem;
+  padding-bottom: 3rem;
 }
 
 .menu_title {
   color: #fff;
-  font-size: 6rem;
-  margin-top: 2rem;
-  padding-left: 7rem
+    font-size: 6.4rem;
+    margin-top: 2rem;
+    padding-left: 5rem;
+    line-height: 12rem;
+}
+.menu_title:hover {
+    cursor: pointer;
 }
 
 .active {

ruoyi-ui/vue.config.js

@@ -2,7 +2,7 @@
 const path = require('path')
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+    return path.join(__dirname, dir)
 }
 
 const name = process.env.VUE_APP_TITLE || '江苏海事局船舶尾气排放遥感监测系统' // 网页标题
@@ -13,106 +13,101 @@ const port = process.env.port || process.env.npm_config_port || 80 // 端口
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
 module.exports = {
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: 'dist',
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: 'static',
-  // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
-  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
-  productionSourceMap: false,
-  // webpack-dev-server 相关配置
-  devServer: {
-    host: '0.0.0.0',
-    port: port,
-    open: true,
-    proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        // target: `http://localhost:8080`,
-        target: `http://cbwq.xt.wenhq.top:8083/prod-api`,
-        changeOrigin: true,
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+    publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+    outputDir: "dist",
+    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
+    assetsDir: "static",
+    // 是否开启eslint保存检测，有效值：ture | false | 'error'
+    lintOnSave: process.env.NODE_ENV === "development",
+    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+    productionSourceMap: false,
+    // webpack-dev-server 相关配置
+    devServer: {
+        host: "0.0.0.0",
+        port: port,
+        open: true,
+        proxy: {
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            [process.env.VUE_APP_BASE_API]: {
+                // target: `http://localhost:8080`,
+                target: `http://cbwq.xt.wenhq.top:8083/prod-api`,
+                changeOrigin: true,
+                pathRewrite: {
+                    ["^" + process.env.VUE_APP_BASE_API]: ""
+                }
+            }
+        },
+        disableHostCheck: true
+    },
+    configureWebpack: {
+        name: name,
+        resolve: {
+            alias: {
+                "@": resolve("src")
+            }
         }
-      }
     },
-    disableHostCheck: true
-  },
-  configureWebpack: {
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    }
-  },
-  chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    chainWebpack(config) {
+        config.plugins.delete("preload"); // TODO: need test
+        config.plugins.delete("prefetch"); // TODO: need test
 
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/assets/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
-
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
+        // set svg-sprite-loader
+        config.module
+            .rule("svg")
+            .exclude.add(resolve("src/assets/icons"))
+            .end();
+        config.module
+            .rule("icons")
+            .test(/\.svg$/)
+            .include.add(resolve("src/assets/icons"))
             .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
+            .use("svg-sprite-loader")
+            .loader("svg-sprite-loader")
+            .options({
+                symbolId: "icon-[name]"
             })
-          config.optimization.runtimeChunk('single'),
-          {
-             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-             to: './' //到根目录下
-          }
-        }
-      )
-  }
-}
+            .end();
+
+        config.when(process.env.NODE_ENV !== "development", config => {
+            config
+                .plugin("ScriptExtHtmlWebpackPlugin")
+                .after("html")
+                .use("script-ext-html-webpack-plugin", [{
+                    // `runtime` must same as runtimeChunk name. default is `runtime`
+                    inline: /runtime\..*\.js$/
+                }])
+                .end();
+            config.optimization.splitChunks({
+                chunks: "all",
+                cacheGroups: {
+                    libs: {
+                        name: "chunk-libs",
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: 10,
+                        chunks: "initial" // only package third parties that are initially dependent
+                    },
+                    elementUI: {
+                        name: "chunk-elementUI", // split elementUI into a single package
+                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                    },
+                    commons: {
+                        name: "chunk-commons",
+                        test: resolve("src/components"), // can customize your rules
+                        minChunks: 3, //  minimum common number
+                        priority: 5,
+                        reuseExistingChunk: true
+                    }
+                }
+            });
+            config.optimization.runtimeChunk("single"), {
+                from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+                to: "./" //到根目录下
+            };
+        });
+    }
+};