<template>
  <div class="container">
    <div class="container-title">
      <div class="title-left"></div>
      <!--      <div class="title-center">设备状态监测</div>-->
      <div class="title-right"></div>
      <!-- 风险提示显示区域 -->
      <div class="risk-reminder" v-if="riskCount > 0" @click="showRiskDetails">
        <i class="icon-risk-warning"></i>
        <span class="risk-count">{{ riskCount }}</span>
        <span class="risk-text">风险提示</span>
      </div>
    </div>
    <div class="container-content">
      <div class="panel-group left-panel">
        <div class="panel-card status-card">
          <div class="card-header">
            <i class="icon-status"></i>
            <span>设备状态统计</span>
          </div>
          <div class="card-content">
            <div class="status-chart" ref="statusChart"></div>
          </div>
        </div>

        <div class="panel-card category-card">
          <div class="card-header">
            <i class="icon-category"></i>
            <span>设备分类统计</span>
          </div>
          <div class="card-content">
            <div class="category-chart" ref="categoryChart"></div>
          </div>
        </div>

        <!-- 故障信息面板 - 布满左下角 -->
        <div class="panel-card fault-info-card full-height">
          <div class="card-header">
            <i class="icon-fault-info"></i>
            <span>设备故障信息</span>
            <span class="fault-count-badge" v-if="faultInfoList.length > 0">{{ faultInfoList.length }}</span>
          </div>
          <div class="card-content">
            <div class="fault-info-list">
              <div class="fault-info-item" v-for="(item, index) in displayedFaultInfoList" :key="index">
                <div class="fault-info-header">
                  <div class="fault-info-title">{{ item.deviceName }}</div>
                  <div class="fault-info-status" :class="getFaultStatusClass(item.status)">
                    {{ getFaultStatusText(item.status) }}
                  </div>
                </div>
                <div class="fault-info-content">
                  <div class="fault-info-row">
                    <span class="fault-info-label">检测项:</span>
                    <span class="fault-info-value">{{ item.itemName }}</span>
                  </div>
                  <div class="fault-info-row">
                    <span class="fault-info-label">位置:</span>
                    <span class="fault-info-value">{{ item.location }}</span>
                  </div>
                </div>
              </div>
              <div class="no-fault-data" v-if="displayedFaultInfoList.length === 0">
                <i class="icon-no-fault"></i>
                <p>暂无故障信息</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-group center-panel">
        <div class="panel-card device-monitor-card">
          <div class="card-header">
            <i class="icon-monitor"></i>
            <span>设备实时状态监控</span>
          </div>
          <div class="card-content">
            <div class="device-grid">
              <div
                class="device-item"
                :class="getDeviceStatusClass(item.status)"
                v-for="(item, index) in displayedScheduleItems"
                :key="index"
              >
                <div class="device-number">{{ item.number }}</div>
                <div class="device-status">{{ item.status }}</div>
                <div class="device-name">{{ item.deviceName }}</div>
                <div class="device-location">{{ item.location }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="panel-card device-detail-card">
          <div class="card-header">
            <i class="icon-detail"></i>
            <span>设备状态详情</span>
          </div>
          <div class="card-content center-content">
            <div class="table-container">
              <div class="table-header">
                <div class="table-cell">序号</div>
                <div class="table-cell">设备名称</div>
                <div class="table-cell">设备编号</div>
                <div class="table-cell">位置</div>
                <div class="table-cell">状态</div>
                <div class="table-cell">未处理风险</div>
              </div>
              <div class="table-row" v-for="(item, index) in displayedTableItems" :key="index">
                <div class="table-cell">{{ tableStartIndex + index + 1 }}</div>
                <div class="table-cell">{{ item.deviceName }}</div>
                <div class="table-cell">{{ item.deviceCode }}</div>
                <div class="table-cell">{{ item.location }}</div>
                <div class="table-cell" :class="getStatusClass(item.status)">
                  {{ getStatusText(item.status) }}
                </div>
                <div class="table-cell">{{ item.count }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-group right-panel">
        <div class="panel-card power-card">
          <div class="card-header">
            <i class="icon-power"></i>
            <span>设备能耗统计</span>
          </div>
          <div class="card-content">
            <div class="power-chart" ref="powerChart"></div>
          </div>
        </div>

        <div class="panel-card risk-card">
          <div class="card-header">
            <i class="icon-risk"></i>
            <span>设备风险监测</span>
          </div>
          <div class="card-content">
            <div class="risk-list">
              <div class="risk-item" v-for="(item, index) in displayedRankingItems" :key="index">
                <div class="risk-rank" :class="getRiskRankClass(index)">{{ rankingStartIndex + index + 1 }}</div>
                <div class="risk-name">{{ item.deviceName }}</div>
                <div class="risk-count">风险数：{{ item.count }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 风险详情模态框 -->
    <div class="risk-modal" v-if="showRiskModal" @click="closeRiskModal">
      <div class="risk-modal-content" @click.stop>
        <div class="risk-modal-header">
          <h3>风险详情</h3>
          <span class="close" @click="closeRiskModal">&times;</span>
        </div>
        <div class="risk-modal-body">
          <div class="risk-item-detail" v-for="(risk, index) in riskList" :key="index">
            <div class="risk-item-header">
              <div class="risk-item-title">{{ risk.deviceName }}</div>
              <div class="risk-item-date">{{ risk.time }}</div>
            </div>
            <div class="risk-item-content">
              <div class="risk-item-row">
                <div class="risk-item-label">风险类型:</div>
                <div class="risk-item-value">{{ risk.testItem }}</div>
              </div>
              <div class="risk-item-row">
                <div class="risk-item-label">风险内容:</div>
                <div class="risk-item-value">{{ risk.remind }}</div>
              </div>
              <div class="risk-item-row">
                <div class="risk-item-label">处理建议:</div>
                <div class="risk-item-value">{{ risk.suggest }}</div>
              </div>
            </div>
          </div>
          <div class="no-risk-data" v-if="riskList.length === 0">
            暂无风险数据
          </div>
        </div>
      </div>
    </div>

    <risk-item-data-v-from
      ref="riskDataVModel"
      :is-modal-visible="this.isModalVisible"
      :right6DeviceId="this.right6DeviceId"
    ></risk-item-data-v-from>
  </div>
</template>

<script>import * as echarts from 'echarts'
import 'echarts-gl'
import good from '@/assets/bcicon/good.png'
import fault from '@/assets/bcicon/fault.png'
import rowbg from '@/assets/bcicon/rowbg.png'
import { getAction } from "@api/manage";
import RiskItemDataVFrom from "@views/dashboard/riskItemDataVFrom.vue";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { mixinDevice } from "@/utils/mixin";

export default {
  mixins: [JeecgListMixin, mixinDevice],
  components: { RiskItemDataVFrom },
  data() {
    return {
      time: '',
      loading: false,
      url: {
        list: "/device/buDevice/getAllDeviceStatus",
        getAllPower: "device/buDeviceRunTime/devicePowerStatistics",
        getDevicePower: "/bigScreen/getDeviceTypeEnergy", // 修改为使用新的能耗接口
        getAllFaultData: "/bigScreen/getAllFaultData", // 获取所有风险数据
        getFaultDataNumber: "/bigScreen/getFaultDataNumber", // 获取风险数据数量
        queryRiskItemValue: "/device/buRiskItemValue/queryRiskItemValue" // 添加故障信息接口
      },
      form: {
        startNumber: 1,
        endNumber: 12,
      },
      legendData: ['运行时长', '待机时长'],
      oneData: [],
      twoData: [],
      threeData: [],
      positionList: [],
      right6DeviceId: "",
      isModalVisible: false,
      isHovering: false,
      good,
      fault,
      rowbg,
      showTitle: true,
      mainLocations: ['燃系检修线', '电机轮对库', '柴油机检修库'],

      warningMessages: [],
      displayedScheduleItems: [],
      scheduleItemsStartIndex: 0,
      scheduleItemsTimer: null,
      statusChart: null,
      categoryChart: null,
      powerChart: null,
      sortedDevices: [],
      faultCount: 0,
      runningCount: 0,
      standbyCount: 0,

      displayedTableItems: [],
      tableStartIndex: 0,
      tableItemsTimer: null,
      tablePageSize: 10,

      displayedRankingItems: [],
      rankingStartIndex: 0,
      rankingItemsTimer: null,
      rankingPageSize: 12,

      // 风险提示相关数据
      riskCount: 0,
      riskList: [],
      riskTimer: null,
      showRiskModal: false,

      // 故障信息相关数据
      faultInfoList: [], // 存储所有故障信息
      displayedFaultInfoList: [], // 存储当前显示的故障信息
      faultInfoTimer: null, // 故障信息定时器
      faultInfoStartIndex: 0, // 故障信息轮播起始索引
      faultInfoPageSize: 8, // 每页显示的故障信息数量

      // 添加轮播相关的数据属性
      powerChartTimer: null,
      powerChartPageIndex: 0,
      powerChartPageSize: 5,

      // 定时器用于定期获取设备状态
      deviceStatusTimer: null,

      // deviceStatusTimer - 设备状态更新定时器：10000毫秒（10秒）
      // scheduleItemsTimer - 设备实时状态监控轮播定时器：3000毫秒（3秒）
      // tableItemsTimer - 设备状态详情表格轮播定时器：3000毫秒（3秒）
      // rankingItemsTimer - 设备风险监测列表轮播定时器：10000毫秒（10秒）
    }
  },
  mounted() {
    this.get();
    this.getNowTime(true);
    // 设置定时器，每30秒获取一次设备状态
    this.deviceStatusTimer = setInterval(() => {
      console.log("设备状态定时器触发");
      this.getDeviceStatus();
    }, 3000);

    // 设置定时器，定期检查风险数据更新
    this.riskTimer = setInterval(() => {
      console.log("风险数据定时器触发");
      this.loadRiskData();
    }, 3000);

    // 设置定时器，定期获取故障信息
    this.faultInfoTimer = setInterval(() => {
      console.log("故障信息定时器触发，当前故障信息数量:", this.faultInfoList.length);
      this.loadFaultInfoData();
    }, 1800); // 每8秒执行一次

    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    if (this.statusChart) {
      this.statusChart.dispose();
    }
    if (this.categoryChart) {
      this.categoryChart.dispose();
    }
    if (this.powerChart) {
      this.powerChart.dispose();
    }

    if (this.scheduleItemsTimer) {
      clearInterval(this.scheduleItemsTimer);
      this.scheduleItemsTimer = null;
    }

    if (this.tableItemsTimer) {
      clearInterval(this.tableItemsTimer);
      this.tableItemsTimer = null;
    }

    if (this.rankingItemsTimer) {
      clearInterval(this.rankingItemsTimer);
      this.rankingItemsTimer = null;
    }

    // 清除设备状态定时器
    if (this.deviceStatusTimer) {
      clearInterval(this.deviceStatusTimer);
      this.deviceStatusTimer = null;
    }

    // 清除风险检查定时器
    if (this.riskTimer) {
      clearInterval(this.riskTimer);
      this.riskTimer = null;
    }

    // 清除故障信息定时器
    if (this.faultInfoTimer) {
      clearInterval(this.faultInfoTimer);
      this.faultInfoTimer = null;
    }

    // 清理能耗图表轮播定时器
    if (this.powerChartTimer) {
      clearInterval(this.powerChartTimer);
      this.powerChartTimer = null;
    }

    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    getNowTime(isAll) {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let today = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      let nowTime = ''
      if (isAll) {
        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' + this.fillZero(minute) + ':' + this.fillZero(second)
      } else {
        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today)
      }
      this.time = nowTime;
      return nowTime
    },

    // 处理窗口大小变化
    handleResize() {
      // 根据窗口大小调整表格每页显示数量
      const width = window.innerWidth;

      if (width <= 768) {
        this.tablePageSize = 5;
        this.rankingPageSize = 6;
        this.powerChartPageSize = 3;
        this.faultInfoPageSize = 5;  // 小屏幕显示5个故障信息
      } else if (width <= 1024) {
        this.tablePageSize = 7;
        this.rankingPageSize = 8;
        this.powerChartPageSize = 4;
        this.faultInfoPageSize = 8;  // 中等屏幕显示8个故障信息
      } else {
        this.tablePageSize = 10;
        this.rankingPageSize = 12;
        this.powerChartPageSize = 5;
        this.faultInfoPageSize = 12; // 大屏幕显示12个故障信息
      }

      // 重新初始化图表
      this.$nextTick(() => {
        if (this.statusChart) {
          this.statusChart.resize();
        }
        if (this.categoryChart) {
          this.categoryChart.resize();
        }
        if (this.powerChart) {
          this.powerChart.resize();
        }
      });

      // 重新启动故障信息轮播以适应新的页面大小
      this.startFaultInfoCarousel();
    },

    // 加载风险数据
    loadRiskData() {
      // 获取风险总数
      getAction(this.url.getFaultDataNumber, {}).then((res) => {
        if (res.success) {
          // 如果风险数量发生变化，则重新加载风险列表
          if (this.riskCount !== res.result) {
            this.riskCount = res.result;
            this.loadAllRisk();
          }
        }
      });
    },

    // 获取所有风险数据
    loadAllRisk() {
      getAction(this.url.getAllFaultData, {}).then((res) => {
        if (res.success) {
          if (res.result && res.result.length > 0) {
            // 去重处理
            const uniqueArr = res.result.filter((item, index, self) => {
              return self.findIndex((x) => x.testItem === item.testItem && x.deviceId === item.deviceId) === index;
            });

            this.riskCount = uniqueArr.length;
            this.riskList = uniqueArr;
          } else {
            this.riskCount = 0;
            this.riskList = [];
          }
        }
      });
    },

    // 显示风险详情
    showRiskDetails() {
      this.showRiskModal = true;
    },

    // 关闭风险详情模态框
    closeRiskModal() {
      this.showRiskModal = false;
    },

    // 添加能耗图表轮播方法
    startPowerChartCarousel() {
      if (this.powerChartTimer) {
        clearInterval(this.powerChartTimer);
        this.powerChartTimer = null;
      }

      // 如果设备数量小于等于每页显示数量，则不需要轮播
      if (this.positionList.length <= this.powerChartPageSize) {
        return;
      }

      this.powerChartTimer = setInterval(() => {
        this.powerChartPageIndex = (this.powerChartPageIndex + 1) %
          Math.ceil(this.positionList.length / this.powerChartPageSize);
        this.updatePowerChart();
      }, 5000); // 每5秒轮播一次
    },

    updatePowerChart() {
      // 计算当前页的设备数据
      const startIndex = this.powerChartPageIndex * this.powerChartPageSize;
      const endIndex = Math.min(startIndex + this.powerChartPageSize, this.positionList.length);
      const currentPageDevices = this.positionList.slice(startIndex, endIndex);

      const deviceNames = currentPageDevices.map(item => item.deviceName || '未知设备');
      // 使用实际功率数据，如果没有则显示0
      const powerData = currentPageDevices.map(item => {
        if (typeof item.power !== 'undefined' && item.power !== null) {
          return parseFloat(item.power) || 0;
        } else {
          return 0; // 没有能耗数据时显示0
        }
      });

      // 更新图表数据
      if (this.powerChart) {
        const powerOption = {
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: 'rgba(16, 36, 63, 0.9)',
            textStyle: {
              color: '#fff'
            },
            formatter: params => {
              return params[0].name + '<br/>' +
                params[0].marker + ' 能耗: ' + params[0].value + ' kW·h';
            }
          },
          legend: {
            data: ['能耗'],
            textStyle: {
              color: '#a0d3ff'
            },
            top: '5%'
          },
          xAxis: {
            type: 'category',
            data: deviceNames,
            axisLabel: {
              color: '#a0d3ff',
              fontSize: 10,
              interval: 0,
              rotate: 45
            },
            axisLine: {
              lineStyle: {
                color: '#1a3a6a'
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            name: '能耗(kW·h)',
            nameTextStyle: {
              color: '#a0d3ff'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#a0d3ff'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(26, 58, 106, 0.3)'
              }
            }
          },
          series: [{
            name: '能耗',
            type: 'bar',
            data: powerData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#177cb0' }
              ]),
              borderRadius: [4, 4, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            barWidth: '60%',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.1)',
              borderRadius: [4, 4, 0, 0]
            }
          }]
        };
        this.powerChart.setOption(powerOption, { notMerge: true });
      }
    },

    fillZero(str) {
      let realNum;
      if (str < 10) {
        realNum = '0' + str;
      } else {
        realNum = str;
      }
      return realNum;
    },

    showModal(index, value, event) {
      if (event) {
        event.stopPropagation();
      }

      if (this.tableItemsTimer) {
        clearInterval(this.tableItemsTimer);
        this.tableItemsTimer = null;
      }

      this.num = index
      this.right6DeviceId = value.id;
      this.isModalVisible = true;

      this.$nextTick(() => {
        this.startTableItemsCarousel();
      });
    },


    get() {
      this.loading = true;
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          console.log("获取设备列表成功，数据:", res.result);
          this.positionList = res.result.map(item => {
            return {
              ...item,
              isActive: false,
            };
          })
          console.log("处理后的positionList:", this.positionList);

          this.updateStatistics();

          this.$nextTick(() => {
            this.initCharts();
          });

          this.startScheduleItemsCarousel();
          this.startRankingItemsCarousel();
          this.startTableItemsCarousel();
          this.startFaultInfoCarousel(); // 启动故障信息轮播

          // 加载风险数据
          this.loadAllRisk();

          // 立即获取一次故障信息
          setTimeout(() => {
            console.log("初始化后立即获取故障信息");
            this.loadFaultInfoData();
          }, 1000);

          // 立即获取设备能耗数据
          setTimeout(() => {
            console.log("初始化后立即获取设备能耗数据");
            this.loadAllDevicePowerData();
          }, 1500);
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false;
      })
    },


    // 定时获取设备状态的方法
    getDeviceStatus() {
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          console.log("定时获取设备列表成功，数据:", res.result);
          this.positionList = res.result.map(item => {
            return {
              ...item,
              isActive: false,
            };
          })
          console.log("处理后的positionList:", this.positionList);

          this.updateStatistics();

          // 重新初始化图表
          this.$nextTick(() => {
            if (this.statusChart) {
              this.statusChart.dispose();
            }
            if (this.categoryChart) {
              this.categoryChart.dispose();
            }
            if (this.powerChart) {
              this.powerChart.dispose();
            }
            this.initCharts();
          });

          // 设备状态更新后也更新故障信息
          setTimeout(() => {
            console.log("设备状态更新后获取故障信息");
            this.loadFaultInfoData();
          }, 1000);

          // 设备状态更新后也更新能耗信息
          setTimeout(() => {
            console.log("设备状态更新后获取能耗信息");
            this.loadAllDevicePowerData();
          }, 1500);
        }
      })
    },

    updateStatistics() {
      this.faultCount = this.positionList.filter(item => item.status === '3').length;
      this.runningCount = this.positionList.filter(item => item.status === '2').length;
      this.standbyCount = this.positionList.filter(item => item.status === '1').length;

      this.warningMessages = this.positionList
        .filter(item => item.status && item.status !== '0')
        .map(item => {
          return {
            content: `${item.deviceName}：${this.getStatusText(item.status)}`,
            location: item.location || '未知'
          }
        })
        .slice(0, 6);

      this.scheduleItems = this.positionList.map((item, index) => {
        const number = (index + 1).toString().padStart(2, '0');

        return {
          number: number,
          status: this.getStatusText(item.status),
          deviceName: item.deviceName || '未知',
          location: item.location || '未知'
        }
      })
        .sort((a, b) => {
          return a.number.localeCompare(b.number, undefined, {numeric: true});
        });

      this.updateDisplayedScheduleItems();

      this.sortedDevices = [...this.positionList].sort((a, b) => {
        return b.count - a.count;
      });

      this.updateDisplayedRankingItems();
      this.updateDisplayedTableItems();
    },

    updateDisplayedRankingItems() {
      const totalItems = this.sortedDevices.length;
      if (totalItems <= this.rankingPageSize) {
        this.displayedRankingItems = [...this.sortedDevices];
        return;
      }

      this.displayedRankingItems = [];
      for (let i = 0; i < this.rankingPageSize; i++) {
        const index = (this.rankingStartIndex + i) % totalItems;
        this.displayedRankingItems.push(this.sortedDevices[index]);
      }
    },

    getRiskRankClass(index) {
      switch (index) {
        case 0:
          return 'rank-first';
        case 1:
          return 'rank-second';
        case 2:
          return 'rank-third';
        default:
          return 'rank-other';
      }
    },

    getDeviceStatusClass(status) {
      switch (status) {
        case '运行':
          return 'device-running';
        case '待机':
          return 'device-standby';
        case '故障':
          return 'device-fault';
        case '停机':
          return 'device-stop';
        default:
          return 'device-default';
      }
    },

    updateDisplayedScheduleItems() {
      const totalItems = this.scheduleItems.length;
      if (totalItems <= 12) {
        this.displayedScheduleItems = [...this.scheduleItems];
        return;
      }

      this.displayedScheduleItems = [];
      for (let i = 0; i < 12; i++) {
        const index = (this.scheduleItemsStartIndex + i) % totalItems;
        this.displayedScheduleItems.push(this.scheduleItems[index]);
      }
    },

    startRankingItemsCarousel() {
      if (this.rankingItemsTimer) {
        clearInterval(this.rankingItemsTimer);
        this.rankingItemsTimer = null;
      }

      if (this.sortedDevices.length <= this.rankingPageSize) {
        return;
      }

      this.rankingItemsTimer = setInterval(() => {
        this.rankingStartIndex = (this.rankingStartIndex + 1) % this.sortedDevices.length;
        this.updateDisplayedRankingItems();
      }, 1500);
    },

    startScheduleItemsCarousel() {
      if (this.scheduleItemsTimer) {
        clearInterval(this.scheduleItemsTimer);
        this.scheduleItemsTimer = null;
      }

      if (this.scheduleItems.length <= 12) {
        return;
      }

      this.scheduleItemsTimer = setInterval(() => {
        this.scheduleItemsStartIndex = (this.scheduleItemsStartIndex + 1) % this.scheduleItems.length;
        this.updateDisplayedScheduleItems();
      }, 3000);
    },

    updateDisplayedTableItems() {
      const totalItems = this.positionList.length;
      if (totalItems <= this.tablePageSize) {
        this.displayedTableItems = [...this.positionList];
        return;
      }

      this.displayedTableItems = [];
      for (let i = 0; i < this.tablePageSize; i++) {
        const index = (this.tableStartIndex + i) % totalItems;
        this.displayedTableItems.push(this.positionList[index]);
      }
    },

    startTableItemsCarousel() {
      if (this.tableItemsTimer) {
        clearInterval(this.tableItemsTimer);
        this.tableItemsTimer = null;
      }

      if (this.positionList.length <= this.tablePageSize) {
        return;
      }

      this.tableItemsTimer = setInterval(() => {
        this.tableStartIndex = (this.tableStartIndex + 1) % this.positionList.length;
        this.updateDisplayedTableItems();
      }, 3000);
    },

    // 故障信息轮播
    startFaultInfoCarousel() {
      // 清除已有的定时器
      if (this.faultInfoTimer) {
        clearInterval(this.faultInfoTimer);
      }

      // 如果没有故障信息，直接清空显示列表
      if (this.faultInfoList.length === 0) {
        this.displayedFaultInfoList = [];
        return;
      }

      // 立即更新一次显示的故障信息
      this.updateDisplayedFaultInfo();

      // 只有当故障信息数量大于每页显示数量时才需要轮播
      // if (this.faultInfoList.length > this.faultInfoPageSize)
      {
        // 设置轮播定时器
        this.faultInfoTimer = setInterval(() => {
          this.faultInfoStartIndex = (this.faultInfoStartIndex + 1) % this.faultInfoList.length;
          this.updateDisplayedFaultInfo();
          console.log("轮播更新，当前索引:", this.faultInfoStartIndex);
        }, 500); // 每5秒轮播一次
      }
    },

    updateDisplayedFaultInfo() {
      const totalItems = this.faultInfoList.length;
      console.log("更新显示的故障信息，总故障数:", totalItems,
        "当前起始索引:", this.faultInfoStartIndex,
        "每页显示数量:", this.faultInfoPageSize);

      // 如果没有故障信息，清空显示列表
      if (totalItems === 0) {
        this.displayedFaultInfoList = [];
        return;
      }

      // 显示当前页的故障信息
      this.displayedFaultInfoList = [];
      for (let i = 0; i < this.faultInfoPageSize && i < totalItems; i++) {
        const index = (this.faultInfoStartIndex + i) % totalItems;
        this.displayedFaultInfoList.push(this.faultInfoList[index]);
      }
      console.log("当前显示的故障信息数量:", this.displayedFaultInfoList.length);
    },

    initCharts() {
      // 设备状态统计图表 - 改进为更美观的饼图
      this.statusChart = echarts.init(this.$refs.statusChart);
      const statusData = [
        {value: this.runningCount, name: '运行中', itemStyle: {color: '#52c41a'}},
        {value: this.standbyCount, name: '待机', itemStyle: {color: '#faad14'}},
        {value: this.faultCount, name: '故障', itemStyle: {color: '#ff4d4f'}},
        {value: this.positionList.filter(item => item.status === '0').length, name: '停机', itemStyle: {color: '#8c8c8c'}}
      ];

      const statusOption = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(16, 36, 63, 0.9)',
          textStyle: {
            color: '#fff'
          },
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: '#a0d3ff'
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: true,
              position: 'center',
              formatter: '{b}\n{c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: statusData,
            center: ['35%', '50%']
          }
        ]
      };
      this.statusChart.setOption(statusOption);

      // 设备分类统计图表 - 改进为环形图
      this.categoryChart = echarts.init(this.$refs.categoryChart);
      const locationStats = {};
      this.positionList.forEach(item => {
        const location = item.location || '其他';
        locationStats[location] = (locationStats[location] || 0) + 1;
      });

      const categoryData = Object.keys(locationStats).map(key => {
        return {name: key, value: locationStats[key]};
      });

      const categoryOption = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(16, 36, 63, 0.9)',
          textStyle: {
            color: '#fff'
          },
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: '#a0d3ff'
          }
        },
        series: [
          {
            name: '设备分类',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: true,
              position: 'center',
              formatter: '{b}\n{c}',
              fontSize: 14,
              fontWeight: 'bold'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: categoryData,
            center: ['35%', '50%']
          }
        ]
      };
      this.categoryChart.setOption(categoryOption);

      // 设备能耗统计图表 - 使用3D柱状图
      this.powerChart = echarts.init(this.$refs.powerChart);
      // 初始化显示第一页数据
      this.powerChartPageIndex = 0;
      this.updatePowerChart();

      // 启动轮播
      this.$nextTick(() => {
        this.startPowerChartCarousel();
      });
    },

    redo() {
      this.right6DeviceId = ''
      this.isModalVisible = false;
      this.getNowTime(true)
      this.get()
    },

    getDevicesByLocation(location) {
      if (location === '其他') {
        return this.positionList.filter(device => !this.mainLocations.includes(device.location));
      }
      return this.positionList.filter(device => device.location === location);
    },

    getDeviceIndex(deviceId, location) {
      const devices = this.getDevicesByLocation(location);
      return devices.findIndex(device => device.id === deviceId);
    },

    getDeviceChartIndex(deviceId, location) {
      const devices = this.getDevicesByLocation(location);
      const deviceIndex = devices.findIndex(device => device.id === deviceId);
      let globalIndex = 0;
      const locations = ['燃系检修线', '电机轮对库', '柴油机检修库', '其他'];
      for (const loc of locations) {
        if (loc === location) {
          return globalIndex + deviceIndex;
        }
        globalIndex += this.getDevicesByLocation(loc).length;
      }
      return deviceIndex;
    },

    getStatusText(status) {
      const statusMap = {
        '3': '故障',
        '2': '运行',
        '1': '待机',
        '0': '停机'
      };
      return statusMap[status] || '';
    },

    getStatusClass(status) {
      const classMap = {
        '3': 'status-fault',
        '2': 'status-running',
        '1': 'status-standby',
        '0': 'status-stopped'
      };
      return classMap[status] || '';
    },

    // 获取故障信息数据
    loadFaultInfoData() {
      console.log("开始调用loadFaultInfoData方法");
      console.log("当前positionList:", this.positionList);
      console.log("positionList长度:", this.positionList ? this.positionList.length : 'undefined');

      // 如果没有设备数据，直接返回
      if (!this.positionList || this.positionList.length === 0) {
        console.log("没有设备数据");
        this.faultInfoList = [];
        this.displayedFaultInfoList = [];
        return;
      }

      this.processFaultInfo();
    },

    processFaultInfo() {
      console.log("开始处理故障信息，设备数量:", this.positionList.length);

      // 获取所有设备的故障信息
      const faultInfoPromises = this.positionList.map(device => {
        console.log("正在调用设备ID:", device.id, "设备名称:", device.deviceName);
        // 使用完整的URL路径调用接口
        return getAction(this.url.queryRiskItemValue, { deviceId: device.id })
          .then(res => {
            console.log("设备ID " + device.id + " 的响应数据:", res);
            if (res.success && res.result && res.result.length > 0) {
              // 处理故障数据，筛选出状态不为1（正常）的项目
              const faultItems = res.result.filter(item => item[2] !== 1);
              console.log("设备ID " + device.id + " 的故障项目:", faultItems);

              // 构造故障信息列表
              return faultItems.map(item => {
                return {
                  deviceId: device.id,
                  deviceName: device.deviceName || '未知设备',
                  itemName: item[1] || '未知检测项',
                  result: item[2] === 1 ? '正常' : '异常',
                  status: item[2],
                  location: device.location || '未知位置'
                };
              });
            }
            return [];
          })
          .catch(error => {
            console.error(`获取设备 ${device.id} 的故障信息失败:`, error);
            return [];
          });
      });

      // 等待所有请求完成
      Promise.all(faultInfoPromises)
        .then(results => {
          console.log("所有设备故障信息获取完成:", results);
          // 合并所有设备的故障信息
          const allFaultInfo = results.flat();
          console.log("合并后的故障信息总数:", allFaultInfo.length, "详细数据:", allFaultInfo);

          // 更新故障信息列表
          this.faultInfoList = allFaultInfo;

          // 更新显示的故障信息
          this.updateDisplayedFaultInfo();

          // 重新启动轮播以确保正确显示
          this.startFaultInfoCarousel();
        })
        .catch(error => {
          console.error('获取所有设备故障信息失败:', error);
          this.faultInfoList = [];
          this.displayedFaultInfoList = [];
        });
    },

    // 获取故障状态的CSS类
    getFaultStatusClass(status) {
      switch (status) {
        case 1:
          return 'status-normal';
        case 0:
          return 'status-fault';
        default:
          return 'status-unknown';
      }
    },

    // 获取故障状态文本
    getFaultStatusText(status) {
      switch (status) {
        case 1:
          return '正常';
        case 0:
          return '异常';
        default:
          return '未知';
      }
    },

    // 新增：加载所有设备的能耗数据
    loadAllDevicePowerData() {
      // 使用新的接口获取设备类型能耗数据
      getAction(this.url.getDevicePower, {}, 'get').then(res => {
        if (res.success && res.result) {
          // res.result 包含typeName(设备ID数组), power(功率数组), runTime(运行时间数组)
          const deviceIds = res.result.typeName || [];  // 设备ID数组
          const powerValues = res.result.power || [];   // 功率数组
          const runTimeValues = res.result.runTime || []; // 运行时间数组

          // 遍历positionList，根据设备ID匹配能耗数据
          this.positionList.forEach((device, index) => {
            // 在返回的设备ID数组中查找当前设备
            const deviceIndex = deviceIds.findIndex(id => id === device.id);

            let powerValue = 0;
            if (deviceIndex !== -1 && powerValues[deviceIndex]) {
              // 如果找到对应的能耗数据，使用它
              powerValue = parseFloat(powerValues[deviceIndex]) || 0;
            }

            // 更新设备的power属性
            this.$set(this.positionList, index, {
              ...this.positionList[index],
              power: powerValue
            });
          });
        } else {
          // 如果没有获取到数据，将所有设备的power设为0
          this.positionList.forEach((device, index) => {
            this.$set(this.positionList, index, {
              ...this.positionList[index],
              power: 0
            });
          });
        }
      }).catch(error => {
        console.error('获取设备类型能耗数据失败:', error);
        // 出错时将所有设备的power设为0
        this.positionList.forEach((device, index) => {
          this.$set(this.positionList, index, {
            ...this.positionList[index],
            power: 0
          });
        });
      });
    },
  },
};
</script>

<style scoped>@font-face {
  font-family: "HanSans";
  src: url('../accessoryLedger/font/SourceHanSansCN-Bold.otf');
}

@font-face {
  font-family: "HanSansRegular";
  src: url('../accessoryLedger/font/SourceHanSansCN-Regular.otf');
}

@font-face {
  font-family: "HanSansMedium";
  src: url('../accessoryLedger/font/SourceHanSansCNMedium.otf');
}

body * {
  box-sizing: border-box;
  font-family: 'HanSansMedium';
}

.container {
  width: 100vw;
  height: 100vh;
  /* background: linear-gradient(135deg, #0a1a30, #0d2445, #122e5a); */
  background: linear-gradient( 180deg, #001F4B 0%, #000C1F 100%);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
}

.container-title {
  height: 9vh;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: linear-gradient(90deg, transparent, rgba(26, 106, 196, 0.3), transparent); */
  background-image: url(../../assets/homescreen/title_bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  margin: 0 1vw;
}

.title-left,
.title-right {
  position: absolute;
  width: 5vw;
  min-width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1a6ac9);
  top: 50%;
}

.title-left {
  left: 0;
}

.title-right {
  right: 0;
}

.title-center {
  font-size: 1.5vw;
  /* min-font-size: 14px;
  max-font-size: 24px; */
  font-weight: bold;
  background: linear-gradient(90deg, #afd4ff, #e1eefd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1vw;
  margin-top: -16px;
}

/* 风险提示样式 */
.risk-reminder {
  position: absolute;
  right: 1vw;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #ff4d4f, #f5222d);
  border-radius: 1vw;
  padding: 0.5vh 1vw;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 0.5vw rgba(245, 34, 45, 0.5);
  z-index: 100;
  min-width: 80px;
}

.risk-reminder:hover {
  background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
}

.icon-risk-warning {
  display: inline-block;
  width: 1.2vw;
  min-width: 16px;
  height: 1.2vw;
  min-height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") center no-repeat;
  background-size: contain;
  margin-right: 0.3vw;
}

.risk-count {
  font-weight: bold;
  margin-right: 0.3vw;
  font-size: 1vw;
  min-font-size: 12px;
}

.risk-text {
  font-size: 0.9vw;
  min-font-size: 10px;
}

.container-content {
  flex: 1;
  display: flex;
  padding: 1vh 1vw;
  gap: 1vw;
  min-height: 0;
}

.panel-group {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  min-height: 0;
}

.left-panel {
  width: 20vw;
  min-width: 250px;
  display: flex;
  flex-direction: column;
}

.center-panel {
  flex: 1;
  min-width: 0;
}

.right-panel {
  width: 20vw;
  min-width: 250px;
}

.panel-card {
  /* background: rgba(16, 46, 96, 0.5); */
  border-radius: 0.5vw;
  /* border: 1px solid rgba(26, 106, 196, 0.5); */
  /* box-shadow: 0 0 0.8vw rgba(26, 106, 196, 0.3); */
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.full-height {
  flex: 1;
}

.card-header {
  height: 4vh;
  min-height: 30px;
  background: linear-gradient(90deg, rgba(26, 106, 196, 0.4), transparent);
  display: flex;
  align-items: center;
  padding: 0 1vw;
  font-size: 1vw;
  min-font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05vw;
  position: relative;
}

.card-header i {
  margin-right: 0.5vw;
  color: #4a9dff;
  font-size: 1.1vw;
}

/* 设备监控卡片 */
.device-monitor-card {
  flex: 1;
  min-height: 0;
}

.card-content {
  flex: 1;
  padding: 1vh 1vw;
  overflow: hidden;
  min-height: 200px; /* 确保内容区域有足够的显示空间 */
  background-color: #1264c910;
}

.center-content {
  padding: 2vh 0;
}

/* 状态统计卡片 */
.status-card .card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.5vh;
  padding-bottom: 0vh; /* 减少底部内边距，使图表向上移动 */
}

.status-chart {
  width: 100%;
  height: 20vh;
  min-height: 120px;
}

/* 分类统计卡片 */
.category-card .card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1vh;
  padding-bottom: 1vh; /* 修复之前设置的负值问题 */
}

.category-chart {
  width: 100%;
  height: 20vh;
  min-height: 120px;
}

/* 异常信息卡片 */
.alert-summary {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1vh;
  flex-wrap: wrap;
}

.alert-item {
  text-align: center;
  margin-bottom: 1vh;
  flex: 1;
  min-width: 80px;
}

.alert-count {
  width: 4vw;
  min-width: 50px;
  height: 4vw;
  min-height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5vw;
  font-weight: bold;
  margin: 0 auto 0.5vh;
}

.alert-count.fault {
  background: linear-gradient(135deg, #ff4d4f, #f5222d);
  box-shadow: 0 0 0.8vw rgba(245, 34, 45, 0.5);
}

.alert-count.running {
  background: linear-gradient(135deg, #52c41a, #389e0d);
  box-shadow: 0 0 0.8vw rgba(82, 196, 26, 0.5);
}

.alert-count.standby {
  background: linear-gradient(135deg, #faad14, #d48806);
  box-shadow: 0 0 0.8vw rgba(250, 173, 20, 0.5);
}

.alert-label {
  font-size: 0.9vw;
  min-font-size: 12px;
  color: #a0d3ff;
}

.alert-list {
  border-top: 1px solid rgba(26, 106, 196, 0.3);
  padding-top: 0.5vh;
  flex: 1;
  overflow-y: auto;
}

.alert-list-header {
  display: flex;
  background: rgba(26, 106, 196, 0.2);
  padding: 0.5vh 0;
  font-weight: bold;
  font-size: 0.9vw;
}

.alert-list-item {
  display: flex;
  padding: 0.5vh 0;
  border-bottom: 1px solid rgba(26, 106, 196, 0.1);
  font-size: 0.8vw;
}

.alert-list-col {
  flex: 1;
  padding: 0 1vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-list-col:first-child {
  flex: 0 0 3vw;
  min-width: 30px;
}

.alert-list-col:last-child {
  flex: 0 0 5vw;
  min-width: 60px;
  text-align: right;
}

/* 设备监控卡片 */
.device-grid {
  //display: grid;
  //grid-template-columns: repeat(6, 1fr);
  //gap: 1vh 1vw;
  //height: 100%;
  //min-height: 0;
  //overflow-y: auto;

  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 每一行排列成5个 */
  gap: 1.0vh 1.0vw;
  height: 80%;
}

.device-item {
  background: rgba(26, 106, 196, 0.2);
  border-radius: 0.5vw;
  padding: 1vh 0.5vw;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.device-item:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 0.3vw 0.8vw rgba(26, 106, 196, 0.4);
}

.device-item.device-running {
  background: rgba(82, 196, 26, 0.2);
  border-color: rgba(82, 196, 26, 0.5);
}

.device-item.device-standby {
  background: rgba(250, 173, 20, 0.2);
  border-color: rgba(250, 173, 20, 0.5);
}

.device-item.device-fault {
  background: rgba(245, 34, 45, 0.2);
  border-color: rgba(245, 34, 45, 0.5);
}

.device-number {
  font-size: 0.9vw;
  min-font-size: 12px;
  color: #a0d3ff;
}

.device-status {
  font-size: 0.9vw;
  min-font-size: 12px;
  font-weight: bold;
  margin: 0.3vh 0;
}

.device-running .device-status {
  color: #52c41a;
}

.device-standby .device-status {
  color: #faad14;
}

.device-fault .device-status {
  color: #ff4d4f;
}

.device-name,
.device-location {
  font-size: 0.8vw;
  min-font-size: 11px;
  color: #a0d3ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 设备详情卡片 */
.table-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 5px; /* 增加侧边距 */
}

.table-header {
  display: flex;
  /* 科技感深色渐变背景 */
  background: linear-gradient(180deg, rgba(26, 106, 196, 0.4) 0%, rgba(13, 44, 84, 0.6) 100%);
  padding: 1.2vh 0;
  font-weight: bold;
  color: #00f6ff; /* 亮青色文字 */
  border: 1px solid rgba(0, 246, 255, 0.2);
  border-radius: 4px 4px 0 0;
  font-size: 0.9vw;
  box-shadow: inset 0 0 10px rgba(0, 246, 255, 0.1);
}

.table-row {
  display: flex;
  align-items: center;
  padding: 0.7vh 0;
  margin-top: 4px;
  background: rgba(26, 106, 196, 0.05);
  border: 1px solid rgba(26, 106, 196, 0.1);
  transition: all 0.3s ease;
  font-size: 0.85vw;
  position: relative;
}

/* 鼠标悬停高亮效果 */
.table-row:hover {
  background: rgba(26, 106, 196, 0.2);
  border-color: rgba(0, 246, 255, 0.4);
  transform: scale(1.01);
  box-shadow: 0 0 12px rgba(0, 246, 255, 0.2);
  z-index: 2;
}

.table-cell {
  flex: 1;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: #e1eefd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-cell:first-child {
  flex: 0 0 3.5vw;
  min-width: 40px;
  color: #a0d3ff;
  font-style: italic;
  font-weight: bold;
}

.table-row:nth-child(even) {
  background: rgba(26, 106, 196, 0.1);
}

/* 状态样式 */
.status-fault {
  color: #ff4d4f;
  font-weight: bold;
}

.status-running {
  color: #52c41a;
  font-weight: bold;
}

.status-standby {
  color: #faad14;
  font-weight: bold;
}

.status-stopped {
  color: #8c8c8c;
  font-weight: bold;
}

/* 能耗统计卡片 */
.power-card .card-content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  padding-top: 0.5vh;
  padding-bottom: 0vh;
}

.power-chart {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

/* 风险监测卡片 */
.risk-list {
  height: 100%;
  overflow-y: auto;
}

.risk-item {
  display: flex;
  align-items: center;
  padding: 0.8vh 0;
  border-bottom: 1px solid rgba(26, 106, 196, 0.1);
  font-size: 0.9vw;
}

.risk-rank {
  width: 2vw;
  min-width: 20px;
  height: 2vw;
  min-height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 1vw;
  flex-shrink: 0;
  font-size: 0.8vw;
}

.risk-rank.rank-first {
  background: linear-gradient(135deg, #ff4d4f, #f5222d);
  color: #fff;
}

.risk-rank.rank-second {
  background: linear-gradient(135deg, #faad14, #d48806);
  color: #fff;
}

.risk-rank.rank-third {
  background: linear-gradient(135deg, #52c41a, #389e0d);
  color: #fff;
}

.risk-rank.rank-other {
  background: rgba(26, 106, 196, 0.3);
  color: #a0d3ff;
}

.risk-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-count {
  color: #a0d3ff;
  font-size: 0.8vw;
  min-font-size: 11px;
  padding-right: 1vw;
}

/* 风险详情模态框样式 */
.risk-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.risk-modal-content {
  background: linear-gradient(135deg, #0a1a30, #0d2445);
  border-radius: 0.5vw;
  border: 1px solid rgba(26, 106, 196, 0.5);
  box-shadow: 0 0 1vw rgba(26, 106, 196, 0.5);
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
}

.risk-modal-header {
  padding: 2vh 2vw;
  border-bottom: 1px solid rgba(26, 106, 196, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk-modal-header h3 {
  margin: 0;
  color: #a0d3ff;
  font-size: 1.2vw;
}

.close {
  color: #aaa;
  font-size: 2vw;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}

.risk-modal-body {
  padding: 2vh 2vw;
}

.risk-item-detail {
  background: rgba(26, 106, 196, 0.2);
  border-radius: 0.5vw;
  padding: 1.5vh 1.5vw;
  margin-bottom: 1.5vh;
}

.risk-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(26, 106, 196, 0.3);
}

.risk-item-title {
  font-size: 1.1vw;
  font-weight: bold;
  color: #4a9dff;
}

.risk-item-date {
  color: #a0d3ff;
  font-size: 0.9vw;
}

.risk-item-content {
  padding: 1vh 0;
}

.risk-item-row {
  display: flex;
  margin-bottom: 0.5vh;
}

.risk-item-label {
  width: 5vw;
  font-weight: bold;
  color: #a0d3ff;
  font-size: 0.9vw;
}

.risk-item-value {
  flex: 1;
  color: #fff;
  font-size: 0.9vw;
}

.no-risk-data {
  text-align: center;
  padding: 3vh;
  color: #a0d3ff;
  font-size: 1.1vw;
}

/* 新增故障信息面板样式 */
.fault-info-card .card-header {
  position: relative;
}

.fault-count-badge {
  position: absolute;
  right: 1vw;
  background: linear-gradient(135deg, #ff4d4f, #f5222d);
  color: white;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 0.8vw;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fault-info-card .card-content {
  padding: 0;
}

.fault-info-list {
  height: 100%;
  overflow-y: auto;
}

.fault-info-item {
  padding: 1.5vh 1vw;
  border-bottom: 1px solid rgba(26, 106, 196, 0.1);
  transition: background-color 0.3s;
}

.fault-info-item:hover {
  background-color: rgba(26, 106, 196, 0.1);
}

.fault-info-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8vh;
}

.fault-info-title {
  font-weight: bold;
  color: #a0d3ff;
  font-size: 0.9vw;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.fault-info-status {
  font-size: 0.7vw;
  padding: 0.3vh 0.6vw;
  border-radius: 0.3vw;
  font-weight: bold;
  white-space: nowrap;
}

.fault-info-status.status-normal {
  background-color: rgba(82, 196, 26, 0.2);
  color: #52c41a;
}

.fault-info-status.status-fault {
  background-color: rgba(245, 34, 45, 0.2);
  color: #ff4d4f;
}

.fault-info-status.status-unknown {
  background-color: rgba(140, 140, 140, 0.2);
  color: #8c8c8c;
}

.fault-info-content {
  font-size: 0.8vw;
}

.fault-info-row {
  display: flex;
  margin-bottom: 0.5vh;
}

.fault-info-label {
  width: 4vw;
  color: #70a3d8;
  font-weight: bold;
}

.fault-info-value {
  flex: 1;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-fault-data {
  text-align: center;
  padding: 3vh 1vw;
  color: #a0d3ff;
  font-size: 0.9vw;
}

.no-fault-data i {
  font-size: 2vw;
  margin-bottom: 1vh;
  display: block;
}

.no-fault-data p {
  margin: 0;
}

.icon-no-fault::before {
  content: "✓";
  color: #52c41a;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 0.2vw;
}

::-webkit-scrollbar-track {
  background: rgba(16, 46, 96, 0.3);
  border-radius: 0.1vw;
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 106, 196, 0.5);
  border-radius: 0.1vw;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 106, 196, 0.8);
}

/* 响应式设计 - 平板及以下 */
@media screen and (max-width: 1024px) {
  .device-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .container-content {
    flex-direction: column;
  }

  .left-panel,
  .center-panel,
  .right-panel {
    width: 100%;
  }

  .device-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1vh 1vw;
    height: 100%;
    overflow-y: auto;
  }
}

/* 响应式设计 - 手机 */
@media screen and (max-width: 768px) {
  .device-grid {
    grid-template-columns: repeat(6, 1fr);
  }


  .title-center {
    font-size: 4vw;
  }

  .risk-reminder {
    padding: 1vw 2vw;
    right: 2vw;
  }

  .container-content {
    padding: 1vw;
    gap: 1vw;
  }

  .card-header {
    padding: 0 2vw;
    font-size: 3vw;
  }

  .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .alert-item {
    min-width: 70px;
  }

  .alert-count {
    width: 8vw;
    height: 8vw;
    font-size: 3vw;
  }

  .alert-label {
    font-size: 2.5vw;
  }

  .alert-list-header,
  .alert-list-item {
    font-size: 2.5vw;
  }

  .table-header,
  .table-row {
    font-size: 2.5vw;
  }

  .device-number,
  .device-status,
  .device-name,
  .device-location {
    font-size: 2.3vw;
  }

  .risk-item {
    font-size: 2.5vw;
  }

  .risk-rank {
    width: 4vw;
    height: 4vw;
    font-size: 2vw;
  }

  .risk-count {
    font-size: 2.3vw;
  }

  .risk-modal-header h3 {
    font-size: 3.5vw;
  }

  .close {
    font-size: 5vw;
  }

  .risk-item-title {
    font-size: 3vw;
  }

  .risk-item-date,
  .risk-item-label,
  .risk-item-value {
    font-size: 2.5vw;
  }

  .no-risk-data {
    font-size: 3vw;
  }

  .fault-info-title,
  .fault-info-content,
  .fault-info-row,
  .fault-info-label,
  .fault-info-value {
    font-size: 2.5vw;
  }

  .fault-info-status {
    font-size: 2vw;
  }

  .no-fault-data {
    font-size: 2.5vw;
  }

  .fault-count-badge {
    font-size: 2vw;
    min-width: 16px;
    height: 16px;
  }
}
</style>