|
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 |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 342 KiB |
|
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 |
@ -0,0 +1,20 @@ |
|||||||
|
<template> |
||||||
|
<div></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
created() { |
||||||
|
this.toPage(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toPage() { |
||||||
|
console.log("需要跳转的") |
||||||
|
// 跳转到展示 |
||||||
|
this.$router.push("/boilerMonitorDetails") |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style></style> |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<template> |
||||||
|
<div></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
created() { |
||||||
|
this.toPage(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toPage() { |
||||||
|
console.log("需要跳转的") |
||||||
|
// 跳转到展示 |
||||||
|
this.$router.push("/heatingPumpDetails") |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style></style> |
||||||
@ -0,0 +1,269 @@ |
|||||||
|
<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">热水锅炉监测</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> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { runTime } from "@/api/centerairC/sysMonitor"; |
||||||
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
||||||
|
import { getDay } from "@/utils/datetime"; |
||||||
|
export default { |
||||||
|
name: "boilerMonitorDetails", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
currentDate: new Date(), |
||||||
|
nowTimer: null, |
||||||
|
isShowWarning: false, //是否有报警 |
||||||
|
dayData: "", //监测天数 |
||||||
|
currentWeekday: "", |
||||||
|
}; |
||||||
|
}, |
||||||
|
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(); |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
// 组件销毁前清除定时器 |
||||||
|
if (this.nowTimer) { |
||||||
|
clearInterval(this.nowTimer); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 进入系统首页 |
||||||
|
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.61rem; |
||||||
|
} |
||||||
|
.sys-title { |
||||||
|
position: absolute; |
||||||
|
top: 40%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
font-size: 0.28rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
.nowTime { |
||||||
|
position: absolute; |
||||||
|
top: 0.3rem; |
||||||
|
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.33rem; |
||||||
|
right: 4.4rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.3rem; |
||||||
|
height: 0.27rem; |
||||||
|
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.33rem; |
||||||
|
right: 4rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.3rem; |
||||||
|
height: 0.27rem; |
||||||
|
margin: 0 0.2rem 0 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.back-icon { |
||||||
|
position: absolute; |
||||||
|
top: 0.33rem; |
||||||
|
right: 3.7rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.3rem; |
||||||
|
height: 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</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> |
||||||