xzzn/emsfront
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增单体电池、电表、液冷页面

Browse Source
This commit is contained in:
白菜
2025-06-22 17:22:40 +08:00
parent 5ae09461be
commit 201587e13e
9 changed files with 510 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/views/ems/dzjk/sbjk/yl/index.vue Normal file
View File

@ -0,0 +1,144 @@
<template>
<div>
<div class="yl-item-container">
<div class="header">
<div class="header-title">1#液冷</div>
<div>工作模式：<span class="header-values">运行</span></div>
<div>当前温度：<span class="header-values">12&#8451;</span></div>
</div>
<div class="content">
<el-row>
<el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
</el-row>
</div>
</div>
<div class="yl-item-container yl-warn-item-container">
<div class="header">
<div class="header-title">1#液冷</div>
<div>工作模式：<span class="header-values">运行</span></div>
<div>当前温度：<span class="header-values">12&#8451;</span></div>
</div>
<div class="content">
<el-row>
<el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
</el-row>
</div>
</div>
<div class="yl-item-container">
<div class="header">
<div class="header-title">1#液冷</div>
<div>工作模式：<span class="header-values">运行</span></div>
<div>当前温度：<span class="header-values">12&#8451;</span></div>
</div>
<div class="content">
<el-row>
<el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
</el-row>
</div>
</div>
<div class="yl-item-container yl-warn-item-container">
<div class="header">
<div class="header-title">1#液冷</div>
<div>工作模式：<span class="header-values">运行</span></div>
<div>当前温度：<span class="header-values">12&#8451;</span></div>
</div>
<div class="content">
<el-row>
<el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
name:'DzjkSbjkYl',
data() {
return {
tempData:[
{title:'制热开启点',value:12,attr:''},
{title:'制冷开启点',value:23,attr:''},
{title:'高温告警点',value:30,attr:''},
{title:'制热停止点',value:24,attr:''},
{title:'制冷停止点',value:21,attr:''},
{title:'低温告警点',value:10,attr:''},
]
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped lang="scss">
.yl-item-container{
border-radius: 5px;
background-color: #EBF6F6;
&:not(:last-child){
margin-bottom: 25px;
}
.header{
line-height: 40px;
font-size: 14px;
>div{
display: inline-block;
margin-right: 40px;
}
.header-title{
border-radius: 5px 0 5px 0;
color:#ffffff;
width: 120px;
height: 40px;
font-size: 16px;
background-color: #05AEA3;
text-align: center;
}
.header-values{
color: #05AEA3;
font-weight: 500;
}
}
.content{
padding:25px;
.el-row{
background-color: #ffffff;
border:1px solid #eeeeee;
line-height: 14px;
color: #333333;
font-size: 12px;
.el-col{
padding:10px 0;
text-align: center;
}
.el-col:nth-child(-n+3){
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)){
border-right: 1px solid #eeeeee;
}
}
}
}
.yl-warn-item-container{
background-color: #FFF1F0;
.header{
.header-title{
background-color: #FC6B69;
}
.header-values{
color: #FC6B69;
}
}
}
</style>