Compare commits
	
		
			94 Commits 
		
	
	
	@ -0,0 +1,10 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 热水锅炉设备参数列表
 | 
				
			||||
export function hotWaterBoiler(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/device/hotWaterBoiler/list", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,10 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 蒸汽锅炉设备参数列表
 | 
				
			||||
export function steamBoilerBoiler(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/device/steamBoiler/list", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,27 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 查询运行记录
 | 
				
			||||
export function reportSysList(data) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportSys/list", | 
				
			||||
    method: "post", | 
				
			||||
    data, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 编辑运行记录
 | 
				
			||||
export function reportSysEdit(data) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportSys/edit", | 
				
			||||
    method: "put", | 
				
			||||
    data, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 导出
 | 
				
			||||
export function reportSysExport(data) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportSys/export", | 
				
			||||
    method: "post", | 
				
			||||
    data, | 
				
			||||
      responseType: 'blob', | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,9 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
// 历史天气查询
 | 
				
			||||
export function weatherTempData(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/device/cs/getWeatherTemp", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,27 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
export const hotWaterList = (data) => { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportHotWater/list", | 
				
			||||
    method: "post", | 
				
			||||
    data: data, | 
				
			||||
  }); | 
				
			||||
}; | 
				
			||||
 | 
				
			||||
// 导出
 | 
				
			||||
export const hotWaterExport = (data) => { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportHotWater/export", | 
				
			||||
    method: "post", | 
				
			||||
    data, | 
				
			||||
    responseType: "blob", | 
				
			||||
  }); | 
				
			||||
}; | 
				
			||||
// 修改
 | 
				
			||||
export const hotWaterEdit = (data) => { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportHotWater/edit", | 
				
			||||
    method: "put", | 
				
			||||
    data: data, | 
				
			||||
  }); | 
				
			||||
}; | 
				
			||||
@ -0,0 +1,19 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
export const meterReadingsList = (data) => { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportMeterReadings/list", | 
				
			||||
    method: "post", | 
				
			||||
    data: data, | 
				
			||||
  }); | 
				
			||||
}; | 
				
			||||
 | 
				
			||||
// 导出
 | 
				
			||||
export const meterReadingsExport = (data) => { | 
				
			||||
  return request({ | 
				
			||||
    url: "/reportMeterReadings/export", | 
				
			||||
    method: "post", | 
				
			||||
    data, | 
				
			||||
    responseType: "blob", | 
				
			||||
  }); | 
				
			||||
}; | 
				
			||||
@ -0,0 +1,9 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
export const compreReport = (data) => { | 
				
			||||
  return request({ | 
				
			||||
    url: "/compre/report", | 
				
			||||
    method: "post", | 
				
			||||
    data, | 
				
			||||
  }); | 
				
			||||
}; | 
				
			||||
@ -0,0 +1,18 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 数据分析-月
 | 
				
			||||
export function queryMonthDatas(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/analysis/queryMonth", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 数据分析-年
 | 
				
			||||
export function queryYearDatas(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/analysis/queryYear", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,34 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 楼层
 | 
				
			||||
export function hotBuildList(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/space/building/hot_list", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 楼栋能耗环比
 | 
				
			||||
export function hotEnergySum(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/energySum", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 温度变化表
 | 
				
			||||
export function hotWaterTemp(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/waterTemp", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 温度变化表
 | 
				
			||||
export function hotWaterLevel(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/waterLevel", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,10 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 水电表读数
 | 
				
			||||
export function queryDeviceDatas(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/queryDeviceDatas", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
@ -0,0 +1,18 @@
					 | 
				
			||||
import request from "@/utils/request"; | 
				
			||||
 | 
				
			||||
// 设备状态
 | 
				
			||||
export function deviceState(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/device/hotWater/deviceState", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
// 楼栋能耗
 | 
				
			||||
export function hotEnergyQuery(query) { | 
				
			||||
  return request({ | 
				
			||||
    url: "/hot_energy/query", | 
				
			||||
    method: "get", | 
				
			||||
    params: query, | 
				
			||||
  }); | 
				
			||||
} | 
				
			||||
| 
		 Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB  | 
| 
		 Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB  | 
| 
		 After Width: | Height: | Size: 20 KiB  | 
| 
		 Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 24 KiB  | 
| 
		 After Width: | Height: | Size: 14 KiB  | 
| 
		 Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 9.5 KiB  | 
| 
		 Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB  | 
| 
		 Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB  | 
| 
		 Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB  | 
| 
		 Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB  | 
| 
		 Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 468 KiB  | 
| 
		 Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB  | 
| 
		 Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 186 KiB  | 
| 
		 Before Width: | Height: | Size: 284 KiB After Width: | Height: | Size: 284 KiB  | 
| 
		 After Width: | Height: | Size: 119 KiB  | 
| 
		 Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 188 KiB  | 
| 
		 Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB  | 
| 
		 Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 1000 B  | 
| 
		 After Width: | Height: | Size: 5.7 KiB  | 
| 
		 After Width: | Height: | Size: 49 KiB  | 
| 
		 After Width: | Height: | Size: 6.6 KiB  | 
| 
		 After Width: | Height: | Size: 6.0 KiB  | 
| 
		 After Width: | Height: | Size: 1.8 MiB  | 
| 
		 After Width: | Height: | Size: 283 KiB  | 
| 
		 Before Width: | Height: | Size: 10 KiB  | 
| 
		 Before Width: | Height: | Size: 576 KiB After Width: | Height: | Size: 576 KiB  | 
| 
		 After Width: | Height: | Size: 738 KiB  | 
| 
		 After Width: | Height: | Size: 20 KiB  | 
| 
		 After Width: | Height: | Size: 33 KiB  | 
| 
		 After Width: | Height: | Size: 119 KiB  | 
| 
		 After Width: | Height: | Size: 342 KiB  | 
| 
		 Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 410 KiB  | 
| 
		 Before Width: | Height: | Size: 417 KiB After Width: | Height: | Size: 417 KiB  | 
| 
		 After Width: | Height: | Size: 2.8 MiB  | 
| 
		 After Width: | Height: | Size: 13 MiB  | 
| 
		 After Width: | Height: | Size: 6.9 KiB  | 
| 
		 Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB  | 
| 
		 Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB  | 
| 
		 Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB  | 
| 
		 Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB  | 
| 
		 Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB  | 
| 
		 After Width: | Height: | Size: 36 KiB  | 
| 
		 Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB  | 
| 
		 Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB  | 
| 
		 Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB  | 
| 
		 Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB  | 
| 
		 After Width: | Height: | Size: 6.4 KiB  | 
| 
		 After Width: | Height: | Size: 46 KiB  | 
@ -1,63 +1,87 @@
					 | 
				
			||||
import router from './router' | 
				
			||||
import store from './store' | 
				
			||||
import { Message } from 'element-ui' | 
				
			||||
import NProgress from 'nprogress' | 
				
			||||
import 'nprogress/nprogress.css' | 
				
			||||
import { getToken } from '@/utils/auth' | 
				
			||||
import { isPathMatch } from '@/utils/validate' | 
				
			||||
import { isRelogin } from '@/utils/request' | 
				
			||||
import router from "./router"; | 
				
			||||
import store from "./store"; | 
				
			||||
import { Message } from "element-ui"; | 
				
			||||
import NProgress from "nprogress"; | 
				
			||||
import "nprogress/nprogress.css"; | 
				
			||||
import { getToken } from "@/utils/auth"; | 
				
			||||
import { isPathMatch } from "@/utils/validate"; | 
				
			||||
import { isRelogin } from "@/utils/request"; | 
				
			||||
import { | 
				
			||||
  isFullscreenSupported, | 
				
			||||
  requestFullscreen, | 
				
			||||
  isFullscreen, | 
				
			||||
} from "@/utils/fullscreen"; | 
				
			||||
NProgress.configure({ showSpinner: false }); | 
				
			||||
 | 
				
			||||
NProgress.configure({ showSpinner: false }) | 
				
			||||
 | 
				
			||||
const whiteList = ['/login', '/register'] | 
				
			||||
const whiteList = ["/login", "/register"]; | 
				
			||||
 | 
				
			||||
const isWhiteList = (path) => { | 
				
			||||
  return whiteList.some(pattern => isPathMatch(pattern, path)) | 
				
			||||
  return whiteList.some((pattern) => isPathMatch(pattern, path)); | 
				
			||||
}; | 
				
			||||
 | 
				
			||||
let userManuallyExitedFullscreen = false; | 
				
			||||
 | 
				
			||||
// 监听全屏状态变化事件
 | 
				
			||||
document.addEventListener("fullscreenchange", () => { | 
				
			||||
  if (!isFullscreen()) { | 
				
			||||
    userManuallyExitedFullscreen = true; | 
				
			||||
  } | 
				
			||||
}); | 
				
			||||
 | 
				
			||||
router.beforeEach((to, from, next) => { | 
				
			||||
  NProgress.start() | 
				
			||||
  NProgress.start(); | 
				
			||||
  if (getToken()) { | 
				
			||||
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title) | 
				
			||||
    to.meta.title && store.dispatch("settings/setTitle", to.meta.title); | 
				
			||||
    /* has token*/ | 
				
			||||
    if (to.path === '/login') { | 
				
			||||
      next({ path: '/' }) | 
				
			||||
      NProgress.done() | 
				
			||||
    if (to.path === "/login") { | 
				
			||||
      next({ path: "/" }); | 
				
			||||
      NProgress.done(); | 
				
			||||
    } else if (isWhiteList(to.path)) { | 
				
			||||
      next() | 
				
			||||
      if (isFullscreenSupported() && !userManuallyExitedFullscreen) { | 
				
			||||
        const element = document.documentElement; | 
				
			||||
        requestFullscreen(element); | 
				
			||||
      } | 
				
			||||
      next(); | 
				
			||||
    } else { | 
				
			||||
      if (store.getters.roles.length === 0) { | 
				
			||||
        isRelogin.show = true | 
				
			||||
        isRelogin.show = true; | 
				
			||||
        // 判断当前用户是否已拉取完user_info信息
 | 
				
			||||
        store.dispatch('GetInfo').then(() => { | 
				
			||||
          isRelogin.show = false | 
				
			||||
          store.dispatch('GenerateRoutes').then(accessRoutes => { | 
				
			||||
        store | 
				
			||||
          .dispatch("GetInfo") | 
				
			||||
          .then(() => { | 
				
			||||
            isRelogin.show = false; | 
				
			||||
            store.dispatch("GenerateRoutes").then((accessRoutes) => { | 
				
			||||
              // 根据roles权限生成可访问的路由表
 | 
				
			||||
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
 | 
				
			||||
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
 | 
				
			||||
          }) | 
				
			||||
        }).catch(err => { | 
				
			||||
            store.dispatch('LogOut').then(() => { | 
				
			||||
              Message.error(err) | 
				
			||||
              next({ path: '/' }) | 
				
			||||
            }) | 
				
			||||
              router.addRoutes(accessRoutes); // 动态添加可访问路由表
 | 
				
			||||
              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
 | 
				
			||||
            }); | 
				
			||||
          }) | 
				
			||||
          .catch((err) => { | 
				
			||||
            store.dispatch("LogOut").then(() => { | 
				
			||||
              Message.error(err); | 
				
			||||
              next({ path: "/" }); | 
				
			||||
            }); | 
				
			||||
          }); | 
				
			||||
      } else { | 
				
			||||
        next() | 
				
			||||
        if (isFullscreenSupported() && !userManuallyExitedFullscreen) { | 
				
			||||
          const element = document.documentElement; | 
				
			||||
          requestFullscreen(element); | 
				
			||||
        } | 
				
			||||
        next(); | 
				
			||||
      } | 
				
			||||
    } | 
				
			||||
  } else { | 
				
			||||
    // 没有token
 | 
				
			||||
    if (isWhiteList(to.path)) { | 
				
			||||
      // 在免登录白名单,直接进入
 | 
				
			||||
      next() | 
				
			||||
      next(); | 
				
			||||
    } else { | 
				
			||||
      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
 | 
				
			||||
      NProgress.done() | 
				
			||||
      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
 | 
				
			||||
      NProgress.done(); | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
}) | 
				
			||||
}); | 
				
			||||
 | 
				
			||||
router.afterEach(() => { | 
				
			||||
  NProgress.done() | 
				
			||||
}) | 
				
			||||
  NProgress.done(); | 
				
			||||
}); | 
				
			||||
					 | 
				
			||||
@ -0,0 +1,53 @@
					 | 
				
			||||
// 检查浏览器是否支持全屏 API
 | 
				
			||||
function isFullscreenSupported() { | 
				
			||||
  return ( | 
				
			||||
    document.fullscreenEnabled || | 
				
			||||
    document.webkitFullscreenEnabled || | 
				
			||||
    document.mozFullScreenEnabled || | 
				
			||||
    document.msFullscreenEnabled | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
// 进入全屏模式
 | 
				
			||||
function requestFullscreen(element) { | 
				
			||||
  if (element.requestFullscreen) { | 
				
			||||
    element.requestFullscreen(); | 
				
			||||
  } else if (element.webkitRequestFullscreen) { | 
				
			||||
    element.webkitRequestFullscreen(); | 
				
			||||
  } else if (element.mozRequestFullScreen) { | 
				
			||||
    element.mozRequestFullScreen(); | 
				
			||||
  } else if (element.msRequestFullscreen) { | 
				
			||||
    element.msRequestFullscreen(); | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
 | 
				
			||||
// 退出全屏模式
 | 
				
			||||
function exitFullscreen() { | 
				
			||||
  if (document.exitFullscreen) { | 
				
			||||
    document.exitFullscreen(); | 
				
			||||
  } else if (document.webkitExitFullscreen) { | 
				
			||||
    document.webkitExitFullscreen(); | 
				
			||||
  } else if (document.mozCancelFullScreen) { | 
				
			||||
    document.mozCancelFullScreen(); | 
				
			||||
  } else if (document.msExitFullscreen) { | 
				
			||||
    document.msExitFullscreen(); | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
 | 
				
			||||
// 检查当前是否处于全屏状态
 | 
				
			||||
function isFullscreen() { | 
				
			||||
  return ( | 
				
			||||
    document.fullscreenElement || | 
				
			||||
    document.webkitFullscreenElement || | 
				
			||||
    document.mozFullScreenElement || | 
				
			||||
    document.msFullscreenElement | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
 | 
				
			||||
export { | 
				
			||||
  isFullscreenSupported, | 
				
			||||
  requestFullscreen, | 
				
			||||
  exitFullscreen, | 
				
			||||
  isFullscreen, | 
				
			||||
}; | 
				
			||||
@ -0,0 +1,721 @@
					 | 
				
			||||
<template> | 
				
			||||
  <div class="monitor"> | 
				
			||||
    <div class="monitor-top"> | 
				
			||||
      <img | 
				
			||||
        class="title-left" | 
				
			||||
        src="../../../assets/images/title-left.png" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="title-center" | 
				
			||||
        src="../../../assets/images/title-center.png" | 
				
			||||
        alt="" | 
				
			||||
        @click="goSys" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="title-right" | 
				
			||||
        src="../../../assets/images/title-right.png" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <div class="sys-title" @click="goSys">空调风柜监控系统</div> | 
				
			||||
      <!-- logo --> | 
				
			||||
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> | 
				
			||||
      <div class="nowTime">{{ formattedDate }}</div> | 
				
			||||
      <div class="monitor-time">已监测时长:{{ dayData }}天</div> | 
				
			||||
      <img | 
				
			||||
        class="icon_warning" | 
				
			||||
        src="../../../assets/images/warning.png" | 
				
			||||
        title="报警记录" | 
				
			||||
        @click="goWarning" | 
				
			||||
        v-if="isShowWarning" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="icon_home" | 
				
			||||
        src="../../../assets/images/icon_home.png" | 
				
			||||
        title="首页" | 
				
			||||
        @click="goSys" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="back-icon" | 
				
			||||
        src="../../../assets/images/back-icon.png" | 
				
			||||
        title="返回" | 
				
			||||
        @click="goBack" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
    </div> | 
				
			||||
    <div class="app-container"> | 
				
			||||
      <div class="left-tree"> | 
				
			||||
        <!-- 为 el-tree 设置一个固定的高度和滚动条 --> | 
				
			||||
        <div class="tree-div"> | 
				
			||||
          <el-tree | 
				
			||||
            ref="tree" | 
				
			||||
            :data="treeData" | 
				
			||||
            node-key="id" | 
				
			||||
            :default-expand-all="false" | 
				
			||||
            :default-expanded-keys="expandedKeys" | 
				
			||||
            :auto-expand-parent="true" | 
				
			||||
            icon-class="none" | 
				
			||||
            @node-expand="handleNodeExpand" | 
				
			||||
            @node-collapse="handleNodeCollapse" | 
				
			||||
            :highlight-current="true" | 
				
			||||
            @node-click="handleNodeClick" | 
				
			||||
          > | 
				
			||||
            <template #default="{ node }"> | 
				
			||||
              <span class="custom-tree-node"> | 
				
			||||
                <!-- 根据节点状态动态设置图标类名 --> | 
				
			||||
                <div class="tree-left"> | 
				
			||||
                  <i :class="getIconClass(node)" class="custom-tree-icon"></i> | 
				
			||||
                  <span class="tree-label">{{ node.label }}</span> | 
				
			||||
                </div> | 
				
			||||
              </span> | 
				
			||||
            </template> | 
				
			||||
          </el-tree> | 
				
			||||
        </div> | 
				
			||||
      </div> | 
				
			||||
      <damper-monitor | 
				
			||||
        :currentId="currentId" | 
				
			||||
        :currentName="currentName" | 
				
			||||
        ref="damperMonitorRef" | 
				
			||||
        v-if="isShowdamper" | 
				
			||||
      ></damper-monitor> | 
				
			||||
      <normal-monitor | 
				
			||||
        :currentId="currentId" | 
				
			||||
        :currentName="currentName" | 
				
			||||
        ref="normalMonitorRef" | 
				
			||||
        v-else | 
				
			||||
      ></normal-monitor> | 
				
			||||
    </div> | 
				
			||||
  </div> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
import { runTime } from "@/api/centerairC/sysMonitor"; | 
				
			||||
import { alarmRecordList } from "@/api/alarm/alarmRecord"; | 
				
			||||
import { getDay } from "@/utils/datetime"; | 
				
			||||
import { spaceTree } from "@/api/region"; | 
				
			||||
import damperMonitor from "./components/damperMonitor.vue"; | 
				
			||||
import normalMonitor from "./components/normalMonitor.vue"; | 
				
			||||
export default { | 
				
			||||
  components: { damperMonitor, normalMonitor }, | 
				
			||||
  name: "asSysMonitorDetails", | 
				
			||||
  data() { | 
				
			||||
    return { | 
				
			||||
      currentDate: new Date(), | 
				
			||||
      nowTimer: null, | 
				
			||||
      isShowWarning: false, //是否有报警 | 
				
			||||
      dayData: "", //监测天数 | 
				
			||||
      treeData: [], | 
				
			||||
      defaultProps: { | 
				
			||||
        children: "children", | 
				
			||||
        label: "label", | 
				
			||||
      }, | 
				
			||||
      deviceList: [], | 
				
			||||
      expandedKeys: [], | 
				
			||||
      currentId: "", //当前选中高亮的id | 
				
			||||
      currentName: "", //当前选中的名称 | 
				
			||||
      currentLevel: "", //当前节点的层级 | 
				
			||||
      currentParentId: "", //当前节点的上级的id | 
				
			||||
 | 
				
			||||
      backwaterObj: {}, //回水温度 | 
				
			||||
      airValveObj: {}, //风阀调节 | 
				
			||||
      airValveBackObj: {}, //风阀反馈 | 
				
			||||
      waterValveObj: {}, //水阀调节 | 
				
			||||
      startControlObj: {}, //启停控制 | 
				
			||||
      runStatusObj: {}, //运行状态 | 
				
			||||
      airSupplyObj: {}, //送风温度 | 
				
			||||
      pressureObj: {}, //压差 | 
				
			||||
      automaticObj: {}, //手自动状态 | 
				
			||||
      backAirObj: {}, //回风温度 | 
				
			||||
      faultAlarmObj: {}, //故障报警 | 
				
			||||
      waterSupplyObj: {}, //供水温度 | 
				
			||||
 | 
				
			||||
      tableData: [], //系统状态表格数据 | 
				
			||||
      temValue: "℃", //回风温度 | 
				
			||||
      valvePercent: "%", //阀比例 | 
				
			||||
      runStatus: false, //运行状态 | 
				
			||||
      autoStatus: false, //手自动状态 | 
				
			||||
      startStatus: false, //启停控制 | 
				
			||||
      frequency: "v", | 
				
			||||
      isOpenTimeSwitch: false, | 
				
			||||
      delayList: [], | 
				
			||||
      currentWeekday: "", | 
				
			||||
 | 
				
			||||
      isShowdamper: false, | 
				
			||||
    }; | 
				
			||||
  }, | 
				
			||||
  computed: { | 
				
			||||
    formattedDate() { | 
				
			||||
      const year = this.currentDate.getFullYear(); | 
				
			||||
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); | 
				
			||||
      const day = String(this.currentDate.getDate()).padStart(2, "0"); | 
				
			||||
      const hours = String(this.currentDate.getHours()).padStart(2, "0"); | 
				
			||||
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); | 
				
			||||
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); | 
				
			||||
      const weekDays = [ | 
				
			||||
        "星期日", | 
				
			||||
        "星期一", | 
				
			||||
        "星期二", | 
				
			||||
        "星期三", | 
				
			||||
        "星期四", | 
				
			||||
        "星期五", | 
				
			||||
        "星期六", | 
				
			||||
      ]; | 
				
			||||
      const weekDay = weekDays[this.currentDate.getDay()]; | 
				
			||||
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
  watch: { | 
				
			||||
    temValue(newVal) { | 
				
			||||
      let valueWithoutTem = newVal.replace(/℃/g, ""); | 
				
			||||
      if (valueWithoutTem === "") { | 
				
			||||
        this.temValue = "℃"; | 
				
			||||
      } else { | 
				
			||||
        this.temValue = valueWithoutTem + "℃"; | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
    valvePercent(newVal) { | 
				
			||||
      // 去除输入值中的 % | 
				
			||||
      let valueWithoutPercent = newVal.replace(/%/g, ""); | 
				
			||||
      // 如果输入值为空,保持 % | 
				
			||||
      if (valueWithoutPercent === "") { | 
				
			||||
        this.temValue = "%"; | 
				
			||||
      } else { | 
				
			||||
        // 否则在输入值后面添加 % | 
				
			||||
        this.temValue = valueWithoutPercent + "%"; | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
    frequency(newVal) { | 
				
			||||
      let valueWithoutFrequency = newVal.replace(/v/g, ""); | 
				
			||||
      if (valueWithoutFrequency === "") { | 
				
			||||
        this.temValue = "v"; | 
				
			||||
      } else { | 
				
			||||
        this.temValue = valueWithoutFrequency + "v"; | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
  created() { | 
				
			||||
    const weekdays = [ | 
				
			||||
      "星期日", | 
				
			||||
      "星期一", | 
				
			||||
      "星期二", | 
				
			||||
      "星期三", | 
				
			||||
      "星期四", | 
				
			||||
      "星期五", | 
				
			||||
      "星期六", | 
				
			||||
    ]; | 
				
			||||
    const date = new Date(); | 
				
			||||
    const dayIndex = date.getDay(); | 
				
			||||
    this.currentWeekday = weekdays[dayIndex]; | 
				
			||||
    console.log("今天是星期几", this.currentWeekday); | 
				
			||||
  }, | 
				
			||||
  mounted() { | 
				
			||||
    this.requestFullscreen(); | 
				
			||||
    // 首次进入页面时执行 | 
				
			||||
    this.getSysBuild(); | 
				
			||||
    this.getAlarnStatus(); | 
				
			||||
    this.getDayData(); | 
				
			||||
    // 每秒更新一次时间 | 
				
			||||
    this.nowTimer = setInterval(() => { | 
				
			||||
      this.currentDate = new Date(); | 
				
			||||
    }, 1000); | 
				
			||||
  }, | 
				
			||||
  beforeDestroy() { | 
				
			||||
    // 组件销毁前清除定时器 | 
				
			||||
    if (this.nowTimer) { | 
				
			||||
      clearInterval(this.nowTimer); | 
				
			||||
    } | 
				
			||||
  }, | 
				
			||||
  methods: { | 
				
			||||
    // 全屏操作 | 
				
			||||
    requestFullscreen() { | 
				
			||||
      const element = document.documentElement; | 
				
			||||
      console.log("全屏了吗"); | 
				
			||||
      if (element.requestFullscreen) { | 
				
			||||
        element.requestFullscreen(); | 
				
			||||
      } else if (element.mozRequestFullScreen) { | 
				
			||||
        // Firefox | 
				
			||||
        element.mozRequestFullScreen(); | 
				
			||||
      } else if (element.webkitRequestFullscreen) { | 
				
			||||
        // Chrome, Safari and Opera | 
				
			||||
        element.webkitRequestFullscreen(); | 
				
			||||
      } else if (element.msRequestFullscreen) { | 
				
			||||
        // IE/Edge | 
				
			||||
        element.msRequestFullscreen(); | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
    // 退出全屏 | 
				
			||||
    exitFullscreen() { | 
				
			||||
      if (document.exitFullscreen) { | 
				
			||||
        document.exitFullscreen(); | 
				
			||||
      } else if (document.mozCancelFullScreen) { | 
				
			||||
        // Firefox | 
				
			||||
        document.mozCancelFullScreen(); | 
				
			||||
      } else if (document.webkitExitFullscreen) { | 
				
			||||
        // Chrome, Safari and Opera | 
				
			||||
        document.webkitExitFullscreen(); | 
				
			||||
      } else if (document.msExitFullscreen) { | 
				
			||||
        // IE/Edge | 
				
			||||
        document.msExitFullscreen(); | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
    // 进入系统首页 | 
				
			||||
    goSys() { | 
				
			||||
      // this.exitFullscreen(); | 
				
			||||
      this.$router.push("/"); | 
				
			||||
    }, | 
				
			||||
    // 返回上一页 | 
				
			||||
    goBack() { | 
				
			||||
      window.history.go(-2); | 
				
			||||
    }, | 
				
			||||
    // 监测天数 | 
				
			||||
    getDayData() { | 
				
			||||
      runTime().then((res) => { | 
				
			||||
        if (res.code == 200) { | 
				
			||||
          this.dayData = res.data.runTime; | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    // 报警列表 | 
				
			||||
    getAlarnStatus() { | 
				
			||||
      let data = { | 
				
			||||
        pageNum: 1, | 
				
			||||
        pageSize: 10, | 
				
			||||
        status: "0", | 
				
			||||
      }; | 
				
			||||
      let timeArr = [getDay(0), getDay(0)]; | 
				
			||||
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { | 
				
			||||
        if (res.code == 200 && res.rows.length > 0) { | 
				
			||||
          this.isShowWarning = true; | 
				
			||||
        } else { | 
				
			||||
          this.isShowWarning = false; | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    goWarning() { | 
				
			||||
      // this.exitFullscreen(); | 
				
			||||
      this.$router.push("/alarm/alarmRecord"); | 
				
			||||
    }, | 
				
			||||
    // 判断对象是否有效(不为空且不为 undefined) | 
				
			||||
    isObjectValid(obj) { | 
				
			||||
      return obj && Object.keys(obj).length > 0; | 
				
			||||
    }, | 
				
			||||
    getSysBuild() { | 
				
			||||
      spaceTree().then((res) => { | 
				
			||||
        if (res.code == 200) { | 
				
			||||
          // 只需要保留热水的系统 | 
				
			||||
          console.log("楼栋返回值", res); | 
				
			||||
          let newRes = { ...res }; | 
				
			||||
 | 
				
			||||
          if (newRes.data && newRes.data[0] && newRes.data[0].children) { | 
				
			||||
            newRes.data[0].children = newRes.data[0].children.filter((item) => { | 
				
			||||
              // 假设子项有一个 label属性,用于检查是否包含 "热水" | 
				
			||||
              return item.label && item.label.includes("空调风柜"); | 
				
			||||
            }); | 
				
			||||
          } | 
				
			||||
          // 指定要保留的最大层级(从 1 开始计数),这里假设指定为第 5 级 | 
				
			||||
          const targetLevel = 5; | 
				
			||||
          // 从 data[0] 开始处理,当前层级为 1 | 
				
			||||
          if (newRes.data[0]) { | 
				
			||||
            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); | 
				
			||||
          } | 
				
			||||
          console.log("筛选后的新结果", newRes); | 
				
			||||
          this.treeData = newRes.data; | 
				
			||||
          this.$nextTick(() => { | 
				
			||||
            // 默认展开节点 | 
				
			||||
            this.getExpandedKeys(this.treeData, 1); | 
				
			||||
            if (this.treeData.length > 0) { | 
				
			||||
              // 找到最后一层的第一个子节点 | 
				
			||||
              const lastLevelFirstChild = this.findLastLevelFirstChild( | 
				
			||||
                this.treeData[0] | 
				
			||||
              ); | 
				
			||||
              // this.$refs.tree.setCurrentKey( | 
				
			||||
              //   this.treeData[0].children[0].children[0].children[0].id | 
				
			||||
              // ); | 
				
			||||
              // 设置当前选中的节点,默认高亮 | 
				
			||||
              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id); | 
				
			||||
              // 更新当前节点的信息 | 
				
			||||
              this.currentId = lastLevelFirstChild.id; | 
				
			||||
              this.currentLevel = lastLevelFirstChild.level; | 
				
			||||
              this.currentName = lastLevelFirstChild.label; | 
				
			||||
              console.log("当前选中节点ID", this.currentId); | 
				
			||||
              console.log("当前选中节点层级", this.currentLevel); | 
				
			||||
              console.log("当前选中节点名称", this.currentName); | 
				
			||||
              //  传给子组件,触发子组件getWindList() | 
				
			||||
              if ( | 
				
			||||
                this.currentName.includes("新风阀") || | 
				
			||||
                this.currentName.includes("AHU") | 
				
			||||
              ) { | 
				
			||||
                this.isShowdamper = true; | 
				
			||||
                this.$nextTick(() => { | 
				
			||||
                  this.$refs.damperMonitorRef.getWindList(); | 
				
			||||
                }); | 
				
			||||
              } else { | 
				
			||||
                this.isShowdamper = false; | 
				
			||||
                this.$nextTick(() => { | 
				
			||||
                  this.$refs.normalMonitorRef.getWindList(); | 
				
			||||
                }); | 
				
			||||
              } | 
				
			||||
            } | 
				
			||||
          }); | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    // 递归函数,用于去除指定层级往后的 children 数据 | 
				
			||||
    removeChildrenAfterLevel(obj, currentLevel, targetLevel) { | 
				
			||||
      if (currentLevel >= targetLevel) { | 
				
			||||
        // 当达到指定层级时,将 children 属性置为空数组 | 
				
			||||
        obj.children = []; | 
				
			||||
        return; | 
				
			||||
      } | 
				
			||||
      if (obj.children && obj.children.length > 0) { | 
				
			||||
        // 若存在 children 数组,则递归处理每个子项 | 
				
			||||
        for (let i = 0; i < obj.children.length; i++) { | 
				
			||||
          this.removeChildrenAfterLevel( | 
				
			||||
            obj.children[i], | 
				
			||||
            currentLevel + 1, | 
				
			||||
            targetLevel | 
				
			||||
          ); | 
				
			||||
        } | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
    // 递归函数,找到最后一层的第一个子节点 | 
				
			||||
    findLastLevelFirstChild(node, level = 1) { | 
				
			||||
      if (!node.children || node.children.length === 0) { | 
				
			||||
        return { | 
				
			||||
          id: node.id, | 
				
			||||
          level, | 
				
			||||
          label: node.label, | 
				
			||||
        }; | 
				
			||||
      } | 
				
			||||
      return this.findLastLevelFirstChild(node.children[0], level + 1); | 
				
			||||
    }, | 
				
			||||
    // 默认只展示一二级菜单 | 
				
			||||
    getExpandedKeys(nodes, level) { | 
				
			||||
      nodes.forEach((node) => { | 
				
			||||
        if (level <= this.currentId + 4) { | 
				
			||||
          this.expandedKeys.push(node.id); | 
				
			||||
        } | 
				
			||||
        if (node.children) { | 
				
			||||
          this.getExpandedKeys(node.children, level + 1); | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    // 更换图标 | 
				
			||||
    getIconClass(node) { | 
				
			||||
      // console.log("当前图标的节点内容", node); | 
				
			||||
      if (node.level === 5) { | 
				
			||||
        // 5级菜单时的图标 | 
				
			||||
        if (node.expanded) { | 
				
			||||
          return "el-icon-document-opened"; // 5级菜单展开时的图标类名 | 
				
			||||
        } | 
				
			||||
        return "el-icon-document"; // 5级菜单收缩时的图标类名 | 
				
			||||
      } | 
				
			||||
      if (node.expanded) { | 
				
			||||
        return "el-icon-folder-opened"; // 非5级菜单展开时的图标类名 | 
				
			||||
      } | 
				
			||||
      return "el-icon-folder-add"; // 非5级菜单收缩时的图标类名 | 
				
			||||
    }, | 
				
			||||
    handleNodeExpand(node) { | 
				
			||||
      // 节点展开时触发 | 
				
			||||
    }, | 
				
			||||
    handleNodeCollapse(node) { | 
				
			||||
      // 节点收缩时触发 | 
				
			||||
    }, | 
				
			||||
    // 点击当前节点,保存节点内容 | 
				
			||||
    handleNodeClick(node, data) { | 
				
			||||
      console.log("点击的当前节点", node, data); | 
				
			||||
      if (data.level !== 5) { | 
				
			||||
        console.log("不是第5层000"); | 
				
			||||
        // 设置当前选中的节点,默认高亮 | 
				
			||||
        this.$refs.tree.setCurrentKey(this.currentId); | 
				
			||||
        console.log("当前选中节点ID", this.currentId); | 
				
			||||
        console.log("当前选中节点层级", this.currentLevel); | 
				
			||||
        console.log("当前选中节点名称", this.currentName); | 
				
			||||
      } else { | 
				
			||||
        console.log("第5层111"); | 
				
			||||
        this.currentId = node.id; | 
				
			||||
        this.currentLevel = data.level; | 
				
			||||
        this.currentName = node.label; | 
				
			||||
        // 设置当前选中的节点,默认高亮 | 
				
			||||
        this.$refs.tree.setCurrentKey(this.currentId); | 
				
			||||
        console.log("当前选中节点ID", this.currentId); | 
				
			||||
        console.log("当前选中节点层级", this.currentLevel); | 
				
			||||
        console.log("当前选中节点名称", this.currentName); | 
				
			||||
        // 传给子组件,触发子组件getWindList() | 
				
			||||
        if ( | 
				
			||||
          this.currentName.includes("新风阀") || | 
				
			||||
          this.currentName.includes("AHU") | 
				
			||||
        ) { | 
				
			||||
          this.isShowdamper = true; | 
				
			||||
          this.$nextTick(() => { | 
				
			||||
            this.$refs.damperMonitorRef.getWindList(); | 
				
			||||
          }); | 
				
			||||
        } else { | 
				
			||||
          this.isShowdamper = false; | 
				
			||||
          this.$nextTick(() => { | 
				
			||||
            this.$refs.normalMonitorRef.getWindList(); | 
				
			||||
          }); | 
				
			||||
        } | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
}; | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style lang="scss" scoped> | 
				
			||||
.monitor { | 
				
			||||
  width: 100%; | 
				
			||||
  min-height: 100vh; | 
				
			||||
  background-color: black; | 
				
			||||
  color: #fff; | 
				
			||||
  .monitor-top { | 
				
			||||
    width: 100%; | 
				
			||||
    display: flex; | 
				
			||||
    flex-direction: row; | 
				
			||||
    align-items: flex-start; | 
				
			||||
    justify-content: space-between; | 
				
			||||
    flex-wrap: nowrap; | 
				
			||||
    padding: 0.1rem 0.2rem; | 
				
			||||
    position: relative; | 
				
			||||
    .title-left { | 
				
			||||
      width: 3.41rem; | 
				
			||||
      height: 0.8rem; | 
				
			||||
    } | 
				
			||||
    .title-center { | 
				
			||||
      width: 9.46rem; | 
				
			||||
      height: 0.8rem; | 
				
			||||
    } | 
				
			||||
    .title-right { | 
				
			||||
      width: 5.04rem; | 
				
			||||
      height: 0.78rem; | 
				
			||||
    } | 
				
			||||
    .sys-title { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 40%; | 
				
			||||
      left: 50%; | 
				
			||||
      transform: translate(-50%, -50%); | 
				
			||||
      font-size: 0.28rem; | 
				
			||||
      color: #ffffff; | 
				
			||||
      font-weight: bold; | 
				
			||||
      z-index: 100; | 
				
			||||
      cursor: pointer; | 
				
			||||
    } | 
				
			||||
    .nowTime { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.37rem; | 
				
			||||
      right: 0.6rem; | 
				
			||||
      font-size: 0.18rem; | 
				
			||||
      color: #ffffff; | 
				
			||||
      font-weight: bold; | 
				
			||||
      z-index: 100; | 
				
			||||
    } | 
				
			||||
    .sys-logo { | 
				
			||||
      width: 1.8rem; | 
				
			||||
      height: 0.5rem; | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.26rem; | 
				
			||||
      left: 0.8rem; | 
				
			||||
      z-index: 10; | 
				
			||||
    } | 
				
			||||
    .monitor-time { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.44rem; | 
				
			||||
      left: 4.2rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      font-size: 0.18rem; | 
				
			||||
      color: #ffffff; | 
				
			||||
      font-weight: bold; | 
				
			||||
    } | 
				
			||||
    .icon_warning { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.39rem; | 
				
			||||
      right: 4.4rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      width: 0.35rem; | 
				
			||||
      height: 0.32rem; | 
				
			||||
      margin: 0 0.25rem 0 0.27rem; | 
				
			||||
      cursor: pointer; | 
				
			||||
      /* 添加闪烁动画 */ | 
				
			||||
      animation: blink 1s infinite; | 
				
			||||
    } | 
				
			||||
    @keyframes blink { | 
				
			||||
      100% { | 
				
			||||
        opacity: 1; | 
				
			||||
      } | 
				
			||||
      50% { | 
				
			||||
        opacity: 0; | 
				
			||||
      } | 
				
			||||
    } | 
				
			||||
    .icon_home { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.39rem; | 
				
			||||
      right: 4rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      width: 0.35rem; | 
				
			||||
      height: 0.32rem; | 
				
			||||
      margin: 0 0.2rem 0 0.27rem; | 
				
			||||
      cursor: pointer; | 
				
			||||
    } | 
				
			||||
    .back-icon { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.39rem; | 
				
			||||
      right: 3.7rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      width: 0.35rem; | 
				
			||||
      height: 0.32rem; | 
				
			||||
      cursor: pointer; | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
.app-container { | 
				
			||||
  display: flex; | 
				
			||||
  flex-direction: row; | 
				
			||||
  justify-content: space-between; | 
				
			||||
  align-items: stretch; | 
				
			||||
  height: 100%; | 
				
			||||
  padding: 0.3rem 0.2rem 0 0.35rem; | 
				
			||||
  width: 100%; | 
				
			||||
  .left-tree { | 
				
			||||
    width: 256px; | 
				
			||||
    padding: 15px 10px 10px 10px; | 
				
			||||
    border: 1px solid #004b8c; | 
				
			||||
    .tree-div { | 
				
			||||
      height: 7rem; | 
				
			||||
      overflow-y: auto; | 
				
			||||
    } | 
				
			||||
    .status { | 
				
			||||
      display: flex; | 
				
			||||
      flex-direction: row; | 
				
			||||
      justify-content: space-between; | 
				
			||||
      flex-wrap: wrap; | 
				
			||||
      margin-top: 20px; | 
				
			||||
      .status-li { | 
				
			||||
        width: 50%; | 
				
			||||
        display: flex; | 
				
			||||
        flex-direction: column; | 
				
			||||
        align-items: center; | 
				
			||||
        justify-content: center; | 
				
			||||
        margin-bottom: 15px; | 
				
			||||
      } | 
				
			||||
      .status1, | 
				
			||||
      .status2, | 
				
			||||
      .status3, | 
				
			||||
      .status4 { | 
				
			||||
        display: flex; | 
				
			||||
        flex-direction: row; | 
				
			||||
        align-items: center; | 
				
			||||
        margin-bottom: 5px; | 
				
			||||
      } | 
				
			||||
      .status1::before { | 
				
			||||
        content: ""; | 
				
			||||
        width: 10px; | 
				
			||||
        height: 10px; | 
				
			||||
        border-radius: 50%; | 
				
			||||
        background-color: #00d2ff; | 
				
			||||
        margin-right: 5px; | 
				
			||||
      } | 
				
			||||
      .status2::before { | 
				
			||||
        content: ""; | 
				
			||||
        width: 10px; | 
				
			||||
        height: 10px; | 
				
			||||
        border-radius: 50%; | 
				
			||||
        background-color: #ff2f2f; | 
				
			||||
        margin-right: 5px; | 
				
			||||
      } | 
				
			||||
      .status3::before { | 
				
			||||
        content: ""; | 
				
			||||
        width: 10px; | 
				
			||||
        height: 10px; | 
				
			||||
        border-radius: 50%; | 
				
			||||
        background-color: #ff9908; | 
				
			||||
        margin-right: 5px; | 
				
			||||
      } | 
				
			||||
      .status4::before { | 
				
			||||
        content: ""; | 
				
			||||
        width: 10px; | 
				
			||||
        height: 10px; | 
				
			||||
        border-radius: 50%; | 
				
			||||
        background-color: #7398c7; | 
				
			||||
        margin-right: 5px; | 
				
			||||
      } | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
  .right-monitor { | 
				
			||||
    width: calc(100% - 280px); | 
				
			||||
    display: flex; | 
				
			||||
    flex-direction: column; | 
				
			||||
    justify-content: flex-start; | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
.tree-container { | 
				
			||||
  height: 300px; /* 设置固定高度 */ | 
				
			||||
  overflow-y: auto; /* 启用垂直滚动条 */ | 
				
			||||
} | 
				
			||||
// 滚动条 | 
				
			||||
:-webkit-scrollbar { | 
				
			||||
  width: 10px; /* 滚动条宽度 */ | 
				
			||||
} | 
				
			||||
 | 
				
			||||
::-webkit-scrollbar-track { | 
				
			||||
  background: transparent !important; /* 滚动条轨道背景色 */ | 
				
			||||
} | 
				
			||||
.custom-tree-node { | 
				
			||||
  flex: 1; | 
				
			||||
  display: flex; | 
				
			||||
  align-items: center; | 
				
			||||
  justify-content: space-between; | 
				
			||||
  font-size: 14px; | 
				
			||||
  padding-right: 8px; | 
				
			||||
  .tree-left { | 
				
			||||
    .custom-tree-icon { | 
				
			||||
      margin-right: 5px; | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
.highlight { | 
				
			||||
  background-color: #003863 !important; /* 定义高亮的背景颜色 */ | 
				
			||||
  color: #ffffff !important; | 
				
			||||
  font-weight: bold; | 
				
			||||
} | 
				
			||||
// 手机端样式 | 
				
			||||
@media (min-width: 0px) and (max-width: 990px) { | 
				
			||||
  .app-container { | 
				
			||||
    padding: 0rem 0.2rem 0 0.35rem !important; | 
				
			||||
  } | 
				
			||||
  .app-container .left-tree { | 
				
			||||
    width: 200px !important; | 
				
			||||
    min-height: 340px !important; | 
				
			||||
    padding: 0.15rem 0 !important; | 
				
			||||
  } | 
				
			||||
  .app-container .tree-div { | 
				
			||||
    height: 300px !important; | 
				
			||||
    width: 100%; | 
				
			||||
    overflow-x: hidden !important; | 
				
			||||
  } | 
				
			||||
  .app-container .right-monitor { | 
				
			||||
    width: calc(100% - 210px) !important; | 
				
			||||
  } | 
				
			||||
  .custom-tree-node { | 
				
			||||
    font-size: 12px !important; | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</style> | 
				
			||||
<style scoped> | 
				
			||||
/* 自定义高亮颜色 */ | 
				
			||||
.left-tree | 
				
			||||
  >>> .el-tree--highlight-current | 
				
			||||
  .el-tree-node.is-current | 
				
			||||
  > .el-tree-node__content { | 
				
			||||
  background-color: #285b9e !important; | 
				
			||||
  /* color: #f56c6c;  */ | 
				
			||||
  color: #25f1f8; | 
				
			||||
} | 
				
			||||
/* 手机端样式 */ | 
				
			||||
@media (min-width: 0px) and (max-width: 990px) { | 
				
			||||
  .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon { | 
				
			||||
    padding: 3px !important; | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</style> | 
				
			||||
@ -0,0 +1,20 @@
					 | 
				
			||||
<template> | 
				
			||||
  <div></div> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
export default { | 
				
			||||
  created() { | 
				
			||||
    this.toPage(); | 
				
			||||
  }, | 
				
			||||
  methods: { | 
				
			||||
    toPage() { | 
				
			||||
      console.log("需要跳转的") | 
				
			||||
      // 跳转到展示 | 
				
			||||
      this.$router.push("/boilerMonitorDetails") | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
}; | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style></style> | 
				
			||||
@ -0,0 +1,20 @@
					 | 
				
			||||
<template> | 
				
			||||
  <div></div> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
export default { | 
				
			||||
  created() { | 
				
			||||
    this.toPage(); | 
				
			||||
  }, | 
				
			||||
  methods: { | 
				
			||||
    toPage() { | 
				
			||||
      console.log("需要跳转的") | 
				
			||||
      // 跳转到展示 | 
				
			||||
      this.$router.push("/heatingPumpDetails") | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
}; | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style></style> | 
				
			||||
@ -0,0 +1,703 @@
					 | 
				
			||||
<template> | 
				
			||||
  <div class="monitor" v-loading="loading"> | 
				
			||||
    <div class="monitor-top"> | 
				
			||||
      <img | 
				
			||||
        class="title-left" | 
				
			||||
        src="../../../assets/images/title-left.png" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="title-center" | 
				
			||||
        src="../../../assets/images/title-center.png" | 
				
			||||
        alt="" | 
				
			||||
        @click="goSys" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="title-right" | 
				
			||||
        src="../../../assets/images/title-right.png" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <div class="sys-title" @click="goSys">采暖设备监测</div> | 
				
			||||
      <!-- logo --> | 
				
			||||
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> | 
				
			||||
      <div class="nowTime">{{ formattedDate }}</div> | 
				
			||||
      <div class="monitor-time">已监测时长:{{ dayData }}天</div> | 
				
			||||
      <img | 
				
			||||
        class="icon_warning" | 
				
			||||
        src="../../../assets/images/warning.png" | 
				
			||||
        title="报警记录" | 
				
			||||
        @click="goWarning" | 
				
			||||
        v-if="isShowWarning" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="icon_home" | 
				
			||||
        src="../../../assets/images/icon_home.png" | 
				
			||||
        title="首页" | 
				
			||||
        @click="goSys" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
      <img | 
				
			||||
        class="back-icon" | 
				
			||||
        src="../../../assets/images/back-icon.png" | 
				
			||||
        title="返回" | 
				
			||||
        @click="goBack" | 
				
			||||
        alt="" | 
				
			||||
      /> | 
				
			||||
    </div> | 
				
			||||
    <div class="hotWater-div"> | 
				
			||||
      <div | 
				
			||||
        class="hotWater-li" | 
				
			||||
        v-for="(boiler, index) in hotWaterBoilerData" | 
				
			||||
        :key="index" | 
				
			||||
      > | 
				
			||||
        <div class="special-div one"> | 
				
			||||
          <div class="special-top"> | 
				
			||||
            <div class="special-title"> | 
				
			||||
              <div class="title-left"> | 
				
			||||
                <div>{{ boiler.name }}</div> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
          </div> | 
				
			||||
          <div class="hotWater"> | 
				
			||||
            <img | 
				
			||||
              class="hotWater-img" | 
				
			||||
              src="../../../assets/images/hotWater.png" | 
				
			||||
              alt="" | 
				
			||||
            /> | 
				
			||||
          </div> | 
				
			||||
          <div class="info"> | 
				
			||||
            <div class="hotWater-tem"> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>出水温度:</div> | 
				
			||||
                <div class="pump-data-text"> | 
				
			||||
                  {{ getTemperatureData(boiler, "出水温度") }}℃ | 
				
			||||
                </div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>回水温度:</div> | 
				
			||||
                <div class="pump-data-text"> | 
				
			||||
                  {{ getTemperatureData(boiler, "回水温度") }}℃ | 
				
			||||
                </div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>炉水温度:</div> | 
				
			||||
                <div class="pump-data-text"> | 
				
			||||
                  {{ getTemperatureData(boiler, "炉水温度") }}℃ | 
				
			||||
                </div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>烟道温度:</div> | 
				
			||||
                <div class="pump-data-text"> | 
				
			||||
                  {{ getTemperatureData(boiler, "烟道温度") }}℃ | 
				
			||||
                </div> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
            <div class="port-right"> | 
				
			||||
              <div class="port"> | 
				
			||||
                <div :class="['port-li', getFireSignalClass(boiler, '大火')]"> | 
				
			||||
                  大火控制信号发出 | 
				
			||||
                </div> | 
				
			||||
                <div :class="['port-li', getFireSignalClass(boiler, '小火')]"> | 
				
			||||
                  小火控制信号发出 | 
				
			||||
                </div> | 
				
			||||
                <div class="port-li port-close">燃烧机电源</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="bad-div"> | 
				
			||||
                故障信息:<span class="bad-text">{{ | 
				
			||||
                  getFaultInfo(boiler) | 
				
			||||
                }}</span> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
          </div> | 
				
			||||
        </div> | 
				
			||||
      </div> | 
				
			||||
    </div> | 
				
			||||
    <!-- <div class="hotWater-div"> | 
				
			||||
      <div class="hotWater-li"> | 
				
			||||
        <div class="special-div one"> | 
				
			||||
          <div class="special-top"> | 
				
			||||
            <div class="special-title"> | 
				
			||||
              <div class="title-left"> | 
				
			||||
                <div>1号热水锅炉</div> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
          </div> | 
				
			||||
          <div class="hotWater"> | 
				
			||||
            <img | 
				
			||||
              class="hotWater-img" | 
				
			||||
              src="../../../assets/images/hotWater.png" | 
				
			||||
              alt="" | 
				
			||||
            /> | 
				
			||||
          </div> | 
				
			||||
          <div class="info"> | 
				
			||||
            <div class="hotWater-tem"> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>出水温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>回水温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>炉水温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>烟道温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
            <div class="port-right"> | 
				
			||||
              <div class="port"> | 
				
			||||
                <div class="port-li port-open">大火控制信号发出</div> | 
				
			||||
                <div class="port-li port-close">小伙控制信号发出</div> | 
				
			||||
                <div class="port-li port-close">燃烧机电源</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="bad-div"> | 
				
			||||
                故障信息:<span class="bad-text">炉水温度传感器故障</span> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
          </div> | 
				
			||||
        </div> | 
				
			||||
      </div> | 
				
			||||
      <div class="hotWater-li"> | 
				
			||||
        <div class="special-div one"> | 
				
			||||
          <div class="special-top"> | 
				
			||||
            <div class="special-title"> | 
				
			||||
              <div class="title-left"> | 
				
			||||
                <div>2号热水锅炉</div> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
          </div> | 
				
			||||
          <div class="hotWater"> | 
				
			||||
            <img | 
				
			||||
              class="hotWater-img" | 
				
			||||
              src="../../../assets/images/hotWater.png" | 
				
			||||
              alt="" | 
				
			||||
            /> | 
				
			||||
          </div> | 
				
			||||
          <div class="info"> | 
				
			||||
            <div class="hotWater-tem"> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>出水温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>回水温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>炉水温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="pump-data-li"> | 
				
			||||
                <div>烟道温度:</div> | 
				
			||||
                <div class="pump-data-text">29.7℃</div> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
            <div class="port-right"> | 
				
			||||
              <div class="port"> | 
				
			||||
                <div class="port-li port-open">大火控制信号发出</div> | 
				
			||||
                <div class="port-li port-close">小伙控制信号发出</div> | 
				
			||||
                <div class="port-li port-close">燃烧机电源</div> | 
				
			||||
              </div> | 
				
			||||
              <div class="bad-div"> | 
				
			||||
                故障信息:<span class="bad-text">炉水温度传感器故障</span> | 
				
			||||
              </div> | 
				
			||||
            </div> | 
				
			||||
          </div> | 
				
			||||
        </div> | 
				
			||||
      </div> | 
				
			||||
    </div> --> | 
				
			||||
  </div> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
import { runTime } from "@/api/centerairC/sysMonitor"; | 
				
			||||
import { alarmRecordList } from "@/api/alarm/alarmRecord"; | 
				
			||||
import { hotWaterBoiler } from "@/api/boiler/hotwaterBoiler"; | 
				
			||||
import { getDay } from "@/utils/datetime"; | 
				
			||||
export default { | 
				
			||||
  name: "boilerMonitorDetails", | 
				
			||||
  data() { | 
				
			||||
    return { | 
				
			||||
      loading: false, | 
				
			||||
      currentDate: new Date(), | 
				
			||||
      nowTimer: null, | 
				
			||||
      timer: null, // 用于存储定时器 ID | 
				
			||||
      isShowWarning: false, //是否有报警 | 
				
			||||
      dayData: "", //监测天数 | 
				
			||||
      currentWeekday: "", | 
				
			||||
      // 热水锅炉数据 | 
				
			||||
      hotWaterBoilerData: [], | 
				
			||||
    }; | 
				
			||||
  }, | 
				
			||||
  computed: { | 
				
			||||
    formattedDate() { | 
				
			||||
      const year = this.currentDate.getFullYear(); | 
				
			||||
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); | 
				
			||||
      const day = String(this.currentDate.getDate()).padStart(2, "0"); | 
				
			||||
      const hours = String(this.currentDate.getHours()).padStart(2, "0"); | 
				
			||||
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); | 
				
			||||
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); | 
				
			||||
      const weekDays = [ | 
				
			||||
        "星期日", | 
				
			||||
        "星期一", | 
				
			||||
        "星期二", | 
				
			||||
        "星期三", | 
				
			||||
        "星期四", | 
				
			||||
        "星期五", | 
				
			||||
        "星期六", | 
				
			||||
      ]; | 
				
			||||
      const weekDay = weekDays[this.currentDate.getDay()]; | 
				
			||||
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
  created() { | 
				
			||||
    const weekdays = [ | 
				
			||||
      "星期日", | 
				
			||||
      "星期一", | 
				
			||||
      "星期二", | 
				
			||||
      "星期三", | 
				
			||||
      "星期四", | 
				
			||||
      "星期五", | 
				
			||||
      "星期六", | 
				
			||||
    ]; | 
				
			||||
    const date = new Date(); | 
				
			||||
    const dayIndex = date.getDay(); | 
				
			||||
    this.currentWeekday = weekdays[dayIndex]; | 
				
			||||
    console.log("今天是星期几", this.currentWeekday); | 
				
			||||
  }, | 
				
			||||
  mounted() { | 
				
			||||
    this.getAlarnStatus(); | 
				
			||||
    this.getDayData(); | 
				
			||||
    // 获取当前热水锅炉数据 | 
				
			||||
    this.getHotWaterBoiler(); | 
				
			||||
    // 设置定时器,每 10 秒执行一次 | 
				
			||||
    this.timer = setInterval(() => { | 
				
			||||
      this.getAlarnStatus(); | 
				
			||||
      this.getDayData(); | 
				
			||||
      // 获取当前热水锅炉数据 | 
				
			||||
      this.getHotWaterBoiler(); | 
				
			||||
    }, 10000); | 
				
			||||
  }, | 
				
			||||
  beforeDestroy() { | 
				
			||||
    // 组件销毁前清除定时器 | 
				
			||||
    if (this.timer) { | 
				
			||||
      clearInterval(this.timer); | 
				
			||||
    } | 
				
			||||
    // 组件销毁前清除定时器 | 
				
			||||
    if (this.nowTimer) { | 
				
			||||
      clearInterval(this.nowTimer); | 
				
			||||
    } | 
				
			||||
  }, | 
				
			||||
  methods: { | 
				
			||||
    // Get temperature data by type (keep as is) | 
				
			||||
    getTemperatureData(boiler, type) { | 
				
			||||
      if (!boiler || !boiler.values) return "--"; | 
				
			||||
 | 
				
			||||
      const item = boiler.values.find( | 
				
			||||
        (v) => v.otherName && v.otherName.includes(type) | 
				
			||||
      ); | 
				
			||||
      return item && item.curValue !== null ? item.curValue : "--"; | 
				
			||||
    }, | 
				
			||||
 | 
				
			||||
    // Get fire signal class for individual signals | 
				
			||||
    getFireSignalClass(boiler, signalType) { | 
				
			||||
      if (!boiler || !boiler.values) return "port-close"; | 
				
			||||
 | 
				
			||||
      // Get fire signal values | 
				
			||||
      const fire1Item = boiler.values.find( | 
				
			||||
        (v) => v.otherName && v.otherName.includes("火力1") | 
				
			||||
      ); | 
				
			||||
      const fire2Item = boiler.values.find( | 
				
			||||
        (v) => v.otherName && v.otherName.includes("火力2") | 
				
			||||
      ); | 
				
			||||
 | 
				
			||||
      const fire1Value = | 
				
			||||
        fire1Item && fire1Item.curValue !== null ? fire1Item.curValue : 0; | 
				
			||||
      const fire2Value = | 
				
			||||
        fire2Item && fire2Item.curValue !== null ? fire2Item.curValue : 0; | 
				
			||||
 | 
				
			||||
      // Determine which signal should be open based on the logic: | 
				
			||||
      // 大火: fire1=1 and fire2=1 | 
				
			||||
      // 小火: fire1=1 and fire2=0 | 
				
			||||
      if (signalType === "大火" && fire1Value == 1 && fire2Value == 1) { | 
				
			||||
        return "port-open"; | 
				
			||||
      } else if (signalType === "小火" && fire1Value == 1 && fire2Value == 0) { | 
				
			||||
        return "port-open"; | 
				
			||||
      } else { | 
				
			||||
        return "port-close"; | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
 | 
				
			||||
    // Get fire status text based on both fire signals (for other uses if needed) | 
				
			||||
    getFireStatusText(boiler) { | 
				
			||||
      if (!boiler || !boiler.values) return "未开机"; | 
				
			||||
 | 
				
			||||
      const fire1Item = boiler.values.find( | 
				
			||||
        (v) => v.otherName && v.otherName.includes("火力1") | 
				
			||||
      ); | 
				
			||||
      const fire2Item = boiler.values.find( | 
				
			||||
        (v) => v.otherName && v.otherName.includes("火力2") | 
				
			||||
      ); | 
				
			||||
 | 
				
			||||
      const fire1Value = | 
				
			||||
        fire1Item && fire1Item.curValue !== null ? fire1Item.curValue : 0; | 
				
			||||
      const fire2Value = | 
				
			||||
        fire2Item && fire2Item.curValue !== null ? fire2Item.curValue : 0; | 
				
			||||
 | 
				
			||||
      // If both are 0, boiler is off | 
				
			||||
      if (fire1Value == 0 && fire2Value == 0) { | 
				
			||||
        return "无火信号"; | 
				
			||||
      } | 
				
			||||
      // If fire1 is 1 and fire2 is 0, small fire | 
				
			||||
      else if (fire1Value == 1 && fire2Value == 0) { | 
				
			||||
        return "小火控制信号发出"; | 
				
			||||
      } | 
				
			||||
      // If both fire1 and fire2 are 1, big fire | 
				
			||||
      else if (fire1Value == 1 && fire2Value == 1) { | 
				
			||||
        return "大火控制信号发出"; | 
				
			||||
      } | 
				
			||||
      // Any other case | 
				
			||||
      else { | 
				
			||||
        return "未开机"; | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
 | 
				
			||||
    // Get fault information (placeholder implementation) | 
				
			||||
    // Get fault information based on fault code | 
				
			||||
    getFaultInfo(boiler) { | 
				
			||||
      if (!boiler || !boiler.values) return "无故障"; | 
				
			||||
 | 
				
			||||
      // Find the fault item - you might need to adjust this based on actual data structure | 
				
			||||
      const faultItem = boiler.values.find( | 
				
			||||
        (v) => v.otherName && v.otherName.includes("故障") | 
				
			||||
      ); | 
				
			||||
 | 
				
			||||
      if (!faultItem || faultItem.curValue === null) { | 
				
			||||
        return "无故障"; | 
				
			||||
      } | 
				
			||||
 | 
				
			||||
      // Convert fault code to descriptive text | 
				
			||||
      const faultCode = parseInt(faultItem.curValue); | 
				
			||||
 | 
				
			||||
      switch (faultCode) { | 
				
			||||
        case 0: | 
				
			||||
          return "无故障"; | 
				
			||||
        case 1: | 
				
			||||
          return "炉水温度传感器故障"; | 
				
			||||
        case 2: | 
				
			||||
          return "出水温度传感器故障"; | 
				
			||||
        case 3: | 
				
			||||
          return "回水温度传感器故障"; | 
				
			||||
        case 4: | 
				
			||||
          return "锅炉水位极低"; | 
				
			||||
        case 5: | 
				
			||||
          return "燃烧机故障"; | 
				
			||||
        case 6: | 
				
			||||
          return "炉水超温"; | 
				
			||||
        case 7: | 
				
			||||
          return "循环水流故障"; | 
				
			||||
        case 9: | 
				
			||||
          return "定时时间到关机(正常关机模式)"; | 
				
			||||
        case 11: | 
				
			||||
          return "烟道传感器故障"; | 
				
			||||
        case 12: | 
				
			||||
          return "烟道超温故障"; | 
				
			||||
        case 13: | 
				
			||||
          return "检漏故障"; | 
				
			||||
        default: | 
				
			||||
          return "未知故障"; | 
				
			||||
      } | 
				
			||||
    }, | 
				
			||||
    // 获取热水锅炉数据 | 
				
			||||
    getHotWaterBoiler() { | 
				
			||||
      let queryParams = { | 
				
			||||
        systemType: "3", | 
				
			||||
        type: "0", | 
				
			||||
      }; | 
				
			||||
      hotWaterBoiler(queryParams).then((res) => { | 
				
			||||
        if (res.code == 200) { | 
				
			||||
          console.log("热水锅炉数据", res.rows); | 
				
			||||
          if (res.rows.length > 0) { | 
				
			||||
            this.hotWaterBoilerData = res.rows; | 
				
			||||
          } else { | 
				
			||||
            this.hotWaterBoilerData = []; | 
				
			||||
          } | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    // 进入系统首页 | 
				
			||||
    goSys() { | 
				
			||||
      this.$router.push("/"); | 
				
			||||
    }, | 
				
			||||
    // 返回上一页 | 
				
			||||
    goBack() { | 
				
			||||
      window.history.go(-2); | 
				
			||||
    }, | 
				
			||||
    // 监测天数 | 
				
			||||
    getDayData() { | 
				
			||||
      runTime().then((res) => { | 
				
			||||
        if (res.code == 200) { | 
				
			||||
          this.dayData = res.data.runTime; | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    // 报警列表 | 
				
			||||
    getAlarnStatus() { | 
				
			||||
      let data = { | 
				
			||||
        pageNum: 1, | 
				
			||||
        pageSize: 10, | 
				
			||||
        status: "0", | 
				
			||||
      }; | 
				
			||||
      let timeArr = [getDay(0), getDay(0)]; | 
				
			||||
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { | 
				
			||||
        if (res.code == 200 && res.rows.length > 0) { | 
				
			||||
          this.isShowWarning = true; | 
				
			||||
        } else { | 
				
			||||
          this.isShowWarning = false; | 
				
			||||
        } | 
				
			||||
      }); | 
				
			||||
    }, | 
				
			||||
    goWarning() { | 
				
			||||
      this.$router.push("/alarm/alarmRecord"); | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
}; | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style lang="scss" scoped> | 
				
			||||
.monitor { | 
				
			||||
  width: 100%; | 
				
			||||
  min-height: 100vh; | 
				
			||||
  background-color: black; | 
				
			||||
  color: #fff; | 
				
			||||
  .monitor-top { | 
				
			||||
    width: 100%; | 
				
			||||
    display: flex; | 
				
			||||
    flex-direction: row; | 
				
			||||
    align-items: flex-start; | 
				
			||||
    justify-content: space-between; | 
				
			||||
    flex-wrap: nowrap; | 
				
			||||
    padding: 0.1rem 0.2rem; | 
				
			||||
    position: relative; | 
				
			||||
    .title-left { | 
				
			||||
      width: 3.41rem; | 
				
			||||
      height: 0.8rem; | 
				
			||||
    } | 
				
			||||
    .title-center { | 
				
			||||
      width: 9.46rem; | 
				
			||||
      height: 0.8rem; | 
				
			||||
    } | 
				
			||||
    .title-right { | 
				
			||||
      width: 5.04rem; | 
				
			||||
      height: 0.78rem; | 
				
			||||
    } | 
				
			||||
    .sys-title { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 40%; | 
				
			||||
      left: 50%; | 
				
			||||
      transform: translate(-50%, -50%); | 
				
			||||
      font-size: 0.28rem; | 
				
			||||
      color: #ffffff; | 
				
			||||
      font-weight: bold; | 
				
			||||
      z-index: 100; | 
				
			||||
      cursor: pointer; | 
				
			||||
    } | 
				
			||||
    .nowTime { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.37rem; | 
				
			||||
      right: 0.6rem; | 
				
			||||
      font-size: 0.18rem; | 
				
			||||
      color: #ffffff; | 
				
			||||
      font-weight: bold; | 
				
			||||
      z-index: 100; | 
				
			||||
    } | 
				
			||||
    .sys-logo { | 
				
			||||
      width: 1.8rem; | 
				
			||||
      height: 0.5rem; | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.26rem; | 
				
			||||
      left: 0.8rem; | 
				
			||||
      z-index: 10; | 
				
			||||
    } | 
				
			||||
    .monitor-time { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.44rem; | 
				
			||||
      left: 4.2rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      font-size: 0.18rem; | 
				
			||||
      color: #ffffff; | 
				
			||||
      font-weight: bold; | 
				
			||||
    } | 
				
			||||
    .icon_warning { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.39rem; | 
				
			||||
      right: 4.4rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      width: 0.35rem; | 
				
			||||
      height: 0.32rem; | 
				
			||||
      margin: 0 0.25rem 0 0.27rem; | 
				
			||||
      cursor: pointer; | 
				
			||||
      /* 添加闪烁动画 */ | 
				
			||||
      animation: blink 1s infinite; | 
				
			||||
    } | 
				
			||||
    @keyframes blink { | 
				
			||||
      100% { | 
				
			||||
        opacity: 1; | 
				
			||||
      } | 
				
			||||
      50% { | 
				
			||||
        opacity: 0; | 
				
			||||
      } | 
				
			||||
    } | 
				
			||||
    .icon_home { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.39rem; | 
				
			||||
      right: 4rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      width: 0.35rem; | 
				
			||||
      height: 0.32rem; | 
				
			||||
      margin: 0 0.2rem 0 0.27rem; | 
				
			||||
      cursor: pointer; | 
				
			||||
    } | 
				
			||||
    .back-icon { | 
				
			||||
      position: absolute; | 
				
			||||
      top: 0.39rem; | 
				
			||||
      right: 3.7rem; | 
				
			||||
      z-index: 10; | 
				
			||||
      width: 0.35rem; | 
				
			||||
      height: 0.32rem; | 
				
			||||
      cursor: pointer; | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
  .hotWater-div { | 
				
			||||
    width: 100%; | 
				
			||||
    padding: 0.2rem; | 
				
			||||
    display: flex; | 
				
			||||
    flex-direction: row; | 
				
			||||
    align-content: stretch; | 
				
			||||
    justify-content: space-between; | 
				
			||||
    .hotWater-li { | 
				
			||||
      width: 49%; | 
				
			||||
      .hotWater { | 
				
			||||
        width: 100%; | 
				
			||||
        padding: 0.25rem 0.2rem; | 
				
			||||
        display: flex; | 
				
			||||
        flex-direction: row; | 
				
			||||
        justify-content: center; | 
				
			||||
        align-items: center; | 
				
			||||
        .hotWater-img { | 
				
			||||
          width: 6.4rem; | 
				
			||||
          height: 3.5rem; | 
				
			||||
        } | 
				
			||||
      } | 
				
			||||
      .info { | 
				
			||||
        display: flex; | 
				
			||||
        flex-direction: row; | 
				
			||||
        justify-content: center; /* Center content horizontally */ | 
				
			||||
        align-items: flex-start; /* Align to top */ | 
				
			||||
        width: 100%; | 
				
			||||
        padding: 0 0.25rem 0.15rem 0.7rem; | 
				
			||||
        gap: 0.5rem; /* Add space between elements */ | 
				
			||||
 | 
				
			||||
        .hotWater-tem { | 
				
			||||
          flex: 1; /* Allow to grow */ | 
				
			||||
          min-width: 35%; /* Minimum width */ | 
				
			||||
          background: #262f58; | 
				
			||||
          border-radius: 0.1rem; | 
				
			||||
          font-size: 0.16rem; | 
				
			||||
          display: flex; | 
				
			||||
          flex-direction: column; | 
				
			||||
          padding: 0.25rem 0; | 
				
			||||
          .pump-data-li { | 
				
			||||
            width: 100%; | 
				
			||||
            padding: 0 0.4rem; /* Increase horizontal padding */ | 
				
			||||
            display: flex; | 
				
			||||
            flex-direction: row; | 
				
			||||
            align-items: center; | 
				
			||||
            justify-content: space-between; | 
				
			||||
            margin: 0.25rem 0; | 
				
			||||
            .pump-data-text { | 
				
			||||
              color: #05d120; | 
				
			||||
              font-weight: bold; | 
				
			||||
            } | 
				
			||||
          } | 
				
			||||
        } | 
				
			||||
 | 
				
			||||
        .port-right { | 
				
			||||
          flex: 1; /* Allow to grow */ | 
				
			||||
          display: flex; | 
				
			||||
          flex-direction: column; | 
				
			||||
          padding: 0.25rem 0.6rem; /* Increase horizontal padding */ | 
				
			||||
          min-width: 35%; /* Minimum width */ | 
				
			||||
          .port { | 
				
			||||
            display: flex; | 
				
			||||
            flex-direction: column; | 
				
			||||
            gap: 0.3rem; /* Increase spacing between elements */ | 
				
			||||
            .port-li { | 
				
			||||
              display: flex; | 
				
			||||
              flex-direction: column; | 
				
			||||
              align-items: flex-start; | 
				
			||||
              justify-content: center; | 
				
			||||
              width: 100%; | 
				
			||||
              font-size: 0.16rem; | 
				
			||||
              color: #c9c6c6; | 
				
			||||
              position: relative; | 
				
			||||
              padding-left: 0.3rem; /* Increase left padding for indicator */ | 
				
			||||
            } | 
				
			||||
            .port-open::before, | 
				
			||||
            .port-close::before { | 
				
			||||
              content: ""; | 
				
			||||
              position: absolute; | 
				
			||||
              left: 0; | 
				
			||||
              top: 50%; | 
				
			||||
              transform: translateY(-50%); | 
				
			||||
              width: 0.18rem; /* Slightly larger indicator */ | 
				
			||||
              height: 0.18rem; | 
				
			||||
              border-radius: 50%; | 
				
			||||
              border: 0.02rem solid white; | 
				
			||||
            } | 
				
			||||
 | 
				
			||||
            .port-open::before { | 
				
			||||
              background-color: #00ff00; /* Brighter green for active */ | 
				
			||||
            } | 
				
			||||
 | 
				
			||||
            .port-close::before { | 
				
			||||
              background-color: #666; /* Darker gray for inactive */ | 
				
			||||
            } | 
				
			||||
          } | 
				
			||||
          .bad-div { | 
				
			||||
            margin-top: 0.35rem; /* Increase spacing */ | 
				
			||||
            font-size: 0.16rem; | 
				
			||||
            color: #db4d4d; | 
				
			||||
            .bad-text { | 
				
			||||
              margin-left: 0.15rem; | 
				
			||||
              background: #5581c4; | 
				
			||||
              border-radius: 0.15rem; /* Slightly larger radius */ | 
				
			||||
              padding: 0.15rem 0.2rem; /* More padding */ | 
				
			||||
              color: #fff; | 
				
			||||
              display: inline-block; /* Better text wrapping */ | 
				
			||||
            } | 
				
			||||
          } | 
				
			||||
        } | 
				
			||||
      } | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</style> | 
				
			||||
<style scoped> | 
				
			||||
.special-div .special-title { | 
				
			||||
  padding-left: 0.36rem !important; | 
				
			||||
  font-size: 0.2rem !important; | 
				
			||||
  line-height: 0.23rem !important; | 
				
			||||
  background-size: 1.4rem 0.35rem !important; | 
				
			||||
  background-position: 0px -0.03rem !important; | 
				
			||||
} | 
				
			||||
.special-div .special-top { | 
				
			||||
  padding: 0.04rem 0.26rem 0.04rem 0px; | 
				
			||||
  min-height: 0.37rem; | 
				
			||||
} | 
				
			||||
</style> | 
				
			||||
@ -0,0 +1,20 @@
					 | 
				
			||||
<template> | 
				
			||||
  <div></div> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
export default { | 
				
			||||
  created() { | 
				
			||||
    this.toPage(); | 
				
			||||
  }, | 
				
			||||
  methods: { | 
				
			||||
    toPage() { | 
				
			||||
      console.log("需要跳转的") | 
				
			||||
      // 跳转到展示 | 
				
			||||
      this.$router.push("/hotWaterBoilerDetails") | 
				
			||||
    }, | 
				
			||||
  }, | 
				
			||||
}; | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style></style> | 
				
			||||