<template>
  <div class="constellation-panel" :style="{ '--InnerHeight': Innerheight }">
    <!-- 顶部区域：标题与核心指标 -->
    <div class="header-container">
      <!-- 标题栏 -->
      <div class="section-divider">
        <div class="divider-line"></div>
        <h3 class="section-title">星座构型规划</h3>


        <div class="divider-line"></div>
      </div>

      <!-- 核心数据指标 -->
      <div class="core-metrics">
        <div class="metric-card" v-for="items in coreMetrics" :key="items.label">
          <div class="metric-label">{{ items.label }}</div>
          <div class="metric-value">{{ items.value }}</div>
        </div>

      </div>

      <!-- 轨道参数可视化 -->
      <div class="orbit-visualization">

        <!-- <ordit></ordit> -->
        <el-carousel :key="carouselKey" indicator-position="none" :loop="true" class="carouselClass"
          :autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
          <el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs"
            style="text-align: center;height: 100%;">
            <div class="orbit-grid">
              <!-- 处理不同的数据结构 -->
              <template v-if="Array.isArray(orbitMetrics[indexs - 1])">
                <!-- 第一个元素是数组形式 -->
                <div v-for="(item, index) in orbitMetrics[indexs - 1][0]?.content || []" :key="index" class="orbit-cell"
                  :class="item.statusClass">
                  <div class="orbit-label">{{ item.label }}</div>
                  <div class="orbit-value">{{ item.value }}</div>
                </div>
              </template>
              <template v-else>
                <!-- 第二个元素是对象形式 -->
                <div v-for="(item, index) in orbitMetrics[indexs - 1]?.content || []" :key="index" class="orbit-cell"
                  :class="item.statusClass">
                  <div class="orbit-label">{{ item.label }}</div>
                  <div class="orbit-value">{{ item.value }}</div>
                </div>
              </template>

              <div class="orbit-title">
                <div class="orbit-title-text">
                  {{ Array.isArray(orbitMetrics[indexs - 1])
                    ? orbitMetrics[indexs - 1][0]?.label
                    : orbitMetrics[indexs - 1]?.label || '构型' + indexs }}
                </div>
              </div>
              <div class="set_carousel">
                <!-- 这里在修改时间间隔后，需要鼠标停留在carousel后才会生效 -->
                <el-popover :width="350" popper-style="width: 200px;border:none;background-color: #1C212B;">
                  <template #reference>
                    <el-avatar :size="20">
                      <template #default>
                        <div class="set_carousel_text">
                          <el-icon>
                            <Setting />
                          </el-icon>
                        </div>
                      </template>
                    </el-avatar>
                  </template>
                  <template #default>

                    <div class="demo-rich-conent">
                      <div class="settings-content">
                        <div class="setting-item">
                          <div class="setting-label">

                            <span>自动播放</span>
                          </div>
                          <el-switch v-model="globaleAutoPlay" @click="handleglobaleAutoPlayChange"
                            class="setting-checkbox" />
                          <!-- <el-checkbox 
                
              >
              </el-checkbox> -->
                        </div>

                        <div class="setting-item">
                          <div class="setting-label">

                            <span>间隔(ms)</span>
                          </div>
                          <el-input v-model="globalIntervalTimeTemp" type="number" placeholder="请输入轮播间隔(ms)"
                            @blur="handleglobalIntervalTimeChange" class="setting-input" :disabled="!globaleAutoPlay">

                          </el-input>
                        </div>
                      </div>
                    </div>
                  </template>

                </el-popover>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

      </div>


    </div>



    <!-- 卫星列表 -->
    <div class="satellite-section">
      <div class="section-divider">
        <div class="divider-line"></div>
        <h3 class="section-title">卫星列表</h3>


        <div class="divider-line"></div>
      </div>

      <div class="satellite-table-container">
        <div class="table-header">
          <el-input placeholder="搜索" size="small" class="search-input" @input="searchSatelliteList"
            v-model="searchSateValue">
            <template #prefix>
              <el-icon class="search-icon">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <!-- <div class="tableclass"> -->
        <el-table :data="satelliteData" size="small" class="custom-table">
          <el-table-column prop="" label="" :width="pxScale(30)">
            <template #default="">
              <img src='@/assets/images/lefts/satellite.png' alt="" class="satellite-icon">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="卫星名称" :width="pxScale(80)" align="center"></el-table-column>
          <el-table-column prop="station" label="当前连接" :width="pxScale(80)" align="center">
            <template #default="scope">
              <div v-if="scope.row.station.length !== 0">
                <div v-for="(items, index) in scope.row.station" :key="index">
                  <div
                    v-if="isTimeInRange(useAppStoreInstance.globalTimeLineEndSelectTime, items.startTime, items.endTime)">
                    {{ items.siteName }}
                  </div>
                  <div v-else>-</div>
                </div>

              </div>
              <div v-else>-</div>


            </template>
          </el-table-column>
          <el-table-column prop="manufacturer" label="厂商" :width="pxScale(80)" align="center"></el-table-column>
          <el-table-column prop="status" label="当前状态" :width="pxScale(70)" align="center">
            <template #default="scope">
              <el-tag :class="`status-tag status-${scope.row.statusClass}`">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>


        </el-table>
        <!-- </div> -->
      </div>
    </div>

    <!-- 地面系统 -->
    <div class="ground-system-section">
      <div class="section-divider">
        <div class="divider-line"></div>
        <h3 class="section-title">地面系统</h3>
        <div class="divider-line"></div>
      </div>

      <div class="ground-system-metrics margin-top-section">
        <div class="ground-metric" v-for="item in groundMetrics" :key="item.label">
          <div style="display: flex;flex-direction: row;width: 80%; align-items: center;gap: 10px;">
            <img :src='item.CurrentURL' alt="" style="width: 15px;position: relative;top: -2px;">
            <div class="ground-label">{{ item.label }}</div>
          </div>

          <div class="ground-value">{{ item.value }}</div>
        </div>


      </div>

      <!-- 地面站设备数量 -->
      <div class="equipment-panel">
        <div class="equipment-tabs">
          <div class="equipment-tabs_header"></div>
          <div class="equipment-tab" :class="{ active: activeTab === 'equipment' }"
            @click="activeTabHandleClickTab('equipment')">
            地面站设备数量
          </div>
          <div class="equipment-tab" :class="{ active: activeTab === 'fault' }"
            @click="activeTabHandleClickTab('fault')">
            设备故障情况
          </div>
          <div class="equipment-tabs_end"></div>
        </div>

        <div class="equipment-table-container">
          <div class="table-header">
            <el-input placeholder="搜索" size="small" class="search-input" @input="searchEquipmentList"
              v-model="searchEquipmentValue">
              <template #prefix>
                <el-icon class="search-icon">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>

          <!-- <div class="tableclass"> -->
          <el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small"
            @row-click="tableHandleRowClickFn" :fit="false" class="custom-table custom-table-foot ">
            <el-table-column prop="" label="" :width="pxScale(30)">
              <template #default="">
                <img src='@/assets/images/lefts/info.png' alt="" class="satellite-icon_bottom">
              </template>
            </el-table-column>
            <el-table-column prop="station" label="地面站名称" :width="pxScale(90)"
              row-class-name="hover-row"></el-table-column>
            <el-table-column label="KU天线" :width="pxScale(60)" align="center">
              <template #default="scope">
                <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.ku != '-' }">{{ scope.row.ku === 0 ?
                  '-' : scope.row.ku }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="qv" label="QV天线" :width="pxScale(60)" align="center">
              <template #default="scope">
                <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.qv != '-' }">{{ scope.row.qv === 0 ?
                  '-' : scope.row.qv }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="monitor" label="测控基带" :width="pxScale(60)" align="center">
              <template #default="scope">
                <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.monitor != '-' }">{{
                  scope.row.monitor
                    === 0 ? '-' : scope.row.monitor
                }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="baseband" label="基站" :width="pxScale(40)" align="center">
              <template #default="scope">
                <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.baseband != '-' }">{{
                  scope.row.baseband === 0 ? '-' : scope.row.baseband }}</div>
              </template>
            </el-table-column>

          </el-table>
          <!-- </div> -->
        </div>
      </div>
    </div>


    <!-- <el-dialog v-model="errorDialogVisible" :show-close="false" :modal="false" width="300" hight="50"
      :destroy-on-close="true" style="background: rgba(0, 0, 0, 0);padding: 0;margin: 0;">

      <errorDialog :errorDeviceList="errorDeviceList" :satlTitle="satlTitle" :baseDeviceList="baseDeviceList"
        @errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
    </el-dialog> -->
    <!-- //右侧弹框设置 -->
    <errorDialog v-if="errorDialogVisible" :errorDeviceList="errorDeviceList" :satlTitle="satlTitle"
      :baseDeviceList="baseDeviceList" @errorDialoghandleClose="errorDialoghandleClose"></errorDialog>


  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { onBeforeUnmount, onMounted, ref, onBeforeMount, watch, onUnmounted } from 'vue';
import { stellationInfoApi, stellateListInfoApi, siteDataInfoListApi, siteDataPageErrorInfoApi, groundSystemStatisticsInfoApi } from '../../api/Zodiac'
import errorDialog from '@/pages/lefts/component/errorDialog.vue'
import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app'
import local from '@/utils/local.js'
import { pxScale } from '@/utils/rem.js'

const useAppStoreInstance = useAppStore();

// 激活的标签页
const activeTab = ref('equipment');
const errorDialogVisible = ref(false);
const coreMetrics = ref([
  // { label: '在轨卫星数', value: '36' },
]);
// useAppStoreInstance.setGlobalTimeLineEndSelectTime(formatDateTime(selectedEndTime.value));
// 监听时间轴时间变化
watch(() => useAppStoreInstance.globalTimeLineEndSelectTime, (val) => {
  // console.log(val, '时间变化----------------', faultData.value);
  //故障情况判定--每一个信关站的故障设备判定
  searchEquipmentList()//每一秒进行搜索判定

})

const globalIntervalTime = ref('')
const globalIntervalTimeTemp = ref('')
const globaleAutoPlay = ref(true)
const carouselKey = ref(0)

const currentGroundEquipmentObj = ref('') //地面系统设备对象，包括设备或者故障,列表中点击这一行的数据赋值

watch(globalIntervalTime, (newValue, oldValue) => {
  // //console.log("globalIntervalTime发生变化了");
  carouselKey.value += 1
})
// watch(globaleAutoPlay, (newValue, oldValue) => {
//   carouselKey.value +=1 
// })
const handleglobalIntervalTimeChange = (value) => {
  // //console.log("*****----12---*****",value);
  globalIntervalTime.value = globalIntervalTimeTemp.value
  useAppStoreInstance.setglobalIntervalTime((globalIntervalTime.value))
  local.local.set('globalIntervalTime', globalIntervalTime.value)
  // globalIntervalTime.value = Number(globalIntervalTime.value)
  // //console.log("当前的12",typeof globalIntervalTime.value);

}

const handleglobaleAutoPlayChange = (value) => {
  // //console.log("*****-------*****",globaleAutoPlay.value);
  //  //console.log("当前的1222",globaleAutoPlay.value);
  local.local.set('globaleAutoPlay', globaleAutoPlay.value)
  useAppStoreInstance.setglobaleAutoPlay(globaleAutoPlay.value)
};


//切换 地面站设备数量或设备故障情况
const activeTabHandleClickTab = (value) => {
  // console.log(searchEquipmentValue.value, value, "yongdainji", useAppStoreInstance.globalStartWss);
  activeTab.value = value
  //判断wx是否是链接状态,如果不连接直接获取最后的一条数据的值
  if (!useAppStoreInstance.globalStartWss) {
    // console.log(primitiveFaultData.value, "问题1", primitiveSatelliteData.value, '问题2');

    if (value === 'fault') {
      // siteDataPageErrorInfoApi({
      //   pageNum: 0,
      //   pageSize: -1,
      // }).then(res => {
      //   primitiveFaultData.value = transformgroudSatelliteData(res.data)
      //   console.log(res.data);

      faultData.value = primitiveFaultData.value
      // if (searchEquipmentValue.value !== '') {
      searchEquipmentList()
      // }
      // })
    }
    if (value === 'equipment') {
      // siteDataInfoListApi().then(res => {
      // primitiveSatelliteData.value = transformgroudSatelliteData(res.data)
      equipmentData.value = primitiveSatelliteData.value
      // if (searchEquipmentValue.value !== '') {
      searchEquipmentList()
      // }

      // })
    }
  }


}

const groundMetrics = ref([
  // { label: '地面站数', value: '33' },
  // { label: '开通格网数', value: '3,600' },
  // { label: '弧段数量', value: '120' },
  // { label: '执行情况-弧段', value: '90' },
  // { label: '上注完成情况(星)', value: '33' },
  // { label: '上注失败星数(星)', value: '3' }
]);

const orbitMetrics = ref([


]);
// 卫星数据
const primitiveSatelliteData = ref([
  // {url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '上海站', manufacturer: '上海航天', status: '正常', statusClass: 'normal' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '新疆鄯善站', manufacturer: '华为通信', status: '失效', statusClass: 'error' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '新疆鄯善站', manufacturer: '华为通信', status: '异常', statusClass: 'warning' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '上海站', manufacturer: '上海航天', status: '正常', statusClass: 'normal' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '新疆鄯善站', manufacturer: '华为通信', status: '失效', statusClass: 'error' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '新疆鄯善站', manufacturer: '华为通信', status: '异常', statusClass: 'warning' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '上海站', manufacturer: '上海航天', status: '正常', statusClass: 'normal' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '新疆鄯善站', manufacturer: '华为通信', status: '失效', statusClass: 'error' },
  // { url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(), name: 'SAT-001', station: '新疆鄯善站', manufacturer: '华为通信', status: '异常', statusClass: 'warning' },
]);
const satelliteData = ref();

const searchSateValue = ref('')
function searchSatelliteList() {
  const filteredData = primitiveSatelliteData.value.filter(item =>
    item.name.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
    item.station.includes(searchSateValue.value.toLowerCase()) ||  //当前连接数据为 - 时不能用toLowerCase这个方法
    item.manufacturer.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
    item.status.toLowerCase().includes(searchSateValue.value.toLowerCase())
  );
  satelliteData.value = filteredData
}

// 地面设备数据
const primitiveEquipmentData = ref([])
//地面站设备数量
const equipmentData = ref(primitiveEquipmentData.value);


const searchEquipmentValue = ref('')
//回显列表数组数据--搜索
function searchEquipmentList() {

  if (activeTab.value === 'equipment') {
    const filteredData = primitiveEquipmentData.value.filter(item =>
      item.station.toLowerCase().includes(searchEquipmentValue.value.toLowerCase()) ||
      item.ku.toString().includes(searchEquipmentValue.value.toLowerCase()) ||
      item.qv.toString().includes(searchEquipmentValue.value.toLowerCase())

    );
    // //console.log(filteredData);
    equipmentData.value = filteredData
  }
  //故障情况搜索
  if (activeTab.value === 'fault') {
    let filteredData = primitiveFaultData.value.filter(item =>
      item.station.toLowerCase().includes(searchEquipmentValue.value.toLowerCase()) ||
      item.ku.toString().includes(searchEquipmentValue.value.toLowerCase()) ||
      item.qv.toString().includes(searchEquipmentValue.value.toLowerCase())

    )
    filteredData.map(item => {
      item.allData.arr.map(it => {
        // console.log(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime, '故障时间',isTimeInRange(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime));
        //判断故障时间是否包含当前时间

        if (isTimeInRange(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime)) {
          item.ku = it.controlAntennaNum
          item.qv = it.controlBaseStationNum2
          item.monitor = it.controlBaseStationNum
          item.baseband = it.baseStationNum
          // console.log(item.ku, item.qv, item.monitor, item.baseband, '故障数量',it);

        }
      })
    })
    // console.log(filteredData, '故障列表');
    faultData.value = filteredData
  }

}


// 故障情况数据
const primitiveFaultData = ref([]);
const faultData = ref(primitiveFaultData.value);

const baseDeviceList = ref({})
const satlTitle = ref('')
//点击列表中某一行触发
function tableHandleRowClickFn(row, column, event) {
  errorDialogVisible.value = true// 打开面板
  currentGroundEquipmentObj.value = row//行数据赋值
  //找到对应信关站的地面网元信息--故障情况赋值
  errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === row.siteId)[0]?.groundNetworkElementResponses || []
  satlTitle.value = row.station ? row.station : '未知名称'//卫星名称
  // 天线基本信息赋值
  baseDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === row.siteId)[0]?.crossDeviceExtractResponseList || []
  if (window.ue5) {
    //打开左侧小弹框
    window.ue5("callBackAllDialogFn", String(JSON.stringify({
      type: "DeviceFaultDialog",
      status: "open"
    })));
  }
}

function errorDialoghandleClose() {
  errorDialogVisible.value = false
  if (window.ue5) {
    window.ue5("callBackAllDialogFn", String(JSON.stringify({
      type: "DeviceFaultDialog",
      status: "close"
    })));
  }
}

function handleCarouselChange(index) {
  // 处理 carousel 切换时的逻辑
  // //console.log('切换到索引:', orbitMetrics.value[index].headerTitle);
  coreMetrics.value = orbitMetrics.value[index]?.headerTitle
}


// 星座构型提取转换函数
const transformConstellationData = (data) => {
  return data.map(item => ({
    headerTitle: [
      { label: '组网卫星数', value: item?.satelliteCount || 0 },
      { label: '轨道面数', value: item?.orbitalPlaneCount || 0 },
      { label: '每轨卫星数', value: item?.satellitesPerOrbit || 0 }
    ],
    label: item?.constellationName || '',
    content: [
      { label: '在轨卫星数', value: item?.satellitesInOrbit || 0, statusClass: 'top-left' },
      { label: '在网卫星数', value: item?.satellitesInService || 0, statusClass: 'top-right' },
      { label: '轨道高度(km)', value: item?.orbitalAltitude || 0, statusClass: 'bottom-left' },
      { label: '轨道倾角', value: item?.orbitalInclination || 0 + '°', statusClass: 'bottom-right' }
    ]
  }));
};

const satelliteStatus = ['正常', '异常', '失效']
const satelliteStatusMap = {
  '正常': 'normal',
  '异常': 'warning',
  '失效': 'error',
}

// 卫星列表转换
const transformSatelliteData = (data) => {
  // //console.log("dangaqian:", data[0].siteName === undefined ? data[0].satelliteType : data[0].siteName,data[0].satelliteType , data[0].siteName);

  return data.map(item => {
    const index = Math.floor(Math.random() * 3);
    return {
      url: new URL('@/assets/images/lefts/satellite.png', import.meta.url).toString(),
      name: item.satelliteName,
      station: item.siteName === null ? '-' : item.siteName,
      manufacturer: item.manufacturer,
      // status: satelliteStatus[index] || '正常',
      status: item.satelliteStatus || '正常',
      statusClass: satelliteStatusMap[item.satelliteStatus || '正常'] || 'normal'
      // statusClass: satelliteStatusMap[satelliteStatus[index] || '正常'] || 'normal'
    };
  });
};


const wssTransformSatelliteData = (data) => {
  // console.log("wssTransformSatelliteData:", data)
  // 检查 data 是否为对象且不为 null
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return [{
      name: data?.satelliteName || '',
      station: (data?.siteName === null || data?.siteName.length === 0) ? '-' : data?.siteName,
      manufacturer: data?.manufacturer || '',
      status: data?.satelliteStatus || '正常',
      statusClass: satelliteStatusMap[data?.satelliteStatus || '正常'] || 'normal',
      allData: data
    }];
  } else if (Array.isArray(data)) {
    // 如果意外传入了数组，仍然处理数组
    return data.map(item => ({
      name: item?.satelliteName || '',
      station: (item?.siteName === null || item?.siteName.length === 0) ? '-' : item?.siteName,
      manufacturer: item?.manufacturer || '',
      status: item?.satelliteStatus || '正常',
      statusClass: satelliteStatusMap[item?.satelliteStatus || '正常'] || 'normal',
      allData: item
    }));
  }

  // 如果 data 不是对象也不是数组，返回空数组
  return [];
};
//对应信关站的地面网元信息
const errorDeviceList = ref('')
// watch(()=>errorDeviceList.value, (newVal, oldVal) => {
//   //console.log('*******111112errorDeviceList 变化了:', newVal, oldVal);
// })
// 告警列表转换

const transformgroudSatelliteDafultData = (data) => {
  // //console.log("*******11111222111111************",  data,data.groundNetworkElementResponses);
  // 检查 data 是否为对象且不为 null
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    // 如果是单个对象，直接转换为数组形式
    return [{
      station: data.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.siteName,
      ku: data.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.controlAntennaNum,
      qv: data.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.controlBaseStationNum2,
      monitor: data.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.controlBaseStationNum,
      baseband: data.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.baseStationNum,
      originErrorList: data.groundNetworkElementResponses,
      antennaAzimuth: data.antennaAzimuth || '-',
      antennaEip: data.antennaEip || '-',
      antennaElevation: data.antennaElevation || '-',
      antennaTransmitPower: data.antennaTransmitPower || '-',
      allData: data
    }];
  } else if (Array.isArray(data)) {
    // 如果是数组，遍历每个元素并转换
    return data.map(item => ({
      station: item.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.siteName,
      // 测试是否更新socket数据
      // ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-111') : item.controlAntennaNum,
      ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlAntennaNum,
      qv: item.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlBaseStationNum2,
      monitor: item.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlBaseStationNum,
      baseband: item.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.baseStationNum,
      originErrorList: item.groundNetworkElementResponses || [],
      antennaAzimuth: data.antennaAzimuth || '-',
      antennaEip: data.antennaEip || '-',
      antennaElevation: data.antennaElevation || '-',
      antennaTransmitPower: data.antennaTransmitPower || '-',
      allData: data
    }));
  }

  // 如果 data 不是对象也不是数组，返回空数组
  return [];
};




const transformgroudSatelliteData = (data) => {
  // //console.log("*******11111222111111************",  data ,data.crossDeviceExtractResponseList );
  // 检查 data 是否为对象且不为 null
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    // 如果是单个对象，直接转换为数组形式
    return [{
      station: data?.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.siteName,
      ku: data?.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.controlAntennaNum,
      qv: data?.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.controlBaseStationNum2,
      monitor: data?.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.controlBaseStationNum,
      baseband: data?.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.baseStationNum,
      originErrorList: data?.groundNetworkElementResponses || [],
      originCrossDeviceExtractResponseList: data?.crossDeviceExtractResponseList || [],
      antennaAzimuth: data?.antennaAzimuth || '-',
      antennaEip: data?.antennaEip || '-',
      antennaElevation: data?.antennaElevation || '-',
      antennaTransmitPower: data?.antennaTransmitPower || '-',
      allData: data,
      siteId: data?.siteId || '-',

    }];
  } else if (Array.isArray(data)) {
    // 如果是数组，遍历每个元素并转换
    return data.map(item => ({
      station: item.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.siteName,
      // 测试是否更新socket数据
      // ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-111') : item.controlAntennaNum,
      ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlAntennaNum,
      qv: item.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlBaseStationNum2,
      monitor: item.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlBaseStationNum,
      baseband: item.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.baseStationNum,
      originErrorList: item.groundNetworkElementResponses || [],
      originCrossDeviceExtractResponseList: item.crossDeviceExtractResponseList || [],
      antennaAzimuth: item.antennaAzimuth || '-',
      antennaEip: item.antennaEip || '-',
      antennaElevation: item.antennaElevation || '-',
      antennaTransmitPower: item.antennaTransmitPower || '-',
      allData: item,
      siteId: item.siteId || '-',
    }));
  }

  // 如果 data 不是对象也不是数组，返回空数组
  return [];
};
//地面站设备数量,故障情况统计数据格式转换
const wssTransformgroudSatelliteData = (data) => {

  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return {
      station: data?.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.siteName,
      ku: data?.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.controlAntennaNum,
      qv: data?.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.controlBaseStationNum2,
      monitor: data?.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.controlBaseStationNum,
      baseband: data?.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data?.baseStationNum,
      originErrorList: data?.groundNetworkElementResponses || [],
      originCrossDeviceExtractResponseList: data?.crossDeviceExtractResponseList || [],
      antennaAzimuth: data?.antennaAzimuth || '-',
      antennaEip: data?.antennaEip || '-',
      antennaElevation: data?.antennaElevation || '-',
      antennaTransmitPower: data?.antennaTransmitPower || '-',
      allData: data,
      siteId: data?.siteId || '-',
    }
  } else if (Array.isArray(data)) {
    // 如果意外传入了数组，仍然处理数组
    return data.map(item => ({
      // //console.log("*******11111222111111************",data,  data.groundNetworkElementResponses ,data[0].crossDeviceExtractResponseList );
      station: item?.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item?.siteName,
      ku: item?.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item?.controlAntennaNum,
      //  测试socket的数据筛选
      // ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlAntennaNum+'44',
      qv: item?.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item?.controlBaseStationNum2,
      monitor: item?.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item?.controlBaseStationNum,
      baseband: item?.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item?.baseStationNum,
      originErrorList: item?.groundNetworkElementResponses || [],
      originCrossDeviceExtractResponseList: item?.crossDeviceExtractResponseList || [],
      antennaAzimuth: item?.antennaAzimuth || '-',
      antennaEip: item?.antennaEip || '-',
      antennaElevation: item?.antennaElevation || '-',
      antennaTransmitPower: item?.antennaTransmitPower || '-',
      allData: item,
      siteId: item?.siteId || '-',
    }));

    // 如果 data 不是对象也不是数组，返回空数组

  }
}
const transformGroundSatelliteData = (data) => {


  return [
    { label: '地面站数', value: data?.groundStationNum === null ? 0 : data?.groundStationNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfGroundStations.png', import.meta.url).href },
    { label: '开通格网数', value: data?.openGridNum === null ? 0 : data?.openGridNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/ActivateGridNumber.png', import.meta.url).href },
    { label: '弧段数量', value: data?.arcNum === null ? 0 : data?.arcNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfArcSegments.png', import.meta.url).href },
    { label: '执行情况-弧段', value: data?.arcExecuteNum === null ? 0 : data?.arcExecuteNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/ExecutionStatusArcSegment.png', import.meta.url).href },

    { label: '上注完成情况(星)', value: data?.arcCompleteNum === null || data?.arcCompleteNum === undefined ? 0 : data?.arcCompleteNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/CompletionStatusOfTheAboveNote.png', import.meta.url).href },
    { label: '上注失败星数(星)', value: data?.arcFaultNum === null || data?.arcFaultNum === undefined ? 0 : data?.arcFaultNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfStarsFailedToBet.png', import.meta.url).href },
    { label: '设备故障', value: data?.faultDeviceNum === null ? 0 : data?.faultDeviceNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfFaultyDevices.png', import.meta.url).href },
  ]
};

const wssTransformGroundSatelliteData = (data) => {


  // 检查 data 是否为对象且不为 null
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return [
      { label: '地面站数', value: data?.groundStationNum === null ? 0 : data?.groundStationNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfGroundStations.png', import.meta.url).href },
      { label: '开通格网数', value: data?.openGridNum === null ? 0 : data?.openGridNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/ActivateGridNumber.png', import.meta.url).href },
      { label: '弧段数量', value: data?.arcNum === null ? 0 : data?.arcNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfArcSegments.png', import.meta.url).href },
      { label: '执行情况-弧段', value: data?.arcExecuteNum === null ? 0 : data?.arcExecuteNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/ExecutionStatusArcSegment.png', import.meta.url).href },

      { label: '上注完成情况(星)', value: data?.arcCompleteNum === null || data?.arcCompleteNum === undefined ? 0 : data?.arcCompleteNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/CompletionStatusOfTheAboveNote.png', import.meta.url).href },
      { label: '上注失败星数(星)', value: data?.arcFaultNum === null || data?.arcFaultNum === undefined ? 0 : data?.arcFaultNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfStarsFailedToBet.png', import.meta.url).href },
      { label: '设备故障', value: data?.faultDeviceNum === null ? 0 : data?.faultDeviceNum, CurrentURL: new URL('../../assets/images/leftGroundIcon/NumberOfFaultyDevices.png', import.meta.url).href },
    ];
  }

  // 如果 data 不是对象也不是数组，返回空数组

};
// websocket发生时--关闭时调取接口来展示数据
const leftGetAllListInfo = () => {
  stellationInfoApi().then(res => {
    orbitMetrics.value = transformConstellationData(res.data);
    coreMetrics.value = orbitMetrics.value[0].headerTitle
  })
  stellateListInfoApi().then(res => {
    // console.log("sas---------asasa", res.data);
    primitiveSatelliteData.value = transformSatelliteData(res.data)
    // 按 satelliteName 排序，专门处理 "SS GEN1-15" 格式
    primitiveSatelliteData.value.sort((a, b) => {
      return a.name.localeCompare(b.name, undefined, {
        numeric: true,  // 启用数字排序
        sensitivity: 'base'  // 忽略大小写和重音符号
      });
    });
    satelliteData.value = primitiveSatelliteData.value
  })
  siteDataInfoListApi().then(res => {
    // //console.log(res,"sasa1111111sasa");
    equipmentData.value = transformgroudSatelliteData(res.data)
    primitiveEquipmentData.value = equipmentData.value
  })

  groundSystemStatisticsInfoApi().then(res => {
    //console.log(res.data, "s************a");
    groundMetrics.value = transformGroundSatelliteData(res.data)

  })
};

onBeforeMount(() => {
  leftGetAllListInfo();

});




// 监听 webSocket 结束变化，再根据api查一次数据库
watch(() => useAppStoreInstance.globalStartWss, (newValue, oldValue) => {

  if (!newValue) {
    setTimeout(() => {
      leftGetAllListInfo();
    }, 10000);
    // leftGetAllListInfo();
  }

})

// 判断时间time是否在指定范围内
function isTimeInRange(time, timeStart, endTime) {
  const t = new Date(time).getTime();
  const start = new Date(timeStart).getTime();
  const end = new Date(endTime).getTime();

  return t >= start && t <= end;
}


const Innerwidth = ref(window.innerWidth);
const Innerheight = ref(window.innerHeight);
// const checkScreenSize = () => {
//   Innerwidth.value = window.innerWidth;
//   Innerheight.value = window.innerHeight;
//   //console.log("当前设备的尺寸:",Innerwidth.value,Innerheight.value);
// }

onBeforeMount(() => {
  Innerwidth.value = window.innerWidth;
  Innerheight.value = window.innerHeight - 40;

  // 获取本地存储的间隔时间
  const savedIntervalTime = local.local.get('globalIntervalTime')
  globalIntervalTime.value = savedIntervalTime || 3000;
  globalIntervalTimeTemp.value = globalIntervalTime.value

  // 获取本地存储的自动播放状态
  const savedAutoPlay = local.local.get('globaleAutoPlay')
  // //console.log('从本地存储获取的自动播放状态:', savedAutoPlay, typeof savedAutoPlay);

  // 确保布尔值正确处理
  if (savedAutoPlay !== undefined && savedAutoPlay !== null) {
    globaleAutoPlay.value = savedAutoPlay === true || savedAutoPlay === 'true' || savedAutoPlay === 1;
  } else {
    globaleAutoPlay.value = true; // 默认值
  }
  useAppStoreInstance.setGlobalLeftWssCONTINE(wss);
  // //console.log('最终设置的自动播放状态:', globaleAutoPlay.value, typeof globaleAutoPlay.value);
})
const messageHandler = ref('')
const errorDeviceListDetailsDialog = ref([])

const tempCount = ref(0)

watch(() => useAppStoreInstance.globalLeftWssCONTINE, val => {
  console.log("useAppStoreInstance.globalLeftWssCONTINE 60一次推过来", val);
  const JSONdata = val
  // console.log("useAppStoreInstance.globalLeftWssCONTINE", JSONdata,(JSONdata.type === 'history' && !(JSONdata?.isLagrangeInterpolation === true) ),JSONdata.type === 'realtime');
  if (JSONdata.type === 'history') {//历史模式
    // 卫星列表数据--------------------------------------------------------------------
    const satelliteList = []
    JSONdata.CurrData.forEach(items => {
      const temp = items.satelliteBasicInfoResponse
      temp.siteName = items?.currentGatewayAssociations || null
      satelliteList.push(temp)
    });
    primitiveSatelliteData.value = wssTransformSatelliteData(satelliteList)
    primitiveSatelliteData.value.sort((a, b) => {
      return a.name.localeCompare(b.name, undefined, {
        numeric: true,  // 启用数字排序
        sensitivity: 'base'  // 忽略大小写和重音符号
      });
    });
    satelliteData.value = primitiveSatelliteData.value
    // 卫星列表数据结束------------------------------------------------------------------------
    // 地面数据，上层数据回显------------------------------------------------------------------
    groundMetrics.value = wssTransformGroundSatelliteData(JSONdata.groundSystem)
    // 地面系统第二部分--地面站设备数量,设备故障情况数据---------------------------------------------------------------

    primitiveFaultData.value = []//故障情况数据，先清空再赋值，避免历史数据残留
    primitiveFaultData.value = wssTransformgroudSatelliteData(JSONdata.deviceFaultCondition)//设备故障数据
    faultData.value = primitiveFaultData.value
    // console.log("历史模式-此时的设备故障数据", primitiveFaultData.value);
    //信关站详情
    errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails
    //列表点击行的数据
    if (currentGroundEquipmentObj.value !== '') {
      //这代码屎上加屎，别怪我，怪第一个人，我不敢碰之前写的
      // 找到对应信关站的地面网元信息
      errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.groundNetworkElementResponses || []
      //  找到对应卫星名称
      satlTitle.value = currentGroundEquipmentObj.value.station ? currentGroundEquipmentObj.value.station : '未知名称'

      //天线基本信息  
      baseDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.crossDeviceExtractResponseList || []
    }

    primitiveEquipmentData.value = []//地面站设备数量数据，先清空再赋值，避免历史数据残留
    primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)//地面站设备数量
    //console.log("此时的equipment", primitiveEquipmentData.value);
    // console.log("历史模式--此时的地面站设备数量数据", primitiveEquipmentData.value);
    equipmentData.value = primitiveEquipmentData.value
    if (searchEquipmentValue.value !== '') {
      searchEquipmentList()//搜索框
    }

  }

  if (JSONdata.type === 'realtime') {//实时模式
    //卫星轨迹数据，实时模式下的wss数据结构和历史模式不太一样，历史模式是CurrData数组里套satelliteBasicInfoResponse对象，实时模式是CurrData数组里直接就是satelliteBasicInfoResponse对象
    const satelliteList = []

    JSONdata.CurrData?.forEach(items => {
      let temp = items.satelliteBasicInfoResponse || {}
      temp.siteName = items.siteName
      satelliteList.push(temp)
    });
    primitiveSatelliteData.value = wssTransformSatelliteData(satelliteList)//筛选卫星轨迹
    primitiveSatelliteData.value.sort((a, b) => {
      return a.name.localeCompare(b.name, undefined, {
        numeric: true,  // 启用数字排序
        sensitivity: 'base'  // 忽略大小写和重音符号
      });
    });
    satelliteData.value = primitiveSatelliteData.value
    //卫星轨迹数据结束----------
    // primitiveEquipmentData.value = equipmentData.value----------------------前面赋值后面就置空,无用
    // //console.log('我是left,type == history获取的wssRespone:',   JSONdata.groundStationDeviceCount);
    // 地面系统数据第一部分------------
    groundMetrics.value = wssTransformGroundSatelliteData(JSONdata.groundSystem)//地面系统

    // 地面系统第二部分--地面站设备数量,设备故障情况数据---------------------------------------------------------------
    primitiveFaultData.value = []//故障情况数据，先清空再赋值，避免历史数据残留
    primitiveFaultData.value = wssTransformgroudSatelliteData(JSONdata.deviceFaultCondition)//设备故障数据
    faultData.value = primitiveFaultData.value
    // console.log("此时的设备故障数据", primitiveFaultData.value);
    //点击列表表格一行时展示悬浮框数据---------------------------------
    errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails
    if (currentGroundEquipmentObj.value !== '') {
      //这代码屎上加屎，别怪我，怪第一个人，我不敢碰之前写的
      // 找到对应信关站的地面网元信息
      errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.groundNetworkElementResponses || []
      //  找到对应卫星名称
      satlTitle.value = currentGroundEquipmentObj.value.station ? currentGroundEquipmentObj.value.station : '未知名称'

      //天线基本信息  
      baseDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.crossDeviceExtractResponseList || []
    }



    primitiveEquipmentData.value = []//地面站设备数量数据，先清空再赋值，避免历史数据残留
    primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)//地面站设备数量
    // console.log("此时的地面站设备数量数据", primitiveEquipmentData.value);
    equipmentData.value = primitiveEquipmentData.value
    searchEquipmentList()//搜索函数,返回数据筛选时只用执行一次就行

  }
  tempCount.value++
}, { deep: true, immediate: true });


onMounted(() => {
})
onUnmounted(() => {
  if (messageHandler.value) {
    //console.log("移除socket的链接");

    // wss.removeEventListener('message', messageHandler.value);
  }

});

</script>

<style scoped>
/* 基础样式 */
.constellation-panel {
  /* background-color: #0a0f1e; */
  color: #e0e7ff;
  padding: 10px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 10px;
  overflow-y: auto;
  background-color: #010102;
  /* background-color: rgba(0, 0, 0, 0.2); */
}

/* 顶部容器 */
.header-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  gap: 5px;

  /* 方法1: 在定义变量时就计算好 */
  /* min-height: calc(((var(--InnerHeight)-20) / 3) * 1px); */


  /* background-color: #4e4ee7; */
}

/* 标题栏 */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

}

.header-decoration {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, transparent, #3b82f6, transparent);
  position: relative;
}

.header-decoration::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3b82f6;
}

.header-decoration::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3b82f6;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #93c5fd;
  padding: 0 20px;
  display: flex;
  align-items: center;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.panel-title::before,
.panel-title::after {
  content: "|";
  font-size: 12px;
  color: #3b82f6;
  /* margin: 0 100px; */
  text-shadow: none;
}

/* 核心数据指标 */
.core-metrics {
  display: flex;
  gap: 10px;
  width: 100%;
  /* padding:0 25px; */


}

.metric-card {
  height: 120%;
  flex: 1;
  background: linear-gradient(to bottom, rgba(46, 125, 255, 0.3), rgba(0, 0, 0, 0.8));
  border: 1px solid rgba(115, 116, 117, 0.3);
  padding: 0px 3px;
  text-align: center;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1), inset 0 0 10px rgba(59, 130, 246, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

/* 添加顶部渐变边框 */
.metric-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.93) 0%,
      rgba(0, 0, 0, 0.93) 40%,
      #2E7DFF 45%,
      #2E7DFF 60%,
      rgba(0, 0, 0, 0.93) 60%,
      transparent 100%);
}

.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(59, 130, 246, 0.2), inset 0 0 15px rgba(59, 130, 246, 0.1);
}

.metric-label {
  padding-top: 3px;
  font-size: 13.1px;
  color: #ffffff;
  font-weight: bold;
  /* margin-bottom: 8px; */
}

.metric-value {
  font-size: 16px;
  font-weight: bold;
  color: #e0f2fe;
  background-image: url("@/assets/images/lefts/bg_decor.png");
  background-size: cover;
  /* 或者 cover/auto */
  background-repeat: no-repeat;
  background-position: center;
  text-shadow: 0 0 15px rgba(59, 130, 246, 0.4);

}




:deep(.el-carousel__arrow:hover) {
  background: #2E7DFF;
  /* transform: scale(1.1); */
  /* box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); */
}





/* 轨道参数可视化 - 田字格样式 */
.orbit-visualization {
  background: rgba(0, 0, 0, 0.4);
  /* border: 1px solid rgba(59, 130, 246, 0.3); */
  border-radius: 8px;
  padding-top: 10px;
  flex: 1;
  /* height: 200px; */
  /* margin: 10px 0; */
}

.orbit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* gap: 2px; */
  height: 100%;

  background-image: url("@/assets/images/lefts/bg_orbit.png");
  background-size: cover;
  /* 或者 cover/auto */
  background-repeat: no-repeat;
  background-position: center;
}

.orbit-title {
  position: absolute;
  top: 42.2%;
  left: 35%;
  width: 100px;
  /* min-height: 25px; */
  background-image: url('@/assets/images/lefts/bg_orbit_title.png');
  background-size: 150% 100%;
  /* background-color: #22c55e; */
  /* 或者 cover/auto */
  background-repeat: no-repeat;
  background-position: center;
  z-index: 12;
}

.set_carousel {
  position: absolute;
  top: 0%;
  right: 3%;
  background-color: #000000;
}

:deep(.el-avatar) {
  background-color: #000000;
}


/* 设置项水平排列样式 */
.settings-content {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 16px;
  padding: 8px 0;
}

.setting-item {
  display: flex;
  /* align-items: center; */
  flex-direction: row;
  gap: 8px;
  flex: 1;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}

.setting-input {
  width: 100px;
}

.setting-checkbox {
  margin-right: 0;
}

.setting-checkbox :deep(.el-checkbox__label) {
  font-size: 12px;
  color: #94a3b8;
}

/* 调整弹窗内容布局 */
.demo-rich-conent {
  padding: 0;
}

:deep(.el-popover *) {
  background-color: #1a1a1a !important;
  border: none !important;
  /* border: 1px solid rgba(59, 130, 246, 0.3) !important; */
}

:deep(.el-popover .el-input__wrapper) {
  background-color: rgba(30, 41, 59, 0.6);
  /* border: 1px solid rgba(59, 130, 246, 0.2); */
}

:deep(.el-popover .el-input__inner) {
  color: #e0f2fe;
  font-size: 12px;
}











.set_carousel_text {
  background-color: none;
}

.orbit-title-text {
  /* padding: 25px 50px;  */
  padding-top: 3px;
  padding-bottom: 3px;

  font-size: 13px;
  text-align: center;
  justify-items: center;
  height: 100%;

}

.orbit-cell {
  /* background: rgba(15, 23, 42, 0.6); */
  /* border: 1px solid rgba(59, 130, 246, 0.2); */
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 20px; */
  /* padding: 8px; */
  transition: all 0.3s ease;


}

/* .orbit-cell:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
} */

/* .orbit-cell.top-left {
   border-bottom: 2px solid rgba(0, 0, 0, 0.92);
  border-image: linear-gradient(to right, 
    rgba(255, 255, 255, 0.93) 0%,
  rgba(255, 255, 255, 0.93) 3%,
  rgba(3, 3, 3, 0.193) 3%,
  rgba(255, 255, 255, 0.31) 70%,
  rgba(255, 255, 255, 0.21) 73%,
  rgba(255, 255, 255, 0.47)  85%,
  rgba(3, 3, 3, 0.193) 85%,
  rgba(3, 3, 3, 0.193) 100%) 1;
}

.orbit-cell.top-right {
  border-left: 2px solid rgba(0, 0, 0, 0.92);
  border-image: linear-gradient(to bottom, 
   rgba(255, 255, 255, 0.93) 0%,
  rgba(255, 255, 255, 0.93) 6%,
  rgba(3, 3, 3, 0.193) 6%,
  rgba(255, 255, 255, 0.31) 68%,
  rgba(255, 255, 255, 0.21) 71%,
  rgba(255, 255, 255, 0.47)  70%,
  rgba(3, 3, 3, 0.193) 80%,
  rgba(3, 3, 3, 0.193) 100%) 1;
}

.orbit-cell.bottom-left {
  border-right: 2px solid rgba(0, 0, 0, 0.92);
  border-image: linear-gradient(to top, 
  rgba(255, 255, 255, 0.93) 0%,
  rgba(255, 255, 255, 0.93) 6%,
  rgba(3, 3, 3, 0.193) 6%,
  rgba(255, 255, 255, 0.31) 60%,
  rgba(255, 255, 255, 0.21) 63%,
  rgba(255, 255, 255, 0.47)  74%,
  rgba(3, 3, 3, 0.193) 74%,
  rgba(3, 3, 3, 0.193) 100%) 1;
}

.orbit-cell.bottom-right {
  border-top: 2px solid rgba(0, 0, 0, 0.92);
  
  border-image: linear-gradient(to left, 
    rgba(255, 255, 255, 0.93) 0%,
  rgba(255, 255, 255, 0.93) 3%,
  rgba(3, 3, 3, 0.193) 3%,
  rgba(255, 255, 255, 0.31) 70%,
  rgba(255, 255, 255, 0.21) 73%,
  rgba(255, 255, 255, 0.47)  85%,
  rgba(3, 3, 3, 0.193) 85%,
  rgba(3, 3, 3, 0.193) 100%) 1;
} */

.orbit-label {
  font-size: 11px;
  color: #94a3b8;
  /* margin-bottom: 4px; */
  text-align: center;
}
















.orbit-dashboard {
  position: relative;
  height: 125px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1), inset 0 0 20px rgba(59, 130, 246, 0.05);
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px dashed rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
}

.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(15, 23, 42, 0.8) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), inset 0 0 10px rgba(59, 130, 246, 0.4);
  z-index: 2;
}

.satellite-model {
  font-size: 12px;
  color: #e0f2fe;
  text-align: center;
  font-weight: 500;
}

.orbit-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  background: rgba(15, 23, 42, 0.6);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.05);
}

/* .top-left {
  top: 10px;
  left: 40px;
} */

/* .top-right {
  top: 10px;
  right: 40px;
} */

.bottom-left {
  margin-top: 15px;
}

.bottom-right {
  margin-top: 15px;
}

.orbit-label {
  font-size: 10px;
  color: #b7b8b9;
  margin-bottom: 3px;
}

.orbit-value {
  font-size: 20px;
  color: #e0f2fe;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* 分隔线与标题 */
.section-divider {
  display: flex;
  align-items: center;
  /* margin: 0px 0 5px 0; */
  background-image: url('@/assets/images/lefts/bg_title.png');
  background-size: cover;
  /* 或者 cover/auto */
  background-repeat: no-repeat;
  background-position: center;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.3), transparent);
}

.section-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: 900;
  padding: 0 15px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* .section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #3b82f6;
  margin-right: 8px;
} */


.satellite-table-container {
  width: 100%;
  margin-top: 5px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.equipment-table-container {
  width: 100%;
  margin-top: 10px;
}

/* .i-table-wrapper{
  transform: scale(var(--scale));
  transform-origin: top left;
} */

/* :deep(.i-table-wrapper .el-table__header-wrapper .el-table__header) {} */

.margin-top-section {
  margin-top: 20px;
}

/* 表格样式 */
.table-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
  width: 100%;

}

.search-input {
  width: 100%;
  background: rgba(7, 7, 7, 0.95);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.search-input:focus-within {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.search-input :deep(.el-input__wrapper) {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.search-input :deep(.el-input__inner) {
  background-color: transparent;
  color: #e0f2fe;
  font-size: 12px;
  border: none;
  box-shadow: none;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: rgba(224, 231, 255, 0.7);
}

.search-input .el-input__inner {
  background: transparent;
  border: none;
  color: #e0f2fe;
  font-size: 12px;
  padding: 8px 10px;
}

.search-icon {
  color: #94a3b8;
}

.tableclass {
  width: 100%;
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  /* background-color: red; */
}

.custom-table {
  background: #000000;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  max-height: 170px;
  margin-right: 20px;
  min-height: 160px;
  /* height: 100% !important; */
  /* overflow-y: auto; */
  /* flex-shrink: 1; */
  /* font-size: 15px !important; */
}

.satellite-icon {
  width: 20px;
  height: 20px;
}

.custom-table-foot {
  max-height: 180px;
}

:deep(.errorRed),
:deep(.el-table .errorRed) {
  color: #EF5350 !important;
  font-size: 10px !important;
}

.satellite-icon_bottom {
  width: 15px;
  height: 15px;
}

/* .table-header1{
    max-height: 140px;
  overflow-y: auto; 
} */
:deep(.custom-table .el-table__header th) {
  background: #000000 !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
}

:deep(.custom-table .el-table__body td) {
  background-color: #000000 !important;
  color: #e2e8f0 !important;
  font-size: 11px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}



/* .custom-table .el-table__body tr:hover > td {
  background-color: rgba(40, 44, 51, 0.1) !important;
} */


/* 状态标签样式 */
.status-tag {
  background: #000000;
}

.el-tag {
  border: none;
  font-size: 10px;
}

.status-normal {
  /* background-color: rgba(34, 197, 94, 0.2); */
  color: #22c55e;
  /* border: 1px solid rgba(34, 197, 94, 0.3); */
}

.status-normal::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #22c55e;
}

.status-error {
  /* background-color: rgba(239, 68, 68, 0.2); */
  color: #ef4444;
  /* border: 1px solid rgba(239, 68, 68, 0.3); */
}

.status-error::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #ef4444;
}

.status-warning {
  /* background-color: rgba(234, 179, 8, 0.2); */
  color: #facc15;
  /* border: 1px solid rgba(234, 179, 8, 0.3); */
}

.status-warning::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #facc15;
}

/* 地面系统 */
.ground-system-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 130px;
  /* margin-bottom: 15px; */
  /* background-color: #22c55e; */
}

.ground-metric {
  /* background: rgba(30, 41, 59, 0.4); */
  /* border: 1px solid rgba(59, 130, 246, 0.3); */
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  transition: all 0.3s ease;
}


:deep(.el-table--fit .el-table__inner-wrapper:before) {
  width: calc(100%);
  background: black;
}



:deep(.el-table tr) {
  background: black;
  color: #ffffff;
}

:deep(.custom-table .el-table__body tr:hover) {
  background: linear-gradient(to right, #2c4f89 0%, rgb(0, 0, 0)) 100% !important;
}

:deep(.custom-table .el-table__body tr:hover td) {
  background: transparent !important;
}




.ground-label {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 3px;
  display: flex;
  /* align-items: left; */
}



.ground-value {
  font-size: 14px;
  font-weight: 700;
  color: #e0f2fe;
  margin-left: 10px;
}

/* 设备面板 */
.equipment-panel {
  margin-top: 15px;
}

.equipment-tabs {
  display: flex;
  /* gap: 5px; */
  margin-bottom: 10px;
  justify-content: center;
  text-align: center;
}

.equipment-tabs_header {
  width: 40px;
  padding: 10px;
  background-image: url('@/assets/images/lefts/UnionLeft.png');
  background-size: auto;
  /* 或者 cover/auto */
  background-repeat: no-repeat;
  background-position: center;
}

.equipment-tabs_end {
  width: 40px;
  padding-left: 30px;
  background-image: url('@/assets/images/lefts/UnionRight.png');
  background-size: auto;
  /* 或者 cover/auto */
  background-repeat: no-repeat;
  background-position: center;
}

.equipment-tab {
  padding: 5px 0px;
  font-size: 12px;
  /* border-radius: 4px; */
  cursor: pointer;
  width: 150px;
  background: #373737;
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #94a3b8;
  transition: all 0.3s ease;

}

.equipment-tab:hover {
  background: rgba(82, 114, 165, 0.6);
}

.equipment-tab.active {
  background: linear-gradient(to bottom, rgba(68, 136, 245, 0.8), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #e0f2fe;
}


/* 在您的样式部分添加 */
/* :deep(.custom-error-dialog .el-overlay) {
  z-index: 1000 !important;
}

:deep(.custom-error-dialog .el-dialog) {
  z-index: 1001 !important;
} */

:deep(.el-dialog) {
  position: absolute;
  bottom: 10px;
  left: 400px;
  /* z-index: 1001 !important; */
}

/* 左侧边栏滚动条美化 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #535353, #535353);

  border-radius: 2px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.4), rgba(96, 165, 250, 0.6));
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

/* Firefox滚动条 */
.fixed-aside .aside-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.5) rgba(15, 23, 42, 0.3);
}

/* Firefox滚动条 */
.fixed-aside .aside-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.5) rgba(15, 23, 42, 0.3);
}

:deep(.setting-item) {
  background-color: #1C212B;
}

:deep(.el-input) {
  border: 1px solid #1C212B;
}

:deep(.is-disabled) {
  background: #1C212B;
}

:deep(.el-input__wrapper) {
  background-color: #1C212B;
  /* box-shadow: 0 0 1px #bfc1c4; */
}

:deep(.is-disabled .el-input__wrapper) {
  background-color: #1C212B;
}

:deep(.el-input__wrapper .el-input__inner) {
  background-color: #1C212B;
  color: #fff;
}

:deep(.el-input__inner) {
  background-color: #1C212B;
  color: #fff;
  /* border: 1px solid #3B82F6; */
}

.setting-item {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  padding: 8px 0;
}

.setting-label {
  color: #fff;
  margin-right: 10px;
}

.setting-input {
  background-color: #1C212B;
  color: #fff;
  box-shadow: none;
  border: 1px solid #434a54;
  border-radius: 4px;
}

.setting-input :deep(.el-input__inner) {
  background-color: #1C212B;
  color: #fff;
  border-color: #434a54;

}

:deep(.setting-input .el-input__wrapper) {
  box-shadow: none;
  border: none;
}

:deep(.setting-input .el-input__wrapper .el-input__inner) {
  box-shadow: none;
  border: none;
}

.setting-checkbox {
  margin-left: 10px;
}

.satellite-section,
.ground-system-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.carouselClass) {
  height: 100%;
  min-height: 120px;
}

:deep(.el-carousel__container) {
  height: 100% !important;
  min-height: 120px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .core-metrics {
    flex-direction: column;
  }

  .ground-system-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .orbit-item {
    padding: 5px 10px;
  }

  .top-left,
  .top-right,
  .bottom-left,
  .bottom-right {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}
</style>