<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 | leaderFilter }}</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">
      <!--一中、二中。。。-->
      <span class="main-example" style="left: 499px; top: 374px">一中</span>
      <span class="main-example" style="left: 499px; top: 504px">二中</span>
      <span class="main-example" style="left: 499px; top: 625px">三中</span>
      <span class="main-example" style="left: 499px; top: 756px">四中</span>
      <span class="main-example" style="left: 499px; top: 887px">五中</span>
      <!-- 人员点位 -->
      <div
        v-for="(subStation, index) in subStationMid"
        :key="`station-${index}-${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="chart-container" id="rightTop" ref="rightTop">
            <!-- <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 class="legend-container">
            <ul>
              <li>
                <span class="legend-color blue"></span><span>一中基站数</span>
                <span class="txtblue">{{ stationData | stationDataValue('一中基站数') }}</span>
              </li>
              <li>
                <span class="legend-color cyan"></span><span>二中基站数</span>
                <span class="txtcyan">{{ stationData | stationDataValue('二中基站数') }}</span>
              </li>
              <li>
                <span class="legend-color green"></span><span>三中基站数</span>
                <span class="txtgreen">{{ stationData | stationDataValue('三中基站数') }}</span>
              </li>
              <li>
                <span class="legend-color yellow"></span><span>四中基站数</span>
                <span class="txtyellow">{{ stationData | stationDataValue('四中基站数') }}</span>
              </li>
              <li>
                <span class="legend-color orange"></span><span>五中基站数</span>
                <span class="txtorange">{{ stationData | stationDataValue('五中基站数') }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 近30天井下人数变化趋势图 -->
      <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>当月人员下井次数排行榜</span></div>
        <div class="sub-con sub-con-scroll-table">
          <vue-seamless-scroll :data="recentSevDaysAlarmsData" class="warp_ranking" :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">{{ index + 1 }}</span>
                <span class="custom-item-content custom-item-content2">{{ item.name }}</span>
                <div class="custom-item-content custom-item-content2 progressbar">
                  <div class="progress" :style="{ width: progressWidth(item.value) }"></div>
                </div>
                <span class="custom-item-content custom-item-content2">{{ item.value }}</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="item.cardNumber || 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,
  perStationInfo,
  perOnlineSituation,
  rydwMidStation,
  monthlyRankings,
} from '@/api/tyler/screen'
export default {
  name: 'rydw',
  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: [],
      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: '185px' },
        2: { left: '480px', top: '214px' },
        4: { left: '84px', top: '315px' },
        5: { left: '148px', top: '322px' },
        6: { left: '194px', top: '329px' },
        7: { left: '84px', top: '440px' },
        8: { left: '200px', top: '460px' },
        9: { left: '850px', top: '70px' }, //东风井井口
        10: { left: '136px', top: '713px' },
        11: { left: '84px', top: '573px' },
        12: { left: '84px', top: '703px' },
        13: { left: '152px', top: '190px' },
        14: { left: '74px', top: '88px' }, //小高尖井口
        15: { left: '342px', top: '202px' },
        16: { left: '640px', top: '203px' },
        17: { left: '763px', top: '20px' },
        18: { left: '265px', top: '331px' },
        19: { left: '247px', top: '364px' },
        20: { left: '534px', top: '343px' },
        21: { left: '675px', top: '333px' },
        22: { left: '400px', top: '470px' },
        23: { left: '335px', top: '526px' },
        24: { left: '500px', top: '510px' },
        25: { left: '580px', top: '478px' },
        26: { left: '350px', top: '609px' },
        27: { left: '252px', top: '599px' },
        28: { left: '766px', top: '188px' },
      },
      //中段基站数据
      stationData: [{ value: 5, name: '一中基站数', itemStyle: { color: '#007BFF' } }],
      timer: null,
    }
  },
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request()
    }
    this.areaCharts()
    this.alarm30()
    // this.getUnPerRealData()
    this.subStationObj()
    this.subStationStatusObj()
    this.realTimeStatusList()
    this.perStationInfoList()
    this.getrydwMidStation()
    this.getMonthlyRankings()
  },
  activated() {
    this.startTimer()
  },
  deactivated() {
    this.clearTimer()
  },
  beforeDestroy() {
    this.clearTimer()
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.perStationInfoList()
        this.subStationObj()
        this.getMonthlyRankings()
      }, 10000)
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    //当月人员下井次数排行榜数据
    getMonthlyRankings() {
      monthlyRankings().then(res => {
        if (res.code !== 200) return
        this.recentSevDaysAlarmsData = res.data.sort((a, b) => b.value - a.value)
        //获取的re.data格式为[{name：张三,value：54}]这样。需要根据value排序，然后value大的在前
      })
    },
    //控制进度条宽度
    progressWidth(frequency) {
      //最大值从recentSevDaysAlarmsData中获取，且保证位数为0
      const maxFrequencyData = this.recentSevDaysAlarmsData.reduce(
        (max, item) => Math.max(max, Math.ceil(item.value / 10) * 10),
        0
      )
      const width = (frequency / maxFrequencyData) * 100 + '%'
      return width
    },
    // 分站状态分析
    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
      })
    },
    //中间分站信息
    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)
      }
    },
    //30天井下人数变化趋势
    async alarm30() {
      let that = this
      await this.recentThDaysAlarmsList()
      console.log(this.recentThDaysAlarmsData, 'this.recentThDaysAlarmsData')
      let myChart = echarts.init(document.getElementById('right'))
      let option = {
        grid: {
          left: '3%',
          right: '3%',
          bottom: '2%',
          top: '3%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
          //显示日期和人数
          formatter: function (params) {
            let date = params[0].name // 日期
            let value = params[0].value // 人数
            return `${date}<br/>人数: ${value}`
          },
        },
        xAxis: {
          type: 'category',
          data: this.recentThDaysAlarmsData.map(item => item.name), // 假设日期是字符串类型
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: function (index, value) {
              // 获取数据总长度
              const dataLength = that.recentThDaysAlarmsData.length

              // 如果数据少于等于4个，全部显示
              if (dataLength <= 4) {
                return true
              }

              // 如果数据多于4个，均匀显示4个点
              // 计算每个显示点的间隔，确保均匀分布
              const step = Math.floor(dataLength / 4)
              const remainder = dataLength % 4

              // 计算要显示的索引位置
              const showIndexes = []
              for (let i = 0; i < 4; i++) {
                let pos = i * step
                // 如果有余数，适当调整位置以更均匀分布
                if (i > 0 && remainder > 0) {
                  pos += Math.floor((i * remainder) / 4)
                }
                // 确保不超出数组边界
                pos = Math.min(pos, dataLength - 1)
                showIndexes.push(pos)
              }

              return showIndexes.includes(index)
            },
            color: '#fff',
            fontSize: 12,
          },
        },
        yAxis: {
          type: 'value',
          //虚线，取整
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              type: 'dashed',
            },
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12,
          },
        },
        series: [
          {
            data: this.recentThDaysAlarmsData.map(item => item.value), // 假设值是数字类型,
            type: 'line',
            stack: 'Total',

            //线条颜色
            itemStyle: {
              color: '#37BBFF',
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 184, 251,0.5)',
                },
                {
                  offset: 1,
                  color: 'rgb(55, 184, 251,0.1)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
          },
        ],
      }
      myChart.setOption(option)
      setTimeout(() => {
        myChart.resize()
      }, 600)
    },
    //获取中段基站数据
    getrydwMidStation() {
      rydwMidStation().then(res => {
        if (res.code !== 200) {
          return
        }
        // 创建名称映射表;
        const stationMap = {
          一中: { color: '#007BFF', suffix: '基站数' },
          二中: { color: '#00CCCC', suffix: '基站数' },
          三中: { color: '#28A745', suffix: '基站数' },
          四中: { color: '#FFC107', suffix: '基站数' },
          五中: { color: '#FF5733', suffix: '基站数' },
        }

        // 先过滤再转换
        this.stationData = res.data
          .filter(item => stationMap[item.name]) // 只保留有配置项的数据
          .map(item => ({
            value: item.value,
            name: item.name + stationMap[item.name].suffix,
            itemStyle: { color: stationMap[item.name].color },
          }))

        this.$nextTick(() => {
          console.log(this.stationData)

          this.rightTopChart() // 确保DOM更新后执行
        })
      })
    },
    //中段基站分析
    rightTopChart() {
      let myChart = echarts.init(document.getElementById('rightTop'))
      let option = {
        polar: {
          radius: [30, '90%'],
        },
        angleAxis: {
          max: 10,
          startAngle: 90,
          show: false, // 显示坐标轴
        },
        radiusAxis: {
          type: 'category',
          data: this.stationData.map(item => item.name),
          axisLine: {
            show: false, // 显示径向轴
            lineStyle: {
              color: '#fff',
            },
          },
          axisLabel: {
            show: false, // 显示分类标签
            color: '#fff',
          },
        },
        series: [
          // 数值条（实际颜色）
          {
            type: 'bar',
            coordinateSystem: 'polar',
            stack: 'a',
            data: this.stationData.map(d => d.value),
            itemStyle: {
              color: params => this.stationData[params.dataIndex].itemStyle.color,
            },
          },
          // 背景条（灰色填充）
          {
            type: 'bar',
            coordinateSystem: 'polar',
            stack: 'a',
            data: this.stationData.map(() => 10), // 每个项总长度10
            itemStyle: {
              color: 'RGBA(28, 57, 92, 0.3)',
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    //自动滚动
    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 = []
    },
  },
  filters: {
    stationDataValue(data, value) {
      //当data的name等于value时，返回data的value
      return data.find(item => item.name === value)?.value + '个' || 0
    },
    leaderFilter(value) {
      if (value == '暂无排班') {
        return '暂无排班'
      }
      return (value || []).join('、')
    },
  },
}
</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;
  padding-top: 160px;
  background: url('~@/assets/images/screen/bg12.png');
  color: #fff;
}

/* 左右侧边栏 */
.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, 0.2) 0%, rgba(8, 132, 233, 0.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;
    font-family: 'fangsong';
    span {
      position: absolute;
      top: -10px;
      left: 30px;
      font-size: 22px;
    }
  }
  .sub-con1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-family: 'fangzhengyaoti';
    .sub-con-left {
      div {
        margin-top: -40px;
        width: 144px;
        height: 178px;
        background: url('~@/assets/images/screen/icon1.png') no-repeat center;
        background-size: contain;
        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 {
      font-family: 'fangzhengyaoti';

      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;
  background-size: 100%;
  text-align: center;
  .main-example {
    font-size: 18px;
    color: #2ed5ff;
    line-height: 36px;
    font-weight: bold;
    position: absolute;
    font-family: 'fangsong';
  }
}

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

.left-chart {
  width: 100%;
  height: 14em;
}
.sub-con-scroll-table {
  font-family: 'fangzhengyaoti';
  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 {
  font-family: 'fangzhengyaoti';
  width: 100%;
  display: flex;
  justify-content: flex-start; // 改为左对齐
  align-items: center;
  gap: 10px; // 添加间距控制
  height: calc(100% - 70px);
  .chart-container {
    width: 180px;
    height: 180px;
    margin: 0;
    margin-left: 20px;
    flex-shrink: 0; // 防止图表容器被压缩
  }
  .legend-container {
    margin-left: 10px; // 缩小左侧间距
    text-align: left;
    ul {
      list-style-type: none; // 新增该属性去除默认点状样式
      display: flex;
      flex-direction: column;
      gap: 10px; // 确保垂直间距生效
      padding-left: 0; // 移除默认padding
      li {
        width: 230px;
        height: 28px;
        background: #173253;
        border-radius: 14px;
        padding-left: 30px;
        line-height: 28px;
        .legend-color {
          display: inline-block;
          width: 15px;
          height: 8px;
          margin-right: 25px;
          margin-bottom: 2px;
        }
        span:nth-child(2) {
          // 选择第二个span
          color: #fff; // 示例样式
          margin-right: 22px;
        }
        .blue {
          background-color: #007bff;
        }
        .txtblue {
          color: #007bff;
        }

        .cyan {
          background-color: #00cccc;
        }
        .txtcyan {
          color: #00cccc;
        }

        .green {
          background-color: #28a745;
        }
        .txtgreen {
          color: #28a745;
        }

        .yellow {
          background-color: #ffc107;
          color: #ffc107;
        }
        .txtyellow {
          color: #ffc107;
        }

        .orange {
          background-color: #ff5733;
          color: #ff5733;
        }
        .txtorange {
          color: #ff5733;
        }
      }
    }
  }
}

.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, 0.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;
    }
  }
}
.warp_ranking {
  height: calc(100% - 80px);
  width: 460px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding-left: 10px;
    margin: 10px auto 0;
    width: 100%;
    li {
      &.custom-item {
        width: calc(100% - 10px);
        display: grid;
        grid-template-columns: 0.5fr 1fr 3fr 0.5fr;
        text-align: center;
        margin-bottom: 5px;
        height: 36px;
        font-size: 16px;
        color: #bbd7ea;
        position: relative;
        background-color: rgba(61, 98, 147, 0.2);
        span {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      &.custom-item2 {
        display: grid;
        grid-template-columns: 0.2fr 0.5fr 3fr 0.5fr;
        text-align: center;
        line-height: 36px;
        .progressbar {
          display: block;
          width: 100%;
          height: 8px;
          margin: auto 0; // 添加垂直居中
          background-color: RGBA(29, 47, 71, 1);
          .progress {
            height: 100%;
            background: linear-gradient(270deg, #37bbff 0%, #1c3454 100%);
          }
        }
      }
      span:nth-child(1),
      span:nth-child(4) {
        color: rgba(55, 187, 255, 1);
      }
    }
    /**选中前三个li */
    li:nth-child(-n + 3) {
      .progressbar {
        .progress {
          background: linear-gradient(270deg, #ffbe23 0%, rgba(255, 190, 35, 0.05) 100%);
        }
      }
      /**选中第一个和第二个span */
      span:nth-child(1),
      span:nth-child(4) {
        color: #ffbe23;
      }
    }
  }
}
.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: 284px;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    li {
      margin-bottom: 20px;
      line-height: 40px;
      font-size: 18px;

      background-color: rgba(61, 98, 147, 0.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>
