mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(web): 新增系统管理功能并优化界面样式
- 更新路由配置，调整页面结构 - 优化主题样式，自定义 ant-design 样式 - 新增全局样式，包括滚动条、按钮、模态框等
This commit is contained in:
zhoumengru
176
web/src/components/monitor/device.vue
Normal file
176
web/src/components/monitor/device.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="device">
|
||||
<div class="device-item" v-for="item in 8" :key="item">
|
||||
<div class="item-header">
|
||||
<div style="display: flex;width: 50%;">
|
||||
<div class="icon-bg"></div>
|
||||
<div class="title">
|
||||
<span class="number">521245786665412</span>
|
||||
<span class="name">逆变器1</span>
|
||||
<span class="number type">逆变器</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<div class="status-item">
|
||||
<span>在线</span>
|
||||
<span class="text">在线状态</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>在线</span>
|
||||
<span class="text">故障状态</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>在线</span>
|
||||
<span class="text">工作状态</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div v-for="info in chunengInfo" :key="info.key">
|
||||
<span class="text">{{ info.label }}：</span>
|
||||
<a-button v-if="info.key === 'realTimeData'" type="primary" size="small" @click="openModal">查看</a-button>
|
||||
<span v-else class="value" >{{ info.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
|
||||
<!-- <p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p> -->
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
modalOpen:false,
|
||||
chunengInfo: [
|
||||
{label:'运行模式',key:'operationMode',value:'并网运行'},
|
||||
{label:'电池储能容量',key:'batteryCapacity',value:'100kWh'},
|
||||
{ label: '实时电压', key: 'voltage', value: '232.5V' },
|
||||
{ label: '功率因数', key: 'powerFactor', value: '0.95' },
|
||||
{ label: '实时电流', key: 'current', value: '0.01A' },
|
||||
{ label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
|
||||
{ label: '实时功率', key: 'power', value: '0.01kW' },
|
||||
{ label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
|
||||
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
||||
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
||||
|
||||
],
|
||||
// guangfuInfo: [
|
||||
// { label: '实时电压', key: 'voltage', value: '232.5V' },
|
||||
// { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
|
||||
// { label: '实时电流', key: 'current', value: '0.01A' },
|
||||
// { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
|
||||
// { label: '实时功率', key: 'power', value: '0.01kW' },
|
||||
// { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
// { label: '实时数据', key: 'realTimeData', value: '0.01kWh' }
|
||||
// ]
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
openModal(){
|
||||
this.modalOpen=true;
|
||||
},
|
||||
handleOk(){
|
||||
this.modalOpen=false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
.device-item {
|
||||
// width: 410px;
|
||||
// height: 340px;
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
padding: 15px;
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
.icon-bg {
|
||||
width: 76px;
|
||||
height: 72px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
|
||||
linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.number {
|
||||
font-size: 12px;
|
||||
}
|
||||
.name {
|
||||
font-size: 14px;
|
||||
}
|
||||
.type {
|
||||
color: #08a5ff;
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
justify-content: space-between;
|
||||
&-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: space-evenly;
|
||||
span:first-child {
|
||||
font-weight: 700;
|
||||
}
|
||||
.text {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
line-height: 45px;
|
||||
margin-top: 15px;
|
||||
padding: 0 10px;
|
||||
.value {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: $text-color;
|
||||
}
|
||||
.video {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
129
web/src/components/monitor/videos.vue
Normal file
129
web/src/components/monitor/videos.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="videos">
|
||||
<div class="video-item" v-for="item in 8" :key="item">
|
||||
<div class="title">
|
||||
<span>xxxxz监控点</span>
|
||||
<img
|
||||
src="@/assets/images/fillScreen.png"
|
||||
alt=""
|
||||
width="23px"
|
||||
style="margin-left: 10px; cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
<div class="video">
|
||||
<video
|
||||
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
|
||||
controls="controls"
|
||||
width="100%"
|
||||
height="100%"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="environment">
|
||||
<div class="item">
|
||||
<div class="title">环境温湿度信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" width="100%" />
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div>点位</div>
|
||||
<div>温度</div>
|
||||
<div>湿度</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>#1</div>
|
||||
<div>20 ℃</div>
|
||||
<div>20%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" style="margin-top: 40px">
|
||||
<div class="title">消防信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" width="100%" />
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div>点位</div>
|
||||
<div>烟感状态</div>
|
||||
</div>
|
||||
<div class="row" v-for="value in 6" :key="value">
|
||||
<div>#{{ value }}</div>
|
||||
<div>xxx</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videos {
|
||||
width: calc(100% - 240px);
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
.video-item {
|
||||
// width: 410px;
|
||||
// height: 340px;
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
padding: 10px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.video {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
width: 220px;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.content {
|
||||
margin-top: 15px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
.header {
|
||||
height: 40px;
|
||||
background: linear-gradient(90deg, #3dfefa33 0%, #00fffb33 50.17%, #3dfefa33 100%), #3dfefa33;
|
||||
}
|
||||
.header,
|
||||
.row {
|
||||
display: flex;
|
||||
div {
|
||||
flex: 1; /* 每列平分宽度 */
|
||||
text-align: center; /* 文字水平居中 */
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中（如果需要） */
|
||||
padding: 10px; /* 可选：添加内边距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user