hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

南门水房大屏页面

Browse Source
This commit is contained in:
hzz 2023-06-15 18:03:49 +08:00
parent 2fc3bc7487
commit 2f099876c8
1 changed files with 154 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/views/Waterhouse/index.vue
View File

@ -3,10 +3,46 @@
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`南门水房物联监测系统`" :titleTip="[]" :typeFun="['time']"
:alarmType="['']"></header2>
<div class="main">
<!-- <el-image style="height: 400px" :src="imgUrl" fit="scale-down" />
<div class="mainChart" ref="mainChart">
</div> -->
<div class="left-title">数据监测</div>
<div class="lt-data item">
<div class="left">进水</div>
<div class="center">20</div>
</div>
<div class="rt-data item">
<div class="left">出水</div>
<div class="center">20</div>
</div>
<div class="lb-data item">
<div class="left">消耗</div>
<div class="center">20</div>
</div>
<div class="rb-data item">
<div class="left">用电</div>
<div class="center">20</div>
</div>
<!-- 总体趋势图 -->
<div class="rt-title">总体趋势图</div>
<div class="rt-radio">
<el-radio-group v-model="date" size="small">
<el-radio-button label="1" >本月</el-radio-button>
<el-radio-button label="2" >近三月</el-radio-button>
<el-radio-button label="3" >近一年</el-radio-button>
</el-radio-group>
</div>
<div class="mainChart" ref="mainChart"></div>
<div class="math-content"></div>
<!-- 效益&效率 -->
<div class="rb-title">效益&效率</div>
<div class="rb-content">
<div class="progress">
<el-progress type="circle" width="150" :percentage="25" />
<div class="progress-text">效益</div>
</div>
<div class="progress">
<el-progress type="circle" width="150" :percentage="25" />
<div class="progress-text">效率</div>
</div>
</div>
</div>
</div>
</template>
@ -18,13 +54,14 @@ let imgUrl = require('@/assets/img/water_room.png')
const { proxy } = getCurrentInstance() as any
const mainChart = ref(null)
let chart = null
let date = ref('1')
const colors = ['#5470C6', '#91CC75', '#EE6666'];
function init() {
chart = proxy.$echarts.init(mainChart.value,'dark');
chart = proxy.$echarts.init(mainChart.value, 'dark');
let option = {
title: {
text: '水房数据大屏',
},
// title: {
// text: '水房数据大屏',
// },
color: colors,
tooltip: {
trigger: 'axis'
@ -84,7 +121,7 @@ function init() {
chart.setOption(option);
}
onMounted(() => {
//init()
init()
})
</script>
<style module>
@ -99,13 +136,119 @@ onMounted(() => {
</style>
<style scoped>
.main {
position: relative;
width: 100%;
height: 980px;
background: url('/src/assets/img/water_house_bg.jpg') no-repeat;
}
.left-title {
position: absolute;
top: 94px;
left: 129px;
font-size: 28px;
color: #fff;
/* font-weight: bold; */
}
.lt-data {
position: absolute;
top: 513px;
left: 176px;
}
.rt-data {
position: absolute;
top: 508px;
left: 581px;
}
.lb-data {
position: absolute;
top: 743px;
left: 176px;
}
.rb-data {
position: absolute;
top: 726px;
left: 581px;
}
.item {
width: 200px;
height: 86px;
font-size: 24px;
color: #fff;
}
.left {
padding-left: 10px;
text-align: left;
line-height: 50px;
}
.center {
line-height: 36px;
}
.rt-title {
position: absolute;
top: 47px;
right: 536px;
font-size: 28px;
color: #fff;
}
.rt-radio {
position: absolute;
top: 96px;
right: 78px;
background: #110C2C;
}
.mainChart {
width: 100%;
height: 580px;
position: absolute;
width: 650px;
height: 270px;
top: 136px;
left: 1227px;
}
.math-content {
position: absolute;
width: 555px;
height: 100px;
top: 418px;
left: 1271px;
background: rgba(255, 255, 255, 0.4);
}
.rb-title {
position: absolute;
bottom: 399px;
right: 551px;
font-size: 28px;
color: #fff;
}
.rb-content {
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
bottom: 120px;
right: 64px;
width: 650px;
height: 270px;
font-size: 16px;
}
:deep(.progress .el-progress__text) {
font-weight: bold;
font-size: 30px !important;
}
.progress-text {
font-size: 18px;
font-weight: bold;
margin-top: 5px;
color: #fff;
}
</style>