伸缩杆代码提交

艺术家

2025-06-04 772190e7b2e3f6ef0695ba54d9209324acdcb30a

 ÏîÄ¿´úÂë/ÉìËõ¸Ë/client/src/views/tts/AlarmReset/AlarmReset.vue

@@ -1,10 +1,22 @@
<template>
  <div class="AlarmReset">
    <div style="width: 100%; text-align: center; font-size: 5rem; color: #fff">
    <div
      :style="{
        width: '100%',
        textAlign: 'center',
        fontSize: isMin ? '5rem' : '2rem',
        color: '#fff',
      }"
    >
      æŠ¥è­¦å¤ä½
    </div>
    <div style="margin-top: 3rem">
      <el-table :data="tableData" style="width: 100%" height="800">
      <el-table
        empty-text="暂无数据"
        :data="tableData"
        style="width: 100%"
        :height="isMin ? '800' : '450'"
      >
        <el-table-column prop="Id" label="序号" />
        <el-table-column prop="AlarmContent" label="报警内容" />
        <el-table-column prop="ResetStatus" label="复位状态" />
@@ -40,18 +52,34 @@
      />
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 4rem;
      "
      :style="{
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        marginTop: isMin ? '4rem' : '2rem',
      }"
    >
      <el-button
        type="primary"
        style="width: 10rem; height: 3rem"
        :style="{
          width: isMin ? '16rem' : '10rem',
          height: isMin ? '5rem' : '2.5rem',
        }"
        @click="handleBecomeTrue"
        >报警复位</el-button
        ><span :style="{ fontSize: isMin ? '3rem' : '1.5rem' }">
          æŠ¥è­¦å¤ä½</span
        ></el-button
      >
      <el-button
        type="primary"
        :style="{
          width: isMin ? '20rem' : '10rem',
          height: isMin ? '5rem' : '2.5rem',
        }"
        @click="handleClearAlarm"
        ><span :style="{ fontSize: isMin ? '3rem' : '1.5rem' }">
          æ¸…除报警信息</span
        ></el-button
      >
    </div>
  </div>
@@ -59,7 +87,7 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { BecomeTrue } from "@/api/newapi/AlarmReset.js";
import { BecomeTrue, ClearAlarm } from "@/api/newapi/AlarmReset.js";
import { formatTime } from "@/utils/index.js";

const timer = ref(null);
@@ -68,26 +96,37 @@
const pageSize = ref(10); // æ¯é¡µæ˜¾ç¤ºçš„条数
const currentPage = ref(0); // å½“前页码
const total = ref(0); // æ€»æ¡æ•°
const isStart = ref(false); // æ˜¯å¦å¼€å§‹
const positionvalue = ref({}); // ä½ç½®å€¼

const createSocket = (url) => {
  clearInterval(timer.value);
  // åˆ›å»ºWebSocket连接
  //"ws://127.0.0.1:9295/admin"
  client.value = new WebSocket("ws://192.168.2.103:5173/");
  //192.168.1.103
  client.value = new WebSocket("ws://192.168.1.103:5173/");
  client.value.onopen = function () {
    console.log("WebSocket è¿žæŽ¥æˆåŠŸ");
  };
  client.value.onmessage = function (event) {
    let data = JSON.parse(event.data);
    tableData.value = data.Data.slice(
      currentPage.value * pageSize.value,
      (currentPage.value + 1) * pageSize.value
    );
    total.value = data.Data.length; // æ›´æ–°æ€»æ¡æ•°
    console.log("WebSocket æŽ¥æ”¶åˆ°æ¶ˆæ¯", tableData.value);
    if (data.Status) {
      tableData.value = data.Data.slice(
        currentPage.value * pageSize.value,
        (currentPage.value + 1) * pageSize.value
      );
      total.value = data.Data.length; // æ›´æ–°æ€»æ¡æ•°
    } else {
      positionvalue.value = data;
    }

    console.log("WebSocket æŽ¥æ”¶åˆ°æ¶ˆæ¯", data);
  };
  client.value.onclose = function () {
    console.log("WebSocket è¿žæŽ¥å…³é—­");
    timer.value = setTimeout(createSocket, 1000);
    if (isStart.value) {
      timer.value = setTimeout(createSocket, 1000);
    }
  };

  client.value.onerror = function () {};
@@ -95,12 +134,10 @@
const handleCurrentChange = (val) => {
  currentPage.value = val - 1; // æ›´æ–°å½“前页码
};
const account = JSON.parse(localStorage.getItem("user")).userName; // èŽ·å–账号
// const account = JSON.parse(localStorage.getItem("user")).userName; // èŽ·å–账号
//复位按钮方法
const handleBecomeTrue = (val) => {
  BecomeTrue({
    account: account,
  }).then((res) => {
const handleBecomeTrue = () => {
  BecomeTrue().then((res) => {
    if (res.code == 0) {
      ElMessage({
        message: "复位成功",
@@ -114,16 +151,31 @@
    }
  });
};

//清除报警信息方法
const handleClearAlarm = () => {
  ClearAlarm().then((res) => {
    if (res.code == 0) {
      ElMessage({
        message: "清除成功",
        type: "success",
      });
    }
  });
};
const isMin = ref(false); // æ˜¯å¦æœ€å°åŒ–
onMounted(() => {
  isMin.value = window.innerWidth <= 1080; // åˆ¤æ–­æ˜¯å¦æœ€å°åŒ–
  isStart.value = true; // è®¾ç½®ä¸ºå¼€å§‹çŠ¶æ€
  createSocket();
});

onUnmounted(() => {
  isStart.value = false;
  clearInterval(timer.value);
  if (client.value) {
    client.value.close();
  }
  clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>