rydw.vue

<template>
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧 -->
      <div class="sidebar sidebar-left">
          <div class="sidebar-item">
            <div class="sub-title por"><span>井下人员实时数据统计</span></div>
            <div class="sub-con sub-con1">
              <div class="sub-con-left por">
                <div><p>带班领导：{{ subStaStatus.leader||0 }}</p></div>
              </div>
              <div class="sub-con-right">
                <div><p class="p-out"><i>系统监控总人数</i><span class="por">{{ subStaStatus.systemMonitorAllCount||0  }}</span></p></div>
                <div><p class="p-out"><i>下井总人数</i><span class="por">{{ subStaStatus.peopleIntoWellCount||0  }}</span></p></div>
                <div><p class="p-out"><i>地面井口总人数</i><span class="por">{{ subStaStatus.groundWellCount||0  }}</span></p></div>
                <div><p class="p-out"><i>重点区域人数</i><span class="por">{{ subStaStatus.keyAreaPopulation||0  }}</span></p></div>
              </div>
            </div>
            
          </div>
          <!-- 状态统计组件 -->
          <div class="sidebar-item status-box">
            <div class="sub-title por"><span>区域人数实时分布图</span></div>
            <div class="sub-con">
              <div class="left-chart" ref="left1" id="left1"></div>
            </div>
          </div>
          <!-- 报警分析组件 -->
          <div class="sidebar-item alert-analysis">
            <div class="sub-title por"><span>井下人员实时状态</span></div>
            <div class="sub-con sub-con-scroll-table">
              <div class="custom-header">
                <span class="custom-header-item" >姓名</span>
                <span class="custom-header-item" >分站名称</span>
                <span class="custom-header-item" >距离分站</span>
                <span class="custom-header-item" >时间</span>
              </div>
              <vue-seamless-scroll :data="realTimeStatusData" class="warp " :class-option="classOption">
                <ul >
                  <li v-for="(item, index) in realTimeStatusData" :key="index" class="custom-item custom-item1">
                    <span class="custom-item-content custom-item-content1" v-text="item.perName"></span>
                    <span class="custom-item-content custom-item-content1" v-text="item.location"></span>
                    <span class="custom-item-content custom-item-content1" v-text="item.distance"></span>
                    <span class="custom-item-content custom-item-content1" v-text="item.lastTime"></span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
            
          </div>
      </div>

      <!-- 中间 -->
      <div class="main-area">
        
          
          <!-- 人员点位 -->
          <div v-for="(subStation,index) in subStationMid" :key="subStation.addressId" class="parent-container">
            <div 
              class="dot" 
              :class="`dot${index}`" 
              @click="handleStation(subStation.addressId)"
              :style="getStationStyle(subStation.addressId)"
            >
              <p>{{ subStation.count }}人</p>
              <!-- <p style="font-size: 14px;">{{ subStation.location }}</p> -->
            </div>
          </div>
          
      </div>

      <!-- 右侧 -->
      <div class="sidebar sidebar-right">
        <div class="sidebar-item alert-analysis">
          <div class="sub-title por"><span>分站状态分析</span></div>
          <div class="sub-con sub-con-r">
            <div class="sub-con-r-left"></div>
            <div class="sub-con-r-right">
              <p><span>分站总数</span><span>---------</span><span>{{ subStaStatusData[0].num }}</span></p>
              <p><span>运行中分站</span><span>---------</span><span>{{ subStaStatusData[2].num }}</span></p>
              <p><span>休眠中分站</span><span>---------</span><span>{{ subStaStatusData[1].num }}</span></p>
            </div>
          </div>
        </div>
        <!-- 重点区域组件 -->
        <div class="sidebar-item alert-analysis">
          <div class="sub-title por"><span>近30天报警分析</span></div>
          <div class="sub-con">
            <div class="left-chart" ref="right" id="right"></div>
          </div>
        </div>
        <!-- 报警信息流 -->
        <div class="sidebar-item alert-analysis">
          <div class="sub-title por"><span>近7日井下人员报警信息</span></div>
          <div class="sub-con sub-con-scroll-table">
            <div class="custom-header custom-header2">
              <span class="custom-header-item custom-header-item2" >姓名</span>
              <span class="custom-header-item custom-header-item2" >部门</span>
              <span class="custom-header-item custom-header-item2" >报警时间</span>
              <span class="custom-header-item custom-header-item2" >报警位置</span>
            </div>
            <vue-seamless-scroll :data="recentSevDaysAlarmsData" class="warp " :class-option="classOption">
              <ul >
                <li v-for="(item, index) in recentSevDaysAlarmsData" :key="index" class="custom-item custom-item2">
                  <span class="custom-item-content custom-item-content2" v-text="item.perName"></span>
                  <span class="custom-item-content custom-item-content2" v-text="item.departName"></span>
                  <span class="custom-item-content custom-item-content2" v-text="item.alarmTime"></span>
                  <span class="custom-item-content custom-item-content2" v-text="item.location"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <!-- 弹窗内容 -->
      <div class="dialog-main" v-show="dialogTableVisible">
        <div class="dia-header">
          <p class="dia-tit"><span>分站信息</span></p>
          <p class="close-btn" @click="closeDialog"><span>×</span></p>
        </div>
        <div class="dialog-content">
          <div class="sub-info">
            <p v-if="perOnlineSituationData.length>0">分站名称:{{ perOnlineSituationData[0].locationName }}</p>
            <p v-if="perOnlineSituationData.length>0">分站编号:{{ perOnlineSituationData[0].locationId }}</p>
            <p v-if="perOnlineSituationData.length>0">分站位置:{{ perOnlineSituationData[0].location }}</p>
          </div>
          <div class="dia-table-header">
            <span>卡号</span>
            <span>姓名</span>
            <span>部门</span>
            <span>工种</span>
            <span>距离分站(m)</span>
            <span>到达位置</span>
            <span>来向</span>
            <span>时间</span>
            <span>进入区域</span>
            <span>入井时间</span>
            
          </div>
          <vue-seamless-scroll :data="perOnlineSituationData" class="warp2 " :class-option="classOption2">
            <ul v-if="perOnlineSituationData.length>0">
              <li v-for="(item, index) in perOnlineSituationData" :key="index" class="custom-item custom-item3">
                <span class="custom-item-content custom-item-content3" v-text="item.cardNumber"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.perName"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.departName"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.worName"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.distance"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.localtion"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.fromLoaction"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.lastTime"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.areaName"></span>
                <span class="custom-item-content custom-item-content3" v-text="item.entryTime"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      
    </div>
</template>
<script>
import * as echarts from "echarts";
import screenfull from "screenfull";
import {
  realTimeStatistics,
  realTimeDistribution,
  realTimeStatus,
  stationStatus,
  recentThDaysAlarms,
  recentSevDaysAlarms,
  perStationInfo,
  perOnlineSituation,
} from "@/api/tyler/screen";
export default {
  name: "cockpit",
  data() {
    return {
      dialogTableVisible:false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      realTimeStatusData: [
        { perName: "陈玉强", location: "一中运输巷", distance: 14.21, lastTime: "2025-01-10 14:21:31" },
      ],
      recentSevDaysAlarmsData: [
        { perName: "陈玉强", departName: "生产部", alarmTime: "2025-01-10 14:21:31", location: "四中车场" },
      ],
      subStaStatus:[],
      realTimeDistributionData:[],
      subStaStatusData:[
        {num:0},
        {num:0},
        {num:0},
      ],
      recentThDaysAlarmsData:[],
      classOption: {
        singleHeight: 47,
        hoverStop: true,
        autoPlay: true,
      },
      classOption2: {
        singleHeight: 60,
        hoverStop: true,
        autoPlay: true,
      },
      perOnlineSituationData:[],
      subStationMid:[
        {
            "count": 0,
            "location": "一中车场",
            "addressId": 1
        }
      ],

      stationPositions: {
        1: { left: '84px', top: '240px' },
        2: { left: '352px', top: '290px' },
        4: { left: '84px', top: '342px' },
        5: { left: '148px', top: '360px' },
        6: { left: '194px', top: '362px' },
        7: { left: '84px', top: '440px' },
        8: { left: '200px', top: '470px' },
        9: { left: '820px', top: '114px' },//东风井井口
        10: { left: '136px', top: '672px' },
        11: { left: '84px', top: '540px' },
        12: { left: '84px', top: '650px' },
        13: { left: '152px', top: '260px' },
        14: { left: '74px', top: '128px' },//小高尖井口
        15: { left: '232px', top: '292px' },
        16: { left: '554px', top: '280px' },
        17: { left: '690px', top: '84px' },
        18: { left: '265px', top: '377px' },
        19: { left: '200px', top: '400px' },
        20: { left: '534px', top: '390px' },
        21: { left: '675px', top: '367px' },
        22: { left: '400px', top: '500px' },
        23: { left: '300px', top: '530px' },
        24: { left: '500px', top: '518px' },
        25: { left: '580px', top: '500px' },
        26: { left: '350px', top: '616px' },
        27: { left: '252px', top: '590px' },
        28: { left: '700px', top: '254px' },
      }
    };
  },
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request();
    }
    this.areaCharts();
    this.alarm30();
    // this.getUnPerRealData()
    this.subStationObj();
    this.subStationStatusObj();
    this.realTimeStatusList();
    this.recentSevDaysAlarmsList();
    this.perStationInfoList();
  },
  methods: {
    
    // 分站状态分析
    subStationObj(){
      realTimeStatistics().then(res => {
        this.subStaStatus = res.data;
      })
    },
    //区域人数实时分布图
    async realTimeDistributionList() {
      try {
        const res = await realTimeDistribution();
        this.realTimeDistributionData = res.data;
      } catch (error) {
        console.error('Error fetching real-time distribution data:', error);
      }
    },
    //井下人员实时状态
    realTimeStatusList(){
      realTimeStatus().then(res => {
        this.realTimeStatusData = res.data;
      })
    },
    // 分站状态分析
    subStationStatusObj(){
      stationStatus().then(res => {
        this.subStaStatusData = res.data;
      })
    },
    //近7日井下人员报警信息
    recentSevDaysAlarmsList(){
      recentSevDaysAlarms().then(res => {
        this.recentSevDaysAlarmsData = res.data;
      })
    },
    //中间分站信息
    perStationInfoList(){
      perStationInfo().then(res => {
        this.subStationMid = res.data;
      })
    },
    // 辅助方法：获取字段值
    getItemField(item, fieldKey) {
      return item[this.fieldMap[fieldKey]] || "";
    },
    async areaCharts() {
      let that = this;
      let myChart = echarts.init(document.getElementById('left1'));
      await this.realTimeDistributionList();
      let xAxisData =that.realTimeDistributionData.map(item => item.name);
      let yAxisData = that.realTimeDistributionData.map(item => item.value);
      let option ={
          title: {
            text: "",
            x: "center",
            y:"4%",
            textStyle: {
                color: '#fff',
                fontSize: '12'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '12',

            },
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          grid: {
              top: '5%',
              right: '3%',
              left: '8%',
              bottom: '12%'
          },
          xAxis: [{
              type: 'category',
              data: xAxisData,
              axisLine: {
                  show:true,
                  lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                  }
              },
              axisLabel: {
                  show:true,
                  margin: 10,
                  color: '#fff',
                  textStyle: {
                      fontSize: 12
                  },
              },
          }],
          yAxis: [{
              axisLabel: {
                  show:true,
                  formatter: '{value}',
                  color: '#B7CCDA',
                  textStyle: {
                      fontSize: 14
                  },
              },
              axisTick:{       //y轴刻度线
                show:true,
                color: '#e2e9ff',
              },
              axisLine: {
                  show: true,
                  color: '#e2e9ff',
                  lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                  }
              },
              splitLine: {
                  show:true,
                  lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                  }
              }
          }],
          series: [{
              type: 'bar',
              data: yAxisData,
              barWidth: '16px',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#37BBFF' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#1C3454' // 100% 处的颜色
                      }], false),
                      // barBorderRadius: [30, 30, 8, 8],
                      // shadowColor: 'rgba(0,160,221,1)',
                      // shadowBlur: 4,
                  }
              },
              label: {
                  normal: {
                      show: false,
                      lineHeight: 20,
                      width: 10,
                      height: 20,
                      backgroundColor: 'rgba(0,160,221,0.1)',
                      // borderRadius: 200,
                   
                  }
              }
          }]
      }
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);

    },
  
    async recentThDaysAlarmsList() {
      try {
        const res = await recentThDaysAlarms();
        this.recentThDaysAlarmsData = res.data;
      } catch (error) {
        console.error('Error fetching real-time distribution data:', error);
      }
    },
    async alarm30(){
      let that = this;
      await this.recentThDaysAlarmsList();
      let salvProName =that.recentThDaysAlarmsData.map(item => item.name);
      let salvProValue = that.recentThDaysAlarmsData.map(item => item.num);

      let myChart = echarts.init(document.getElementById('right'));
    
      var salvProMax = []; //背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0]);
      }
      let option ={
        grid: {
          left: "4%",
          right: "0%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          // show: false,
          type: "value",
          axisLabel: {
              show:true,
              color: '#B7CCDA',
              textStyle: {
                  fontSize: 14
              },
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: salvProName,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "14",
              },
            },
            data: salvProValue,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                // barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#1C3454",
                  },
                  {
                    offset: 1,
                    color: "#37BBFF",
                  },
                ]),
              },
            },
            barWidth: 10,
            data: salvProValue,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%",
            data: salvProMax,
            itemStyle: {
              normal: {
                color: "rgba(24,31,68,1)",
                barBorderRadius: 30,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);

    },
    //自动滚动
    autoScroll() {
      const divData = this.$refs.scroll_List3;
      // 拿到表格中承载数据的div元素
      divData.scrollTop += 1;
        if (
          Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
          divData.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
        this.scrolltimer3 = window.requestAnimationFrame(
          this.autoScroll.bind(this)
        );
    },
    //停止滚动
    cancelScroll() {
      window.cancelAnimationFrame(this.scrolltimer3)
    },
    goToSys(){
      var link = this.$router.resolve({
        path: "/",
      });
      window.open(link.href);
      return;
    },
    getStationStyle(addressId) {
      return this.stationPositions[addressId] || {};
    },
    handleStation(addressId) {
      
      perOnlineSituation({addressId}).then(res => {
        console.log(res,'res')
        
        if(res.data&&res.data.length>0){
          this.perOnlineSituationData = res.data
          this.dialogTableVisible = true;
        }
      })
    },
    closeDialog() {
      this.dialogTableVisible = false;
      this.perOnlineSituationData = []
    }
  },
};
</script>
<style lang="scss" scoped>
.por{position: relative;}
.sidebar-left{
  transform-origin: left center;
  transform: scaleX(1) perspective(610px) rotateY(5deg);
}
.sidebar-right{
  transform-origin:center right ;
  transform: scaleX(1) perspective(610px) rotateY(-5deg);
}
/* 主体内容 */
.main-content {
    // flex: 1;
    // display: grid;
    // grid-template-columns: 1fr 3fr 1fr; /* 三列布局 */
    // gap: 20px;
    // max-height: calc(100% - 70px);
    // overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding:0 30px;
    
}

/* 左右侧边栏 */
.sidebar {
  width: 460px;
  border-radius: 8px;
  flex: 1;
  // display: flex;
  // flex-direction: column;
  display: grid;
  grid-template-rows: repeat(3,1fr);
  gap: 2px;
  margin-top: -10px;
}
.sidebar-item{
  width: 100%;
  height: 286px;
  margin-bottom: 30px;
  background: linear-gradient(180deg, rgba(1,33,58,.2) 0%, rgba(8,132,233,.2) 100%);
  position: relative;
  &::before{
    content: '';
    width: 460px;
    height: 4px;
    position: absolute;
    background: url("~@/assets/images/screen/bottom.png") no-repeat center;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
  }
  .sub-title{
    width: 100%;
    height: 46px;
    background: url("~@/assets/images/screen/title1.png") no-repeat center;
    font-weight: bold;
    span{
      position: absolute;
      top:-10px;
      left:30px;
      font-size: 22px;
    }
  }
  .sub-con1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .sub-con-left{
      div{
        margin-top: -40px;
        width: 144px;
        height: 178px;
        background: url("~@/assets/images/screen/icon1.png") no-repeat center;
        
        p{
          font-size: 18px;
          color: #FFFFFF;
          background: linear-gradient(180deg, #FFED9B 0%, #FFFFFF 48.9990234375%, #FFE25D 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-align: center;
          font-weight: bold;
        }
      }
      
    }
    .sub-con-right{
      div{
        width: 243px;
        height: 32px;
        background: url("~@/assets/images/screen/underline.png") no-repeat center;
        position: relative;
        margin-bottom: 30px;
        font-size: 18px;
        

        .p-out{
          width: 100%;
          position: absolute;
          left:30px;
          top:-16px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding-right: 50px;
          span{
            font-size: 30px;
            color: #FFD929;
            text-indent: 15px;
            font-family: 'number';
            margin-top: -4px;
            &::before{
              content: '';
              width: 6px;
              height: 8px;
              position: absolute;
              background: url("~@/assets/images/screen/icon2.png") no-repeat center;
              left: 5px;
              top:10px;
              z-index: 20;
            }
           
          }
        }
        &:nth-child(1) p.p-out span{
          color: #29CAFF;
        }
        &:nth-child(2) p.p-out span{
          color: #00FFC0;
        }
      }
      
      
    }
  }
}
/* 中间主区域 */
.main-area {
  width: calc(100% - 920px);
  background: url("~@/assets/images/screen/bg3.png") no-repeat center;
  text-align: center;
}

/* 实时分布图区域 */
.distribution-map {
    height: 300px;
    background: rgba(8, 28, 49, 0.8);
    border-radius: 8px;
}

/* 底部信息栏 */
// .footer {
//     height: 120px;
//     margin-top: 20px;
//     background: rgba(0, 72, 143, 0.6);
//     border-radius: 8px;
//     display: flex;
//     align-items: center;
//     padding: 0 30px;
// }


.left-chart{
  width: 100%;
  height: 14em;
}
.sub-con-scroll-table{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.custom-header{
  width: 460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
  color: #2ED5FF;
  margin-bottom: 10px;
  font-weight: bold;
}
.custom-item{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
}
.custom-header-item{
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-header2{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 2fr;
  text-align: center;
  color: #2ED5FF;
}
.custom-item2{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 2fr;
  text-align: center;
}
.sub-con-r{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: calc(100% - 70px);
  .sub-con-r-left{
    width: 127px;
    height: 161px;
    background: url("~@/assets/images/screen/icon3.png") no-repeat center;
    background-size: 100%;
  }
  .sub-con-r-right{
    
    width: 250px;
    display: flex;
    flex-direction: column;
    // gap: 10px;
    p{
      display: grid;
      grid-template-columns: 4fr 4fr 1fr;
      font-size: 18px;
      line-height: 24px;
      color: #BBD7EA;
      background-color: rgba(61, 98, 147,.2);
      padding:10px 10px;
      text-align: justify;
      box-sizing: border-box;
      span:nth-child(2){
        color: rgba(187, 215, 234,.2);
      }
      span:nth-child(3){
        font-weight: bold;
        font-size: 24px;
        color: #BBD7EA;
        background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.warp {
  height: calc(100% - 80px);
  width: 460px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 10px auto 0;
    width: 100%;
    li.custom-item{
      
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 2fr;
      text-align: center;

      margin-bottom: 5px;
      height: 36px;
      font-size: 16px;
      color: #BBD7EA;
      position: relative;
      background-color: rgba(61, 98, 147,.2);
      span{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    li.custom-item2{
      display: grid;
      grid-template-columns: 1fr 1fr 3fr 2fr;
      text-align: center;
    }
  }
}
.parent-container{
  position: relative;
}
.dot{
  width: 42px;
  height: 53px;
  background: url("~@/assets/images/screen/icon4.png") no-repeat center;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  p{
    font-size: 20px;
    color: #BBD7EA;
    background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }
  &:hover{
    background: url("~@/assets/images/screen/icon5.png") no-repeat center;
    background-size: 100%;
    z-index: 20;

  }
}

.dialog-main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 1262px;
  background: linear-gradient(0deg, #062451 0%, #09162D 100%);
  box-shadow: 0px 15px 11px 2px rgba(0,20,39,0.31);
  border: 2px solid #11B9FF;
}

.dia-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
 
  .dia-tit{
    width: 1140px;
    height: 46px;
    font-size: 22px;
    color: #FFFFFF;
    font-weight: bold;
    background: url("~@/assets/images/screen/underline-dia.png") no-repeat center;
    background-size: 100%;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
    span{
      position: absolute;
      left: 20px;
      top: -14px;
    }
    
  }
}

.close-btn {
  cursor: pointer;
  position: relative;
  span{
    font-size: 28px;
    position: absolute;
    left: -20px;
    top: -38px;
  }
}

.dialog-content {
  text-align: center;
  .sub-info{
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-indent: 1em;
    font-size: 18px;
    color: #36FFF8;
  }
}
.dia-table-header{
  width: 100%;
  height: 36px;
  background: linear-gradient(0deg, rgba(31,169,255,0.5) 0%, rgba(31,169,255,0.03) 100%);
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr ;
  text-align: center;
  font-size: 16px;
  color: #2ED5FF;
  line-height: 36px;
  font-weight: bold;
}
.warp2{
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  ul{
    margin: 0;
    padding: 0;
    li{
      margin-bottom: 20px;
      line-height: 40px;
      font-size: 18px;
    
      background-color: rgba(61, 98, 147,.2);
    }
  }
}
.custom-item3{
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr ;
  text-align: center;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>