guan_client/src/views/modules_guAn/visualization/index.vue

<template>
  <div class="visualization-container">
    <!-- 头部标题区域 -->
    <div class="top-title-container u-flex-jac">
      <div class="title-content">
        <span class="text" :data-attr="titleName">{{ titleName }}</span>
      </div>
    </div>
    <!-- 报警按钮 -->
    <div class="alarm-btn u-flex-jac" @click="clickAlarmBtn">
      <div>故障<br />报警</div>
    </div>
    <!-- 数据内容区域 -->
    <div class="content-container u-flex">
      <!-- 左侧区域 -->
      <div class="left-container">
        <div class="left-top-con">
          <!-- 左上 -->
          <common-title title="预制曲线" @click="showModal"></common-title>
          <div class="visualization-common-border">
            <yuzhi-curve :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurve"></yuzhi-curve>
          </div>
        </div>
        <div class="left-center-con">
          <!-- 左中 -->
          <common-title title="实时曲线" @click="showModal"></common-title>
          <div class="visualization-common-border">
            <real-time-curve :data="realTimeData" ref="realTimeCurve"></real-time-curve>
          </div>
        </div>
        <div class="left-bottom-con">
          <!-- 左下 -->
          <!-- <test-information></test-information> -->
          <common-title title="全程曲线" @click="showModal"></common-title>
          <div class="visualization-common-border">
            <full-curve :data="fullData" ref="fullCurve"></full-curve>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="center-container">
        <!-- 中上 -->
        <div class="important">
          <!-- 顶部信息+3D -->
          <alarm-modal-list ref="alarmList"></alarm-modal-list>
          <info-3D :data="eqRealData"></info-3D>
        </div>
        <div class="centen-bottom-con u-flex-jab">
          <!-- 中下 -->
          <div class="center-bottom-left">
            <running-state :data="eqRealData" @click="handleXunhuan"></running-state>
          </div>
          <div class="center-bottom-right">
            <mode-info :data="eqRealData"></mode-info>
          </div>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right-container">
        <div class="right-top-con">
          <!-- 右上 -->
          <equipment-info :data="eqRealData" :alarmData="newAlarmData"></equipment-info>
        </div>
        <div class="right-center-con">
          <!-- 右中 -->
          <surveillance-video :data="eqRealData"></surveillance-video>
        </div>
        <div class="right-bottom-con">
          <!-- 右下 -->
          <test-status-info :data="eqRealData"></test-status-info>
        </div>
      </div>
    </div>
    <j-modal :title="title" :visible="visible" @cancel="curveClose" cancelText="关闭" class="u-modal-box">
      <div v-if="title === '全程曲线'" class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :lg="18" :md="12" style="width: 400px">
              <a-form-item label="试验开始时间">
                <j-date
                  placeholder="请选择试验开始时间"
                  v-model="queryParam.starttime"
                  :show-time="true"
                  date-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <yuzhi-curve v-if="title === '预制曲线'" :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurveM"></yuzhi-curve>
      <real-time-curve v-if="title === '实时曲线'" :data="realTimeData"></real-time-curve>
      <full-curve-model v-if="title === '全程曲线'" :data="fullModelData" ref="fullCurveModel"></full-curve-model>
      <template slot="footer">
        <a-button @click="curveClose">关闭</a-button>
      </template>
    </j-modal>
  </div>
</template>

<script>
import commonTitle from './components/commonTitle.vue'
import AlarmModalList from './modules/AlarmModalList.vue'
import YuzhiCurve from './modules/YuzhiCurve.vue'
import RealTimeCurve from './modules/RealTimeCurve.vue'
import FullCurve from './modules/FullCurve.vue'
import FullCurveModel from './modules/FullCurveModel.vue'
import Info3D from './modules/info3D.vue'
import RunningState from './modules/RunningState.vue'
import EquipmentInfo from './modules/EquipmentInfo.vue'
import ModeInfo from './modules/ModeInfo.vue'
import SurveillanceVideo from './modules/SurveillanceVideo.vue'
import TestInformation from './modules/TestInformation.vue'
import TestStatusInfo from './modules/TestStatusInfo.vue'

import { getAction } from '@/api/manage'
import store from '@/store'
import Vue from 'vue'
import signMd5Utils from '@/utils/encryption/signMd5Utils'
import { axios } from '@/utils/request'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import axios111 from 'axios'
import moment from 'moment'

export default {
  name: '',
  components: {
    commonTitle,
    AlarmModalList,
    YuzhiCurve,
    RealTimeCurve,
    FullCurve,
    FullCurveModel,
    Info3D,
    RunningState,
    EquipmentInfo,
    ModeInfo,
    SurveillanceVideo,
    TestInformation,
    TestStatusInfo,
  },
  data() {
    return {
      titleName: '高温高湿试验项目',
      eqRealData: [],
      yuzhiData: [],
      yuzhiMarkData: [],
      realTimeData: [],
      fullData: [],
      fullModelData: [],
      websock: null,
      newAlarmData: null,
      title: '',
      visible: false,
      curveType: '',
      // 设备状态
      equipmentStatus: 1,
      // 弹窗搜索
      queryParam: {},
      isFullWebSocket: true, // 判断：当搜索之后就不随websocket进行改变了
      tagParams: {Tags: [
          { Name: '运行方式设定' }, { Name: '设备状态' }, { Name: '试验运行时间' }, { Name: '全部循环设定值' },
          { Name: '内部循环设定值' }, { Name: '全部循环运行值' }, { Name: '内部循环运行值' }, { Name: '预计结束时间' },
          { Name: '内部循环1_启始段' }, { Name: '内部循环1_结束段' }, { Name: '内部循环1_次数' },
          { Name: '内部循环2_启始段' }, { Name: '内部循环2_结束段' }, { Name: '内部循环2_次数' },
          { Name: '内部循环3_启始段' }, { Name: '内部循环3_结束段' }, { Name: '内部循环3_次数' },
          { Name: '内部循环4_启始段' }, { Name: '内部循环4_结束段' }, { Name: '内部循环4_次数' },
          { Name: '总的运行段数' }, { Name: '总的设定段数' }, { Name: '当前运行程序号' }, { Name: '当前运行段号' },
          { Name: '程序段运行时间' }, { Name: '程序段设定时间' }, { Name: '当前湿度值' }, { Name: '当前温度值' },
          { Name: '温度输出率' }, { Name: '起始温度值' }, { Name: '温度设定值' }, { Name: '湿度输出率' },
          { Name: '起始湿度值' }, { Name: '湿度设定值' }, { Name: '定值温度斜率值' },
          { Name: 'A1压机吸气压力' }, { Name: 'A1压机排气压力' }, { Name: 'A2压机吸气压力' }, { Name: 'A2压机排气压力' },
          { Name: 'B1压机吸气压力' }, { Name: 'B1压机排气压力' }, { Name: 'B2压机吸气压力' }, { Name: 'B2压机排气压力' },
          { Name: 'C1压机吸气压力' }, { Name: 'C1压机排气压力' }, { Name: 'C2压机吸气压力' }, { Name: 'C2压机排气压力' },
          { Name: 'D1压机吸气压力' }, { Name: 'D1压机排气压力' }, { Name: 'D2压机吸气压力' }, { Name: 'D2压机排气压力' },
          { Name: 'E1压机吸气压力' }, { Name: 'E1压机排气压力' }, { Name: 'E2压机吸气压力' }, { Name: 'E2压机排气压力' },
          { Name: 'F1压机吸气压力' }, { Name: 'F1压机排气压力' }, { Name: 'F2压机吸气压力' }, { Name: 'F2压机排气压力' },
          { Name: 'G1压机吸气压力' }, { Name: 'G1压机排气压力' }, { Name: 'G2压机吸气压力' }, { Name: 'G2压机排气压力' },
          { Name: 'H1压机吸气压力' }, { Name: 'H1压机排气压力' }, { Name: 'H2压机吸气压力' }, { Name: 'H2压机排气压力' },
          { Name: 'I1压机吸气压力' }, { Name: 'I1压机排气压力' }, { Name: 'I2压机吸气压力' }, { Name: 'I2压机排气压力' },
          { Name: 'J1压机吸气压力' }, { Name: 'J1压机排气压力' }, { Name: 'J2压机吸气压力' }, { Name: 'J2压机排气压力' },
          { Name: '氧浓度1采集值' }, { Name: '氧浓度2采集值' }, { Name: '氧浓度3采集值' }, { Name: '氧浓度4采集值' },
          { Name: '压差1采集值' }, { Name: '压差2采集值' }, { Name: '前风道鼓风变频器' }, { Name: '后风道鼓风变频器' }
        ]}
    }
  },
  destroyed() {
    // 离开路由之后断开websocket连接
    this.websock.close()
  },
  created() {
    // 初始化websocket
    this.initWebSocket()
    // 数据获取
    // this.getData()
    // 打开当前页面即数据获取
    this.getDashBoardData()
    
    // 直接从webaccess获取数据，满足实时性要求
    setTimeout(this.refreshData, 15000)
  },
  mounted() {},
  methods: {
    // getData(){
    //   getAction(`/datacoll/webaccess/getWATagValue`).then(res=>{
    //     console.log(res)
    //     if(res.success){
    //       this.eqRealData = res.result
    //     }
    //   })
    // },
    getInfo(url, parameter) {
      let sign = signMd5Utils.getSign(url, parameter)
      //将签名和时间戳，添加在请求接口 Header
      // update-begin--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
      let signHeader = { 'X-Sign': sign, 'X-TIMESTAMP': signMd5Utils.getTimestamp() }
      // update-end--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯

      return axios({
        timeout: 50000,
        url: url,
        method: 'get',
        params: parameter,
        headers: signHeader,
      })
    },
    getDashBoardData() {
      this.getInfo(`/datacoll/webaccess/getDashBoardData`).then((res) => {
        const redata = JSON.parse(res.result);
        // console.log("首次获取", redata);
        this.initData(redata);
      })
    },
    // 点击报警按钮触发弹窗
    clickAlarmBtn() {
      this.$refs.alarmList.visible = true
      this.$refs.alarmList.loadData()
    },
    // websocket
    initWebSocket() {
      // 初始化weosocket(必须)
      // 请根据实际项目需要进行修改
      // var userId = store.getters.userInfo.id
      // const wsuri = 'ws://127.0.0.1:8866/websocket'
      // const wsuri = `ws://192.168.2.216:8866/websocket/${userId}`
      // const wsuri = `ws://192.168.2.247:8866/websocket/${userId}`
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      var userId = 'f0019fdebedb443c98dcb17d88222c38' // 免登录使用
      if (store && store.getters && store.getters.userInfo && store.getters.userInfo.id) {
        userId = store.getters.userInfo.id
      }
      var wsuri =
        window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
      console.log('地址', wsuri)
      // var wsuri = 'ws://192.168.2.247:8866/websocket';
      // console.log(wsuri);
      //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
      let token = Vue.ls.get(ACCESS_TOKEN)
      // 大屏免登录，去掉token
      this.websock = new WebSocket(wsuri)
      // this.websock = new WebSocket(wsuri, [token]);
      // 新建一个webstock对象
      // this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    // 数据接收
    websocketonmessage(e) {
      console.log('-----接收消息-------', e)
      const redata = JSON.parse(e.data)
      // console.log(redata)
      this.initData(redata)
    },
    initData(redata) {
      console.log(66666, redata)
      // 接收数据之后操作
      this.eqRealData = redata['设备实时值']
      if (redata['设备实时值']) {
        var titleObj = redata['设备实时值'].find((item) => item.Name === '试验名称')
        // console.log('我要找名字', titleObj.Value)
        if (titleObj && titleObj != -1) {
          this.titleName = titleObj.Value
        }
      }
      // this.curveData = redata['设备历史值'] // 原来第一版后端传数格式
      if (redata['预制曲线']) {
        this.realTimeData = redata['实时曲线']
        this.fullData = redata['全程曲线']
      } else {
        // console.log("实时曲线", this.realTimeData, redata['实时曲线'])
        this.realTimeData = [...this.realTimeData, ...redata['实时曲线']]
        this.fullData = [...this.fullData, ...redata['全程曲线']]
      }
      if (this.isFullWebSocket) {
        // this.fullModelData = redata['设备历史值'] // 原来第一版后端传数格式
        if (redata['预制曲线']) {
          this.fullModelData = redata['全程曲线']
        } else {
          this.fullModelData = [...this.fullModelData, ...redata['全程曲线']]
        }
      }
      // 旧版本
      // this.newAlarmData = redata['最新一条报警信息']
      // 新版本
      // console.log('判断是否含有1',redata.hasOwnProperty('最近24H报警信息'))
      // console.log('判断是否含有2',redata['最近24H报警信息'])
      this.newAlarmData = redata.hasOwnProperty('最近24H报警信息') ? redata['最近24H报警信息'] : ['原数据']
      if (redata['预制曲线'] && redata['预制曲线'].length > 0) {
        this.yuzhiData = redata['预制曲线']
      }
      if (redata['预制曲线'] && redata['预制曲线线段'].length > 0) {
        this.yuzhiMarkData = redata['预制曲线线段']
      }
      // this.$refs.yuzhiCurve.markData = this.yuzhiMarkData
      // var titleObj = redata['设备实时值'].find(item => item.Name === '试验名称')
      // console.log(titleObj)
      // this.titleName = titleObj ? titleObj.Value : '高温高湿试验项目'
    },
    // websocket连接后发送数据(send发送)
    websocketonopen() {
      console.log('WebSocket连接成功')
      // let actions = {} // 请根据实际项目需要进行修改
      // this.websocketsend()
    },
    // 数据发送
    websocketsend(d) {
      this.websock.send(d)
      console.log(d)
    },
    // 连接建立失败重连
    websocketonerror() {
      this.initWebSocket()
    },
    // 关闭
    websocketclose(e) {
      console.log('断开连接', e)
      this.initWebSocket()
    },
    // 点击循环时触发
    handleXunhuan(choose) {
      this.$refs.yuzhiCurve.chooseXunhuan.circname = choose
      // this.$refs.yuzhiCurveM.chooseXunhuan.circname = choose
    },
    // 刷新数据
    refreshData() {
      const instance = axios111.create({
        baseURL: window._CONFIG['webaccessURL'] + '/WaWebService/Json', // 目标服务器的URL
        timeout: 20000, // 请求超时时间
        headers: {
          'Content-Type': 'application/json',
          Authorization: window._CONFIG['webaccessAUTHOR'],
        },
      })
      instance
        .post('/GetTagValue/瑞莱', this.tagParams)
        .then((response) => {
          this.initData(this.addExtraTagValues(response.data.Values)) 
          console.log("为啥1")
          setTimeout(this.refreshData, 1000)
        })
        .catch((error) => {
          // 处理错误
          // console.error(error)
          setTimeout(this.refreshData, 1000)
        })
    },
    // 增加额外的参数
    addExtraTagValues(values) {
      var syyxsj, yjjssj, cxdsdsj, cxdyxsj, wdscl, sdscl = 0;      
      var realtimecurves = [];
      var wholecurves = [];
      var now = new Date();
      var logtime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
      var shorttime =  moment(new Date()).format('HH:mm:ss');
      var longtime = moment(new Date()).format('MM-DD HH:mm:ss');

      for (var i = 0; i < values.length; i++) {
        switch (values[i].Name) {
          case '设备状态':
            // 如果设备状态原来不是启动，现在改成启动，则刷新试验信息、预制曲线、实时曲线、全程曲线
            if (this.equipmentStatus != 1 && parseInt(values[i].Value) == 1) {
              this.equipmentStatus = parseInt(values[i].Value);
              this.getDashBoardData();
            }
            break;
          case '试验运行时间':
            syyxsj = parseInt(values[i].Value);
            break;
          case '预计结束时间':
            yjjssj = parseInt(values[i].Value);
            break;
          case '程序段设定时间':
            cxdsdsj = parseInt(values[i].Value);
            break;
          case '程序段运行时间':
            cxdyxsj = parseInt(values[i].Value);
            break;
          case '温度输出率':
            wdscl = parseFloat(values[i].Value);
            break;
          case '湿度输出率':
            sdscl = parseFloat(values[i].Value);
            break;
          case '当前温度值':
            realtimecurves.push({name: "温度实值-实时", subList: [{logtime: logtime, tagvalue: values[i].Value, transtime: shorttime}], type: "实时"})
            wholecurves.push({name: "温度实值-全程", subList: [{logtime: logtime, tagvalue: values[i].Value, transtime: longtime}], type: "全程"})
            break;
          case '当前湿度值':
            realtimecurves.push({name: "湿度实值-实时", subList: [{logtime: logtime, tagvalue: values[i].Value, transtime: shorttime}], type: "实时"})
            wholecurves.push({name: "湿度实值-全程", subList: [{logtime: logtime, tagvalue: values[i].Value, transtime: longtime}], type: "全程"})
            break;
          default:
            break;
        }
      }
      console.log("实时曲线", realtimecurves)
      console.log("全程曲线", wholecurves)

      // 试验进度：试验运行时间/(试验运行时间+预计结束时间)
      var syjd = (syyxsj + yjjssj) == 0 ? 0 : parseFloat(syyxsj) / (parseFloat(syyxsj) + parseFloat(yjjssj));
      values.push({Name: "试验进度", Value: syjd, Quality: 0});

      // 预计结束时间-试验信息：“预计结束时间”给到的是时间段(s)：预计结束时间+本地时间=预计时间（显示月日时分）。
      var yjjssj_syxx = new Date();
      if (yjjssj != null) {
          yjjssj_syxx.setSeconds(yjjssj_syxx.getSeconds() + yjjssj);
      }
      values.push({Name: "预计结束时间-试验信息", Value: moment(yjjssj_syxx).format('YYYY-MM-DD HH:mm:ss'), Quality: 0});

      // 段余时间：程序段设定时间-程序段运行时间
      values.push({Name: "段余时间", Value: cxdsdsj - cxdyxsj, Quality: 0});


      // 段进度：(程序段设定时间（设定时间-秒） - 程序段运行时间（运行时间-秒） )/程序段设定时间（设定时间-秒）
      var djd = cxdyxsj == 0 ? "0" : ((cxdsdsj - cxdyxsj) / cxdsdsj).toFixed(2);
      values.push({Name: "段进度", Value: djd, Quality: 0});

      // 斜率设定

      // 升温/降温：温度输出率为0%-100%则是加热状态，-100%--0%则是降温状态
      values.push({Name: "升温", Value: wdscl > 0 ? 1 : 0, Quality: 0});
      values.push({Name: "降温", Value: wdscl < 0 ? 1 : 0, Quality: 0});

      // 加湿/除湿：湿度输出率为0%-100%则是加湿状态，-100%--0%则是除湿状态
      values.push({Name: "加湿", Value: sdscl > 0 ? 1 : 0, Quality: 0});
      values.push({Name: "除湿", Value: sdscl < 0 ? 1 : 0, Quality: 0});

      return {"设备实时值": values, "实时曲线": realtimecurves, "全程曲线": wholecurves};
    },
    // 弹窗
    showModal(title) {
      this.title = title
      this.visible = true
      // console.log('弹簧全程曲线赋值', this.$refs.fullCurve.data)
      // this.fullModelData = this.$refs.fullCurve.data
    },
    getSearchData() {
      getAction('/datacoll/webaccess/getQcqx', this.queryParam).then((res) => {
        console.log(res)
        if (res.success) {
          this.fullModelData = res.result
        }
      })
    },
    searchQuery() {
      this.getSearchData()
      this.isFullWebSocket = false
    },
    searchReset() {
      this.queryParam = {}
      this.getSearchData()
      this.isFullWebSocket = true
    },
    curveClose() {
      this.isFullWebSocket = true
      this.visible = false
      this.queryParam = {}
      this.fullModelData = this.fullData // 解除搜索数据状态，保证再次打开是全部数据状态
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/uStyle.less';
// 表单
.ant-form {
  /deep/ .ant-form-item-label {
    label {
      color: #fff !important;
    }
  }
  /deep/ .ant-input {
    background: rgba(6, 23, 48, 0.5);
    color: #fff;
  }
  /deep/ .ant-btn-primary {
    background: transparent;
    // background: #0b2243d9;
    // border-color: #fff;
  }
}
</style>
<style lang="less">
.visualization-container {
  width: 100%;
  height: 100vh;
  background: url('~@/assets/visualization/pageBg.png') no-repeat;
  background-size: cover;
  position: relative;
  // 头部标题区域
  .top-title-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    // border: 1px solid #000;
    height: 80px;
    text-align: center;
    // line-height: 22px;
    .title-content {
      width: 700px;
      height: 100%;
      background: url('~@/assets/visualization/pageTitleBg.png') no-repeat center center;
      background-size: auto 100%;
      .text {
        font-size: 28px;
        color: transparent;
        // font-weight: bold;
        // 描边 变相加粗
        -webkit-text-stroke: 0.4px;
        letter-spacing: 0.15em;
        text-shadow: 1px 2px 2px rgb(10, 37, 92);
        // text-shadow: 1px 2px 2px rgba(10, 68, 134, .67);
        position: relative;
        font-family: '黑体';
        // font-family: "宋体";
        // font-family: serif;
        // font-family: "楷体_GB2312";
        &::before {
          // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
          content: attr(data-attr);
          position: absolute;
          z-index: 10;
          background-image: linear-gradient(to bottom, #ffffff, #8dd4f7);
          // background-image: linear-gradient(to bottom, #ffffff, #7ed7fb);
          -webkit-background-clip: text;
          color: transparent;
          // 去除集成父级样式
          text-shadow: none;
        }
      }
    }
  }
  // 报警按钮
  .alarm-btn {
    position: absolute;
    top: 26px;
    left: calc(25% + 94px);
    width: 50px;
    height: 50px;
    background: url('~@/assets/visualization/alarm.png') no-repeat;
    background-size: contain;
    cursor: pointer;
    z-index: 999;
    div {
      color: #20eef9;
      text-align: center;
      font-size: 10px;
      line-height: 12px;
      font-style: italic;
      padding-right: 3px;
      padding-bottom: 2px;
    }
  }
  // 数据内容区域
  .content-container {
    height: 100%;
    // padding: 60px 20px 20px;
    // padding-top: 60px;
    // padding-bottom: 20px;
    box-sizing: border-box;
    .left-container {
      width: 25%;
      padding-left: 10px;
      padding-right: 10px;
      height: 100%;
      z-index: 999;
      .left-top-con {
        height: 33.3%;
        padding-top: 60px;
        padding-bottom: 12px;
      }
      .left-center-con {
        height: 33.3%;
        padding-top: 6px;
        padding-bottom: 6px;
      }
      .left-bottom-con {
        height: 33.3%;
        padding-top: 6px;
        padding-bottom: 12px;
      }
    }
    .center-container {
      width: 50%;
      height: 100%;
      padding-left: 10px;
      padding-right: 10px;
      .important {
        width: 100%;
        height: 66.7%;
        // text-align: center;
        // line-height: 500px;
      }
      .centen-bottom-con {
        height: 33.3%;
        padding-top: 6px;
        padding-bottom: 12px;
        .center-bottom-left {
          width: 50%;
          height: 100%;
          padding-right: 6px;
        }
        .center-bottom-right {
          width: 50%;
          height: 100%;
          padding-left: 6px;
        }
      }
    }
    .right-container {
      width: 25%;
      padding-left: 10px;
      padding-right: 10px;
      .right-top-con {
        height: 33.3%;
        padding-top: 60px;
        padding-bottom: 6px;
      }
      .right-center-con {
        height: 33.3%;
        padding-top: 6px;
        padding-bottom: 6px;
      }
      .right-bottom-con {
        height: 33.3%;
        padding-top: 6px;
        padding-bottom: 12px;
      }
    }
  }
}
.u-modal-box {
  .ant-modal {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0;
    top: 0;
    .ant-modal-close {
      color: #fff;
    }
    .ant-modal-header {
      background-color: rgba(5, 24, 61, 0.9) !important;
      border-bottom: none;
      .ant-modal-title {
        color: #fff;
      }
    }
    .ant-modal-content {
      border-radius: 0;
      height: 100%;
      background-color: rgba(5, 24, 61, 0.9) !important;
      // background-color: rgba(15, 57, 91, .94) !important;
      overflow: hidden;
    }
    .ant-modal-body {
      height: calc(100% - 55px - 53px);
    }
    .ant-modal-footer {
      border-top: none;
    }
  }
}
</style>