Compare commits
74 Commits
v-lijf43
99 changed files with 17586 additions and 5323 deletions
@ -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 const compreReport = (data) => { |
||||
return request({ |
||||
url: "/compre/report", |
||||
method: "post", |
||||
data, |
||||
}); |
||||
}; |
||||
|
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: 248 KiB After Width: | Height: | Size: 468 KiB |
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 188 KiB |
|
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 |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 13 MiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 36 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 => { |
||||
// 根据roles权限生成可访问的路由表
|
||||
router.addRoutes(accessRoutes) // 动态添加可访问路由表
|
||||
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
|
||||
}) |
||||
}).catch(err => { |
||||
store.dispatch('LogOut').then(() => { |
||||
Message.error(err) |
||||
next({ path: '/' }) |
||||
}) |
||||
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: "/" }); |
||||
}); |
||||
}); |
||||
} 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,714 @@
|
||||
<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="" |
||||
/> |
||||
<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.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.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.69rem; |
||||
} |
||||
.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> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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> |
||||
File diff suppressed because it is too large
Load Diff
@ -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,702 @@
|
||||
<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="" |
||||
/> |
||||
<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.69rem; |
||||
} |
||||
.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> |
||||
@ -0,0 +1,911 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="主机编号" prop="deviceNum"> |
||||
<el-select |
||||
v-model="queryParams.deviceNum" |
||||
placeholder="请选择主机编号" |
||||
clearable |
||||
> |
||||
<el-option label="1号主机" value="1" /> |
||||
<el-option label="2号主机" value="2" /> |
||||
<el-option label="3号主机" value="3" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="日期范围" prop="timeArr"> |
||||
<el-date-picker |
||||
style="width: 220px" |
||||
v-model="timeArr" |
||||
type="daterange" |
||||
unlink-panels |
||||
range-separator="~" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
value-format="yyyy-MM-dd" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<!-- <el-col :span="1.5"> |
||||
<div class="success-btn"> |
||||
<el-button |
||||
type="success" |
||||
@click="leadingPrint" |
||||
icon="el-icon-printer" |
||||
size="mini" |
||||
>打印</el-button |
||||
> |
||||
</div> |
||||
</el-col> --> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="postList" stripe> |
||||
<!-- <el-table-column label="主机id" align="center" prop="deviceNum" /> --> |
||||
<el-table-column label="时间" align="center" prop="curTime" /> |
||||
<el-table-column label="蒸发器"> |
||||
<el-table-column |
||||
label="冷冻水进水温度(℃)" |
||||
align="center" |
||||
prop="tempInChillerWater" /> |
||||
<el-table-column |
||||
label="冷冻水出水温度(℃)" |
||||
align="center" |
||||
prop="tempOutChillerWater" /> |
||||
<el-table-column label="设计流量(%)" align="center" prop="designFlow" /> |
||||
<el-table-column |
||||
label="蒸发器压力(kpa)" |
||||
align="center" |
||||
prop="pressEvapSaturation" /> |
||||
<el-table-column |
||||
label="蒸发器饱和温度(℃)" |
||||
align="center" |
||||
prop="tempEvapSaturation" /> |
||||
<el-table-column |
||||
label="蒸发器趋近温度(℃)" |
||||
align="center" |
||||
prop="tempEvapApproaching" |
||||
/></el-table-column> |
||||
<el-table-column label="冷凝器"> |
||||
<el-table-column |
||||
label="冷却水进水温度(℃)" |
||||
align="center" |
||||
prop="tempInCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水出水温度(℃)" |
||||
align="center" |
||||
prop="tempOutCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器压力(kpa)" |
||||
align="center" |
||||
prop="pressCondenserSaturation" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器饱和温度(℃)" |
||||
align="center" |
||||
prop="tempCondenserSaturation" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器趋近温度(℃)" |
||||
align="center" |
||||
prop="tempCondenserApproaching" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="系统"> |
||||
<el-table-column |
||||
label="冷冻水设定值(℃)" |
||||
align="center" |
||||
prop="setChillerWater" |
||||
/> |
||||
<el-table-column label="冷水机需求(%)" align="center" prop="setLoad" /> |
||||
<el-table-column label="总电流(%)" align="center" prop="currentTotal" /> |
||||
<el-table-column |
||||
label="总输入功率(kw)" |
||||
align="center" |
||||
prop="inputPowerTotal" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机1_压缩比" |
||||
align="center" |
||||
prop="ratioCompOne" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机2_压缩比" |
||||
align="center" |
||||
prop="ratioCompTwo" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机3_压缩比" |
||||
align="center" |
||||
prop="ratioCompThree" |
||||
/> |
||||
<el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" /> |
||||
<el-table-column |
||||
label="运行中的压缩机数量" |
||||
align="center" |
||||
prop="runCompNum" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷冻泵"> |
||||
<el-table-column |
||||
label="冷冻水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyChiller" |
||||
/> |
||||
<el-table-column |
||||
label="冷冻水出水压力(kpa)" |
||||
align="center" |
||||
prop="pressOutChillerWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷冻水进水压力(kpa)" |
||||
align="center" |
||||
prop="pressInChillerWater" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷却泵"> |
||||
<el-table-column |
||||
label="冷却水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyCooling" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水出水压力(kpa)" |
||||
align="center" |
||||
prop="pressOutCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水进水压力(kpa)" |
||||
align="center" |
||||
prop="pressInCoolingWater" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷却塔"> |
||||
<el-table-column |
||||
label="冷却塔水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyCoolingTower" |
||||
/> |
||||
<el-table-column |
||||
label="冷却塔运行数量" |
||||
align="center" |
||||
prop="runCoolingTower" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" /> |
||||
<el-table-column |
||||
label="室外湿度(%)" |
||||
align="center" |
||||
prop="humidityOutdoor" |
||||
/> |
||||
<el-table-column |
||||
label="恒压补水罐压力(Mpa)" |
||||
align="center" |
||||
prop="pressConstantWaterTank" |
||||
/> |
||||
<el-table-column label="巡查记录人" align="center" prop="recorder" /> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['device:ledger:edit']" |
||||
>修改</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或修改设备台账对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="主机编号" prop="deviceNum"> |
||||
<el-select |
||||
v-model="form.deviceNum" |
||||
placeholder="请选择主机编号" |
||||
disabled |
||||
> |
||||
<el-option label="1号主机" value="1" /> |
||||
<el-option label="2号主机" value="2" /> |
||||
<el-option label="3号主机" value="3" /> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设计流量(%)" prop="designFlow"> |
||||
<el-input v-model="form.designFlow" placeholder="请输入流量(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater"> |
||||
<el-input |
||||
v-model="form.tempInChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater"> |
||||
<el-input |
||||
v-model="form.tempOutChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation"> |
||||
<el-input |
||||
v-model="form.tempEvapSaturation" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching"> |
||||
<el-input |
||||
v-model="form.tempEvapApproaching" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation"> |
||||
<el-input |
||||
v-model="form.pressEvapSaturation" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器压力(kpa)" |
||||
prop="pressCondenserSaturation" |
||||
> |
||||
<el-input |
||||
v-model="form.pressCondenserSaturation" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater"> |
||||
<el-input |
||||
v-model="form.tempInCoolingWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater"> |
||||
<el-input |
||||
v-model="form.tempOutCoolingWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器饱和温度(℃)" |
||||
prop="tempCondenserSaturation" |
||||
> |
||||
<el-input |
||||
v-model="form.tempCondenserSaturation" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器趋近温度(℃)" |
||||
prop="tempCondenserApproaching" |
||||
> |
||||
<el-input |
||||
v-model="form.tempCondenserApproaching" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水设定值(℃)" prop="setChillerWater"> |
||||
<el-input |
||||
v-model="form.setChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷水机需求(%)" prop="setLoad"> |
||||
<el-input v-model="form.setLoad" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="总输入功率(kw)" prop="inputPowerTotal"> |
||||
<el-input |
||||
v-model="form.inputPowerTotal" |
||||
placeholder="请输入功率(kw)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="总电流(%)" prop="currentTotal"> |
||||
<el-input v-model="form.currentTotal" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机1_压缩比" prop="ratioCompOne"> |
||||
<el-input |
||||
v-model="form.ratioCompOne" |
||||
placeholder="请输入压缩比" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机2_压缩比" prop="ratioCompTwo"> |
||||
<el-input |
||||
v-model="form.ratioCompTwo" |
||||
placeholder="请输入压缩比" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机3_压缩比" prop="ratioCompThree"> |
||||
<el-input |
||||
v-model="form.ratioCompThree" |
||||
placeholder="请输入压缩比" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="膨胀阀开度(%)" prop="openExv"> |
||||
<el-input v-model="form.openExv" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="运行中的压缩机数量" prop="runCompNum"> |
||||
<el-input |
||||
v-model="form.runCompNum" |
||||
placeholder="请输入数量" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller"> |
||||
<el-input v-model="form.openExv" placeholder="请输入频率(hz)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷冻水出水压力(kpa)" |
||||
prop="pressOutChillerWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressOutChillerWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷冻水进水压力(kpa)" |
||||
prop="pressInChillerWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressInChillerWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却水出水压力(kpa)" |
||||
prop="pressOutCoolingWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressOutCoolingWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却水进水压力(kpa)" |
||||
prop="pressInCoolingWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressInCoolingWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling"> |
||||
<el-input |
||||
v-model="form.frequencyCooling" |
||||
placeholder="请输入频率(hz)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却塔水泵频率(hz)" |
||||
prop="frequencyCoolingTower" |
||||
> |
||||
<el-input |
||||
v-model="form.frequencyCoolingTower" |
||||
placeholder="请输入频率(hz)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却塔运行数量" prop="runCoolingTower"> |
||||
<el-input |
||||
v-model="form.runCoolingTower" |
||||
placeholder="请输入数量" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="恒压补水罐压力(Mpa)" |
||||
prop="pressConstantWaterTank" |
||||
> |
||||
<el-input |
||||
v-model="form.pressConstantWaterTank" |
||||
placeholder="请输入压力(Mpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="室外温度" prop="tempOutdoor"> |
||||
<el-input |
||||
v-model="form.tempOutdoor" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="室外湿度(%)" prop="humidityOutdoor"> |
||||
<el-input |
||||
v-model="form.humidityOutdoor" |
||||
placeholder="请输入湿度(%)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="巡查记录人" prop="recorder"> |
||||
<el-input |
||||
v-model="form.recorder" |
||||
placeholder="请输入巡查记录人" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input |
||||
v-model="form.remark" |
||||
placeholder="请输入备注" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog |
||||
:visible.sync="dialogPrintVisible" |
||||
title="打印预览" |
||||
class="print-dialog" |
||||
> |
||||
<div id="report" ref="report" class="report"> |
||||
<table |
||||
border="1" |
||||
style=" |
||||
table-layout: fixed; |
||||
width: 100%; |
||||
border: 1px solid #e2e6f0; |
||||
margin-bottom: 35px; |
||||
" |
||||
> |
||||
<thead> |
||||
<tr> |
||||
<th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th> |
||||
</tr> |
||||
<tr> |
||||
<th>主机id</th> |
||||
<th>时间</th> |
||||
<th colspan="6">蒸发器</th> |
||||
<th colspan="5">冷凝器</th> |
||||
<th colspan="7">系统</th> |
||||
<th colspan="3">冷冻泵</th> |
||||
<th colspan="3">冷却泵</th> |
||||
<th colspan="2">冷却塔</th> |
||||
<th>室外温度(℃)</th> |
||||
<th>室外湿度(%)</th> |
||||
<th>恒压补水罐压力(Mpa)</th> |
||||
<th>巡查记录人</th> |
||||
</tr> |
||||
<tr> |
||||
<th></th> |
||||
<th></th> |
||||
<th>冷冻水进水温度(℃)</th> |
||||
<th>冷冻水出水温度(℃)</th> |
||||
<th>设计流量(%)</th> |
||||
<th>蒸发器压力(kpa)</th> |
||||
<th>蒸发器饱和温度(℃)</th> |
||||
<th>蒸发器趋近温度(℃)</th> |
||||
<th>冷却水进水温度(℃)</th> |
||||
<th>冷却水出水温度(℃)</th> |
||||
<th>冷凝器压力(kpa)</th> |
||||
<th>冷凝器饱和温度(℃)</th> |
||||
<th>冷凝器趋近温度(℃)</th> |
||||
<th>冷冻水设定值(℃)</th> |
||||
<th>冷水机需求(%)</th> |
||||
<th>总电流(%)</th> |
||||
<th>总输入功率(kw)</th> |
||||
<th>压缩机1_压缩比</th> |
||||
<th>膨胀阀开度(%)</th> |
||||
<th>运行中的压缩机数量</th> |
||||
<th>冷冻水泵频率(hz)</th> |
||||
<th>冷冻水出水压力(kpa)</th> |
||||
<th>冷冻水进水压力(kpa)</th> |
||||
<th>冷却水泵频率(hz)</th> |
||||
<th>冷却水出水压力(kpa)</th> |
||||
<th>冷却水进水压力(kpa)</th> |
||||
<th>冷却塔水泵频率(hz)</th> |
||||
<th>冷却塔运行数量</th> |
||||
<th></th> |
||||
<th></th> |
||||
<th></th> |
||||
<th></th> |
||||
</tr> |
||||
</thead> |
||||
<tr v-for="(item, index) in postList" :key="index"> |
||||
<td align="center" v-for="(value, key) in item" :key="key"> |
||||
{{ value }} |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
<div |
||||
class="detail" |
||||
style=" |
||||
display: flex; |
||||
flex-direction: row; |
||||
font-size: 14px; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
width: 40%; |
||||
color: #ffffff; |
||||
" |
||||
> |
||||
<div>操作员: {{ this.userName }}</div> |
||||
<div class="print-date">日期： {{ this.operationDate }}</div> |
||||
</div> |
||||
</div> |
||||
<el-row type="flex" justify="end" style="margin-top: 0.2rem"> |
||||
<el-col :span="2"> |
||||
<el-button type="info" @click="dialogPrintVisible = false" |
||||
>取消</el-button |
||||
> |
||||
</el-col> |
||||
<el-col :span="2" style="margin-left: 60px"> |
||||
<el-button type="success" @click="surePrint">确认</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
reportSysList, |
||||
reportSysEdit, |
||||
reportSysExport, |
||||
} from "@/api/centerairC/hostRunReport"; |
||||
import { format2, getDay } from "@/utils/datetime"; |
||||
export default { |
||||
name: "ledger", |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
deviceNum: "", |
||||
params: { |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
deviceName: [ |
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }, |
||||
], |
||||
}, |
||||
dialogPrintVisible: false, |
||||
userName: "", //操作员 |
||||
operationDate: getDay(0), //操作日期 |
||||
titleDate: "", |
||||
}; |
||||
}, |
||||
created() { |
||||
this.userName = sessionStorage.getItem("userName"); |
||||
this.queryParams.deviceNum = "1"; |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeArr); |
||||
if (!this.timeArr) { |
||||
this.$nextTick(() => { |
||||
this.timeArr = []; |
||||
this.queryParams.params.startTime = ""; |
||||
this.queryParams.params.endTime = ""; |
||||
}); |
||||
} else { |
||||
this.queryParams.params.startTime = this.timeArr[0]; |
||||
this.queryParams.params.endTime = this.timeArr[1]; |
||||
} |
||||
}, |
||||
/** 查询设备台账列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
reportSysList(this.queryParams).then((response) => { |
||||
if (response.code == 200) { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
} else { |
||||
this.postList = []; |
||||
this.total = 0; |
||||
this.loading = false; |
||||
} |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
id: "", |
||||
deviceNum: "", |
||||
curTime: "", |
||||
tempInChillerWater: "", |
||||
tempOutChillerWater: "", |
||||
designFlow: "", |
||||
pressEvapSaturation: "", |
||||
tempEvapSaturation: "", |
||||
tempEvapApproaching: "", |
||||
tempInCoolingWater: "", |
||||
tempOutCoolingWater: "", |
||||
pressCondenserSaturation: "", |
||||
tempCondenserSaturation: "", |
||||
tempCondenserApproaching: "", |
||||
setChillerWater: "", |
||||
setLoad: "", |
||||
currentTotal: "", |
||||
inputPowerTotal: "", |
||||
ratioCompOne: "", |
||||
openExv: "", |
||||
runCompNum: "", |
||||
frequencyChiller: "", |
||||
pressOutChillerWater: "", |
||||
pressInChillerWater: "", |
||||
frequencyCooling: "", |
||||
pressOutCoolingWater: "", |
||||
pressInCoolingWater: "", |
||||
frequencyCoolingTower: "", |
||||
runCoolingTower: "", |
||||
pressConstantWaterTank: "", |
||||
tempOutdoor: "", |
||||
humidityOutdoor: "", |
||||
recorder: "", |
||||
remark: "", |
||||
ratioCompTwo: "", |
||||
ratioCompThree: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form = Object.assign({}, row); |
||||
this.open = true; |
||||
this.title = "修改主机运行记录"; |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
reportSysEdit(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
reportSysExport(this.queryParams).then((res) => { |
||||
console.log("导出返回", res); |
||||
// 请求的结果就是文件 |
||||
// 创建一个blob URL，用于生成下载链接 |
||||
const url = window.URL.createObjectURL(new Blob([res])); |
||||
// 创建一个<a>元素，并设置其href和download属性 |
||||
const link = document.createElement("a"); |
||||
link.href = url; |
||||
link.setAttribute("download", "主机运行记录报表.xls"); // 设置下载的文件名 |
||||
// 模拟点击下载链接 |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
document.body.removeChild(link); |
||||
// 释放blob URL资源 |
||||
window.URL.revokeObjectURL(url); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
}, |
||||
// 打印 |
||||
leadingPrint() { |
||||
this.dialogPrintVisible = true; |
||||
}, |
||||
// 打印 |
||||
surePrint() { |
||||
const printHTML = document.querySelector("#report").innerHTML; |
||||
// 将打印的区域赋值，进行打印 |
||||
window.document.body.innerHTML = printHTML; |
||||
window.print(); // 调用window打印方法 |
||||
window.location.reload(); // 打印完成后重新加载页面 |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */ |
||||
@media (max-width: 2000px) { |
||||
::v-deep .el-dialog { |
||||
width: 800px !important; |
||||
} |
||||
::v-deep .print-dialog .el-dialog { |
||||
width: 1200px !important; |
||||
} |
||||
::v-deep .el-dialog .el-form-item__label { |
||||
width: 150px !important; |
||||
} |
||||
::v-deep .el-dialog .el-form-item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
} |
||||
@media (min-width: 2000px) { |
||||
// ::v-deep .el-dialog { |
||||
// width: 8rem !important; |
||||
// } |
||||
|
||||
// ::v-deep .el-dialog .el-form-item__label { |
||||
// width: 1.5rem !important; |
||||
// } |
||||
// ::v-deep .el-dialog .el-form-item { |
||||
// display: flex; |
||||
// flex-direction: row; |
||||
// align-items: center; |
||||
// } |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,430 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="日期" prop="msgCode"> |
||||
<el-date-picker |
||||
style="width: auto" |
||||
v-model="monthValue" |
||||
type="month" |
||||
placeholder="选择月" |
||||
value-format="yyyy-MM" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
stripe |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column label="日期" align="center" prop="dateAndWeek" /> |
||||
<el-table-column label="最高气温" align="center" prop="maxTemp" /> |
||||
<el-table-column label="最低气温" align="center" prop="minTemp" /> |
||||
<el-table-column label="天气" align="center" prop="weatherConditions" /> |
||||
<el-table-column label="风向" align="center" prop="windDirection" /> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { weatherTempData } from "@/api/centerairC/temHistory"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
name: "temHistoryQuery", |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
monthValue: "", |
||||
chartInstance: null, |
||||
option: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
// 获取当前日期 |
||||
const currentDate = new Date(); |
||||
// 获取当前年份 |
||||
const year = currentDate.getFullYear(); |
||||
// 获取当前月份，注意月份是从 0 开始的，所以要加 1 |
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0"); |
||||
// 格式化日期为 yyyy-MM 格式 |
||||
this.monthValue = `${year}-${month}`; |
||||
}, |
||||
mounted() { |
||||
this.getList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.getChartData(); |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
// 修改颜色 |
||||
if (columnIndex === 1) { |
||||
return "color: #fd1e00;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 2) { |
||||
return "color: #3390ff;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 4) { |
||||
return "color: #75d148;!important;text-align:center"; |
||||
} |
||||
// return "text-align:center"; |
||||
}, |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
getChartData() { |
||||
this.loading = true; |
||||
this.queryParams.pageNum = 0; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("图表参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
console.log("处理值然后渲染"); |
||||
if (response.rows.length > 0) { |
||||
let data = response.rows; |
||||
let timeValue = []; |
||||
let hightValue = []; |
||||
let lowValue = []; |
||||
data.forEach((element) => { |
||||
timeValue.push(element.weatherDate); |
||||
hightValue.push(element.maxTemp); |
||||
lowValue.push(element.minTemp); |
||||
}); |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: timeValue, |
||||
}, |
||||
yAxis: { |
||||
name: "℃", |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: hightValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(18, 126, 226)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(18, 126, 226)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
{ |
||||
data: lowValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(250, 169, 19)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(250, 169, 19)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
}, |
||||
{ |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
this.getChartData(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.handleQuery(); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.queryParams.pageNum = 1; |
||||
this.queryParams.pageSize = 32; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
if (response.code == 200) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数 |
||||
var filterVal = [ |
||||
"dateAndWeek", |
||||
"maxTemp", |
||||
"minTemp", |
||||
"weatherConditions", |
||||
"windDirection", |
||||
]; |
||||
const data = this.formatJson(filterVal, response.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "历史天气报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
this.option = { |
||||
tooltip: { |
||||
// 设置触发方式为 axis，鼠标移动到 x 轴对应位置时触发 |
||||
trigger: "axis", |
||||
textStyle: { |
||||
// 设置提示框内文字的大小 |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
// textStyle: { |
||||
// // 设置图例文字的大小 |
||||
// fontSize: 14 |
||||
// } |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, //y轴单位文字大小 |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最高气温", |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最低气温", |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.charts { |
||||
height: 3rem !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,777 @@
|
||||
<template> |
||||
<div class="main-body"> |
||||
<div class="irregular-border"> |
||||
<div class="main-content"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<div class="time-label">时间类型:</div> |
||||
<el-radio-group |
||||
v-model="dateType" |
||||
style="margin-right: 0.24rem" |
||||
@change="updateDateType" |
||||
> |
||||
<el-radio label="hour">小时</el-radio> |
||||
<el-radio label="day">日</el-radio> |
||||
<el-radio label="month">月</el-radio> |
||||
<el-radio label="year">年</el-radio> |
||||
</el-radio-group> |
||||
<el-date-picker |
||||
v-model="timeDate" |
||||
:default-time="['00:00:00', '23:59:59']" |
||||
type="datetimerange" |
||||
range-separator="至" |
||||
v-if="dateType == 'hour'" |
||||
placeholder="选择日期" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="daterange" |
||||
v-if="dateType == 'day'" |
||||
:key="this.dateType" |
||||
range-separator="至" |
||||
value-format="yyyy-MM-dd" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="monthDate" |
||||
type="monthrange" |
||||
v-if="dateType == 'month'" |
||||
:key="this.dateType" |
||||
range-separator="至" |
||||
start-placeholder="开始月份" |
||||
end-placeholder="结束月份" |
||||
value-format="yyyy-MM" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<div |
||||
class="years-div" |
||||
v-if="dateType == 'year'" |
||||
:key="this.dateType" |
||||
> |
||||
<el-date-picker |
||||
v-model="startYear" |
||||
type="year" |
||||
placeholder="选择开始年份" |
||||
style="width: 180px" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
<div class="years-word">至</div> |
||||
<el-date-picker |
||||
v-model="endYear" |
||||
type="year" |
||||
placeholder="选择结束年份" |
||||
style="width: 180px" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
</div> |
||||
<div class="success-btn" style="margin-left: 0.24rem"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="goExport()">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="choice"> |
||||
<div |
||||
class="mr20" |
||||
v-for="(item, index) in timeData2" |
||||
:key="index" |
||||
@click="handleEnter(index, $event)" |
||||
:class="{ timeStyle: currentIndex == index }" |
||||
> |
||||
{{ item.title }} |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table :data="tableData" stripe> |
||||
<el-table-column label="时间" align="center" prop="time" /> |
||||
<el-table-column |
||||
label="总用电量(kwh)" |
||||
align="center" |
||||
prop="electValue" |
||||
/> |
||||
<el-table-column |
||||
label="总产冷量(kw)" |
||||
align="center" |
||||
prop="coldValue" |
||||
/> |
||||
<el-table-column |
||||
label="总热水补水量(t)" |
||||
align="center" |
||||
prop="hotValue" |
||||
/> |
||||
<el-table-column |
||||
label="总蒸汽流量(t)" |
||||
align="center" |
||||
prop="steamValue" |
||||
/> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getTableData" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { format2 } from "@/utils/datetime"; |
||||
import * as echarts from "echarts"; |
||||
import { compreReport } from "@/api/comprehensiveEnergy/systemEnergy"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
listLoading: false, |
||||
dateType: "hour", //默认选择小时 |
||||
timeDate: [], //小时值 |
||||
dayDate: [], //日值 |
||||
monthDate: [], //月值 |
||||
startYear: "", //开始年份 |
||||
endYear: "", //结束年份 |
||||
startTime: "", //开始日期 |
||||
endTime: "", //结束日期 |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
tableData: [], |
||||
exportData: [], |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
brokenInstanc: null, |
||||
brokenOption: {}, |
||||
timeData2: [ |
||||
{ title: "总用电量" }, |
||||
{ title: "总产冷量" }, |
||||
{ title: "总热水补水量" }, |
||||
{ title: "总蒸汽流量" }, |
||||
], |
||||
currentIndex: 0, |
||||
brokenData1: [], |
||||
brokenData2: [], |
||||
brokenData3: [], |
||||
brokenData4: [], |
||||
brokenTime: [], |
||||
useWater: 0, |
||||
useWaterRadio: 0, |
||||
useElect: 0, |
||||
useElectRadio: 0, |
||||
useUnit: 0, |
||||
useUnitRadio: 0, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.getTableData(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||
this.titleDate = format2(start) + "至" + format2(end); |
||||
}, |
||||
|
||||
// 选择时间类型 |
||||
updateDateType() { |
||||
// this.dateType = this.radio; |
||||
console.log(this.dateType); |
||||
(this.timeDate = []), //小时值 |
||||
(this.dayDate = []), //日值 |
||||
(this.monthDate = []), //月值 |
||||
(this.startYear = ""), //开始年份 |
||||
(this.endYear = ""); //结束年份 |
||||
}, |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeform.time1); |
||||
if (!this.dayDate) { |
||||
this.$nextTick(() => { |
||||
this.dayDate = []; |
||||
}); |
||||
} |
||||
if (!this.monthDate) { |
||||
this.$nextTick(() => { |
||||
this.monthDate = []; |
||||
}); |
||||
} |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
console.log("this.dateType", this.dateType); |
||||
console.log("this.timeDate", this.timeDate); |
||||
switch (this.dateType) { |
||||
case "hour": |
||||
if (!this.timeDate) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
this.titleDate = |
||||
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
||||
this.getTableData(); |
||||
} |
||||
break; |
||||
case "day": |
||||
if (this.dayDate.length === 0) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
const newLength = |
||||
new Date(this.dayDate[1]).getTime() - |
||||
new Date(this.dayDate[0]).getTime(); |
||||
const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||
if (dayDiff > 31) { |
||||
this.showMessage( |
||||
"最多只能选择30天区间，请重新选择再查询！", |
||||
"warning" |
||||
); |
||||
} else { |
||||
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||
this.getTableData(); |
||||
} |
||||
} |
||||
break; |
||||
case "month": |
||||
if (this.monthDate.length === 0) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
const [start, end] = this.monthDate; |
||||
const startDate = new Date(start); |
||||
const endDate = new Date(end); |
||||
const startYear = startDate.getFullYear(); |
||||
const startMonth = startDate.getMonth(); |
||||
const endYear = endDate.getFullYear(); |
||||
const endMonth = endDate.getMonth(); |
||||
const monthDiff = |
||||
(endYear - startYear) * 12 + (endMonth - startMonth); |
||||
if (monthDiff > 12) { |
||||
this.showMessage( |
||||
"最多只能选择12个月区间，请重新选择再查询！", |
||||
"warning" |
||||
); |
||||
} else { |
||||
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||
this.getTableData(); |
||||
} |
||||
} |
||||
break; |
||||
case "year": |
||||
if (!this.startYear || !this.endYear) { |
||||
this.showMessage("请选择全年份区间！", "warning"); |
||||
} else if (this.startYear > this.endYear) { |
||||
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||
} else { |
||||
this.titleDate = this.startYear + "至" + this.endYear; |
||||
this.getTableData(); |
||||
} |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}, |
||||
// 显示消息的函数 |
||||
showMessage(message, type) { |
||||
this.$message({ |
||||
message: message, |
||||
type: type, |
||||
}); |
||||
}, |
||||
handleEnter(index) { |
||||
this.currentIndex = index; |
||||
this.renderingBroken(); |
||||
}, |
||||
//请求数据 |
||||
getTableData() { |
||||
if (this.dateType == "hour") { |
||||
this.startTime = format2(this.timeDate[0]); |
||||
this.endTime = format2(this.timeDate[1]); |
||||
} else if (this.dateType == "day") { |
||||
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||
} else if (this.dateType == "month") { |
||||
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||
} else if (this.dateType == "year") { |
||||
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||
} |
||||
let data = { |
||||
timeType: this.dateType, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
pageNum: this.queryParams.pageNum, |
||||
pageSize: this.queryParams.pageSize, |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
|
||||
compreReport(data).then((res) => { |
||||
console.log("表格返回的数据", res); |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.tableData = res.rows; |
||||
this.total = res.total; |
||||
} else { |
||||
this.tableData = []; |
||||
this.total = 0; |
||||
} |
||||
this.getChartData(); |
||||
}); |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
//请求折线图数据 |
||||
getChartData() { |
||||
if ((this.total == 10)) { |
||||
// 防止数据提交重复 |
||||
console.log("不用请求"); |
||||
this.brokenData1 = []; |
||||
this.brokenData2 = []; |
||||
this.brokenData3 = []; |
||||
this.brokenData4 = []; |
||||
this.brokenTime = []; |
||||
if (this.tableData.length > 0) { |
||||
this.exportData = this.tableData; |
||||
this.tableData.forEach((item) => { |
||||
this.brokenData1.push(item.electValue); |
||||
this.brokenData2.push(item.coldValue); |
||||
this.brokenData3.push(item.hotValue); |
||||
this.brokenData4.push(item.steamValue); |
||||
this.brokenTime.push(item.time); |
||||
}); |
||||
this.renderingBroken(); |
||||
} else { |
||||
this.brokenData1 = []; |
||||
this.brokenData2 = []; |
||||
this.brokenData3 = []; |
||||
this.brokenData4 = []; |
||||
this.brokenTime = []; |
||||
} |
||||
this.renderingBroken(); |
||||
} else { |
||||
console.log("图表参数", this.queryParams); |
||||
if (this.dateType == "hour") { |
||||
this.startTime = format2(this.timeDate[0]); |
||||
this.endTime = format2(this.timeDate[1]); |
||||
} else if (this.dateType == "day") { |
||||
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||
} else if (this.dateType == "month") { |
||||
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||
} else if (this.dateType == "year") { |
||||
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||
} |
||||
let data = { |
||||
timeType: this.dateType, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
pageNum: 1, |
||||
pageSize: this.total, |
||||
}; |
||||
compreReport(data).then((res) => { |
||||
console.log("图表返回的数据", res); |
||||
this.brokenData1 = []; |
||||
this.brokenData2 = []; |
||||
this.brokenData3 = []; |
||||
this.brokenData4 = []; |
||||
this.brokenTime = []; |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.exportData = res.rows; |
||||
res.rows.forEach((item) => { |
||||
this.brokenData1.push(item.electValue); |
||||
this.brokenData2.push(item.coldValue); |
||||
this.brokenData3.push(item.hotValue); |
||||
this.brokenData4.push(item.steamValue); |
||||
this.brokenTime.push(item.time); |
||||
}); |
||||
this.renderingBroken(); |
||||
} else { |
||||
this.brokenData1 = []; |
||||
this.brokenData2 = []; |
||||
this.brokenData3 = []; |
||||
this.brokenData4 = []; |
||||
this.brokenTime = []; |
||||
} |
||||
this.renderingBroken(); |
||||
}); |
||||
} |
||||
}, |
||||
renderingBroken() { |
||||
if (this.currentIndex === 0) { |
||||
this.brokenOption.yAxis.name = "kwh"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData1; |
||||
this.brokenOption.series[0].itemStyle.color = "#d48e17"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(212, 142, 23, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(212, 142, 23,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
} else if (this.currentIndex === 1) { |
||||
this.brokenOption.yAxis.name = "kw"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData2; |
||||
this.brokenOption.series[0].itemStyle.color = "#1ab395"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(26, 179, 149, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(26, 179, 149,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
} else if (this.currentIndex === 2) { |
||||
this.brokenOption.yAxis.name = "t"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData3; |
||||
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
} else if (this.currentIndex === 3) { |
||||
this.brokenOption.yAxis.name = "t"; |
||||
this.brokenOption.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
this.brokenOption.series[0].data = this.brokenData4; |
||||
this.brokenOption.series[0].itemStyle.color = "#f1f524"; |
||||
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(241, 245, 36, 0.3)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(241, 245, 36,0)", // 100% 处的颜色 |
||||
}, |
||||
]; |
||||
} |
||||
// 保存当前索引用于闭包 |
||||
const currentIndex = this.currentIndex; |
||||
// 动态设置 tooltip 格式化函数 |
||||
this.brokenOption.tooltip = { |
||||
trigger: "axis", |
||||
formatter: function (params) { |
||||
// 获取当前数据点信息 |
||||
const data = params[0]; |
||||
const month = data.name; |
||||
const value = data.value; |
||||
|
||||
// 根据索引返回不同内容 |
||||
if (currentIndex === 0) { |
||||
return `${month}<br/>总用电量: ${value} 度`; |
||||
} else if (currentIndex === 1) { |
||||
return `${month}<br/>总产冷量: ${value} 千瓦`; |
||||
} else if (currentIndex === 2) { |
||||
return `${month}<br/>总热水补水量: ${value} 吨`; |
||||
} else if (currentIndex === 3) { |
||||
return `${month}<br/>总蒸汽量: ${value} 吨`; |
||||
} |
||||
}, |
||||
}; |
||||
this.brokenOption.xAxis.data = this.brokenTime; |
||||
this.brokenInstanc.setOption(this.brokenOption); |
||||
}, |
||||
// 导出 |
||||
goExport() { |
||||
if (this.exportData) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
// 导出的excel表头字段名，需要导出表格字段名 |
||||
var tHeader = [ |
||||
"时间", |
||||
"总用电量(kwh)", |
||||
"总产冷量(kw)", |
||||
"总热水补水量(t)", |
||||
"总蒸汽流量(t)", |
||||
]; // 导出的excel表头名信息 改参数 |
||||
var filterVal = [ |
||||
"time", |
||||
"electValue", |
||||
"coldValue", |
||||
"hotValue", |
||||
"steamValue", |
||||
]; |
||||
const data = this.formatJson(filterVal, this.exportData); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "系统能耗报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "perWater") { |
||||
return (v[j] * 1000).toFixed(1); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.brokenInstanc.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.brokenInstanc.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||
this.brokenOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
selectedMode: false, // 是否允许图例进行点击 |
||||
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffff", |
||||
fontSize: 16, //这里改字体大小 |
||||
}, |
||||
// left: "73%", |
||||
left: "66%", |
||||
top: "0", |
||||
//图例距离饼图的距离 |
||||
itemGap: 5, |
||||
itemWidth: 10, |
||||
itemHeight: 5, |
||||
}, |
||||
|
||||
grid: { |
||||
top: "10%", |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "5%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
data: this.brokenTime, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
smooth: true, |
||||
showSymbol: false, |
||||
data: this.brokenData1, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#d48e17", //折线点的颜色 |
||||
lineStyle: { |
||||
color: "#d48e17", //折线的颜色 |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
//线性渐变 |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [], |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.brokenInstanc.setOption(this.brokenOption, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.main-content { |
||||
min-height: 6.6rem; |
||||
} |
||||
.choice { |
||||
margin: 20px 0; |
||||
.mr20 { |
||||
padding: 0.05rem 0.2rem; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
} |
||||
} |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
|
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue