<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 生产过程监控
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-20 10:06:29
 * @Date: 2024-02-29 13:59:37
-->
<template>
  <div class="data-display-container">
    <topHeader :titleWidth="440" :title="'中国一重·生产过程监控'"></topHeader>
    <div class="container">
      <div class="card">
        <moniBorder :height="194" :idx="1" title="钢包到站" :mb="14">
          <moniTable :columns="columns1" :tableData="tableData1" @tableClick="tableClick"></moniTable>
        </moniBorder>
        <moniBorder :height="180" :idx="2" title="大包开浇" :mb="14" :is_time="true">
          <div class="api-box-container">
            <div class="api-box"><i>大包测量温度(℃)</i><span>300</span></div>
            <div class="api-box"><i>受包位</i><span>1#包</span></div>
            <div class="api-box"><i>浇铸位</i><span>2#包</span></div>
            <div class="api-box"><i>1#大包重量(t)</i><span>2</span></div>
            <div class="api-box"><i>2#大包重量(t)</i><span>2</span></div>
          </div>
        </moniBorder>
        <moniBorder :height="306" :idx="3" title="中包开浇" :mb="16" :is_time="true">
          <div class="api-box-container">
            <div class="api-box"><i>中包测量温度(℃)</i><span>300</span></div>
            <div class="api-box"><i>中包连续测量温(℃)</i><span>300</span></div>
            <div class="api-box"><i>1#中间包重量(t)</i><span>2</span></div>
            <div class="api-box"><i>中间包液位(mm)</i><span>1114</span></div>
            <div class="api-box"><i>1#中间包车在预热位</i><span>/</span></div>
            <div class="api-box"><i>1#中间包车在浇铸位</i><span>/</span></div>
            <div class="api-box"><i>人工加保温剂(t)</i><span>2</span></div>
            <div class="api-box"><i>机器人加覆盖剂(t)</i><span>2</span></div>
            <div class="api-box"><i>保温剂厂家</i><span>
              <el-tooltip effect="dark" content="长兴众利耐火器材有限公司" placement="top" >
                长兴众利耐火器材有限公司
              </el-tooltip>
            </span></div>
            <div class="api-box"><i>覆盖剂厂家</i><span>
              <el-tooltip effect="dark" content="长兴众利耐火器材有限公司" placement="top" >
                长兴众利耐火器材有限公司
              </el-tooltip>
            </span></div>
            <div class="api-box"><i>中间包状态</i><span class="status">正常</span></div>
            <div class="api-box"><i>保温罩开关状态</i><span>最大</span></div>
          </div>
        </moniBorder>
        <moniBorder :height="262" :idx="4" title="结晶器">
          <moniTable :columns="columns4" :tableData="tableData4"></moniTable>
        </moniBorder>
      </div>
      <div class="center">
        <p><span>[ <i></i> ]</span><strong>基本信息</strong></p>
        <div class="center-api">
          <moniGradient>
            <div class="center-api-box">
              <svg-icon icon-class="moni-dis-3" class="center-api-icon" /><i>班组</i><span>甲</span>
            </div>
          </moniGradient>
          <moniGradient>
            <div class="center-api-box">
              <svg-icon icon-class="moni-dis-4" class="center-api-icon" /><i>班次</i><span>白班</span>
            </div>
          </moniGradient>
          <moniGradient>
            <div class="center-api-box">
              <svg-icon icon-class="moni-dis-5" class="center-api-icon" /><i>班组长</i><span>张</span>
            </div>
          </moniGradient>
        </div>
        <div class="center-moni">
          <moniGradient>
            <div class="center-moni-box">
              <div class="center-moni-left">
                <p><span></span><i>A流·C05738295A</i><span class="line-right"></span></p>
                <div>
                  <svg-icon icon-class="moni-dis-0" class="moni-dis-ot" />
                  <div><p>铸坯截面尺寸</p><div><span>1.99</span><i>㎡</i></div></div>
                </div>
                <div>
                  <svg-icon icon-class="moni-dis-1" class="moni-dis-ot" />
                  <div><p>铸坯直径</p><div><span>1600</span><i>mm</i></div></div>
                </div><div>
                  <svg-icon icon-class="moni-dis-2" class="moni-dis-ot" />
                  <div><p>目标长度</p><div><span>16</span><i>m</i></div></div>
                </div>
              </div>
              <div class="center-moni-cent">
                <svg-icon icon-class="guideBig" class="guideBig guideBig-left" />
                <!-- <svg-icon icon-class="moni-dis-6" class="moni-dis-6" /> -->
                <div><img src="../../assets/images/moni-dis.png" class="moni-dis-6"></div>
                <svg-icon icon-class="guideBig" class="guideBig guideBig-right" />
              </div>
              <div class="center-moni-right">
                <p><span></span><i>B流·C05738295B</i><span class="line-right"></span></p>
                <div>
                  <svg-icon icon-class="moni-dis-0" class="moni-dis-ot" />
                  <div><p>铸坯截面尺寸</p><div><span>1.99</span><i>㎡</i></div></div>
                </div>
                <div>
                  <svg-icon icon-class="moni-dis-1" class="moni-dis-ot" />
                  <div><p>铸坯直径</p><div><span>1600</span><i>mm</i></div></div>
                </div><div>
                  <svg-icon icon-class="moni-dis-2" class="moni-dis-ot" />
                  <div><p>目标长度</p><div><span>16</span><i>m</i></div></div>
                </div>
              </div>
            </div>
          </moniGradient>
        </div>
        <div class="center-table">
          <moniTable :columns="columns0" :tableData="tableData0" :tr-height="32"></moniTable>
        </div>
        <div class="center-table-card">
          <moniBorder :height="402" :idx="8" title="坯尾感应加热">
            <moniTable :columns="columns8" :tableData="tableData8" :tr-height="37"></moniTable>
          </moniBorder>
          <moniBorder :height="402" :idx="9" title="工艺数据">
            <moniTable :columns="columns9" :tableData="tableData9" :tr-height="32.5"></moniTable>
          </moniBorder>
        </div>
      </div>
      <div class="card">
        <moniBorder :height="236" :idx="5" title="结晶器震动" :mb="18">
          <moniTable :columns="columns5" :tableData="tableData5" :tr-height="33"></moniTable>
        </moniBorder>
        <moniBorder :height="270" :idx="6" title="铸流电磁搅拌" :mb="18">
          <moniTable :columns="columns6" :tableData="tableData6" :tr-height="33"></moniTable>
        </moniBorder>
        <moniBorder :height="444" :idx="7" title="动态末端电磁搅拌">
          <moniTable :columns="columns7" :tableData="tableData7" :tr-height="33"></moniTable>
        </moniBorder>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="来料信息"
      width="calc(100vw * 1000 / 1920)"
      class="moni-dialog"
      :before-close="handleClose"
    >
      <template #header>
        <span role="heading" class="el-dialog__title"><svg-icon icon-class="moni-dis-7" class="moni-dis-7" />来料信息</span>
      </template>
      <div class="dialog-container">
        <p>精炼出钢实绩</p>
        <table class="dialog-des">
          <tr><td>炉号</td><td>LH001</td><td>精炼结束时间</td><td>字段值</td><td>精炼包烘烤时间</td><td>字段值</td></tr>
          <tr><td>钢种</td><td>60CrNT</td><td>工艺符号</td><td>字段值</td><td>耗氩量</td><td>字段值</td></tr>
          <tr><td>钢种代号</td><td>字段值</td><td>工艺编号</td><td>字段值</td><td>耗氮量</td><td>字段值</td></tr>
          <tr><td>产品类型</td><td>字段值</td><td>精炼包号</td><td>字段值</td><td>出钢量</td><td>字段值</td></tr>
          <tr><td>精炼开始时间</td><td>字段值</td><td>精炼包烘烤温度</td><td>字段值</td><td>出钢温度</td><td>字段值</td></tr>
        </table>
        <p>检验实绩</p>
        <div class="dialog-table-box">
          <table class="dialog-table">
            <tr>
              <td v-for="item in dialogTableColums" :key="item.key">{{ item.label }}</td>
            </tr>
            <tr v-for="item,i in dialogTableData" :key="i">
              <td v-for="j in dialogTableColums" :key="j.key">{{ item[j.key] }}</td>
            </tr>
          </table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <button @click="handleClose">关闭</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import topHeader from './components/topHeader.vue'
import moniBorder from './components/moniBorder.vue'
import moniGradient from './components/moniGradient.vue'
import moniTable from './components/moniTable.vue';

const dialogTableColums = ref([
  {label:'试样编号',key:'name'},{label:'试样类型',key:'name1'},{label:'炉号',key:'name2'},
  {label:'炉座号',key:'name'},{label:'物料号',key:'name'},{label:'物料名称(钢种)',key:'name'},
  {label:'物料代码(钢种代号)',key:'name'},{label:'试验次数',key:'name'},{label:'检验项目编码',key:'name'},
  {label:'检验项目名称',key:'name'},{label:'检验项目序号',key:'name'},{label:'是否合格',key:'name'},
  {label:'单位',key:'name'},{label:'C',key:'name'},{label:'Si',key:'name'},{label:'Mn',key:'name'},
  {label:'P',key:'name'},{label:'S',key:'name'},{label:'Cr',key:'name'},{label:'Ai',key:'name'},
  {label:'Mo',key:'name'},{label:'Ni',key:'name'},{label:'V',key:'name'},{label:'Ti',key:'name'},
  {label:'Sn',key:'name'},{label:'Pb',key:'name'},{label:'H',key:'name'},{label:'N',key:'name'},
  {label:'As',key:'name'},{label:'Sb',key:'name'},{label:'Nb',key:'name'},{label:'Cu',key:'name'},
  {label:'B',key:'name'},{label:'Co',key:'name'},{label:'J',key:'name'},{label:'Ca',key:'name'},
  {label:'X',key:'name'},{label:'O',key:'name'},{label:'Ta',key:'name'},{label:'Bi',key:'name'},
  {label:'W',key:'name'},{label:'Se',key:'name'},{label:'Zn',key:'name'},
])
const dialogTableData = ref([{
  name:'1',name1:'炉后样',name2:'LH001'
}])

const columns1 = ref([
  {label:'到站时间',field: 'time1',style: {color: '#fff'}},
  {label:'炉号',field: 'time2',style: {color: '#fff'}, btn:true},
  {label:'钢种',field: 'time3',style: {color: '#fff'}},
  {label:'出钢量',field: 'time4',style: {color: '#fff'}},
  {label:'出钢温度',field: 'time5',style: {color: '#fff'}},
])
const tableData1 = ref([
  {time1:'11/12 08:00',time2: 'LH001',time3: '60CrNT',time4: '/',time5: '/'},
  {time1:'11/12 08:00',time2: 'LH001',time3: '60CrNT',time4: '/',time5: '/'},
  {time1:'11/12 08:00',time2: 'LH001',time3: '60CrNT',time4: '/',time5: '/'},
])
const columns4 = ref([
  {label:'位置',field: 'time1', style: {color: '#C2E3FF'}},
  {label:'A流',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'B流',field: 'time3', style: {color: 'rgba(255, 255, 255, 0.3)',fontFamily:'din'}}
])
const tableData4 = ref([
  {time1:'系统状态',time2: '运行',time3: '停止',tip: ['time2,time3', {time2:0,time3:1}]},
  {time1:'断面尺寸(mm)',time2: '20',time3: '20'},
  {time1:'结晶器液位(mm)',time2: '20',time3: '20'},
  {time1:'SEN浸入深度(mm)',time2: '20',time3: '20'},
  {time1:'结晶器水流量(min)',time2: '5100',time3: '5100'},
])
const columns8 = ref([
  {label:'位置',field: 'time1', style: {color: '#C2E3FF'}},
  {label:'A流',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'B流',field: 'time3', style: {color: '#fff',fontFamily:'din'}}
])
const tableData8 = ref([
  {time1:'系统状态',time2: '运行',time3: '运行',tip: ['time2,time3', {time2:0,time3:0}]},
  {time1:'铸坯温度(℃)',time2: '700',time3: '700'},
  {time1:'加热时间(min)',time2: '45',time3: '45'},
  {time1:'目标功率(KW)',time2: '20',time3: '20'},
  {time1:'有功功率(KW)',time2: '5100',time3: '5100'},
  {time1:'线圈电流(A)',time2: '4.5',time3: '4.5'},
  {time1:'实际频率(HZ)',time2: '20',time3: '20'},
  {time1:'感应加热器水温(℃)',time2: '700',time3: '700'},
])
const columns9 = ref([
  {label:'位置',field: 'time1', style: {color: '#C2E3FF'}},
  {label:'A流',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'B流',field: 'time3', style: {color: '#fff',fontFamily:'din'}}
])
const tableData9 = ref([
  {time1:'拉坯状态',time2: '拉坯准备',time3: '拉坯', color: ['time2,time3',{time2:'#06F7A1',time3:'#06F7A1'}]},
  {time1:'浇铸长度(m)',time2: '700',time3: '700'},
  {time1:'目标长度(m)',time2: '233',time3: '233'},
  {time1:'实时拉速(m/min)',time2: '20',time3: '20'},
  {time1:'目标拉速(m/min)',time2: '5100',time3: '5100'},
  {time1:'拉速斜率(m/min)',time2: '4.5',time3: '4.5'},
  {time1:'实时过热度(℃)',time2: '20',time3: '20'},
  {time1:'液相锥长度(mm)',time2: '700',time3: '700'},
  {time1:'固相锥长度(mm)',time2: '700',time3: '700'},
])
const columns5 = ref([
  {label:'位置',field: 'time1', style: {color: '#C2E3FF'}},
  {label:'A流',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'B流',field: 'time3', style: {color: '#fff',fontFamily:'din'}}
])
const tableData5 = ref([
  {time1:'系统状态',time2: '运行',time3: '运行', tip: ['time2,time3', {time2:0,time3:0}]},
  {time1:'行程(mm)',time2: '20',time3: '20'},
  {time1:'频率(opm)',time2: '20',time3: '20'},
  {time1:'负滑脱时间(sec)',time2: '0.8',time3: '0.8'},
])
const columns6 = ref([
  {label:'位置',field: 'time1', style: {color: '#C2E3FF'}},
  {label:'A流',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'B流',field: 'time3', style: {color: '#fff',fontFamily:'din'}}
])
const tableData6 = ref([ 
  {time1:'系统状态',time2: '运行',time3: '停止', tip: ['time2,time3', {time2:0,time3:1}]},
  {time1:'输出电流(A)',time2: '20',time3: '20'},
  {time1:'输出频率(HZ)',time2: '2',time3: '2'},
  {time1:'冷却水流量(m³/h)',time2: '2',time3: '2'},
  {time1:'冷却水温度(℃)',time2: '2',time3: '2'},
])
const columns7 = ref([
  {label:'位置',field: 'time1', style: {color: '#C2E3FF'}},
  {label:'A流',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'B流',field: 'time3', style: {color: '#fff',fontFamily:'din'}}
])
const tableData7 = ref([
  {time1:'系统状态',time2: '运行',time3: '运行', tip: ['time2,time3', {time2:0,time3:0}]},
  {time1:'输出电流(A)',time2: '20',time3: '20'},
  {time1:'输出频率(Hz)',time2: '/',time3: '/'},
  {time1:'冷却水流量(m³/h)',time2: '20',time3: '20'},
  {time1:'冷却水温度(℃)',time2: '5100',time3: '5100'},
  {time1:'设定固相厚度(%)',time2: '4',time3: '4'},
  {time1:'设定固体厚度(%)',time2: '20',time3: '20'},
  {time1:'小车状态',time2: '上方静止',time3: '上方静止'},
  {time1:'小车实际位置(mm)',time2: '100',time3: '100'},
  {time1:'小车实际速度(m/min)',time2: '100',time3: '100'},
])
const columns0 = ref([
  {label:'类别',field: 'time1', style: {color: '#00FFFF', fontFamily: 'pmzd'},},
  {label:'维护',field: 'time2', style: {color: '#fff',fontFamily:'din'}},
  {label:'准备',field: 'time3', style: {color: '#fff',fontFamily:'din'}},
  {label:'结晶器准备',field: 'time4', style: {color: '#fff',fontFamily:'din'}},
  {label:'等待浇铸',field: 'time5', style: {color: '#fff',fontFamily:'din'}},
  {label:'浇铸',field: 'time6', style: {color: '#fff',fontFamily:'din'}},
])
const tableData0 = ref([
  {time1:'A流',time2: '1',time3: '1',time4: '1',time5: '1',time6: '1',
    tip: ['time2,time3,time4,time5,time6',{
      time2:0,time3:0,time4:0,time5:0,time6:0,
    }]},
  {time1:'B流',time2: '1',time3: '1',time4: '0',time5: '0',time6: '1',
    tip: ['time2,time3,time4,time5,time6',{
      time2:0,time3:0,time4:1,time5:1,time6:0,
    }]},
])

const dialogVisible = ref(false)
const tableClick = (row, field, val) => {
  console.log(row, field, val)
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.data-display-container{
  .container{
    width: 100vw;
    height: h(1010);
    display: flex;
    justify-content: space-between;
    padding: 0 w(24) h(24) w(24);
    .card{
      width: w(448);
      height: 100%;
    }
    .center{
      width: w(927);
      height: 100%;
      >p{
        width: 100%;
        height: h(28);
        line-height: h(28);
        padding: 0;
        margin: 0 0 h(14);
        font-size: w(18);
        >span{
          color: rgba(0, 255, 255, 1);
          >i{
            font-style: normal;
            display: inline-block;
            width: w(6);
            height: w(6);
            background: rgba(0, 255, 255, 1);
            vertical-align: middle;
          }
        }
        >strong{
          font-family: pmzd;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          text-shadow: 2px 2px 8px rgba(0, 133, 255, 0.8);
          margin-left: w(10);
        }
      }
      >div{
        width: 100%;
      }
      .center-api{
        width: 100%;
        height: h(60);
        margin-bottom: h(14);
        display: flex;
        justify-content: space-between;
        >div{
          width: 32.5%;
          .center-api-box{
            height: 100%;
            line-height: h(40);
            padding: 0 w(26);
            .center-api-icon{
              font-size: w(21);
              margin-right: w(6);
              vertical-align: top;
              display: inline-block;
              height: 100%;
            }
            >i{
              font-style: normal;
              display: inline-block;
              font-size: w(20);
              font-family: pmzd;
              color: rgba(255, 255, 255, 1);
              text-shadow: 2px 2px 8px rgba(0, 138, 255, 0.7);
              vertical-align: top;
            }
            >span{
              float: right;
              text-align: right;
              font-size: w(20);
              font-family: pmzd;
              color: rgba(0, 255, 255, 1);
              text-shadow: 2px 2px 8px rgba(0, 255, 255, 0.25);
              vertical-align: top;
            }
          }
        }
      }
      .center-moni{
        width: 100%;
        height: h(338);
        // background: rgb(51, 240, 9, 0.6);
        margin-bottom: h(14);
        .center-moni-box{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          >div{
            height: 100%;
          }
          .center-moni-left{
            padding: h(10) 0 h(10) w(10);
          }
          .center-moni-right{
            padding: h(10) w(10) h(10) 0;
          }
          .center-moni-left,.center-moni-right{
            width: 30%;
            >p{
              margin: 0;
              padding: 0;
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: h(30);
              line-height: h(30);
              >span{
                display: block;
                width: 0;
                height: 0;
                border-top: h(1) solid transparent;
                border-bottom: h(1) solid transparent;
                border-left: 0 solid transparent;
                border-right: w(44) solid rgba(255, 24, 24, 1);
                border-radius: h(1);
                margin-top: h(14);
              }
              .line-right{
                transform: rotate(180deg);
              }
              >i{
                font-style: normal;
                font-size: w(18);
                padding: 0 w(6);
                font-family: pmzd;
                display: block;
                color: rgba(255, 255, 255, 1);
                text-shadow: 2px 2px 8px rgba(0, 138, 255, 0.7);
              }
            }
            >div{
              width: 100%;
              height: h(90);
              padding: h(8) w(40);
              display: flex;
              justify-content: space-between;
              >.moni-dis-ot{
                width: w(56);
                height: h(56);
                margin: h(9) 0;
              }
              >div{
                width: calc(100% - w(70));
                height: h(56);
                margin: h(9) 0;
                >p{
                  margin: 0;
                  padding: 0;
                  font-size: w(15);
                  color: rgba(255, 255, 255, 0.8);
                }
                >div{
                  height: h(40);
                  line-height: h(40);
                  display: flex;
                  >span{
                    font-size: w(24);
                    font-family: din;
                    color: rgba(0, 255, 255, 1);
                    margin-right: w(5);
                    display: block;
                    line-height: h(40);
                  }
                  >i{
                    font-size: w(18);
                    color: rgba(230, 243, 255, 1);
                    font-style: normal;
                    display: block;
                    line-height: h(48);
                  }
                }
              }
            }
          }
          .center-moni-right{
            padding-right: w(10);
          }
          .center-moni-cent{
            width: 40%;
            display:flex;
            .guideBig{
              width: 15%;
              height: 100%;
              line-height: h(318);
            }
            .guideBig-left{
              transform: rotate(180deg);
            }
            >div{
              width: 70%;
              height: 100%;
              text-align:center;
              line-height: h(318);
              .moni-dis-6{
                width: w(200);
                height: w(200);
                margin: 0 calc(50% - w(146));
                vertical-align: middle;
              }
            }
          }
        }
      }
      .center-table{
        width: 100%;
        height: h(102);
        margin-bottom: h(14);
      }
      .center-table-card{
        display: flex;
        justify-content: space-between;
        >div{
          width: calc(50% - w(10));
        }
      }
    }
  }
  .api-box-container{
    display: flex;
    flex-wrap: wrap;
  }
  .api-box{
    // display: inline-block;
    width: 49%;
    height: h(36);
    line-height: h(36);
    background: rgba(0, 138, 255, 0.12);
    box-shadow: inset 0 0 4px 2px rgba(0, 133, 255, 0.3);
    padding: 0 w(8);
    margin-bottom: h(6);
    >i{
      color: rgba(230, 243, 255, 1);
      font-size: w(14);
      font-style: normal;
      display: inline-block;
      width: auto;
      vertical-align: top;
      line-height: h(36);
    }
    >span{
      display: block;
      width: auto;
      max-width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: rgba(0, 255, 255, 1);
      font-family: din;
      float: right;
      font-size: w(14);
      line-height: h(36);
    }
    .status{
      color: rgba(255, 255, 255, 1);
    }
    .status::before{
      content: '';
      display: inline-block;
      width: w(10);
      height: h(10);
      border-radius: 50%;
      background: rgba(6, 247, 161, 1);
      box-shadow: 0 0 8px 2px rgba(6, 247, 161, 0.3);
      margin-right: w(4);
    }
    .no-status{
      color: rgba(255, 24, 24, 1);
    }
    .no-status::before{
      content: '';
      display: inline-block;
      width: w(10);
      height: h(10);
      border-radius: 50%;
      background-color: rgba(255, 24, 24, 1);
      box-shadow: 0 0 8px 2px rgba(255, 24, 24, 0.4);
      margin-right: w(4);
    }
  }
  .api-box:nth-child(odd){
    margin-right: w(6);
  }
  :deep(.el-overlay){
    backdrop-filter: blur(4px);
  }
  :deep(.moni-dialog){
    font-size: w(14);
    color: #fff;
    background: rgba(0, 43, 81, 1);
    background-image: linear-gradient(rgba(0, 138, 255, 0.4), rgba(0, 138, 255, 0));
    margin-top: 20vh !important;
    .el-dialog__body{
      padding-top: 0;
    }
    .el-dialog__header{
      border-bottom: h(1) solid rgba(255, 255, 255, 0.5);
      position: relative;
    }
    .el-dialog__header::before{
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: w(34);
      border-top: h(3) solid #fff;
    }
    .el-dialog__header::after{
      content: '';
      display: block;
      position: absolute;
      bottom: -1px;
      right: -10px;
      width: w(12);
      border-top: h(3) solid #00FFFF;
    }
    .el-dialog__title{
      color: #fff;
      font-family: pmzd;
      font-size: w(20);
      .moni-dis-7{
        margin-right: w(10);
      }
    }
    .dialog-footer{
      width: 100%;
      text-align: center;
      >button{
        outline: none;
        background: rgba(0, 138, 255, 0.2);
        padding: h(8) w(24);
        width: w(80);
        height: h(40);
        border: w(0.5) solid rgba(0, 138, 255, 1);
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .dialog-container{
    color: #fff;
    >P{
      padding: 0 w(16);
      margin: h(16) 0;
      font-size: w(16);
      font-family: pmzd;
      position: relative;
    }
    >P::before{
      content: '';
      display: block;
      width: w(6);
      height: h(6);
      background: rgba(255, 24, 24, 1);
      position: absolute;
      left: 0;
      top: h(7);
      box-shadow: 0 0 w(8) w(1) rgba(255, 24, 24, 0.5);
    }
    .dialog-des{
      border: 1px solid rgba(0, 138, 255, 0.4);
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      >tr{
        height: h(48);
        >td{
          width: calc(100% / 6);
          border: 1px solid rgba(0, 138, 255, 0.4);
        }
        >td:nth-child(2n+1){
          background: rgba(0, 138, 255, 0.24);
          color: rgba(194, 227, 255, 1);
        }
      }
    }
    .dialog-table-box{
      width: 100%;
      padding: 0 0 h(6) 0;
      overflow-x: scroll;
      .dialog-table{
        border: 1px solid rgba(0, 138, 255, 0.4);
        text-align: center;
        border-collapse: collapse;
        white-space: nowrap;
        >tr{
          height: h(40);
          >td{
            // min-width: w(160);
            padding: 0 w(10);
            border: 1px solid rgba(0, 138, 255, 0.4);
          }
        }
        >tr:first-child{
          background: rgba(0, 138, 255, 0.24);
          color: rgba(194, 227, 255, 1);
        }
      }
    }
    .dialog-table-box::-webkit-scrollbar {
      width: 4px;
    }
    .dialog-table-box::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 138, 255, 1);
    }
    .dialog-table-box::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 138, 255, 0.1);
    }
  }
}
</style>