<template>
  <div class="app-container">
    <!-- 1. 顶部导航栏（固定高度） -->
    <!-- <div class="top-nav">
    </div> -->

    <!-- 2. 搜索栏（固定高度，占自身空间） -->
    <div class="search-container energyOverlimitLog">
      <span class="blue-block"></span>
      <span class="tip">设备总览</span>
      <search-bar removeBlue :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    </div>
    <div class="num-container">
      <div class="equipmentNum">
        <div class="equipment-info">
          <div class="info">
            <div class="num equipment">
              {{ globalCount.total ? globalCount.total : 0 }}
            </div>
            <div class="title">
              设备数量
            </div>
          </div>
          <img class="numImg" style="width: 86px;height: 86px;" src="../../../assets/images/equipmentNumImg.png" alt="">
        </div>
      </div>
      <div class="runNum">
        <div class="equipment-info">
          <div class="info">
            <div class="num run">
              {{ globalCount.run ? globalCount.run : 0 }}
            </div>
            <div class="title">
              运行数量
            </div>
          </div>
          <img class="numImg" style="width: 86px;height: 86px;" src="../../../assets/images/runNumImg.png" alt="">
        </div>
      </div>
      <div class="stopNum">
        <div class="equipment-info">
          <div class="info">
            <div class="num stop">
              {{ globalCount.stop ? globalCount.stop : 0 }}
            </div>
            <div class="title">
              停机数量
            </div>
          </div>
          <img class="numImg" style="width: 86px;height: 86px;" src="../../../assets/images/stopNumImg.png" alt="">
        </div>
      </div>
    </div>
    <div class="content-container energyOverlimitLog">
      <span class="blue-block"></span>
      <span class="tip">设备运行情况</span>
      <div class="content">
        <el-tabs class="custom-tabs" v-model="activeLabel" :stretch="true" @tab-click="handleTabClick">
          <el-tab-pane :label="'全部'" name="all">
          </el-tab-pane>
          <el-tab-pane :label="'\u3000运行中\u3000'" name="running">
          </el-tab-pane>
          <el-tab-pane :label="'\u3000停机\u3000'" name="stop">
          </el-tab-pane>
        </el-tabs>
        <div class="legend">
          <div class="legend-item">
            <div class="circle run"></div>
            <div class="title">运行中</div>
          </div>
          <div class="legend-item">
            <div class="circle stop"></div>
            <div class="title">停机</div>
          </div>
        </div>
        <div class="eqRun">
          <!-- 循环渲染设备列表：key绑定唯一equipmentId -->
          <div v-for="item in filteredList" :key="item.equipmentId" class="eqItem" :class="{
            'eq-item-disabled-false': !disabled,
            'eq-item-disabled-true': disabled
          }">
            <div class="title">
              <div class="eqName">
                <!-- 设备状态图标：status=0→运行中，其他→停机（根据实际业务调整） -->
                <div class="circle" :class="{ run: item.status === 0, stop: item.status !== 0 }"
                  :style="!disabled ? { background: '#B4B4B4', boxShadow: '0px 0px 6px 0px #B4B4B4' } : {}"></div>
                <div class="name" :style="!disabled ? { color: 'rgba(180, 180, 180, 1)' } : {}">
                  <!-- 显示产线+设备名称（根据list数据调整字段） -->
                  产线 {{ item.lineId }} · {{ item.equipmentName }}
                </div>
              </div>
              <!-- 警告数量（这里假设用模拟数据，实际需从接口获取） -->
              <el-tooltip v-if="disabled && item.equipmentAlarms" placement="bottom" effect="light"
                popper-class="no-border-tooltip" :visible-arrow="false">
                <div slot="content">
                  <div class="tooltips-item" v-for="(alarm, index) in item.equipmentAlarms" :key="index">
                    <div class="line" />
                    <div class="text">
                      <div class="time">
                        {{ formatTime(alarm.time) }}
                      </div>
                      <div class="alarm">
                        {{ alarm.content }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="alarmNum">
                  {{ item.equipmentCount }} 条警告
                </div>
              </el-tooltip>
            </div>

            <div class="warningHours">
              <div class="hours" style="font-size: 14px;" :style="!disabled ? { color: 'rgba(180, 180, 180, 1)' } : {}">
                24 小时运行状态
              </div>
              <!-- 参数异常提示（模拟数据） -->
              <el-tooltip v-if="disabled && item.paramAlarms" placement="bottom" effect="light"
                popper-class="no-border-tooltip" :visible-arrow="false">
                <div slot="content">
                  <div class="tooltips-item" v-for="(alarm, index) in item.paramAlarms" :key="index">
                    <div class="line" />
                    <div class="text">
                      <div class="time">
                        {{ formatTime(alarm.time) }}
                      </div>
                      <div class="alarm">
                        参数名称 {{ alarm.paramName }} 报警值 {{ alarm.paramValue }}，
                        <!-- 超出上限 -->
                        <span v-if="alarm.overMax">
                          超出上限值
                          <span style="color: rgba(255, 189, 2, 1);">
                            {{
                            ((Number(alarm.paramValue) || 0) - (Number(alarm.maxValue) || 0))
                            .toFixed(2)
                            .replace(/\.?0*$/, '')
                            }}
                          </span>
                        </span>
                        <!-- 超出下限 -->
                        <span v-else-if="alarm.overMin">
                          超出下限值
                          <span style="color: rgba(255, 189, 2, 1);">
                            {{
                            ((Number(alarm.minValue) || 0) - (Number(alarm.paramValue) || 0))
                            .toFixed(2)
                            .replace(/\.?0*$/, '')
                            }}
                          </span>
                        </span>
                        <!-- <span v-else>无超出阈值</span> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div class="warning">
                  {{ item.paramCount }} 条参数异常
                </div>
              </el-tooltip>
            </div>

            <div class="progress-container">
              <!-- 运行进度条：绑定item.run的百分比 -->
              <div class="progress-running" :style="!disabled ? { width: '0%' } : { width: `${item.run}%` }"></div>
            </div>

            <div class="progress-text">
              <!-- 运行百分比：显示item.run的值（增加值存在性判断） -->
              <div class="run" :style="!disabled ? { color: 'rgba(180, 180, 180, 1)' } : {}">
                运行 {{
                  !disabled
                    ? '—'
                    : (item.run !== undefined && item.run !== null && !isNaN(item.run))
                      ? `${item.run.toFixed(1) }%`
                : '—'
                }}
              </div>
              <!-- 停机百分比：显示item.stop的值（增加值存在性判断） -->
              <div class="stop" :style="!disabled ? { color: 'rgba(180, 180, 180, 1)' } : {}">
                停机 {{
                  !disabled
                    ? '—'
                    : (item.stop !== undefined && item.stop !== null && !isNaN(item.stop))
                      ? `${item.stop.toFixed(1) }%`
                : '—'
                }}
              </div>
            </div>

            <div v-if="disabled" class="bottom">
              <div @click="handleGetData(item)" class="runBottom">数据监控</div>
              <div class="runBottom" @click="handleAlarm(item)">报警统计</div>
            </div>
          </div>

          <!-- 无数据提示 -->
          <!-- <div v-if="filteredList.length === 0" class="no-data">
            暂无设备运行数据
          </div> -->
        </div>
      </div>
    </div>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
    <alarm-or-update v-if="alarmOrUpdateVisible" ref="alarmOrUpdate" @refreshDataList="getDataList" />

  </div>
</template>

<script>
// import { parseTime } from '@/filter/code-filter';
import {
  getPdList,
} from '@/api/core/monitoring/auto';
// import { getFactoryPage } from '@/api/core/base/factory';
import { getTree } from '@/api/base/equipment';
import { getEquipmentTypePage } from '@/api/base/equipmentType';
import { getEquipmentOverall } from '@/api/base/equipment';

// import * as XLSX from 'xlsx';
// import FileSaver from 'file-saver';
import ButtonNav from '@/components/ButtonNav';
// import { formatTime } from '@/utils';
import { getAccessToken } from '@/utils/auth';

import AddOrUpdate from './add-or-updata';
import alarmOrUpdate from './alarm-or-updata';

import store from "@/store";
export default {
  components: { ButtonNav, AddOrUpdate, alarmOrUpdate },
  data() {
    return {
      urlOptions: { getDataListURL: getEquipmentOverall },
      disabled: false,
      listQuery: {
        equipmentIds: undefined,
        lineId: undefined,
        equipmentTypeId: undefined,
        status: undefined,
      },
      status: undefined,
      countEq: undefined,
      countRun: undefined,
      countStop: undefined,
      addOrUpdateVisible: false,
      activeLabel: 'all',
      list: [], // 折线图数据
      formConfig: [

        {
          type: 'select',
          label: '产线',
          selectOptions: [],
          param: 'lineId',
          onchange: true
        },
        {
          type: 'select',
          label: '设备类型',
          selectOptions: [],
          param: 'equipmentTypeId',
          // labelField: 'label',
          // valueField: 'label',
        },
        {
          type: 'cascader',
          label: '设备名称',
          selectOptions: [],
          param: 'equipmentIds',
          showAllLevels: false,
          clearable: false,
          cascaderProps: {
            multiple: true,
            filterable: true,
            emitPath: false,
            label: 'name', // 提前配置，后续可覆盖
            value: 'id'
          },
          collapseTags: true,
          width: 250,
          // type: 'select',
          // label: '设备选择',
          // selectOptions: [],
          // param: 'equipmentId',
          labelField: 'name',
          valueField: 'id',
        },
        { type: 'button', btnName: '查询', name: 'search', color: 'primary' },
        { type: 'separate' },
        {
          type: 'button', btnName: '连接', name: 'link', plain: true,
          color: 'primary',
        },
        // {
        //   type: 'button',
        //   btnName: '重置',
        //   name: 'reset',
        // },
      ],
      searchBarData:{},
      alarmOrUpdateVisible:false,
      sseReader: null,        // 保存流读取器
      abortController: null,  // 用于中止 fetch 请求
      retryCount: 0,          // 当前重试次数
      isDestroyed: false,      // 标记组件是否已销毁
      isSSEConnected: false, // 标记是否已建立 SSE 连接（避免重复连接）
      currentSSEReaders: [], // 保存所有设备的 SSE 读取器（用于批量关闭）
    };
  },
  mounted() {
    this.getLineData()
    this.getDataList()
  },
  computed: {
    // 筛选后的列表（按 status 变化，不影响统计）
    filteredList() {
      if (this.status === undefined) {
        return this.list; // 全部数据
      }
      // 只筛选列表，不改变统计
      return this.list.filter(item => item.status === this.status);
    },
    // 全局统计（基于原始 list，不随 status 变化）
    globalCount() {
      // 优先使用接口返回的统计数据（如果接口提供）
      if (this.countEq > 0 || this.countRun > 0 || this.countStop > 0) {
        return {
          total: this.countEq,
          run: this.countRun,
          stop: this.countStop
        };
      }
      // 接口未提供时，基于原始 list 计算（兜底方案）
      return {
        total: this.list.length,
        run: this.list.filter(item => item.status === 0).length,
        stop: this.list.filter(item => item.status === 1).length
      };
    }
  },
  methods: {
    formatTime(time) {
      // 处理时间戳：10位秒级转13位毫秒级
      let timestamp = typeof time === 'number' ? time : Date.parse(time);
      if (timestamp.toString().length === 10) {
        timestamp *= 1000;
      }

      const date = new Date(timestamp);
      // 补零函数：确保数字为两位数
      const padZero = (num) => num.toString().padStart(2, '0');

      // 提取时间分量
      const year = padZero(date.getFullYear().toString().slice(-2)); // 取年份后两位（如 2025 → 25）
      const month = padZero(date.getMonth() + 1); // 月份从0开始，+1后补零
      const day = padZero(date.getDate());
      const hour = padZero(date.getHours());
      const minute = padZero(date.getMinutes());
      const second = padZero(date.getSeconds());

      // 拼接为目标格式：时分秒/年.月.日
      return `${hour}:${minute}:${second}/${year}.${month}.${day}`;
    },
    /**
    * 接收数组格式的树形数据，去掉最后一级的 children 属性
    * @param {Array} treeArray - 树形结构数组（即原 response.data）
    * @returns {Array} 处理后的树形数组（结构不变，仅删最后一级 children）
    */
    transformAndRemoveLastChildren(treeArray) {
      // 深拷贝：避免修改原数组数据
      const deepClone = (obj) => {
        if (obj === null || typeof obj !== 'object') return obj;
        if (Array.isArray(obj)) {
          const arrClone = [];
          for (let i = 0; i < obj.length; i++) {
            arrClone[i] = deepClone(obj[i]);
          }
          return arrClone;
        }
        const objClone = {};
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            objClone[key] = deepClone(obj[key]);
          }
        }
        return objClone;
      };

      // 深拷贝传入的数组
      const clonedArray = deepClone(treeArray) || [];

      // 递归处理节点：只删最后一级 children
      const processNode = (node) => {
        if (!node || typeof node !== 'object') return node;

        // 数组直接递归处理每个子项
        if (Array.isArray(node)) {
          return node.map(item => processNode(item));
        }

        const processedNode = { ...node };

        // 判断是否为最后一级
        let isLastLevel = true;
        if (Array.isArray(processedNode.children) && processedNode.children.length > 0) {
          isLastLevel = !processedNode.children.some(child =>
            Array.isArray(child.children) && child.children.length > 0
          );
        }

        // 最后一级删除 children
        if (isLastLevel) {
          delete processedNode.children;
        } else {
          processedNode.children = processNode(processedNode.children);
        }

        return processedNode;
      };

      // 处理数组中的所有节点
      return processNode(clonedArray);
    },
    async getLineData() {
      getPdList().then(res => {
        this.formConfig[0].selectOptions = res.data || [];
      })
      getEquipmentTypePage({
        pageSize: 100,
        pageNo: 1
      }).then(res => {
        this.formConfig[1].selectOptions = res.data.list || [];
      })
      // getEquipmentPage({
      //   pageSize: 100,
      //   pageNo: 1
      // }).then(res => {
      //   this.formConfig[2].selectOptions = res.data.list || [];
      // })
      const { data } = await this.$axios('/base/factory/getTree');
      this.formConfig[2].selectOptions = data
      // console.log('this.removeLastLevelChildren(data)', this.transformAndRemoveLastChildren(data))
    },

    // 切换按产线/按产品监控

    // 搜索/导出按钮点击
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.pageNo = 1;
          this.listQuery.pageSize = 10;
          this.searchBarData = val
          // console.log('val.equipmentIds', val.equipmentIds);
          this.getDataList();
          // 关键：触发 SSE 连接（先断开旧连接，再循环连接新设备）
          break;
        case 'link':
          this.disabled = true;
          let equipmentIds = []
          let arr = []
          this.list.forEach(ele => {
            console.log('ele',ele);

            arr.push(ele.equipmentId)
          });
          console.log('arr', arr);

          equipmentIds = arr
          this.connectSSEBatch(this.listQuery.equipmentIds.length > 0 ? this.listQuery.equipmentIds : equipmentIds);
          break;
        default:
      }
    },

    getDataList() {
      if (this.disabled === true) {
        this.closeAllSSE(); // 直接调用批量关闭方法
        this.disabled = false;
        this.isSSEConnected = false; // 重置连接状态
      }
      this.dataListLoading = true;
      this.listQuery.equipmentIds =  this.searchBarData.equipmentIds || [];
      // this.listQuery.equipmentIds = [200301, 200302, 200303];

      this.listQuery.lineId = this.searchBarData.lineId ? this.searchBarData.lineId : undefined;
      this.listQuery.equipmentTypeId = this.searchBarData.equipmentTypeId ? this.searchBarData.equipmentTypeId : undefined
      // this.listQuery.status = this.status ? this.status : undefined
      this.urlOptions.getDataListURL(this.listQuery).then(res => {
        this.list = res.data.dets
        this.countEq = res.data.countEq
        this.countRun = res.data.countRun
        this.countStop = res.data.countStop
        // console.log(this.tableDataCustom);
      });
    },
    handleGetData(data) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data);
      });
    },
    handleAlarm(data) {
      this.alarmOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.alarmOrUpdate.init(data);
      });
    },
    handleTabClick() {
      console.log('activeLabel', this.activeLabel);
      if (this.activeLabel === 'running') {
        this.status = 0
      } else if (this.activeLabel === 'stop') {
        this.status = 1
      } else{
        this.status = undefined
      }
    },
    closeSSE() {
      this.isDestroyed = true;
      this.closeAllSSE(); // 调用批量关闭方法
      console.log('组件销毁：SSE 所有连接已强制关闭');
    },
    isValidData(data) {
      return data.trim().startsWith('data:{') && !data.includes('heartbeat');
    },
    // 方案1：箭头函数绑定 this（推荐）
    connectSSEBatch(equipmentIds) {
      console.log('equipmentIds'.equipmentIds);

      this.closeAllSSE(); // 此时 this 指向组件实例

      if (!equipmentIds || equipmentIds.length === 0) {
        console.log('未选中任何设备，无需建立 SSE 连接');
        return;
      }

      // 循环调用 getData，this 正确指向组件
      for (const equipmentId of equipmentIds) {
        this.getData(equipmentId);
      }

      this.isSSEConnected = true;
    },

    // 批量关闭所有 SSE 连接
    closeAllSSE() {
      this.isSSEConnected = false;
      if (this.abortController) {
        this.abortController.abort();
        this.abortController = null;
      }
      this.currentSSEReaders.forEach(reader => {
        reader.cancel().catch(err => console.log('关闭 SSE 读取器失败：', err));
      });
      this.currentSSEReaders = [];
      console.log('所有 SSE 连接已断开');
    },

    // 异步连接单个设备的 SSE
    async getData(equipmentId) {
      console.log('开始连接设备 SSE：', equipmentId);
      if (this.isDestroyed) return;

      const url = process.env.VUE_APP_BASE_API +
        `/admin-api/monitoring/equMonitorMessage/subscribe/${equipmentId}-${Date.now()}`;

      const token = getAccessToken();
      const headers = new Headers({
        Authorization: `Bearer ${token}`,
        'tenant-id': store.getters.userId,
        'Content-Type': 'text/event-stream',
      });

      try {
        if (!this.abortController) {
          this.abortController = new AbortController();
        }

        const response = await fetch(url, {
          method: 'GET',
          headers: headers,
          signal: this.abortController.signal,
        });

        if (!response.ok) {
          console.error(`设备 ${equipmentId} SSE 连接失败：${response.status} - ${response.statusText}`);
          return;
        }

        const sseReader = response.body.getReader();
        this.currentSSEReaders.push(sseReader);

        const decoder = new TextDecoder();
        let buffer = '';

        while (true) {
          const { done, value } = await sseReader.read();
          if (done) {
            console.log(`设备 ${equipmentId} SSE 连接正常关闭`);
            this.currentSSEReaders = this.currentSSEReaders.filter(reader => reader !== sseReader);
            if (!this.isDestroyed) {
              this.handleReconnect(equipmentId);
            }
            break;
          }

          const chunk = decoder.decode(value, { stream: true });
          buffer += chunk;
          const messages = buffer.split('\n\n');
          buffer = messages.pop() || '';

          for (const message of messages) {
            if (this.isValidData(message)) {
              this.upDateMsg(message, equipmentId);
            }
          }
        }
      } catch (error) {
        if (error.name === 'AbortError') return;
        console.error(`设备 ${equipmentId} SSE 连接异常：`, error);
        if (!this.isDestroyed) {
          this.handleReconnect(equipmentId);
        }
      }
    },

    // 处理 SSE 推送数据
    upDateMsg(data, equipmentId) {
      const jsonStr = data.replace(/^data:/, '').trim();
      console.log(`设备 ${equipmentId} 收到 SSE 数据：`, jsonStr);

      try {
        const dataObj = JSON.parse(jsonStr);
        this.dataObj = dataObj;

        // 更新对应设备的报警数量
        const targetEqIndex = this.list.findIndex(item => item.equipmentId === equipmentId);
        if (targetEqIndex !== -1) {
          const updatedEq = { ...this.list[targetEqIndex] };
        updatedEq.paramAlarms = dataObj.paramAlarms ? dataObj.paramAlarms : [];
        updatedEq.paramCount = dataObj.paramAlarms ? dataObj.paramAlarms.length : 0;
        // 更新参数异常数量（equipmentAlarms 长度）
        updatedEq.equipmentAlarms = dataObj.equipmentAlarms ? dataObj.equipmentAlarms : [];
        updatedEq.equipmentCount = dataObj.equipmentAlarms ? dataObj.equipmentAlarms.length : 0;
        updatedEq.paramMonitors = dataObj.paramMonitors ? dataObj.paramMonitors : [];
          this.list.splice(targetEqIndex, 1, updatedEq);
        }
        console.log(' this.list', this.list);


        // if (this.list.length > 0) { // 确保数组有数据
        //   const firstEqIndex = 0; // 固定取第一个元素
        //   const updatedEq = { ...this.list[firstEqIndex] }; // 深拷贝第一个元素

        //   // 更新警告数量（paramAlarms 长度）
        //   updatedEq.paramAlarms = dataObj.paramAlarms ? dataObj.paramAlarms : [];
        //   updatedEq.paramCount = dataObj.paramAlarms ? dataObj.paramAlarms.length : 0;
        //   // 更新参数异常数量（equipmentAlarms 长度）
        //   updatedEq.equipmentAlarms = dataObj.equipmentAlarms ? dataObj.equipmentAlarms : [];
        //   updatedEq.equipmentCount = dataObj.equipmentAlarms ? dataObj.equipmentAlarms.length : 0;
        //   updatedEq.paramMonitors = dataObj.paramMonitors ? dataObj.paramMonitors : [];
        //   // 响应式更新数组第一个元素（Vue 会检测到变化并刷新页面）
        //   this.list.splice(firstEqIndex, 1, updatedEq);
        // }

        // console.log('更新后的 list 数组：', this.list);
      } catch (e) {
        console.error(`设备 ${equipmentId} SSE 数据解析失败：`, e);
      }
    },

    // 重连方法
    handleReconnect(equipmentId) {
      if (this.isDestroyed) return;
      const maxRetries = 5;
      if (this.retryCount < maxRetries) {
        const delay = Math.pow(2, this.retryCount) * 1000;
        setTimeout(() => {
          this.retryCount++;
          this.getData(equipmentId);
        }, delay);
      } else {
        console.error(`设备 ${equipmentId} SSE 重连次数已达上限`);
        this.retryCount = 0;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
// 全局容器：占满屏幕高度，减去90px（可根据实际需求调整）
.app-container {
  width: 100%;
  height: calc(100vh - 90px);
  background: #f2f4f9;
  padding: 8px 0px;
  // display: flex;
  // flex-direction: column;
  // overflow: hidden;
}

// 顶部导航栏：固定高度40px
.top-nav {
  height: 40px;
  width: 100%;
  background: #f2f4f9;
}

// 搜索栏：固定高度（自身内容高度），底部间距8px
.search-container {
  width: 100%;
  margin-bottom: 8px;
  border-radius: 8px;
  padding: 16px 16px 18px 16px;
  background-color: #ffffff;
}

.content-container {
  // width: 1640px;
  // height: 730px;
  // background: #FFFFFF;
  border-radius: 8px;
  margin-top: 8px;
  height: calc(100vh - 350px);
  padding: 16px 16px 18px 16px;
  background-color: #ffffff;

  .content {
    position: relative;
    height: calc(100% - 40px); // 减去标签栏/图例的占用高度（40px 可微调）
    overflow: hidden; // 隐藏父容器溢出，避免影响整体布局
    // display: flex;

    .legend {
      display: flex;
      position: absolute;
      margin-left: 24px;
      gap: 14px;
      top: -3px;
      left: 400px;

      .legend-item {
        display: flex;
        gap: 6px;
        align-items: center;

        .circle {
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }

        .run {
          background: #0BDBFF;
          box-shadow: 0px 0px 6px 0px #0BDBFF;
        }

        .stop {
          background: #FF760B;
          box-shadow: 0px 0px 6px 0px #FF760B;
        }

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #000000;
          // line-height: 16px;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .eqRun {
      width: 100%;
      display: flex;
      gap: 8px;
      flex-wrap: wrap; // 保留换行功能
      height: 100%; // 继承父容器高度，作为滚动触发条件
      overflow-y: auto; // 超出高度时显示滚动功能（可手动滑动）
      overflow-x: hidden; // 禁止横向滚动，避免布局错乱
      padding: 0px 0 16px 0; // 上下预留空间，避免最后一行被遮挡

      // 隐藏滚动条（兼容主流浏览器，视觉更简洁）
      &::-webkit-scrollbar {
        width: 0; // Chrome/Safari 滚动条宽度设为0
        height: 0;
      }

      scrollbar-width: none; // Firefox 隐藏滚动条
      -ms-overflow-style: none; // IE/Edge 隐藏滚动条

      .eq-item-disabled-false {
        width: 394px !important;
        height: 142px !important;
        background: #FFFFFF !important;
        border-radius: 8px !important;
        border: 1px solid #E0E0E0 !important;

        // 取消 hover 效果（disabled=false 时不需要高亮）
        // &:hover {
        //   box-shadow: none !important;

        //   .bottom {
        //     .runBottom {
        //       background: #E6F1FC !important;
        //       box-shadow: none !important;
        //       opacity: 0.4 !important;
        //     }
        //   }
        // }
      }

      // 2. disabled 为 true 时的样式（保留原有样式，统一放在此类中）
      .eq-item-disabled-true {
        width: 394px;
        height: 142px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #C2D5FF;

        &:hover {
          box-shadow: 0px 2px 6px 0px #D7D7D7;

          .bottom {
            .runBottom {
              background: #E6F1FC !important;
              box-shadow: 0px 2px 6px 0px #D7D7D7 !important;
              border-radius: 4px !important;
              border: 1px solid #A3D0FD !important;
              opacity: 1 !important;
              cursor: pointer;
            }
          }
        }
      }

      .eqItem {
        // width: 394px;
        // height: 142px;
        // background: #FFFFFF;
        // border-radius: 8px;
        // border: 1px solid #C2D5FF;

        // &:hover {
        //   box-shadow: 0px 2px 6px 0px #D7D7D7;

        //   // opacity: .1 !important; // 取消原有透明效果，让样式更清晰
        //   .bottom {
        //     .runBottom {
        //       background: #E6F1FC !important; // 覆盖原有背景
        //       box-shadow: 0px 2px 6px 0px #D7D7D7 !important; // 添加阴影
        //       border-radius: 4px !important;
        //       border: 1px solid #A3D0FD !important;
        //       opacity: 1 !important; // 取消原有透明效果，让样式更清晰
        //       cursor: pointer; // 可选：添加指针样式，提示可点击
        //     }
        //   }
        // }

        .title {
          display: flex;
          padding: 14px 22px 0 16px;
          justify-content: space-between;

          .eqName {
            display: flex;
            gap: 6px;
            align-items: center;

            .circle {
              width: 10px;
              height: 10px;
              border-radius: 50%;
            }

            .run {
              background: #0BDBFF;
              box-shadow: 0px 0px 6px 0px #0BDBFF;
            }

            .stop {
              background: #FF760B;
              box-shadow: 0px 0px 6px 0px #FF760B;
            }

            .name {
              // width: 133px;
              //   height: 16px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #000000;
              line-height: 16px;
              text-shadow: 0px 2px 6px #D7D7D7;
              text-align: left;
              font-style: normal;
            }

          }

          .alarmNum {
            width: 67px;
            height: 18px;
            margin-bottom: -2px;
            background: #FFEFEC;
            // box-shadow: 0px 2px 6px 0px #D7D7D7;
            border-radius: 3px;
            border: 1px solid #FF5454;
            // width: 58px;
            //   height: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FF2020;
            line-height: 16px;
            text-shadow: 0px 2px 6px #D7D7D7;
            text-align: center;
            font-style: normal;
          }
        }

        .warningHours {
          display: flex;
          padding: 9px 22px 0 16px;
          justify-content: space-between;

          .hours {
            // width: 133px;
            //   height: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            // line-height: 16px;
            text-shadow: 0px 2px 6px #D7D7D7;
            text-align: left;
            font-style: normal;
          }

          .warning {
            margin-bottom: -2px;
            width: 94px;
            height: 18px;
            background: #FFF7DF;
            // box-shadow: 0px 2px 6px 0px #D7D7D7;
            border-radius: 3px;
            border: 1px solid #FFBD02;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FF760B;
            line-height: 16px;
            text-shadow: 0px 2px 6px #D7D7D7;
            text-align: center;
            font-style: normal;
          }
        }

        .progress-container {
          margin: 8px 24px 0 16px;
          width: 348px;
          height: 14px;
          background: #F1F1F1;
          // box-shadow: 0px 2px 6px 0px #D7D7D7;
          border-radius: 9px;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          position: relative;
        }

        .progress-running {
          // width: 70%;
          height: 100%;
          background: #1677ff;
          float: left;
          line-height: 24px;
          // padding-left: 8px;
        }

        .progress-text {
          margin: 4px 24px 0 24px;
          width: 348px;
          display: flex;
          justify-content: space-between;
          margin-top: 4px;

          .run {
            // width: 133px;
            //   height: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #0B58FF;
            line-height: 16px;
            text-shadow: 0px 2px 6px #D7D7D7;
            text-align: left;
            font-style: normal;
          }

          .stop {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #7D7D7D;
            line-height: 16px;
            text-shadow: 0px 2px 6px #D7D7D7;
            text-align: right;
            font-style: normal;
          }
        }

        .bottom {
          margin-top: 8px;
          display: flex;

          .runBottom {
            width: 198px;
            height: 32px;
            background: #E6F1FC;
            border-radius: 4px;
            border: 1px solid #A3D0FD;
            opacity: 0.4;
            // width: 120px;
            //   height: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #0B58FF;
            line-height: 30px;
            text-align: center;
            font-style: normal;
            text-transform: uppercase;
            letter-spacing: 2px;
          }
        }
      }
    }
  }
}

.num-container {
  width: 100%;
  margin-top: 8px;
  gap: 8px;
  display: flex;

  .equipmentNum {
    background-image: url('../../../assets/images/equipmentNum.png');
    background-size: 100% 100%;
    width: 541px;
    height: 104px;

    .equipment-info {
      margin-left: 110px;
      display: flex;

      .info {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .num {
          width: 143px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 33px;
          line-height: 28px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
        }

        .equipment {
          color: #0B58FF;
        }

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #000000;
          line-height: 19px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
        }
      }

      .numImg {
        margin-top: 11px;
        margin-left: 99px;
      }
    }
  }

  .runNum {
    background-image: url('../../../assets/images/runNum.png');
    background-size: 100% 100%;
    width: 541px;
    height: 104px;

    .equipment-info {
      margin-left: 110px;
      display: flex;

      .info {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .num {
          width: 143px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 33px;
          color: #0B58FF;
          line-height: 28px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
        }

        .run {
          color: rgba(76, 208, 231, 1);
        }

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #000000;
          line-height: 19px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
        }
      }

      .numImg {
        margin-top: 11px;
        margin-left: 99px;
      }
    }
  }

  .stopNum {
    background-image: url('../../../assets/images/stopNum.png');
    background-size: 100% 100%;
    width: 541px;
    height: 104px;

    .equipment-info {
      margin-left: 110px;
      display: flex;

      .info {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .num {
          width: 143px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 33px;
          color: #0B58FF;
          line-height: 28px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
        }

        .stop {
          color: rgba(255, 118, 11, 1);
        }

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #000000;
          line-height: 19px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
        }
      }

      .numImg {
        margin-top: 11px;
        margin-left: 99px;
      }
    }
  }
}

:deep(.custom-tabs) {
  .el-tabs__header {
    margin-bottom: 8px;
    display: inline-block;
    transform: translateY(-12px);
  }

  .el-tabs__content {
    overflow: visible;
  }

  .el-tabs__item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 36px !important;
    width: 132px;
    letter-spacing: 2px;
    height: 36px;
  }
}

.tooltips-item {
  width: 256px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 4px;

  .text {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .time {
      // width: 225px;
      //   height: 40px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      // line-height: 20px;
      text-align: left;
      font-style: normal;
    }

    .alarm {
      // width: 225px;
      //   height: 40px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      // line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }

  .line {
    width: 2px;
    height: 34px;
    background: #FF760B;
    border-radius: 1px;
  }
}

/* 更具体的选择器 */
</style>

<style lang="scss">
.el-tooltip__popper.is-light.no-border-tooltip {
  border: none !important;
  border-width: 0 !important;
  padding: 12px 16px;
  box-shadow: 0px 2px 6px 0px #D7D7D7 !important;
}

// 全局公共样式
.energyOverlimitLog {
  .searchBarBox {
    margin-bottom: 0;
  }

  .blue-block {
    float: left;
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #0b58ff;
    border-radius: 1px;
    margin-right: 8px;
    margin-top: 6px;
  }

  .tip {
    display: inline-block;
    font-size: 16px;
    margin-right: 8px;
    // margin-top: 10px;
    margin-bottom: 16px;
  }
}
</style>
