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
                                       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 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></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";

    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
          },
          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]);
            }
                  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
                                              }
                                        },
                                       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); 
          },
          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); 
          },
          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 的颜色
                                              }
                                         },
                                      
                                    },  
                                ],
                                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;
        }

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