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-24 23:50:29 +08:00
parent 6cec2849ba
commit d68d48ddee
13 changed files with 183 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/ems/dzjk/sbjk/bmsdcc/index.vue
View File

@ -26,70 +26,47 @@
</div>
</el-card>
<el-table
class="common-table"
:data="tableData"
stripe
max-height="500"
style="width: 100%;margin-top:25px;">
<el-table-column
prop="name"
width="190"
label="簇号">
</el-table-column>
<el-table-column
label="簇电压"
>
<template slot-scope="scope">
<span>{{scope.row.voltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span>{{scope.row.electric}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span>{{scope.row.soc}} %</span>
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
<template slot-scope="scope">
<span>{{scope.row.maxVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="minVoltage"
label="单体最低电压">
<template slot-scope="scope">
<span>{{scope.row.minVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span>{{scope.row.maxTemperature}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="minTemperature"
label="单体最低温度">
<template slot-scope="scope">
<span>{{scope.row.minTemperature}} &#8451;</span>
</template>
</el-table-column>
class="common-table"
:data="tableData"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
prop=""
label="名称">
<template slot-scope="scope">
<span v-html="scope.row.name"></span>
</template>
</el-table-column>
<el-table-column
prop="average"
label="单体平均值"
>
</el-table-column>
<el-table-column
prop="min"
label="单体最小值">
</el-table-column>
<el-table-column
prop="minID"
label="单体最小值ID">
</el-table-column>
<el-table-column
prop="max"
label="单体最大值">
</el-table-column>
<el-table-column
prop="maxID"
label="单体最大值ID">
</el-table-column>
</el-table>
</el-table>
</div>
</template>
<script>
export default {
name:'DzjkSbjkBmsdcc',
components:{},
data() {
return {
@ -105,10 +82,9 @@ export default {
{label:'绝缘电阻',value:'2000',attr:'',unit:'&Omega;'},
],
tableData:[
{name:'1#电池堆-1#电池簇',voltage:'742.8',electric:'-4.4',soc:'98',maxVoltage:'3.301',minVoltage:'3.102',maxTemperature:'12.8',minTemperature:'11.3'},
{name:'1#电池堆-2#电池簇',voltage:'790.1',electric:'-4.2',soc:'90',maxVoltage:'3.391',minVoltage:'3.192',maxTemperature:'13.5',minTemperature:'11.4'},
{name:'1#电池堆-3#电池簇',voltage:'740.3',electric:'-4.5',soc:'94',maxVoltage:'3.101',minVoltage:'3.198',maxTemperature:'10.9',minTemperature:'11.5'},
{name:'1#电池堆-4#电池簇',voltage:'744.9',electric:'-4.5',soc:'99',maxVoltage:'3.221',minVoltage:'3.234',maxTemperature:'11.4',minTemperature:'11.6'},
{name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'温度（&#8451;）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'SOC（%）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
]
}
},

99
src/views/ems/dzjk/sbjk/bmszl/index.vue
View File

@ -26,45 +26,71 @@
</div>
</el-card>
<el-table
class="common-table"
:data="tableData"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
prop=""
label="名称">
<template slot-scope="scope">
<span v-html="scope.row.name"></span>
</template>
</el-table-column>
<el-table-column
prop="average"
label="单体平均值"
>
</el-table-column>
<el-table-column
prop="min"
label="单体最小值">
</el-table-column>
<el-table-column
prop="minID"
label="单体最小值ID">
</el-table-column>
<el-table-column
prop="max"
label="单体最大值">
</el-table-column>
<el-table-column
prop="maxID"
label="单体最大值ID">
</el-table-column>
</el-table>
class="common-table"
:data="tableData"
stripe
max-height="500"
style="width: 100%;margin-top:25px;">
<el-table-column
prop="name"
width="190"
label="簇号">
</el-table-column>
<el-table-column
label="簇电压"
>
<template slot-scope="scope">
<span>{{scope.row.voltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span>{{scope.row.electric}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span>{{scope.row.soc}} %</span>
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
<template slot-scope="scope">
<span>{{scope.row.maxVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="minVoltage"
label="单体最低电压">
<template slot-scope="scope">
<span>{{scope.row.minVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span>{{scope.row.maxTemperature}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="minTemperature"
label="单体最低温度">
<template slot-scope="scope">
<span>{{scope.row.minTemperature}} &#8451;</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'DzjkSbjkBmszl',
components:{},
data() {
return {
@ -85,9 +111,10 @@ export default {
{label:'绝缘电阻',value:'1000',attr:'',unit:'&Omega;'},
],
tableData:[
{name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'温度（&#8451;）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'SOC（%）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
{name:'1#电池堆-1#电池簇',voltage:'742.8',electric:'-4.4',soc:'98',maxVoltage:'3.301',minVoltage:'3.102',maxTemperature:'12.8',minTemperature:'11.3'},
{name:'1#电池堆-2#电池簇',voltage:'790.1',electric:'-4.2',soc:'90',maxVoltage:'3.391',minVoltage:'3.192',maxTemperature:'13.5',minTemperature:'11.4'},
{name:'1#电池堆-3#电池簇',voltage:'740.3',electric:'-4.5',soc:'94',maxVoltage:'3.101',minVoltage:'3.198',maxTemperature:'10.9',minTemperature:'11.5'},
{name:'1#电池堆-4#电池簇',voltage:'744.9',electric:'-4.5',soc:'99',maxVoltage:'3.221',minVoltage:'3.234',maxTemperature:'11.4',minTemperature:'11.6'},
]
}
},

1
src/views/ems/dzjk/sbjk/index.vue
View File

@ -27,6 +27,7 @@ import { dzjk } from '@/router/ems'
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkSbjk').children//获取到单站监控-设备监控下面的字路由
console.log('设备监控子路由',childrenRoute)
export default {
name:'ZdjkSbjk',
data(){
return {
childrenRoute,

69
src/views/ems/dzjk/sbjk/pcs/index.vue
View File

@ -10,8 +10,8 @@
<div>数据更新时间：2024-10-11 12:00:00</div>
</div>
<div class="pcs-btns">
<el-button type="warning" size="small">警告按钮</el-button>
<el-button size="small">默认按钮</el-button>
<el-button type="warning" size="small" @click="problemSaved">故障复位</el-button>
<el-button size="small" @click="machineClosed">关机</el-button>
</div>
</el-header>
<el-main style="padding: 0">
@ -45,6 +45,7 @@
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
export default {
name:'ZdjkSbjkPcs',
components:{RealTimeBaseInfo},
data() {
return {
@ -67,6 +68,70 @@ export default {
],
}
},
methods:{
problemSaved(){
this.$confirm('确认故障已复位?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
done();
// setTimeout(() => {
instance.confirmButtonLoading = false;
// }, 300);
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在故障复位成功的情况下会走到这里
this.$message({
type: 'success',
message: '故障复位成功!'
});
}).catch(() => {
//取消复位
});
},
machineClosed(){
this.$confirm('确认要关机吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
done();
// setTimeout(() => {
instance.confirmButtonLoading = false;
// }, 300);
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在关机成功的情况下会走到这里
this.$message({
type: 'success',
message: '关机成功!'
});
}).catch(() => {
//取消关机
});
}
}
}
</script>

1
src/views/ems/dzjk/sbjk/ssyx/index.vue
View File

@ -34,6 +34,7 @@ import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
export default {
name:'ZdjkSbjkSsyx',
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
data() {
return {