<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" height="180px" :loop="true"
          :autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
          <el-carousel-item v-for="indexs in 2" :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>

        <el-table :data="satelliteData" size="small" height="170px" class="custom-table">
          <el-table-column prop="" label="" width="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="80" align="center"></el-table-column>
          <el-table-column prop="station" label="当前连接" width="80" align="center">
            <template #default="scope">
              <!-- {{typeof scope.row.station }} -->

              <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="80" align="center"></el-table-column>
          <el-table-column prop="status" label="当前状态" width="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 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>

          <el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small" height="160px"
            @row-click="tableHandleRowClickFn" class="custom-table custom-table-foot ">
            <el-table-column prop="" label="" width="23">
              <template #default="">
                <img src='@/assets/images/lefts/info.png' alt="" class="satellite-icon_bottom">
              </template>
            </el-table-column>
            <el-table-column prop="station" label="地面站名称" row-class-name="hover-row" width="95"></el-table-column>
            <el-table-column label="KU天线" width="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="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="62" 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="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-column prop="core" label="核心网"  width="52" v-if="activeTab === 'equipment'" align="center"></el-table-column> -->

            <!-- 故障情况表格列 -->
            <!-- <el-table-column prop="total" label="总故障数" width="62" v-if="activeTab === 'fault'"
              align="center"></el-table-column>
            <el-table-column prop="serious" label="严重故障" width="62" v-if="activeTab === 'fault'"
              align="center"></el-table-column>
            <el-table-column prop="general" label="一般故障" width="60"   v-if="activeTab === 'fault'"
              align="center"></el-table-column>
            <el-table-column prop="minor" label="轻微故障" width="60" v-if="activeTab === 'fault'" align="center"></el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>


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

      <errorDialog :errorDeviceList="errorDeviceList" :satlTitle="satlTitle" :baseDeviceList="baseDeviceList"
        @errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
    </el-dialog>


  </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 { ElMessage } from 'element-plus';
import { da } from 'element-plus/es/locales.mjs';
const useAppStoreInstance = useAppStore();

// 激活的标签页
const activeTab = ref('equipment');
const errorDialogVisible = ref(false);
const coreMetrics = ref([
  // { label: '在轨卫星数', value: '36' },
]);

// const intervalInSeconds = computed({
//   get: () => useAppStoreInstance.globalIntervalTime / 1000,
//   set: (val) => {
//     const numVal = Number(val);
//     //console.log("计算数学",val);

//     if (!isNaN(numVal)) {
//       useAppStoreInstance.setglobalIntervalTime(numVal * 1000);
//     }
//   }
// });
const globalIntervalTime = ref('')
const globalIntervalTimeTemp = ref('')
const globaleAutoPlay = ref(true)
const carouselKey = ref(0)



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("yongdainji");
  activeTab.value = value
  if (!useAppStoreInstance.globalStartWss) {

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

        faultData.value = primitiveFaultData.value
        if (searchEquipmentValue.value !== '') {
          searchEquipmentList()
        }
      })
    }
    if (value === 'equipment') {
      siteDataInfoListApi().then(res => {
        //console.log(res.data, "s---------a");
        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() {
  console.log("拿到的数据", primitiveSatelliteData.value);

  const filteredData = primitiveSatelliteData.value.filter(item =>
    item.name.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
    item.station.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
    item.manufacturer.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
    item.status.toLowerCase().includes(searchSateValue.value.toLowerCase())
  );
  console.log(filteredData);
  satelliteData.value = filteredData
}

// 地面设备数据
const primitiveEquipmentData = ref([
  // { station: '上海站', ku: 12, qv: 5, monitor: 2, baseband: 2, core: 2 },
  // { station: '南宁站', ku: 12, qv: 5, monitor: 2, baseband: 2, core: 1 },
  // { station: '新疆站', ku: 12, qv: 5, monitor: 1, baseband: 2, core: 2 },
  // { station: '辽宁站', ku: 12, qv: 5, monitor: 2, baseband: 2, core: 2 },
  // { station: '上海站', ku: 12, qv: 5, monitor: 2, baseband: 2, core: 2 },
  // { station: '南宁站', ku: 12, qv: 5, monitor: 2, baseband: 2, core: 1 },
  // { station: '新疆站', ku: 12, qv: 5, monitor: 1, baseband: 2, core: 2 },
  // { station: '辽宁站', ku: 12, qv: 5, monitor: 2, baseband: 2, core: 2 },
])
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') {
    const 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())

    )
    faultData.value = filteredData
  }

}


// 故障情况数据
const primitiveFaultData = ref([

]);
const faultData = ref(primitiveFaultData.value);

const baseDeviceList = ref({})
const satlTitle = ref('')

function tableHandleRowClickFn(row, column, event) {

  if (activeTab.value === 'fault') {
    // ElMessage.error('故障面板正在开启！')
    errorDialogVisible.value = true
    errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === row.siteId)[0]?.groundNetworkElementResponses || []
    // //console.log("11111EIRP111111row", row);

    satlTitle.value = row.station ? row.station : '未知名称'
    baseDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === row.siteId)[0]?.crossDeviceExtractResponseList || []
    //console.log('11111EIRP111111row过滤数据:',errorDeviceListDetailsDialog.value);
    // ElMessage.success('点击了行：' + String(JSON.stringify({
    //         type:"DeviceFaultDialog",
    //         status:"open"
    //       })))
    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 不是对象也不是数组，返回空数组

};

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
    // //console.log("4545",primitiveSatelliteData.value ,primitiveSatelliteData.value.length);
  })
  siteDataInfoListApi().then(res => {
    // //console.log(res,"sasa1111111sasa");
    equipmentData.value = transformgroudSatelliteData(res.data)
    primitiveEquipmentData.value = equipmentData.value

    // groundSatelliteData.value = primitiveGroundSatelliteData.value
  })

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

  })
};

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 => {
  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)
    });

    //console.log("我走了这里", satelliteList);

    primitiveSatelliteData.value = wssTransformSatelliteData(satelliteList)
    primitiveSatelliteData.value.sort((a, b) => {
      return a.name.localeCompare(b.name, undefined, {
        numeric: true,  // 启用数字排序
        sensitivity: 'base'  // 忽略大小写和重音符号
      });
    });
    //console.log("cao cao2,", primitiveSatelliteData.value,);

    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("此时的fault", primitiveFaultData.value);
    if (searchEquipmentValue.value !== '') {
      searchEquipmentList()
    }
    errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails

    primitiveEquipmentData.value = []
    primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
    //console.log("此时的equipment", primitiveEquipmentData.value);

    equipmentData.value = primitiveEquipmentData.value
    if (searchEquipmentValue.value !== '') {
      searchEquipmentList()
    }

  }

  if (JSONdata.type === 'realtime') {

    console.log("11111EIRP111111rowrealtime");

    const satelliteList = []
    JSONdata.CurrData.forEach(items => {
      const 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'  // 忽略大小写和重音符号
      });
    });
    //console.log("cao cao2,", primitiveSatelliteData.value,);

    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("此时的fault", primitiveFaultData.value);
    // if (searchEquipmentValue.value !== '') {
    // searchEquipmentList()
    // }


    // primitiveEquipmentData.value = []
    // primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
    //   //console.log("此时的equipment", primitiveEquipmentData.value);

    //   equipmentData.value = primitiveEquipmentData.value
    //   if (searchEquipmentValue.value !== '') {
    //     searchEquipmentList()
    //   }

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


onMounted(() => {
  // (useAppStoreInstance.globalLeftWssCONTINE).onmessage = (event) => {
  //   const JSONdata = JSON.parse(event.data);
  //   //console.log("我走了onMounted", JSONdata.type === 'history', !(JSONdata?.isLagrangeInterpolation === true));

  //   if (JSONdata.type === 'history' && !(JSONdata?.isLagrangeInterpolation === true) && (JSONdata.groundSystem !== undefined)) {
  //     const satelliteList = []
  //     JSONdata.CurrData.forEach(items => {
  //       const temp = items.satelliteBasicInfoResponse

  //       temp.siteName = items?.currentGatewayAssociations || null


  //       satelliteList.push(temp)
  //     });

  //     //console.log("我走了这里", satelliteList);

  //     primitiveSatelliteData.value = wssTransformSatelliteData(satelliteList)
  //     primitiveSatelliteData.value.sort((a, b) => {
  //       return a.name.localeCompare(b.name, undefined, {
  //         numeric: true,  // 启用数字排序
  //         sensitivity: 'base'  // 忽略大小写和重音符号
  //       });
  //     });
  //     //console.log("cao cao2,", primitiveSatelliteData.value,);

  //     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("此时的fault", primitiveFaultData.value);
  //     if (searchEquipmentValue.value !== '') {
  //       searchEquipmentList()
  //     }
  //     errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails

  //     primitiveEquipmentData.value = []
  //     primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
  //     //console.log("此时的equipment", primitiveEquipmentData.value);

  //     equipmentData.value = primitiveEquipmentData.value
  //     if (searchEquipmentValue.value !== '') {
  //       searchEquipmentList()
  //     }

  //   }

  //   if (JSONdata.type === 'realtime') {

  //     //console.log("11111EIRP111111rowrealtime");

  //     const satelliteList = []
  //     JSONdata.CurrData.forEach(items => {
  //       const 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'  // 忽略大小写和重音符号
  //       });
  //     });
  //     //console.log("cao cao2,", primitiveSatelliteData.value,);

  //     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("此时的fault", primitiveFaultData.value);
  //     // if (searchEquipmentValue.value !== '') {
  //     // searchEquipmentList()
  //     // }


  //     // primitiveEquipmentData.value = []
  //     // primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
  //     //   //console.log("此时的equipment", primitiveEquipmentData.value);

  //     //   equipmentData.value = primitiveEquipmentData.value
  //     //   if (searchEquipmentValue.value !== '') {
  //     //     searchEquipmentList()
  //     //   }

  //   }

  //   // //console.log('我是left,type !!!= history获取的wssRespone:', JSONdata, typeof JSONdata.satelliteList);
  //   // 在这里处理您的业务逻辑
  // };

  // (useAppStoreInstance.globalLeftWssCONTINE).addEventListener('message', messageHandler.value);
  // //console.log("组件挂载时的自动播放状态:", wss);
})
onUnmounted(() => {
  if (messageHandler.value) {
    //console.log("移除socket的链接");

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

});

</script>

<style scoped>
/* 基础样式 */
.constellation-panel {
  /* background-color: #0a0f1e; */
  color: #e0e7ff;
  padding: 15px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  background-color: #010102;

}

/* 顶部容器 */
.header-container {
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* 方法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;
  /* 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: 20px;
  overflow: hidden;
}

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

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

/* 表格样式 */
.table-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  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;
}

.custom-table {
  background: #000000;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  max-height: 170px;
  overflow-y: auto;
  margin-right: 20px;
  /* 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;
}


/* 响应式调整 */
@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>