bigscreenWeb/src/views/SagTraceResult_WX/components/manage/iframeDia.vue

<template>
  <div class="container">
    <!-- 使用 v-for 遍历四个角落 -->
    <div
      v-for="corner in corners"
      :key="corner.id"
      v-show="corner.show"
      :class="['corner', corner.className]"
    >
      <div class="content">
        <div class="title">{{ corner.title }}</div>
        <el-descriptions :column="1" size="small" label-width="70px" border>
          <el-descriptions-item
            v-for="(item, index) in corner.data"
            :key="index"
            :label="item.label"
          >
            <!-- {{ item.value }} -->
            <div v-html="item.value" v-if="item.label !== '暂降次数'"></div>
            <!-- 跑马灯 -->
            <div v-else style="display: flex">
              <div style="width: 30px">{{ corner.raceLists.length }}次</div>
              <div class="simple-marquee">
                <div class="marquee-content">
                  <span
                    style="margin-right: 15px"
                    v-for="(event, index) in corner.raceLists"
                    :key="index"
                    @click="goToRace(event)"
                    >{{
                      index +
                      1 +
                      "、" +
                      event.startTime +
                      "发生" +
                      event.eventType +
                      "," +
                      "残余电压：" +
                      (event.featureAmplitude * 100).toFixed(2) +
                      "%" +
                      "," +
                      "持续时间:" +
                      event.duration +
                      "S"
                    }}</span
                  >
                </div>
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span class="close-btn" @click="closeCorner(corner.id)">
        <Close />
      </span>
    </div>
    <DipDetail ref="dipDetail"></DipDetail>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from "vue";
import { clickImage, realTimeData } from "@/api/manage_wx";
import { Close } from "@element-plus/icons-vue";
import socketClient from "@/utils/webSocketClient";
import DipDetail from "../eventStatistics/dipDetail.vue";

// 定义接收的 props
const props = defineProps<{
  eventList?: [];
}>();
//开始创建webSocket客户端
const dataSocket = reactive({
  socketServe: socketClient.Instance,
});
// 定义四个角落的数据
const corners = ref([
  {
    id: "topLeft",
    title: "左上",
    className: "top-left",
    show: false,
    data: [] as { label: string; value: string }[],
    elementId: "", // 记录该角落对应的元素ID
    raceLists: [] as any[], // 为每个角落添加独立的跑马灯数据存储
  },
  {
    id: "topRight",
    title: "右上",
    className: "top-right",
    show: false,
    data: [] as { label: string; value: string }[],
    elementId: "",
    raceLists: [] as any[], // 为每个角落添加独立的跑马灯数据存储
  },
  // {
  //   id: "bottomLeft",
  //   title: "左下",
  //   className: "bottom-left",
  //   show: false,
  //   data: [] as { label: string; value: string }[],
  //   elementId: "",
  // },
  // {
  //   id: "bottomRight",
  //   title: "右下",
  //   className: "bottom-right",
  //   show: false,
  //   data: [] as { label: string; value: string }[],
  //   elementId: "",
  // },
]);
const steadyStateList = ref([]);

const selectedId = ref("");

// 内部响应式数据
const eventList = ref([]);

// 点击跑马灯展示弹框
const dipDetail = ref(null);

const handleClickImage = async (elementId: string) => {
  // 检查 elementId 是否有值，没有值则直接返回空数组
  if (!elementId) {
    eventList.value = [];
    return;
  }
  try {
    // 发送点击图片请求
    const res = await clickImage({ lineId: elementId });

    // 确保返回的数据是数组格式，并且过滤掉 null/undefined 元素
    let dataToStore: any[] = [];

    if (Array.isArray(res.data)) {
      dataToStore = res.data.filter(
        (item) => item !== null && item !== undefined
      );
    } else if (res.data && Array.isArray(res.data.records)) {
      dataToStore = res.data.records.filter(
        (item) => item !== null && item !== undefined
      );
    } else if (res.data) {
      // 如果是单个对象且不为 null
      if (res.data !== null && res.data !== undefined) {
        dataToStore = [res.data];
      }
    }

    eventList.value = dataToStore;
  } catch (error) {
    console.error("调用 clickImage 接口出错:", error);
    // 出错时设置为空数组，避免后续处理出错
    eventList.value = [];
  }
};

// 监听 props 变化
// watch(
//   () => props.eventList,
//   (newVal) => {
//     if (newVal && Array.isArray(newVal)) {
//       eventList.value = [...newVal];
//       dataLoaded.value = true;
//     } else {
//       dataLoaded.value = false;
//     }
//   },
//   { immediate: true, deep: true }
// );

// 记录显示顺序，用于循环替换
const displayOrder = ref<number[]>([]);

// 计算跑马灯动画时长（毫秒）
const calculateMarqueeDuration = (corner) => {
  if (!corner.raceLists || corner.raceLists.length === 0) {
    return 25000; // 默认25秒
  }

  // 计算所有事件文本的总长度
  let totalTextLength = 0;
  corner.raceLists.forEach((event, index) => {
    const text = `${index + 1}、${event.startTime}发生${
      event.eventType
    },残余电压：${(event.featureAmplitude * 100).toFixed(2)}%,持续时间:${
      event.duration
    }S`;
    totalTextLength += text.length;
  });

  // 添加分隔符长度和边距
  const separatorLength =
    corner.raceLists.length > 1 ? (corner.raceLists.length - 1) * 15 : 0; // margin-right: 15px
  totalTextLength += separatorLength;

  // 根据文本长度计算时长（减慢速度）
  // 将每字符需要的时间从50ms增加到80ms，最少8秒，最多90秒
  const duration = Math.min(Math.max(totalTextLength * 80, 8000), 90000);
  return duration;
};

// 更新指定角落数据的函数
const updateCornerData = (
  cornerIndex: number,
  dataItem: any,
  elementId: string
) => {
  // 更新标题为 objName
  if (dataItem.objName) {
    corners.value[cornerIndex].title = dataItem.objName;
  } else {
    corners.value[cornerIndex].title = dataItem.stationName;
  }

  // 格式化数据
  corners.value[cornerIndex].data = [
    { label: "监测点", value: dataItem.lineName },
    // {
    //   label: "暂降次数",
    //   value: dataItem.eventIds.length,
    // },
    {
      label: "暂降次数",
      value: ``,
    },
    // { label: "稳态指标", value: "Ua:65.5   Ub:65.02   Uc:65.27   Uac:112.85  Uab:112.67   Ubc:112.85"  },
    {
      label: "稳态指标",
      value: ``,
    },
  ];

  // 记录该角落对应的元素ID
  corners.value[cornerIndex].elementId = elementId;
  corners.value[cornerIndex].show = true;

  // 设置动画时长
  nextTick(() => {
    const duration = calculateMarqueeDuration(corners.value[cornerIndex]);
    const marqueeElement = document.querySelector(
      `.${corners.value[cornerIndex].className} .marquee-content`
    );
    if (marqueeElement) {
      (marqueeElement as HTMLElement).style.setProperty(
        "--marquee-duration",
        `${duration}ms`
      );
    }
  });
};

// 显示下一个角落的函数
const showNextCorner = (elementId: string) => {
  // 检查该元素ID是否已经显示过
  const existingCornerIndex = corners.value.findIndex(
    (corner) => corner.elementId === elementId && corner.show
  );

  if (existingCornerIndex !== -1) {
    // 如果该元素已经显示过，不更新数据
    return;
  }

  // 确保 eventList.value 是数组并且过滤掉 null/undefined 元素
  if (!Array.isArray(eventList.value)) {
    console.warn("eventList.value 不是数组格式:", eventList.value);
    return;
  }

  // 过滤掉 null 和 undefined 元素，然后查找匹配项
  const validItems = eventList.value.filter(
    (item) => item !== null && item !== undefined
  );
  const dataItem = validItems.find((item) => item.lineId === elementId);

  // 如果没有找到匹配的数据项，则不更新数据
  if (!dataItem) {
    console.warn("未找到匹配的数据项:", elementId);
    return;
  }

  // 查找一个未显示的角落
  const availableCornerIndex = corners.value.findIndex(
    (corner) => !corner.show
  );

  if (availableCornerIndex !== -1) {
    // 有空闲角落，显示在该角落
    updateCornerData(availableCornerIndex, dataItem, elementId);
    // 将事件数据存储到该角落
    corners.value[availableCornerIndex].raceLists = dataItem.eventList || [];
    // 记录显示顺序
    displayOrder.value.push(availableCornerIndex);
  } else {
    // 没有空闲角落，按顺序替换角落
    // 获取需要替换的角落索引（循环替换）
    const replaceIndex = displayOrder.value.shift() || 0;
    updateCornerData(replaceIndex, dataItem, elementId);
    // 将事件数据存储到该角落
    corners.value[replaceIndex].raceLists = dataItem.eventList || [];
    // 将替换的索引重新加入队列末尾
    displayOrder.value.push(replaceIndex);
  }
};

// 关闭指定角落的函数
const closeCorner = (id: string) => {
  const cornerIndex = corners.value.findIndex((c) => c.id === id);
  if (cornerIndex !== -1) {
    corners.value[cornerIndex].show = false;
    corners.value[cornerIndex].elementId = ""; // 清空元素ID记录

    // 从显示顺序中移除该角落索引
    const orderIndex = displayOrder.value.indexOf(cornerIndex);
    if (orderIndex !== -1) {
      displayOrder.value.splice(orderIndex, 1);
    }
  }
  send();
};

// 关闭所有角落的函数
const closeAllCorners = () => {
  corners.value.forEach((corner) => {
    corner.show = false;
    corner.elementId = "";
  });
  displayOrder.value = [];
};

// 组件挂载后初始化监听器
onMounted(() => {
  init();
  // 初始化时不显示任何内容
});

// 连接webSocket客户端
const init = () => {
  if (!dataSocket.socketServe) {
    console.error("WebSocket 客户端实例不存在");
    return;
  }
  dataSocket.socketServe.connect(new Date().getTime());
  dataSocket.socketServe.registerCallBack("message", (res: any) => {
    if (res.type == 1) {
      //稳态指标数据
      let steadyState = JSON.parse(res.message);

      // console.log(steadyState, "8990hhhhh");
      if (steadyState == null || steadyState.length == 0) return;
      steadyStateList.value = steadyState;
      corners.value.forEach((corner, index) => {
        let str = ``;
        steadyState
          .filter((item) => item.lineId == corner.elementId)
          .forEach((item) => {
            if (item.value == 3.1415926) {
              str += `<div>${item.statisticalName}：/</div>`;
            } else {
              str += `<div>${item.statisticalName}：${item.value}${item.unit}</div>`;
            }
          });

        corner.data.length > 0
          ? (corner.data[2].value = `<div style="max-height: 100px;overflow-y: auto;">${str} </div>`)
          : "";

        // 更新跑马灯动画时长
        nextTick(() => {
          const duration = calculateMarqueeDuration(corner);
          const marqueeElement = document.querySelector(
            `.${corner.className} .marquee-content`
          );
          if (marqueeElement) {
            (marqueeElement as HTMLElement).style.setProperty(
              "--marquee-duration",
              `${duration}ms`
            );
          }
        });
      });
    }
  });
};

const time = ref(null);
// 推送消息
const send = () => {
  dataSocket.socketServe.send({
    pageId: selectedId.value,
    lineIdList: corners.value
      .filter((item) => item.show == true)
      .map((corner) => corner.elementId),
  });
  if (time.value) {
    clearTimeout(time.value);
  }
  if (
    corners.value
      .filter((item) => item.show == true)
      .map((corner) => corner.elementId).length == 0
  )
    return;
  time.value = setInterval(() => {
    dataSocket.socketServe.send({
      pageId: selectedId.value,
      lineIdList: corners.value
        .filter((item) => item.show == true)
        .map((corner) => corner.elementId),
    });
  }, 1000 * 60);
};

const goToRace = (row) => {
  console.log(row.measurementPointId, "1222");
  dipDetail.value.open(row.measurementPointId);
};

// 监听来自 iframe 的消息
window.addEventListener("message", async function (event) {
  // 安全起见，可以验证消息来源（origin）
  // if (event.origin !== 'https://trusted-origin.com') return;

  // 处理从 iframe 发送过来的消息
  if (event.data.action === "coreClick") {
    const clickedElementId = event.data.coreId;
    selectedId.value = event.data.selectedId;

    // 调用接口获取最新数据
    await handleClickImage(clickedElementId);

    // 根据接收到的元素LineId显示对应数据
    await showNextCorner(clickedElementId);

    await send();
  }
});

// 页面卸载时清除定时器
onBeforeUnmount(() => {
  clearTimeout(time.value);
  dataSocket.socketServe?.closeWs();
});
</script>

<style>
/* 走马灯样式 - 支持逐条显示 */
.simple-marquee {
  width: 230px;
  height: 24px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%;
  /* animation: marquee-single 15s linear infinite; */
  animation: marquee-single var(--marquee-duration, 25s) linear infinite;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-color: #4877f6;
}

@keyframes marquee-single {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 鼠标悬停时暂停动画 */
.simple-marquee:hover .marquee-content {
  animation-play-state: paused;
  cursor: pointer;
}
</style>

<style scoped lang="scss">
.container {
  position: relative;
}

.corner {
  width: 340px;
  /* height: 135px; */
  background-color: #2b2d3a90;
  position: absolute;
  color: white;
  /* font-weight: bold; */
  /* 添加弹出动画 */
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.4s ease-out;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 显示状态的样式 */
.corner:not([style*="display: none"]):not([style*="display:none"]) {
  opacity: 1;
  transform: scale(1);
}

.top-left {
  top: 10px;
  left: 10px;
}

.top-right {
  top: 10px;
  right: 10px;
}

.bottom-left {
  top: 170px;
  left: 10px;
}

.bottom-right {
  top: 170px;
  right: 10px;
}

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  /* text-align: center; */
  /* margin-bottom: 8px; */
  padding: 8px;
  /* color: #409eff; */
  border-bottom: 1px solid #444;
  background-color: #21232b;
  border-radius: 8px 8px 0 0;
}

.data-item {
  display: flex;
  margin-bottom: 4px;
  font-size: 12px;
}

.label {
  /* font-weight: bold; */
  width: 55px;
  flex-shrink: 0;
}

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

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.indicator {
  display: flex;
}
</style>