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

<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
              :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="100">
              </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>

          </el-tab-pane>

          <el-tab-pane label="其它监测数据" name="thrid">
            <el-table
              :header-cell-style="{ background: '#e4eafc'}"
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              style="width: 100%"
              class="tableSc"
              height=200>
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                property="name"
                label="监测点"
                >
              </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 }}% ↑</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 }}% ↑</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 }}% ↑</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 }}度 ↑</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 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>

    <div class="shipInformation">
      <img src="@/assets/picture/img_xycbxx.png" style="margin-top:5rem;margin-left:5rem"/>
      <scroll illegalStatus=1></scroll>
      <img src="@/assets/picture/img_wgcbxx.png" style="margin-top:5rem;margin-left:5rem"/>
      <scroll illegalStatus=1></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="shipDate.startMonth"
              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="shipDate.endMonth"
              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 {getDeviceType, getIllegalShipStatic, getStaticDevice,getSo2Time,queryIllegalInfoList} from "@/api/data/staticalData";

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: '',
      so2TimeData:{},
      endTime: '',
      deviceTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
        mmsi: undefined,
        radio: 1
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        value: 0.19,
        count: 1.9,
      }, {
        date: '2016-05-04',
        name: '王小虎',
        value: 0.1,
        count: 1.3,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        value: 0.2,
        count: 2,
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        value: 0.08,
        count: 0.6,
        address: '上海市普陀区金沙江路 1516 弄'
      }/*, {
        date: '2016-05-03',
        name: '王小虎',
        value: 0.03,
        count: 0.2,
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        value: 0.09,
        count: 0.3,
        address: '上海市普陀区金沙江路 1516 弄'
      }*/],shipDate:{
               startMonth:'',
               endMonth:''
        },
        shipDateArry:[

        ],
    }
  }, mounted() {
    this.getMonthDate();
    this.getStaticDevice();
    this.getIllegalShipStatic();
    //  console.log(111111111111)
    //  this.getChart();
  },
  methods: {
    getSo2Time(){
           getSo2Time(this.shipDate).then(data =>{
                  this.getMonthArry(this.shipDate.startMonth,this.shipDate.endMonth);
                  this.so2TimeData = data.data
                  this.getShipChart();  
          });
    },
    getMonthArry(start,end){
          // this.shipDateArry.push(start);
          var startYear = start.split('-')[0]; 
          var startMonth = parseInt(start.split('-')[1]); 
          var endYear = end.split('-')[0]; 
          var endMonth = parseInt(end.split('-')[1]); 
          if(startYear == endYear){
              for(var i = startMonth;i<endMonth+1;i++){
                if(i<10){
                      this.shipDateArry.push(startYear+'-'+"0"+i);
                }else{
                      this.shipDateArry.push(startYear+'-'+i); 
                }       
              }
          }else{
              for(var i = startMonth;i<13;i++){
                  if(i<10){
                      this.shipDateArry.push(startYear+'-'+"0"+i);
                }else{
                      this.shipDateArry.push(startYear+'-'+i); 
                }       
              }   
            for(var i = 1;i<endMonth;i++){
                if(i<10){
                      this.shipDateArry.push(endYear+'-'+"0"+i);
                }else{
                      this.shipDateArry.push(endYear+'-'+i); 
                }       
              }   

          }
          console.log(this.shipDateArry);
    },
    getMonthDate(){
          var time = new Date();
          var year = time.getFullYear();
          var month = time.getMonth();
          if(month > 9){
               this.shipDate.endMonth = year+"-"+month
          }else if(month > 0){
               this.shipDate.endMonth = year+"-"+"0"+month
          }else{
               this.shipDate.endMonth = (year-1)+"-"+'12';
          }
          if(month == 6){
                this.shipDate.startMonth = year+"-"+'01';
          }else if(month > 6){
                this.shipDate.startMonth = year+"-"+'0'+(month-6);
          }else if(month < 6){
               if(month >= 3){
                 this.shipDate.startMonth = (year-1)+"-"+(month+7);
               }else{
                 this.shipDate.startMonth = (year-1)+"-"+"0"+(month+7);
               }
          }
    },
    openShipChart(){
      const t = this;
      setTimeout(() => {
        //  执行echarts画图方法
        t.getSo2Time();
      }, 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 => {
        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]);
        }
        this.getChart(nameArry, dataArry);
      });
    },
    getIllegalShipStatic() {
      getIllegalShipStatic().then(data => {
        this.blackCount = data.data.blackCount;
        this.so2Count = data.data.so2Count;
      });
    },
    getShipChart() {
      var so2Arry = [];
      var aisArry = [];
      var hyArry = [];
      // console.log(data);
       for(var index in this.shipDateArry){
            // console.log(this.shipDateArry[index]+'-01T00:00:00Z');
            // console.log(this.so2TimeData.so2['2021-01-01T00:00:00Z']);
            if(this.so2TimeData.so2[this.shipDateArry[index]+'-01T00:00:00Z']){
                  so2Arry.push(this.so2TimeData.so2[this.shipDateArry[index]+'-01T00:00:00Z']);
            }else {
                  so2Arry.push(0);
            }  
            if(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']){
                  aisArry.push(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']);
            }else{
                  aisArry.push(0);
            }if(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']){
                  hyArry.push(this.so2TimeData.black[this.shipDateArry[index]+'-01T00:00:00Z']);
            }else{
                  hyArry.push(0);
            }
        }
      var myChart = this.$echarts.init(document.getElementById('shipChart'));
      var option = {
         color:['#FF2D3C','#FFA647','#61FAFB'],
        legend: {
            data: ['黑烟抓拍', '光谱', '嗅探'],
            right: '10%',
            textStyle:{
               color:'#ffffff'
            }
          },
        xAxis: {
          type: 'category',
          data: this.shipDateArry,
          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: [{
          name: '黑烟抓拍',
          data: hyArry,
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#FF2D3C',
                width: 5
              }
            }
          },
        }, {
          name: '光谱',
          data: so2Arry,
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#FFA647',
                width: 5
              }
            }
          },
        }, {
          name: '嗅探',
          data: aisArry,
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#61FAFB',
                width: 5
              }
            }
          },
        }]
      };
      myChart.setOption(option);
    },
    getChart(nameArry, dataArry) {
      var myChart = this.$echarts.init(document.getElementById('equipmentChart'));
      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: {
                label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'white',
                            fontSize: 10
                        }
                    },
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 1, color: '#2275E4'},                   //柱图渐变色
                    {offset: 0, color: '#56CCF2'},                   //柱图渐变色
                  ]
                )
              },

            }
          }
        ]
      };
      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) {
      // this.dialogVisible = true;
      var myChart = this.$echarts.init(document.getElementById('equipmentTypeChart'));
      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: {
               label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'white',
                            fontSize: 10
                        }
                    },
                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: 220rem;
  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;
}

.shipInformation {
  background: url("./assets/bg_information.png") no-repeat;
  background-size: 100% 100%;
  width: 120rem;
  height: 160rem;
  position: absolute;
  top: 225rem;
  right: 30rem;
}

.shipInCount {
  background: url("./assets/bg_count.png") no-repeat;
  background-size: 100% 100%;
  width: 120rem;
  height: 160rem;
  position: absolute;
  top: 55rem;
  right: 30rem;
}

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

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

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

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

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