修改字段

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>