|
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> |
||||